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

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

@@ -1,92 +1,80 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { checkIcon } from '@workday/canvas-system-icons-web';
 import { ColorInput } from '@workday/canvas-kit-react/color-picker';
 import { SecondaryButton } from '@workday/canvas-kit-react/button';
 import * as React from 'react';
 import { FormField } from '@workday/canvas-kit-react/form-field';
-import styled from '@emotion/styled';
 import { ResetButton } from './parts/ColorReset';
 import { SwatchBook } from './parts/SwatchBook';
-const defaultColorSet = [
-    colors.blueberry600,
-    colors.grapeSoda600,
-    colors.pomegranate600,
-    colors.cinnamon600,
-    colors.cantaloupe600,
-    colors.sourLemon600,
-    colors.greenApple600,
-    colors.jewel600,
-    colors.blueberry500,
-    colors.grapeSoda500,
-    colors.pomegranate500,
-    colors.cinnamon500,
-    colors.cantaloupe500,
-    colors.sourLemon500,
-    colors.greenApple500,
-    colors.jewel500,
-    colors.blueberry400,
-    colors.grapeSoda400,
-    colors.pomegranate400,
-    colors.cinnamon400,
-    colors.cantaloupe400,
-    colors.sourLemon400,
-    colors.greenApple400,
-    colors.jewel400,
-    colors.blueberry300,
-    colors.grapeSoda300,
-    colors.pomegranate300,
-    colors.cinnamon300,
-    colors.cantaloupe300,
-    colors.sourLemon300,
-    colors.greenApple300,
-    colors.jewel300,
-    colors.blueberry200,
-    colors.grapeSoda200,
-    colors.pomegranate200,
-    colors.cinnamon200,
-    colors.cantaloupe200,
-    colors.sourLemon200,
-    colors.greenApple200,
-    colors.jewel200,
-    colors.blueberry100,
-    colors.grapeSoda100,
-    colors.pomegranate100,
-    colors.cinnamon100,
-    colors.cantaloupe100,
-    colors.sourLemon100,
-    colors.greenApple100,
-    colors.jewel100,
-    colors.blackPepper600,
-    colors.blackPepper400,
-    colors.blackPepper300,
-    colors.blackPepper100,
-    colors.frenchVanilla500,
-    colors.frenchVanilla400,
-    colors.frenchVanilla200,
-    colors.frenchVanilla100,
-];
-const ColorPickerContainer = styled('div')({
-    width: 216,
-});
-const ColorInputWrapper = styled('form')({
-    width: '100%',
-    marginTop: space.s,
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-});
-const ColorInputAndLabel = styled(FormField)({
-    display: 'flex',
-    flexDirection: 'column',
-    margin: 0,
-});
-const CheckButton = styled(SecondaryButton)({
-    alignSelf: 'flex-end',
-});
-const HexColorInput = styled(ColorInput)({
-    width: '168px',
-});
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@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',
+};
+export const colorPickerStencil = createStencil({
+    parts: {
+        button: 'color-picker-button',
+        form: 'color-picker-form',
+        hexInput: 'color-picker-hex-input',
+        inputWrapper: 'color-picker-input-wrapper',
+    },
+    base: { name: "b13k4", 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;
@@ -101,7 +89,7 @@ const isCustomColor = (colors, hexCode) => {
         }
     });
 };
-export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
+export 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 : '');
@@ -121,6 +109,6 @@ export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel =
         onColorChange(validHexValue);
         event.preventDefault(); // don't submit the form - default action is to reload the page
     };
-    return (_jsxs(ColorPickerContainer, { ...elemProps, children: [onColorReset && resetColor && (_jsx(ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })), _jsx(SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }), showCustomHexInput && (_jsxs(ColorInputWrapper, { onSubmit: onSubmit, children: [_jsxs(ColorInputAndLabel, { children: [_jsx(FormField.Label, { children: customHexInputLabel }), _jsx(FormField.Input, { as: HexColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })] }), _jsx(CheckButton, { "aria-label": submitLabel, icon: checkIcon, type: "submit", disabled: disabled })] }))] }));
+    return (_jsxs("div", { ...handleCsProp(elemProps, colorPickerStencil()), children: [onColorReset && resetColor && (_jsx(ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })), _jsx(SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }), showCustomHexInput && (_jsxs("form", { onSubmit: onSubmit, ...colorPickerStencil.parts.form, children: [_jsxs(FormField, { ...colorPickerStencil.parts.inputWrapper, children: [_jsx(FormField.Label, { children: customHexInputLabel }), _jsx(FormField.Input, { as: ColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue, ...colorPickerStencil.parts.hexInput })] }), _jsx(SecondaryButton, { "aria-label": submitLabel, icon: checkIcon, type: "submit", disabled: disabled, ...colorPickerStencil.parts.button })] }))] }));
 };
 ColorPicker.defaultColorSet = defaultColorSet;

package/dist/es6/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/es6/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/es6/color-picker/lib/parts/ColorReset.js

@@ -1,38 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { colors, space, type } from '@workday/canvas-kit-react/tokens';
-import { focusRing, hideMouseFocus } from '@workday/canvas-kit-react/common';
+import { calc, createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { ColorSwatch } from '@workday/canvas-kit-react/color-picker';
-const Label = styled('div')({
-    marginLeft: space.xxs,
-});
-const Container = styled('button')({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    width: `calc(100% + ${space.l})`,
-    height: space.l,
-    margin: `-${space.xxs} -${space.s} ${space.xxs}`,
-    padding: `0px ${space.s}`,
-    ...type.levels.subtext.medium,
-    whiteSpace: 'nowrap',
-    border: 'none',
-    outline: 'none',
-    background: 'none',
-    cursor: 'pointer',
-    transition: 'color 120ms ease, background-color 120ms ease',
-    '&:hover': {
-        backgroundColor: colors.soap300,
+import { focusRing } from '@workday/canvas-kit-react/common';
+import { system } from '@workday/canvas-tokens-web';
+import { Subtext } from '@workday/canvas-kit-react/text';
+export const resetButtonStencil = createStencil({
+    parts: {
+        label: 'reset-button-label',
     },
-    '&:active': {
-        backgroundColor: colors.soap400,
-    },
-    '&:focus': {
-        ...focusRing(),
-    },
-    ...hideMouseFocus,
-});
+    base: { name: "b13k2", 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");
 export const ResetButton = ({ onClick, resetColor, label }) => {
     const handleResetColor = () => onClick(resetColor);
-    return (_jsxs(Container, { onClick: handleResetColor, children: [_jsx(ColorSwatch, { color: resetColor }), _jsx(Label, { children: label })] }));
+    return (_jsxs("button", { onClick: handleResetColor, ...handleCsProp({}, resetButtonStencil()), children: [_jsx(ColorSwatch, { color: resetColor, "data-color": "" }), _jsx(Subtext, { size: "medium", as: "div", ...resetButtonStencil.parts.label, children: label })] }));
 };

package/dist/es6/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/es6/color-picker/lib/parts/SwatchBook.js

@@ -1,51 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
-import { focusRing, mouseFocusBehavior } from '@workday/canvas-kit-react/common';
+import { focusRing } from '@workday/canvas-kit-react/common';
 import { ColorSwatch } from '@workday/canvas-kit-react/color-picker';
-const accessibilityBorder = `${colors.frenchVanilla100} 0px 0px 0px 2px, ${colors.licorice200} 0px 0px 0px 3px`;
-const SwatchContainer = styled('div')({
-    display: 'flex',
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    borderRadius: borderRadius.s,
-    transition: 'box-shadow 120ms ease',
-    margin: `0px ${space.xxs} ${space.xxs} 0px`,
-    '&:hover': {
-        boxShadow: accessibilityBorder,
+import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const colorPickerSwatchBookStencil = createStencil({
+    vars: {
+        shadow: `${system.color.border.inverse} 0 0 0 ${px2rem(2)}, ${system.color.border.input.default} 0 0 0 ${px2rem(3)}`,
     },
-    '&:focus': {
-        outline: 'none',
-        ...focusRing({ separation: 2 }),
+    parts: {
+        tile: 'color-picker-swatch-book-tile',
     },
-}, ({ isSelected }) => ({
-    boxShadow: isSelected ? accessibilityBorder : undefined,
-    ...mouseFocusBehavior({
-        '&:focus': {
-            animation: 'none',
-            boxShadow: 'none',
-        },
-        '&:hover': {
-            boxShadow: accessibilityBorder,
-        },
-        '&': {
-            boxShadow: isSelected ? accessibilityBorder : undefined,
-        },
-    }),
-}));
-const Container = styled('div')({
-    display: 'flex',
-    flexWrap: 'wrap',
-    margin: `0px -${space.xxs} -${space.xxs} 0px`,
-});
+    base: { name: "b13k3", 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");
 export const SwatchBook = ({ colors, value, onSelect }) => {
-    return (_jsx(Container, { children: colors.map((color, index) => {
-            const hexCode = typeof color === 'object' ? color.value : color;
-            const label = typeof color === 'object' ? color.label : color;
+    return (_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 (_jsx(SwatchContainer, { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected, role: "button", "aria-label": label, "aria-selected": isSelected, children: _jsx(ColorSwatch, { color: hexCode, showCheck: isSelected }) }, index + '-' + color));
+            return (_jsx("div", { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": label, "aria-selected": isSelected, ...colorPickerSwatchBookStencil.parts.tile, children: _jsx(ColorSwatch, { color: hexCode, showCheck: isSelected }) }, index + '-' + color));
         }) }));
 };

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

@@ -6,7 +6,7 @@ export const dividerStencil = createStencil({
     vars: {
         space: cssVar(system.space.x4),
     },
-    base: { name: "lowb2", 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: "b13k5", 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/es6/information-highlight/lib/InformationHighlight.d.ts

@@ -12,7 +12,7 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
         };
         high: {
             borderInlineStart: string;
-            backgroundColor: "--cnvs-base-palette-blueberry-100";
+            backgroundColor: "--cnvs-sys-color-bg-primary-softer";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-bg-primary-default" | "--cnvs-sys-color-icon-inverse";
             };
@@ -28,7 +28,7 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
         };
         high: {
             borderInlineStart: string;
-            backgroundColor: "--cnvs-base-palette-sour-lemon-100";
+            backgroundColor: "--cnvs-sys-color-bg-caution-softest";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-fg-contrast-default";
             };
@@ -44,9 +44,9 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
         };
         high: {
             borderInlineStart: string;
-            backgroundColor: "--cnvs-base-palette-peach-100";
+            backgroundColor: "--cnvs-sys-color-bg-critical-softest";
             '& [data-part="information-highlight-icon"]': {
-                [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-bg-critical-default";
+                [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-bg-critical-default" | "--cnvs-sys-color-fg-critical";
             };
         };
     };

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { cssVar, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
+import { system } from '@workday/canvas-tokens-web';
 import { InformationHighlightHeading } from './parts/Heading';
 import { Body } from './parts/Body';
 import { Icon } from './parts/Icon';
@@ -9,22 +9,22 @@ import { Link } from './parts/Link';
 import { useInformationHighlightModel } from './hooks/useInformationHighlightModel';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 export const informationHighlightStencil = createStencil({
-    base: { name: "lowb5k", 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: "b13k5n", 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: "lowb5l", 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-99ce3e:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-99ce3e:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-99ce3e:none;}" },
-            high: { name: "lowb5m", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-base-palette-blueberry-100);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-sys-color-icon-inverse);--color-system-icon-99ce3e:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-99ce3e:var(--cnvs-sys-color-bg-primary-default);}" }
+            low: { name: "b13k5o", 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: "b13k5p", 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: "lowb5n", 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-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-99ce3e:none;}" },
-            high: { name: "lowb5o", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-base-palette-sour-lemon-100);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-sys-color-icon-inverse);--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);}" }
+            low: { name: "b13k5q", 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: "b13k5r", 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: "lowb5p", 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-99ce3e:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-99ce3e:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-99ce3e:none;}" },
-            high: { name: "lowb5q", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-base-palette-peach-100);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-sys-color-icon-inverse);--color-system-icon-99ce3e:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-99ce3e:var(--cnvs-sys-color-bg-critical-default);}" }
+            low: { name: "b13k5s", 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: "b13k5t", 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-8bd64c");
+}, "information-highlight-520f38");
 export const InformationHighlight = createContainer('section')({
     displayName: 'InformationHighlight',
     modelHook: useInformationHighlightModel,

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

@@ -4,7 +4,7 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { Text } from '@workday/canvas-kit-react/text';
 const informationHighlightBodyStencil = createStencil({
-    base: { name: "lowb5i", 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: "b13k5l", 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");
 export const Body = createComponent('div')({
     displayName: 'Body',

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

@@ -4,7 +4,7 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { Heading } from '@workday/canvas-kit-react/text';
 const informationHighlightHeadingStencil = createStencil({
-    base: { name: "lowb5h", 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: "b13k5k", 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");
 export const InformationHighlightHeading = createComponent('h3')({
     displayName: 'Heading',

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

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const informationHighlightLinkStencil = createStencil({
-    base: { name: "lowb5j", 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: "b13k5m", 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");
 export const Link = createComponent('a')({
     displayName: 'Link',

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { base, system } from '@workday/canvas-tokens-web';
+import { system } from '@workday/canvas-tokens-web';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp, keyframes, px2rem } from '@workday/canvas-kit-styling';
@@ -11,7 +11,7 @@ const ANIMATION_DURATION_MS = 1230;
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = keyframes({ name: "lowb3", 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 = keyframes({ name: "b13k6", 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. ✨
  */
@@ -19,8 +19,8 @@ const Sparkle = () => {
     return _jsx(SystemIcon, { "data-part": "sparkle", icon: sparkleIcon, size: system.space.x3 });
 };
 export const loadingSparklesStencil = createStencil({
-    base: { name: "lowb7", 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-lowb3;animation-timing-function:ease-in-out;--color-system-icon-99ce3e:var(--cnvs-base-extended-palette-dragon-fruit-400);&: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-cbd5a1");
+    base: { name: "b13ka", 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-b13k6;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/es6/multi-select/lib/MultiSelectInput.js

@@ -11,11 +11,11 @@ import { useMultiSelectModel } from './useMultiSelectModel';
 import { MultiSelectedList } from './MultiSelectedList';
 export const multiSelectInputStencil = 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: "lowb5w", 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: "b13k5z", 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: "lowb5x", 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: "lowb5y", 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: "b13k60", 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: "b13k61", 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/es6/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0EtB,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuBhC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAmB/B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA+CL,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2EtB,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuBhC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAmB/B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA+CL,CAAC"}

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

@@ -10,22 +10,22 @@ import { PillCount, pillCountStencil } from './PillCount';
 import { PillAvatar } from './PillAvatar';
 import { PillLabel } from './PillLabel';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
-import { base, system } from '@workday/canvas-tokens-web';
+import { system } from '@workday/canvas-tokens-web';
 export const pillStencil = createStencil({
     extends: buttonStencil,
     vars: {
         maxWidth: '',
     },
-    base: { name: "lowb24", 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-75789a);--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-99ce3e:var(--cnvs-sys-color-icon-default);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-99ce3e: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-99ce3e: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-99ce3e:var(--cnvs-sys-color-icon-strong);--backgroundColor-pill-count-d778e9:var(--cnvs-base-palette-soap-600);--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-99ce3e:var(--cnvs-sys-color-icon-soft);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-default);--borderColor-pill-count-d778e9:transparent;}" }
-}, "pill-75789a");
+    base: { name: "b13k27", 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");
 export const removeablePillStencil = createStencil({
     extends: pillStencil,
-    base: { name: "lowb25", 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-99ce3e:var(--cnvs-sys-color-icon-soft);}cursor:default;overflow:revert;position:relative;" }
-}, "removeable-pill-bb9137");
+    base: { name: "b13k28", 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");
 export const readyOnlyPillStencil = createStencil({
     extends: pillStencil,
-    base: { name: "lowb26", 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-bb7606");
+    base: { name: "b13k29", 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"
  * we mean that the Pill container is a focusable element (a `<button>`). All leading elements

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

@@ -6,7 +6,7 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const pillAvatarStencil = createStencil({
     extends: avatarStencil,
-    base: { name: "lowb1h", styles: "box-sizing:border-box;cursor:pointer;flex:0 0 auto;" }
+    base: { name: "b13k1k", styles: "box-sizing:border-box;cursor:pointer;flex:0 0 auto;" }
 }, "pill-avatar-348a6f");
 export const PillAvatar = createSubcomponent('div')({
     modelHook: usePillModel,

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

@@ -8,7 +8,7 @@ export const pillCountStencil = createStencil({
         backgroundColor: '',
         borderColor: '',
     },
-    base: { name: "lowbw", 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: "b13kz", 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");
 export const PillCount = createComponent('span')({
     displayName: 'Pill.Count',

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

@@ -8,7 +8,7 @@ import { system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const pillIconStencil = createStencil({
     extends: systemIconStencil,
-    base: { name: "lowb9", 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: "b13kc", 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");
 export const PillIcon = createSubcomponent('span')({
     modelHook: usePillModel,

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

@@ -9,7 +9,7 @@ import { system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const pillIconButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "lowbv", 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-99ce3e: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: "b13ky", 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");
 export const PillIconButton = createSubcomponent('button')({
     modelHook: usePillModel,