npm - @marigold/icons - Versions diffs - 0.0.1 → 0.2.0 - Mend

@marigold/icons 0.0.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

package/dist/SVG/SVG.d.ts +8 -0
package/dist/SVG/index.d.ts +1 -0
package/dist/action/Cancel.d.ts +4 -0
package/dist/action/Crop.d.ts +4 -0
package/dist/action/Edit.d.ts +4 -0
package/dist/action/FormatBold.d.ts +4 -0
package/dist/action/FormatItalic.d.ts +4 -0
package/dist/action/FormatSize.d.ts +4 -0
package/dist/action/HighlightOff.d.ts +4 -0
package/dist/action/Image.d.ts +4 -0
package/dist/action/Location.d.ts +4 -0
package/dist/action/Lock.d.ts +4 -0
package/dist/action/LockOpen.d.ts +4 -0
package/dist/action/Pause.d.ts +4 -0
package/dist/action/PauseAlt.d.ts +4 -0
package/dist/action/Play.d.ts +4 -0
package/dist/action/PlayAlt.d.ts +4 -0
package/dist/action/ResaleEdit.d.ts +4 -0
package/dist/action/RotateLeft.d.ts +4 -0
package/dist/action/RotateRight.d.ts +4 -0
package/dist/action/Save.d.ts +4 -0
package/dist/action/Sort.d.ts +4 -0
package/dist/action/SortDown.d.ts +4 -0
package/dist/action/SortUp.d.ts +4 -0
package/dist/action/Star.d.ts +4 -0
package/dist/action/Stop.d.ts +4 -0
package/dist/action/Underlined.d.ts +4 -0
package/dist/action/Zoom.d.ts +4 -0
package/dist/action/index.d.ts +26 -0
package/dist/icons.cjs.development.js +1564 -0
package/dist/icons.cjs.development.js.map +1 -0
package/dist/icons.cjs.production.min.js +2 -0
package/dist/icons.cjs.production.min.js.map +1 -0
package/dist/icons.esm.js +1455 -0
package/dist/icons.esm.js.map +1 -0
package/dist/index.d.ts +7 -0
package/dist/index.js +8 -0
package/dist/info/Accessible.d.ts +4 -0
package/dist/info/AutoRenew.d.ts +4 -0
package/dist/info/Banned.d.ts +4 -0
package/dist/info/Bus.d.ts +4 -0
package/dist/info/Calendar.d.ts +4 -0
package/dist/info/Camera.d.ts +4 -0
package/dist/info/Clock.d.ts +4 -0
package/dist/info/Direction.d.ts +4 -0
package/dist/info/Email.d.ts +4 -0
package/dist/info/EventDate.d.ts +4 -0
package/dist/info/Exclamation.d.ts +4 -0
package/dist/info/Feedback.d.ts +4 -0
package/dist/info/Food.d.ts +4 -0
package/dist/info/Globe.d.ts +4 -0
package/dist/info/Home.d.ts +4 -0
package/dist/info/Info.d.ts +4 -0
package/dist/info/Marker.d.ts +4 -0
package/dist/info/MobilePhone.d.ts +4 -0
package/dist/info/Notification.d.ts +4 -0
package/dist/info/Parking.d.ts +4 -0
package/dist/info/Phone.d.ts +4 -0
package/dist/info/Print.d.ts +4 -0
package/dist/info/Required.d.ts +4 -0
package/dist/info/ResaleLogbook.d.ts +4 -0
package/dist/info/Spinner.d.ts +4 -0
package/dist/info/Thumb.d.ts +4 -0
package/dist/info/Truck.d.ts +4 -0
package/dist/info/index.d.ts +27 -0
package/dist/social/Facebook.d.ts +4 -0
package/dist/social/Google.d.ts +4 -0
package/dist/social/Instagram.d.ts +4 -0
package/dist/social/Share.d.ts +4 -0
package/dist/social/Twitter.d.ts +4 -0
package/dist/social/Whatsapp.d.ts +4 -0
package/dist/social/index.d.ts +6 -0
package/dist/ticketing/Deal.d.ts +4 -0
package/dist/ticketing/DesignTicket.d.ts +4 -0
package/dist/ticketing/GiftCard.d.ts +4 -0
package/dist/ticketing/Membership.d.ts +4 -0
package/dist/ticketing/Pickup.d.ts +4 -0
package/dist/ticketing/Price.d.ts +4 -0
package/dist/ticketing/Resale.d.ts +4 -0
package/dist/ticketing/Scanner.d.ts +4 -0
package/dist/ticketing/Seat.d.ts +4 -0
package/dist/ticketing/Selling.d.ts +4 -0
package/dist/ticketing/Ticket.d.ts +4 -0
package/dist/ticketing/TicketInsurance.d.ts +4 -0
package/dist/ticketing/Turnstile.d.ts +4 -0
package/dist/ticketing/index.d.ts +13 -0
package/dist/ui/Add.d.ts +4 -0
package/dist/ui/ArrowDown.d.ts +4 -0
package/dist/ui/ArrowDownA.d.ts +4 -0
package/dist/ui/ArrowLeft.d.ts +4 -0
package/dist/ui/ArrowLeftA.d.ts +4 -0
package/dist/ui/ArrowRight.d.ts +4 -0
package/dist/ui/ArrowRightA.d.ts +4 -0
package/dist/ui/ArrowUp.d.ts +4 -0
package/dist/ui/ArrowUpA.d.ts +4 -0
package/dist/ui/BurgerMenu.d.ts +4 -0
package/dist/ui/Check.d.ts +4 -0
package/dist/ui/CircleChecked.d.ts +4 -0
package/dist/ui/CircleUnchecked.d.ts +4 -0
package/dist/ui/Close.d.ts +4 -0
package/dist/ui/Delete.d.ts +4 -0
package/dist/ui/ExternalLink.d.ts +4 -0
package/dist/ui/Filter.d.ts +4 -0
package/dist/ui/IconMore.d.ts +4 -0
package/dist/ui/Remove.d.ts +4 -0
package/dist/ui/Search.d.ts +4 -0
package/dist/ui/SettingDots.d.ts +4 -0
package/dist/ui/SquareChecked.d.ts +4 -0
package/dist/ui/SquareUnchecked.d.ts +4 -0
package/dist/ui/index.d.ts +23 -0
package/dist/user/Cart.d.ts +4 -0
package/dist/user/CreditCard.d.ts +4 -0
package/dist/user/Group.d.ts +4 -0
package/dist/user/Id.d.ts +4 -0
package/dist/user/SmilieDissatisfied.d.ts +4 -0
package/dist/user/SmilieNeutral.d.ts +4 -0
package/dist/user/SmilieSatisfied.d.ts +4 -0
package/dist/user/SmilieVeryDissatisfied.d.ts +4 -0
package/dist/user/SmilieVerySatisfied.d.ts +4 -0
package/dist/user/User.d.ts +4 -0
package/dist/user/index.d.ts +10 -0
package/package.json +11 -5
package/src/Icons.stories.mdx +1443 -380
package/src/SVG/SVG.stories.mdx +55 -0
package/src/SVG/SVG.test.tsx +69 -0
package/src/SVG/SVG.tsx +30 -0
package/src/SVG/index.ts +1 -0
package/src/action/Cancel.tsx +4 -4
package/src/action/Crop.tsx +4 -4
package/src/action/Edit.tsx +4 -4
package/src/action/FormatBold.tsx +5 -5
package/src/action/FormatItalic.tsx +4 -4
package/src/action/FormatSize.tsx +4 -4
package/src/action/HighlightOff.tsx +5 -5
package/src/action/Image.tsx +4 -4
package/src/action/Location.tsx +4 -4
package/src/action/Lock.tsx +4 -4
package/src/action/LockOpen.tsx +5 -5
package/src/action/Pause.tsx +4 -4
package/src/action/PauseAlt.tsx +4 -4
package/src/action/Play.tsx +4 -4
package/src/action/PlayAlt.tsx +4 -4
package/src/action/ResaleEdit.tsx +4 -4
package/src/action/RotateLeft.tsx +4 -4
package/src/action/RotateRight.tsx +4 -4
package/src/action/Save.tsx +4 -4
package/src/action/Sort.tsx +4 -4
package/src/action/SortDown.tsx +4 -4
package/src/action/SortUp.tsx +4 -4
package/src/action/Star.tsx +4 -4
package/src/action/Stop.tsx +4 -4
package/src/action/Underlined.tsx +4 -4
package/src/action/Zoom.tsx +4 -4
package/src/index.ts +1 -0
package/src/info/Accessible.tsx +4 -4
package/src/info/AutoRenew.tsx +4 -4
package/src/info/Banned.tsx +4 -4
package/src/info/Bus.tsx +4 -4
package/src/info/Calendar.tsx +4 -4
package/src/info/Camera.tsx +4 -4
package/src/info/Clock.tsx +4 -4
package/src/info/Direction.tsx +4 -4
package/src/info/Email.tsx +4 -4
package/src/info/EventDate.tsx +4 -4
package/src/info/Exclamation.tsx +4 -4
package/src/info/Feedback.tsx +4 -4
package/src/info/Food.tsx +4 -4
package/src/info/Globe.tsx +4 -4
package/src/info/Home.tsx +4 -4
package/src/info/Info.tsx +4 -4
package/src/info/Marker.tsx +4 -4
package/src/info/MobilePhone.tsx +4 -4
package/src/info/Notification.tsx +4 -4
package/src/info/Parking.tsx +4 -4
package/src/info/Phone.tsx +4 -4
package/src/info/Print.tsx +4 -4
package/src/info/Required.tsx +4 -4
package/src/info/ResaleLogbook.tsx +4 -4
package/src/info/Spinner.tsx +4 -4
package/src/info/Thumb.tsx +4 -4
package/src/info/Truck.tsx +4 -4
package/src/social/Facebook.tsx +4 -4
package/src/social/Google.tsx +4 -4
package/src/social/Instagram.tsx +4 -4
package/src/social/Share.tsx +4 -4
package/src/social/Twitter.tsx +4 -4
package/src/social/Whatsapp.tsx +4 -4
package/src/ticketing/Deal.tsx +4 -4
package/src/ticketing/DesignTicket.tsx +4 -4
package/src/ticketing/GiftCard.tsx +4 -4
package/src/ticketing/Membership.tsx +4 -4
package/src/ticketing/Pickup.tsx +4 -4
package/src/ticketing/Price.tsx +4 -4
package/src/ticketing/Resale.tsx +4 -4
package/src/ticketing/Scanner.tsx +4 -4
package/src/ticketing/Seat.tsx +4 -4
package/src/ticketing/Selling.tsx +4 -4
package/src/ticketing/Ticket.tsx +4 -4
package/src/ticketing/TicketInsurance.tsx +4 -4
package/src/ticketing/Turnstile.tsx +4 -4
package/src/ui/Add.tsx +4 -4
package/src/ui/ArrowDown.tsx +4 -4
package/src/ui/ArrowDownA.tsx +4 -4
package/src/ui/ArrowLeft.tsx +4 -4
package/src/ui/ArrowLeftA.tsx +4 -4
package/src/ui/ArrowRight.tsx +4 -4
package/src/ui/ArrowRightA.tsx +4 -4
package/src/ui/ArrowUp.tsx +4 -4
package/src/ui/ArrowUpA.tsx +4 -4
package/src/ui/BurgerMenu.tsx +4 -4
package/src/ui/Check.tsx +4 -4
package/src/ui/CircleChecked.tsx +4 -4
package/src/ui/CircleUnchecked.tsx +4 -4
package/src/ui/Close.tsx +4 -4
package/src/ui/Delete.tsx +4 -4
package/src/ui/ExternalLink.tsx +4 -4
package/src/ui/Filter.tsx +4 -4
package/src/ui/IconMore.tsx +4 -4
package/src/ui/Remove.tsx +4 -4
package/src/ui/Search.tsx +4 -4
package/src/ui/SettingDots.tsx +4 -4
package/src/ui/SquareChecked.tsx +4 -4
package/src/ui/SquareUnchecked.tsx +4 -4
package/src/user/Cart.tsx +4 -4
package/src/user/CreditCard.tsx +4 -4
package/src/user/Group.tsx +4 -4
package/src/user/Id.tsx +4 -4
package/src/user/SmilieDissatisfied.tsx +4 -4
package/src/user/SmilieNeutral.tsx +4 -4
package/src/user/SmilieSatisfied.tsx +4 -4
package/src/user/SmilieVeryDissatisfied.tsx +4 -4
package/src/user/SmilieVerySatisfied.tsx +4 -4
package/src/user/User.tsx +4 -4
package/tsconfig.build.json +3 -0

package/src/Icons.stories.mdx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import {
   Cancel,
   Crop,
@@ -106,389 +106,1452 @@ import {
   Twitter,
   Whatsapp,
 } from '@marigold/icons';
+import {
+  Column,
+  Columns,
+  Container,
+  Heading,
+  Stack,
+  Text,
+} from '@marigold/components';
+import { useStyles } from '@marigold/system';
-<Meta title="Icons" />
-# Marigold Icons
-## Description
-With the Icon component you can render one of the icons below.
-By adding the `size` prop you can change to another size. `24` is the default size.
-The `fill` prop is the second attribute and per default `currentcolor`.
-Specific css style prop can also be added.
-## Properties
-| Property | Type     | Default          |
-| :------- | :------- | :--------------- |
-| `size`   | `number` | `24`             |
-| `fill`   | `string` | `'currentcolor'` |
-## Import
-```tsx
-import { Google } from '@marigold/icons';
-```
-## Usage
-<Preview>
-  <Story name="sizeProp">
-    <DesignTicket size={40} />
-  </Story>
-  <Story name="sizeFillProp">
-    <DesignTicket size={32} fill="red" />
-  </Story>
-  <Story name="fillProp">
-    <DesignTicket fill="#E6DC16" />
-  </Story>
-</Preview>
-### UI-Icons
-<Preview>
-  <Story name="ArrowUpA-icon">
-    <ArrowUpA />
-  </Story>
-  <Story name="ArrowRightA-icon">
-    <ArrowRightA />
-  </Story>
-  <Story name="ArrowDownA-icon">
-    <ArrowDownA />
-  </Story>
-  <Story name="ArrowLeftA-icon">
-    <ArrowLeftA />
-  </Story>
-  <Story name="SettingDots-icon">
-    <SettingDots />
-  </Story>
-  <Story name="Check-icon">
-    <Check />
-  </Story>
-  <Story name="Add-icon">
-    <Add />
-  </Story>
-  <Story name="Remove-icon">
-    <Remove />
-  </Story>
-  <Story name="ArrowUp-icon">
-    <ArrowUp />
-  </Story>
-  <Story name="ArrowRight-icon">
-    <ArrowRight />
-  </Story>
-  <Story name="ArrowDown-icon">
-    <ArrowDown />
-  </Story>
-  <Story name="ArrowLeft-icon">
-    <ArrowLeft />
-  </Story>
-  <Story name="IconMore-icon">
-    <IconMore />
-  </Story>
-  <Story name="Search-icon">
-    <Search />
-  </Story>
-  <Story name="SquareUnchecked-icon">
-    <SquareUnchecked />
-  </Story>
-  <Story name="SquareChecked-icon">
-    <SquareChecked />
-  </Story>
-  <Story name="ExternalLink-icon">
-    <ExternalLink />
-  </Story>
-  <Story name="Filter-icon">
-    <Filter />
-  </Story>
-  <Story name="BurgerMenu-icon">
-    <BurgerMenu />
-  </Story>
-  <Story name="Delete-icon">
-    <Delete />
-  </Story>
-  <Story name="Close-icon">
-    <Close />
-  </Story>
-  <Story name="CircleUnchecked-icon">
-    <CircleUnchecked />
-  </Story>
-  <Story name="CircleChecked-icon">
-    <CircleChecked />
-  </Story>
-</Preview>
-### Info-Icons
-<Preview>
-  <Story name="Accessible-icon">
-    <Accessible />
-  </Story>
-  <Story name="AutoRenew-icon">
-    <AutoRenew />
-  </Story>
-  <Story name="Banned-icon">
-    <Banned />
-  </Story>
-  <Story name="Bus-icon">
-    <Bus />
-  </Story>
-  <Story name="Calendar-icon">
-    <Calendar />
-  </Story>
-  <Story name="Camera-icon">
-    <Camera />
-  </Story>
-  <Story name="Clock-icon">
-    <Clock />
-  </Story>
-  <Story name="Direction-icon">
-    <Direction />
-  </Story>
-  <Story name="Email-icon">
-    <Email />
-  </Story>
-  <Story name="EventDate-icon">
-    <EventDate />
-  </Story>
-  <Story name="Exclamation-icon">
-    <Exclamation />
-  </Story>
-  <Story name="Feedback-icon">
-    <Feedback />
-  </Story>
-  <Story name="Food-icon">
-    <Food />
-  </Story>
-  <Story name="Globe-icon">
-    <Globe />
-  </Story>
-  <Story name="Home-icon">
-    <Home />
-  </Story>
-  <Story name="Info-icon">
-    <Info />
-  </Story>
-  <Story name="Marker-icon">
-    <Marker />
-  </Story>
-  <Story name="MobilePhone-icon">
-    <MobilePhone />
-  </Story>
-  <Story name="Notification-icon">
-    <Notification />
-  </Story>
-  <Story name="Parking-icon">
-    <Parking />
-  </Story>
-  <Story name="Phone-icon">
-    <Phone />
-  </Story>
-  <Story name="Print-icon">
-    <Print />
-  </Story>
-  <Story name="Required-icon">
-    <Required />
-  </Story>
-  <Story name="ResaleLogbook-icon">
-    <ResaleLogbook />
-  </Story>
-  <Story name="Spinner-icon">
-    <Spinner />
-  </Story>
-  <Story name="ResaleLogbook-icon">
-    <ResaleLogbook />
-  </Story>
-  <Story name="Thumb-icon">
-    <Thumb />
-  </Story>
-  <Story name="Truck-icon">
-    <Truck />
-  </Story>
-</Preview>
-### Action-Icons
-<Preview>
-  <Story name="Cancel-icon">
-    <Cancel />
-  </Story>
-  <Story name="Crop-icon">
-    <Crop />
-  </Story>
-  <Story name="Edit-icon">
-    <Edit />
-  </Story>
-  <Story name="FormatBold-icon">
-    <FormatBold />
-  </Story>
-  <Story name="FormatItalic-icon">
-    <FormatItalic />
-  </Story>
-  <Story name="FormatSize-icon">
-    <FormatSize />
-  </Story>
-  <Story name="HighlightOff-icon">
-    <HighlightOff />
-  </Story>
-  <Story name="Image-icon">
-    <Image />
-  </Story>
-  <Story name="Location-icon">
-    <Location />
-  </Story>
-  <Story name="Lock-icon">
-    <Lock />
-  </Story>
-  <Story name="LockOpen-icon">
-    <LockOpen />
-  </Story>
-  <Story name="Pause-icon">
-    <Pause />
-  </Story>
-  <Story name="PauseAlt-icon">
-    <PauseAlt />
-  </Story>
-  <Story name="Play-icon">
-    <Play />
-  </Story>
-  <Story name="PlayAlt-icon">
-    <PlayAlt />
-  </Story>
-  <Story name="ResaleEdit-icon">
-    <ResaleEdit />
-  </Story>
-  <Story name="RotateLeft-icon">
-    <RotateLeft />
-  </Story>
-  <Story name="RotateRight-icon">
-    <RotateRight />
-  </Story>
-  <Story name="Save-icon">
-    <Save />
-  </Story>
-  <Story name="Sort-icon">
-    <Sort />
-  </Story>
-  <Story name="SortDown-icon">
-    <SortDown />
-  </Story>
-  <Story name="SortUp-icon">
-    <SortUp />
-  </Story>
-  <Story name="Star-icon">
-    <Star />
-  </Story>
-  <Story name="Stop-icon">
-    <Stop />
-  </Story>
-  <Story name="Underlined-icon">
-    <Underlined />
-  </Story>
-  <Story name="Zoom-icon">
-    <Zoom />
-  </Story>
-</Preview>
+<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',
+        },
+      },
+    },
+  }}
+/>
-### Ticketing-Icons
+# Icons
-<Preview>
-  <Story name="Deal-icon">
-    <Deal />
-  </Story>
-  <Story name="DesignTicket-icon">
-    <DesignTicket />
-  </Story>
-  <Story name="GiftCard-icon">
-    <GiftCard />
-  </Story>
-  <Story name="Membership-icon">
-    <Membership />
-  </Story>
-  <Story name="Pickup-icon">
-    <Pickup />
-  </Story>
-  <Story name="Price-icon">
-    <Price />
-  </Story>
-  <Story name="Resale-icon">
-    <Resale />
-  </Story>
-  <Story name="Scanner-icon">
-    <Scanner />
-  </Story>
-  <Story name="Seat-icon">
-    <Seat />
-  </Story>
-  <Story name="Selling-icon">
-    <Selling />
-  </Story>
-  <Story name="Ticket-icon">
-    <Ticket />
-  </Story>
-  <Story name="TicketInsurance-icon">
-    <TicketInsurance />
-  </Story>
-  <Story name="Turnstile-icon">
-    <Turnstile />
-  </Story>
-</Preview>
+export const Template = args => <ArrowUpA {...args} />;
-### User-Icons
+<Canvas>
+  <Story name="Example">{Template.bind({})}</Story>
+</Canvas>
-<Preview>
-  <Story name="User-icon">
-    <User />
-  </Story>
-  <Story name="Group-icon">
-    <Group />
-  </Story>
-  <Story name="Cart-icon">
-    <Cart />
-  </Story>
-  <Story name="CreditCard-icon">
-    <CreditCard />
-  </Story>
-  <Story name="SmilieVerySatisfied-icon">
-    <SmilieVerySatisfied />
-  </Story>
-  <Story name="SmilieSatisfied-icon">
-    <SmilieSatisfied />
-  </Story>
-  <Story name="SmilieNeutral-icon">
-    <SmilieNeutral />
-  </Story>
-  <Story name="SmilieDissatisfied-icon">
-    <SmilieDissatisfied />
-  </Story>
-  <Story name="SmilieVeryDissatisfied-icon">
-    <SmilieVeryDissatisfied />
-  </Story>
-  <Story name="Id-icon">
-    <Id />
-  </Story>
-</Preview>
+<ArgsTable story="Example" />
-### Social-Icons
+### UI
-<Preview>
-  <Story name="Facebook-icon">
-    <Facebook />
-  </Story>
-  <Story name="Google-icon">
-    <Google />
-  </Story>
-  <Story name="Instagram-icon">
-    <Instagram />
-  </Story>
-  <Story name="Share-icon">
-    <Share />
-  </Story>
-  <Story name="Twitter-icon">
-    <Twitter />
-  </Story>
-  <Story name="Whatsapp-icon">
-    <Whatsapp />
-  </Story>
-</Preview>
+<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>