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

package/radio/lib/StyledRadioButton.tsx

@@ -1,51 +1,39 @@
 import React from 'react';
 
-import {
-  StyledType,
-  focusRing,
-  createComponent,
-  ExtractProps,
-} from '@workday/canvas-kit-react/common';
-
+import {ExtractProps, StyledType, createComponent} from '@workday/canvas-kit-react/common';
 import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {CSProps, calc, createStencil, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {RadioLabelContext} from './RadioLabel';
 
-const radioWidth = 18;
-const radioHeight = 18;
-
 export interface StyledRadioButtonProps extends CSProps {
   variant?: 'inverse' | undefined;
 }
 
-const radioInputStencil = createStencil({
+export const radioInputStencil = createStencil({
+  parts: {
+    check: 'cnvs-radio-check',
+  },
   base: {
     cursor: 'pointer',
-    height: px2rem(radioHeight),
-    width: px2rem(radioWidth),
-    borderRadius: system.shape.round,
+    height: base.legacy.size225,
+    width: base.legacy.size225,
+    borderRadius: system.legacy.shape.full,
     position: 'absolute',
-    margin: system.space.zero,
+    margin: 0,
     '&:focus-visible, &.focus, &:active': {
       outline: 'transparent',
     },
     '&:disabled, &.disabled': {
       cursor: 'auto',
-      '+ .cnvs-radio-check': {
-        borderColor: system.color.border.input.disabled,
-        backgroundColor: system.color.bg.alt.softer,
-      },
-      '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
-        borderColor: system.color.border.input.disabled,
-      },
+      opacity: system.opacity.disabled,
       // This creates the inner circle when the Radio is checked.
       // The backgroundColor represents the dot in the middle of the radio.
       // The borderColor represents the border around the middle dot of the radio.
       '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-        backgroundColor: brand.primary.accent, // inner circle background color
-        border: `${px2rem(5)} solid ${brand.primary.base}`, // inner circle border color
+        backgroundColor: system.legacy.color.surface.default, // inner circle background color
+        border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color
       },
     },
 
@@ -55,11 +43,11 @@ const radioInputStencil = createStencil({
       flexDirection: 'column',
       alignItems: 'center',
       backgroundColor: system.color.bg.default,
-      borderRadius: system.shape.round,
       boxSizing: 'border-box',
       border: `${px2rem(1)} solid ${system.color.border.input.default}`,
-      height: px2rem(radioHeight),
-      width: px2rem(radioWidth),
+      height: base.legacy.size225,
+      width: base.legacy.size225,
+      borderRadius: system.legacy.shape.full,
       justifyContent: 'center',
       pointerEvents: 'none',
       position: 'absolute',
@@ -68,97 +56,72 @@ const radioInputStencil = createStencil({
     },
 
     '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
-      borderColor: system.color.border.input.strong,
+      borderColor: system.color.border.input.default,
     },
 
     '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
-      borderColor: system.color.border.primary.default,
-      ...focusRing({
-        width: 1,
-        separation: 0,
-        animate: false,
-        innerColor: system.color.border.inverse,
-        outerColor: brand.common.focusOutline,
-      }),
-    },
-
-    '&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check': {
       outline: 'transparent',
+      borderColor: system.legacy.color.brand.border.primary,
+      boxShadow: `0 0 0 0px ${system.legacy.color.focus.inverse} ,0 0 0 1px ${system.legacy.color.brand.focus.primary} `,
     },
     // This creates the inner circle when the Radio is checked.
     // The backgroundColor represents the dot in the middle of the radio.
     // The borderColor represents the border around the middle dot of the radio.
     '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-      backgroundColor: brand.primary.accent, // inner circle background color
-      border: `${px2rem(5)} solid ${brand.primary.base}`, // inner circle border color
+      backgroundColor: system.legacy.color.surface.default, // inner circle background color
+      border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color
     },
 
     '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check':
       {
         outline: 'transparent',
-        ...focusRing({
-          width: 2,
-          separation: 2,
-          animate: false,
-          innerColor: system.color.border.inverse,
-          outerColor: brand.common.focusOutline,
-        }),
+        boxShadow: `0 0 0 ${px2rem(2)}  ${system.legacy.color.focus.inverse} ,0 0 0 ${px2rem(4)}  ${system.legacy.color.brand.focus.primary} `,
       },
   },
   modifiers: {
     variant: {
-      inverse: {
-        '+ .cnvs-radio-check': {
-          backgroundColor: system.color.bg.alt.softer,
-          borderColor: system.color.border.input.inverse,
+      inverse: ({checkPart}) => ({
+        [`+ ${checkPart}`]: {
+          backgroundColor: system.legacy.color.surface.inverse,
+          borderColor: system.legacy.color.border.inverse.default,
         },
         '&:disabled, &.disabled': {
           opacity: system.opacity.disabled,
-          '+ .cnvs-radio-check': {
-            backgroundColor: system.color.bg.alt.softer,
-            borderColor: system.color.border.input.disabled,
-            opacity: system.opacity.disabled,
+          [`+ ${checkPart}`]: {
+            backgroundColor: system.legacy.color.surface.inverse,
+            borderColor: system.legacy.color.focus.inverse,
+            // opacity: system.opacity.disabled,
           },
           // This creates the inner circle when the Radio is checked.
           // The backgroundColor represents the dot in the middle of the radio.
           // The borderColor represents the border around the middle dot of the radio.
-          '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-            backgroundColor: brand.primary.base, // inner circle background color
-            borderColor: system.color.border.inverse, // inner circle border color
+          [`&:checked + ${checkPart}, &.checked + ${checkPart}`]: {
+            backgroundColor: system.legacy.color.brand.accent.primary, // inner circle background color
+            borderColor: system.legacy.color.border.inverse.default, // inner circle border color
           },
         },
-        '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
-          borderColor: system.color.border.input.inverse,
+        [`&:hover + ${checkPart}, &.hover + ${checkPart}`]: {
+          borderColor: system.legacy.color.border.inverse.default,
         },
-        '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
-          borderColor: system.color.border.input.inverse,
+        [`&:focus-visible + ${checkPart}, &.focus + ${checkPart}`]: {
+          borderColor: system.legacy.color.border.inverse.default,
         },
         // This creates the inner circle when the Radio is checked.
         // The backgroundColor represents the dot in the middle of the radio.
         // The borderColor represents the border around the middle dot of the radio.
-        '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-          backgroundColor: brand.primary.base, // inner circle background color
-          borderColor: system.color.border.inverse, // inner circle border color
+        [`&:checked + ${checkPart}, &.checked + ${checkPart}`]: {
+          backgroundColor: system.legacy.color.brand.accent.primary, // inner circle background color
+          borderColor: system.legacy.color.border.inverse.default, // inner circle border color
         },
-        '&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check':
+        [`&:focus-visible + ${checkPart}, &:focus-visible:hover + ${checkPart}, &.focus + ${checkPart}, &.focus:hover + ${checkPart}`]:
           {
-            ...focusRing({
-              width: 2,
-              separation: 0,
-              innerColor: system.color.border.contrast.default,
-              outerColor: system.color.border.inverse,
-            }),
+            boxShadow: `0 0 0 ${px2rem(2)}  ${system.legacy.color.brand.border.primary}`,
           },
-        '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check':
+        [`&:focus-visible:checked + ${checkPart}, &:focus-visible:hover:checked + ${checkPart}, &.focus:checked + ${checkPart}, &.focus:hover:checked + ${checkPart}`]:
           {
-            ...focusRing({
-              width: 2,
-              separation: 2,
-              innerColor: system.color.border.contrast.default,
-              outerColor: system.color.border.inverse,
-            }),
+            boxShadow: `0 0 0 ${px2rem(2)}  ${system.color.border.contrast.default} ,0 0 0 ${px2rem(4)}  ${system.legacy.color.focus.inverse} `,
           },
-      },
+      }),
     },
   },
 });
@@ -170,36 +133,37 @@ const StyledRadioInput = createComponent('input')<StyledRadioButtonProps & Style
   },
 });
 
-const radioInputWrapperStyles = createStencil({
+export const radioInputWrapperStencil = createStencil({
   base: {
-    height: px2rem(radioHeight),
-    width: px2rem(radioWidth),
+    height: base.legacy.size225,
+    width: base.legacy.size225,
     flex: '0 0 auto',
     // Hover Ripple element
     '::before': {
       content: "''",
       position: 'absolute',
-      borderRadius: system.shape.round,
-      height: px2rem(radioHeight),
+      borderRadius: system.legacy.shape.full,
+      height: base.legacy.size225,
       transition: 'box-shadow 150ms ease-out',
-      width: px2rem(radioWidth),
+      width: base.legacy.size225,
       pointerEvents: 'none',
       opacity: system.opacity.full,
     },
     '&:hover:before, &.hover:before': {
-      boxShadow: `0 0 0 ${calc.subtract(system.space.x2, px2rem(1))} ${system.color.bg.alt.soft}`,
+      boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.default}`,
     },
   },
   modifiers: {
     variant: {
       inverse: {
-        '::before': {
-          opacity: system.opacity.disabled,
+        '&:hover:before, &.hover:before': {
+          boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.inverse}`,
         },
       },
     },
     disabled: {
       true: {
+        opacity: system.opacity.disabled,
         '&:hover:before, &.hover:before': {
           boxShadow: 'none',
           cursor: 'auto',
@@ -216,7 +180,10 @@ const RadioInputWrapper = createComponent(Flex)<
   Component: ({children, variant, ...elemProps}: StyledRadioButtonProps, ref, Element) => {
     const {disabled} = React.useContext(RadioLabelContext);
     return (
-      <Element ref={ref} {...handleCsProp(elemProps, radioInputWrapperStyles({variant, disabled}))}>
+      <Element
+        ref={ref}
+        {...handleCsProp(elemProps, radioInputWrapperStencil({variant, disabled}))}
+      >
         {children}
       </Element>
     );
@@ -249,7 +216,7 @@ export const StyledRadioButton = createComponent('input')({
           disabled={disabled}
           {...elemProps}
         />
-        <span className="cnvs-radio-check" />
+        <span {...radioInputStencil.parts.check} className="cnvs-radio-check" />
       </RadioInputWrapper>
     );
   },

package/side-panel/lib/SidePanel.tsx

@@ -1,13 +1,24 @@
 import * as React from 'react';
+
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {SidePanelContext} from './hooks';
+
 import {SidePanelToggleButton} from './SidePanelToggleButton';
+import {SidePanelContext} from './hooks';
 
+/**
+ * @deprecated ⚠️ `SidePanelVariant` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export type SidePanelVariant = 'standard' | 'alternate';
+/**
+ * @deprecated ⚠️ `SidePanelTransitionStates` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 
+/**
+ * @deprecated ⚠️ `SidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export interface SidePanelProps {
   /**
    * The width of the component (in `px` if it's a `number`) when it is collapsed.
@@ -62,6 +73,9 @@ export interface SidePanelProps {
   onAnimationEnd?: React.TransitionEvent<HTMLElement>;
 }
 
+/**
+ * @deprecated ⚠️ `panelStencil` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export const panelStencil = createStencil({
   vars: {
     expandedWidth: '',
@@ -81,7 +95,7 @@ export const panelStencil = createStencil({
         boxShadow: system.depth[5],
       },
       standard: {
-        backgroundColor: system.color.bg.alt.softer,
+        backgroundColor: system.legacy.color.surface.default,
       },
     },
     expanded: {
@@ -103,6 +117,9 @@ export const panelStencil = createStencil({
   },
 });
 
+/**
+ * @deprecated ⚠️ `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export const SidePanel = createComponent('section')({
   displayName: 'SidePanel',
   Component(

package/side-panel/lib/SidePanelToggleButton.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {transformationImportIcon} from '@workday/canvas-system-icons-web';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {SidePanelContext} from './hooks';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {extendIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
+
 import {SidePanelTransitionStates} from './SidePanel';
+import {SidePanelContext} from './hooks';
 
 export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton, never> {
   /**
@@ -22,9 +24,9 @@ export interface SidePanelToggleButtonProps extends ExtractProps<typeof Tertiary
 export const sidePanelToggleButtonStencil = createStencil({
   base: {
     position: 'absolute',
-    top: system.space.x6,
-    width: system.space.x8,
-    insetInlineEnd: system.space.x4,
+    top: system.legacy.gap.lg,
+    width: system.legacy.size.sm,
+    insetInlineEnd: system.legacy.gap.md,
   },
   modifiers: {
     state: {
@@ -76,21 +78,21 @@ export const sidePanelToggleButtonStencil = createStencil({
       modifiers: {state: 'collapsing', origin: 'right'},
       styles: {
         transform: `scaleX(-1)`,
-        insetInlineStart: system.space.x4,
+        insetInlineStart: system.legacy.gap.md,
       },
     },
     {
       modifiers: {state: 'expanded', origin: 'right'},
       styles: {
         transform: `scaleX(1)`,
-        insetInlineStart: system.space.x4,
+        insetInlineStart: system.legacy.gap.md,
       },
     },
     {
       modifiers: {state: 'expanding', origin: 'right'},
       styles: {
         transform: `scaleX(1)`,
-        insetInlineStart: system.space.x4,
+        insetInlineStart: system.legacy.gap.md,
       },
     },
   ],
@@ -103,7 +105,7 @@ export const SidePanelToggleButton = createComponent('button')({
   displayName: 'SidePanel.ToggleButton',
   Component({
     variant = undefined,
-    icon = transformationImportIcon,
+    icon = extendIcon,
     tooltipTextExpand = 'Expand',
     tooltipTextCollapse = 'Collapse',
     ...elemProps

package/side-panel/lib/hooks.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+
 export const SidePanelContext = React.createContext({
   state: 'expanded',
   origin: 'left' as 'left' | 'right',
   handleAnimationStart: () => undefined,
 });
 
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 /**
  * The optional config options for the `useSidePanel` hook
+ * @deprecated ⚠️ `UseSidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
  */
 export interface UseSidePanelProps {
   /**
@@ -30,6 +32,7 @@ export interface UseSidePanelProps {
 
 /**
  * The `panelProps` provided by the `useSidePanel` hook
+ * @deprecated ⚠️ `PanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
  */
 export interface PanelProps {
   /**
@@ -53,6 +56,9 @@ export interface PanelProps {
   touched: boolean;
 }
 
+/**
+ * @deprecated ⚠️ `LabelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export interface LabelProps {
   /**
    * the accessible `id`
@@ -61,6 +67,9 @@ export interface LabelProps {
   id: string;
 }
 
+/**
+ * @deprecated ⚠️ `ControlProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export interface ControlProps {
   /**
    * the accessible `id` that connects the panel to this control
@@ -97,6 +106,7 @@ export interface ControlProps {
  *   labelId: 'custom-label-id',
  * });
  * ```
+ * @deprecated ⚠️ `useSidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
  */
 export const useSidePanel = (config?: UseSidePanelProps) => {
   const [touched, setTouched] = React.useState(false);

package/status-indicator/lib/StatusIndicator.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
 import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {ExtractStencilProps, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
 import {StatusIndicatorIcon} from './StatusIndicatorIcon';
 import {StatusIndicatorLabel} from './StatusIndicatorLabel';
 
@@ -18,7 +19,6 @@ export type StatusIndicatorVariant =
   | 'caution'
   | 'positive'
   | 'critical'
-  | 'ai'
   | 'transparent'
   | 'blue'
   | 'green'
@@ -60,12 +60,12 @@ const deprecatedVariantsMap = {
 const statusIndicatorStencil = createStencil({
   base: {
     display: 'inline-flex',
-    gap: system.space.x1,
+    gap: system.legacy.gap.xs,
     maxWidth: px2rem(200),
     alignItems: 'center',
-    borderRadius: system.shape.round,
-    height: px2rem(20),
-    padding: `${system.space.zero} ${system.space.x2}`,
+    borderRadius: system.legacy.shape.sm,
+    height: system.legacy.size.xxs,
+    padding: `0 ${system.legacy.padding.xs}`,
     outline: `${px2rem(1)} solid transparent`,
     [systemIconStencil.vars.color]: 'currentColor',
   },
@@ -84,32 +84,28 @@ const statusIndicatorStencil = createStencil({
      */
     variant: {
       info: {
-        color: system.color.fg.info.strong,
-        backgroundColor: system.color.bg.info.softer,
+        color: system.legacy.color.fg.info.strong,
+        backgroundColor: system.legacy.color.surface.info.strong,
       },
       positive: {
-        color: system.color.fg.positive.strong,
-        backgroundColor: system.color.fg.positive.softer,
+        color: system.legacy.color.fg.success.strong,
+        backgroundColor: system.legacy.color.surface.success.strong,
       },
       caution: {
-        color: system.color.fg.caution.soft,
-        backgroundColor: system.color.bg.caution.softer,
+        color: system.legacy.color.fg.warning.strong,
+        backgroundColor: system.legacy.color.surface.warning.strong,
       },
       critical: {
-        color: system.color.fg.critical.strong,
-        backgroundColor: system.color.bg.critical.softer,
+        color: system.legacy.color.fg.danger.strong,
+        backgroundColor: system.legacy.color.surface.danger.strong,
       },
       neutral: {
         color: system.color.fg.muted.strong,
-        backgroundColor: system.color.bg.alt.default,
-      },
-      ai: {
-        color: system.color.fg.ai,
-        backgroundColor: system.color.bg.ai.default,
+        backgroundColor: system.legacy.color.surface.alt.strong,
       },
       transparent: {
         color: system.color.fg.inverse,
-        backgroundColor: system.color.bg.translucent,
+        backgroundColor: system.legacy.color.surface.contrast.default,
       },
     },
     /**
@@ -134,7 +130,7 @@ const statusIndicatorStencil = createStencil({
         emphasis: 'high',
       },
       styles: {
-        backgroundColor: system.color.bg.info.default,
+        backgroundColor: system.legacy.color.accent.info,
         color: system.color.fg.inverse,
       },
     },
@@ -144,7 +140,7 @@ const statusIndicatorStencil = createStencil({
         emphasis: 'high',
       },
       styles: {
-        backgroundColor: system.color.bg.positive.default,
+        backgroundColor: system.legacy.color.accent.success,
         color: system.color.fg.inverse,
       },
     },
@@ -154,8 +150,8 @@ const statusIndicatorStencil = createStencil({
         emphasis: 'high',
       },
       styles: {
-        backgroundColor: system.color.bg.caution.default,
-        color: system.color.fg.caution.strong,
+        backgroundColor: system.legacy.color.accent.warning,
+        color: system.color.fg.contrast.default,
       },
     },
     {
@@ -164,7 +160,7 @@ const statusIndicatorStencil = createStencil({
         emphasis: 'high',
       },
       styles: {
-        backgroundColor: system.color.bg.critical.default,
+        backgroundColor: system.legacy.color.accent.danger,
         color: system.color.fg.inverse,
       },
     },
@@ -174,7 +170,7 @@ const statusIndicatorStencil = createStencil({
         emphasis: 'high',
       },
       styles: {
-        backgroundColor: system.color.bg.muted.default,
+        backgroundColor: system.legacy.color.accent.muted.default,
         color: system.color.fg.inverse,
       },
     },

package/status-indicator/lib/StatusIndicatorIcon.tsx

@@ -6,6 +6,10 @@ export interface StatusIndicatorIconProps extends SystemIconProps {}
 export const StatusIndicatorIcon = createComponent('span')({
   displayName: 'StatusIndicatorIcon',
   Component: (elemProps: SystemIconProps, ref, Element) => {
+    if (!elemProps.icon?.type) {
+      return null;
+    }
+
     return <SystemIcon as={Element} ref={ref} size={20} role="img" {...elemProps} />;
   },
 });

package/status-indicator/lib/StatusIndicatorLabel.tsx

@@ -1,7 +1,7 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {TextProps, textStencil} from '@workday/canvas-kit-react/text';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface StatusIndicatorLabelProps extends TextProps {}

package/switch/index.ts

@@ -0,0 +1,6 @@
+export * from './lib/Switch';
+export * from './lib/SwitchBackground';
+export * from './lib/SwitchCircle';
+export * from './lib/SwitchContainer';
+export * from './lib/SwitchIcon';
+export * from './lib/SwitchInput';