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

package/common/lib/CanvasProvider.tsx

@@ -2,7 +2,7 @@ import {CacheProvider, Theme, ThemeProvider} from '@emotion/react';
 import * as React from 'react';
 
 import {createStyles, getCache, maybeWrapCSSVariables} from '@workday/canvas-kit-styling';
-import {base, brand} from '@workday/canvas-tokens-web';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 
 import {PartialEmotionCanvasTheme, defaultCanvasTheme, useTheme} from './theming';
 
@@ -26,6 +26,92 @@ const mappedKeys = {
   contrast: 'accent',
 };
 
+/**
+ * Mapping from deprecated theme palette keys to new numerical brand tokens.
+ * This ensures backwards compatibility when consumers use the old theme format.
+ * For example: palette.primary.main -> brand.primary600
+ */
+const numericalTokenMapping = {
+  lightest: '25',
+  lighter: '50',
+  light: '200',
+  main: '600',
+  dark: '700',
+  darkest: '800',
+} as const;
+
+/**
+ * Mapping from deprecated theme palette colors to new brand token names.
+ * For example:
+ * `primary` -> `primary`
+ * `error` -> `critical`
+ * `success` -> `positive`
+ * `alert` -> `caution`
+ * `neutral` -> `neutral`
+ */
+const brandColorMapping = {
+  primary: 'primary',
+  error: 'critical',
+  success: 'positive',
+  alert: 'caution',
+  neutral: 'neutral',
+} as const;
+
+/**
+ * Mapping from deprecated common palette keys to new brand.common tokens.
+ *
+ * ## Brandable System Tokens
+ *
+ * These are all the `system.color.brand.*` tokens that can be customized via theming.
+ * Each token references a brand token that can be overridden through the CanvasProvider theme prop.
+ *
+ * ### Focus Tokens
+ * - `system.color.brand.focus.primary` → `brand.primary.500` → Controlled by `focusOutline` (separately from `palette.primary.main`, which controls `brand.primary.600`)
+ * - `system.color.brand.focus.critical` → `brand.critical.500` → Controlled by `palette.error.dark` or `errorInner`
+ * - `system.color.brand.focus.caution.inner` → `brand.caution.400` → Controlled by `palette.alert.main` or `alertInner`
+ * - `system.color.brand.focus.caution.outer` → `brand.caution.500` → Controlled by `palette.alert.dark` or `alertOuter`
+ *
+ * ### Border Tokens
+ * - `system.color.brand.border.primary` → `brand.primary.500` → Controlled by `focusOutline` (separately from `palette.primary.main`, which controls `brand.primary.600`)
+ * - `system.color.brand.border.critical` → `brand.critical.500` → Controlled by `palette.error.dark` or `errorInner`
+ * - `system.color.brand.border.caution` → `brand.caution.500` → Controlled by `palette.alert.dark` or `alertOuter`
+ *
+ * ### Surface Tokens
+ * - `system.color.brand.surface.primary.default` → `brand.primary.A25` → Controlled by `palette.primary.lightest`
+ * - `system.color.brand.surface.primary.strong` → `brand.primary.A50` → Controlled by `palette.primary.lighter`
+ * - `system.color.brand.surface.critical.default` → `brand.critical.A25` → Controlled by `palette.error.lightest`
+ * - `system.color.brand.surface.critical.strong` → `brand.critical.A50` → Controlled by `palette.error.lighter`
+ * - `system.color.brand.surface.caution.default` → `brand.caution.A25` → Controlled by `palette.alert.lightest`
+ * - `system.color.brand.surface.caution.strong` → `brand.caution.A50` → Controlled by `palette.alert.lighter`
+ * - `system.color.brand.surface.positive.default` → `brand.positive.A25` → Controlled by `palette.success.lightest`
+ * - `system.color.brand.surface.positive.strong` → `brand.positive.A50` → Controlled by `palette.success.lighter`
+ * - `system.color.brand.surface.selected` → `brand.primary.A50` → Controlled by `palette.primary.lighter`
+ *
+ * ### Accent Tokens
+ * - `system.color.brand.accent.primary` → `brand.primary.600` → Controlled by `palette.primary.main`
+ * - `system.color.brand.accent.critical` → `brand.critical.600` → Controlled by `palette.error.main`
+ * - `system.color.brand.accent.caution` → `brand.caution.400` → Controlled by `palette.alert.main`
+ * - `system.color.brand.accent.positive` → `brand.positive.600` → Controlled by `palette.success.main`
+ * - `system.color.brand.accent.action` → `brand.primary.600` → Controlled by `palette.primary.main`
+ *
+ * ### Foreground (Text/Icon) Tokens
+ * - `system.color.brand.fg.primary.default` → `brand.primary.600` → Controlled by `palette.primary.main`
+ * - `system.color.brand.fg.primary.strong` → `brand.primary.700` → Controlled by `palette.primary.dark`
+ * - `system.color.brand.fg.critical.default` → `brand.critical.600` → Controlled by `palette.error.main`
+ * - `system.color.brand.fg.critical.strong` → `brand.critical.700` → Controlled by `palette.error.dark`
+ * - `system.color.brand.fg.caution.default` → `brand.caution.600` → Controlled by `palette.alert.darkest`
+ * - `system.color.brand.fg.caution.strong` → `brand.caution.700` → Controlled by `palette.alert.dark` (Note: no direct mapping, inherits default)
+ * - `system.color.brand.fg.positive.default` → `brand.positive.600` → Controlled by `palette.success.main`
+ * - `system.color.brand.fg.positive.strong` → `brand.positive.700` → Controlled by `palette.success.dark`
+ * - `system.color.brand.fg.selected` → `brand.primary.700` → Controlled by `palette.primary.dark`
+ */
+const commonTokenMapping = {
+  focusOutline: brand.common.focus, // maps to brand.primary500
+  alertInner: brand.common.caution.inner, // maps to brand.caution400
+  alertOuter: brand.common.caution.outer, // maps to brand.caution500
+  errorInner: brand.common.critical, // maps to brand.critical500
+} as const;
+
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
@@ -84,32 +170,208 @@ export const useCanvasThemeToCssVars = (
   const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
   const style = elemProps.style || {};
   const {palette} = filledTheme.canvas;
+
   (['common', 'primary', 'error', 'alert', 'success', 'neutral'] as const).forEach(color => {
     if (color === 'common') {
       (['focusOutline', 'alertInner', 'alertOuter', 'errorInner'] as const).forEach(key => {
         if (palette.common[key] !== defaultCanvasTheme.palette.common[key]) {
+          const value = maybeWrapCSSVariables(palette.common[key]);
+
+          // Set deprecated token for backwards compatibility
           //@ts-ignore
-          style[brand.common.focusOutline] = maybeWrapCSSVariables(palette.common.focusOutline);
-          //@ts-ignore
-          style[brand.common.alertInner] = maybeWrapCSSVariables(palette.common.alertInner);
-          //@ts-ignore
-          style[brand.common.alertOuter] = maybeWrapCSSVariables(palette.common.alertOuter);
+          style[brand.common[key]] = value;
+
+          // Forward to new brand.common tokens
           //@ts-ignore
-          style[brand.common.errorInner] = maybeWrapCSSVariables(palette.common.errorInner);
+          style[commonTokenMapping[key]] = value;
+
+          // Additional system token forwarding for focusOutline
+          if (key === 'focusOutline') {
+            // system.color.brand.focus.primary -> brand.primary.500 (via brand.common.focus)
+            // @ts-ignore
+            style[system.color.brand.focus.primary] = value;
+            // system.color.brand.border.primary -> brand.primary.500
+            // @ts-ignore
+            style[system.color.brand.border.primary] = value;
+          }
+
+          // Additional system token forwarding for alertInner
+          if (key === 'alertInner') {
+            // Forward alertInner to system.color.brand.focus.caution.inner
+            // This token is used by components (e.g., TextInput with error="caution")
+            // for inner focus ring styling. Maps to brand.caution400 via brand.common.caution.inner.
+            // This ensures backwards compatibility when users customize alertInner in their theme.
+            // @ts-ignore
+            style[system.color.brand.focus.caution.inner] = value;
+          }
+
+          // Additional system token forwarding for alertOuter
+          if (key === 'alertOuter') {
+            // Forward alertOuter to system.color.brand.border.caution
+            // This token is used by components (e.g., TextInput with error="caution")
+            // for border and outer focus ring styling. Maps to brand.caution500 via brand.common.caution.outer.
+            // This ensures backwards compatibility when users customize alertOuter in their theme.
+            // @ts-ignore
+            style[system.color.brand.border.caution] = value;
+          }
+
+          // Additional system token forwarding for errorInner
+          if (key === 'errorInner') {
+            // Forward errorInner to system.color.brand.focus.critical and system.color.brand.border.critical
+            // These tokens are used by components (e.g., TextInput with error="error", Switch) for critical
+            // focus ring and border styling. Maps to brand.critical500 via brand.common.errorInner.
+            // This ensures backwards compatibility when users customize errorInner in their theme.
+            // @ts-ignore
+            style[system.color.brand.focus.critical] = value;
+            // @ts-ignore
+            style[system.color.brand.border.critical] = value;
+          }
         }
       });
-    }
-    (['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'] as const).forEach(
-      key => {
-        // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
-        //@ts-ignore
-        if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) {
-          // @ts-ignore
-          style[brand[color][mappedKeys[key]]] = maybeWrapCSSVariables(palette[color][key]);
+    } else {
+      (['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'] as const).forEach(
+        key => {
+          // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
+          //@ts-ignore
+          if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) {
+            const value = maybeWrapCSSVariables(palette[color][key]);
+
+            // Set deprecated token (e.g., brand.primary.base) for backwards compatibility
+            // @ts-ignore
+            style[brand[color][mappedKeys[key]]] = value;
+
+            // Forward to new numerical brand tokens (e.g., brand.primary600)
+            // Skip 'contrast' as it doesn't map to numerical tokens
+            if (key !== 'contrast' && key in numericalTokenMapping) {
+              const newBrandColor = brandColorMapping[color as keyof typeof brandColorMapping];
+              const numericalSuffix =
+                numericalTokenMapping[key as keyof typeof numericalTokenMapping];
+
+              // @ts-ignore - Dynamically access brand tokens like brand.primary600
+              const numericalToken = brand[newBrandColor + numericalSuffix];
+              if (numericalToken) {
+                // @ts-ignore
+                style[numericalToken] = value;
+              }
+
+              // Forward to all relevant system.color.brand.* tokens
+              // These system tokens reference the numerical brand tokens, so updating them ensures full compatibility
+              if (key === 'main') {
+                // system.color.brand.accent.{color} -> brand.{color}.600 (except caution -> 400)
+                // @ts-ignore
+                const systemAccentToken = system.color.brand.accent[newBrandColor];
+                if (systemAccentToken) {
+                  // @ts-ignore
+                  style[systemAccentToken] = value;
+                }
+
+                // system.color.brand.fg.{color}.default -> brand.{color}.600
+                // @ts-ignore
+                const systemFgToken = system.color.brand.fg[newBrandColor]?.default;
+                if (systemFgToken) {
+                  // @ts-ignore
+                  style[systemFgToken] = value;
+                }
+
+                // system.color.brand.focus.primary (maps to brand.primary.500 per docs)
+                // For primary only, update focus when 'main' changes — unless focusOutline was customized (it takes precedence)
+                if (newBrandColor === 'primary') {
+                  const focusOutlineCustomized =
+                    palette.common.focusOutline !== defaultCanvasTheme.palette.common.focusOutline;
+                  if (!focusOutlineCustomized) {
+                    // @ts-ignore
+                    const focusToken = system.color.brand.focus.primary;
+                    if (focusToken) {
+                      // @ts-ignore
+                      style[focusToken] = value;
+                    }
+                  }
+                }
+              } else if (key === 'dark') {
+                // system.color.brand.fg.{color}.strong -> brand.{color}.700
+                // @ts-ignore
+                const systemFgStrongToken = system.color.brand.fg[newBrandColor]?.strong;
+                if (systemFgStrongToken) {
+                  // @ts-ignore
+                  style[systemFgStrongToken] = value;
+                }
+
+                // system.color.brand.fg.selected -> brand.primary.700 (for primary only)
+                if (newBrandColor === 'primary') {
+                  // @ts-ignore
+                  const selectedToken = system.color.brand.fg.selected;
+                  if (selectedToken) {
+                    // @ts-ignore
+                    style[selectedToken] = value;
+                  }
+                }
+
+                // system.color.brand.focus.critical & system.color.brand.border.critical -> brand.critical.500 (palette.error.dark)
+                if (newBrandColor === 'critical') {
+                  // @ts-ignore
+                  const focusCriticalToken = system.color.brand.focus.critical;
+                  if (focusCriticalToken) {
+                    // @ts-ignore
+                    style[focusCriticalToken] = value;
+                  }
+                  // @ts-ignore
+                  const borderCriticalToken = system.color.brand.border.critical;
+                  if (borderCriticalToken) {
+                    // @ts-ignore
+                    style[borderCriticalToken] = value;
+                  }
+                }
+
+                // system.color.brand.focus.caution.outer & system.color.brand.border.caution -> brand.caution.500 (palette.alert.dark)
+                if (newBrandColor === 'caution') {
+                  // @ts-ignore
+                  const focusCautionOuterToken = system.color.brand.focus.caution?.outer;
+                  if (focusCautionOuterToken) {
+                    // @ts-ignore
+                    style[focusCautionOuterToken] = value;
+                  }
+                  // @ts-ignore
+                  const borderCautionToken = system.color.brand.border.caution;
+                  if (borderCautionToken) {
+                    // @ts-ignore
+                    style[borderCautionToken] = value;
+                  }
+                }
+              } else if (key === 'lighter') {
+                // system.color.brand.surface.{color}.strong -> brand.{color}.A50
+                // Note: A50 tokens are different from regular 50 tokens but we'll forward the lighter value
+                // @ts-ignore
+                const surfaceStrongToken = system.color.brand.surface[newBrandColor]?.strong;
+                if (surfaceStrongToken) {
+                  // @ts-ignore
+                  style[surfaceStrongToken] = value;
+                }
+
+                // system.color.brand.surface.selected -> brand.primary.A50 (for primary only)
+                if (newBrandColor === 'primary') {
+                  // @ts-ignore
+                  const selectedSurfaceToken = system.color.brand.surface.selected;
+                  if (selectedSurfaceToken) {
+                    // @ts-ignore
+                    style[selectedSurfaceToken] = value;
+                  }
+                }
+              } else if (key === 'lightest') {
+                // system.color.brand.surface.{color}.default -> brand.{color}.A25
+                // @ts-ignore
+                const surfaceDefaultToken = system.color.brand.surface[newBrandColor]?.default;
+                if (surfaceDefaultToken) {
+                  // @ts-ignore
+                  style[surfaceDefaultToken] = value;
+                }
+              }
+            }
+          }
         }
-      }
-    );
+      );
+    }
   });
+
   return {...elemProps, className, style};
 };
 

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

@@ -9,7 +9,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useActionBarModel_1 = require("./useActionBarModel");
 exports.actionBarListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1sfq27", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4)) var(--cnvs-base-size-500, var(--cnvs-sys-space-x10)) ;position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));> *{flex:1;}}" }
+    base: { name: "1ky1r9", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4)) var(--cnvs-base-size-500, var(--cnvs-sys-space-x10)) ;position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));> *{flex:1;}}" }
 }, "action-bar-list-9d8b4f");
 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 canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const useActionBarModel_1 = require("./useActionBarModel");
 exports.actionBarOverflowButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "mgm60", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "49rb43", 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

@@ -16,23 +16,23 @@ exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
         avatarImage: 'avatar-image',
         avatarName: 'avatar-name',
     },
-    base: { name: "h1rek", styles: "box-sizing:border-box;" },
+    base: { name: "1yeb7s", styles: "box-sizing:border-box;" },
     modifiers: {
         imageLoaded: {
-            false: { name: "3d85qb", styles: "[data-part=\"avatar-image\"]{display:none;}" },
-            true: { name: "379dto", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
+            false: { name: "1chq2w", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "8ko97", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "2le4yf", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            cover: { name: "3hb7o3", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            fill: { name: "eep4l", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            none: { name: "2tbucu", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['scale-down']: { name: "19nmz2", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            initial: { name: "33d1j6", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            inherit: { name: "17i063", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            unset: { name: "3dxmta", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
-            ['-moz-initial']: { name: "15y72r", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['revert']: { name: "1ubgf2", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
+            contain: { name: "7w24w", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "1dj896", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "1z0l54", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "mzynn", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "27m3md", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "is3x3", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "27c2c1", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "24t4py", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "2amncs", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "3y7rzm", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
         }
     }
 }, "avatar-620ed0");

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

@@ -5,7 +5,7 @@ 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");
 exports.avatarImageStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1v4dih", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
+    base: { name: "vt8bh", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
 }, "avatar-image-e0bffc");
 exports.AvatarImage = (0, common_1.createComponent)('img')({
     displayName: 'AvatarImage',

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

@@ -6,7 +6,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const getInitialsFromName_1 = require("./getInitialsFromName");
 exports.avatarNameStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2xggmb", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
+    base: { name: "21sgsf", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
 }, "avatar-name-c3d5d9");
 exports.AvatarName = (0, common_1.createComponent)('span')({
     displayName: 'AvatarName',

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

@@ -13,22 +13,22 @@ exports.baseAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
         color: '',
         size: '',
     },
-    base: { name: "4606bq", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium));" },
+    base: { name: "eokcl", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium));" },
     modifiers: {
         variant: {
-            blue: { name: "2stspd", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800));" },
-            amber: { name: "36y9l2", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-amber-200));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-amber-700));" },
-            teal: { name: "3nfx85", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-teal-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-teal-800));" },
-            purple: { name: "81cxs", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-purple-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-purple-800));" }
+            blue: { name: "49wqwq", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800));" },
+            amber: { name: "10gbdr", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-amber-200));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-amber-700));" },
+            teal: { name: "d45we", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-teal-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-teal-800));" },
+            purple: { name: "158wc7", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-purple-300));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-purple-800));" }
         },
         size: {
-            extraExtraSmall: { name: "2h39x0", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-base-letter-spacing-50));" },
-            extraSmall: { name: "ql6od", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium));font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100));" },
-            small: { name: "8s736", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200));" },
-            medium: { name: "36x0sc", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-600, 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium));" },
-            large: { name: "2xjngm", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-900, 4.5rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-subtext-medium));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-subtext-medium));" },
-            extraLarge: { name: "37hmil", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-1200, 6rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small));" },
-            extraExtraLarge: { name: "3jl2uw", styles: "--size-base-avatar-61af60:7.5rem;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium));" }
+            extraExtraSmall: { name: "1sxf74", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-base-letter-spacing-50));" },
+            extraSmall: { name: "23qrcp", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium));font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100));" },
+            small: { name: "3somoa", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200));" },
+            medium: { name: "1x2qzb", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-600, 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium));" },
+            large: { name: "2gkdgj", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-900, 4.5rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-subtext-medium));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-subtext-medium));" },
+            extraLarge: { name: "13mugg", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-1200, 6rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small));" },
+            extraExtraLarge: { name: "4dbblm", styles: "--size-base-avatar-61af60:7.5rem;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium));" }
         }
     }
 }, "base-avatar-61af60");

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: "11402r", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "trqlv", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "qgo45", styles: "box-sizing:border-box;align-items:center;animation:animation-11402r 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium));font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100));min-width:var(--cnvs-sys-size-xxs, 1.25rem);padding:0 0.40625rem;background:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-fg-critical-default));color:var(--cnvs-sys-color-fg-inverse, var(--cnvs-sys-color-text-inverse));" },
+    base: { name: "2zgoen", styles: "box-sizing:border-box;align-items:center;animation:animation-trqlv 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium));font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100));min-width:var(--cnvs-sys-size-xxs, 1.25rem);padding:0 0.40625rem;background:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-fg-critical-default));color:var(--cnvs-sys-color-fg-inverse, var(--cnvs-sys-color-text-inverse));" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "3d017x", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-text-primary-default));" }
+            inverse: { name: "25ol8l", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-text-primary-default));" }
         },
         emphasis: {
-            high: { name: "3apdyp", styles: "" },
-            low: { name: "3qg7gw", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-info-stronger));" }
+            high: { name: "1xl3rz", styles: "" },
+            low: { name: "2muuqt", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-info-stronger));" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', emphasis: 'low' },
-            styles: { name: "1pmlzo", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, var(--cnvs-sys-color-bg-transparent-strong));color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "3916ov", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, var(--cnvs-sys-color-bg-transparent-strong));color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ]
 }, "count-badge-6f28b2");

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

@@ -12,15 +12,15 @@ const BannerIcon_1 = require("./BannerIcon");
 const BannerLabel_1 = require("./BannerLabel");
 const hooks_1 = require("./hooks");
 exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2u2q70", 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-lg, var(--cnvs-sys-line-height-subtext-large));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1)) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-shape-x1)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "1o7hnh", 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-lg, var(--cnvs-sys-line-height-subtext-large));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1));cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1)) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-shape-x1)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "3vaute", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base));color:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-error-accent));&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-dark)) , var(--cnvs-sys-color-surface-overlay-mixin, black) calc(var(--cnvs-sys-opacity-surface-hover, 0) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-804de7:var(--cnvs-sys-color-brand-accent-critical, currentColor);--color-system-icon-804de7:var(--cnvs-sys-color-fg-inverse, currentColor);--backgroundColor-system-icon-804de7:var(--cnvs-sys-color-fg-inverse, none);}" },
-            false: { name: "21f30m", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, var(--cnvs-brand-alert-base));color:var(--cnvs-brand-alert-accent);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, var(--cnvs-brand-alert-dark)) , var(--cnvs-sys-color-surface-overlay-mixin, black) calc(var(--cnvs-sys-opacity-surface-hover, 0) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-804de7:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-804de7:var(--cnvs-sys-color-brand-fg-caution-strong, currentColor);--backgroundColor-system-icon-804de7:var(--cnvs-sys-color-brand-fg-caution-strong, none);}" }
+            true: { name: "2netfx", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base));color:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-error-accent));&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-dark)) , var(--cnvs-sys-color-surface-overlay-mixin, black) calc(var(--cnvs-sys-opacity-surface-hover, 0) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-804de7:var(--cnvs-sys-color-brand-accent-critical, currentColor);--color-system-icon-804de7:var(--cnvs-sys-color-fg-inverse, currentColor);--backgroundColor-system-icon-804de7:var(--cnvs-sys-color-fg-inverse, none);}" },
+            false: { name: "3849wn", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, var(--cnvs-brand-alert-base));color:var(--cnvs-brand-alert-accent);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, var(--cnvs-brand-alert-dark)) , var(--cnvs-sys-color-surface-overlay-mixin, black) calc(var(--cnvs-sys-opacity-surface-hover, 0) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-804de7:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-804de7:var(--cnvs-sys-color-brand-fg-caution-strong, currentColor);--backgroundColor-system-icon-804de7:var(--cnvs-sys-color-brand-fg-caution-strong, none);}" }
         },
         isSticky: {
-            true: { name: "2i5som", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "35wxot", styles: "width:20.5rem;" }
+            true: { name: "7zckw", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "1114wz", styles: "width:20.5rem;" }
         }
     }
 }, "banner-ee3d14");

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

@@ -7,10 +7,10 @@ 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.actionBarTextStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1sos53", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
+    base: { name: "2k2z1r", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
     modifiers: {
         isSticky: {
-            true: { name: "s79pj", styles: "display:none;" }
+            true: { name: "ojq5w", 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: "3vn327", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x3);" }
+    base: { name: "2yrohg", 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: "2fdvtw", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
+    base: { name: "4eo379", 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: "1sh0jy", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));color:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-text-default));display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-0633c6);" }
+    base: { name: "mc2pf", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));color:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-text-default));display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-0633c6);" }
 }, "breadcrumbs-current-item-0633c6");
 exports.useBreadcrumbsItem = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)((_model, ref) => {
     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: "4dpqp8", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-0a966e:1.25rem;--color-system-icon-804de7:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+    base: { name: "27j4fz", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-0a966e:1.25rem;--color-system-icon-804de7:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
 }, "breadcrumbs-item-e4b0ee");
 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: "3jggb3", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-8f094e);" }
+    base: { name: "ydzbf", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-8f094e);" }
 }, "breadcrumbs-link-8f094e");
 exports.BreadcrumbsLink = (0, common_1.createComponent)('a')({
     displayName: 'Breadcrumbs.Link',

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsList.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 useBreadcrumbsModel_1 = require("./hooks/useBreadcrumbsModel");
 exports.breadcrumbsListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "q66lg", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) 0;margin:0;display:inline-flex;align-items:center;min-height:var(--cnvs-sys-size-lg, 3rem);list-style:none;width:100%;" }
+    base: { name: "8mbno", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) 0;margin:0;display:inline-flex;align-items:center;min-height:var(--cnvs-sys-size-lg, 3rem);list-style:none;width:100%;" }
 }, "breadcrumbs-list-2050ac");
 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: "1dr3fd", styles: "box-sizing:border-box;text-decoration:none;" }
+    base: { name: "27bhrp", 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: "315mpn", styles: "box-sizing:border-box;width:17.5rem;max-width:17.5rem;max-height:18.5rem;" }
+    base: { name: "33uzcz", 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;