Tweak styles/story

packages/ui/src/Card/index.stories.tsx

@@ -5,11 +5,8 @@ import { Card } from '.';
 import storiesBg from './storiesBg.png';
 import styled from 'styled-components';
 import { Text } from '../Text';
-import { Tabs } from '../Tabs';
-import { useState } from 'react';
 
 const BgWrapper = styled.div`
-  background: ${props => props.theme.color.base.black};
   padding: ${props => props.theme.spacing(20)};
   position: relative;
 
@@ -20,6 +17,7 @@ const BgWrapper = styled.div`
     filter: blur(4px);
     position: absolute;
     inset: 0;
+    z-index: -1;
   }
 `;
 
@@ -33,35 +31,24 @@ const meta: Meta<typeof Card> = {
       </BgWrapper>
     ),
   ],
+  argTypes: {
+    as: {
+      options: ['section', 'div', 'main'],
+    },
+  },
 };
 export default meta;
 
 type Story = StoryObj<typeof Card>;
 
 export const Basic: Story = {
   args: {
-    as: 'div',
+    as: 'section',
   },
 
   render: function Render({ as }) {
-    const [selectedTab, setSelectedTab] = useState('one');
-
     return (
       <Card as={as} title='Card Title'>
-        <Tabs
-          value={selectedTab}
-          onChange={setSelectedTab}
-          options={[
-            {
-              label: 'One',
-              value: 'one',
-            },
-            {
-              label: 'Two',
-              value: 'two',
-            },
-          ]}
-        />
         <Text p>This is the card content.</Text>
         <Text p>Here is some more content.</Text>
       </Card>

packages/ui/src/Card/index.tsx

@@ -31,7 +31,7 @@ export interface CardProps {
   title?: string;
 }
 
-export const Card = ({ children, as, title }: CardProps) => {
+export const Card = ({ children, as = 'section', title }: CardProps) => {
   return (
     <Root as={as}>
       {title && <Title>{title}</Title>}