@marigold/icons 0.2.0 → 0.3.3

package/src/Icons.stories.mdx

@@ -1,1557 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import {
-  Cancel,
-  Crop,
-  Edit,
-  FormatBold,
-  FormatItalic,
-  FormatSize,
-  HighlightOff,
-  Image,
-  Location,
-  Lock,
-  LockOpen,
-  Pause,
-  PauseAlt,
-  Play,
-  PlayAlt,
-  ResaleEdit,
-  RotateLeft,
-  RotateRight,
-  Save,
-  Sort,
-  SortDown,
-  SortUp,
-  Star,
-  Stop,
-  Underlined,
-  Zoom,
-  Accessible,
-  AutoRenew,
-  Banned,
-  Bus,
-  Calendar,
-  Camera,
-  Clock,
-  Direction,
-  Email,
-  EventDate,
-  Exclamation,
-  Feedback,
-  Food,
-  Globe,
-  Home,
-  Info,
-  Marker,
-  MobilePhone,
-  Notification,
-  Parking,
-  Phone,
-  Print,
-  Required,
-  ResaleLogbook,
-  Spinner,
-  Thumb,
-  Truck,
-  Cart,
-  CreditCard,
-  Group,
-  Id,
-  SmilieDissatisfied,
-  SmilieNeutral,
-  SmilieSatisfied,
-  SmilieVeryDissatisfied,
-  SmilieVerySatisfied,
-  User,
-  Deal,
-  DesignTicket,
-  GiftCard,
-  Membership,
-  Pickup,
-  Price,
-  Resale,
-  Scanner,
-  Seat,
-  Selling,
-  Ticket,
-  TicketInsurance,
-  Turnstile,
-  Add,
-  ArrowDown,
-  ArrowDownA,
-  ArrowLeft,
-  ArrowLeftA,
-  ArrowRight,
-  ArrowRightA,
-  ArrowUp,
-  ArrowUpA,
-  BurgerMenu,
-  Check,
-  CircleUnchecked,
-  CircleChecked,
-  Close,
-  Delete,
-  ExternalLink,
-  Filter,
-  IconMore,
-  Remove,
-  Search,
-  SettingDots,
-  SquareUnchecked,
-  SquareChecked,
-  Facebook,
-  Google,
-  Instagram,
-  Share,
-  Twitter,
-  Whatsapp,
-} from '@marigold/icons';
-import {
-  Column,
-  Columns,
-  Container,
-  Heading,
-  Stack,
-  Text,
-} from '@marigold/components';
-import { useStyles } from '@marigold/system';
-
-<Meta
-  title="Tokens/Marigold Icons"
-  argTypes={{
-    size: {
-      control: {
-        type: 'number',
-      },
-      description: 'Size of the squared icon',
-      table: {
-        defaultValue: {
-          summary: 24,
-        },
-      },
-    },
-    fill: {
-      control: {
-        type: 'text',
-      },
-      description: 'Color of the icon',
-      table: {
-        defaultValue: {
-          summary: 'currentcolor',
-        },
-      },
-    },
-  }}
-/>
-
-# Icons
-
-export const Template = args => <ArrowUpA {...args} />;
-
-<Canvas>
-  <Story name="Example">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Example" />
-
-### UI
-
-<Canvas>
-  <Story name="UI">
-    <Columns space={8}>
-      <Column width={4}>
-        <Heading>UI</Heading>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowUpA</Text>
-          <ArrowUpA />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowRightA</Text>
-          <ArrowRightA />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowDownA</Text>
-          <ArrowDownA />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowLeftA</Text>
-          <ArrowLeftA />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SettingDots</Text>
-          <SettingDots />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Check</Text>
-          <Check />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Add</Text>
-          <Add />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Remove</Text>
-          <Remove />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowUp</Text>
-          <ArrowUp />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowRight</Text>
-          <ArrowRight />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowDown</Text>
-          <ArrowDown />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ArrowLeft</Text>
-          <ArrowLeft />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>IconMore</Text>
-          <IconMore />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Search</Text>
-          <Search />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SquareUnchecked</Text>
-          <SquareUnchecked />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SquareChecked</Text>
-          <SquareChecked />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ExternalLink</Text>
-          <ExternalLink />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Filter</Text>
-          <Filter />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>BurgerMenu</Text>
-          <BurgerMenu />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Delete</Text>
-          <Delete />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Close</Text>
-          <Close />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>CircleUnchecked</Text>
-          <CircleUnchecked />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>CircleChecked</Text>
-          <CircleChecked />
-        </Container>
-      </Column>
-    </Columns>
-  </Story>
-  <Story name="Info">
-    <Columns space={8}>
-      <Column width={4}>
-        <Heading>Info</Heading>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Accessible</Text>
-          <Accessible />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>AutoRenew</Text>
-          <AutoRenew />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Banned</Text>
-          <Banned />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Bus</Text>
-          <Bus />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Calendar</Text>
-          <Calendar />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Camera</Text>
-          <Camera />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Clock</Text>
-          <Clock />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Direction</Text>
-          <Direction />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Email</Text>
-          <Email />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>EventDate</Text>
-          <EventDate />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Exclamation</Text>
-          <Exclamation />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Feedback</Text>
-          <Feedback />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Food</Text>
-          <Food />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Globe</Text>
-          <Globe />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Home</Text>
-          <Home />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Info</Text>
-          <Info />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Marker</Text>
-          <Marker />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>MobilePhone</Text>
-          <MobilePhone />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Notification</Text>
-          <Notification />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Parking</Text>
-          <Parking />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Required</Text>
-          <Required />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ResaleLogbook</Text>
-          <ResaleLogbook />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Spinner</Text>
-          <Spinner />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Thumb</Text>
-          <Thumb />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Truck</Text>
-          <Truck />
-        </Container>
-      </Column>
-    </Columns>
-  </Story>
-  <Story name="Action">
-    <Columns space={8}>
-      <Column width={4}>
-        <Heading>Action</Heading>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Cancel</Text>
-          <Cancel />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Crop</Text>
-          <Crop />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Edit</Text>
-          <Edit />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>FormatBold</Text>
-          <FormatBold />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>FormatItalic</Text>
-          <FormatItalic />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>FormatSize</Text>
-          <FormatSize />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>HighlightOff</Text>
-          <HighlightOff />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Image</Text>
-          <Image />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Location</Text>
-          <Location />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Lock</Text>
-          <Lock />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>LockOpen</Text>
-          <LockOpen />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Pause</Text>
-          <Pause />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>PauseAlt</Text>
-          <PauseAlt />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Play</Text>
-          <Play />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>PlayAlt</Text>
-          <PlayAlt />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>ResaleEdit</Text>
-          <ResaleEdit />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>RotateLeft</Text>
-          <RotateLeft />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>RotateRight</Text>
-          <RotateRight />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Save</Text>
-          <Save />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Sort</Text>
-          <Sort />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SortDown</Text>
-          <SortDown />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SortUp</Text>
-          <SortUp />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Star</Text>
-          <Star />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Stop</Text>
-          <Stop />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Underlined</Text>
-          <Underlined />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Zoom</Text>
-          <Zoom />
-        </Container>
-      </Column>
-    </Columns>
-  </Story>
-  <Story name="Ticketing">
-    <Columns space={8}>
-      <Column width={4}>
-        <Heading>Ticketing</Heading>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Deal</Text>
-          <Deal />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>DesignTicket</Text>
-          <DesignTicket />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>GiftCard</Text>
-          <GiftCard />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Membership</Text>
-          <Membership />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Pickup</Text>
-          <Pickup />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Price</Text>
-          <Price />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Resale</Text>
-          <Resale />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Scanner</Text>
-          <Scanner />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Seat</Text>
-          <Seat />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Selling</Text>
-          <Selling />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Ticket</Text>
-          <Ticket />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>TicketInsurance</Text>
-          <TicketInsurance />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Turnstile</Text>
-          <Turnstile />
-        </Container>
-      </Column>
-    </Columns>
-  </Story>
-  <Story name="User">
-    <Columns space={8}>
-      <Column width={4}>
-        <Heading>User</Heading>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>User</Text>
-          <User />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Group</Text>
-          <Group />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Cart</Text>
-          <Cart />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>CreditCard</Text>
-          <CreditCard />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SmilieVerySatisfied</Text>
-          <SmilieVerySatisfied />
-        </Container>
-      </Column>
-      <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SmilieSatisfied</Text>
-          <SmilieSatisfied />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SmilieNeutral</Text>
-          <SmilieNeutral />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SmilieDissatisfied</Text>
-          <SmilieDissatisfied />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>SmilieVeryDissatisfied</Text>
-          <SmilieVeryDissatisfied />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Id</Text>
-          <Id />
-        </Container>
-      </Column>
-    </Columns>
-  </Story>
-  <Story name="Social">
-    <Columns space={8}>
-      <Column width={4}>
-        <Heading>Social</Heading>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Facebook</Text>
-          <Facebook />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Google</Text>
-          <Google />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Instagram</Text>
-          <Instagram />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Share</Text>
-          <Share />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Twitter</Text>
-          <Twitter />
-        </Container>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
-        >
-          <Text>Whatsapp</Text>
-          <Whatsapp />
-        </Container>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>