@workday/canvas-kit-preview-react 11.0.0-alpha.721-next.0 → 11.0.0-alpha.758-next.0

package/dist/commonjs/form-field/lib/FormField.js

@@ -15,13 +15,13 @@ const FormFieldLabel_1 = require("./FormFieldLabel");
 const FormFieldHint_1 = require("./FormFieldHint");
 const FormFieldContainer_1 = require("./FormFieldContainer");
 const formFieldStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1elbum1", styles: "border:none;padding:0;margin:0 0 var(--cnvs-sys-space-x6, calc(0.25rem * 6));" },
+    base: { name: "6fc20a", styles: "border:none;padding:0;margin:0 0 var(--cnvs-sys-space-x6);" },
     modifiers: {
-        modifiers: {
-            true: { name: "6316w2", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
+        grow: {
+            true: { name: "5dbca9", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
         }
     }
-}, "form-field");
+}, "cnvs-preview-form-field");
 /**
  * Use `FormField` to wrap input components to make them accessible. You can customize the field
  * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.

package/dist/commonjs/form-field/lib/FormFieldContainer.js

@@ -9,8 +9,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 const containerBaseStyles = canvas_kit_styling_1.createStencil({
-    base: { name: "j7qwjs", styles: "display:flex;flex-direction:column;" }
-}, "container-base-styles");
+    base: { name: "a7aca5", styles: "display:flex;flex-direction:column;" }
+}, "cnvs-preview-container-base-styles");
 exports.FormFieldContainer = common_1.createSubcomponent('div')({
     displayName: 'FormField.Container',
     modelHook: hooks_1.useFormFieldModel,

package/dist/commonjs/form-field/lib/FormFieldHint.js

@@ -12,14 +12,14 @@ const hooks_1 = require("./hooks");
 const text_1 = require("@workday/canvas-kit-react/text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const formFieldHintStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1dzfw9d", styles: "margin:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) 0 0;" },
+    base: { name: "b58835", styles: "margin:var(--cnvs-sys-space-x2) 0 0;" },
     modifiers: {
-        modifiers: {
-            error: { name: "kze4di", styles: "color:var(--cnvs-brand-error-base, rgba(222,46,33,1));" },
+        error: {
+            error: { name: "136719", styles: "color:var(--cnvs-brand-error-base);" },
             alert: {}
         }
     }
-}, "form-field-hint");
+}, "cnvs-preview-form-field-hint");
 exports.FormFieldHint = common_1.createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: hooks_1.useFormFieldModel,

package/dist/commonjs/form-field/lib/FormFieldLabel.js

@@ -12,30 +12,30 @@ const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const asteriskStyles = canvas_kit_styling_1.createStyles({ name: "1iydue3", styles: "margin-inline-start:var(--cnvs-sys-space-x1, 0.25rem);font-size:1.25rem;font-weight:400;text-decoration:unset;color:var(--cnvs-brand-error-base, rgba(222,46,33,1));" });
+const asteriskStyles = canvas_kit_styling_1.createStyles({ name: "3de69e", styles: "margin-inline-start:var(--cnvs-sys-space-x1);font-size:1.25rem;font-weight:400;text-decoration:unset;color:var(--cnvs-brand-error-base);" });
 const labelStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "9lgv5i", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium, 500);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));padding-inline-start:0;margin-bottom:var(--cnvs-sys-space-x1, 0.25rem);display:flex;align-items:center;min-width:180px;" },
+    base: { name: "7ccd23", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-base-palette-black-pepper-300);padding-inline-start:0;margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:180px;" },
     modifiers: {
-        modifiers: {
-            horizontal: { name: "1hnsmpu", styles: "float:left;max-height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" },
-            vertical: { name: "8atqhb", styles: "width:100%;" }
+        orientation: {
+            horizontal: { name: "0da26d", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
+            vertical: { name: "a7ee33", styles: "width:100%;" }
         },
-        modifiers: {
-            error: { name: "11i11uz", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
-            hint: { name: "1g2oxii", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
-            inverse: { name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
+        variant: {
+            error: { name: "85f4df", styles: "color:var(--cnvs-base-palette-cinnamon-500);" },
+            hint: { name: "6895ee", styles: "color:var(--cnvs-base-palette-licorice-300);" },
+            inverse: { name: "447f36", styles: "color:var(--cnvs-base-palette-french-vanilla-100);" }
         },
-        modifiers: {
-            true: { name: "1c1k6kz", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" }
+        disabled: {
+            true: { name: "5a1162", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "rrp7fc", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
+            styles: { name: "439e22", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-base-palette-french-vanilla-100);" }
         }
     ]
-}, "label");
+}, "cnvs-preview-label");
 exports.FormFieldLabel = common_1.createSubcomponent('label')({
     displayName: 'FormField.Label',
     modelHook: hooks_1.useFormFieldModel,

package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js

@@ -45,15 +45,15 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = canvas_kit_styling_1.keyframes({ name: "1w9fjo1", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
-const loadingSparklesIconStyles = canvas_kit_styling_1.createStyles({ name: "1m6e4ch", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1w9fjo1;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
+const LOADING_ANIMATION = canvas_kit_styling_1.keyframes({ name: "f41da9", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
+const loadingSparklesIconStyles = canvas_kit_styling_1.createStyles({ name: "9b2442", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-f41da9;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
     return (React.createElement(icon_1.SystemIcon, { icon: sparkleIcon_1.sparkleIcon, cs: [loadingSparklesIconStyles], size: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3) }));
 };
-const loadingSparklesStyles = canvas_kit_styling_1.createStyles({ name: "14l8nwz", styles: "display:inline-flex;gap:0.0625rem;" });
+const loadingSparklesStyles = canvas_kit_styling_1.createStyles({ name: "1af14c", styles: "display:inline-flex;gap:0.0625rem;" });
 /**
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
  */

package/dist/commonjs/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAY5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAmDL,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAwJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAmDL,CAAC"}

package/dist/commonjs/pill/lib/Pill.js

@@ -16,6 +16,7 @@ const PillIconButton_1 = require("./PillIconButton");
 const PillCount_1 = require("./PillCount");
 const PillAvatar_1 = require("./PillAvatar");
 const PillLabel_1 = require("./PillLabel");
+const icon_1 = require("@workday/canvas-kit-react/icon");
 const pillBaseStyles = {
     display: 'inline-flex',
     alignItems: 'center',
@@ -35,13 +36,6 @@ const pillBaseStyles = {
 };
 const StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))({
     ...pillBaseStyles,
-    '&:focus': {
-        'span[data-count="ck-pill-count"]': {
-            borderTop: `1px solid ${tokens_1.colors.blueberry400}`,
-            borderBottom: `1px solid ${tokens_1.colors.blueberry400}`,
-            borderRight: `1px solid ${tokens_1.colors.blueberry400}`,
-        },
-    },
     '&:active, &:active:hover, &:active:focus': {
         'span[data-count="ck-pill-count"]': {
             backgroundColor: tokens_1.colors.soap600,
@@ -55,34 +49,57 @@ const StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))({
             },
         },
     }),
-    // Default Styles
     [button_1.buttonVars.default.background]: tokens_1.colors.soap300,
     [button_1.buttonVars.default.border]: tokens_1.colors.licorice200,
     [button_1.buttonVars.default.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.default.icon]: tokens_1.colors.licorice200,
-    // Hover Styles
-    [button_1.buttonVars.hover.background]: tokens_1.colors.soap400,
-    [button_1.buttonVars.hover.border]: tokens_1.colors.licorice400,
-    [button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.hover.icon]: tokens_1.colors.licorice500,
-    // Focus Styles
-    [button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
-    [button_1.buttonVars.focus.border]: tokens_1.colors.blueberry400,
-    [button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.focus.icon]: tokens_1.colors.licorice500,
-    // Active Styles
-    [button_1.buttonVars.active.background]: tokens_1.colors.soap500,
-    [button_1.buttonVars.active.border]: tokens_1.colors.licorice500,
-    [button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.active.icon]: tokens_1.colors.licorice500,
-    // Disabled Styles
-    [button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
-    [button_1.buttonVars.disabled.border]: tokens_1.colors.licorice100,
-    [button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
-    [button_1.buttonVars.disabled.opacity]: '1',
-    [button_1.buttonVars.disabled.icon]: tokens_1.colors.licorice100,
+    [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice200,
+    button: {
+        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice200,
+    },
+    '&:focus-visible, &.focus': {
+        [button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
+        [button_1.buttonVars.focus.border]: tokens_1.colors.blueberry400,
+        [button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
+        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
+        button: {
+            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
+        },
+        'span[data-count="ck-pill-count"]': {
+            borderTop: `1px solid ${tokens_1.colors.blueberry400}`,
+            borderBottom: `1px solid ${tokens_1.colors.blueberry400}`,
+            borderRight: `1px solid ${tokens_1.colors.blueberry400}`,
+        },
+    },
+    '&:hover, &.hover': {
+        [button_1.buttonVars.hover.background]: tokens_1.colors.soap400,
+        [button_1.buttonVars.hover.border]: tokens_1.colors.licorice400,
+        [button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
+        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
+        button: {
+            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
+        },
+    },
+    '&:active, &.active': {
+        [button_1.buttonVars.active.background]: tokens_1.colors.soap500,
+        [button_1.buttonVars.active.border]: tokens_1.colors.licorice500,
+        [button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
+        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
+        button: {
+            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
+        },
+    },
+    '&:disabled, &.disabled': {
+        [button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
+        [button_1.buttonVars.disabled.border]: tokens_1.colors.licorice100,
+        [button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
+        [button_1.buttonVars.disabled.opacity]: '1',
+        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
+        button: {
+            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
+        },
+    },
 }, ({ variant }) => ({
-    '&:focus, &:focus-visible': {
+    '&:focus-visible, &:focus': {
         borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
         ...common_1.focusRing({
             width: 0,
@@ -97,18 +114,26 @@ const StyledNonInteractivePill = common_1.styled(StyledBasePill)({
     [button_1.buttonVars.default.background]: tokens_1.colors.soap300,
     [button_1.buttonVars.default.border]: tokens_1.colors.licorice200,
     [button_1.buttonVars.default.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.hover.background]: tokens_1.colors.soap300,
-    [button_1.buttonVars.hover.border]: tokens_1.colors.licorice200,
-    [button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
-    [button_1.buttonVars.focus.border]: tokens_1.colors.licorice200,
-    [button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.active.background]: tokens_1.colors.soap500,
-    [button_1.buttonVars.active.border]: tokens_1.colors.licorice500,
-    [button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
-    [button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
-    [button_1.buttonVars.disabled.border]: tokens_1.colors.licorice100,
+    '&:focus-visible, &.focus': {
+        [button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
+        [button_1.buttonVars.focus.border]: tokens_1.colors.licorice200,
+        [button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
+    },
+    '&:hover, &.hover': {
+        [button_1.buttonVars.hover.background]: tokens_1.colors.soap300,
+        [button_1.buttonVars.hover.border]: tokens_1.colors.licorice200,
+        [button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
+    },
+    '&:active, &.active': {
+        [button_1.buttonVars.active.background]: tokens_1.colors.soap500,
+        [button_1.buttonVars.active.border]: tokens_1.colors.licorice500,
+        [button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
+    },
+    '&:disabled, &.disabled': {
+        [button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
+        [button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
+        [button_1.buttonVars.disabled.border]: tokens_1.colors.licorice100,
+    },
     cursor: 'default',
     overflow: 'revert',
     position: 'relative',

package/dist/commonjs/pill/lib/PillIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2CD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
+{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAG9F,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmDD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}

package/dist/commonjs/pill/lib/PillIconButton.js

@@ -33,19 +33,27 @@ const StyledIconButton = common_1.styled(button_1.BaseButton)({
     [button_1.buttonVars.default.background]: tokens_1.colors.soap300,
     [button_1.buttonVars.default.border]: 'transparent',
     [button_1.buttonVars.default.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.hover.background]: tokens_1.colors.soap300,
-    [button_1.buttonVars.hover.border]: 'transparent',
-    [button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
-    [button_1.buttonVars.focus.border]: 'transparent',
-    [button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.active.background]: tokens_1.colors.soap500,
-    [button_1.buttonVars.active.border]: 'transparent',
-    [button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
-    [button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
-    [button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
-    [button_1.buttonVars.disabled.border]: 'transparent',
-    [button_1.buttonVars.disabled.icon]: tokens_1.colors.licorice100,
+    '&:focus-visible, &.focus': {
+        [button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
+        [button_1.buttonVars.focus.border]: 'transparent',
+        [button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
+    },
+    '&:hover, &.hover': {
+        [button_1.buttonVars.hover.background]: tokens_1.colors.soap300,
+        [button_1.buttonVars.hover.border]: 'transparent',
+        [button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
+    },
+    '&:active, &.active': {
+        [button_1.buttonVars.active.background]: tokens_1.colors.soap500,
+        [button_1.buttonVars.active.border]: 'transparent',
+        [button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
+    },
+    '&:disabled, &.disabled': {
+        [button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
+        [button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
+        [button_1.buttonVars.disabled.border]: 'transparent',
+        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
+    },
 });
 exports.PillIconButton = common_1.createSubcomponent('button')({
     modelHook: usePillModel_1.usePillModel,

package/dist/commonjs/radio/lib/RadioGroup.js

@@ -16,14 +16,14 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
  * Styles for RadioGroup
  */
 const radioGroupStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "2ncguu", styles: "display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1, 0.25rem);gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding:0.625rem var(--cnvs-sys-space-x3, calc(0.25rem * 3)) var(--cnvs-sys-space-x2, calc(0.25rem * 2));margin:calc(var(--cnvs-sys-space-x1, 0.25rem) * -1) calc(var(--cnvs-sys-space-x3, calc(0.25rem * 3)) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "b2bdc9", styles: "display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:calc(var(--cnvs-sys-space-x1) * -1) calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
-        modifiers: {
-            error: { name: "1g7vnq3", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base, rgba(222,46,33,1));" },
-            alert: { name: "qmneoc", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest, rgba(192,108,0,1)), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base, rgba(255,161,38,1));" }
+        error: {
+            error: { name: "0ab954", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "d9e924", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
         }
     }
-}, "radio-group");
+}, "cnvs-preview-radio-group");
 /**
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
  *

package/dist/commonjs/radio/lib/RadioLabel.js

@@ -13,8 +13,8 @@ const RadioText_1 = require("./RadioText");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const radioLabelStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1ak69fu", styles: "align-items:flex-start;min-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));position:relative;gap:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }
-}, "radio-label");
+    base: { name: "1ec9ca", styles: "align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
+}, "cnvs-preview-radio-label");
 exports.RadioLabelContext = react_1.default.createContext({});
 exports.RadioLabel = common_1.createSubcomponent('label')({
     displayName: 'Radio.Label',

package/dist/commonjs/radio/lib/RadioText.js

@@ -13,22 +13,22 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const radioTextStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "nwt3co", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+    base: { name: "313724", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300);" },
     modifiers: {
-        modifiers: {
-            inverse: { name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
+        variant: {
+            inverse: { name: "d4304f", styles: "color:var(--cnvs-base-palette-french-vanilla-100);" }
         },
-        modifiers: {
-            true: { name: "1iqk4gr", styles: "cursor:none;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" }
+        disabled: {
+            true: { name: "318fbd", styles: "cursor:none;color:var(--cnvs-base-palette-licorice-100);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "1c0ay3d", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);" }
+            styles: { name: "df67ce", styles: "color:var(--cnvs-base-palette-french-vanilla-100);opacity:var(--cnvs-sys-opacity-disabled);" }
         }
     ]
-}, "radio-text");
+}, "cnvs-preview-radio-text");
 exports.RadioText = common_1.createSubcomponent('span')({
     displayName: 'RadioButton.Text',
     modelHook: useRadioModel_1.useRadioModel,

package/dist/commonjs/radio/lib/StyledRadioButton.js

@@ -13,13 +13,13 @@ const RadioLabel_1 = require("./RadioLabel");
 const radioWidth = 18;
 const radioHeight = 18;
 const radioInputStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1l5cj6n", styles: "cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));border:5px solid var(--cnvs-brand-primary-base, rgba(8,117,225,1));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 1px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));border:0.3125rem solid var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "075565", styles: "cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);background-color:var(--cnvs-base-palette-soap-100);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:5px solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
     modifiers: {
-        modifiers: {
-            inverse: { name: "1cgupwx", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled, 0.4);+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}" }
+        variant: {
+            inverse: { name: "2dcd3d", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100);border-color:var(--cnvs-base-palette-soap-300);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100);border-color:var(--cnvs-base-palette-licorice-100);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-base-palette-french-vanilla-100);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-base-palette-french-vanilla-100);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);}" }
         }
     }
-}, "radio-input");
+}, "cnvs-preview-radio-input");
 const StyledRadioInput = common_1.createComponent('input')({
     displayName: 'StyledRadioInput',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
@@ -27,16 +27,16 @@ const StyledRadioInput = common_1.createComponent('input')({
     },
 });
 const radioInputWrapperStyles = canvas_kit_styling_1.createStencil({
-    base: { name: "1ibt5wu", styles: "height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:1;}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2, calc(0.25rem * 2)) - 0.0625rem) var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));}" },
+    base: { name: "b3a7ec", styles: "height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:1;}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-base-palette-soap-200);}" },
     modifiers: {
-        modifiers: {
-            inverse: { name: "15fnpid", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled, 0.4);}" }
+        variant: {
+            inverse: { name: "d678c6", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
         },
-        modifiers: {
-            true: { name: "1brxgit", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
+        disabled: {
+            true: { name: "cd8d9b", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
         }
     }
-}, "radio-input-wrapper-styles");
+}, "cnvs-preview-radio-input-wrapper-styles");
 const RadioInputWrapper = common_1.createComponent(layout_1.Flex)({
     displayName: 'RadioInputWrapper',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {

package/dist/commonjs/status-indicator/index.d.ts

@@ -1,4 +1,3 @@
 export * from './lib/StatusIndicator';
 export * from './lib/hooks/useStatusIndicatorModel';
-export { useStatusIndicatorIcon } from './lib/StatusIndicatorIcon';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/status-indicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAC,sBAAsB,EAAC,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qCAAqC,CAAC"}

package/dist/commonjs/status-indicator/index.js

@@ -10,8 +10,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStatusIndicatorIcon = void 0;
 __exportStar(require("./lib/StatusIndicator"), exports);
 __exportStar(require("./lib/hooks/useStatusIndicatorModel"), exports);
-var StatusIndicatorIcon_1 = require("./lib/StatusIndicatorIcon");
-Object.defineProperty(exports, "useStatusIndicatorIcon", { enumerable: true, get: function () { return StatusIndicatorIcon_1.useStatusIndicatorIcon; } });

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts

@@ -7,17 +7,6 @@ export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
      */
     children: React.ReactNode;
 }
-export declare const useStatusIndicator: import("@workday/canvas-kit-react/common").BehaviorHook<{
-    state: {
-        emphasis: import("./hooks").StatusIndicatorEmphasis;
-        variant: import("./hooks").StatusIndicatorVariant;
-    };
-    events: {};
-}, {
-    opacity: string | undefined;
-    color: string;
-    background: string;
-}>;
 /**
  * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
  * apply spacing evenly between its children. It has a default maximum width of `200px`.
@@ -55,12 +44,6 @@ export declare const StatusIndicator: import("@workday/canvas-kit-react/common")
      * <StatusIndicator.Icon icon={uploadCloudIcon} />
      * ```
      */
-    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./StatusIndicatorIcon").StatusIndicatorIconProps, {
-        state: {
-            emphasis: import("./hooks").StatusIndicatorEmphasis;
-            variant: import("./hooks").StatusIndicatorVariant;
-        };
-        events: {};
-    }>;
+    Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("@workday/canvas-kit-react/icon").SystemIconProps>;
 };
 //# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;EAO7B,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;IAKxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;;;;;;;CAmBL,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAQnE,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA6FD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;IAIxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAcL,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicator.js

@@ -3,21 +3,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusIndicator = exports.useStatusIndicator = void 0;
+exports.StatusIndicator = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const icon_1 = require("@workday/canvas-kit-react/icon");
 const StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
 const StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
 const hooks_1 = require("./hooks");
-exports.useStatusIndicator = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(({ state }) => {
-    const colors = StatusIndicatorIcon_1.statusIndicatorColors[state.variant][state.emphasis];
-    return {
-        opacity: state.variant === 'transparent' ? '0.85' : undefined,
-        color: colors.text,
-        background: colors.background,
-    };
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const statusIndicatorStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "e96360", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1)};" },
+    modifiers: {
+        gray: {
+            high: { name: "809d63", styles: "color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-licorice-300);" },
+            low: { name: "f5e5ca", styles: "color:var(--cnvs-base-palette-licorice-400);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-licorice-400);background:var(--cnvs-base-palette-soap-300);" }
+        },
+        orange: {
+            high: { name: "441c3e", styles: "color:var(--cnvs-base-palette-licorice-500);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-licorice-500);background:var(--cnvs-base-palette-cantaloupe-400);" },
+            low: { name: "f639dc", styles: "color:var(--cnvs-base-palette-toasted-marshmallow-600);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-toasted-marshmallow-600);background:var(--cnvs-base-palette-cantaloupe-100);" }
+        },
+        blue: {
+            high: { name: "8041cf", styles: "color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-blueberry-400);" },
+            low: { name: "d9e8e1", styles: "color:var(--cnvs-base-palette-blueberry-500);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-blueberry-500);background:var(--cnvs-base-palette-blueberry-100);" }
+        },
+        green: {
+            high: { name: "d6f6a4", styles: "color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-green-apple-600);" },
+            low: { name: "27600d", styles: "color:var(--cnvs-base-palette-green-apple-600);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-green-apple-600);background:var(--cnvs-base-palette-green-apple-100);" }
+        },
+        red: {
+            high: { name: "c02729", styles: "color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-cinnamon-500);" },
+            low: { name: "9f9c82", styles: "color:var(--cnvs-base-palette-cinnamon-600);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-cinnamon-600);background:var(--cnvs-base-palette-cinnamon-100);" }
+        },
+        transparent: {
+            high: { name: "86caa4", styles: "opacity:0.85;color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-black-pepper-600);" },
+            low: { name: "e34f94", styles: "opacity:0.85;color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-black-pepper-600);" }
+        }
+    },
+    defaultModifiers: {
+        gray: 'low',
+    }
+}, "cnvs-preview-status-indicator");
 /**
  * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
  * apply spacing evenly between its children. It has a default maximum width of `200px`.
@@ -31,7 +58,6 @@ exports.useStatusIndicator = common_1.createElemPropsHook(hooks_1.useStatusIndic
 exports.StatusIndicator = common_1.createContainer('div')({
     displayName: 'StatusIndicator',
     modelHook: hooks_1.useStatusIndicatorModel,
-    elemPropsHook: exports.useStatusIndicator,
     subComponents: {
         /**
          * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
@@ -53,5 +79,5 @@ exports.StatusIndicator = common_1.createContainer('div')({
         Icon: StatusIndicatorIcon_1.StatusIndicatorIcon,
     },
 })(({ children, ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(layout_1.Flex, Object.assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
+    return (react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, statusIndicatorStencil({ [model.state.variant]: model.state.emphasis }))), children));
 });