@workday/canvas-kit-react 12.0.0-alpha.906-next.0 → 12.0.0-alpha.908-next.0

package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts

@@ -1,21 +1,12 @@
-import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { StyledMenuItem } from '@workday/canvas-kit-react/menu';
-export interface ComboboxMenuItemProps extends ExtractProps<typeof StyledMenuItem, never> {
-}
 /**
- * This hook sets up accessibility and behavior of a {@link ComboboxMenuItem Combobox.Menu.Item}
- * component. It prevents focus when clicking so the focus stays on the
- * {@link ComboboxInput Combobox.Input} component and selects an item when the user clicks on it. It
- * also prevents items with an `aria-disabled` attribute from being selected. A `focus` CSS class is
- * added when the item has "focus" (when the cursor is on the item).
+ * @deprecated Use `useMenuOption` instead
  */
-export declare const useComboboxMenuItem: import("@workday/canvas-kit-react/common").BehaviorHook<{
+export declare const useComboboxMenuItem: import("../..").BehaviorHook<{
     state: {
-        stackRef: React.RefObject<HTMLDivElement>;
-        targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
-        returnFocusRef: React.RefObject<any> | undefined;
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
         visibility: "hidden" | "visible";
@@ -23,7 +14,7 @@ export declare const useComboboxMenuItem: import("@workday/canvas-kit-react/comm
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
-        pageSizeRef: React.MutableRefObject<number>;
+        pageSizeRef: import("react").MutableRefObject<number>;
         cursorIndexRef: {
             readonly current: number;
         };
@@ -35,20 +26,20 @@ export declare const useComboboxMenuItem: import("@workday/canvas-kit-react/comm
             measure: () => void;
         };
         UNSTABLE_defaultItemHeight: number;
-        containerRef: React.RefObject<HTMLDivElement>;
+        containerRef: import("react").RefObject<HTMLDivElement>;
         orientation: "horizontal" | "vertical";
-        indexRef: React.MutableRefObject<number>;
+        indexRef: import("react").MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        items: import("../..").Item<any>[];
         mode: "multiple" | "single";
     };
     events: {
         updatePlacement(data: {
             placement: import("@popperjs/core").Placement;
         }): void;
-        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
-        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         select(data: {
             id: string;
         }): void;
@@ -82,10 +73,11 @@ export declare const useComboboxMenuItem: import("@workday/canvas-kit-react/comm
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
-    readonly role: "option";
-    readonly 'aria-selected': true | undefined;
-    readonly onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
-    readonly className: "" | "focus";
+    role: string;
+    'aria-selected': boolean;
+    onMouseDown: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
+} & {
+    className: string;
 } & {
     ref: (instance: HTMLElement | null) => void;
     'data-id': string;
@@ -94,241 +86,7 @@ export declare const useComboboxMenuItem: import("@workday/canvas-kit-react/comm
     virtual: null;
     'aria-setsize': number | undefined;
     'aria-posinset': number | undefined;
-    style: React.CSSProperties;
+    style: import("react").CSSProperties;
     id: string;
-} & {
-    'data-id'?: string | undefined;
-}>;
-export declare const ComboboxMenuItemIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/icon").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
-    state: {
-        stackRef: React.RefObject<HTMLDivElement>;
-        targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
-        returnFocusRef: React.RefObject<any> | undefined;
-        placement: import("@popperjs/core").Placement;
-        id: string;
-        visibility: "hidden" | "visible";
-        selectedIds: string[] | "all";
-        unselectedIds: string[];
-        cursorId: string;
-        columnCount: number;
-        pageSizeRef: React.MutableRefObject<number>;
-        cursorIndexRef: {
-            readonly current: number;
-        };
-        UNSTABLE_virtual: {
-            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
-            totalSize: number;
-            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
-            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
-            measure: () => void;
-        };
-        UNSTABLE_defaultItemHeight: number;
-        containerRef: React.RefObject<HTMLDivElement>;
-        orientation: "horizontal" | "vertical";
-        indexRef: React.MutableRefObject<number>;
-        nonInteractiveIds: string[];
-        isVirtualized: boolean;
-        items: import("@workday/canvas-kit-react/collection").Item<any>[];
-        mode: "multiple" | "single";
-        value: string | undefined;
-        inputRef: React.RefObject<HTMLInputElement>;
-        width: number;
-    };
-    events: {
-        setWidth(width: number): void;
-        updatePlacement(data: {
-            placement: import("@popperjs/core").Placement;
-        }): void;
-        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
-        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
-        select(data: {
-            id: string;
-        }): void;
-        selectAll(): void;
-        unselectAll(): void;
-        goTo(data: {
-            id: string;
-        }): void;
-        goToNext(): void;
-        goToPrevious(): void;
-        goToPreviousRow(): void;
-        goToNextRow(): void;
-        goToFirst(): void;
-        goToLast(): void;
-        goToFirstOfRow(): void;
-        goToLastOfRow(): void;
-        goToNextPage(): void;
-        goToPreviousPage(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
-        unregisterItem(data: {
-            id: string;
-        }): void;
-        updateItemHeight(data: {
-            value: number;
-        }): void;
-    };
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
-    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
-    getId: (item: any) => string;
 }>;
-export declare const ComboboxMenuItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li", ComboboxMenuItemProps, {
-    state: {
-        stackRef: React.RefObject<HTMLDivElement>;
-        targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
-        returnFocusRef: React.RefObject<any> | undefined;
-        placement: import("@popperjs/core").Placement;
-        id: string;
-        visibility: "hidden" | "visible";
-        selectedIds: string[] | "all";
-        unselectedIds: string[];
-        cursorId: string;
-        columnCount: number;
-        pageSizeRef: React.MutableRefObject<number>;
-        cursorIndexRef: {
-            readonly current: number;
-        };
-        UNSTABLE_virtual: {
-            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
-            totalSize: number;
-            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
-            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
-            measure: () => void;
-        };
-        UNSTABLE_defaultItemHeight: number;
-        containerRef: React.RefObject<HTMLDivElement>;
-        orientation: "horizontal" | "vertical";
-        indexRef: React.MutableRefObject<number>;
-        nonInteractiveIds: string[];
-        isVirtualized: boolean;
-        items: import("@workday/canvas-kit-react/collection").Item<any>[];
-        mode: "multiple" | "single";
-        value: string | undefined;
-        inputRef: React.RefObject<HTMLInputElement>;
-        width: number;
-    };
-    events: {
-        setWidth(width: number): void;
-        updatePlacement(data: {
-            placement: import("@popperjs/core").Placement;
-        }): void;
-        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
-        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
-        select(data: {
-            id: string;
-        }): void;
-        selectAll(): void;
-        unselectAll(): void;
-        goTo(data: {
-            id: string;
-        }): void;
-        goToNext(): void;
-        goToPrevious(): void;
-        goToPreviousRow(): void;
-        goToNextRow(): void;
-        goToFirst(): void;
-        goToLast(): void;
-        goToFirstOfRow(): void;
-        goToLastOfRow(): void;
-        goToNextPage(): void;
-        goToPreviousPage(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
-        unregisterItem(data: {
-            id: string;
-        }): void;
-        updateItemHeight(data: {
-            value: number;
-        }): void;
-    };
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
-    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
-    getId: (item: any) => string;
-}> & {
-    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/icon").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
-        state: {
-            stackRef: React.RefObject<HTMLDivElement>;
-            targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
-            returnFocusRef: React.RefObject<any> | undefined;
-            placement: import("@popperjs/core").Placement;
-            id: string;
-            visibility: "hidden" | "visible";
-            selectedIds: string[] | "all";
-            unselectedIds: string[];
-            cursorId: string;
-            columnCount: number;
-            pageSizeRef: React.MutableRefObject<number>;
-            cursorIndexRef: {
-                readonly current: number;
-            };
-            UNSTABLE_virtual: {
-                virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
-                totalSize: number;
-                scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
-                scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
-                measure: () => void;
-            };
-            UNSTABLE_defaultItemHeight: number;
-            containerRef: React.RefObject<HTMLDivElement>;
-            orientation: "horizontal" | "vertical";
-            indexRef: React.MutableRefObject<number>;
-            nonInteractiveIds: string[];
-            isVirtualized: boolean;
-            items: import("@workday/canvas-kit-react/collection").Item<any>[];
-            mode: "multiple" | "single";
-            value: string | undefined;
-            inputRef: React.RefObject<HTMLInputElement>;
-            width: number;
-        };
-        events: {
-            setWidth(width: number): void;
-            updatePlacement(data: {
-                placement: import("@popperjs/core").Placement;
-            }): void;
-            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
-            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
-            select(data: {
-                id: string;
-            }): void;
-            selectAll(): void;
-            unselectAll(): void;
-            goTo(data: {
-                id: string;
-            }): void;
-            goToNext(): void;
-            goToPrevious(): void;
-            goToPreviousRow(): void;
-            goToNextRow(): void;
-            goToFirst(): void;
-            goToLast(): void;
-            goToFirstOfRow(): void;
-            goToLastOfRow(): void;
-            goToNextPage(): void;
-            goToPreviousPage(): void;
-            registerItem(data: {
-                item: any;
-                textValue: string;
-            }): void;
-            unregisterItem(data: {
-                id: string;
-            }): void;
-            updateItemHeight(data: {
-                value: number;
-            }): void;
-        };
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-        selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
-        navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
-        getId: (item: any) => string;
-    }>;
-};
 //# sourceMappingURL=ComboboxMenuItem.d.ts.map

package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenuItem.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAe,MAAM,gCAAgC,CAAC;AAc5E,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;CAAG;AAE5F;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAIA,gBAAgB,CAAC,WAAW,CAAC;;;;;;;;;;;;;;EAyB5D,CAAC;AAOF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI/B,CAAC;AAQH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc3B,CAAC"}
+{"version":3,"file":"ComboboxMenuItem.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuItem.tsx"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAgB,CAAC"}

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

@@ -1,58 +1,5 @@
-import React from 'react';
-import { composeHooks, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
-import { StyledMenuItem, useMenuModel } from '@workday/canvas-kit-react/menu';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { useListItemAllowChildStrings, useListItemRegister, isSelected, } from '@workday/canvas-kit-react/collection';
-import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
-import { useComboboxModel } from './hooks/useComboboxModel';
-import { createStencil } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
-import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { useMenuOption } from '@workday/canvas-kit-react/menu';
 /**
- * This hook sets up accessibility and behavior of a {@link ComboboxMenuItem Combobox.Menu.Item}
- * component. It prevents focus when clicking so the focus stays on the
- * {@link ComboboxInput Combobox.Input} component and selects an item when the user clicks on it. It
- * also prevents items with an `aria-disabled` attribute from being selected. A `focus` CSS class is
- * added when the item has "focus" (when the cursor is on the item).
+ * @deprecated Use `useMenuOption` instead
  */
-export const useComboboxMenuItem = composeHooks(createElemPropsHook(useMenuModel)((model, ref, elemProps = {}) => {
-    const id = elemProps['data-id'] || '';
-    const onMouseDown = (event) => {
-        if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
-            model.events.select({ id });
-            if (model.state.mode === 'single') {
-                model.events.hide(event);
-            }
-        }
-        // prevent focus changes
-        event.preventDefault();
-    };
-    const selected = isSelected(id, model.state);
-    return {
-        role: 'option',
-        'aria-selected': selected || undefined,
-        onMouseDown,
-        className: model.state.cursorId && model.state.cursorId === elemProps['data-id'] ? 'focus' : '',
-    };
-}), useListItemRegister, useListItemAllowChildStrings);
-const comboboxMenuItemIconStencil = createStencil({
-    base: { name: "n4fo46", styles: "box-sizing:border-box;align-self:start;" }
-}, "combobox-menu-item-icon-1886be");
-export const ComboboxMenuItemIcon = createSubcomponent('span')({
-    modelHook: useComboboxModel,
-})((elemProps, Element) => {
-    return React.createElement(SystemIcon, { as: Element, ...mergeStyles(elemProps, comboboxMenuItemIconStencil()) });
-});
-const comboboxMenuItemStencil = createStencil({
-    base: { name: "n4fo47", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-space-x10);" }
-}, "combobox-menu-item-f6da1d");
-export const ComboboxMenuItem = createSubcomponent('li')({
-    modelHook: useComboboxModel,
-    elemPropsHook: useComboboxMenuItem,
-    subComponents: {
-        Icon: ComboboxMenuItemIcon,
-    },
-})(({ children, ...elemProps }, Element) => {
-    return (React.createElement(OverflowTooltip, { placement: "left" },
-        React.createElement(StyledMenuItem, { as: Element, ...mergeStyles(elemProps, comboboxMenuItemStencil()) }, children)));
-});
+export const useComboboxMenuItem = useMenuOption;

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

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

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

@@ -17,7 +17,7 @@ export const accessibleHide = {
     padding: 0,
     border: 0,
 };
-export const accessibleHideStyles = createStyles({ name: "n4fo2", 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;" });
+export const accessibleHideStyles = createStyles({ name: "xgsx2", 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/es6/common/lib/CanvasProvider.js

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

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

@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
  * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
  */
 export const formFieldContainerStencil = createStencil({
-    base: { name: "n4fo4g", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "xgsx4g", 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/es6/form-field/lib/FormFieldField.js

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

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

@@ -8,15 +8,15 @@ import { useFormFieldModel } from './hooks';
 export const formFieldGroupLabelStencil = createStencil({
     extends: textStencil,
     // @ts-ignore Still weird about CSS font variables
-    base: { name: "n4fo4t", 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: "xgsx4t", 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: "n4fo4u", 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: "xgsx4u", 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: "n4fo4v", styles: "width:100%;" },
-            horizontalStart: { name: "n4fo4w", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "n4fo4x", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
+            vertical: { name: "xgsx4v", styles: "width:100%;" },
+            horizontalStart: { name: "xgsx4w", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "xgsx4x", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

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

@@ -4,11 +4,11 @@ import { createStencil, calc, px2rem, handleCsProp } from '@workday/canvas-kit-s
 import { brand, system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 const formFieldGroupListStencil = createStencil({
-    base: { name: "n4fo4q", 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: "xgsx4q", 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: "n4fo4r", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "n4fo4s", 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: "xgsx4r", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "xgsx4s", 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/es6/form-field/lib/FormFieldHint.js

@@ -7,11 +7,11 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
 export const formFieldHintStencil = createStencil({
     extends: textStencil,
-    base: { name: "n4fo4d", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    base: { name: "xgsx4d", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
     modifiers: {
         error: {
-            error: { name: "n4fo4e", styles: "color:var(--cnvs-brand-error-base);" },
-            alert: { name: "n4fo4f", styles: "" }
+            error: { name: "xgsx4e", styles: "color:var(--cnvs-brand-error-base);" },
+            alert: { name: "xgsx4f", styles: "" }
         }
     },
     defaultModifiers: {

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

@@ -8,15 +8,15 @@ import { useFormFieldLabel, useFormFieldModel } from './hooks';
 export const formFieldLabelStencil = createStencil({
     extends: textStencil,
     // @ts-ignore Still weird about CSS font variables
-    base: { name: "n4fo48", 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: "xgsx48", 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: "n4fo49", 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: "xgsx49", 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: "n4fo4a", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "n4fo4b", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
-            vertical: { name: "n4fo4c", styles: "width:100%;" }
+            horizontalStart: { name: "xgsx4a", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "xgsx4b", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
+            vertical: { name: "xgsx4c", styles: "width:100%;" }
         }
     },
     defaultModifiers: {

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

@@ -1,22 +1,22 @@
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const formFieldStencil = createStencil({
-    base: { name: "n4fo4h", 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: "xgsx4h", 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: "n4fo4i", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "xgsx4i", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "n4fo4j", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            horizontalEnd: { name: "n4fo4k", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            vertical: { name: "n4fo4l", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+            horizontalStart: { name: "xgsx4j", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            horizontalEnd: { name: "xgsx4k", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            vertical: { name: "xgsx4l", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
         },
         required: {
-            true: { name: "n4fo4m", styles: "" }
+            true: { name: "xgsx4m", styles: "" }
         },
         error: {
-            error: { name: "n4fo4n", styles: "" },
-            alert: { name: "n4fo4o", styles: "" }
+            error: { name: "xgsx4n", styles: "" },
+            alert: { name: "xgsx4o", styles: "" }
         }
     },
     defaultModifiers: {

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

@@ -21,10 +21,10 @@ export const accentIconStencil = createStencil({
     vars: {
         color: '',
     },
-    base: { name: "n4fo11", 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: "xgsx11", 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: "n4fo12", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "xgsx12", styles: "& .french-vanilla-100{fill:transparent;}" }
         }
     }
 }, "accent-icon-f47b2a");

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

@@ -51,7 +51,7 @@ export const appletIconStencil = createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "n4fo13", 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: "xgsx13", 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");
 export const AppletIcon = createComponent('span')({
     displayName: 'AppletIcon',

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

@@ -36,10 +36,10 @@ export const graphicStyles = ({ width, height, grow }) => {
 };
 export const graphicStencil = createStencil({
     extends: svgStencil,
-    base: { name: "n4fo16", styles: "box-sizing:border-box;" },
+    base: { name: "xgsx16", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "n4fo17", styles: "width:100%;--width-svg-a30d66:100%;" }
+            true: { name: "xgsx17", styles: "width:100%;--width-svg-a30d66:100%;" }
         }
     }
 }, "graphic-ee386a");

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

@@ -13,10 +13,10 @@ export const svgStencil = createStencil({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "n4foz", 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: "xgsxz", 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: "n4fo10", styles: "transform:scaleX(-1);" }
+            true: { name: "xgsx10", styles: "transform:scaleX(-1);" }
         }
     }
 }, "svg-a30d66");

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

@@ -55,7 +55,7 @@ export const systemIconStencil = createStencil({
         accentColor: '',
         backgroundColor: '',
     },
-    base: { name: "n4fo14", styles: "box-sizing:border-box;--backgroundColor-system-icon-583fae:var(--backgroundColor-system-icon-583fae, transparent);& .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: "xgsx14", styles: "box-sizing:border-box;--backgroundColor-system-icon-583fae:var(--backgroundColor-system-icon-583fae, transparent);& .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");
 export const SystemIcon = createComponent('span')({
     displayName: 'SystemIcon',