@workday/canvas-kit-react 16.0.0-alpha.0444-next.0 → 16.0.0-alpha.0449-next.0

package/checkbox/lib/CheckBackground.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
+import {ErrorType, cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 interface CheckBackgroundProps {
   children: React.ReactNode;
@@ -11,6 +11,7 @@ interface CheckBackgroundProps {
 }
 
 export const checkboxBackgroundStencil = createStencil({
+  extends: cornerShapeStencil,
   vars: {
     errorRingColorInner: '',
     errorRingColorOuter: '',
@@ -21,16 +22,16 @@ export const checkboxBackgroundStencil = createStencil({
   base: {
     alignItems: 'center',
     backgroundColor: system.legacy.color.surface.default,
-    borderRadius: system.legacy.shape.sm,
+    [cornerShapeStencil.vars.shape]: system.sana.shape.xs,
     boxSizing: 'border-box',
     display: 'flex',
-    height: base.legacy.size225,
     justifyContent: 'center',
     padding: `0 ${px2rem(2)}`,
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: base.legacy.size225,
+    height: system.legacy.size.xxxs,
+    width: system.legacy.size.xxxs,
     border: `${px2rem(1)} solid ${system.color.border.input.default}`,
   },
   modifiers: {
@@ -42,16 +43,11 @@ export const checkboxBackgroundStencil = createStencil({
     error: {
       error: ({errorRingColorInner, errorRingColorOuter}) => ({
         [errorRingColorInner]: system.legacy.color.brand.border.critical,
-
-        [errorRingColorOuter]: 'transparent',
-        backgroundColor: system.legacy.color.brand.surface.critical.default,
+        [errorRingColorOuter]: system.legacy.color.brand.border.critical,
       }),
       caution: ({errorRingColorInner, errorRingColorOuter}) => ({
         [errorRingColorInner]: system.legacy.color.brand.focus.caution.inner,
-
         [errorRingColorOuter]: system.legacy.color.brand.border.caution,
-
-        backgroundColor: system.legacy.color.brand.surface.caution.default,
       }),
     },
   },

package/checkbox/lib/CheckboxCheck.tsx

@@ -2,7 +2,7 @@ import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
+import {component, system} from '@workday/canvas-tokens-web';
 
 import {CheckBackground} from './CheckBackground';
 
@@ -15,13 +15,15 @@ interface CheckboxCheckProps {
 
 const checkboxCheckStencil = createStencil({
   base: {
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
     display: 'flex',
     flexDirection: 'column',
+    justifyContent: 'center',
     maxWidth: '100%',
     pointerEvents: 'none',
     transition: 'transform 200ms ease, opacity 200ms ease',
     span: {
-      marginInlineStart: calc.negate(px2rem(6)),
+      marginInlineStart: calc.negate(px2rem(5)),
       transition: 'margin 200ms ease',
     },
     opacity: system.opacity.zero,
@@ -43,7 +45,7 @@ const checkboxCheckStencil = createStencil({
     },
     variant: {
       inverse: {
-        [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.default,
+        [systemIconStencil.vars.color]: system.legacy.color.brand.accent.primary,
 
         '& > div': {
           backgroundColor: system.legacy.color.brand.accent.primary,
@@ -62,7 +64,7 @@ const indeterminateBoxStencil = createStencil({
   modifiers: {
     variant: {
       inverse: {
-        backgroundColor: system.legacy.color.brand.accent.primary,
+        backgroundColor: system.legacy.color.brand.accent.positive,
       },
     },
   },

package/checkbox/lib/CheckboxContainer.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {LabelText} from '@workday/canvas-kit-react/text';
-import {CSProps, createStencil} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {Subtext} from '@workday/canvas-kit-react/text';
+import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 interface CheckboxContainerProps extends CSProps {
   children: React.ReactNode;
@@ -14,10 +14,13 @@ interface CheckboxContainerProps extends CSProps {
 }
 
 const checkboxContainerStencil = createStencil({
-  base: {
+  parts: {
+    label: 'checkbox-container-label',
+  },
+  base: ({labelPart}) => ({
     display: 'flex',
     alignItems: 'center',
-    minHeight: base.legacy.size225,
+    minHeight: system.legacy.size.xxxs,
     position: 'relative',
     /**
      * Using a wrapper prevents the browser default behavior of trigging
@@ -26,13 +29,25 @@ const checkboxContainerStencil = createStencil({
      */
     '&>div': {
       display: 'flex',
-      height: base.legacy.size225,
-      minWidth: base.legacy.size225,
+      height: system.legacy.size.xxxs,
+      minWidth: system.legacy.size.xxxs,
       alignSelf: 'flex-start',
       position: 'relative',
     },
-    '& > label': {
-      paddingInlineStart: system.legacy.padding.sm,
+    [labelPart]: {
+      paddingInlineStart: system.legacy.padding.xs,
+      cursor: 'pointer',
+      marginBlockStart: calc.negate(px2rem(2)),
+    },
+  }),
+  modifiers: {
+    disabled: {
+      true: ({labelPart}) => ({
+        opacity: system.opacity.disabled,
+        [labelPart]: {
+          cursor: 'default',
+        },
+      }),
     },
   },
 });
@@ -41,17 +56,18 @@ export const CheckboxContainer = createComponent('div')({
   displayName: 'CheckboxContainer',
   Component: ({children, disabled, id, label, variant}: CheckboxContainerProps) => {
     return (
-      <div {...checkboxContainerStencil()}>
+      <div {...checkboxContainerStencil({disabled})}>
         <div>{children}</div>
         {label && (
-          <LabelText
+          <Subtext
+            size="large"
+            as="label"
             htmlFor={id}
-            disabled={disabled}
             variant={variant}
-            style={{cursor: disabled ? 'default' : 'pointer'}}
+            {...checkboxContainerStencil.parts.label}
           >
             {label}
-          </LabelText>
+          </Subtext>
         )}
       </div>
     );

package/checkbox/lib/CheckboxInput.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
 
-import {ErrorType, createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {
+  ErrorType,
+  cornerShapeStencil,
+  createComponent,
+  focusRing,
+} from '@workday/canvas-kit-react/common';
 import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 import {checkboxBackgroundStencil} from './CheckBackground';
 import {checkboxRippleStencil} from './CheckboxRipple';
@@ -52,13 +57,14 @@ export interface CheckboxProps extends CSProps {
 }
 
 const checkboxInputStencil = createStencil({
+  extends: cornerShapeStencil,
   base: {
-    borderRadius: system.legacy.shape.sm,
-    width: base.legacy.size300,
-    height: base.legacy.size300,
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.sm,
+    width: system.legacy.size.xs,
+    height: system.legacy.size.xs,
     margin: 0,
-    marginBlockStart: calc.negate(px2rem(3)),
-    marginInlineStart: calc.negate(px2rem(3)),
+    marginBlockStart: calc.negate(px2rem(4)),
+    marginInlineStart: calc.negate(px2rem(4)),
     position: 'absolute',
     opacity: system.opacity.zero,
 
@@ -67,7 +73,7 @@ const checkboxInputStencil = createStencil({
     },
 
     [`&:where(:hover,.hover) ~ [data-part="${checkboxRippleStencil.parts.ripple['data-part']}"]`]: {
-      boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.default}`,
+      boxShadow: `0 0 0 ${px2rem(6)} ${system.legacy.color.surface.overlay.hover.default}`,
     },
 
     // Hover state and not disabled
@@ -78,8 +84,8 @@ const checkboxInputStencil = createStencil({
 
     [`&:where(:checked, :indeterminate) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
       {
-        borderColor: system.legacy.color.brand.accent.primary,
-        backgroundColor: system.legacy.color.brand.accent.primary,
+        borderColor: system.legacy.color.brand.accent.positive,
+        backgroundColor: system.legacy.color.brand.accent.positive,
       },
 
     [`&:where(:disabled, .disabled) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
@@ -112,8 +118,16 @@ const checkboxInputStencil = createStencil({
             animate: false,
             outerColor: system.legacy.color.brand.border.primary,
           }),
-          borderColor: system.legacy.color.brand.accent.primary,
+          borderColor: system.legacy.color.brand.accent.positive,
           borderWidth: px2rem(2),
+          '> div': {
+            span: {
+              marginInlineStart: calc.negate(px2rem(6)),
+            },
+            div: {
+              marginInlineStart: calc.negate(px2rem(1)),
+            },
+          },
         },
       },
   },
@@ -138,10 +152,6 @@ const checkboxInputStencil = createStencil({
             borderColor: system.legacy.color.focus.inverse,
             backgroundColor: system.legacy.color.surface.inverse,
           },
-        // Disabled State for inverse variant (applies to all disabled states: unchecked, checked, and indeterminate)
-        [`&:disabled ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: {
-          opacity: system.opacity.disabled,
-        },
         // Disabled + checked/indeterminate state for inverse variant
         [`&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
           {
@@ -175,15 +185,15 @@ const checkboxInputStencil = createStencil({
         '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
           borderColor: checkboxBackgroundStencil.vars.errorRingColorInner,
           boxShadow: `
-            0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
-            0 0 0 ${px2rem(2)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
+            0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorOuter},
+            0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner}`,
         },
         '&:where(:checked, :indeterminate) ~ div:first-of-type': {
           borderColor: 'transparent',
           boxShadow: `
             0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse},
-            0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
-            0 0 0 ${px2rem(5)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
+            0 0 0 ${px2rem(3)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
+            0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
         },
         '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
           {
@@ -194,12 +204,12 @@ const checkboxInputStencil = createStencil({
   },
   compound: [
     {
-      modifiers: {variant: 'inverse', error: true},
+      modifiers: {variant: 'inverse', error: 'true'},
       styles: {
         '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
           border: `${px2rem(1)} solid ${system.legacy.color.focus.inverse}`,
         },
-        '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+        '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
           {
             borderColor: system.legacy.color.focus.inverse,
           },
@@ -221,7 +231,14 @@ export const CheckboxInput = createComponent('input')({
         type="checkbox"
         ref={ref}
         aria-checked={indeterminate ? 'mixed' : checked}
-        {...handleCsProp(elemProps, checkboxInputStencil({variant, disabled, error: !!error}))}
+        {...handleCsProp(
+          elemProps,
+          checkboxInputStencil({
+            variant,
+            disabled: disabled ? 'true' : undefined,
+            error: error ? 'true' : undefined,
+          })
+        )}
       />
     );
   },

package/checkbox/lib/CheckboxRipple.tsx

@@ -1,6 +1,6 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export const checkboxRippleStencil = createStencil({
   parts: {
@@ -9,8 +9,8 @@ export const checkboxRippleStencil = createStencil({
   base: {
     borderRadius: system.legacy.shape.full,
     boxShadow: 'none',
-    height: base.legacy.size225,
-    width: base.legacy.size225,
+    height: system.legacy.size.xxxs,
+    width: system.legacy.size.xxxs,
     transition: 'box-shadow 150ms ease-out',
     position: 'absolute',
     pointerEvents: 'none',

package/collection/lib/useCursorListModel.tsx

@@ -146,10 +146,14 @@ export const getCursor = (state: NavigationInput['state']): string =>
 /**
  * Check if the provided id is the current cursor id of a Collection model's state.
  */
-export const isCursor = (state: NavigationInput['state'], id?: string): boolean =>
-  state.cursorId && typeof state.cursorId === 'string'
-    ? state.cursorId === id
-    : state.cursorId.includes(id as string);
+export const isCursor = (state: NavigationInput['state'], id?: string): boolean => {
+  const {cursorId} = state;
+  // Empty cursor must not use String.prototype.includes (e.g. ''.includes('') is true).
+  if (cursorId == null || cursorId === '') {
+    return false;
+  }
+  return typeof cursorId === 'string' ? cursorId === id : cursorId.includes(id as string);
+};
 
 export const getWrappingOffsetItem =
   (offset: number) =>

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: "v0f59", 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)) var(--cnvs-base-size-500, 2.5rem) ;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, 1rem));> *{flex:1;}}" }
+    base: { name: "1qfk8h", 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)) var(--cnvs-base-size-500, 2.5rem) ;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, 1rem));> *{flex:1;}}" }
 }, "action-bar-list-d6d378");
 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: "2ou7e3", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "1gs2r", 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: "3xz1qf", styles: "box-sizing:border-box;" },
+    base: { name: "2yghfc", styles: "box-sizing:border-box;" },
     modifiers: {
         imageLoaded: {
-            false: { name: "32wybt", styles: "[data-part=\"avatar-image\"]{display:none;}" },
-            true: { name: "2uoyh2", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
+            false: { name: "zjq9", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "2zg9o8", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "1duy43", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            cover: { name: "2dld7k", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            fill: { name: "2lo5qq", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            none: { name: "35yf6o", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['scale-down']: { name: "140sbx", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            initial: { name: "yur9h", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            inherit: { name: "1i78g", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            unset: { name: "3fzvm3", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
-            ['-moz-initial']: { name: "4boela", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['revert']: { name: "29hcj1", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
+            contain: { name: "12sve8", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "1h6gxt", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "46ouk3", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "na4i7", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "3vojhy", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "e3slx", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "3kpmpe", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "306py6", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "34n6vn", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "1jzocl", 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: "2yokzx", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
+    base: { name: "48wt8m", 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: "py8hy", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
+    base: { name: "2ox7fk", 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,24 +13,24 @@ exports.baseAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
         color: '',
         size: '',
     },
-    base: { name: "uk653", 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: "21nj8f", 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: "21mq8x", 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: "r82z5", 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: "2ytlo9", 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: "216mse", 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: "43duu6", 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: "3rbj5v", 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: "2lr9ya", 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: "soxrp", 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: "40mbpd", 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: "2r6vo2", 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: "39dbqg", 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: "49wol1", 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: "1vti5o", 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: "1dgijr", 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: "gvqfq", 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: "3r02qx", 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: "3650cj", 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: "15t8ik", 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: "2tpbss", 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: "4bic0m", 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: "2qo5at", 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: "1yt9il", 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: "1ke5z9", 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: "y163d", 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: "cwick", 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: "2gcg5y", 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

@@ -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: "15x4jw", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "qhl6q", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "10llam", styles: "box-sizing:border-box;align-items:center;animation:animation-15x4jw 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);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 0.40625rem;background:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
+    base: { name: "3o0ld", styles: "box-sizing:border-box;align-items:center;animation:animation-qhl6q 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);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 0.40625rem;background:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "17wpef", 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-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
+            inverse: { name: "1pe5lr", 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-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
         },
         emphasis: {
-            high: { name: "1g5jsi", styles: "" },
-            low: { name: "2js3t", 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: "3zs4x0", styles: "" },
+            low: { name: "2injjo", 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: "jz4d", 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: "1o8in5", 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

@@ -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: "21m2ed", 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, 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:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));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;&: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-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "2uhk1w", 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, 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:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));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;&: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-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "1k13vc", 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: "1ebfps", 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: "1k3iqe", 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: "3h53cc", 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: "aysru", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "264fjl", styles: "width:20.5rem;" }
+            true: { name: "rxmlq", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "pvtyi", styles: "width:20.5rem;" }
         }
     }
 }, "banner-1de0cd");

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: "mf9wr", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
+    base: { name: "1l7j8z", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
     modifiers: {
         isSticky: {
-            true: { name: "1a846t", styles: "display:none;" }
+            true: { name: "3zimwl", styles: "display:none;" }
         }
     }
 }, "action-bar-text-c1912f");

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

@@ -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: "2yx7dc", styles: "box-sizing:border-box;margin-inline-end:0;" }
+    base: { name: "2t21eu", 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

@@ -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: "1yd5ov", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
+    base: { name: "12gb1h", 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: "l9dd9", 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-medium);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);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-29bc44);" }
+    base: { name: "tafbk", 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-medium);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);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

@@ -15,7 +15,7 @@ exports.breadcrumbsItemStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
     },
-    base: { name: "30xh0z", 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-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: "17qmhk", 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-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')({