@workday/canvas-kit-react 12.1.0-937-next.0 → 12.1.0-945-next.0

package/dist/commonjs/collection/lib/useOverflowListModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListModel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useOverflowListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAExC,wBAAgB,YAAY,CAC1B,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,kBAAkB,EAAE,MAAM,EAC1B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACrC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAC7B,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,GACjB,MAAM,EAAE,CAmDV;AAED,eAAO,MAAM,oBAAoB;;;IAK7B;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;QA+BH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA0C0B,MAAM;;;;QAjDnC;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAwDiC,MAAM;gBAAU,MAAM;;;;QA/D1D;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAkEkC,MAAM;;;;QAzE3C;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA2EqB,MAAM;eAAS,MAAM;;;;QAlF7C;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA8EoB,MAAM;eAAS,MAAM;gBAAU,MAAM;;;;QArF5D;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAkGuB,MAAM;;;;QAzGhC;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAyHwB,MAAM;;;;QAhIjC;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4HqB,MAAM;;;;QAnI9B;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA+HwB,MAAM;;;;QAtIjC;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA0C0B,MAAM;;;;QAjDnC;;WAEG;;;QAGH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAwDiC,MAAM;gBAAU,MAAM;;;;QA/D1D;;WAEG;;;QAGH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"}

package/dist/commonjs/collection/lib/useOverflowListModel.js

@@ -7,44 +7,46 @@ exports.useOverflowListModel = exports.getHiddenIds = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const useSelectionListModel_1 = require("./useSelectionListModel");
-function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selectedIds, items) {
+function getHiddenIds(containerSize, containerGap, overflowTargetSize, itemSizeCache, selectedIds, items) {
     /** Allows us to prioritize showing the selected item */
     let selectedKey;
     /** Tally of combined item widths. We'll add items that fit until the container is full */
-    let itemWidth = 0;
+    let itemSize = 0;
     /** Tally ids that won't fit inside the container. These will be used by components to hide
      * elements that won't fit in the container */
     const hiddenIds = [];
+    /** Track if gap should be calculated since gap doesn't apply to the width of the first item, only
+     * consecutive items */
+    let shouldAddGap = false;
     if (selectedIds !== 'all' && selectedIds.length) {
-        if (items === null || items === void 0 ? void 0 : items.length) {
+        if (items.length) {
             // If selectedIds[0] is not in items, use the first id from items
             selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
         }
-        else {
-            selectedKey = selectedIds[0];
-        }
     }
-    if (Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth) {
+    if (Object.keys(itemSizeCache).reduce((sum, key, index) => sum + itemSizeCache[key] + (index > 0 ? containerGap : 0), 0) <= containerSize) {
         // All items fit, return empty array
         return [];
     }
     else if (selectedKey) {
-        if (itemWidthCache[selectedKey] + overflowTargetWidth > containerWidth) {
+        if (itemSizeCache[selectedKey] + overflowTargetSize > containerSize) {
             // If the selected item doesn't fit, only show overflow (all items hidden)
-            return Object.keys(itemWidthCache);
+            return Object.keys(itemSizeCache);
         }
         else {
             // at least the selected item and overflow target fit. Update our itemWidth with the sum
-            itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
+            itemSize += itemSizeCache[selectedKey] + overflowTargetSize;
+            shouldAddGap = true;
         }
     }
     else {
-        itemWidth += overflowTargetWidth;
+        itemSize += overflowTargetSize;
     }
-    for (const key in itemWidthCache) {
+    for (const key in itemSizeCache) {
         if (key !== selectedKey) {
-            itemWidth += itemWidthCache[key];
-            if (itemWidth > containerWidth) {
+            itemSize += itemSizeCache[key] + (shouldAddGap ? containerGap : 0);
+            shouldAddGap = true;
+            if (itemSize > containerSize) {
                 hiddenIds.push(key);
             }
         }
@@ -68,12 +70,13 @@ exports.useOverflowListModel = (0, common_1.createModelHook)({
 })(config => {
     const shouldCalculateOverflow = config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
     const [hiddenIds, setHiddenIds] = react_1.default.useState(config.initialHiddenIds);
-    const [itemWidthCache, setItemWidthCache] = react_1.default.useState({});
-    const [containerWidth, setContainerWidth] = react_1.default.useState(0);
-    const containerWidthRef = react_1.default.useRef(0);
-    const itemWidthCacheRef = react_1.default.useRef(itemWidthCache);
+    const [itemSizeCache, setItemSizeCache] = react_1.default.useState({});
+    const [containerSize, setContainerSize] = react_1.default.useState(0);
+    const [containerGap, setContainerGap] = react_1.default.useState(0);
+    const containerSizeRef = react_1.default.useRef(0);
+    const itemSizeCacheRef = react_1.default.useRef(itemSizeCache);
     const [overflowTargetWidth, setOverflowTargetWidth] = react_1.default.useState(0);
-    const overflowTargetWidthRef = react_1.default.useRef(0);
+    const overflowTargetSizeRef = react_1.default.useRef(0);
     const internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
     // Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
     // hidden ids as well
@@ -85,47 +88,91 @@ exports.useOverflowListModel = (0, common_1.createModelHook)({
     const state = {
         ...model.state,
         hiddenIds: internalHiddenIds,
-        itemWidthCache,
-        containerWidth,
+        itemSizeCache,
+        /**
+         * @deprecated Use `itemSizeCache` instead
+         */
+        itemWidthCache: itemSizeCache,
+        containerSize,
+        /**
+         * @deprecated Use `containerSize` instead
+         */
+        containerWidth: containerSize,
+        containerGap,
         overflowTargetWidth,
     };
     const events = {
         ...model.events,
         select(data) {
             const { selectedIds } = model.selection.select(data.id, state);
-            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, selectedIds, config.items);
+            const ids = getHiddenIds(containerSizeRef.current, containerGap, overflowTargetSizeRef.current, itemSizeCacheRef.current, selectedIds, config.items);
             model.events.select(data);
             setHiddenIds(ids);
         },
+        setContainerSize(data) {
+            containerSizeRef.current =
+                model.state.orientation === 'horizontal' ? data.width || 0 : data.height || 0;
+            setContainerSize(containerSizeRef.current);
+            const ids = getHiddenIds(containerSizeRef.current, containerGap, overflowTargetSizeRef.current, itemSizeCacheRef.current, state.selectedIds, config.items);
+            setHiddenIds(ids);
+        },
+        /**
+         * @deprecated Use `setContainerSize` instead and pass both `width` and `height`
+         */
         setContainerWidth(data) {
-            containerWidthRef.current = data.width || 0;
-            setContainerWidth(data.width || 0);
-            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds, config.items);
+            events.setContainerSize({ width: data.width, height: 0 });
+        },
+        setContainerGap(data) {
+            setContainerGap(data.size);
+            const ids = getHiddenIds(containerSizeRef.current, data.size, overflowTargetSizeRef.current, itemSizeCacheRef.current, state.selectedIds, config.items);
             setHiddenIds(ids);
         },
+        setOverflowTargetSize(data) {
+            overflowTargetSizeRef.current =
+                model.state.orientation === 'horizontal' ? data.width || 0 : data.height || 0;
+            setOverflowTargetWidth(overflowTargetSizeRef.current);
+        },
+        /**
+         *
+         * @deprecated `setOverflowTargetWidth` is deprecated. Please use `setOverflowTargetSize` and pass in the `width` and set `height` to `0`.
+         */
         setOverflowTargetWidth(data) {
-            overflowTargetWidthRef.current = data.width;
-            setOverflowTargetWidth(data.width);
+            overflowTargetSizeRef.current = data.width;
+            events.setOverflowTargetSize({ width: overflowTargetSizeRef.current, height: 0 });
         },
+        /**
+         *
+         * @deprecated `addItemWidth` is deprecated. Please use `addItemSize` and set the `width`
+         */
         addItemWidth(data) {
-            itemWidthCacheRef.current = {
-                ...itemWidthCacheRef.current,
-                [data.id]: data.width,
+            events.addItemSize({ id: data.id, width: data.width, height: 0 });
+        },
+        addItemSize(data) {
+            itemSizeCacheRef.current = {
+                ...itemSizeCacheRef.current,
+                [data.id]: model.state.orientation === 'horizontal' ? data.width : data.height,
             };
-            setItemWidthCache(itemWidthCacheRef.current);
-            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds, config.items);
+            setItemSizeCache(itemSizeCacheRef.current);
+            const ids = getHiddenIds(containerSizeRef.current, containerGap, overflowTargetSizeRef.current, itemSizeCacheRef.current, state.selectedIds, config.items);
             setHiddenIds(ids);
         },
-        removeItemWidth(data) {
-            const newCache = { ...itemWidthCacheRef.current };
+        removeItemSize(data) {
+            const newCache = { ...itemSizeCacheRef.current };
             delete newCache[data.id];
-            itemWidthCacheRef.current = newCache;
-            setItemWidthCache(itemWidthCacheRef.current);
-            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds !== 'all'
+            itemSizeCacheRef.current = newCache;
+            setItemSizeCache(itemSizeCacheRef.current);
+            const ids = getHiddenIds(containerSizeRef.current, containerGap, overflowTargetSizeRef.current, itemSizeCacheRef.current, state.selectedIds !== 'all'
                 ? state.selectedIds.filter(sId => data.id !== sId)
                 : state.selectedIds, config.items);
             setHiddenIds(ids);
         },
+        /**
+         *
+         * @deprecated `removeItemWidth` is deprecated. Please use `removeItemSize`.
+         */
+        removeItemWidth(data) {
+            events.removeItemSize({ id: data.id });
+        },
         addHiddenKey(data) {
             setHiddenIds(ids => ids.concat(data.id));
         },

package/dist/commonjs/collection/lib/useOverflowListTarget.d.ts

@@ -6,8 +6,11 @@ import React from 'react';
 export declare const useOverflowListTarget: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         hiddenIds: string[];
+        itemSizeCache: Record<string, number>;
         itemWidthCache: Record<string, number>;
+        containerSize: number;
         containerWidth: number;
+        containerGap: number;
         overflowTargetWidth: number;
         selectedIds: string[] | "all";
         unselectedIds: string[];
@@ -37,9 +40,20 @@ export declare const useOverflowListTarget: import("@workday/canvas-kit-react/co
         select(data: {
             id: string;
         }): void;
+        setContainerSize(data: {
+            width?: number | undefined;
+            height?: number | undefined;
+        }): void;
         setContainerWidth(data: {
             width?: number | undefined;
         }): void;
+        setContainerGap(data: {
+            size: number;
+        }): void;
+        setOverflowTargetSize(data: {
+            width: number;
+            height: number;
+        }): void;
         setOverflowTargetWidth(data: {
             width: number;
         }): void;
@@ -47,6 +61,14 @@ export declare const useOverflowListTarget: import("@workday/canvas-kit-react/co
             id: string;
             width: number;
         }): void;
+        addItemSize(data: {
+            id: string;
+            width: number;
+            height: number;
+        }): void;
+        removeItemSize(data: {
+            id: string;
+        }): void;
         removeItemWidth(data: {
             id: string;
         }): void;

package/dist/commonjs/collection/lib/useOverflowListTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListTarget.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BhC,CAAC"}
+{"version":3,"file":"useOverflowListTarget.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BhC,CAAC"}

package/dist/commonjs/collection/lib/useOverflowListTarget.js

@@ -24,10 +24,13 @@ exports.useOverflowListTarget = (0, common_1.createElemPropsHook)(useOverflowLis
         firstRender.current = false;
         if (localRef.current) {
             const styles = getComputedStyle(localRef.current);
-            model.events.setOverflowTargetWidth({
+            model.events.setOverflowTargetSize({
                 width: localRef.current.offsetWidth +
                     parseFloat(styles.marginLeft) +
                     parseFloat(styles.marginRight),
+                height: localRef.current.offsetWidth +
+                    parseFloat(styles.marginTop) +
+                    parseFloat(styles.marginBottom),
             });
         }
     });

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

@@ -24,7 +24,7 @@ exports.useComboboxMenuList = (0, common_1.createElemPropsHook)(menu_1.useMenuMo
     };
 });
 const comboboxMenuListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "iwv246", styles: "box-sizing:border-box;" },
+    base: { name: "q7cj46", styles: "box-sizing:border-box;" },
     extends: menu_1.menuListStencil
 }, "combobox-menu-list-04543a");
 exports.ComboboxMenuList = (0, common_1.createSubcomponent)('ul')({

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

@@ -43,7 +43,7 @@ exports.accessibleHide = {
     padding: 0,
     border: 0,
 };
-exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "iwv22", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" });
+exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "q7cj2", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" });
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
  */

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

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

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

@@ -13,7 +13,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
  * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
  */
 exports.formFieldContainerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "iwv24g", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "q7cj4g", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
 }, "form-field-container-b7ba71");
 /**
  * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.

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

@@ -10,7 +10,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.formFieldFieldStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "iwv24p", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "q7cj4p", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
 }, "form-field-field-fc001f");
 exports.FormFieldField = (0, common_1.createSubcomponent)('div')({
     displayName: 'FormField.Field',

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

@@ -14,15 +14,15 @@ const hooks_1 = require("./hooks");
 exports.formFieldGroupLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
     // @ts-ignore Still weird about CSS font variables
-    base: { name: "iwv24t", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "q7cj4t", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "iwv24u", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
+            true: { name: "q7cj4u", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
         },
         orientation: {
-            vertical: { name: "iwv24v", styles: "width:100%;" },
-            horizontalStart: { name: "iwv24w", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "iwv24x", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
+            vertical: { name: "q7cj4v", styles: "width:100%;" },
+            horizontalStart: { name: "q7cj4w", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "q7cj4x", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

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

@@ -10,11 +10,11 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 const formFieldGroupListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "iwv24q", 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: "q7cj4q", 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: "iwv24r", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "iwv24s", 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: "q7cj4r", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "q7cj4s", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
         }
     }
 }, "form-field-group-list-ea1ca7");

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

@@ -13,11 +13,11 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const hooks_1 = require("./hooks");
 exports.formFieldHintStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "iwv24d", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    base: { name: "q7cj4d", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
     modifiers: {
         error: {
-            error: { name: "iwv24e", styles: "color:var(--cnvs-brand-error-base);" },
-            alert: { name: "iwv24f", styles: "" }
+            error: { name: "q7cj4e", styles: "color:var(--cnvs-brand-error-base);" },
+            alert: { name: "q7cj4f", styles: "" }
         }
     },
     defaultModifiers: {

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

@@ -14,18 +14,18 @@ const hooks_1 = require("./hooks");
 exports.formFieldLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
     // @ts-ignore Still weird about CSS font variables
-    base: { name: "iwv247", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "q7cj47", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "iwv248", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
+            true: { name: "q7cj48", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
         },
         orientation: {
-            horizontalStart: { name: "iwv249", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "iwv24a", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
-            vertical: { name: "iwv24b", styles: "width:100%;" }
+            horizontalStart: { name: "q7cj49", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "q7cj4a", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
+            vertical: { name: "q7cj4b", styles: "width:100%;" }
         },
         isHidden: {
-            true: { name: "iwv24c", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" }
+            true: { name: "q7cj4c", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" }
         }
     },
     defaultModifiers: {

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

@@ -4,22 +4,22 @@ exports.formFieldStencil = void 0;
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.formFieldStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "iwv24h", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
+    base: { name: "q7cj4h", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
     modifiers: {
         grow: {
-            true: { name: "iwv24i", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "q7cj4i", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "iwv24j", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            horizontalEnd: { name: "iwv24k", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            vertical: { name: "iwv24l", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+            horizontalStart: { name: "q7cj4j", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            horizontalEnd: { name: "q7cj4k", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            vertical: { name: "q7cj4l", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
         },
         required: {
-            true: { name: "iwv24m", styles: "" }
+            true: { name: "q7cj4m", styles: "" }
         },
         error: {
-            error: { name: "iwv24n", styles: "" },
-            alert: { name: "iwv24o", styles: "" }
+            error: { name: "q7cj4n", styles: "" },
+            alert: { name: "q7cj4o", styles: "" }
         }
     },
     defaultModifiers: {

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

@@ -48,10 +48,10 @@ exports.accentIconStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         color: '',
     },
-    base: { name: "iwv211", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
+    base: { name: "q7cj11", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
     modifiers: {
         transparent: {
-            true: { name: "iwv212", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "q7cj12", styles: "& .french-vanilla-100{fill:transparent;}" }
         }
     }
 }, "accent-icon-f47b2a");

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

@@ -78,7 +78,7 @@ exports.appletIconStencil = (0, canvas_kit_styling_1.createStencil)({
         color400: '',
         color500: '',
     },
-    base: { name: "iwv213", styles: "box-sizing:border-box;--size-svg-a30d66:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
+    base: { name: "q7cj13", styles: "box-sizing:border-box;--size-svg-a30d66:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
 }, "applet-icon-757179");
 exports.AppletIcon = (0, common_1.createComponent)('span')({
     displayName: 'AppletIcon',

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

@@ -63,10 +63,10 @@ const graphicStyles = ({ width, height, grow }) => {
 exports.graphicStyles = graphicStyles;
 exports.graphicStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
-    base: { name: "iwv216", styles: "box-sizing:border-box;" },
+    base: { name: "q7cj16", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "iwv217", styles: "width:100%;--width-svg-a30d66:100%;" }
+            true: { name: "q7cj17", styles: "width:100%;--width-svg-a30d66:100%;" }
         }
     }
 }, "graphic-ee386a");

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

@@ -39,10 +39,10 @@ exports.svgStencil = (0, canvas_kit_styling_1.createStencil)({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "iwv2z", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-a30d66, var(--size-svg-a30d66));height:var(--height-svg-a30d66, var(--size-svg-a30d66));}" },
+    base: { name: "q7cjz", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-a30d66, var(--size-svg-a30d66));height:var(--height-svg-a30d66, var(--size-svg-a30d66));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "iwv210", styles: "transform:scaleX(-1);" }
+            true: { name: "q7cj10", styles: "transform:scaleX(-1);" }
         }
     }
 }, "svg-a30d66");

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

@@ -82,7 +82,7 @@ exports.systemIconStencil = (0, canvas_kit_styling_1.createStencil)({
         accentColor: '',
         backgroundColor: '',
     },
-    base: { name: "iwv214", styles: "box-sizing:border-box;& .wd-icon-fill{fill:var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-583fae, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-583fae, transparent);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-193ff4, var(--colorHover-193ff4, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-193ff4, var(--colorHover-193ff4, var(--accentColor-system-icon-583fae, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-193ff4, var(--backgroundColor-system-icon-583fae, transparent));}" }
+    base: { name: "q7cj14", styles: "box-sizing:border-box;& .wd-icon-fill{fill:var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-583fae, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-583fae, transparent);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-193ff4, var(--colorHover-193ff4, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-193ff4, var(--colorHover-193ff4, var(--accentColor-system-icon-583fae, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-193ff4, var(--backgroundColor-system-icon-583fae, transparent));}" }
 }, "system-icon-583fae");
 exports.SystemIcon = (0, common_1.createComponent)('span')({
     displayName: 'SystemIcon',

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

@@ -46,7 +46,7 @@ const systemIconCircleStencil = (0, canvas_kit_styling_1.createStencil)({
         backgroundColor: '',
         iconColor: '',
     },
-    base: { name: "iwv215", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-554859, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-583fae:var(--iconColor-system-icon-circle-554859);& img{width:100%;height:100%;}" }
+    base: { name: "q7cj15", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-554859, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-583fae:var(--iconColor-system-icon-circle-554859);& img{width:100%;height:100%;}" }
 }, "system-icon-circle-554859");
 exports.SystemIconCircle = (0, common_1.createComponent)('span')({
     displayName: 'SystemIconCircle',

package/dist/commonjs/loading-dots/lib/LoadingDots.js

@@ -31,13 +31,13 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 /**
  * Keyframe for the dots loading animation.
  */
-const keyframesLoading = (0, canvas_kit_styling_1.keyframes)({ name: "iwv24y", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
+const keyframesLoading = (0, canvas_kit_styling_1.keyframes)({ name: "q7cj4y", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
 exports.loadingDotsStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         animationDurationMs: '40ms',
         loadingDotColor: canvas_tokens_web_1.system.color.bg.alt.strong,
     },
-    base: { name: "iwv24z", styles: "--animationDurationMs-loading-dots-f22098:40ms;--loadingDotColor-loading-dots-f22098:var(--cnvs-sys-color-bg-alt-strong);box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);& [data-part=\"loading-animation-dot\"]{background-color:var(--loadingDotColor-loading-dots-f22098);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-iwv24y;animation-duration:calc(var(--animationDurationMs-loading-dots-f22098) * 35);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(var(--animationDurationMs-loading-dots-f22098) * 4);}&:nth-child(3){animation-delay:calc(var(--animationDurationMs-loading-dots-f22098) * 8);}}" }
+    base: { name: "q7cj4z", styles: "--animationDurationMs-loading-dots-f22098:40ms;--loadingDotColor-loading-dots-f22098:var(--cnvs-sys-color-bg-alt-strong);box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);& [data-part=\"loading-animation-dot\"]{background-color:var(--loadingDotColor-loading-dots-f22098);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-q7cj4y;animation-duration:calc(var(--animationDurationMs-loading-dots-f22098) * 35);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(var(--animationDurationMs-loading-dots-f22098) * 4);}&:nth-child(3){animation-delay:calc(var(--animationDurationMs-loading-dots-f22098) * 8);}}" }
 }, "loading-dots-f22098");
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.

package/dist/commonjs/menu/lib/MenuCard.js

@@ -38,7 +38,7 @@ exports.menuCardStencil = (0, canvas_kit_styling_1.createStencil)({
         transformOriginVertical: 'top',
         transformOriginHorizontal: 'left',
     },
-    base: { name: "iwv22n", styles: "--minWidth-menu-card-07ca6c:0.0625rem;--transformOriginVertical-menu-card-07ca6c:top;--transformOriginHorizontal-menu-card-07ca6c:left;box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-base-palette-black-pepper-300);position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero);max-width:calc(100vw - var(--cnvs-sys-space-x8));box-shadow:var(--cnvs-sys-depth-3);min-width:var(--minWidth-menu-card-07ca6c);transform-origin:var(--transformOriginVertical-menu-card-07ca6c) var(--transformOriginHorizontal-menu-card-07ca6c);.wd-no-animation &{animation:none;}" }
+    base: { name: "q7cj2n", styles: "--minWidth-menu-card-07ca6c:0.0625rem;--transformOriginVertical-menu-card-07ca6c:top;--transformOriginHorizontal-menu-card-07ca6c:left;box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-base-palette-black-pepper-300);position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero);max-width:calc(100vw - var(--cnvs-sys-space-x8));box-shadow:var(--cnvs-sys-depth-3);min-width:var(--minWidth-menu-card-07ca6c);transform-origin:var(--transformOriginVertical-menu-card-07ca6c) var(--transformOriginHorizontal-menu-card-07ca6c);.wd-no-animation &{animation:none;}" }
 }, "menu-card-07ca6c");
 exports.useMenuCard = (0, common_1.createElemPropsHook)(useMenuModel_1.useMenuModel)(() => {
     return {};

package/dist/commonjs/menu/lib/MenuItem.js

@@ -34,7 +34,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const useMenuModel_1 = require("./useMenuModel");
 exports.menuItemStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "iwv22m", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);cursor:pointer;color:var(--cnvs-sys-color-fg-default);border-width:0;text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-space-x10);--color-system-icon-583fae:currentcolor;& :where([data-part=\"menu-item-selected\"]){transition:opacity 80ms linear;opacity:var(--cnvs-sys-opacity-zero);}&:where(:has(span)){display:flex;}&:is([aria-selected=true]){color:var(--cnvs-brand-primary-dark);background-color:var(--cnvs-brand-primary-lightest);}&:is(.hover, :hover){color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-brand-neutral-lightest);}&:is(.focus, :focus){color:var(--cnvs-brand-primary-accent);outline:none;background-color:var(--cnvs-brand-primary-base);}&:is(:disabled, [aria-disabled=true]){color:var(--cnvs-sys-color-text-disabled);cursor:default;&:where(.focus, :focus){background-color:var(--cnvs-brand-primary-light);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}& :where([data-part=\"menu-icon-icon\"]){align-self:start;}" }
+    base: { name: "q7cj2m", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);cursor:pointer;color:var(--cnvs-sys-color-fg-default);border-width:0;text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-space-x10);--color-system-icon-583fae:currentcolor;& :where([data-part=\"menu-item-selected\"]){transition:opacity 80ms linear;opacity:var(--cnvs-sys-opacity-zero);}&:where(:has(span)){display:flex;}&:is([aria-selected=true]){color:var(--cnvs-brand-primary-dark);background-color:var(--cnvs-brand-primary-lightest);}&:is(.hover, :hover){color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-brand-neutral-lightest);}&:is(.focus, :focus){color:var(--cnvs-brand-primary-accent);outline:none;background-color:var(--cnvs-brand-primary-base);}&:is(:disabled, [aria-disabled=true]){color:var(--cnvs-sys-color-text-disabled);cursor:default;&:where(.focus, :focus){background-color:var(--cnvs-brand-primary-light);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}& :where([data-part=\"menu-icon-icon\"]){align-self:start;}" }
 }, "menu-item-7213c6");
 const MenuItemIcon = (elemProps) => {
     return React.createElement(icon_1.SystemIcon, { "data-part": "menu-item-icon", ...elemProps });

package/dist/commonjs/menu/lib/MenuList.js

@@ -38,11 +38,11 @@ exports.useMenuList = (0, common_1.composeHooks)((0, common_1.createElemPropsHoo
     };
 }), popup_1.useReturnFocus, popup_1.useFocusRedirect);
 exports.menuListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "iwv22o", styles: "box-sizing:border-box;background:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-zero);padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-zero);" },
+    base: { name: "q7cj2o", styles: "box-sizing:border-box;background:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-zero);padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-zero);" },
     modifiers: {
         orientation: {
-            vertical: { name: "iwv22p", styles: "flex-direction:column;" },
-            horizontal: { name: "iwv22q", styles: "flex-direction:row;" }
+            vertical: { name: "q7cj2p", styles: "flex-direction:column;" },
+            horizontal: { name: "q7cj2q", styles: "flex-direction:row;" }
         }
     }
 }, "menu-list-b9b420");