@marigold/icons 0.2.0 → 0.3.0

package/src/Icons.stories.mdx

@@ -107,14 +107,13 @@ import {
   Whatsapp,
 } from '@marigold/icons';
 import {
+  Box,
   Column,
   Columns,
   Container,
-  Heading,
   Stack,
   Text,
 } from '@marigold/components';
-import { useStyles } from '@marigold/system';
 
 <Meta
   title="Tokens/Marigold Icons"
@@ -160,1397 +159,1115 @@ export const Template = args => <ArrowUpA {...args} />;
   <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 as="h2" variant="headline2">
+          UI
+        </Text>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Add</Text>
           <Add />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>SquareUnchecked</Text>
           <SquareUnchecked />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>CircleChecked</Text>
           <CircleChecked />
-        </Container>
+        </Box>
       </Column>
     </Columns>
   </Story>
+</Canvas>
+
+<Canvas>
   <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 as="h2" variant="headline2">
+          Info
+        </Text>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Direction</Text>
           <Direction />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Marker</Text>
           <Marker />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Truck</Text>
           <Truck />
-        </Container>
+        </Box>
       </Column>
     </Columns>
   </Story>
+</Canvas>
+
+<Canvas>
   <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 as="h2" variant="headline2">
+          Action
+        </Text>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Image</Text>
           <Image />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>RotateLeft</Text>
           <RotateLeft />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Zoom</Text>
           <Zoom />
-        </Container>
+        </Box>
       </Column>
     </Columns>
   </Story>
+</Canvas>
+
+<Canvas>
   <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 as="h2" variant="headline2">
+          Ticketing
+        </Text>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Price</Text>
           <Price />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: 'white',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Turnstile</Text>
           <Turnstile />
-        </Container>
+        </Box>
       </Column>
     </Columns>
   </Story>
+</Canvas>
+
+<Canvas>
   <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 as="h2" variant="headline2">
+          User
+        </Text>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>SmilieVerySatisfied</Text>
           <SmilieVerySatisfied />
-        </Container>
+        </Box>
       </Column>
       <Column width={4}>
-        <Container
-          className={useStyles({
-            css: {
-              bg: '#e9e7eb',
-              p: '8px',
-              display: 'flex',
-              justifyContent: 'space-between',
-            },
-          })}
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Id</Text>
           <Id />
-        </Container>
+        </Box>
       </Column>
     </Columns>
   </Story>
+</Canvas>
+
+<Canvas>
   <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 as="h2" variant="headline2">
+          Social
+        </Text>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          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',
-            },
-          })}
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
         >
           <Text>Whatsapp</Text>
           <Whatsapp />
-        </Container>
+        </Box>
       </Column>
     </Columns>
   </Story>