npm - @workday/canvas-kit-react - Versions diffs - 16.1.0-0569-next.0 → 16.1.0-0572-next.0 - Mend

@workday/canvas-kit-react 16.1.0-0569-next.0 → 16.1.0-0572-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (304) hide show

package/common/lib/CanvasProvider.tsx CHANGED Viewed

@@ -31,6 +31,18 @@ import {sanaCanvasProviderTheme} from './theming/sanaTheme';
  */
 export const CanvasBrandStyleContext = React.createContext<React.CSSProperties>({});
+/**
+ * Context for providing the `data-theme` value to popup containers.
+ *
+ * Token stylesheets scope their variables to an attribute selector (e.g. Sana's
+ * `[data-theme="sana-canvas"]` block defines ~300 variables — palette, shape, depth, type).
+ * Portaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they
+ * never inherit a nested `data-theme` and none of those variables resolve. Forwarding the
+ * attribute itself lets the popup container match the same selector, so the whole theme applies
+ * through normal cascade — rather than trying to mirror every variable as an inline style.
+ */
+export const CanvasThemeAttributeContext = React.createContext<string | undefined>(undefined);
 export interface CanvasProviderProps {
   /**
    * ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.
@@ -222,6 +234,13 @@ export const CanvasProvider = ({
   // Read parent context to support nested scoped providers
   const parentBrandStyle = React.useContext(CanvasBrandStyleContext);
+  const parentThemeAttribute = React.useContext(CanvasThemeAttributeContext);
+  // `data-theme` on this provider wins; otherwise inherit from a parent provider so nested
+  // providers keep forwarding the outer theme attribute to popups.
+  const themeAttribute =
+    (props as React.HTMLAttributes<HTMLElement> & {'data-theme'?: string})['data-theme'] ??
+    parentThemeAttribute;
   // Popup forwarding only needs CSS custom properties (not consumer layout styles).
   const mergedBrandStyle = React.useMemo(() => {
@@ -256,9 +275,11 @@ export const CanvasProvider = ({
   );
   const wrappedContent = (
-    <CanvasBrandStyleContext.Provider value={mergedBrandStyle}>
-      {content}
-    </CanvasBrandStyleContext.Provider>
+    <CanvasThemeAttributeContext.Provider value={themeAttribute}>
+      <CanvasBrandStyleContext.Provider value={mergedBrandStyle}>
+        {content}
+      </CanvasBrandStyleContext.Provider>
+    </CanvasThemeAttributeContext.Provider>
   );
   return (

package/common/lib/theming/brandScope.ts CHANGED Viewed

@@ -73,6 +73,11 @@ const EXTENDED_BRAND_TOKEN_MAP: Record<string, string> = {
   neutral150: '--cnvs-brand-neutral-150',
   neutral850: '--cnvs-brand-neutral-850',
   neutralA150: '--cnvs-brand-neutral-a150',
+  neutralA850: '--cnvs-brand-neutral-a850',
+  primaryA300: '--cnvs-brand-primary-a300',
+  criticalA300: '--cnvs-brand-critical-a300',
+  cautionA300: '--cnvs-brand-caution-a300',
+  positiveA300: '--cnvs-brand-positive-a300',
 };
 const setStyleVar = (style: React.CSSProperties, token: string, value: string) => {

package/common/lib/theming/sanaTheme.ts CHANGED Viewed

@@ -15,93 +15,113 @@
  * | `sanaCanvasNumericalTheme` | Numerical `brand` shape for popup forwarding |
  * | `sanaCanvasProviderTheme` | Same — pass to root `CanvasProvider` when `<html>` is unavailable |
  */
+import {cssVar} from '@workday/canvas-kit-styling';
 import {base, brand} from '@workday/canvas-tokens-web';
 import type {CanvasNumericalBrandTheme} from './types';
-/** Reference a canvas-tokens CSS variable (resolves under `[data-theme="sana-canvas"]`). */
-const varRef = (token: string) => `var(${token})`;
 /**
- * Sana extends the neutral ramp with steps not yet exported from canvas-tokens-web JS.
- * Defined in `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ * `base.sana` is a pre-built map of `var(--token, fallback)` strings exported by
+ * canvas-tokens-web specifically for these Sana-only base-palette steps — use them directly,
+ * not `cssVar()` (which expects a bare variable name, not an already-wrapped `var()` string).
+ * Referencing `base.*` (not `brand.*` of the same name) avoids a `var()` self-reference cycle:
+ * CanvasProvider writes each ramp entry onto the identically-named `--cnvs-brand-*` variable, so
+ * `brand.sana.neutral150` (itself `var(--cnvs-brand-neutral-150, ...)`) would point right back at
+ * the variable being written.
  */
-const sanaBrandNeutral = {
-  '150': '--cnvs-brand-neutral-150',
-  '850': '--cnvs-brand-neutral-850',
-  A150: '--cnvs-brand-neutral-a150',
-} as const;
+const sanaBasePalette = base.sana;
 /**
  * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
  * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ *
+ * Mirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of
+ * `primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a
+ * stronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana
+ * overrides. Every other key is intentionally omitted — Sana does not define a distinct value
+ * for it, so writing it here would only reference the very variable being written (a `var()`
+ * cycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).
+ *
+ * `action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define
+ * `--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are
+ * derived downstream from the root theme. Forcing them here would pin values the root is meant
+ * to own.
+ *
+ * Ramp values must reference `base.*` (the underlying palette), never `brand.*` of the same
+ * name — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS
+ * variable, so referencing `brand.*` here would create that same self-reference cycle. The
+ * `system.color.brand.*` overrides are the exception: they target *different* CSS variables
+ * (`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.
+ *
+ * Note this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand
+ * system colors) comes from the stylesheet's `[data-theme="sana-canvas"]` block — pass
+ * `data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups
+ * so the full theme applies there too.
  */
 export const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme = {
   // Explicit brand vars only — multi-key ramps write 1:1; no system shortcut bundles run.
   themeScope: 'brand',
   brand: {
-    action: {
-      base: varRef(brand.neutral975),
-      dark: varRef(brand.neutral950),
-      darkest: varRef(brand.neutral900),
-      accent: varRef(base.neutral0),
-      lightest: varRef(brand.neutral25),
-      lighter: varRef(brand.neutral50),
-      light: varRef(brand.neutral200),
-    },
-    neutral: {
-      '25': varRef(brand.neutral25),
-      '50': varRef(brand.neutral50),
-      '100': varRef(brand.neutral100),
-      '150': varRef(sanaBrandNeutral['150']),
-      '200': varRef(brand.neutral200),
-      '300': varRef(brand.neutral300),
-      '400': varRef(brand.neutral400),
-      '500': varRef(brand.neutral500),
-      '600': varRef(brand.neutral600),
-      '700': varRef(brand.neutral700),
-      '800': varRef(brand.neutral800),
-      '850': varRef(sanaBrandNeutral['850']),
-      '900': varRef(brand.neutral900),
-      '950': varRef(brand.neutral950),
-      '975': varRef(brand.neutral975),
-      A25: varRef(brand.neutralA25),
-      A50: varRef(brand.neutralA50),
-      A100: varRef(brand.neutralA100),
-      A150: varRef(sanaBrandNeutral.A150),
-      A200: varRef(brand.neutralA200),
-    },
     primary: {
-      '500': varRef(brand.primary500),
-      '600': varRef(brand.primary600),
-      '700': varRef(brand.primary700),
-      A25: varRef(brand.primaryA25),
-      A50: varRef(brand.primaryA50),
-      A100: varRef(brand.primaryA100),
+      A300: sanaBasePalette.blueA300,
     },
     critical: {
-      '500': varRef(brand.critical500),
-      '600': varRef(brand.critical600),
-      '700': varRef(brand.critical700),
-      A25: varRef(brand.criticalA25),
-      A50: varRef(brand.criticalA50),
+      A300: sanaBasePalette.redA300,
     },
     caution: {
-      '400': varRef(brand.caution400),
-      '500': varRef(brand.caution500),
-      A25: varRef(brand.cautionA25),
-      A50: varRef(brand.cautionA50),
+      A300: sanaBasePalette.amberA300,
     },
     positive: {
-      '600': varRef(brand.positive600),
-      '800': varRef(brand.positive800),
-      A25: varRef(brand.positiveA25),
-      A50: varRef(brand.positiveA50),
+      A300: sanaBasePalette.greenA300,
+    },
+    neutral: {
+      '25': cssVar(base.neutral25),
+      '50': cssVar(base.neutral50),
+      '100': cssVar(base.neutral100),
+      '150': sanaBasePalette.neutral150,
+      '200': cssVar(base.neutral200),
+      '300': cssVar(base.neutral300),
+      '400': cssVar(base.neutral400),
+      '500': cssVar(base.neutral500),
+      '600': cssVar(base.neutral600),
+      '700': cssVar(base.neutral700),
+      '800': cssVar(base.neutral800),
+      '850': sanaBasePalette.neutral850,
+      '900': cssVar(base.neutral900),
+      '950': cssVar(base.neutral950),
+      '975': cssVar(base.neutral975),
+      A25: cssVar(base.neutralA25),
+      A50: cssVar(base.neutralA50),
+      A100: cssVar(base.neutralA100),
+      A150: sanaBasePalette.neutralA150,
+      A200: cssVar(base.neutralA200),
+      A300: cssVar(base.neutralA300),
+      A400: cssVar(base.neutralA400),
+      A500: cssVar(base.neutralA500),
+      A600: cssVar(base.neutralA600),
+      A700: cssVar(base.neutralA700),
+      A800: cssVar(base.neutralA800),
+      A850: sanaBasePalette.neutralA850,
+      A900: cssVar(base.neutralA900),
+      A950: cssVar(base.neutralA950),
+      A975: cssVar(base.neutralA975),
     },
   },
-  selected: {
-    fg: varRef(brand.neutralA900),
-    surface: varRef(brand.neutralA100),
+  system: {
+    color: {
+      brand: {
+        accent: {
+          primary: cssVar(brand.neutral975),
+          action: cssVar(brand.neutral975),
+        },
+        fg: {
+          primary: {
+            default: cssVar(brand.neutralA900),
+            strong: cssVar(brand.neutralA950),
+          },
+        },
+      },
+    },
   },
 };
@@ -119,6 +139,14 @@ export const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme = {
  * - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
  *   inherit brand variables from the document and no `theme` prop is needed.
  *
+ * Pass `data-theme="sana-canvas"` alongside it. That attribute is forwarded to popup stack
+ * containers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to
+ * portaled content through the stylesheet's own `[data-theme="sana-canvas"]` block — this preset
+ * covers brand tokens, the attribute covers everything else.
+ *
+ * `action.*` and selected-state tokens are not set by this preset — Sana does not define them,
+ * and they resolve from the root theme.
+ *
  * @example
  * ```tsx
  * // Preferred — control <html>
@@ -126,8 +154,10 @@ export const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme = {
  * // <html data-theme="sana-canvas">
  * <CanvasProvider><App /></CanvasProvider>
  *
- * // No access to <html> — required for popup parity
- * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * // No access to <html> — pass both for full parity, including portaled popups
+ * <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
+ *   <App />
+ * </CanvasProvider>
  * ```
  */
 export const sanaCanvasProviderTheme = sanaCanvasNumericalTheme;

package/common/lib/theming/types.ts CHANGED Viewed

@@ -312,17 +312,34 @@ export type CanvasBrandRamp = Partial<
     | 'A25'
     | 'A50'
     | 'A100'
-    | 'A200',
+    | 'A200'
+    | 'A300',
     string
   >
 >;
 /**
- * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
- * exported for primary/critical/caution/positive families.
+ * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150` / `A850`), plus the
+ * extended alpha steps (`A400`–`A975`) that only the neutral family exposes.
  */
 export type CanvasNeutralBrandRamp = CanvasBrandRamp &
-  Partial<Record<'150' | '850' | 'A150', string>>;
+  Partial<
+    Record<
+      | '150'
+      | '850'
+      | 'A150'
+      | 'A400'
+      | 'A500'
+      | 'A600'
+      | 'A700'
+      | 'A800'
+      | 'A850'
+      | 'A900'
+      | 'A950'
+      | 'A975',
+      string
+    >
+  >;
 /** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
 export type CanvasActionBrandRamp = Partial<

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

@@ -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: "2xktbm", 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, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
+    base: { name: "1krgvc", 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, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
 }, "action-bar-list-887890");
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = (0, common_1.createSubcomponent)('div')({

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

@@ -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: "3s7sxt", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "sl6gz", 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 CHANGED Viewed

@@ -16,23 +16,23 @@ exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
         avatarImage: 'avatar-image',
         avatarName: 'avatar-name',
     },
-    base: { name: "5glo3", styles: "box-sizing:border-box;" },
+    base: { name: "tmcqy", styles: "box-sizing:border-box;" },
     modifiers: {
         imageLoaded: {
-            false: { name: "47qexi", styles: "[data-part=\"avatar-image\"]{display:none;}" },
-            true: { name: "i8mdj", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
+            false: { name: "3ftzo8", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "glnmj", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "3q9oc8", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            cover: { name: "1uczge", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            fill: { name: "2p74za", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            none: { name: "4ebrmb", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['scale-down']: { name: "3vajsn", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            initial: { name: "2blzie", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            inherit: { name: "41olr1", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            unset: { name: "3dp6qz", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
-            ['-moz-initial']: { name: "48vgkb", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['revert']: { name: "3jojgr", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
+            contain: { name: "21po42", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "2ri6gc", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "3dyoet", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "1gmrjp", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "2hdr0x", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "1rhxgy", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "2qoaw5", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "4azr3h", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "3i0cp0", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "2vs9t8", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
         }
     }
 }, "avatar-620ed0");

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

@@ -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: "2xuenb", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
+    base: { name: "2fpmyo", 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 CHANGED Viewed

@@ -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: "25i4el", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
+    base: { name: "3nluk3", 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 CHANGED Viewed

@@ -13,24 +13,24 @@ exports.baseAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
         color: '',
         size: '',
     },
-    base: { name: "1ikjcr", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;outline:0.0625rem solid transparent;button &, a &, &:is(button, a){outline:none;}&:is(button, a):focus-visible, &:is(button, a).focus{outline:0.125rem solid transparent;outline-offset:0.125rem;}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, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
+    base: { name: "aknv3", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;outline:0.0625rem solid transparent;button &, a &, &:is(button, a){outline:none;}&:is(button, a):focus-visible, &:is(button, a).focus{outline:0.125rem solid transparent;outline-offset:0.125rem;}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, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
     modifiers: {
         variant: {
-            blue: { name: "1izufd", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
-            amber: { name: "2367g", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)));" },
-            teal: { name: "24zc4o", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)));" },
-            purple: { name: "3btyc4", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
-            magenta: { name: "41lbj5", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
-            green: { name: "48joui", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" }
+            blue: { name: "2ua0br", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
+            amber: { name: "19nwob", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)));" },
+            teal: { name: "3yhfib", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)));" },
+            purple: { name: "2rf8tg", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
+            magenta: { name: "2rhu4z", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
+            green: { name: "2gc559", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" }
         },
         size: {
-            extraExtraSmall: { name: "fp6h1", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));" },
-            extraSmall: { name: "26dfnp", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));" },
-            small: { name: "3e76tw", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));" },
-            medium: { name: "1uvco8", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-600, 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
-            large: { name: "4bs81j", styles: "--size-base-avatar-bfdfb4: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-heading-medium, 2.25rem));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));" },
-            extraLarge: { name: "2dnluo", styles: "--size-base-avatar-bfdfb4: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, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));" },
-            extraExtraLarge: { name: "3ufoyr", styles: "--size-base-avatar-bfdfb4: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, 3.5rem));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));" }
+            extraExtraSmall: { name: "49w7a6", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));" },
+            extraSmall: { name: "3sibpd", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));" },
+            small: { name: "1oysj5", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));" },
+            medium: { name: "1l9q1r", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-600, 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
+            large: { name: "3664vr", styles: "--size-base-avatar-bfdfb4: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-heading-medium, 2.25rem));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));" },
+            extraLarge: { name: "a7i8f", styles: "--size-base-avatar-bfdfb4: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, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));" },
+            extraExtraLarge: { name: "1j4dky", styles: "--size-base-avatar-bfdfb4: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, 3.5rem));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));" }
         }
     }
 }, "base-avatar-bfdfb4");

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

@@ -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: "ffuhz", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "6lqkh", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "d1ykq", styles: "box-sizing:border-box;align-items:center;animation:animation-ffuhz 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);height:1.25rem;justify-content:center;min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));background:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
+    base: { name: "1f8ciy", styles: "box-sizing:border-box;align-items:center;animation:animation-6lqkh 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);height:1.25rem;justify-content:center;min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));background:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "412r2", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);" }
+            inverse: { name: "2j6y8q", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);" }
         },
         emphasis: {
-            high: { name: "49hm72", styles: "" },
-            low: { name: "3uos59", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
+            high: { name: "3qa1nh", styles: "" },
+            low: { name: "4ctpel", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', emphasis: 'low' },
-            styles: { name: "k9c1b", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "1o5eec", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ]
 }, "count-badge-524876");

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

@@ -13,15 +13,15 @@ const BannerLabel_1 = require("./BannerLabel");
 const hooks_1 = require("./hooks");
 exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "12m8fb", 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-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) 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-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
+    base: { name: "1zfnle", 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-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) 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-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "4acmg", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
-            false: { name: "2uddzv", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
+            true: { name: "vvywj", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
+            false: { name: "tqixs", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
         },
         isSticky: {
-            true: { name: "2w5lfn", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "btenf", styles: "width:20.5rem;" }
+            true: { name: "3e1oue", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "2e2s4", styles: "width:20.5rem;" }
         }
     }
 }, "banner-5b2eb3");

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

@@ -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: "3fhakx", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
+    base: { name: "2t9fip", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
     modifiers: {
         isSticky: {
-            true: { name: "31j1pz", styles: "display:none;" }
+            true: { name: "4dvak2", styles: "display:none;" }
         }
     }
 }, "action-bar-text-c1912f");

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

@@ -7,7 +7,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 exports.bannerIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2png0p", styles: "box-sizing:border-box;margin-inline-end:0;" }
+    base: { name: "18vnpw", styles: "box-sizing:border-box;margin-inline-end:0;" }
 }, "banner-icon-ebbb70");
 exports.BannerIcon = (0, common_1.createSubcomponent)('span')({
     displayName: 'Banner.Icon',

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

@@ -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: "3kb43u", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
+    base: { name: "lnd2e", 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 CHANGED Viewed

@@ -13,7 +13,7 @@ exports.breadcrumbsCurrentItemStencil = (0, canvas_kit_styling_1.createStencil)(
     vars: {
         maxWidth: '',
     },
-    base: { name: "1rt78p", 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, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-muted-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-29bc44);" }
+    base: { name: "4eq5k0", 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, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-muted-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-29bc44);" }
 }, "breadcrumbs-current-item-29bc44");
 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 CHANGED Viewed

@@ -15,7 +15,7 @@ exports.breadcrumbsItemStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
     },
-    base: { name: "26ggtl", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+    base: { name: "2fhzpd", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
 }, "breadcrumbs-item-118728");
 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 CHANGED Viewed

@@ -11,7 +11,7 @@ exports.breadcrumbsLinkStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         maxWidth: '',
     },
-    base: { name: "1cdx0n", 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, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-6d0a52);&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));text-decoration:underline;}&:active, &.active{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" }
+    base: { name: "3sla9l", 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, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-6d0a52);&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));text-decoration:underline;}&:active, &.active{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" }
 }, "breadcrumbs-link-6d0a52");
 exports.BreadcrumbsLink = (0, common_1.createComponent)('a')({
     displayName: 'Breadcrumbs.Link',

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

@@ -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: "3zy9an", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) 0;margin:0;display:inline-flex;align-items:center;min-height:var(--cnvs-sys-size-lg, 3rem);list-style:none;width:100%;" }
+    base: { name: "1h3rlo", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) 0;margin:0;display:inline-flex;align-items:center;min-height:var(--cnvs-sys-size-lg, 3rem);list-style:none;width:100%;" }
 }, "breadcrumbs-list-6d8e6e");
 exports.BreadcrumbsList = (0, common_1.createSubcomponent)('ul')({
     displayName: 'Breadcrumbs.List',

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

@@ -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: "4b34jw", styles: "box-sizing:border-box;text-decoration:none;" }
+    base: { name: "1r73nk", 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: "2fts5r", styles: "box-sizing:border-box;width:17.5rem;max-width:17.5rem;max-height:18.5rem;" }
+    base: { name: "1hvut3", 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;