@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/information-highlight/lib/parts/Heading.tsx

@@ -0,0 +1,36 @@
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const informationHighlightHeadingStencil = createStencil({
+  base: () => {
+    return {
+      fontFamily: system.fontFamily.default,
+      fontWeight: system.fontWeight.bold,
+      lineHeight: system.legacy.lineHeight.body.sm,
+      fontSize: system.legacy.fontSize.body.sm,
+      letterSpacing: system.legacy.letterSpacing.body.sm,
+      color: system.color.fg.default,
+      gridColumn: '2',
+      margin: 0,
+    };
+  },
+});
+
+export interface InformationHighlightHeadingProps
+  extends Partial<ExtractProps<typeof Heading, never>> {}
+
+export const InformationHighlightHeading = createComponent('h3')({
+  displayName: 'Heading',
+  Component: ({size = 'small', ...elemProps}: InformationHighlightHeadingProps, ref, Element) => {
+    return (
+      <Heading
+        as={Element}
+        ref={ref}
+        size={size}
+        {...handleCsProp(elemProps, informationHighlightHeadingStencil())}
+      />
+    );
+  },
+});

package/information-highlight/lib/parts/Icon.tsx

@@ -0,0 +1,30 @@
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {
+  exclamationCircleIcon,
+  exclamationTriangleIcon,
+  infoIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
+
+export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {}
+const defaultIcons = {
+  informational: infoIcon,
+  caution: exclamationTriangleIcon,
+  critical: exclamationCircleIcon,
+};
+
+export const Icon = createSubcomponent('span')({
+  displayName: 'Icon',
+  modelHook: useInformationHighlightModel,
+})(({icon, ...props}: IconProps, Element, model) => {
+  return (
+    <SystemIcon
+      as={Element}
+      icon={icon ? icon : defaultIcons[model.state.variant]}
+      data-part="information-highlight-icon"
+      {...props}
+    />
+  );
+});

package/information-highlight/lib/parts/Link.tsx

@@ -0,0 +1,32 @@
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const informationHighlightLinkStencil = createStencil({
+  base: () => {
+    return {
+      fontFamily: system.fontFamily.default,
+      fontWeight: system.fontWeight.bold,
+      lineHeight: system.legacy.lineHeight.subtext.lg,
+      fontSize: system.legacy.fontSize.subtext.lg,
+      letterSpacing: system.legacy.letterSpacing.subtext.lg,
+      gridColumn: '2',
+      justifySelf: 'start',
+      color: system.color.fg.default,
+    };
+  },
+});
+
+export const Link = createComponent('a')({
+  displayName: 'Link',
+  Component: ({...elemProps}: ExtractProps<typeof Hyperlink, never>, ref, Element) => {
+    return (
+      <Hyperlink
+        as={Element}
+        ref={ref}
+        {...handleCsProp(elemProps, informationHighlightLinkStencil())}
+      />
+    );
+  },
+});

package/information-highlight/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/information-highlight",
+  "module": "../dist/es6/information-highlight",
+  "sideEffects": false,
+  "types": "../dist/es6/information-highlight"
+}

package/layout/index.ts

@@ -3,7 +3,7 @@ export * from './lib/utils/mergeStyles';
 export * from './lib/utils/background';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
-export {DepthStyleProps, depthStyleFnConfigs} from './lib/utils/depth';
+export {type DepthStyleProps, depthStyleFnConfigs} from './lib/utils/depth';
 export * from './lib/utils/flex';
 export * from './lib/utils/flexItem';
 export * from './lib/utils/grid';
@@ -12,12 +12,12 @@ export * from './lib/utils/layout';
 export * from './lib/utils/other';
 export * from './lib/utils/systemProps';
 export * from './lib/utils/position';
-export {SpaceStyleProps, spaceStyleFnConfigs} from './lib/utils/space';
-export {AllStyleProps, CommonStyleProps} from './lib/utils/styleProps';
+export {type SpaceStyleProps, spaceStyleFnConfigs} from './lib/utils/space';
+export {type AllStyleProps, type CommonStyleProps} from './lib/utils/styleProps';
 export * from './lib/utils/text';
 export * from './lib/Flex';
 export * from './lib/Grid';
 export type {FlexStyleProps} from './lib/utils/flex';
 export type {GridStyleProps} from './lib/utils/grid';
-export {GridItemStyleProps, gridItemStyleFnConfigs} from './lib/utils/gridItem';
+export {type GridItemStyleProps, gridItemStyleFnConfigs} from './lib/utils/gridItem';
 export * from './lib/utils/systemProps';

package/layout/lib/Box.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
-import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
+import styled from '@emotion/styled';
+import * as React from 'react';
+
+import {StyledType, createComponent, useConstant} from '@workday/canvas-kit-react/common';
 import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
 
 // style props
@@ -15,8 +16,8 @@ import {layout} from './utils/layout';
 import {other} from './utils/other';
 import {position} from './utils/position';
 import {space} from './utils/space';
-import {text} from './utils/text';
 import {CommonStyleProps} from './utils/styleProps';
+import {text} from './utils/text';
 
 /**
  * Box Props

package/layout/lib/Flex.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from './Box';
 
-import {flex, FlexStyleProps} from './utils/flex';
+import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
+
+import {Box, BoxProps} from './Box';
+import {FlexStyleProps, flex} from './utils/flex';
 
 export type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 

package/layout/lib/Grid.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from './Box';
 
-import {grid, GridStyleProps} from './utils/grid';
+import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
+
+import {Box, BoxProps} from './Box';
+import {GridStyleProps, grid} from './utils/grid';
 
 export type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
 export type GridItemProps = BoxProps;

package/layout/lib/utils/background.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to set CSS background properties

package/layout/lib/utils/border/color.ts

@@ -1,4 +1,4 @@
-import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {StyleFnConfig, buildStyleFns} from '../buildStyleFns';
 import {SystemPropValues} from '../systemProps';
 
 /** style props to set CSS border color properties

package/layout/lib/utils/border/index.ts

@@ -1,6 +1,6 @@
 import {buildStylePropFn} from '../buildStyleFns';
 import {BorderColorStyleProps, borderColorFns, borderColorStyleFnConfigs} from './color';
-import {BorderLineStyleProps, borderLineStyleFns, borderLineStyleFnConfigs} from './lineStyle';
+import {BorderLineStyleProps, borderLineStyleFnConfigs, borderLineStyleFns} from './lineStyle';
 import {BorderRadiusStyleProps, borderRadiusFns, borderRadiusStyleFnConfigs} from './radius';
 import {
   BorderShorthandStyleProps,

package/layout/lib/utils/border/lineStyle.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {StyleFnConfig, buildStyleFns} from '../buildStyleFns';
 
 /** style props to set CSS border style properties
  * @deprecated

package/layout/lib/utils/border/radius.ts

@@ -1,4 +1,4 @@
-import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {StyleFnConfig, buildStyleFns} from '../buildStyleFns';
 import {SystemPropValues} from '../systemProps';
 
 /** style props to set CSS border radius properties

package/layout/lib/utils/border/shorthand.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {StyleFnConfig, buildStyleFns} from '../buildStyleFns';
 
 /** style props to set CSS border properties
  * @deprecated

package/layout/lib/utils/border/width.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {StyleFnConfig, buildStyleFns} from '../buildStyleFns';
 
 /** style props to set CSS border width properties
  * @deprecated

package/layout/lib/utils/color.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to set CSS color properties

package/layout/lib/utils/depth.ts

@@ -1,5 +1,6 @@
 import {Property} from 'csstype';
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to for depth styles

package/layout/lib/utils/flex.ts

@@ -1,6 +1,6 @@
-import {Property, Globals} from 'csstype';
+import {Globals, Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to for CSS flexbox container properties

package/layout/lib/utils/flexItem.ts

@@ -1,5 +1,6 @@
 import {Property} from 'csstype';
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 
 /** style props to for CSS flex item properties
  * @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).

package/layout/lib/utils/grid.ts

@@ -1,6 +1,6 @@
-import {Property, Globals} from 'csstype';
+import {Globals, Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to for CSS grid container properties

package/layout/lib/utils/gridItem.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 
 /** style props to for CSS grid item properties
  * @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).

package/layout/lib/utils/layout.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to for CSS layout properties

package/layout/lib/utils/mergeStyles.ts

@@ -1,4 +1,5 @@
 import {CSToPropsInput, handleCsProp} from '@workday/canvas-kit-styling';
+
 import {boxStyleFn} from '../Box';
 import {backgroundStyleFnConfigs} from './background';
 import {borderStyleFnConfigs} from './border';
@@ -30,11 +31,14 @@ const stylePropHash = [
   ...positionStyleFnConfigs,
   ...spaceStyleFnConfigs,
   ...textStyleFnConfigs,
-].reduce((result, prop) => {
-  //@ts-ignore
-  result[prop.name] = true;
-  return result;
-}, {} as Record<string, boolean>);
+].reduce(
+  (result, prop) => {
+    //@ts-ignore
+    result[prop.name] = true;
+    return result;
+  },
+  {} as Record<string, boolean>
+);
 
 function isStyleProps(prop: string): boolean {
   return stylePropHash[prop] || false;

package/layout/lib/utils/other.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 
 /**
  * style props to for other CSS properties

package/layout/lib/utils/position.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 
 /**
  * style props to for CSS position properties

package/layout/lib/utils/space.ts

@@ -1,4 +1,4 @@
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to for CSS space properties

package/layout/lib/utils/text.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype';
 
-import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {StyleFnConfig, buildStyleFns, buildStylePropFn} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
 /** style props to for CSS font and text properties

package/loading-dots/lib/LoadingDots.tsx

@@ -1,14 +1,14 @@
-import {system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {
-  handleCsProp,
-  keyframes,
   CSProps,
-  createStencil,
   calc,
-  px2rem,
+  createStencil,
   cssVar,
+  handleCsProp,
+  keyframes,
+  px2rem,
 } from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 /**
  * Keyframe for the dots loading animation.
@@ -34,7 +34,7 @@ const keyframesLoading = keyframes({
 export interface LoadingDotsProps extends CSProps {
   /**
    * Applies backgroundColor to loading dots, intended for use with the circle variant design on grey/dark/image-based backgrounds.
-   * @default `system.color.bg.alt.strong`
+   * @default `system.color.accent.muted.default`
    */
   loadingDotColor?: string;
   /**
@@ -48,20 +48,20 @@ export interface LoadingDotsProps extends CSProps {
 export const loadingDotsStencil = createStencil({
   vars: {
     animationDurationMs: '40ms',
-    loadingDotColor: system.color.bg.muted.strong,
+    loadingDotColor: '',
   },
   parts: {
     loadingAnimationDot: 'loading-animation-dot',
   },
   base: ({loadingDotColor, animationDurationMs, loadingAnimationDotPart}) => ({
     display: 'inline-flex',
-    gap: system.space.x2,
+    gap: system.legacy.gap.sm,
     [loadingAnimationDotPart]: {
-      backgroundColor: loadingDotColor,
-      width: system.space.x4,
-      height: system.space.x4,
-      fontSize: system.space.zero,
-      borderRadius: system.shape.round,
+      backgroundColor: cssVar(loadingDotColor, system.legacy.color.accent.muted.default),
+      width: system.legacy.size.xxxs,
+      height: system.legacy.size.xxxs,
+      fontSize: 0,
+      borderRadius: system.legacy.shape.full,
       outline: `${px2rem(2)} solid transparent`,
       transform: 'scale(0)',
       display: 'inline-block',
@@ -85,7 +85,7 @@ export const loadingDotsStencil = createStencil({
     variant: {
       inverse: ({loadingDotColor, loadingAnimationDotPart}) => ({
         [loadingAnimationDotPart]: {
-          backgroundColor: cssVar(system.color.bg.default, loadingDotColor),
+          backgroundColor: cssVar(loadingDotColor, system.color.bg.default),
         },
       }),
     },

package/menu/lib/Menu.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {useMenuModel} from './useMenuModel';
-import {MenuPopper} from './MenuPopper';
-import {MenuTarget, MenuTargetContext} from './MenuTarget';
-import {MenuItem} from './MenuItem';
 import {MenuCard} from './MenuCard';
-import {MenuList} from './MenuList';
 import {MenuDivider} from './MenuDivider';
-import {MenuOption} from './MenuOption';
 import {MenuGroup} from './MenuGroup';
+import {MenuItem} from './MenuItem';
+import {MenuList} from './MenuList';
+import {MenuOption} from './MenuOption';
+import {MenuPopper} from './MenuPopper';
+import {MenuTarget, MenuTargetContext} from './MenuTarget';
 import {Submenu} from './Submenu';
+import {useMenuModel} from './useMenuModel';
 
 export interface MenuProps {
   /**

package/menu/lib/MenuCard.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-
 import {
-  createSubcomponent,
   ExtractProps,
   createElemPropsHook,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useMenuModel} from './useMenuModel';
-import {createStencil, calc, px2rem} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface MenuCardProps extends ExtractProps<typeof Card, never> {
   children?: React.ReactNode;
@@ -26,14 +25,21 @@ export const menuCardStencil = createStencil({
     maxHeight: '',
   },
   base: ({transformOriginVertical, transformOriginHorizontal, minWidth, maxHeight}) => ({
-    ...system.type.subtext.large,
-    color: system.color.text.default,
+    // ...system.legacy.type.subtext.lg,
+    // components do not support spreading for legacy type token
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    color: system.color.fg.default,
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     transition: `transform ease-out 150ms`,
-    padding: system.space.zero,
-    maxWidth: calc.subtract('100vw', system.space.x8),
+    padding: system.legacy.padding.xxs,
+    borderRadius: system.legacy.shape.xxl,
+    maxWidth: calc.subtract('100vw', system.legacy.size.sm),
     boxShadow: system.depth[3],
     minWidth,
     maxHeight,

package/menu/lib/MenuContextTarget.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   composeHooks,
-  createSubcomponent,
   createElemPropsHook,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {usePopupTarget, usePopupTargetContext} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';

package/menu/lib/MenuDivider.tsx

@@ -1,5 +1,5 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, px2rem, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface DividerProps extends CSProps {}
@@ -8,9 +8,9 @@ export const menuDividerStencil = createStencil({
   base: {
     display: 'block',
     height: px2rem(1),
-    border: system.space.zero,
-    borderTop: `${px2rem(1)} solid ${system.color.border.divider}`,
-    margin: `${system.space.x2} ${system.space.zero}`,
+    border: 'none',
+    borderTop: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+    margin: `${system.legacy.gap.sm} ${system.legacy.gap.md}`,
   },
 });
 

package/menu/lib/MenuGroup.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
 
-import {createStencil, CSProps} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
 import {
-  createSubcomponent,
+  createContainer,
   createElemPropsHook,
   createModelHook,
-  createContainer,
+  createSubcomponent,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {CSProps, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface MenuGroupHeaderProps extends CSProps, FlexProps {
   /**
@@ -68,14 +67,16 @@ const useMenuGroupModel = createModelHook({
 
 export const menuGroupHeadingStencil = createStencil({
   base: {
-    ...system.type.subtext.large,
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    fontWeight: system.fontWeight.bold,
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    gap: system.space.x4,
-    padding: `${system.space.x2} ${system.space.x4}`,
-    boxSizing: 'border-box',
-    fontWeight: system.fontWeight.bold,
+    gap: system.legacy.gap.md,
+    padding: `${system.legacy.padding.xs} ${system.legacy.padding.md}`,
   },
 });