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

package/dist/commonjs/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AA+BD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QArCtB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4FJ,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAlGrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGH,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnHrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHH,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnJjB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmJD;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAnKL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiKD;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YArML;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmMD;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAxNL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsND;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA3OL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAJH;;;;mBAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgPH,CAAC"}

package/dist/commonjs/select/lib/Select.js

@@ -5,28 +5,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = exports.SelectCard = exports.SelectItem = exports.SelectInput = void 0;
 const react_1 = __importDefault(require("react"));
-const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const text_input_1 = require("@workday/canvas-kit-react/text-input");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const icon_1 = require("@workday/canvas-kit-react/icon");
-const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-const useSelectModel_1 = require("./hooks/useSelectModel");
 const useSelectCard_1 = require("./hooks/useSelectCard");
 const useSelectInput_1 = require("./hooks/useSelectInput");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
-const hiddenSelectStyles = canvas_kit_styling_1.createStyles({ name: "skcwps", styles: "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;" });
+const useSelectModel_1 = require("./hooks/useSelectModel");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const selectInputStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
+}, "select-input");
+const selectIconsStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "1isip6o", styles: "position:absolute;pointer-events:none;" }
+}, "select-icons");
+const hiddenSelectInputStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "1xuodxn", styles: "position:absolute;top:var(--cnvs-sys-space-zero, 0);bottom:var(--cnvs-sys-space-zero, 0);left:var(--cnvs-sys-space-zero, 0);right:var(--cnvs-sys-space-zero, 0);opacity:0;cursor:default;pointer-events:none;" }
+}, "hidden-select-input");
 exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectInput_1.useSelectInput,
 })(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, onFocus, value, name, ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(text_input_1.InputGroup, { width: width, "data-width": "ck-formfield-width" },
-        inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none" },
+    return (react_1.default.createElement(text_input_1.InputGroup, { "data-width": "ck-formfield-width" },
+        inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, Object.assign({}, selectIconsStencil()),
             react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
-        react_1.default.createElement(text_input_1.InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, onFocus: onFocus, name: name, ref: ref }),
-        react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, layout_1.mergeStyles(elemProps, [selectInputStyles]))),
-        react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
+        react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, onFocus: onFocus, name: name, ref: ref }, hiddenSelectInputStencil())),
+        react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, layout_1.mergeStyles(elemProps, selectInputStencil()))),
+        react_1.default.createElement(text_input_1.InputGroup.InnerEnd, Object.assign({}, selectIconsStencil()),
             react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
 });
 exports.SelectItem = common_1.createSubcomponent('li')({
@@ -37,11 +45,12 @@ exports.SelectItem = common_1.createSubcomponent('li')({
 })(({ children, ...elemProps }, Element, _model) => {
     return (react_1.default.createElement(combobox_1.Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
 });
+const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "1621qa2", styles: "max-height:18.75rem;" });
 exports.SelectCard = common_1.createSubcomponent('div')({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectCard_1.useSelectCard,
 })(({ children, ...elemProps }, Element) => {
-    return (react_1.default.createElement(combobox_1.Combobox.Menu.Card, Object.assign({ maxHeight: 300, as: Element }, elemProps), children));
+    return (react_1.default.createElement(combobox_1.Combobox.Menu.Card, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, selectCardStyles)), children));
 });
 /**
  * Use `Select` to allow users to choose an option from a list or type characters to select a matching option.

package/dist/es6/collection/lib/ListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAM3D,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5E;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOrB,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBL,CAAC"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5E;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOrB,CAAC;AA0BH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBN,CAAC"}

package/dist/es6/collection/lib/ListBox.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { createContainer, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
-import { Box, Flex } from '@workday/canvas-kit-react/layout';
+import { Box, Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 import { useListModel } from './useListModel';
 import { useListRenderItems } from './useListRenderItem';
 import { useListItemRegister } from './useListItemRegister';
@@ -19,6 +21,18 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
         },
     };
 });
+const listBoxContainerStencil = createStencil({
+    base: { name: "roynbj", styles: "box-sizing:border-box;" },
+    modifiers: {
+        modifiers: {
+            vertical: { name: "13v3rg8", styles: "overflow-y:auto;" },
+            horizontal: { name: "mru7yp", styles: "overflow-y:undefined;" }
+        }
+    }
+}, "list-box-container");
+const listBoxStencil = createStencil({
+    base: { name: "1rhzmpl", styles: "flex-direction:column;margin-top:var(--cnvs-sys-space-zero, 0);margin-bottom:var(--cnvs-sys-space-zero, 0);" }
+}, "list-box");
 /**
  * The `ListBox` component that offers vertical rendering of a collection in the form of a
  * 2-dimension list. It supports virtualization, rendering only visible items in the DOM while also
@@ -52,10 +66,9 @@ export const ListBox = createContainer('ul')({
          */
         Item: ListBoxItem,
     },
-})(({ height, maxHeight, marginY, ...elemProps }, Element, model) => {
-    // We're moving `marginY` to the container to not interfere with the virtualization size. We set
+})(({ height, maxHeight, marginY, marginBottom, overflowY, marginTop, ...elemProps }, Element, model) => {
+    // We're removing `marginY, marginBottom, overflowY, marginTo` from elemProps and applying them to the container as to not interfere with the virtualization size. We set
     // the `marginY` on the Flex to `0` to avoid inaccurate scrollbars
-    // TODO figure out what style props should go to which `Box`
-    return (React.createElement(Box, { ref: model.state.containerRef, marginY: marginY, maxHeight: maxHeight, overflowY: model.state.orientation === 'vertical' ? 'auto' : undefined },
-        React.createElement(Flex, Object.assign({ as: Element, flexDirection: "column" }, elemProps, { marginY: 0 }), useListRenderItems(model, elemProps.children))));
+    return (React.createElement("div", Object.assign({ ref: model.state.containerRef }, mergeStyles({ maxHeight, marginBottom: marginY, marginTop: marginY }, listBoxContainerStencil({ orientation: model.state.orientation }))),
+        React.createElement(Flex, Object.assign({ as: Element }, mergeStyles(elemProps, listBoxStencil())), useListRenderItems(model, elemProps.children))));
 });

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

@@ -1992,11 +1992,83 @@ export declare const Combobox: import("@workday/canvas-kit-react/common").Compon
             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;
-            }, {}, {}>;
+            Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("../..").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
+                state: {
+                    stackRef: React.RefObject<HTMLDivElement>;
+                    targetRef: React.RefObject<HTMLButtonElement>;
+                    initialFocusRef: React.RefObject<any> | undefined;
+                    returnFocusRef: React.RefObject<any> | undefined;
+                    placement: import("@popperjs/core").Placement;
+                    id: string;
+                    visibility: "hidden" | "visible";
+                    selectedIds: string[] | "all";
+                    unselectedIds: string[];
+                    cursorId: string;
+                    columnCount: number;
+                    pageSizeRef: React.MutableRefObject<number>;
+                    cursorIndexRef: {
+                        readonly current: number;
+                    };
+                    UNSTABLE_virtual: {
+                        virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+                        totalSize: number;
+                        scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+                        scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+                        measure: () => void;
+                    };
+                    UNSTABLE_defaultItemHeight: number;
+                    containerRef: React.RefObject<HTMLDivElement>;
+                    orientation: "horizontal" | "vertical";
+                    indexRef: React.MutableRefObject<number>;
+                    nonInteractiveIds: string[];
+                    isVirtualized: boolean;
+                    items: import("../..").Item<any>[];
+                    mode: "multiple" | "single";
+                    value: string | undefined;
+                    inputRef: React.RefObject<HTMLInputElement>;
+                    width: number;
+                };
+                events: {
+                    setWidth(width: number): void;
+                    updatePlacement(data: {
+                        placement: import("@popperjs/core").Placement;
+                    }): void;
+                    show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+                    hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+                    select(data: {
+                        id: string;
+                    }): void;
+                    selectAll(): void;
+                    unselectAll(): void;
+                    goTo(data: {
+                        id: string;
+                    }): void;
+                    goToNext(): void;
+                    goToPrevious(): void;
+                    goToPreviousRow(): void;
+                    goToNextRow(): void;
+                    goToFirst(): void;
+                    goToLast(): void;
+                    goToFirstOfRow(): void;
+                    goToLastOfRow(): void;
+                    goToNextPage(): void;
+                    goToPreviousPage(): void;
+                    registerItem(data: {
+                        item: any;
+                        textValue: string;
+                    }): void;
+                    unregisterItem(data: {
+                        id: string;
+                    }): void;
+                    updateItemHeight(data: {
+                        value: number;
+                    }): void;
+                };
+                onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+                selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+                navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+                getId: (item: any) => string;
+            }>;
         };
         Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ComboboxCard").ComboboxCardProps, {
             state: {

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

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

@@ -341,11 +341,83 @@ export declare const ComboboxMenu: import("@workday/canvas-kit-react/common").El
         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;
-        }, {}, {}>;
+        Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("../..").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
+            state: {
+                stackRef: React.RefObject<HTMLDivElement>;
+                targetRef: React.RefObject<HTMLButtonElement>;
+                initialFocusRef: React.RefObject<any> | undefined;
+                returnFocusRef: React.RefObject<any> | undefined;
+                placement: import("@popperjs/core").Placement;
+                id: string;
+                visibility: "hidden" | "visible";
+                selectedIds: string[] | "all";
+                unselectedIds: string[];
+                cursorId: string;
+                columnCount: number;
+                pageSizeRef: React.MutableRefObject<number>;
+                cursorIndexRef: {
+                    readonly current: number;
+                };
+                UNSTABLE_virtual: {
+                    virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+                    totalSize: number;
+                    scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+                    scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+                    measure: () => void;
+                };
+                UNSTABLE_defaultItemHeight: number;
+                containerRef: React.RefObject<HTMLDivElement>;
+                orientation: "horizontal" | "vertical";
+                indexRef: React.MutableRefObject<number>;
+                nonInteractiveIds: string[];
+                isVirtualized: boolean;
+                items: import("../..").Item<any>[];
+                mode: "multiple" | "single";
+                value: string | undefined;
+                inputRef: React.RefObject<HTMLInputElement>;
+                width: number;
+            };
+            events: {
+                setWidth(width: number): void;
+                updatePlacement(data: {
+                    placement: import("@popperjs/core").Placement;
+                }): void;
+                show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+                hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+                select(data: {
+                    id: string;
+                }): void;
+                selectAll(): void;
+                unselectAll(): void;
+                goTo(data: {
+                    id: string;
+                }): void;
+                goToNext(): void;
+                goToPrevious(): void;
+                goToPreviousRow(): void;
+                goToNextRow(): void;
+                goToFirst(): void;
+                goToLast(): void;
+                goToFirstOfRow(): void;
+                goToLastOfRow(): void;
+                goToNextPage(): void;
+                goToPreviousPage(): void;
+                registerItem(data: {
+                    item: any;
+                    textValue: string;
+                }): void;
+                unregisterItem(data: {
+                    id: string;
+                }): void;
+                updateItemHeight(data: {
+                    value: number;
+                }): void;
+            };
+            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+            selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+            navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+            getId: (item: any) => string;
+        }>;
     };
     /**
      * `Combobox.Menu.Card` is a non-semantic element used to give the dropdown menu its distinct visual

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGrB;;;;;;OAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAML,CAAC"}
+{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGrB;;;;;;OAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAML,CAAC"}

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

@@ -1,6 +1,7 @@
 import React from 'react';
-export interface ComboboxMenuItemProps {
-    children: React.ReactNode;
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { StyledMenuItem } from '@workday/canvas-kit-react/menu';
+export interface ComboboxMenuItemProps extends ExtractProps<typeof StyledMenuItem, never> {
 }
 /**
  * This hook sets up accessibility and behavior of a {@link ComboboxMenuItem Combobox.Menu.Item}
@@ -98,6 +99,83 @@ export declare const useComboboxMenuItem: import("@workday/canvas-kit-react/comm
 } & {
     'data-id'?: string | undefined;
 }>;
+export declare const ComboboxMenuItemIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/icon").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
+        value: string | undefined;
+        inputRef: React.RefObject<HTMLInputElement>;
+        width: number;
+    };
+    events: {
+        setWidth(width: number): void;
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}>;
 export declare const ComboboxMenuItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li", ComboboxMenuItemProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -175,10 +253,82 @@ export declare const ComboboxMenuItem: import("@workday/canvas-kit-react/common"
     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;
-    }, {}, {}>;
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/icon").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+            selectedIds: string[] | "all";
+            unselectedIds: string[];
+            cursorId: string;
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: number;
+            };
+            UNSTABLE_virtual: {
+                virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+                totalSize: number;
+                scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+                scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+                measure: () => void;
+            };
+            UNSTABLE_defaultItemHeight: number;
+            containerRef: React.RefObject<HTMLDivElement>;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("@workday/canvas-kit-react/collection").Item<any>[];
+            mode: "multiple" | "single";
+            value: string | undefined;
+            inputRef: React.RefObject<HTMLInputElement>;
+            width: number;
+        };
+        events: {
+            setWidth(width: number): void;
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            select(data: {
+                id: string;
+            }): void;
+            selectAll(): void;
+            unselectAll(): void;
+            goTo(data: {
+                id: string;
+            }): void;
+            goToNext(): void;
+            goToPrevious(): void;
+            goToPreviousRow(): void;
+            goToNextRow(): void;
+            goToFirst(): void;
+            goToLast(): void;
+            goToFirstOfRow(): void;
+            goToLastOfRow(): void;
+            goToNextPage(): void;
+            goToPreviousPage(): void;
+            registerItem(data: {
+                item: any;
+                textValue: string;
+            }): void;
+            unregisterItem(data: {
+                id: string;
+            }): void;
+            updateItemHeight(data: {
+                value: number;
+            }): void;
+        };
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+        navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+        getId: (item: any) => string;
+    }>;
 };
 //# sourceMappingURL=ComboboxMenuItem.d.ts.map

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

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

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

@@ -1,10 +1,13 @@
 import React from 'react';
-import { composeHooks, createElemPropsHook, createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { composeHooks, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
 import { StyledMenuItem, useMenuModel } from '@workday/canvas-kit-react/menu';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { useListItemAllowChildStrings, useListItemRegister, } from '@workday/canvas-kit-react/collection';
 import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
 import { useComboboxModel } from './hooks/useComboboxModel';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 /**
  * 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
@@ -32,13 +35,24 @@ export const useComboboxMenuItem = composeHooks(createElemPropsHook(useMenuModel
         className: model.state.cursorId && model.state.cursorId === elemProps['data-id'] ? 'focus' : '',
     };
 }), useListItemRegister, useListItemAllowChildStrings);
+const comboboxMenuItemIconStencil = createStencil({
+    base: { name: "1hcehcy", styles: "align-self:start;" }
+}, "combobox-menu-item-icon");
+export const ComboboxMenuItemIcon = createSubcomponent('span')({
+    modelHook: useComboboxModel,
+})((elemProps, Element) => {
+    return React.createElement(SystemIcon, Object.assign({ as: Element }, mergeStyles(elemProps, comboboxMenuItemIconStencil())));
+});
+const comboboxMenuItemStencil = createStencil({
+    base: { name: "4xv1tq", styles: "min-height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }
+}, "combobox-menu-item");
 export const ComboboxMenuItem = createSubcomponent('li')({
     modelHook: useComboboxModel,
     elemPropsHook: useComboboxMenuItem,
     subComponents: {
-        Icon: styled(SystemIcon)({ alignSelf: 'start' }),
+        Icon: ComboboxMenuItemIcon,
     },
 })(({ children, ...elemProps }, Element) => {
     return (React.createElement(OverflowTooltip, { placement: "left" },
-        React.createElement(StyledMenuItem, Object.assign({ minHeight: "xl", as: Element }, elemProps), children)));
+        React.createElement(StyledMenuItem, Object.assign({ as: Element }, mergeStyles(elemProps, comboboxMenuItemStencil())), children)));
 });

package/dist/es6/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/es6/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/es6/combobox/lib/ComboboxMenuList.js

@@ -1,9 +1,11 @@
 import React from 'react';
-import { commonColors } from '@workday/canvas-kit-react/tokens';
 import { createElemPropsHook, createSubcomponent } from '@workday/canvas-kit-react/common';
-import { useMenuModel } from '@workday/canvas-kit-react/menu';
+import { useMenuModel, menuListStencil } from '@workday/canvas-kit-react/menu';
 import { ListBox } from '@workday/canvas-kit-react/collection';
+import { system } from '@workday/canvas-tokens-web';
 import { useComboboxModel } from './hooks/useComboboxModel';
+import { createStencil, cssVar } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@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
@@ -14,12 +16,15 @@ export const useComboboxMenuList = createElemPropsHook(useMenuModel)(model => {
         role: 'listbox',
         'aria-labelledby': model.state.id,
         id: `${model.state.id}-list`,
-        flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row',
     };
 });
+const comoboxMenuListStencil = createStencil({
+    base: { name: "0", styles: "" },
+    extends: menuListStencil
+}, "comobox-menu-list");
 export const ComboboxMenuList = createSubcomponent('ul')({
     modelHook: useComboboxModel,
     elemPropsHook: useComboboxMenuList,
 })(({ children, ...elemProps }, Element, model) => {
-    return (React.createElement(ListBox, Object.assign({ as: Element, model: model, background: commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto" }, elemProps), children));
+    return (React.createElement(ListBox, Object.assign({ as: Element, model: model, marginY: cssVar(system.space.x2) }, mergeStyles(elemProps, comoboxMenuListStencil({ orientation: model.state.orientation }))), children));
 });