@workday/canvas-kit-react 13.2.26 → 13.2.28

package/dist/es6/checkbox/lib/CheckboxCheck.js

@@ -6,21 +6,21 @@ import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { checkSmallIcon } from '@workday/canvas-system-icons-web';
 import { CheckBackground } from './CheckBackground';
 const checkboxCheckStencil = createStencil({
-    base: { name: "48oxxd", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
+    base: { name: "2ofap", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
     modifiers: {
         checked: {
-            true: { name: "21odgg", styles: "--color-system-icon-99ce3e:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
+            true: { name: "4d04yr", styles: "--color-system-icon-99ce3e:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         indeterminate: {
-            true: { name: "4exaj1", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
+            true: { name: "24utpu", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         variant: {
-            inverse: { name: "36jez9", styles: "--color-system-icon-99ce3e:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
+            inverse: { name: "3bleko", styles: "--color-system-icon-99ce3e:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
         }
     }
 }, "checkbox-check-3954b5");
 const indeterminateBoxStencil = createStencil({
-    base: { name: "3flr73", styles: "box-sizing:border-box;width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
+    base: { name: "3b8gu", styles: "box-sizing:border-box;width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
 }, "indeterminate-box-105dc4");
 export const CheckboxCheck = createComponent('div')({
     displayName: 'CheckboxCheck',

package/dist/es6/checkbox/lib/CheckboxContainer.js

@@ -4,7 +4,7 @@ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { LabelText } from '@workday/canvas-kit-react/text';
 const checkboxContainerStencil = createStencil({
-    base: { name: "4y8oq", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" }
+    base: { name: "3bpcl1", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" }
 }, "checkbox-container-a7381d");
 export const CheckboxContainer = createComponent('div')({
     displayName: 'CheckboxContainer',

package/dist/es6/checkbox/lib/CheckboxInput.js

@@ -4,22 +4,22 @@ import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-s
 import { brand, system } from '@workday/canvas-tokens-web';
 import { checkboxBackgroundStencil } from './CheckBackground';
 const checkboxInputStencil = createStencil({
-    base: { name: "7mo91", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{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);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
+    base: { name: "3k1p43", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{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);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
     modifiers: {
         variant: {
-            inverse: { name: "at334", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
+            inverse: { name: "3hbe60", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
         },
         disabled: {
-            true: { name: "1f3sy3", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
+            true: { name: "xbodw", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
         },
         error: {
-            true: { name: "2wy716", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);box-shadow:\n            0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-8c450a),\n            0 0 0 0.125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n            0 0 0 0.25rem var(--errorRingColorInner-checkbox-background-8c450a),\n            0 0 0 0.3125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);}" }
+            true: { name: "42ln9c", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);box-shadow:\n            0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-8c450a),\n            0 0 0 0.125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n            0 0 0 0.25rem var(--errorRingColorInner-checkbox-background-8c450a),\n            0 0 0 0.3125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);}" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', error: true },
-            styles: { name: "1da8p7", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
+            styles: { name: "3hvsnj", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
         }
     ]
 }, "checkbox-input-d394e3");

package/dist/es6/checkbox/lib/CheckboxRipple.js

@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const checkboxRippleStencil = createStencil({
-    base: { name: "3ak0wl", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
+    base: { name: "4ay49j", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
 }, "checkbox-ripple-976d47");
 export const CheckboxRipple = createComponent('span')({
     displayName: 'CheckboxRipple',

package/dist/es6/collection/lib/ListBox.js

@@ -22,11 +22,11 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
     };
 });
 const listBoxContainerStencil = createStencil({
-    base: { name: "326kc2", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);}" },
+    base: { name: "11bkdy", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);}" },
     modifiers: {
         orientation: {
-            vertical: { name: "1x5mlf", styles: "overflow-y:auto;" },
-            horizontal: { name: "3v4jc7", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
+            vertical: { name: "13rgfb", styles: "overflow-y:auto;" },
+            horizontal: { name: "3wjumk", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
         }
     }
 }, "list-box-container-46e92c");

package/dist/es6/combobox/lib/ComboboxMenuList.js

@@ -18,7 +18,7 @@ export const useComboboxMenuList = createElemPropsHook(useMenuModel)(model => {
     };
 });
 const comboboxMenuListStencil = createStencil({
-    base: { name: "1pficm", styles: "box-sizing:border-box;" },
+    base: { name: "1eqwsg", styles: "box-sizing:border-box;" },
     extends: menuListStencil
 }, "combobox-menu-list-c3dbbc");
 export const ComboboxMenuList = createSubcomponent('ul')({

package/dist/es6/common/lib/AccessibleHide.js

@@ -19,7 +19,7 @@ export const accessibleHide = {
     padding: 0,
     border: 0,
 };
-export const accessibleHideStyles = createStyles({ name: "80hv9", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
+export const accessibleHideStyles = createStyles({ name: "3bm6rm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
  */

package/dist/es6/common/lib/CanvasProvider.js

@@ -5,7 +5,7 @@ import { defaultCanvasTheme, useTheme } from './theming';
 import { brand, base } from '@workday/canvas-tokens-web';
 import { createStyles, getCache } from '@workday/canvas-kit-styling';
 // copied from brand/_variables.css
-const defaultBranding = createStyles({ name: "cor1q", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
+const defaultBranding = createStyles({ name: "2oqtm8", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
 const mappedKeys = {
     lightest: 'lightest',
     light: 'light',

package/dist/es6/common/lib/styles/errorRing.d.ts

@@ -1,6 +1,7 @@
 import { EmotionCanvasTheme } from '../theming/index';
 import { ErrorType } from '../types';
 import { CSSObject } from '@emotion/styled';
+type CSSReturnType = CSSObject & Record<string, any>;
 export declare function getErrorColors(error?: ErrorType, theme?: EmotionCanvasTheme): {
     outer: string;
     inner: string;
@@ -8,5 +9,6 @@ export declare function getErrorColors(error?: ErrorType, theme?: EmotionCanvasT
     outer?: undefined;
     inner?: undefined;
 };
-export declare function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme): CSSObject;
+export declare function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme): CSSReturnType;
+export {};
 //# sourceMappingURL=errorRing.d.ts.map

package/dist/es6/common/lib/styles/errorRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errorRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/errorRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAQ1C,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB;;;;;;EA8B3E;AAED,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAuBlF"}
+{"version":3,"file":"errorRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/errorRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAM1C,KAAK,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAMrD,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB;;;;;;EA8B3E;AAED,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,GAAG,aAAa,CAuBtF"}

package/dist/es6/common/lib/styles/focusRing.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from '@emotion/react';
+import { CSSObjectWithVars } from '@workday/canvas-kit-styling';
 interface FocusRingOptions {
     width?: number;
     separation?: number;
@@ -26,15 +26,15 @@ interface FocusRingOptions {
  * @param innerShadowColor Allows the user to specify the inner shadow color
  * @param outerShadowColor Allows the user to specify the outer shadow color
  *
- * @returns {CSSObject} the css object for the focus ring style
+ * @returns {CSSObjectWithVars} the css object for the focus ring style
  */
 /**
  * A utility to create a canvas style focus ring around your widget.
  * By default, this mixin will create a 2px focus ring tightly wrapped
  * to the container (no whitespace).
  *
- * @returns {CSSObject} the css object for the focus ring style
+ * @returns {CSSObjectWithVars} the css object for the focus ring style
  */
-export declare function focusRing(options?: FocusRingOptions, theme?: any): CSSObject;
+export declare function focusRing(options?: FocusRingOptions, theme?: any): CSSObjectWithVars;
 export {};
 //# sourceMappingURL=focusRing.d.ts.map

package/dist/es6/common/lib/styles/focusRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA2CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,SAAS,CAqBhF"}
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAGtE,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA2CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,iBAAiB,CAqBxF"}

package/dist/es6/common/lib/styles/focusRing.js

@@ -42,14 +42,14 @@ function calculateFocusRing({ width, separation, inset, innerColor, outerColor,
  * @param innerShadowColor Allows the user to specify the inner shadow color
  * @param outerShadowColor Allows the user to specify the outer shadow color
  *
- * @returns {CSSObject} the css object for the focus ring style
+ * @returns {CSSObjectWithVars} the css object for the focus ring style
  */
 /**
  * A utility to create a canvas style focus ring around your widget.
  * By default, this mixin will create a 2px focus ring tightly wrapped
  * to the container (no whitespace).
  *
- * @returns {CSSObject} the css object for the focus ring style
+ * @returns {CSSObjectWithVars} the css object for the focus ring style
  */
 export function focusRing(options = {}, theme) {
     const { width = 2, separation = 0, animate = true, 

package/dist/es6/expandable/lib/Expandable.js

@@ -10,7 +10,7 @@ import { useExpandableModel } from './hooks/useExpandableModel';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const expandableContainerStencil = createStencil({
-    base: { name: "1pukg0", styles: "box-sizing:border-box;display:flex;flex-direction:column;padding:var(--cnvs-sys-space-x2);" }
+    base: { name: "qjkao", styles: "box-sizing:border-box;display:flex;flex-direction:column;padding:var(--cnvs-sys-space-x2);" }
 }, "expandable-container-f664d5");
 /**
  * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a

package/dist/es6/expandable/lib/ExpandableAvatar.js

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const expandableAvatarStencil = createStencil({
     extends: avatarStencil,
-    base: { name: "2tc2ut", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x2);flex-shrink:0;" }
+    base: { name: "2b7xo5", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x2);flex-shrink:0;" }
 }, "expandable-avatar-d56832");
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`

package/dist/es6/expandable/lib/ExpandableContent.js

@@ -6,7 +6,7 @@ import { useExpandableModel } from './hooks/useExpandableModel';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const expandableContentStencil = createStencil({
-    base: { name: "38b4h1", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);" }
+    base: { name: "2zr9sk", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);" }
 }, "expandable-content-25e157");
 export const ExpandableContent = createSubcomponent('div')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableIcon.js

@@ -9,34 +9,34 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 export const expandableIconStencil = createStencil({
     extends: systemIconStencil,
-    base: { name: "1e1nd3", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
+    base: { name: "2ge403", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
     modifiers: {
         isExpanded: {
-            true: { name: "3ojo5x", styles: "" },
-            false: { name: "2qoqei", styles: "" }
+            true: { name: "2oudey", styles: "" },
+            false: { name: "3gxu4d", styles: "" }
         },
         position: {
-            start: { name: "1p6669", styles: "" },
-            end: { name: "15eiic", styles: "" },
-            only: { name: "1rw8zf", styles: "" }
+            start: { name: "27587i", styles: "" },
+            end: { name: "339kb7", styles: "" },
+            only: { name: "7hs9s", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { position: 'end', isExpanded: false },
-            styles: { name: "2r5ndj", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-space-x3);" }
+            styles: { name: "41521a", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { position: 'end', isExpanded: true },
-            styles: { name: "2fnyyr", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-space-x3);" }
+            styles: { name: "2awvw1", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { position: 'start', isExpanded: false },
-            styles: { name: "1kl9u9", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
+            styles: { name: "3ufcq3", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
         },
         {
             modifiers: { position: 'start', isExpanded: true },
-            styles: { name: "s2o34", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(180deg);" }
+            styles: { name: "2jd769", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(180deg);" }
         }
     ]
 }, "expandable-icon-a75423");

package/dist/es6/expandable/lib/ExpandableTarget.js

@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
 import { useExpandableTarget } from './hooks/useExpandableTarget';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableTargetStencil = createStencil({
-    base: { name: "3ug3kb", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);border-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border-width:0;display:flex;align-items:flex-start;flex-direction:row;justify-content:start;padding:var(--cnvs-sys-space-x2);cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}" }
+    base: { name: "uxhjz", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);border-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border-width:0;display:flex;align-items:flex-start;flex-direction:row;justify-content:start;padding:var(--cnvs-sys-space-x2);cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}" }
 }, "expandable-target-23cf82");
 export const ExpandableTarget = createSubcomponent('button')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableTitle.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 export const expandableTitleStencil = createStencil({
-    base: { name: "2a9nbd", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-strong);padding:0.125rem var(--cnvs-sys-space-zero);text-align:left;" }
+    base: { name: "gn95t", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-strong);padding:0.125rem var(--cnvs-sys-space-zero);text-align:left;" }
 }, "expandable-title-afdcf8");
 export const ExpandableTitle = createComponent('div')({
     displayName: 'Expandable.Title',

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

@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
  * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
  */
 export const formFieldContainerStencil = createStencil({
-    base: { name: "27xuk", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "2e6tla", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
 }, "form-field-container-6a4115");
 /**
  * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.

package/dist/es6/form-field/lib/FormFieldField.js

@@ -4,7 +4,7 @@ import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
 import { useFormFieldModel } from './hooks';
 import { system } from '@workday/canvas-tokens-web';
 export const formFieldFieldStencil = createStencil({
-    base: { name: "h86tq", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "196he5", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
 }, "form-field-field-a35e82");
 export const FormFieldField = createSubcomponent('div')({
     displayName: 'FormField.Field',

package/dist/es6/form-field/lib/FormFieldGroupLabel.js

@@ -7,15 +7,15 @@ import { brand, system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 export const formFieldGroupLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "2n704y", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "3rnfi9", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "3wwlmb", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
+            true: { name: "3lk0ln", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
         },
         orientation: {
-            vertical: { name: "3pszdg", styles: "width:100%;" },
-            horizontalStart: { name: "4cy437", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "3kemr3", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
+            vertical: { name: "44m0kh", styles: "width:100%;" },
+            horizontalStart: { name: "24mtno", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "12ov27", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

package/dist/es6/form-field/lib/FormFieldGroupList.js

@@ -4,11 +4,11 @@ import { createStencil, calc, px2rem, handleCsProp } from '@workday/canvas-kit-s
 import { brand, system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 const formFieldGroupListStencil = createStencil({
-    base: { name: "9k0ic", styles: "box-sizing:border-box;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:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "1mozqx", styles: "box-sizing:border-box;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:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "egh3l", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "15zdjw", 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);" }
+            error: { name: "3ejzyh", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "1ny2jo", 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);" }
         }
     }
 }, "form-field-group-list-9f0751");

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

@@ -7,11 +7,11 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
 export const formFieldHintStencil = createStencil({
     extends: textStencil,
-    base: { name: "35d2sd", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    base: { name: "w9rwo", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
     modifiers: {
         error: {
-            error: { name: "3f5l1a", styles: "color:var(--cnvs-brand-error-base);" },
-            alert: { name: "420vay", styles: "" }
+            error: { name: "1a7dcj", styles: "color:var(--cnvs-brand-error-base);" },
+            alert: { name: "kd54i", styles: "" }
         }
     },
     defaultModifiers: {

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

@@ -7,18 +7,18 @@ import { brand, system } from '@workday/canvas-tokens-web';
 import { useFormFieldLabel, useFormFieldModel } from './hooks';
 export const formFieldLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "3zcj8b", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "2o1qdt", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "3x81vi", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
+            true: { name: "3vzsk0", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
         },
         orientation: {
-            horizontalStart: { name: "x8nhj", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "1n1fy6", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
-            vertical: { name: "3k9y56", styles: "width:100%;" }
+            horizontalStart: { name: "idhd0", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "2i0ar1", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
+            vertical: { name: "kuvd5", styles: "width:100%;" }
         },
         isHidden: {
-            true: { name: "44zfdy", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
+            true: { name: "29pl1m", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
         }
     },
     defaultModifiers: {

package/dist/es6/form-field/lib/formFieldStencil.js

@@ -1,22 +1,22 @@
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const formFieldStencil = createStencil({
-    base: { name: "1ftd6n", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
+    base: { name: "11g3c", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
     modifiers: {
         grow: {
-            true: { name: "ryy4o", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "28ow8d", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "43q8wj", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            horizontalEnd: { name: "3ikwbq", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            vertical: { name: "2ilurz", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+            horizontalStart: { name: "3ebuwx", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            horizontalEnd: { name: "294ifv", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            vertical: { name: "33a9wn", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
         },
         required: {
-            true: { name: "46v8jg", styles: "" }
+            true: { name: "zmq8a", styles: "" }
         },
         error: {
-            error: { name: "1mmuxv", styles: "" },
-            alert: { name: "16uw6x", styles: "" }
+            error: { name: "2jwklu", styles: "" },
+            alert: { name: "2uuusi", styles: "" }
         }
     },
     defaultModifiers: {

package/dist/es6/icon/lib/AccentIcon.js

@@ -21,10 +21,10 @@ export const accentIconStencil = createStencil({
     vars: {
         color: '',
     },
-    base: { name: "3xlvd5", styles: "box-sizing:border-box;--size-svg-728c60:3.5rem;& .color-500{fill:var(--color-accent-icon-5d368a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
+    base: { name: "1aydlg", styles: "box-sizing:border-box;--size-svg-728c60:3.5rem;& .color-500{fill:var(--color-accent-icon-5d368a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
     modifiers: {
         transparent: {
-            true: { name: "317zq", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "3kzgz0", styles: "& .french-vanilla-100{fill:transparent;}" }
         }
     }
 }, "accent-icon-5d368a");

package/dist/es6/icon/lib/AppletIcon.js

@@ -51,7 +51,7 @@ export const appletIconStencil = createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "2k8urk", styles: "box-sizing:border-box;--size-svg-728c60:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-400));}" }
+    base: { name: "1ugtbi", styles: "box-sizing:border-box;--size-svg-728c60:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-1f1db3, var(--cnvs-base-palette-blueberry-400));}" }
 }, "applet-icon-1f1db3");
 export const AppletIcon = createComponent('span')({
     displayName: 'AppletIcon',

package/dist/es6/icon/lib/Graphic.js

@@ -38,10 +38,10 @@ export const graphicStyles = ({ width, height, grow }) => {
  */
 export const graphicStencil = createStencil({
     extends: svgStencil,
-    base: { name: "1wlld1", styles: "box-sizing:border-box;" },
+    base: { name: "3gfrhx", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "1wxac2", styles: "width:100%;--width-svg-728c60:100%;" }
+            true: { name: "3kdhlg", styles: "width:100%;--width-svg-728c60:100%;" }
         }
     }
 }, "graphic-385fe4");
@@ -50,10 +50,10 @@ export const graphicImageStencil = createStencil({
         width: '',
         height: '',
     },
-    base: { name: "3t4a61", styles: "box-sizing:border-box;width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);display:inline-block;& [data-part=\"graphic-img\"]{width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);max-width:100%;max-height:100%;}" },
+    base: { name: "1uoymm", styles: "box-sizing:border-box;width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);display:inline-block;& [data-part=\"graphic-img\"]{width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);max-width:100%;max-height:100%;}" },
     modifiers: {
         grow: {
-            true: { name: "oe465", styles: "width:100%;& [data-part=\"graphic-img\"]{width:100%;}" }
+            true: { name: "i46rf", styles: "width:100%;& [data-part=\"graphic-img\"]{width:100%;}" }
         }
     }
 }, "graphic-image-8fedc2");

package/dist/es6/icon/lib/Svg.js

@@ -13,10 +13,10 @@ export const svgStencil = createStencil({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "951t2", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-728c60, var(--size-svg-728c60));height:var(--height-svg-728c60, var(--size-svg-728c60));}" },
+    base: { name: "1fcj0o", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-728c60, var(--size-svg-728c60));height:var(--height-svg-728c60, var(--size-svg-728c60));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "1xuhdb", styles: "transform:scaleX(-1);" }
+            true: { name: "134xu9", styles: "transform:scaleX(-1);" }
         }
     }
 }, "svg-728c60");

package/dist/es6/icon/lib/SystemIcon.js

@@ -55,7 +55,7 @@ export const systemIconStencil = createStencil({
         accentColor: '',
         backgroundColor: '',
     },
-    base: { name: "3x7ef0", styles: "box-sizing:border-box;& svg{width:var(--width-svg-728c60, var(--size-svg-728c60, var(--cnvs-sys-space-x6)));height:var(--height-svg-728c60, var(--size-svg-728c60, var(--cnvs-sys-space-x6)));}& .wd-icon-fill{fill:var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-99ce3e, var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-99ce3e, transparent);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-35ac14, var(--colorHover-35ac14, var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-35ac14, var(--colorHover-35ac14, var(--accentColor-system-icon-99ce3e, var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-35ac14, var(--backgroundColor-system-icon-99ce3e, transparent));}@media (prefers-contrast: more){.wd-icon-fill, .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
+    base: { name: "33ju2m", styles: "box-sizing:border-box;& svg{width:var(--width-svg-728c60, var(--size-svg-728c60, var(--cnvs-sys-space-x6)));height:var(--height-svg-728c60, var(--size-svg-728c60, var(--cnvs-sys-space-x6)));}& .wd-icon-fill{fill:var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-99ce3e, var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-99ce3e, transparent);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-35ac14, var(--colorHover-35ac14, var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-35ac14, var(--colorHover-35ac14, var(--accentColor-system-icon-99ce3e, var(--color-system-icon-99ce3e, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-35ac14, var(--backgroundColor-system-icon-99ce3e, transparent));}@media (prefers-contrast: more){.wd-icon-fill, .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
     modifiers: {}
 }, "system-icon-99ce3e");
 export const SystemIcon = createComponent('span')({

package/dist/es6/icon/lib/SystemIconCircle.js

@@ -21,7 +21,7 @@ export const systemIconCircleStencil = createStencil({
         background: '',
         color: '',
     },
-    base: { name: "18x6iz", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-95f716, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10));--size-svg-728c60:calc(var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-99ce3e:var(--color-system-icon-circle-95f716);& img{width:100%;height:100%;}" }
+    base: { name: "46z3ij", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-95f716, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10));--size-svg-728c60:calc(var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-99ce3e:var(--color-system-icon-circle-95f716);& img{width:100%;height:100%;}" }
 }, "system-icon-circle-95f716");
 export const SystemIconCircle = createComponent('span')({
     displayName: 'SystemIconCircle',

package/dist/es6/index.d.ts

@@ -37,5 +37,5 @@ export * from './text-input';
 export * from './toast';
 export * from './tokens';
 export * from './tooltip';
-export { version } from './version';
+export * from './version';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}

package/dist/es6/index.js

@@ -37,4 +37,4 @@ export * from './text-input';
 export * from './toast';
 export * from './tokens';
 export * from './tooltip';
-export { version } from './version';
+export * from './version';