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

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: "znlb4d", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    base: { name: "e3034d", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
     modifiers: {
         error: {
-            error: { name: "znlb4e", styles: "color:var(--cnvs-brand-error-base);" },
-            alert: { name: "znlb4f", styles: "" }
+            error: { name: "e3034e", styles: "color:var(--cnvs-brand-error-base);" },
+            alert: { name: "e3034f", styles: "" }
         }
     },
     defaultModifiers: {

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

@@ -14,15 +14,15 @@ 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: "znlb48", 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: "e30348", 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: "znlb49", 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: "e30349", 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: "znlb4a", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "znlb4b", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
-            vertical: { name: "znlb4c", styles: "width:100%;" }
+            horizontalStart: { name: "e3034a", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "e3034b", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
+            vertical: { name: "e3034c", styles: "width:100%;" }
         }
     },
     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: "znlb4h", 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: "e3034h", 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: "znlb4i", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "e3034i", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "znlb4j", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            horizontalEnd: { name: "znlb4k", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            vertical: { name: "znlb4l", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+            horizontalStart: { name: "e3034j", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            horizontalEnd: { name: "e3034k", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            vertical: { name: "e3034l", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
         },
         required: {
-            true: { name: "znlb4m", styles: "" }
+            true: { name: "e3034m", styles: "" }
         },
         error: {
-            error: { name: "znlb4n", styles: "" },
-            alert: { name: "znlb4o", styles: "" }
+            error: { name: "e3034n", styles: "" },
+            alert: { name: "e3034o", 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: "znlb11", 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: "e30311", 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: "znlb12", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "e30312", 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: "znlb13", 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: "e30313", 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: "znlb16", styles: "box-sizing:border-box;" },
+    base: { name: "e30316", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "znlb17", styles: "width:100%;--width-svg-a30d66:100%;" }
+            true: { name: "e30317", 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: "znlbz", 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: "e303z", 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: "znlb10", styles: "transform:scaleX(-1);" }
+            true: { name: "e30310", 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: "znlb14", 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: "e30314", 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");
 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: "znlb15", 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: "e30315", 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,12 +31,12 @@ 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: "znlb4y", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
+const keyframesLoading = (0, canvas_kit_styling_1.keyframes)({ name: "e3034y", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
 const singleLoadingDotStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         animationDurationMs: '40ms',
     },
-    base: { name: "znlb4z", 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-znlb4y;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: "e3034z", 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-e3034y;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.
@@ -46,7 +46,7 @@ const LoadingAnimationDot = () => React.createElement("div", { ...singleLoadingD
  * A simple container for the loading dots.
  */
 const loadingDotsStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb50", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "e30350", 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/commonjs/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/commonjs/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/commonjs/menu/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuTargetContext = exports.useMenuTarget = exports.useMenuPopper = exports.menuListStencil = exports.useMenuList = exports.StyledMenuItem = exports.useMenuItem = exports.useMenuCard = exports.Menu = exports.useMenuModel = void 0;
+exports.useMenuTargetContext = exports.useMenuTarget = exports.useMenuPopper = exports.menuListStencil = exports.useMenuList = exports.menuOptionStencil = exports.useMenuOption = exports.StyledMenuItem = exports.menuItemStencil = exports.useMenuItem = exports.useMenuCard = exports.Menu = exports.useMenuModel = void 0;
 var useMenuModel_1 = require("./lib/useMenuModel");
 Object.defineProperty(exports, "useMenuModel", { enumerable: true, get: function () { return useMenuModel_1.useMenuModel; } });
 var Menu_1 = require("./lib/Menu");
@@ -9,7 +9,11 @@ var MenuCard_1 = require("./lib/MenuCard");
 Object.defineProperty(exports, "useMenuCard", { enumerable: true, get: function () { return MenuCard_1.useMenuCard; } });
 var MenuItem_1 = require("./lib/MenuItem");
 Object.defineProperty(exports, "useMenuItem", { enumerable: true, get: function () { return MenuItem_1.useMenuItem; } });
+Object.defineProperty(exports, "menuItemStencil", { enumerable: true, get: function () { return MenuItem_1.menuItemStencil; } });
 Object.defineProperty(exports, "StyledMenuItem", { enumerable: true, get: function () { return MenuItem_1.StyledMenuItem; } });
+var MenuOption_1 = require("./lib/MenuOption");
+Object.defineProperty(exports, "useMenuOption", { enumerable: true, get: function () { return MenuOption_1.useMenuOption; } });
+Object.defineProperty(exports, "menuOptionStencil", { enumerable: true, get: function () { return MenuOption_1.menuOptionStencil; } });
 var MenuList_1 = require("./lib/MenuList");
 Object.defineProperty(exports, "useMenuList", { enumerable: true, get: function () { return MenuList_1.useMenuList; } });
 Object.defineProperty(exports, "menuListStencil", { enumerable: true, get: function () { return MenuList_1.menuListStencil; } });

package/dist/commonjs/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/commonjs/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/commonjs/menu/lib/Menu.js

@@ -13,6 +13,7 @@ const MenuItem_1 = require("./MenuItem");
 const MenuCard_1 = require("./MenuCard");
 const MenuList_1 = require("./MenuList");
 const MenuDivider_1 = require("./MenuDivider");
+const MenuOption_1 = require("./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
@@ -95,6 +96,15 @@ exports.Menu = (0, common_1.createContainer)()({
          * the model.
          */
         Item: MenuItem_1.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_1.MenuOption,
         Divider: MenuDivider_1.MenuDivider,
         /**
          * A `Menu.TargetContext` is the same as a {@link MenuTarget Menu.Target}, except it adds a

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: "znlb2n", 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: "e3032o", 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.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/commonjs/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/commonjs/menu/lib/MenuItem.js

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

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: "znlb2o", 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: "e3032p", 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: "znlb2p", styles: "flex-direction:column;" },
-            horizontal: { name: "znlb2q", styles: "flex-direction:row;" }
+            vertical: { name: "e3032q", styles: "flex-direction:column;" },
+            horizontal: { name: "e3032r", styles: "flex-direction:row;" }
         }
     }
 }, "menu-list-b9b420");