@workday/canvas-kit-react 16.0.0-alpha.0396-next.0 → 16.0.0-alpha.0431-next.0

package/button/lib/TertiaryButton.tsx

@@ -1,6 +1,6 @@
-import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {colorSpace, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
@@ -22,99 +22,39 @@ const tertiaryButtonStencil = createStencil({
   extends: buttonStencil,
   // Base Styles
   base: {
-    paddingInline: system.legacy.padding.xs,
-    minWidth: 'auto',
-    borderWidth: px2rem(2),
     [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
     [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-
     [buttonStencil.vars.label]: system.color.fg.default,
     [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
+    [buttonStencil.vars.border]: system.color.border.transparent,
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-
-      [buttonStencil.vars.label]: system.color.fg.default,
+      [buttonStencil.vars.background]: system.legacy.color.surface.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
-      [buttonStencil.vars.border]: system.color.border.transparent,
-      [buttonStencil.vars.label]: system.color.fg.contrast.default,
-      ...focusRing({
-        width: 2,
-        separation: 0,
-        innerColor: system.legacy.color.focus.inverse,
-
-        outerColor: system.legacy.color.brand.focus.primary,
-      }),
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.boxShadowInner]: system.legacy.color.focus.inverse,
+      [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.transparent,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.hover,
-      }),
-      [buttonStencil.vars.label]: system.color.fg.strong,
-      [systemIconStencil.vars.color]: system.color.fg.strong,
-      textDecoration: 'underline',
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
+      [systemIconStencil.vars.color]: system.color.fg.stronger,
+      [buttonStencil.vars.label]: system.color.fg.stronger,
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.transparent,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.pressed,
-      }),
-      [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
-      textDecoration: 'underline',
+      [buttonStencil.vars.label]: system.color.fg.stronger,
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      textDecoration: 'none',
       [buttonStencil.vars.opacity]: system.opacity.disabled,
       [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-      [buttonStencil.vars.label]: system.color.fg.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     },
   },
   modifiers: {
-    // IconPosition Styles
-    iconPosition: {
-      only: {
-        padding: 0,
-        [systemIconStencil.vars.color]: cssVar(
-          buttonColorPropVars.default.icon,
-          system.color.fg.default
-        ),
-        '&:focus-visible, &.focus': {
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.focus.icon,
-            system.color.fg.strong
-          ),
-        },
-        '&:hover, &.hover': {
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.hover.icon,
-            system.color.fg.strong
-          ),
-        },
-        '&:active, &.active': {
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.active.icon,
-            system.color.fg.strong
-          ),
-        },
-        '&:disabled, &.disabled': {
-          [buttonStencil.vars.opacity]: system.opacity.disabled,
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.disabled.icon,
-            system.color.fg.default
-          ),
-        },
-      },
-      start: {},
-      end: {},
-    },
     variant: {
       // Inverse Styles
       inverse: {
@@ -123,34 +63,21 @@ const tertiaryButtonStencil = createStencil({
         [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Hover Styles
         '&:hover, &.hover': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.transparent,
-            mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.hover,
-          }),
+          [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.legacy.color.surface.inverse,
-
           [buttonStencil.vars.label]: system.color.fg.contrast.default,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
-          ...focusRing({
-            width: 2,
-            separation: 2,
-            innerColor: system.color.border.contrast.default,
-            outerColor: system.legacy.color.focus.inverse,
-          }),
+          [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
+          [buttonStencil.vars.boxShadowOuter]: system.legacy.color.focus.inverse,
         },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.transparent,
-            mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.pressed,
-          }),
+          [buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
@@ -265,14 +192,6 @@ export const TertiaryButton = createComponent('button')({
     ref,
     Element
   ) => {
-    const baseIconPosition = iconPosition
-      ? iconPosition
-      : icon
-        ? children
-          ? 'start'
-          : 'only'
-        : undefined;
-
     return (
       <Button
         as={Element}
@@ -286,7 +205,7 @@ export const TertiaryButton = createComponent('button')({
             size,
             variant,
             grow,
-            iconPosition: baseIconPosition,
+            iconPosition,
           }),
           cs,
         ]}

package/card/lib/Card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common';
 import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -22,13 +22,14 @@ export interface CardProps extends BoxProps {
 
 // .cnvs-card
 export const cardStencil = createStencil({
+  extends: cornerShapeStencil,
   base: {
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.xxl,
     display: 'flex',
     flexDirection: 'column',
-    gap: system.legacy.gap.lg,
+    gap: system.legacy.padding.sm,
     padding: system.legacy.padding.xl,
     backgroundColor: system.legacy.color.surface.default,
-    borderRadius: system.legacy.shape.xxl,
     border: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
   },
   modifiers: {

package/card/lib/CardHeading.tsx

@@ -20,9 +20,10 @@ export const cardHeadingStencil = createStencil({
   base: {
     color: system.color.fg.strong,
     fontWeight: system.fontWeight.bold,
-    marginBlock: system.legacy.padding.none,
+    marginBlockStart: system.legacy.padding.none,
+    marginBlockEnd: system.legacy.padding.none,
   },
-  defaultModifiers: {typeLevel: 'body.large'},
+  defaultModifiers: {typeLevel: 'body.small'},
 });
 
 export const CardHeading = createComponent('h3')({

package/color-picker/lib/ColorInput.tsx

@@ -86,6 +86,9 @@ export const colorPickerHexInputStencil = createStencil({
       left: system.legacy.gap.sm,
       boxShadow: `inset 0 0 0 ${px2rem(1)} rgba(0,0,0,0.25)`,
       pointerEvents: 'none',
+      '@media (forced-colors: active)': {
+        outline: `solid ${px2rem(1)} SelectedItemText`,
+      },
     },
 
     ':dir(ltr)': {

package/color-picker/lib/parts/ColorSwatch.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {cornerShapeStencil, pickForegroundColor} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
@@ -12,19 +12,21 @@ export interface ColorSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const colorPickerColorSwatchStencil = createStencil({
+  extends: cornerShapeStencil,
   vars: {
     color: '',
     iconColor: '',
   },
   base: ({color, iconColor}) => ({
     [systemIconStencil.vars.color]: iconColor,
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.sm,
     width: system.legacy.size.xxs,
     height: system.legacy.size.xxs,
-    borderRadius: system.legacy.shape.sm,
     backgroundColor: color,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    forcedColorAdjust: 'none',
     '& > *': {
       // Account for 24px icon
       margin: calc.negate(px2rem(2)),
@@ -34,6 +36,9 @@ export const colorPickerColorSwatchStencil = createStencil({
     withShadow: {
       true: {
         boxShadow: `inset 0px 0px 0px ${px2rem(1)} rgba(0, 0, 0, 0.25)`,
+        '@media (forced-colors: active)': {
+          outline: `solid ${px2rem(1)} SelectedItemText`,
+        },
       },
     },
   },
@@ -50,7 +55,7 @@ export const ColorSwatch = ({color, showCheck = false, ...elemProps}: ColorSwatc
         colorPickerColorSwatchStencil({
           color,
           iconColor: pickForegroundColor(color),
-          withShadow: showCheck || lowerCasedColor === '#ffffff',
+          withShadow: showCheck || lowerCasedColor === '#ffffff' ? 'true' : undefined,
         })
       )}
     >

package/common/lib/styles/cornerShape.ts

@@ -0,0 +1,16 @@
+import {createStencil} from '@workday/canvas-kit-styling';
+
+/**
+ * Progressive enhancement corner shape for rounded components. Browsers that don't support
+ * `corner-shape` will fall back to the radius alone.
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape
+ */
+export const cornerShapeStencil = createStencil({
+  vars: {
+    shape: '',
+  },
+  base: ({shape}) => ({
+    borderRadius: shape,
+    cornerShape: 'superellipse(1.1)',
+  }),
+});

package/common/lib/styles/index.ts

@@ -1,3 +1,4 @@
+export * from './cornerShape';
 export * from './errorRing';
 export * from './focusRing';
 export * from './hideMouseFocus';

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: "3zmb", 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: "1t08lx", 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: "2ivjqh", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "2ncpjw", 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.d.ts

@@ -166,16 +166,18 @@ export declare const avatarStencil: import("@workday/canvas-kit-styling").Stenci
             color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)))`;
-            color: `var(--${string}, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)))`;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)))`; /**
+             * JSDoc for Avatar. Will be part of the Component API docs
+             */
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
         };
         amber: ({ backgroundColor, color }: {
             backgroundColor: `--${string}`;
             color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)))`;
-            color: `var(--${string}, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)))`;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)))`;
         };
         teal: ({ backgroundColor, color }: {
             backgroundColor: `--${string}`;
@@ -190,8 +192,24 @@ export declare const avatarStencil: import("@workday/canvas-kit-styling").Stenci
             color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)))`;
-            color: `var(--${string}, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)))`;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)))`;
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
+        };
+        magenta: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)))`;
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
+        };
+        green: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)))`;
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
         };
     };
     size: {

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOjC,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAE5E,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwExB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,iFAoDjB,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOjC,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAE5E,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qHA0E1B;;eAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAJD,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,iFAoDjB,CAAC"}

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: "2k5chx", styles: "box-sizing:border-box;" },
+    base: { name: "3xqfqb", styles: "box-sizing:border-box;" },
     modifiers: {
         imageLoaded: {
-            false: { name: "2q6n3d", styles: "[data-part=\"avatar-image\"]{display:none;}" },
-            true: { name: "1s9zek", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
+            false: { name: "gqy6u", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "4sogm", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "3nhn2x", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            cover: { name: "xyf09", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            fill: { name: "2liyfe", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            none: { name: "3v3ylv", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['scale-down']: { name: "2jaw4i", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            initial: { name: "4dz26d", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            inherit: { name: "1htlbo", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            unset: { name: "2fpee5", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
-            ['-moz-initial']: { name: "2k4mmo", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['revert']: { name: "n289n", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
+            contain: { name: "20kpsw", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "1ealaf", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "epxt1", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "1r1qwn", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "3163fj", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "1ejszl", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "3qyl7i", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "3q3my9", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "18ei80", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "1qctki", 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: "42olam", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
+    base: { name: "1bihu", 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: "3gethm", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
+    base: { name: "2rox2n", 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.d.ts

@@ -9,7 +9,7 @@ export interface BaseAvatarProps extends CSProps {
      * The variant of the Avatar.
      * @default "blue"
      */
-    variant?: 'blue' | 'amber' | 'teal' | 'purple';
+    variant?: 'blue' | 'amber' | 'teal' | 'purple' | 'magenta' | 'green';
     /**
      * The size of the Avatar.
      * `extraExtraSmall` is 24px x 24px
@@ -30,16 +30,16 @@ export declare const baseAvatarStencil: import("@workday/canvas-kit-styling").St
             color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)))`;
-            color: `var(--${string}, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)))`;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)))`;
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
         };
         amber: ({ backgroundColor, color }: {
             backgroundColor: `--${string}`;
             color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)))`;
-            color: `var(--${string}, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)))`;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)))`;
         };
         teal: ({ backgroundColor, color }: {
             backgroundColor: `--${string}`;
@@ -54,8 +54,24 @@ export declare const baseAvatarStencil: import("@workday/canvas-kit-styling").St
             color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)))`;
-            color: `var(--${string}, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)))`;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)))`;
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
+        };
+        magenta: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)))`;
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
+        };
+        green: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)))`;
+            color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
         };
     };
     size: {

package/dist/commonjs/avatar/lib/BaseAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAvatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/BaseAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAMjG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAE/C;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EACD,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyF5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;;CASrB,CAAC"}
+{"version":3,"file":"BaseAvatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/BaseAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAMjG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IAErE;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EACD,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6G5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;;CASrB,CAAC"}

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

@@ -13,25 +13,27 @@ exports.baseAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
         color: '',
         size: '',
     },
-    base: { name: "279cja", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
+    base: { name: "y4s9r", 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: "1nfr7g", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));" },
-            amber: { name: "3i1voc", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)));" },
-            teal: { name: "3e8734", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)));" },
-            purple: { name: "26ckw3", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)));" }
+            blue: { name: "2sze96", 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: "3vy3ej", 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: "qu2un", 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: "nj5oh", 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: "1di17f", 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: "fxw36", 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: "1pglxp", styles: "--size-base-avatar-61af60: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: "49fxbj", styles: "--size-base-avatar-61af60: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: "zis9e", styles: "--size-base-avatar-61af60: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: "2rcix5", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-600, 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
-            large: { name: "3ky5pl", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-900, 4.5rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));" },
-            extraLarge: { name: "3r99g8", styles: "--size-base-avatar-61af60:var(--cnvs-base-size-1200, 6rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));" },
-            extraExtraLarge: { name: "20w25t", styles: "--size-base-avatar-61af60:7.5rem;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));" }
+            extraExtraSmall: { name: "18joo1", 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: "5ebje", 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: "tx4qs", 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: "1obfph", 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: "2i0dm0", 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: "2xq773", 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: "1brh7", 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-61af60");
+}, "base-avatar-bfdfb4");
 /**
  * JSDoc for Avatar. Will be part of the Component API docs
  */

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: "2n07n0", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "2flwv8", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "8gorq", styles: "box-sizing:border-box;align-items:center;animation:animation-2n07n0 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: "3v6xv", styles: "box-sizing:border-box;align-items:center;animation:animation-2flwv8 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: "1x8tkc", 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: "4am5wd", 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: "3bfehn", styles: "" },
-            low: { name: "2wa1mg", 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: "3eb4ai", styles: "" },
+            low: { name: "339zw9", 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: "9f6yc", 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: "2pq5fd", 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");