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

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

@@ -20,7 +20,7 @@ const systemIconCircleStencil = createStencil({
         backgroundColor: '',
         iconColor: '',
     },
-    base: { name: "n4fo15", 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: "xgsx15", 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");
 export const SystemIconCircle = createComponent('span')({
     displayName: 'SystemIconCircle',

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

@@ -5,12 +5,12 @@ import { handleCsProp, keyframes, createStencil, calc } from '@workday/canvas-ki
 /**
  * Keyframe for the dots loading animation.
  */
-const keyframesLoading = keyframes({ name: "n4fo4y", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
+const keyframesLoading = keyframes({ name: "xgsx4y", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
 const singleLoadingDotStencil = createStencil({
     vars: {
         animationDurationMs: '40ms',
     },
-    base: { name: "n4fo4z", styles: "--animationDurationMs-single-loading-dot-dec117:40ms;box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-alt-strong);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-n4fo4y;animation-duration:calc(var(--animationDurationMs-single-loading-dot-dec117) * 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-single-loading-dot-dec117) * 4);}&:nth-child(3){animation-delay:calc(var(--animationDurationMs-single-loading-dot-dec117) * 8);}" }
+    base: { name: "xgsx4z", styles: "--animationDurationMs-single-loading-dot-dec117:40ms;box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-alt-strong);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-xgsx4y;animation-duration:calc(var(--animationDurationMs-single-loading-dot-dec117) * 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-single-loading-dot-dec117) * 4);}&:nth-child(3){animation-delay:calc(var(--animationDurationMs-single-loading-dot-dec117) * 8);}" }
 }, "single-loading-dot-dec117");
 /**
  * The actual loading dot div.
@@ -20,7 +20,7 @@ const LoadingAnimationDot = () => React.createElement("div", { ...singleLoadingD
  * A simple container for the loading dots.
  */
 const loadingDotsStencil = createStencil({
-    base: { name: "n4fo50", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "xgsx50", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);" }
 }, "loading-dots-268f58");
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.

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

@@ -1,7 +1,8 @@
 export { useMenuModel } from './lib/useMenuModel';
 export { Menu } from './lib/Menu';
 export { useMenuCard } from './lib/MenuCard';
-export { useMenuItem, StyledMenuItem, MenuItemProps } from './lib/MenuItem';
+export { useMenuItem, menuItemStencil, StyledMenuItem } from './lib/MenuItem';
+export { useMenuOption, menuOptionStencil } from './lib/MenuOption';
 export { useMenuList, menuListStencil } from './lib/MenuList';
 export { useMenuPopper } from './lib/MenuPopper';
 export { useMenuTarget, useMenuTargetContext } from './lib/MenuTarget';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC;AAEhC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,WAAW,EAAE,cAAc,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC;AAEhC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAC,aAAa,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/es6/menu/index.js

@@ -1,7 +1,8 @@
 export { useMenuModel } from './lib/useMenuModel';
 export { Menu } from './lib/Menu';
 export { useMenuCard } from './lib/MenuCard';
-export { useMenuItem, StyledMenuItem } from './lib/MenuItem';
+export { useMenuItem, menuItemStencil, StyledMenuItem } from './lib/MenuItem';
+export { useMenuOption, menuOptionStencil } from './lib/MenuOption';
 export { useMenuList, menuListStencil } from './lib/MenuList';
 export { useMenuPopper } from './lib/MenuPopper';
 export { useMenuTarget, useMenuTargetContext } from './lib/MenuTarget';

package/dist/es6/menu/lib/Menu.d.ts

@@ -1767,15 +1767,95 @@ export declare const Menu: import("@workday/canvas-kit-react/common").ComponentM
         navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
         getId: (item: any) => string;
     }> & {
-        Icon: import("@emotion/styled").StyledComponent<import("../..").SystemIconProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "as" | keyof import("../..").SystemIconProps> & {
-            ref?: React.Ref<HTMLSpanElement> | undefined;
-        } & {
-            theme?: import("@emotion/react").Theme | undefined;
-        }, {}, {}>;
-        Text: import("@emotion/styled").StyledComponent<{
-            theme?: import("@emotion/react").Theme | undefined;
-            as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-        }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+        Icon: (elemProps: import("../..").SystemIconProps) => React.JSX.Element;
+        Text: ({ children }: {
+            children?: React.ReactNode;
+        }) => React.JSX.Element;
+    };
+    /**
+     * A `Menu.Option` is similar to the `Menu.Item`, but has a `role=option` and works with
+     * `aria-activedescendant` and is selectable with a selected checkmark. It adds the
+     * `aria-selected="true/false"` attribute. `Menu.Option` requires much more accessibility
+     * behavior composed into the `Menu.Target` and `Menu.List` component. The `Combobox` and
+     * `Select` components make use of the `Menu.Option`. See those components for a better idea of
+     * how behavior is composed.
+     */
+    Option: import("@workday/canvas-kit-react/common").ElementComponentM<"li", import("./MenuOption").MenuOptionProps, {
+        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("../..").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;
+            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;
+        };
+        selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+        navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+        getId: (item: any) => string;
+    }> & {
+        Icon: (elemProps: import("../..").SystemIconProps) => React.JSX.Element;
+        Text: ({ children }: {
+            children?: React.ReactNode;
+        }) => React.JSX.Element;
     };
     Divider: import("@workday/canvas-kit-react/common").ElementComponent<"hr", unknown>;
     /**

package/dist/es6/menu/lib/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"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"}

package/dist/es6/menu/lib/Menu.js

@@ -7,6 +7,7 @@ import { MenuItem } from './MenuItem';
 import { MenuCard } from './MenuCard';
 import { MenuList } from './MenuList';
 import { MenuDivider } from './MenuDivider';
+import { MenuOption } from './MenuOption';
 /**
  * `Menu` is a combination of a popup and a list. It usually has some type of target element that
  * expands/collapses the menu and a `menu` role and and several `menuitem` roles. Focus is managed
@@ -89,6 +90,15 @@ export const Menu = createContainer()({
          * the model.
          */
         Item: MenuItem,
+        /**
+         * A `Menu.Option` is similar to the `Menu.Item`, but has a `role=option` and works with
+         * `aria-activedescendant` and is selectable with a selected checkmark. It adds the
+         * `aria-selected="true/false"` attribute. `Menu.Option` requires much more accessibility
+         * behavior composed into the `Menu.Target` and `Menu.List` component. The `Combobox` and
+         * `Select` components make use of the `Menu.Option`. See those components for a better idea of
+         * how behavior is composed.
+         */
+        Option: MenuOption,
         Divider: MenuDivider,
         /**
          * A `Menu.TargetContext` is the same as a {@link MenuTarget Menu.Target}, except it adds a

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

@@ -12,7 +12,7 @@ export const menuCardStencil = createStencil({
         transformOriginVertical: 'top',
         transformOriginHorizontal: 'left',
     },
-    base: { name: "n4fo2n", 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: "xgsx2o", 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");
 export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
     return {};

package/dist/es6/menu/lib/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyledType } from '@workday/canvas-kit-react/common';
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
 export interface MenuItemProps {
     /**
      * Optionally pass index to menu item. This should be done if `Menu.Item` components were created
@@ -10,27 +10,28 @@ export interface MenuItemProps {
     /**
      * The label text of the MenuItem.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * The name of the menu item. This name will be used in the `onSelect` callback in the model. If
      * this property is not provided, it will default to a string representation of the the zero-based
      * index of the Tab when it was initialized.
      */
     'data-id'?: string;
+    /**
+     * `aria-disabled` is used for keyboard and screen reader users to discover disabled content with
+     * the keyboard or screen reader caret tool. For more information, see
+     * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+     */
     'aria-disabled'?: boolean;
-}
-interface StyledMenuProps {
     /**
      * If true, set the StyledMenuItem to the disabled state so it is not clickable.
      * @default false
+     * @deprecated Use `aria-disabled` instead
      */
     isDisabled?: boolean;
 }
-export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "color" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "height" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "resize" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "width" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "fill" | "stroke" | "cs" | "as" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
-    ref?: React.Ref<HTMLButtonElement> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & StyledType & StyledMenuProps, {}, {}>;
+export declare const menuItemStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
+export declare const StyledMenuItem: import("@workday/canvas-kit-react/common").ElementComponent<"button", MenuItemProps>;
 export declare const useMenuItem: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -196,15 +197,7 @@ export declare const MenuItem: import("@workday/canvas-kit-react/common").Elemen
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }> & {
-    Icon: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/icon").SystemIconProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "as" | keyof import("@workday/canvas-kit-react/icon").SystemIconProps> & {
-        ref?: React.Ref<HTMLSpanElement> | undefined;
-    } & {
-        theme?: import("@emotion/react").Theme | undefined;
-    }, {}, {}>;
-    Text: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    Icon: (elemProps: SystemIconProps) => React.JSX.Element;
+    Text: ({ children }: React.PropsWithChildren) => React.JSX.Element;
 };
-export {};
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/es6/menu/lib/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,UAAU,EAIX,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,eAAe;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,cAAc;;;;yCAwF1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuBF,MAAM,cAAc;;;;;;;;;;;;;;;;;;EAazC,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAW9F,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,yIAqE1B,CAAC;AAUH,eAAO,MAAM,cAAc,sFAazB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuBF,MAAM,cAAc;;;;;;;;;;;;;;;;;;EAazC,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA7DY,eAAe;yBAId,MAAM,iBAAiB;CAyEvD,CAAC"}

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

@@ -1,97 +1,26 @@
 import * as React from 'react';
-import { colors, iconColors, typeColors, space, type } from '@workday/canvas-kit-react/tokens';
-import { createSubcomponent, styled, composeHooks, createElemPropsHook, useLocalRef, } from '@workday/canvas-kit-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { brand, system } from '@workday/canvas-tokens-web';
+import { createSubcomponent, composeHooks, createElemPropsHook, useLocalRef, createComponent, } from '@workday/canvas-kit-react/common';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
-import { Box } from '@workday/canvas-kit-react/layout';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { useListItemRegister, useListItemRovingFocus, useListItemSelect, } from '@workday/canvas-kit-react/collection';
 import { useMenuModel } from './useMenuModel';
-export const StyledMenuItem = styled(Box.as('button'))(({ theme }) => {
-    return {
-        ...type.levels.subtext.large,
-        display: 'grid',
-        alignItems: 'center',
-        width: '100%',
-        gap: space.s,
-        padding: `${space.xxs} ${space.s}`,
-        boxSizing: 'border-box',
-        cursor: 'pointer',
-        color: colors.blackPepper300,
-        borderWidth: 0,
-        textAlign: 'left',
-        transition: 'background-color 80ms, color 80ms',
-        '&:hover, &[aria-selected=true]': {
-            backgroundColor: theme.canvas.palette.primary.lightest,
-            color: colors.blackPepper300,
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: iconColors.hover,
-            },
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: iconColors.hover,
-            },
-        },
-        '&:focus, &.focus': {
-            outline: 'none',
-            backgroundColor: theme.canvas.palette.primary.main,
-            color: typeColors.inverse,
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: iconColors.inverse,
-            },
-            '*:hover .wd-icon-fill': {
-                fill: iconColors.inverse,
-            },
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: iconColors.inverse,
-            },
-        },
-        // We want the focus styles no matter what
-        [`[data-whatinput]`]: {
-            backgroundColor: 'inherit',
-            color: colors.blackPepper300,
-            '&:hover, &[aria-selected=true]': {
-                backgroundColor: theme.canvas.palette.primary.lightest,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: iconColors.hover,
-                },
-            },
-            '&:focus, &.focus': {
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: iconColors.hover,
-                },
-            },
-        },
-        backgroundColor: 'inherit',
-        '&:disabled, &[aria-disabled=true]': {
-            color: colors.licorice100,
-            cursor: 'default',
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: iconColors.disabled,
-            },
-            '&:focus, &.focus': {
-                backgroundColor: colors.blueberry200,
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: iconColors.disabled,
-                },
-            },
-            '&:hover, &[aria-selected=true]': {
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: iconColors.disabled,
-                },
-                '*:hover .wd-icon-fill': {
-                    fill: iconColors.disabled,
-                },
-            },
-        },
-    };
-}, ({ children }) => {
-    if (typeof children === 'string') {
-        return {};
-    }
-    else {
-        return {
-            display: 'flex',
-        };
-    }
+export const menuItemStencil = createStencil({
+    base: { name: "xgsx2n", 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(SystemIcon, { "data-part": "menu-item-icon", ...elemProps });
+};
+const MenuItemText = ({ children }) => {
+    return React.createElement("span", { "data-part": "menu-item-text" }, children);
+};
+export const StyledMenuItem = createComponent('button')({
+    displayName: 'MenuItem',
+    Component: ({ children, isDisabled, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, { ref: ref, "aria-disabled": isDisabled, ...mergeStyles(elemProps, menuItemStencil({})) }, typeof children === 'string' ? React.createElement(MenuItemText, null, children) : children));
+    },
 });
 export const useMenuItem = composeHooks(createElemPropsHook(useMenuModel)((model, ref, elemProps = { 'data-id': '' }) => {
     const { localRef, elementRef } = useLocalRef(ref);
@@ -126,10 +55,10 @@ export const MenuItem = createSubcomponent('button')({
     modelHook: useMenuModel,
     elemPropsHook: useMenuItem,
     subComponents: {
-        Icon: styled(SystemIcon)({ alignSelf: 'start' }),
-        Text: styled('span')({ flexGrow: 1, alignSelf: 'center' }),
+        Icon: MenuItemIcon,
+        Text: MenuItemText,
     },
 })(({ children, ...elemProps }, Element) => {
     return (React.createElement(OverflowTooltip, { placement: "left" },
-        React.createElement(StyledMenuItem, { minHeight: space.xl, as: Element, ...elemProps }, children)));
+        React.createElement(StyledMenuItem, { as: Element, ...elemProps }, children)));
 });

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

@@ -12,11 +12,11 @@ export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model
     };
 }), useReturnFocus, useFocusRedirect);
 export const menuListStencil = createStencil({
-    base: { name: "n4fo2o", 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: "xgsx2p", 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: "n4fo2p", styles: "flex-direction:column;" },
-            horizontal: { name: "n4fo2q", styles: "flex-direction:row;" }
+            vertical: { name: "xgsx2q", styles: "flex-direction:column;" },
+            horizontal: { name: "xgsx2r", styles: "flex-direction:row;" }
         }
     }
 }, "menu-list-b9b420");