@workday/canvas-kit-react 11.0.0-alpha.716-next.0 → 11.0.0-alpha.718-next.0

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboboxMenuItem = exports.useComboboxMenuItem = void 0;
+exports.ComboboxMenuItem = exports.ComboboxMenuItemIcon = exports.useComboboxMenuItem = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const menu_1 = require("@workday/canvas-kit-react/menu");
@@ -11,6 +11,9 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
 const useComboboxModel_1 = require("./hooks/useComboboxModel");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 /**
  * 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
@@ -38,13 +41,24 @@ exports.useComboboxMenuItem = common_1.composeHooks(common_1.createElemPropsHook
         className: model.state.cursorId && model.state.cursorId === elemProps['data-id'] ? 'focus' : '',
     };
 }), collection_1.useListItemRegister, collection_1.useListItemAllowChildStrings);
+const comboboxMenuItemIconStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "1hcehcy", styles: "align-self:start;" }
+}, "combobox-menu-item-icon");
+exports.ComboboxMenuItemIcon = common_1.createSubcomponent('span')({
+    modelHook: useComboboxModel_1.useComboboxModel,
+})((elemProps, Element) => {
+    return react_1.default.createElement(icon_1.SystemIcon, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, comboboxMenuItemIconStencil())));
+});
+const comboboxMenuItemStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "4xv1tq", styles: "min-height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }
+}, "combobox-menu-item");
 exports.ComboboxMenuItem = common_1.createSubcomponent('li')({
     modelHook: useComboboxModel_1.useComboboxModel,
     elemPropsHook: exports.useComboboxMenuItem,
     subComponents: {
-        Icon: common_1.styled(icon_1.SystemIcon)({ alignSelf: 'start' }),
+        Icon: exports.ComboboxMenuItemIcon,
     },
 })(({ children, ...elemProps }, Element) => {
     return (react_1.default.createElement(tooltip_1.OverflowTooltip, { placement: "left" },
-        react_1.default.createElement(menu_1.StyledMenuItem, Object.assign({ minHeight: "xl", as: Element }, elemProps), children)));
+        react_1.default.createElement(menu_1.StyledMenuItem, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, comboboxMenuItemStencil())), children)));
 });

package/dist/commonjs/combobox/lib/ComboboxMenuList.d.ts

@@ -82,7 +82,6 @@ export declare const useComboboxMenuList: import("@workday/canvas-kit-react/comm
     readonly role: "listbox";
     readonly 'aria-labelledby': string;
     readonly id: `${string}-list`;
-    readonly flexDirection: "row" | "column";
 }>;
 export declare const ComboboxMenuList: import("@workday/canvas-kit-react/common").ElementComponentM<"ul", ComboboxMenuListProps<any>, {
     state: {

package/dist/commonjs/combobox/lib/ComboboxMenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenuList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAU,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAI3E,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;CAAG;AAE1E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO9B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB3B,CAAC"}
+{"version":3,"file":"ComboboxMenuList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAU,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAO3E,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;CAAG;AAE1E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM9B,CAAC;AAOH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAc3B,CAAC"}

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

@@ -5,11 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboboxMenuList = exports.useComboboxMenuList = void 0;
 const react_1 = __importDefault(require("react"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const menu_1 = require("@workday/canvas-kit-react/menu");
 const collection_1 = require("@workday/canvas-kit-react/collection");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useComboboxModel_1 = require("./hooks/useComboboxModel");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 /**
  * The `listbox` uses `aria-labelledby` pointing to the {@link ComboboxInput Combobox.Input}. This
  * input should be labelled by a form field label for proper accessibility. Use {@link FormField} to
@@ -20,12 +22,15 @@ exports.useComboboxMenuList = common_1.createElemPropsHook(menu_1.useMenuModel)(
         role: 'listbox',
         'aria-labelledby': model.state.id,
         id: `${model.state.id}-list`,
-        flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row',
     };
 });
+const comoboxMenuListStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "0", styles: "" },
+    extends: menu_1.menuListStencil
+}, "comobox-menu-list");
 exports.ComboboxMenuList = common_1.createSubcomponent('ul')({
     modelHook: useComboboxModel_1.useComboboxModel,
     elemPropsHook: exports.useComboboxMenuList,
 })(({ children, ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, background: tokens_1.commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto" }, elemProps), children));
+    return (react_1.default.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, marginY: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2) }, layout_1.mergeStyles(elemProps, comoboxMenuListStencil({ orientation: model.state.orientation }))), children));
 });

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

@@ -2,7 +2,7 @@ export { useMenuModel } from './lib/useMenuModel';
 export { Menu } from './lib/Menu';
 export { useMenuCard } from './lib/MenuCard';
 export { useMenuItem, StyledMenuItem, MenuItemProps } from './lib/MenuItem';
-export { useMenuList } from './lib/MenuList';
+export { useMenuList, menuListStencil } from './lib/MenuList';
 export { useMenuPopper } from './lib/MenuPopper';
 export { useMenuTarget, useMenuTargetContext } from './lib/MenuTarget';
 //# sourceMappingURL=index.d.ts.map

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,EAAC,MAAM,gBAAgB,CAAC;AAC3C,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,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"}

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.useMenuList = exports.StyledMenuItem = exports.useMenuItem = exports.useMenuCard = exports.Menu = exports.useMenuModel = void 0;
+exports.useMenuTargetContext = exports.useMenuTarget = exports.useMenuPopper = exports.menuListStencil = exports.useMenuList = exports.StyledMenuItem = 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");
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "useMenuItem", { enumerable: true, get: function
 Object.defineProperty(exports, "StyledMenuItem", { enumerable: true, get: function () { return MenuItem_1.StyledMenuItem; } });
 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; } });
 var MenuPopper_1 = require("./lib/MenuPopper");
 Object.defineProperty(exports, "useMenuPopper", { enumerable: true, get: function () { return MenuPopper_1.useMenuPopper; } });
 var MenuTarget_1 = require("./lib/MenuTarget");

package/dist/commonjs/menu/lib/MenuCard.d.ts

@@ -4,6 +4,15 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 export interface MenuCardProps extends ExtractProps<typeof Card, never> {
     children?: React.ReactNode;
 }
+export declare const menuCardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    minWidth: string;
+    transformOriginVertical: string;
+    transformOriginHorizontal: string;
+}, never>, {
+    minWidth: string;
+    transformOriginVertical: string;
+    transformOriginHorizontal: string;
+}, never, never>;
 export declare const useMenuCard: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/menu/lib/MenuCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0BD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}
+{"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAEL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe;;;;;;;;gBAwB1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBnB,CAAC"}

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

@@ -19,30 +19,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuCard = exports.useMenuCard = void 0;
+exports.MenuCard = exports.useMenuCard = exports.menuCardStencil = void 0;
 const React = __importStar(require("react"));
 const card_1 = require("@workday/canvas-kit-react/card");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useMenuModel_1 = require("./useMenuModel");
-const StyledCard = common_1.styled(card_1.Card)(tokens_1.type.levels.subtext.large, {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-}, ({ transformOrigin }) => {
-    if (transformOrigin == null) {
-        return {};
-    }
-    return {
-        transition: `transform ease-out 150ms`,
-        transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-        // Allow overriding of animation in special cases
-        '.wd-no-animation &': {
-            animation: 'none',
-        },
-    };
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+exports.menuCardStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        minWidth: canvas_kit_styling_1.px2rem(1),
+        transformOriginVertical: 'top',
+        transformOriginHorizontal: 'left',
+    },
+    base: { name: "fk6heg", styles: "--cnvs-menu-card-minWidth:0.0625rem;--cnvs-menu-card-transformOriginVertical:top;--cnvs-menu-card-transformOriginHorizontal:left;font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero, 0);max-width:calc(100vw - var(--cnvs-sys-space-x8, calc(0.25rem * 8)));box-shadow:var(--cnvs-sys-depth-3, 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12),0 0.375rem 1.5rem 0 rgba(31,38,46,0.08));min-width:var(--cnvs-menu-card-minWidth);box-sizing:border-box;transform-origin:var(--cnvs-menu-card-transformOriginVertical) var(--cnvs-menu-card-transformOriginHorizontal);.wd-no-animation &{animation:none;}" }
+}, "menu-card");
 exports.useMenuCard = common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(() => {
     return {};
 });
@@ -50,9 +43,13 @@ exports.MenuCard = common_1.createSubcomponent('div')({
     displayName: 'Menu.Card',
     modelHook: useMenuModel_1.useMenuModel,
     elemPropsHook: exports.useMenuCard,
-})((elemProps, Element, model) => {
+})(({ minWidth, ...elemProps }, Element, model) => {
     const transformOrigin = React.useMemo(() => {
         return popup_1.getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    return (React.createElement(StyledCard, Object.assign({ as: Element, maxWidth: `calc(100vw - ${tokens_1.space.l})`, transformOrigin: transformOrigin, padding: "zero", depth: 3 }, elemProps), elemProps.children));
+    return (React.createElement(card_1.Card, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, exports.menuCardStencil({
+        minWidth: typeof minWidth === 'number' ? canvas_kit_styling_1.px2rem(minWidth) : minWidth,
+        transformOriginVertical: transformOrigin.vertical,
+        transformOriginHorizontal: transformOrigin.horizontal,
+    }))), elemProps.children));
 });

package/dist/commonjs/menu/lib/MenuList.d.ts

@@ -82,6 +82,16 @@ export declare const useMenuList: import("@workday/canvas-kit-react/common").Beh
     role: string;
     'aria-labelledby': string;
 }>;
+export declare const menuListStencil: import("@workday/canvas-kit-styling").Stencil<{
+    orientation: {
+        vertical: {
+            flexDirection: "column";
+        };
+        horizontal: {
+            flexDirection: "row";
+        };
+    };
+}, {}, never, never>;
 export declare const MenuList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", MenuListProps<any>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/menu/lib/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAKxE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAQxE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;oBAiB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBnB,CAAC"}

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

@@ -19,23 +19,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuList = exports.useMenuList = void 0;
+exports.MenuList = exports.menuListStencil = exports.useMenuList = void 0;
 const React = __importStar(require("react"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const popup_1 = require("@workday/canvas-kit-react/popup");
 const useMenuModel_1 = require("./useMenuModel");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.useMenuList = common_1.composeHooks(common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(model => {
     return {
         role: 'menu',
         'aria-labelledby': model.state.id,
     };
 }), popup_1.useReturnFocus, popup_1.useFocusRedirect);
+exports.menuListStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "1xutlrd", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-radius:var(--cnvs-sys-shape-zero, 0rem);padding:var(--cnvs-sys-space-zero, 0);gap:var(--cnvs-sys-space-zero, 0);" },
+    modifiers: {
+        modifiers: {
+            vertical: { name: "cgq59l", styles: "flex-direction:column;" },
+            horizontal: { name: "1l0z8uk", styles: "flex-direction:row;" }
+        }
+    }
+}, "menu-list");
 exports.MenuList = common_1.createSubcomponent('div')({
     displayName: 'Menu.List',
     modelHook: useMenuModel_1.useMenuModel,
     elemPropsHook: exports.useMenuList,
 })(({ children, ...elemProps }, Element, model) => {
-    return (React.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, background: tokens_1.commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto", flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row' }, elemProps), children));
+    return (React.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, marginY: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2), overflowY: "auto" }, layout_1.mergeStyles(elemProps, exports.menuListStencil({ orientation: model.state.orientation }))), children));
 });