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

package/button/lib/PrimaryButton.tsx

@@ -2,7 +2,7 @@ import {createComponent, forwardFitTokens} from '@workday/canvas-kit-react/commo
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
-import {buttonStencil} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {Button, ButtonProps} from './Button';
 
 /**
@@ -24,33 +24,33 @@ const primaryButtonStencil = createStencil({
     [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
     [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.full,
     [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-    [systemIconStencil.vars.color]: 'currentColor',
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
       [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
       [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
     },
     // Hover Styles
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: cssVar(brand.action.dark, brand.primary.dark),
       [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: cssVar(brand.action.darkest, brand.primary.darkest),
       [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
       [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
       [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
     },
   },
   modifiers: {
@@ -60,32 +60,32 @@ const primaryButtonStencil = createStencil({
         [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
         [buttonStencil.vars.borderRadius]: system.shape.round,
         [buttonStencil.vars.label]: system.color.fg.strong,
-        [systemIconStencil.vars.color]: 'currentColor',
+        [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
           [buttonStencil.vars.label]: system.color.fg.strong,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
           [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
         },
         // Hover Styles
         '&:hover, &.hover': {
           [buttonStencil.vars.background]: cssVar(brand.action.lighter, brand.primary.lightest),
           [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
         // Active Styles
         '&:active, &.active': {
           [buttonStencil.vars.background]: cssVar(brand.action.light, brand.primary.light),
           [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
           [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
         },
       },
     },

package/button/lib/SecondaryButton.tsx

@@ -1,6 +1,6 @@
-import {buttonStencil} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent, forwardFitTokens} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -25,35 +25,35 @@ const secondaryButtonStencil = createStencil({
     [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.full,
     [buttonStencil.vars.border]: system.color.border.input.default,
     [buttonStencil.vars.label]: system.color.fg.strong,
-    [systemIconStencil.vars.color]: 'currentColor',
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: system.color.bg.default,
       [buttonStencil.vars.label]: system.color.fg.stronger,
       [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
     },
     // Hover Styles
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: system.color.bg.alt.default,
       [buttonStencil.vars.label]: system.color.fg.stronger,
       [buttonStencil.vars.border]: system.color.border.input.strong,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: system.color.bg.alt.strong,
       [buttonStencil.vars.label]: system.color.fg.stronger,
       [buttonStencil.vars.border]: system.color.border.input.strong,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
       [buttonStencil.vars.background]: system.color.bg.transparent.default,
       [buttonStencil.vars.label]: system.color.fg.stronger,
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
     },
   },
   modifiers: {
@@ -63,13 +63,13 @@ const secondaryButtonStencil = createStencil({
         [buttonStencil.vars.background]: 'transparent',
         [buttonStencil.vars.border]: system.color.border.inverse,
         [buttonStencil.vars.label]: system.color.fg.inverse,
-        [systemIconStencil.vars.color]: 'currentColor',
+        [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Hover Styles
         '&:hover, &.hover': {
           [buttonStencil.vars.background]: system.color.bg.transparent.strong,
           [buttonStencil.vars.border]: system.color.border.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
         // Focus Styles
         '&:focus-visible, &.focus': {
@@ -78,21 +78,21 @@ const secondaryButtonStencil = createStencil({
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
           [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
         },
         // Active Styles
         '&:active, &.active': {
           [buttonStencil.vars.background]: system.color.bg.transparent.stronger,
           [buttonStencil.vars.border]: system.color.border.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
           [buttonStencil.vars.background]: 'transparent',
           [buttonStencil.vars.border]: system.color.border.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
         },
       },
     },

package/button/lib/TertiaryButton.tsx

@@ -27,12 +27,12 @@ const tertiaryButtonStencil = createStencil({
     [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.full,
     [buttonStencil.vars.background]: system.color.bg.transparent.default,
     [buttonStencil.vars.label]: brand.primary.base,
-    [systemIconStencil.vars.color]: 'currentColor',
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: system.color.bg.transparent.default,
       [buttonStencil.vars.label]: brand.primary.base,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
       ...focusRing({
         width: 2,
         separation: 0,
@@ -44,14 +44,14 @@ const tertiaryButtonStencil = createStencil({
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: system.color.bg.alt.soft,
       [buttonStencil.vars.label]: brand.primary.dark,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
       textDecoration: 'underline',
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: system.color.bg.alt.default,
       [buttonStencil.vars.label]: brand.primary.darkest,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
       textDecoration: 'underline',
     },
     // Disabled Styles
@@ -59,7 +59,7 @@ const tertiaryButtonStencil = createStencil({
       [buttonStencil.vars.background]: system.color.bg.transparent.default,
       [buttonStencil.vars.label]: brand.primary.base,
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
     },
   },
   modifiers: {
@@ -105,12 +105,12 @@ const tertiaryButtonStencil = createStencil({
       inverse: {
         [buttonStencil.vars.background]: 'transparent',
         [buttonStencil.vars.label]: system.color.fg.inverse,
-        [systemIconStencil.vars.color]: 'currentColor',
+        [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.color.bg.translucent,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
           ...focusRing({
             width: 2,
             separation: 0,
@@ -121,19 +121,19 @@ const tertiaryButtonStencil = createStencil({
         '&:hover, &.hover': {
           [buttonStencil.vars.background]: system.color.bg.transparent.strong,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
         // Active Styles
         '&:active, &.active': {
           [buttonStencil.vars.background]: system.color.bg.transparent.stronger,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
           [buttonStencil.vars.background]: 'transparent',
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
         },
       },
     },

package/button/lib/ToolbarDropdownButton.tsx

@@ -1,10 +1,10 @@
 import {brand, system} from '@workday/canvas-tokens-web';
-import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {calc, createStencil, handleCsProp, px2rem, cssVar} from '@workday/canvas-kit-styling';
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {focusRing, createComponent, forwardFitTokens} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 
-import {BaseButton, buttonStencil} from './BaseButton';
+import {BaseButton, buttonColorPropVars, buttonStencil} from './BaseButton';
 import {ToolbarIconButtonProps} from './ToolbarIconButton';
 
 export interface ToolbarDropdownButtonProps
@@ -25,7 +25,10 @@ export const toolbarDropdownButtonStencil = createStencil({
 
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [systemIconStencil.vars.color]: system.color.fg.muted.soft,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.focus.icon,
+        system.color.fg.muted.soft
+      ),
       ...focusRing({
         width: 2,
         separation: 0,
@@ -36,17 +39,26 @@ export const toolbarDropdownButtonStencil = createStencil({
 
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: system.color.bg.alt.default,
-      [systemIconStencil.vars.color]: system.color.fg.muted.stronger,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.hover.icon,
+        system.color.fg.muted.stronger
+      ),
     },
 
     '&:active, &.active': {
       [buttonStencil.vars.background]: system.color.bg.alt.stronger,
-      [systemIconStencil.vars.color]: system.color.fg.muted.stronger,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.active.icon,
+        system.color.fg.muted.stronger
+      ),
     },
 
     '&:disabled, &.disabled': {
       [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [systemIconStencil.vars.color]: system.color.fg.disabled,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        system.color.fg.disabled
+      ),
     },
 
     [customIconPart]: {

package/common/lib/CanvasProvider.tsx

@@ -6,7 +6,10 @@ import {getCache, maybeWrapCSSVariables, createStyles} from '@workday/canvas-kit
 
 export interface CanvasProviderProps {
   /**
-   * @deprecated ⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+   * ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.
+   * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#global-vs-scoped-theming).
+   *
+   * While we support theme overrides, we advise to use global theming via CSS Variables.
    */
   theme?: PartialEmotionCanvasTheme;
 }

package/common/lib/theming/types.ts

@@ -269,9 +269,6 @@ export type PartialCanvasTheme = RecursivePartial<CanvasTheme>;
  */
 export type PartialCanvasThemePalette = RecursivePartial<CanvasThemePalette>;
 
-/**
- * @deprecated ⚠️ `PartialEmotionCanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
- */
 export type PartialEmotionCanvasTheme = {canvas?: PartialCanvasTheme};
 
 declare module '@emotion/react' {

package/common/lib/theming/useTheme.ts

@@ -12,11 +12,14 @@ import {cssVar} from '@workday/canvas-kit-styling';
 import {base} from '@workday/canvas-tokens-web';
 
 /**
- * We can adjust the shift but this should get us close enough until we clean up the algorithm to determine the colors.
+ * Attempt to match chroma-js's darken/brighten behavior using OKLCH.
+ * Chroma's darken(1) reduces LAB lightness by ~18 units (out of 100).
+ * In OKLCH, lightness is 0-1, so we scale: value/100 * 0.18 = value * 0.0018
  * @deprecated ⚠️ `shiftColor` is deprecated and will be removed in a future major version. While we work on an algorithm for color shifting, you can use [`oklch from`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) to generate a palette.
  */
 const shiftColor = (color: string, value: number) => {
-  return `oklch(from ${color} calc(l ${value > 0 ? '+' : '-'} ${Math.abs(value) / 1000}) c h)`;
+  const shift = Math.abs(value) * 0.0018;
+  return `oklch(from ${color} calc(l ${value > 0 ? '+' : '-'} ${shift}) c h)`;
 };
 
 const generatePalette = (

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -9,7 +9,7 @@ const collection_1 = require("@workday/canvas-kit-react/collection");
 const useActionBarModel_1 = require("./useActionBarModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.actionBarListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2zyera", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4));background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4)) var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8)) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));> *{flex:1;}}" }
+    base: { name: "1cil9z", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4));background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4)) var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8)) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));> *{flex:1;}}" }
 }, "action-bar-list-0c9a57");
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = (0, common_1.createSubcomponent)('div')({

package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js

@@ -11,7 +11,7 @@ const button_1 = require("@workday/canvas-kit-react/button");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.actionBarOverflowButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1h49tk", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "2mm6bq", styles: "box-sizing:border-box;flex:0;" }
 }, "action-bar-overflow-button-0a24d9");
 exports.useActionBarOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useActionBarModel_1.useActionBarModel)(() => ({
     'aria-haspopup': true,

package/dist/commonjs/avatar/lib/Avatar.js

@@ -52,34 +52,34 @@ exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
         icon: 'avatar-icon',
         image: 'avatar-image',
     },
-    base: { name: "1cejnj", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-a7d274);height:var(--size-avatar-a7d274);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-8fcab8:calc(var(--size-avatar-a7d274) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
+    base: { name: "1zh1oi", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-a7d274);height:var(--size-avatar-a7d274);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-8fcab8:calc(var(--size-avatar-a7d274) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
     modifiers: {
         variant: {
-            light: { name: "1q05tb", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-default);}" },
-            dark: { name: "v3yrt", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);}" }
+            light: { name: "nvqnm", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-default);}" },
+            dark: { name: "1id7f2", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);}" }
         },
         size: {
-            extraSmall: { name: "3cpdfk", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
-            small: { name: "251hkh", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
-            medium: { name: "j0wc6", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
-            large: { name: "2akmbi", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
-            extraLarge: { name: "sg0pq", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
-            extraExtraLarge: { name: "1xsn1k", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
+            extraSmall: { name: "33j2l8", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
+            small: { name: "41r6q", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
+            medium: { name: "1eb24z", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
+            large: { name: "xiyx", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
+            extraLarge: { name: "16yc53", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
+            extraExtraLarge: { name: "29epil", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
         },
         objectFit: {
-            contain: { name: "2k35pi", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            fill: { name: "2zk086", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            cover: { name: "4bnk0c", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            ['scale-down']: { name: "29vo73", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            none: { name: "2mho2d", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['-moz-initial']: { name: "1ukw6b", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['initial']: { name: "yh4fe", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            ['inherit']: { name: "19aj6n", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            ['revert']: { name: "9rgu7", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
-            ['unset']: { name: "19ee9y", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
+            contain: { name: "1sg90f", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            fill: { name: "10rzyu", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            cover: { name: "3unqau", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            ['scale-down']: { name: "1ppc9m", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            none: { name: "2itw9r", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['-moz-initial']: { name: "3iaeyq", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['initial']: { name: "hndmy", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            ['inherit']: { name: "vn1ct", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            ['revert']: { name: "319r31", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
+            ['unset']: { name: "19uhsw", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
         },
         isImageLoaded: {
-            true: { name: "3mfan0", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" }
+            true: { name: "498l1l", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" }
         }
     },
     defaultModifiers: {

package/dist/commonjs/badge/lib/CountBadge.js

@@ -5,24 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const grow = (0, canvas_kit_styling_1.keyframes)({ name: "1wfqyv", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "1srcy1", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "gpr8f", styles: "box-sizing:border-box;align-items:center;animation:animation-1wfqyv 0.2s ease;border-radius:var(--cnvs-sys-shape-round);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;background:var(--cnvs-sys-color-fg-critical-default);color:var(--cnvs-sys-color-text-inverse);" },
+    base: { name: "2vze32", styles: "box-sizing:border-box;align-items:center;animation:animation-1srcy1 0.2s ease;border-radius:var(--cnvs-sys-shape-round);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;background:var(--cnvs-sys-color-fg-critical-default);color:var(--cnvs-sys-color-text-inverse);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "42r1qd", styles: "background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-primary-default);" }
+            inverse: { name: "nbu5c", styles: "background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-primary-default);" }
         },
         emphasis: {
-            high: { name: "47p512", styles: "" },
-            low: { name: "3ygbek", styles: "background:var(--cnvs-sys-color-bg-info-softer);color:var(--cnvs-sys-color-fg-info-stronger);" }
+            high: { name: "2ka4wb", styles: "" },
+            low: { name: "1llpi7", styles: "background:var(--cnvs-sys-color-bg-info-softer);color:var(--cnvs-sys-color-fg-info-stronger);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', emphasis: 'low' },
-            styles: { name: "2eba8", styles: "background:var(--cnvs-sys-color-bg-transparent-strong);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "1y7yv7", styles: "background:var(--cnvs-sys-color-bg-transparent-strong);color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ]
 }, "count-badge-524876");

package/dist/commonjs/banner/lib/Banner.js

@@ -12,15 +12,15 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "33d296", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-x1);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-x1);border-end-end-radius:var(--cnvs-sys-shape-x1);cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-space-x1) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-shape-x1) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "tcafq", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-x1);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-x1);border-end-end-radius:var(--cnvs-sys-shape-x1);cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-space-x1) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-shape-x1) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "3e3xy1", styles: "background-color:var(--cnvs-brand-error-base);color:var(--cnvs-brand-error-accent);&:hover, &.hover{background:var(--cnvs-brand-error-dark);}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" },
-            false: { name: "1j6yqm", styles: "background-color:var(--cnvs-brand-alert-base);color:var(--cnvs-brand-alert-accent);&:hover, &.hover{background:var(--cnvs-brand-alert-dark);}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" }
+            true: { name: "1vfmkm", styles: "background-color:var(--cnvs-brand-error-base);color:var(--cnvs-brand-error-accent);&:hover, &.hover{background:var(--cnvs-brand-error-dark);}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" },
+            false: { name: "3kc2ou", styles: "background-color:var(--cnvs-brand-alert-base);color:var(--cnvs-brand-alert-accent);&:hover, &.hover{background:var(--cnvs-brand-alert-dark);}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" }
         },
         isSticky: {
-            true: { name: "1eghob", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "cztl8", styles: "width:20.5rem;" }
+            true: { name: "3zdo0z", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "qwr0v", styles: "width:20.5rem;" }
         }
     }
 }, "banner-4eaf8d");

package/dist/commonjs/banner/lib/BannerActionText.js

@@ -7,10 +7,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.actionBarTextStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "d4snl", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
+    base: { name: "2yfjgf", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
     modifiers: {
         isSticky: {
-            true: { name: "9emtp", styles: "display:none;" }
+            true: { name: "2evf14", styles: "display:none;" }
         }
     }
 }, "action-bar-text-c1912f");

package/dist/commonjs/banner/lib/BannerIcon.js

@@ -8,7 +8,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.bannerIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3hvi8j", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x3);" }
+    base: { name: "2vuluh", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x3);" }
 }, "banner-icon-12b0fa");
 exports.BannerIcon = (0, common_1.createSubcomponent)('span')({
     displayName: 'Banner.Icon',

package/dist/commonjs/banner/lib/BannerLabel.js

@@ -7,7 +7,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 exports.bannerLabelStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2ifib5", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
+    base: { name: "2ke178", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
 }, "banner-label-416ec4");
 exports.BannerLabel = (0, common_1.createSubcomponent)('div')({
     displayName: 'Banner.Label',

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js

@@ -13,7 +13,7 @@ exports.breadcrumbsCurrentItemStencil = (0, canvas_kit_styling_1.createStencil)(
     vars: {
         maxWidth: '',
     },
-    base: { name: "ndj77", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-e1cc6f);" }
+    base: { name: "39cunx", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-e1cc6f);" }
 }, "breadcrumbs-current-item-e1cc6f");
 exports.useBreadcrumbsItem = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)((_model, ref, elemProps) => {
     const { localRef } = (0, common_1.useLocalRef)((0, common_1.useForkRef)(ref));

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js

@@ -15,7 +15,7 @@ exports.breadcrumbsItemStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
     },
-    base: { name: "gj3eg", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-8fcab8:1.25rem;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+    base: { name: "16g9rt", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-8fcab8:1.25rem;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
 }, "breadcrumbs-item-3a0e6d");
 exports.useBreadcrumbsItem = (0, common_1.composeHooks)(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
 exports.BreadcrumbsItem = (0, common_1.createSubcomponent)('li')({

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js

@@ -11,7 +11,7 @@ exports.breadcrumbsLinkStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         maxWidth: '',
     },
-    base: { name: "1umxry", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-3d9ed7);" }
+    base: { name: "2ggn6n", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-3d9ed7);" }
 }, "breadcrumbs-link-3d9ed7");
 exports.BreadcrumbsLink = (0, common_1.createComponent)('a')({
     displayName: 'Breadcrumbs.Link',

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsList.js

@@ -8,7 +8,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const useBreadcrumbsModel_1 = require("./hooks/useBreadcrumbsModel");
 exports.breadcrumbsListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rilkt", styles: "box-sizing:border-box;padding:0;margin:0;display:inline-flex;align-items:center;min-height:var(--cnvs-sys-space-x10);list-style:none;width:100%;" }
+    base: { name: "27mnpr", styles: "box-sizing:border-box;padding:0;margin:0;display:inline-flex;align-items:center;min-height:var(--cnvs-sys-space-x10);list-style:none;width:100%;" }
 }, "breadcrumbs-list-af272b");
 exports.BreadcrumbsList = (0, common_1.createSubcomponent)('ul')({
     displayName: 'Breadcrumbs.List',

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.js

@@ -6,7 +6,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const menu_1 = require("@workday/canvas-kit-react/menu");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.breadcrumbsMenuItemStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3ew6e2", styles: "box-sizing:border-box;text-decoration:none;" }
+    base: { name: "33avuv", styles: "box-sizing:border-box;text-decoration:none;" }
 }, "breadcrumbs-menu-item-4f4f2d");
 exports.BreadcrumbsMenuItem = (0, common_1.createComponent)('a')({
     displayName: 'Breadcrumbs.Menu.Item',
@@ -15,7 +15,7 @@ exports.BreadcrumbsMenuItem = (0, common_1.createComponent)('a')({
     },
 });
 exports.breadcrumbsMenuCardStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "45l8ez", styles: "box-sizing:border-box;width:17.5rem;max-width:17.5rem;max-height:18.5rem;" }
+    base: { name: "1g8hf1", styles: "box-sizing:border-box;width:17.5rem;max-width:17.5rem;max-height:18.5rem;" }
 }, "breadcrumbs-menu-card-39f355");
 const BreadcrumbsMenuCard = (elemProps) => ((0, jsx_runtime_1.jsx)(menu_1.Menu.Card, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.breadcrumbsMenuCardStencil)()) }));
 exports.BreadcrumbsMenuCard = BreadcrumbsMenuCard;

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js

@@ -16,7 +16,7 @@ exports.breadcrumbsOverflowButtonStencil = (0, canvas_kit_styling_1.createStenci
         overflowButton: 'breadcrumbs-overflow-button',
         chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
     },
-    base: { name: "6fjis", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-8fcab8:1.25rem;[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+    base: { name: "41tyqk", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-8fcab8:1.25rem;[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
 }, "breadcrumbs-overflow-button-9c6f83");
 exports.useBreadcrumbsOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)(() => ({
     'aria-haspopup': true,