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

package/expandable/lib/ExpandableAvatar.tsx

@@ -1,7 +1,7 @@
+import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-react/avatar';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-preview-react/avatar';
-import {createStencil} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 export interface ExpandableAvatarProps extends AvatarProps {}
 
@@ -15,14 +15,19 @@ export const expandableAvatarStencil = createStencil({
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`
 // and the types should be properly extracted
-// Setting altText prop to a default empty string for decorative purposes
+// Setting isDecorative prop to true by default since avatars in expandable headers are typically decorative
 export const ExpandableAvatar = createComponent('div')({
   displayName: 'Expandable.Avatar',
-  Component: ({name = '', ...elemProps}: ExpandableAvatarProps, ref, Element) => {
+  Component: (
+    {name = '', isDecorative = true, ...elemProps}: ExpandableAvatarProps,
+    ref,
+    Element
+  ) => {
     return (
       <Avatar
         as={Element}
         name={name}
+        isDecorative={isDecorative}
         ref={ref}
         size="extraSmall"
         {...mergeStyles(elemProps, expandableAvatarStencil())}

package/expandable/lib/ExpandableContent.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useExpandableContent} from './hooks/useExpandableContent';
 import {useExpandableModel} from './hooks/useExpandableModel';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export interface ExpandableContentProps extends ExtractProps<typeof Box, never> {
   /**
@@ -18,8 +18,8 @@ export interface ExpandableContentProps extends ExtractProps<typeof Box, never>
 
 export const expandableContentStencil = createStencil({
   base: {
-    background: system.color.bg.transparent.default,
-    padding: `${system.space.x4} ${system.space.x2} ${system.space.x2}`,
+    background: system.legacy.color.surface.transparent,
+    padding: `${system.legacy.padding.md} ${system.legacy.padding.xs} ${system.legacy.padding.xs}`,
   },
 });
 

package/expandable/lib/ExpandableIcon.tsx

@@ -1,17 +1,17 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {chevronUpIcon} from '@workday/canvas-system-icons-web';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {useExpandableIcon} from './hooks/useExpandableIcon';
-import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {IconPositions} from '@workday/canvas-kit-react/button';
-import {useExpandableModel} from './hooks/useExpandableModel';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {CanvasSystemIcon, chevronUpIcon} from '@workday/canvas-system-icons-web';
+import {component, system} from '@workday/canvas-tokens-web';
+
+import {useExpandableIcon} from './hooks/useExpandableIcon';
+import {useExpandableModel} from './hooks/useExpandableModel';
 
 export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
   /**
-   * Icon to display from `@workday/canvas-accent-icons-web`
+   * Icon to display from `@workday/canvas-system-icons-web`
    * @default chevronUpIcon
    */
   icon?: CanvasSystemIcon;
@@ -26,7 +26,9 @@ export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon
 export const expandableIconStencil = createStencil({
   extends: systemIconStencil,
   base: {
-    padding: system.space.x1,
+    padding: system.legacy.padding.xxs,
+    [systemIconStencil.vars.color]: system.color.fg.default,
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs,
   },
   modifiers: {
     isExpanded: {
@@ -45,20 +47,20 @@ export const expandableIconStencil = createStencil({
       styles: {
         marginInlineStart: 'auto',
         transform: 'rotate(180deg)',
-        paddingInlineEnd: system.space.x3,
+        paddingInlineEnd: system.legacy.padding.sm,
       },
     },
     {
       modifiers: {position: 'end', isExpanded: true},
       styles: {
         marginInlineStart: 'auto',
-        paddingInlineStart: system.space.x3,
+        paddingInlineStart: system.legacy.padding.sm,
       },
     },
     {
       modifiers: {position: 'start', isExpanded: false},
       styles: {
-        marginInlineEnd: system.space.x2,
+        marginInlineEnd: system.legacy.padding.xs,
         transform: 'rotate(90deg)',
         ':dir(rtl)': {
           transform: 'rotate(-90deg)',
@@ -68,7 +70,7 @@ export const expandableIconStencil = createStencil({
     {
       modifiers: {position: 'start', isExpanded: true},
       styles: {
-        marginInlineEnd: system.space.x2,
+        marginInlineEnd: system.legacy.padding.xs,
         transform: 'rotate(180deg)',
       },
     },

package/expandable/lib/ExpandableTarget.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
-import {useExpandableTarget} from './hooks/useExpandableTarget';
+
 import {useExpandableModel} from './hooks/useExpandableModel';
+import {useExpandableTarget} from './hooks/useExpandableTarget';
 
 export interface ExpandableTargetProps extends ExtractProps<typeof Flex, never> {
   /**
@@ -25,23 +26,23 @@ export interface ExpandableTargetProps extends ExtractProps<typeof Flex, never>
 
 export const expandableTargetStencil = createStencil({
   base: {
-    background: system.color.bg.transparent.default,
-    borderColor: system.color.bg.transparent.default,
-    borderRadius: system.shape.x1,
+    background: system.legacy.color.surface.transparent,
+    borderColor: system.color.border.transparent,
+    borderRadius: system.legacy.shape.xxl,
     borderWidth: 0,
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'row',
-    gap: system.space.x2,
+    gap: system.legacy.gap.none,
     justifyContent: 'start',
-    padding: system.space.x2,
+    padding: system.legacy.padding.xs,
     cursor: 'pointer',
     width: '100%',
     '&:hover, &.hover': {
-      backgroundColor: system.color.bg.alt.soft,
+      backgroundColor: system.legacy.color.surface.overlay.hover.default,
     },
     '&:focus-visible, &.focus': {
-      outline: `${brand.common.focusOutline} solid ${px2rem(2)}`,
+      outline: `${cssVar(system.legacy.color.brand.border.primary, brand.common.focusOutline)} solid ${px2rem(2)}`,
     },
   },
 });

package/expandable/lib/ExpandableTitle.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ExpandableTitleProps extends ExtractProps<typeof Box, never> {
   /**
@@ -14,10 +14,12 @@ export interface ExpandableTitleProps extends ExtractProps<typeof Box, never> {
 
 export const expandableTitleStencil = createStencil({
   base: {
-    ...system.type.body.medium,
+    fontFamily: system.fontFamily.default,
+    lineHeight: system.legacy.lineHeight.body.md,
+    fontSize: system.legacy.fontSize.body.md,
     fontWeight: system.fontWeight.bold,
-    color: system.color.text.strong,
-    padding: `${px2rem(2)} ${system.space.zero}`,
+    color: system.color.fg.strong,
+    padding: `${px2rem(2)} ${system.legacy.padding.xs}`,
     textAlign: 'left',
   },
 });

package/expandable/lib/hooks/useExpandableContent.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useExpandableModel} from './useExpandableModel';
 
 export const useExpandableContent = createElemPropsHook(useExpandableModel)(({state}) => {

package/expandable/lib/hooks/useExpandableIcon.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useExpandableModel} from './useExpandableModel';
 
 export const useExpandableIcon = createElemPropsHook(useExpandableModel)(({state}) => {

package/expandable/lib/hooks/useExpandableTarget.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useExpandableModel} from './useExpandableModel';
 
 export const useExpandableTarget = createElemPropsHook(useExpandableModel)(({state, events}) => {

package/form-field/index.ts

@@ -5,6 +5,5 @@ export * from './lib/FormFieldGroupLabel';
 export * from './lib/FormFieldGroupInput';
 export * from './lib/FormFieldGroupList';
 export * from './lib/formFieldStencil';
-export * from './lib/FormFieldContainer';
 export * from './lib/FormFieldHint';
 export * from './lib/FormFieldLabel';

package/form-field/lib/FormField.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 
-import {createContainer, GrowthBehavior} from '@workday/canvas-kit-react/common';
+import {GrowthBehavior, createContainer} from '@workday/canvas-kit-react/common';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 
-import {useFormFieldModel} from './hooks';
+import {FormFieldField} from './FormFieldField';
+import {FormFieldHint} from './FormFieldHint';
 import {FormFieldInput} from './FormFieldInput';
 import {FormFieldLabel} from './FormFieldLabel';
-import {FormFieldHint} from './FormFieldHint';
-import {FormFieldContainer} from './FormFieldContainer';
 import {formFieldStencil} from './formFieldStencil';
-import {FormFieldField} from './FormFieldField';
+import {useFormFieldModel} from './hooks';
 
 export interface FormFieldProps extends FlexProps, GrowthBehavior {
   /**
@@ -79,23 +78,6 @@ export const FormField = createContainer('div')({
      * @stencil formFieldHintStencil
      */
     Hint: FormFieldHint,
-    /**
-     * `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
-     *
-     * ```tsx
-     * <FormField orientation="horizontalStart">
-     *    <FormField.Label>First Name</FormField.Label>
-     *    <FormField.Container>
-     *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
-     *      <FormField.Hint>This is your hint text</FormField.Hint>
-     *    </FormField.Container>
-     *  </FormField>
-     * ```
-     *
-     * @stencil formFieldContainerStencil
-     * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
-     */
-    Container: FormFieldContainer,
     /**
      * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
      * ```tsx

package/form-field/lib/FormFieldField.tsx

@@ -1,14 +1,14 @@
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
-import {handleCsProp, CSProps, createStencil} from '@workday/canvas-kit-styling';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useFormFieldModel} from './hooks';
-import {system} from '@workday/canvas-tokens-web';
 
 export const formFieldFieldStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    gap: system.space.x2,
+    gap: system.legacy.gap.sm,
   },
 });
 

package/form-field/lib/FormFieldGroup.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 
-import {createContainer, GrowthBehavior} from '@workday/canvas-kit-react/common';
+import {GrowthBehavior, createContainer} from '@workday/canvas-kit-react/common';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 
-import {FormFieldGroupList} from './FormFieldGroupList';
+import {FormField} from './FormField';
 import {FormFieldGroupInput} from './FormFieldGroupInput';
 import {FormFieldGroupLabel} from './FormFieldGroupLabel';
-import {FormField} from './FormField';
-
-import {useFormFieldModel} from './hooks';
+import {FormFieldGroupList} from './FormFieldGroupList';
 import {formFieldStencil} from './formFieldStencil';
+import {useFormFieldModel} from './hooks';
 
 //TODO: Remove `horizontal` option in v13 and the console warn message.
 export interface FormFieldGroupProps extends FlexProps, GrowthBehavior {

package/form-field/lib/FormFieldGroupInput.tsx

@@ -1,5 +1,6 @@
 import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+
 import {useFormFieldModel} from './hooks';
 
 export interface FormFieldGroupInputProps extends CSProps {}

package/form-field/lib/FormFieldGroupLabel.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 import {useFormFieldModel} from './hooks';
 
 export interface FormFieldGroupLabelProps
@@ -20,8 +21,8 @@ export const formFieldGroupLabelStencil = createStencil({
   extends: textStencil,
   base: {
     fontWeight: system.fontWeight.medium,
-    color: system.color.text.default,
-    paddingInlineStart: system.space.zero,
+    color: system.color.fg.default,
+    paddingInlineStart: 0,
     display: 'flex',
     alignItems: 'center',
     minWidth: px2rem(180),
@@ -31,11 +32,11 @@ export const formFieldGroupLabelStencil = createStencil({
       true: {
         '&::after': {
           content: '"*"',
-          fontSize: system.fontSize.body.large,
+          fontSize: system.legacy.fontSize.body.lg,
           fontWeight: system.fontWeight.normal,
-          color: brand.error.base,
+          color: system.legacy.color.brand.fg.critical.default,
           textDecoration: 'unset',
-          marginInlineStart: system.space.x1,
+          marginInlineStart: system.legacy.gap.xs,
         },
       },
     },
@@ -46,10 +47,10 @@ export const formFieldGroupLabelStencil = createStencil({
       horizontalStart: {
         justifyContent: 'flex-start',
         float: 'left',
-        maxHeight: system.space.x10,
+        maxHeight: system.legacy.size.md,
       },
       horizontalEnd: {
-        maxHeight: system.space.x10,
+        maxHeight: system.legacy.size.md,
         float: 'left',
         justifyContent: 'flex-end',
       },

package/form-field/lib/FormFieldGroupList.tsx

@@ -1,9 +1,7 @@
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
-
 import {FlexProps} from '@workday/canvas-kit-react/layout';
-
-import {createStencil, CSProps, calc, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {useFormFieldModel} from './hooks';
 
@@ -13,24 +11,22 @@ const formFieldGroupListStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: system.shape.x1Half,
-    gap: system.space.x2,
-    padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
-    margin: `0 ${calc.negate(system.space.x3)}`,
+    borderRadius: system.legacy.shape.md,
+    gap: system.legacy.gap.sm,
+    padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`,
+    margin: `0 ${calc.negate(base.legacy.size150)}`,
     transition: '100ms box-shadow',
     width: 'fit-content',
   },
   modifiers: {
     error: {
       error: {
-        backgroundColor: brand.error.lightest,
-        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.errorInner}`,
+        backgroundColor: system.legacy.color.brand.surface.critical.default,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
       },
       caution: {
-        backgroundColor: brand.alert.lightest,
-        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.alertOuter}, inset 0 0 0 ${px2rem(3)} ${
-          brand.common.alertInner
-        }`,
+        backgroundColor: system.legacy.color.brand.surface.caution.default,
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${system.legacy.color.brand.border.caution}, inset 0 0 0 ${px2rem(3)} ${system.legacy.color.brand.focus.caution.inner}`,
       },
     },
   },

package/form-field/lib/FormFieldHint.tsx

@@ -1,23 +1,23 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {system, brand} from '@workday/canvas-tokens-web';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useFormFieldHint, useFormFieldModel} from './hooks';
 
 export const formFieldHintStencil = createStencil({
   extends: textStencil,
   base: {
-    margin: system.space.zero,
+    margin: 0,
   },
   modifiers: {
     error: {
       error: {
-        color: brand.error.base,
+        color: system.legacy.color.brand.fg.critical.default,
       },
       caution: {
-        color: system.color.text.caution.default,
+        color: system.color.fg.default,
       },
     },
   },

package/form-field/lib/FormFieldInput.tsx

@@ -1,4 +1,4 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useFormFieldInput, useFormFieldModel} from './hooks';

package/form-field/lib/FormFieldLabel.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {createSubcomponent, ExtractProps, accessibleHide} from '@workday/canvas-kit-react/common';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {ExtractProps, accessibleHide, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useFormFieldLabel, useFormFieldModel} from './hooks';
 
@@ -25,8 +25,8 @@ export const formFieldLabelStencil = createStencil({
   extends: textStencil,
   base: {
     fontWeight: system.fontWeight.medium,
-    color: system.color.text.default,
-    paddingInlineStart: system.space.zero,
+    color: system.color.fg.default,
+    paddingInlineStart: 0,
     display: 'flex',
     alignItems: 'center',
     minWidth: px2rem(180),
@@ -36,11 +36,11 @@ export const formFieldLabelStencil = createStencil({
       true: {
         '&::after': {
           content: '"*"',
-          fontSize: system.fontSize.body.large,
+          fontSize: system.legacy.fontSize.body.lg,
           fontWeight: system.fontWeight.normal,
-          color: brand.error.base,
+          color: system.legacy.color.brand.fg.critical.default,
           textDecoration: 'unset',
-          marginInlineStart: system.space.x1,
+          marginInlineStart: system.legacy.gap.xs,
         },
       },
     },
@@ -48,10 +48,10 @@ export const formFieldLabelStencil = createStencil({
       horizontalStart: {
         justifyContent: 'flex-start',
         float: 'left',
-        maxHeight: system.space.x10,
+        maxHeight: system.legacy.size.md,
       },
       horizontalEnd: {
-        maxHeight: system.space.x10,
+        maxHeight: system.legacy.size.md,
         float: 'left',
         justifyContent: 'flex-end',
       },

package/form-field/lib/formFieldStencil.ts

@@ -5,8 +5,8 @@ export const formFieldStencil = createStencil({
   base: {
     display: 'flex',
     border: 'none',
-    padding: system.space.zero,
-    margin: `${system.space.zero} ${system.space.zero} ${system.space.x6}`,
+    padding: 0,
+    margin: `0 0 ${system.legacy.gap.lg}`,
   },
   modifiers: {
     grow: {
@@ -23,15 +23,17 @@ export const formFieldStencil = createStencil({
     orientation: {
       horizontalStart: {
         flexDirection: 'row',
-        gap: system.space.x8,
+        gap: system.legacy.gap.xl,
+        width: '100%',
       },
       horizontalEnd: {
         flexDirection: 'row',
-        gap: system.space.x8,
+        gap: system.legacy.gap.xl,
+        width: '100%',
       },
       vertical: {
         flexDirection: 'column',
-        gap: system.space.x1,
+        gap: system.legacy.gap.xs,
         alignItems: 'flex-start',
       },
     },

package/form-field/lib/hooks/useFormFieldHint.tsx

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useFormFieldModel} from './useFormFieldModel';
 
 /**

package/form-field/lib/hooks/useFormFieldInput.tsx

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useFormFieldModel} from './useFormFieldModel';
 
 /**

package/form-field/lib/hooks/useFormFieldLabel.tsx

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useFormFieldModel} from './useFormFieldModel';
 
 /**

package/form-field/lib/hooks/useFormFieldOrientation.tsx

@@ -1,5 +1,5 @@
 import {FlexProps} from '@workday/canvas-kit-react/layout';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
 
 /**
  * Adds the necessary layout props to a `FormField` component.
@@ -16,13 +16,13 @@ export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical')
   if (orientation === 'horizontal') {
     layoutProps = {
       flexDirection: 'row',
-      gap: space.l,
+      gap: system.legacy.gap.xl,
       alignItems: undefined,
     };
   } else {
     layoutProps = {
       flexDirection: 'column',
-      gap: space.xxxs,
+      gap: system.legacy.gap.xs,
       alignItems: 'flex-start',
     };
   }

package/icon/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/AccentIcon';
 export * from './lib/AppletIcon';
+export * from './lib/ExpressiveIcon';
 export * from './lib/SystemIcon';
 export * from './lib/SystemIconCircle';
 export * from './lib/Graphic';
-export {Svg, SvgProps, svgStencil} from './lib/Svg';
+export {Svg, type SvgProps, svgStencil} from './lib/Svg';