@workday/canvas-kit-preview-react 14.0.0-alpha.1144-next.0 → 14.0.0-alpha.1146-next.0

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -22,100 +22,85 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = void 0;
+exports.ColorPicker = exports.colorPickerStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 const button_1 = require("@workday/canvas-kit-react/button");
 const React = __importStar(require("react"));
 const form_field_1 = require("@workday/canvas-kit-react/form-field");
-const styled_1 = __importDefault(require("@emotion/styled"));
 const ColorReset_1 = require("./parts/ColorReset");
 const SwatchBook_1 = require("./parts/SwatchBook");
-const defaultColorSet = [
-    tokens_1.colors.blueberry600,
-    tokens_1.colors.grapeSoda600,
-    tokens_1.colors.pomegranate600,
-    tokens_1.colors.cinnamon600,
-    tokens_1.colors.cantaloupe600,
-    tokens_1.colors.sourLemon600,
-    tokens_1.colors.greenApple600,
-    tokens_1.colors.jewel600,
-    tokens_1.colors.blueberry500,
-    tokens_1.colors.grapeSoda500,
-    tokens_1.colors.pomegranate500,
-    tokens_1.colors.cinnamon500,
-    tokens_1.colors.cantaloupe500,
-    tokens_1.colors.sourLemon500,
-    tokens_1.colors.greenApple500,
-    tokens_1.colors.jewel500,
-    tokens_1.colors.blueberry400,
-    tokens_1.colors.grapeSoda400,
-    tokens_1.colors.pomegranate400,
-    tokens_1.colors.cinnamon400,
-    tokens_1.colors.cantaloupe400,
-    tokens_1.colors.sourLemon400,
-    tokens_1.colors.greenApple400,
-    tokens_1.colors.jewel400,
-    tokens_1.colors.blueberry300,
-    tokens_1.colors.grapeSoda300,
-    tokens_1.colors.pomegranate300,
-    tokens_1.colors.cinnamon300,
-    tokens_1.colors.cantaloupe300,
-    tokens_1.colors.sourLemon300,
-    tokens_1.colors.greenApple300,
-    tokens_1.colors.jewel300,
-    tokens_1.colors.blueberry200,
-    tokens_1.colors.grapeSoda200,
-    tokens_1.colors.pomegranate200,
-    tokens_1.colors.cinnamon200,
-    tokens_1.colors.cantaloupe200,
-    tokens_1.colors.sourLemon200,
-    tokens_1.colors.greenApple200,
-    tokens_1.colors.jewel200,
-    tokens_1.colors.blueberry100,
-    tokens_1.colors.grapeSoda100,
-    tokens_1.colors.pomegranate100,
-    tokens_1.colors.cinnamon100,
-    tokens_1.colors.cantaloupe100,
-    tokens_1.colors.sourLemon100,
-    tokens_1.colors.greenApple100,
-    tokens_1.colors.jewel100,
-    tokens_1.colors.blackPepper600,
-    tokens_1.colors.blackPepper400,
-    tokens_1.colors.blackPepper300,
-    tokens_1.colors.blackPepper100,
-    tokens_1.colors.frenchVanilla500,
-    tokens_1.colors.frenchVanilla400,
-    tokens_1.colors.frenchVanilla200,
-    tokens_1.colors.frenchVanilla100,
-];
-const ColorPickerContainer = (0, styled_1.default)('div')({
-    width: 216,
-});
-const ColorInputWrapper = (0, styled_1.default)('form')({
-    width: '100%',
-    marginTop: tokens_1.space.s,
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-});
-const ColorInputAndLabel = (0, styled_1.default)(form_field_1.FormField)({
-    display: 'flex',
-    flexDirection: 'column',
-    margin: 0,
-});
-const CheckButton = (0, styled_1.default)(button_1.SecondaryButton)({
-    alignSelf: 'flex-end',
-});
-const HexColorInput = (0, styled_1.default)(color_picker_1.ColorInput)({
-    width: '168px',
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const defaultColorSet = {
+    blueberry600: '#004387',
+    grapeSoda600: '#7c3882',
+    pomegranate600: '#99003a',
+    cinnamon600: '#a31b12',
+    cantaloupe600: '#c06c00',
+    sourLemon600: '#bd9100',
+    greenApple600: '#217a37',
+    jewel600: '#156973',
+    blueberry500: '#005cb9',
+    grapeSoda500: '#97499e',
+    pomegranate500: '#c70550',
+    cinnamon500: '#de2e21',
+    cantaloupe500: '#f38b00',
+    sourLemon500: '#ebb400',
+    greenApple500: '#319c4c',
+    jewel500: '#1a818c',
+    blueberry400: '#0875e1',
+    grapeSoda400: '#c860d1',
+    pomegranate400: '#f31167',
+    cinnamon400: '#ff5347',
+    cantaloupe400: '#ffa126',
+    sourLemon400: '#ffc629',
+    greenApple400: '#43c463',
+    jewel400: '#1ea4b3',
+    blueberry300: '#40a0ff',
+    grapeSoda300: '#de8ae6',
+    pomegranate300: '#ff5c9a',
+    cinnamon300: '#ff867d',
+    cantaloupe300: '#ffbc63',
+    sourLemon300: '#ffda61',
+    greenApple300: '#5fe380',
+    jewel300: '#44c8d7',
+    blueberry200: '#a6d2ff',
+    grapeSoda200: '#fac0ff',
+    pomegranate200: '#ffbdd6',
+    cinnamon200: '#fcc9c5',
+    cantaloupe200: '#fcd49f',
+    sourLemon200: '#ffecab',
+    greenApple200: '#acf5be',
+    jewel200: '#acecf3',
+    blueberry100: '#d7eafc',
+    grapeSoda100: '#feebff',
+    pomegranate100: '#ffebf3',
+    cinnamon100: '#ffefee',
+    cantaloupe100: '#ffeed9',
+    sourLemon100: '#fff9e6',
+    greenApple100: '#ebfff0',
+    jewel100: '#ebfdff',
+    blackPepper600: '#000000',
+    blackPepper400: '#333333',
+    blackPepper300: '#494949',
+    blackPepper100: '#787878',
+    frenchVanilla500: '#a6a6a6',
+    frenchVanilla400: '#bdbdbd',
+    frenchVanilla200: '#ebebeb',
+    frenchVanilla100: '#ffffff',
+};
+exports.colorPickerStencil = (0, canvas_kit_styling_1.createStencil)({
+    parts: {
+        button: 'color-picker-button',
+        form: 'color-picker-form',
+        hexInput: 'color-picker-hex-input',
+        inputWrapper: 'color-picker-input-wrapper',
+    },
+    base: { name: "s56q4", styles: "box-sizing:border-box;width:13.5rem;[data-part=\"color-picker-form\"]{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-block-start:var(--cnvs-sys-space-x4);}[data-part=\"color-picker-input-wrapper\"]{display:flex;flex-direction:column;margin:var(--cnvs-sys-space-zero);}[data-part=\"color-picker-button\"]{align-self:flex-end;}[data-part=\"color-picker-hex-input\"]{width:10.5rem;}" }
+}, "color-picker-c9dd1d");
 const isCustomColor = (colors, hexCode) => {
     if (!hexCode) {
         return false;
@@ -130,7 +115,7 @@ const isCustomColor = (colors, hexCode) => {
         }
     });
 };
-const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
+const ColorPicker = ({ colorSet = Object.values(defaultColorSet), customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
     const [validHexValue, setValidHexValue] = React.useState('');
     const [disabled, setDisabled] = React.useState(true);
     const [customHexValue, setCustomHexValue] = React.useState(isCustomColor(colorSet, value) ? value : '');
@@ -150,7 +135,7 @@ const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom
         onColorChange(validHexValue);
         event.preventDefault(); // don't submit the form - default action is to reload the page
     };
-    return ((0, jsx_runtime_1.jsxs)(ColorPickerContainer, { ...elemProps, children: [onColorReset && resetColor && ((0, jsx_runtime_1.jsx)(ColorReset_1.ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })), (0, jsx_runtime_1.jsx)(SwatchBook_1.SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }), showCustomHexInput && ((0, jsx_runtime_1.jsxs)(ColorInputWrapper, { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsxs)(ColorInputAndLabel, { children: [(0, jsx_runtime_1.jsx)(form_field_1.FormField.Label, { children: customHexInputLabel }), (0, jsx_runtime_1.jsx)(form_field_1.FormField.Input, { as: HexColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })] }), (0, jsx_runtime_1.jsx)(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon, type: "submit", disabled: disabled })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.colorPickerStencil)()), children: [onColorReset && resetColor && ((0, jsx_runtime_1.jsx)(ColorReset_1.ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })), (0, jsx_runtime_1.jsx)(SwatchBook_1.SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }), showCustomHexInput && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, ...exports.colorPickerStencil.parts.form, children: [(0, jsx_runtime_1.jsxs)(form_field_1.FormField, { ...exports.colorPickerStencil.parts.inputWrapper, children: [(0, jsx_runtime_1.jsx)(form_field_1.FormField.Label, { children: customHexInputLabel }), (0, jsx_runtime_1.jsx)(form_field_1.FormField.Input, { as: color_picker_1.ColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue, ...exports.colorPickerStencil.parts.hexInput })] }), (0, jsx_runtime_1.jsx)(button_1.SecondaryButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon, type: "submit", disabled: disabled, ...exports.colorPickerStencil.parts.button })] }))] }));
 };
 exports.ColorPicker = ColorPicker;
 exports.ColorPicker.defaultColorSet = defaultColorSet;

package/dist/commonjs/color-picker/lib/parts/ColorReset.d.ts

@@ -3,5 +3,10 @@ export interface ResetButtonProps {
     resetColor: string;
     onClick: (color: string) => void;
 }
+export declare const resetButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    readonly label: "reset-button-label";
+}, {}, never>, {
+    readonly label: "reset-button-label";
+}, {}, never, never>;
 export declare const ResetButton: ({ onClick, resetColor, label }: ResetButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ColorReset.d.ts.map

package/dist/commonjs/color-picker/lib/parts/ColorReset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAoCD,eAAO,MAAM,WAAW,mCAAkC,gBAAgB,4CASzE,CAAC"}
+{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,kBAAkB;;;;oBAkC7B,CAAC;AAEH,eAAO,MAAM,WAAW,mCAAkC,gBAAgB,4CAWzE,CAAC"}

package/dist/commonjs/color-picker/lib/parts/ColorReset.js

@@ -1,45 +1,20 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResetButton = void 0;
+exports.ResetButton = exports.resetButtonStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
-const Label = (0, styled_1.default)('div')({
-    marginLeft: tokens_1.space.xxs,
-});
-const Container = (0, styled_1.default)('button')({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    width: `calc(100% + ${tokens_1.space.l})`,
-    height: tokens_1.space.l,
-    margin: `-${tokens_1.space.xxs} -${tokens_1.space.s} ${tokens_1.space.xxs}`,
-    padding: `0px ${tokens_1.space.s}`,
-    ...tokens_1.type.levels.subtext.medium,
-    whiteSpace: 'nowrap',
-    border: 'none',
-    outline: 'none',
-    background: 'none',
-    cursor: 'pointer',
-    transition: 'color 120ms ease, background-color 120ms ease',
-    '&:hover': {
-        backgroundColor: tokens_1.colors.soap300,
-    },
-    '&:active': {
-        backgroundColor: tokens_1.colors.soap400,
-    },
-    '&:focus': {
-        ...(0, common_1.focusRing)(),
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const text_1 = require("@workday/canvas-kit-react/text");
+exports.resetButtonStencil = (0, canvas_kit_styling_1.createStencil)({
+    parts: {
+        label: 'reset-button-label',
     },
-    ...common_1.hideMouseFocus,
-});
+    base: { name: "s56q2", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-space-x8));height:var(--cnvs-sys-space-x8);margin:calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x4) * -1) var(--cnvs-sys-space-x2);padding:0 var(--cnvs-sys-space-x4);white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-bg-alt-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-left:var(--cnvs-sys-space-x2);}" }
+}, "reset-button-af92a8");
 const ResetButton = ({ onClick, resetColor, label }) => {
     const handleResetColor = () => onClick(resetColor);
-    return ((0, jsx_runtime_1.jsxs)(Container, { onClick: handleResetColor, children: [(0, jsx_runtime_1.jsx)(color_picker_1.ColorSwatch, { color: resetColor }), (0, jsx_runtime_1.jsx)(Label, { children: label })] }));
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: handleResetColor, ...(0, canvas_kit_styling_1.handleCsProp)({}, (0, exports.resetButtonStencil)()), children: [(0, jsx_runtime_1.jsx)(color_picker_1.ColorSwatch, { color: resetColor, "data-color": "" }), (0, jsx_runtime_1.jsx)(text_1.Subtext, { size: "medium", as: "div", ...exports.resetButtonStencil.parts.label, children: label })] }));
 };
 exports.ResetButton = ResetButton;

package/dist/commonjs/color-picker/lib/parts/SwatchBook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,4CA6BpE,CAAC"}
+{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAiDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,4CA6BpE,CAAC"}

package/dist/commonjs/color-picker/lib/parts/SwatchBook.js

@@ -1,58 +1,28 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwatchBook = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
-const accessibilityBorder = `${tokens_1.colors.frenchVanilla100} 0px 0px 0px 2px, ${tokens_1.colors.licorice200} 0px 0px 0px 3px`;
-const SwatchContainer = (0, styled_1.default)('div')({
-    display: 'flex',
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    borderRadius: tokens_1.borderRadius.s,
-    transition: 'box-shadow 120ms ease',
-    margin: `0px ${tokens_1.space.xxs} ${tokens_1.space.xxs} 0px`,
-    '&:hover': {
-        boxShadow: accessibilityBorder,
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const colorPickerSwatchBookStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        shadow: `${canvas_tokens_web_1.system.color.border.inverse} 0 0 0 ${(0, canvas_kit_styling_1.px2rem)(2)}, ${canvas_tokens_web_1.system.color.border.input.default} 0 0 0 ${(0, canvas_kit_styling_1.px2rem)(3)}`,
     },
-    '&:focus': {
-        outline: 'none',
-        ...(0, common_1.focusRing)({ separation: 2 }),
+    parts: {
+        tile: 'color-picker-swatch-book-tile',
     },
-}, ({ isSelected }) => ({
-    boxShadow: isSelected ? accessibilityBorder : undefined,
-    ...(0, common_1.mouseFocusBehavior)({
-        '&:focus': {
-            animation: 'none',
-            boxShadow: 'none',
-        },
-        '&:hover': {
-            boxShadow: accessibilityBorder,
-        },
-        '&': {
-            boxShadow: isSelected ? accessibilityBorder : undefined,
-        },
-    }),
-}));
-const Container = (0, styled_1.default)('div')({
-    display: 'flex',
-    flexWrap: 'wrap',
-    margin: `0px -${tokens_1.space.xxs} -${tokens_1.space.xxs} 0px`,
-});
+    base: { name: "s56q3", styles: "--shadow-color-picker-swatch-book-a4010d:var(--cnvs-sys-color-border-inverse) 0 0 0 0.125rem, var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;box-sizing:border-box;display:flex;flex-wrap:wrap;margin:0 calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x2) * -1) 0;[data-part=\"color-picker-swatch-book-tile\"]{display:flex;width:1.25rem;height:1.25rem;cursor:pointer;border-radius:var(--cnvs-sys-shape-half);transition:box-shadow 120ms ease;margin:0px var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) 0px;&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}&:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&[aria-selected=\"true\"]{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);&:focus-visible{animation:none;box-shadow:none;}&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}}}" }
+}, "color-picker-swatch-book-a4010d");
 const SwatchBook = ({ colors, value, onSelect }) => {
-    return ((0, jsx_runtime_1.jsx)(Container, { children: colors.map((color, index) => {
-            const hexCode = typeof color === 'object' ? color.value : color;
-            const label = typeof color === 'object' ? color.label : color;
+    return ((0, jsx_runtime_1.jsx)("div", { ...colorPickerSwatchBookStencil(), children: colors.map((color, index) => {
+            const hexCode = typeof color === 'object' ? color.value : color.toLowerCase();
+            const label = typeof color === 'object' ? color.label : color.toLowerCase();
             const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
             const handleClick = () => onSelect(hexCode);
             const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
-            return ((0, jsx_runtime_1.jsx)(SwatchContainer, { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected, role: "button", "aria-label": label, "aria-selected": isSelected, children: (0, jsx_runtime_1.jsx)(color_picker_1.ColorSwatch, { color: hexCode, showCheck: isSelected }) }, index + '-' + color));
+            return ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": label, "aria-selected": isSelected, ...colorPickerSwatchBookStencil.parts.tile, children: (0, jsx_runtime_1.jsx)(color_picker_1.ColorSwatch, { color: hexCode, showCheck: isSelected }) }, index + '-' + color));
         }) }));
 };
 exports.SwatchBook = SwatchBook;

package/dist/commonjs/divider/lib/Divider.js

@@ -9,7 +9,7 @@ exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         space: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x4),
     },
-    base: { name: "rxxq2", styles: "--space-divider-a2c50d:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-a2c50d) / 2) 0;" }
+    base: { name: "s56q5", styles: "--space-divider-a2c50d:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-a2c50d) / 2) 0;" }
 }, "divider-a2c50d");
 /**
  * # Divider

package/dist/commonjs/information-highlight/lib/InformationHighlight.js

@@ -12,19 +12,19 @@ const Link_1 = require("./parts/Link");
 const useInformationHighlightModel_1 = require("./hooks/useInformationHighlightModel");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 exports.informationHighlightStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq5k", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;" },
+    base: { name: "s56q5n", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;" },
     modifiers: {
         informational: {
-            low: { name: "rxxq5l", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:none;}" },
-            high: { name: "rxxq5m", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-primary-softer);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);}" }
+            low: { name: "s56q5o", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:none;}" },
+            high: { name: "s56q5p", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-primary-softer);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);}" }
         },
         caution: {
-            low: { name: "rxxq5n", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:none;}" },
-            high: { name: "rxxq5o", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}" }
+            low: { name: "s56q5q", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:none;}" },
+            high: { name: "s56q5r", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}" }
         },
         critical: {
-            low: { name: "rxxq5p", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:none;}" },
-            high: { name: "rxxq5q", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-critical);}" }
+            low: { name: "s56q5s", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:none;}" },
+            high: { name: "s56q5t", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-critical);}" }
         }
     }
 }, "information-highlight-520f38");

package/dist/commonjs/information-highlight/lib/parts/Body.js

@@ -7,7 +7,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const text_1 = require("@workday/canvas-kit-react/text");
 const informationHighlightBodyStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq5i", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-block-end:var(--cnvs-sys-space-x2);" }
+    base: { name: "s56q5l", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-block-end:var(--cnvs-sys-space-x2);" }
 }, "information-highlight-body-0931ed");
 exports.Body = (0, common_1.createComponent)('div')({
     displayName: 'Body',

package/dist/commonjs/information-highlight/lib/parts/Heading.js

@@ -7,7 +7,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const text_1 = require("@workday/canvas-kit-react/text");
 const informationHighlightHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq5h", 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-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
+    base: { name: "s56q5k", 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-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
 }, "information-highlight-heading-1080eb");
 exports.InformationHighlightHeading = (0, common_1.createComponent)('h3')({
     displayName: 'Heading',

package/dist/commonjs/information-highlight/lib/parts/Link.js

@@ -7,7 +7,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const informationHighlightLinkStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq5j", 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-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);grid-column:2;justify-self:start;color:var(--cnvs-sys-color-text-strong);" }
+    base: { name: "s56q5m", 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-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);grid-column:2;justify-self:start;color:var(--cnvs-sys-color-text-strong);" }
 }, "information-highlight-link-aef704");
 exports.Link = (0, common_1.createComponent)('a')({
     displayName: 'Link',

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

@@ -14,7 +14,7 @@ const ANIMATION_DURATION_MS = 1230;
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "rxxq3", 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 LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "s56q6", 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);}" });
 /**
  * An individual loading sparkle. ✨
  */
@@ -22,7 +22,7 @@ const Sparkle = () => {
     return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { "data-part": "sparkle", icon: sparkleIcon_1.sparkleIcon, size: canvas_tokens_web_1.system.space.x3 });
 };
 exports.loadingSparklesStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq7", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-rxxq3;animation-timing-function:ease-in-out;--color-system-icon-3a4847:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
+    base: { name: "s56qa", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-s56q6;animation-timing-function:ease-in-out;--color-system-icon-3a4847:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
 }, "loading-sparkles-322f75");
 /**
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.

package/dist/commonjs/multi-select/lib/MultiSelectInput.js

@@ -14,11 +14,11 @@ const useMultiSelectModel_1 = require("./useMultiSelectModel");
 const MultiSelectedList_1 = require("./MultiSelectedList");
 exports.multiSelectInputStencil = (0, canvas_kit_styling_1.createStencil)({
     //@ts-ignore Types don't like defining a variable in `base` and using a variable in a nested selector. One or the other is fine, but not both.
-    base: { name: "rxxq5w", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-696c53:100%;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:calc(var(--cnvs-sys-space-x10) - 0.125rem);}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled){border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" },
+    base: { name: "s56q5z", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-696c53:100%;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:calc(var(--cnvs-sys-space-x10) - 0.125rem);}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled){border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" },
     modifiers: {
         error: {
-            error: { name: "rxxq5x", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-brand-error-base);}&:has(:focus-visible:not([disabled])), &.focus{box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
-            alert: { name: "rxxq5y", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
+            error: { name: "s56q60", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-brand-error-base);}&:has(:focus-visible:not([disabled])), &.focus{box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
+            alert: { name: "s56q61", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
         }
     }
 }, "multi-select-input-e00caf");

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

@@ -19,15 +19,15 @@ exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         maxWidth: '',
     },
-    base: { name: "rxxq24", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-84ca2f);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--borderColor-pill-count-d778e9:transparent;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-primary-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);border-color:var(--cnvs-sys-color-border-primary-default);--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-stronger);--borderColor-pill-count-d778e9:transparent;}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-input-disabled);--label-button-65cb05:var(--cnvs-sys-color-text-disabled);--opacity-button-65cb05:1;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-default);--borderColor-pill-count-d778e9:transparent;}" }
+    base: { name: "s56q27", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-84ca2f);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--borderColor-pill-count-d778e9:transparent;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-primary-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);border-color:var(--cnvs-sys-color-border-primary-default);--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-stronger);--borderColor-pill-count-d778e9:transparent;}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-input-disabled);--label-button-65cb05:var(--cnvs-sys-color-text-disabled);--opacity-button-65cb05:1;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-default);--borderColor-pill-count-d778e9:transparent;}" }
 }, "pill-84ca2f");
 exports.removeablePillStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: exports.pillStencil,
-    base: { name: "rxxq25", styles: "box-sizing:border-box;&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);box-shadow:none;}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}cursor:default;overflow:revert;position:relative;" }
+    base: { name: "s56q28", styles: "box-sizing:border-box;&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);box-shadow:none;}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}cursor:default;overflow:revert;position:relative;" }
 }, "removeable-pill-d32913");
 exports.readyOnlyPillStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: exports.pillStencil,
-    base: { name: "rxxq26", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);cursor:default;--background-button-65cb05:transparent;&:hover, &.hover{--background-button-65cb05:transparent;}&:focus-visible, &.focus{--background-button-65cb05:transparent;}&:active, &.active{--background-button-65cb05:transparent;}&:disabled, &.disabled{--background-button-65cb05:transparent;}" }
+    base: { name: "s56q29", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);cursor:default;--background-button-65cb05:transparent;&:hover, &.hover{--background-button-65cb05:transparent;}&:focus-visible, &.focus{--background-button-65cb05:transparent;}&:active, &.active{--background-button-65cb05:transparent;}&:disabled, &.disabled{--background-button-65cb05:transparent;}" }
 }, "ready-only-pill-3701de");
 /**
  * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"

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

@@ -9,7 +9,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.pillAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: avatar_1.avatarStencil,
-    base: { name: "rxxq1h", styles: "box-sizing:border-box;cursor:pointer;flex:0 0 auto;" }
+    base: { name: "s56q1k", styles: "box-sizing:border-box;cursor:pointer;flex:0 0 auto;" }
 }, "pill-avatar-348a6f");
 exports.PillAvatar = (0, common_1.createSubcomponent)('div')({
     modelHook: usePillModel_1.usePillModel,

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

@@ -11,7 +11,7 @@ exports.pillCountStencil = (0, canvas_kit_styling_1.createStencil)({
         backgroundColor: '',
         borderColor: '',
     },
-    base: { name: "rxxqw", styles: "box-sizing:border-box;border-start-start-radius:var(--cnvs-sys-shape-zero);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-zero);border-end-end-radius:var(--cnvs-sys-shape-x1);border-width:0.0625rem;border-inline-start-width:var(--cnvs-sys-space-zero);border-style:solid;border-color:var(--borderColor-pill-count-d778e9, var(--cnvs-sys-color-border-transparent));display:inline-flex;align-items:center;justify-content:center;height:1.375rem;width:var(--cnvs-sys-space-x6);padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);margin-inline-end:calc(var(--cnvs-sys-space-x2) * -1);margin-inline-start:var(--cnvs-sys-space-x1);background-color:var(--backgroundColor-pill-count-d778e9, var(--cnvs-sys-color-bg-alt-stronger));flex:0 0 auto;" }
+    base: { name: "s56qz", styles: "box-sizing:border-box;border-start-start-radius:var(--cnvs-sys-shape-zero);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-zero);border-end-end-radius:var(--cnvs-sys-shape-x1);border-width:0.0625rem;border-inline-start-width:var(--cnvs-sys-space-zero);border-style:solid;border-color:var(--borderColor-pill-count-d778e9, var(--cnvs-sys-color-border-transparent));display:inline-flex;align-items:center;justify-content:center;height:1.375rem;width:var(--cnvs-sys-space-x6);padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);margin-inline-end:calc(var(--cnvs-sys-space-x2) * -1);margin-inline-start:var(--cnvs-sys-space-x1);background-color:var(--backgroundColor-pill-count-d778e9, var(--cnvs-sys-color-bg-alt-stronger));flex:0 0 auto;" }
 }, "pill-count-d778e9");
 exports.PillCount = (0, common_1.createComponent)('span')({
     displayName: 'Pill.Count',

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

@@ -11,7 +11,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.pillIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: icon_1.systemIconStencil,
-    base: { name: "rxxq9", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-space-x1) * -1);--size-svg-728c60:1.25rem;flex:0 0 auto;" }
+    base: { name: "s56qc", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-space-x1) * -1);--size-svg-728c60:1.25rem;flex:0 0 auto;" }
 }, "pill-icon-4ef362");
 exports.PillIcon = (0, common_1.createSubcomponent)('span')({
     modelHook: usePillModel_1.usePillModel,

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

@@ -12,7 +12,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: button_1.buttonStencil,
-    base: { name: "rxxqv", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-728c60:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}" }
+    base: { name: "s56qy", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-728c60:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}" }
 }, "pill-icon-button-10e7a0");
 exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
     modelHook: usePillModel_1.usePillModel,

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

@@ -8,7 +8,7 @@ const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
 const usePillModel_1 = require("./usePillModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.pillLabelStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq1i", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
+    base: { name: "s56q1l", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
 }, "pill-label-412177");
 exports.PillLabel = (0, common_1.createSubcomponent)('span')({
     modelHook: usePillModel_1.usePillModel,

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

@@ -13,11 +13,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
  * Styles for RadioGroup
  */
 const radioGroupStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq2x", 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: "s56q30", 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: "rxxq2y", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "rxxq2z", 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: "s56q31", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "s56q32", 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-aea204");

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

@@ -14,7 +14,7 @@ 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 = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq2w", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
+    base: { name: "s56q2z", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
 }, "radio-label-0cca27");
 exports.RadioLabelContext = react_1.default.createContext({});
 exports.RadioLabel = (0, common_1.createSubcomponent)('label')({