@workday/canvas-kit-docs 15.0.4 → 15.0.5

package/dist/mdx/react/_examples/mdx/examples/layout/FullWidthWith3Columns2Rows.tsx

@@ -2,17 +2,26 @@ import * as React from 'react';
 
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const gridStyles = createStyles({
+  gridTemplateAreas: "'Heading Heading Heading'",
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gridAutoRows: 'min-content',
+  gridRowGap: system.gap.sm,
+  gridColumnGap: system.gap.xl,
+});
+
+const headingStyles = createStyles({
+  gridArea: 'Heading',
+  paddingInline: system.padding.sm,
+  border: `${px2rem(1)} solid ${system.color.brand.border.primary}`,
+});
 
 export default () => (
-  <Grid
-    gridTemplateAreas="'Heading Heading Heading'"
-    gridColumn="repeat(3, 1fr)"
-    gridAutoRows="min-content"
-    gridRowGap="s"
-    gridColumnGap="xxxl"
-  >
-    <Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
+  <Grid cs={gridStyles}>
+    <Box cs={headingStyles}>
       <Heading size="medium">Full Width With 3 Columns and 2 Rows</Heading>
     </Box>
     <FormSkeleton />
@@ -24,15 +33,35 @@ export default () => (
   </Grid>
 );
 
+const boxStyles = createStyles({
+  border: `${px2rem(1)} dashed ${system.color.brand.border.primary}`,
+  paddingInline: system.padding.md,
+});
+
+const itemStyles = createStyles({
+  gridGap: system.gap.md,
+  marginBlockEnd: system.gap.lg,
+  '> *:first-child': {
+    width: px2rem(120),
+    height: system.size.xxs,
+    backgroundColor: system.color.surface.alt.default,
+  },
+  '> *:last-child': {
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    width: '100%',
+    height: system.size.xxs,
+  },
+});
+
 const FormSkeleton = props => (
-  <Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" {...props}>
-    <BodyText size="small" fontWeight="bold">
+  <Box cs={boxStyles} {...props}>
+    <BodyText size="small" cs={{fontWeight: system.fontWeight.bold}}>
       Form Block
     </BodyText>
     {Array.from({length: 3}).map(() => (
-      <Grid gridGap="s" marginBottom="xl">
-        <Box backgroundColor="soap500" width="120px" height="s" />
-        <Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
+      <Grid cs={itemStyles}>
+        <Box />
+        <Box />
       </Grid>
     ))}
   </Box>

package/dist/mdx/react/_examples/mdx/examples/layout/Masonry.tsx

@@ -1,54 +1,55 @@
 import * as React from 'react';
 
-import {styled} from '@workday/canvas-kit-react/common';
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const Container = styled(Box)({
+const containerStyles = createStyles({
   columnCount: 3,
-  columnGap: '12px',
+  columnGap: system.gap.md,
 });
 
-const StyledCard = styled(Box)({
+const cardStyles = createStyles({
   breakInside: 'avoid',
+  border: `${px2rem(2)} dashed ${system.color.brand.border.primary}`,
+  marginBlockEnd: system.gap.sm,
+  padding: system.padding.md,
+});
+
+const gridStyles = createStyles({
+  gridGap: system.gap.md,
+  marginBlockEnd: system.gap.xl,
+  '> *:first-child': {
+    width: px2rem(120),
+    height: system.size.xxs,
+    backgroundColor: system.color.surface.alt.default,
+  },
+  '> *:last-child': {
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    width: '100%',
+    height: system.size.xxs,
+  },
 });
 
 export default () => (
   <>
     <Heading size="medium">Masonry Layout</Heading>
-    <Container>
+    <Box cs={containerStyles}>
       {Array.from({length: 8}).map((_, ind) => (
-        <StyledCard
-          key={ind}
-          border={`2px dashed ${colors.blueberry400}`}
-          marginBottom="xs"
-          padding="s"
-        >
-          <Grid gridGap="s" marginBottom="xl">
-            <Box backgroundColor="soap500" width="120px" height="s" />
-            <Box
-              borderWidth="1px"
-              borderStyle="solid"
-              borderColor="soap500"
-              width="100%"
-              height="xl"
-            />
+        <Box key={ind} cs={cardStyles}>
+          <Grid cs={gridStyles}>
+            <Box />
+            <Box />
           </Grid>
           {ind % 2 === 0 && (
-            <Grid gridGap="s" marginBottom="xl">
-              <Box backgroundColor="soap500" width="120px" height="s" />
-              <Box
-                borderWidth="1px"
-                borderStyle="solid"
-                borderColor="soap500"
-                width="100%"
-                height="xl"
-              />
+            <Grid cs={gridStyles}>
+              <Box />
+              <Box />
             </Grid>
           )}
-        </StyledCard>
+        </Box>
       ))}
-    </Container>
+    </Box>
   </>
 );

package/dist/mdx/react/_examples/mdx/examples/layout/ResponsiveColumns.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [screen, setScreen] = React.useState('100%');
@@ -12,19 +14,26 @@ export default () => {
       <Heading size="medium">Responsive Columns</Heading>
       <BodyText size="small">Choose screen size to see changes</BodyText>
       <SegmentedControl initialValue={screen} onSelect={data => setScreen(data.id)}>
-        <SegmentedControl.List aria-label="screen-size" marginBottom="l">
+        <SegmentedControl.List aria-label="screen-size" cs={{marginBlockEnd: system.gap.lg}}>
           <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
           <SegmentedControl.Item data-id="75%">75%</SegmentedControl.Item>
           <SegmentedControl.Item data-id="50%">50%</SegmentedControl.Item>
           <SegmentedControl.Item data-id="25%">25%</SegmentedControl.Item>
         </SegmentedControl.List>
       </SegmentedControl>
-      <Box maxWidth={screen} border="2px solid black" padding="s">
-        <Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))" gridGap="m">
-          <Box height="120px" backgroundColor="blueberry300" />
-          <Box height="120px" backgroundColor="blueberry400" />
-          <Box height="120px" backgroundColor="blueberry500" />
-          <Box height="120px" backgroundColor="blueberry600" />
+      <Box
+        cs={{
+          maxWidth: screen,
+          padding: system.padding.md,
+          border: `${px2rem(2)} solid ${system.color.border.default}`,
+        }}
+      >
+        <Grid
+          cs={{gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gridGap: system.gap.md}}
+        >
+          <Box cs={{height: px2rem(120), backgroundColor: base.blue400}} />
+          <Box cs={{height: px2rem(120), backgroundColor: base.blue500}} />
+          <Box cs={{height: px2rem(120), backgroundColor: base.blue600}} />
         </Grid>
       </Box>
     </>

package/dist/mdx/react/_examples/mdx/examples/layout/Tiled2and3Columns.tsx

@@ -2,39 +2,74 @@ import * as React from 'react';
 
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const gridStyles = createStyles({
+  gridTemplateAreas: `
+    'Heading Heading Heading Heading Heading Heading' 
+    'FormThirdLeft FormThirdLeft FormThirdCenter FormThirdCenter FormThirdRight FormThirdRight'
+    'FormHalfRight FormHalfRight FormHalfRight FormHalfLeft FormHalfLeft FormHalfLeft'
+  `,
+  gridAutoRows: 'min-content',
+  gridRowGap: system.gap.sm,
+  gridColumnGap: system.gap.xxl,
+  '> *:first-child': {
+    paddingInline: system.padding.sm,
+    border: `${px2rem(1)} solid ${system.color.brand.border.primary}`,
+    gridArea: 'Heading',
+  },
+});
 
 export default () => (
-  <Grid
-    gridTemplateAreas={`
-        'Heading Heading Heading Heading Heading Heading' 
-        'FormThirdLeft FormThirdLeft FormThirdCenter FormThirdCenter FormThirdRight FormThirdRight'
-        'FormHalfRight FormHalfRight FormHalfRight FormHalfLeft FormHalfLeft FormHalfLeft'
-    `}
-    gridAutoRows="min-content"
-    gridRowGap="s"
-    gridColumnGap="xxxl"
-  >
-    <Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
+  <Grid cs={gridStyles}>
+    <Box>
       <Heading size="medium">3 and 2 Column Tiled View</Heading>
     </Box>
-    <FormSkeleton gridArea="FormThirdLeft" text="Form - Left Third" />
-    <FormSkeleton gridArea="FormThirdCenter" text="Form - Center Third" />
-    <FormSkeleton gridArea="FormThirdRight" text="Form - Right Third" />
-    <FormSkeleton gridArea="FormHalfRight" text="Form - Left Half" />
-    <FormSkeleton gridArea="FormHalfLeft" text="Form - Right Half" />
+    <FormSkeleton area="FormThirdLeft" text="Form - Left Third" />
+    <FormSkeleton area="FormThirdCenter" text="Form - Center Third" />
+    <FormSkeleton area="FormThirdRight" text="Form - Right Third" />
+    <FormSkeleton area="FormHalfRight" text="Form - Left Half" />
+    <FormSkeleton area="FormHalfLeft" text="Form - Right Half" />
   </Grid>
 );
 
-const FormSkeleton = ({gridArea, text}) => (
-  <Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" gridArea={gridArea}>
-    <BodyText size="small" fontWeight="bold">
-      {text}
-    </BodyText>
+const boxStencil = createStencil({
+  vars: {
+    area: '',
+  },
+  base: ({area}) => ({
+    paddingInline: system.padding.md,
+    border: `${px2rem(1)} dashed ${system.color.brand.border.primary}`,
+    gridArea: area,
+    p: {
+      fontWeight: system.fontWeight.bold,
+    },
+  }),
+});
+
+const innerGridStyles = createStyles({
+  gridGap: system.gap.sm,
+  marginBlockEnd: system.gap.xl,
+  '> *:first-child': {
+    width: px2rem(120),
+    height: system.size.xxs,
+    backgroundColor: system.color.surface.alt.default,
+  },
+  '> *:last-child': {
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    width: '100%',
+    height: system.size.xxs,
+  },
+});
+
+const FormSkeleton = ({area, text}) => (
+  <Box cs={boxStencil({area})}>
+    <BodyText size="small">{text}</BodyText>
     {Array.from({length: 3}).map(() => (
-      <Grid gridGap="s" marginBottom="xl">
-        <Box backgroundColor="soap500" width="120px" height="s" />
-        <Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
+      <Grid cs={innerGridStyles}>
+        <Box />
+        <Box />
       </Grid>
     ))}
   </Box>

package/dist/mdx/react/_examples/mdx/examples/layout/Tiled4and2Columns.tsx

@@ -2,40 +2,77 @@ import * as React from 'react';
 
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const gridStyles = createStyles({
+  gridTemplateAreas: `
+    'Heading Heading Heading Heading' 
+    'FormTopHalfLeft FormTopHalfLeft FormQuarterLeft FormQuarterRight'
+    'FormHalfLeft FormHalfLeft FormHalfRight FormHalfRight '
+  `,
+  gridTemplateColumns: 'repeat(4, 1fr)',
+  gridAutoRows: 'min-content',
+  gridRowGap: system.gap.sm,
+  gridColumnGap: system.gap.xxl,
+  '> *:first-child': {
+    paddingInline: system.padding.sm,
+    border: `${px2rem(1)} solid ${system.color.brand.border.primary}`,
+    gridArea: 'Heading',
+  },
+});
 
 export default () => (
-  <Grid
-    gridTemplateAreas={`
-        'Heading Heading Heading Heading' 
-        'FormTopHalfLeft FormTopHalfLeft FormQuarterLeft FormQuarterRight'
-        'FormHalfLeft FormHalfLeft FormHalfRight FormHalfRight '
-    `}
-    gridTemplateColumns="repeat(4, 1fr)"
-    gridAutoRows="min-content"
-    gridRowGap="s"
-    gridColumnGap="xxxl"
-  >
-    <Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
+  <Grid cs={gridStyles}>
+    <Box>
       <Heading size="medium">4 and 2 Column Tiled View</Heading>
     </Box>
-    <FormSkeleton gridArea="FormTopHalfLeft" text="Form - Top Left Half" />
-    <FormSkeleton gridArea="FormQuarterLeft" text="Form - Left Quarter" />
-    <FormSkeleton gridArea="FormQuarterRight" text="Form - Right Quarter" />
-    <FormSkeleton gridArea="FormHalfLeft" text="Form - Left Half" />
-    <FormSkeleton gridArea="FormHalfRight" text="Form - Right Half" />
+    <FormSkeleton area="FormTopHalfLeft" text="Form - Top Left Half" />
+    <FormSkeleton area="FormQuarterLeft" text="Form - Left Quarter" />
+    <FormSkeleton area="FormQuarterRight" text="Form - Right Quarter" />
+    <FormSkeleton area="FormHalfLeft" text="Form - Left Half" />
+    <FormSkeleton area="FormHalfRight" text="Form - Right Half" />
   </Grid>
 );
 
-const FormSkeleton = ({gridArea, text}) => (
-  <Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" gridArea={gridArea}>
+const boxStencil = createStencil({
+  vars: {
+    area: '',
+  },
+  base: ({area}) => ({
+    paddingInline: system.padding.md,
+    border: `${px2rem(1)} dashed ${system.color.brand.border.primary}`,
+    gridArea: area,
+    p: {
+      fontWeight: system.fontWeight.bold,
+    },
+  }),
+});
+
+const innerGridStyles = createStyles({
+  gridGap: system.gap.sm,
+  marginBlockEnd: system.gap.xl,
+  '> *:first-child': {
+    width: px2rem(120),
+    height: system.size.xxs,
+    backgroundColor: system.color.surface.alt.default,
+  },
+  '> *:last-child': {
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    width: '100%',
+    height: system.size.xxs,
+  },
+});
+
+const FormSkeleton = ({area, text}) => (
+  <Box cs={boxStencil({area})}>
     <BodyText size="small" fontWeight="bold">
       {text}
     </BodyText>
     {Array.from({length: 3}).map(() => (
-      <Grid gridGap="s" marginBottom="xl">
-        <Box backgroundColor="soap500" width="120px" height="s" />
-        <Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
+      <Grid cs={innerGridStyles}>
+        <Box />
+        <Box />
       </Grid>
     ))}
   </Box>

package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx

@@ -5,6 +5,8 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {breakpoints} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 type MyActionItem = {
   id: string;
@@ -25,7 +27,7 @@ export default () => {
 
   return (
     <div>
-      <Box maxWidth={containerWidth} marginBottom="xl">
+      <Box cs={{maxWidth: containerWidth, marginBlockEnd: system.gap.xxl}}>
         <ActionBar model={model}>
           <ActionBar.List
             position="relative"
@@ -43,7 +45,7 @@ export default () => {
             )}
           </ActionBar.List>
           <ActionBar.Menu.Popper>
-            <ActionBar.Menu.Card maxWidth={300} maxHeight={200}>
+            <ActionBar.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
               <ActionBar.Menu.List>
                 {(item: MyActionItem) => (
                   <ActionBar.Menu.Item onClick={() => console.log(item.id)}>

package/dist/mdx/react/avatar/Avatar.mdx

@@ -1,13 +1,11 @@
 import {
-    ExampleCodeBlock,
-    Specifications,
-    StorybookStatusIndicator,
-    SymbolDoc,
+  ExampleCodeBlock,
+  Specifications,
+  StorybookStatusIndicator,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
 
-
-
-import { Avatar } from '@workday/canvas-kit-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 
 import Basic from './examples/Basic';
 import Custom from './examples/Custom';

package/dist/mdx/react/badge/examples/CustomLimit.tsx

@@ -14,7 +14,7 @@ const columnStyles = createStyles({
 
 const controls = createStyles({
   boxSizing: 'border-box',
-  borderBottom: `solid 1px ${system.color.border.divider}`,
+  borderBlockEnd: `solid 1px ${system.color.border.strong}`,
   display: 'flex',
   gap: system.gap.xs,
   padding: system.padding.xxs,

package/dist/mdx/react/banner/examples/RefForwarding.tsx

@@ -4,6 +4,7 @@ import {Banner} from '@workday/canvas-kit-react/banner';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {changeFocus} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 export default () => {
   const bannerRef = React.useRef<HTMLButtonElement>(null);
@@ -13,7 +14,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column" gap="xs" alignItems="flex-start">
+    <Flex cs={{gap: px2rem(12), alignItems: 'flex-start', flexDirection: 'column'}}>
       <Banner ref={bannerRef}>
         <Banner.Icon />
         <Banner.Label>3 Warnings</Banner.Label>

package/dist/mdx/react/banner/examples/Sticky.tsx

@@ -1,20 +1,21 @@
 import {Banner} from '@workday/canvas-kit-react/banner';
-import {styled} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StyledBanner = styled(Banner)({
+const containerStyles = createStyles({
   position: 'absolute',
   right: 0,
 });
 
 export default () => {
   return (
-    <Box height={64}>
-      <StyledBanner hasError={true} isSticky={true}>
+    <Box cs={{height: system.size.xxl}}>
+      <Banner hasError={true} isSticky={true} cs={containerStyles}>
         <Banner.Icon />
         <Banner.Label>3 Errors</Banner.Label>
         <Banner.ActionText />
-      </StyledBanner>
+      </Banner>
     </Box>
   );
 };

package/dist/mdx/react/banner/examples/StickyRTL.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-
 import {Banner} from '@workday/canvas-kit-react/banner';
-import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StyledStickyBanner = styled(Banner)({
+const containerStyles = createStyles({
   position: 'absolute',
   right: 0,
 });
@@ -12,12 +12,12 @@ const StyledStickyBanner = styled(Banner)({
 export default () => {
   return (
     <CanvasProvider dir="rtl">
-      <Box height={64}>
-        <StyledStickyBanner isSticky={true}>
+      <Box cs={{height: system.size.xxl}}>
+        <Banner isSticky={true} cs={containerStyles}>
           <Banner.Icon />
           <Banner.Label>3 אזהרות</Banner.Label>
           <Banner.ActionText />
-        </StyledStickyBanner>
+        </Banner>
       </Box>
     </CanvasProvider>
   );

package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx

@@ -27,7 +27,7 @@ export default ({width = '100%'}) => {
   const [containerWidth, setContainerWidth] = React.useState(width);
   return (
     <div>
-      <Box cs={{width: containerWidth, marginBottom: system.gap.lg}}>
+      <Box cs={{width: containerWidth, marginBlockEnd: system.gap.lg}}>
         <div style={{display: 'flex', flexDirection: 'column'}}>
           <span>Current Container Width: {containerWidth}</span>
           <span>Overflow visibility: {model.menu.state.visibility}</span>
@@ -64,7 +64,10 @@ export default ({width = '100%'}) => {
           setContainerWidth(data.id);
         }}
       >
-        <SegmentedControl.List aria-label="container width control" marginBottom="m">
+        <SegmentedControl.List
+          aria-label="container width control"
+          cs={{marginBlockEnd: system.gap.lg}}
+        >
           <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
           <SegmentedControl.Item data-id="480px">480px</SegmentedControl.Item>
           <SegmentedControl.Item data-id="250px">250px</SegmentedControl.Item>

package/dist/mdx/react/button/button/examples/Grow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   DeleteButton,
   PrimaryButton,
@@ -7,9 +5,18 @@ import {
   TertiaryButton,
 } from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const baseStyles = {
+  gap: system.gap.md,
+  padding: system.padding.md,
+  flexDirection: 'column',
+  maxWidth: px2rem(300),
+};
 
 export default () => (
-  <Flex gap="s" padding="s" flexDirection="column" maxWidth={300}>
+  <Flex cs={baseStyles}>
     <PrimaryButton size="small" grow={true}>
       Primary
     </PrimaryButton>

package/dist/mdx/react/checkbox/examples/Indeterminate.tsx

@@ -7,7 +7,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = createStyles({
   marginInlineStart: system.gap.xl,
-  marginTop: system.gap.sm,
+  marginBlockStart: system.gap.sm,
 });
 
 export default () => {