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

package/dist/es6/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/es6/select/lib/Select.js

@@ -1,26 +1,34 @@
 import React from 'react';
-import { createSubcomponent, createContainer, } from '@workday/canvas-kit-react/common';
+import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
 import { Combobox } from '@workday/canvas-kit-react/combobox';
+import { createStencil, createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
-import { useSelectModel } from './hooks/useSelectModel';
 import { useSelectCard } from './hooks/useSelectCard';
 import { useSelectInput } from './hooks/useSelectInput';
-import { createStyles } from '@workday/canvas-kit-styling';
-const selectInputStyles = createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
-const hiddenSelectStyles = createStyles({ name: "skcwps", styles: "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;" });
+import { useSelectModel } from './hooks/useSelectModel';
+import { createSubcomponent, createContainer, } from '@workday/canvas-kit-react/common';
+import { system } from '@workday/canvas-tokens-web';
+const selectInputStencil = createStencil({
+    base: { name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
+}, "select-input");
+const selectIconsStencil = createStencil({
+    base: { name: "1isip6o", styles: "position:absolute;pointer-events:none;" }
+}, "select-icons");
+const hiddenSelectInputStencil = 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");
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,
 })(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, onFocus, value, name, ...elemProps }, Element, model) => {
-    return (React.createElement(InputGroup, { width: width, "data-width": "ck-formfield-width" },
-        inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
+    return (React.createElement(InputGroup, { "data-width": "ck-formfield-width" },
+        inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, Object.assign({}, selectIconsStencil()),
             React.createElement(SystemIcon, { icon: inputStartIcon }))),
-        React.createElement(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.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, [selectInputStyles]))),
-        React.createElement(InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
+        React.createElement(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.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, selectInputStencil()))),
+        React.createElement(InputGroup.InnerEnd, Object.assign({}, selectIconsStencil()),
             React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
 });
 export const SelectItem = createSubcomponent('li')({
@@ -31,11 +39,12 @@ export const SelectItem = createSubcomponent('li')({
 })(({ children, ...elemProps }, Element, _model) => {
     return (React.createElement(Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
 });
+const selectCardStyles = createStyles({ name: "1621qa2", styles: "max-height:18.75rem;" });
 export const SelectCard = createSubcomponent('div')({
     modelHook: useSelectModel,
     elemPropsHook: useSelectCard,
 })(({ children, ...elemProps }, Element) => {
-    return (React.createElement(Combobox.Menu.Card, Object.assign({ maxHeight: 300, as: Element }, elemProps), children));
+    return (React.createElement(Combobox.Menu.Card, Object.assign({ as: Element }, 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/menu/index.ts

@@ -3,6 +3,6 @@ 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';

package/menu/lib/MenuCard.tsx

@@ -1,46 +1,48 @@
 import * as React from 'react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+
 import {
-  styled,
-  TransformOrigin,
   createSubcomponent,
-  StyledType,
   ExtractProps,
   createElemPropsHook,
 } from '@workday/canvas-kit-react/common';
 import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
+import {system, base} from '@workday/canvas-tokens-web';
 
 import {useMenuModel} from './useMenuModel';
+import {createStencil, calc, px2rem} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface MenuCardProps extends ExtractProps<typeof Card, never> {
   children?: React.ReactNode;
 }
 
-const StyledCard = styled(Card)<
-  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(
-  type.levels.subtext.large,
-  {
+export const menuCardStencil = createStencil({
+  vars: {
+    minWidth: px2rem(1),
+    transformOriginVertical: 'top',
+    transformOriginHorizontal: 'left',
+  },
+  base: ({transformOriginVertical, transformOriginHorizontal, minWidth}) => ({
+    ...system.type.subtext.large,
+    color: base.blackPepper300,
     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',
-      },
-    };
-  }
-);
+    transition: `transform ease-out 150ms`,
+    padding: system.space.zero,
+    maxWidth: calc.subtract('100vw', system.space.x8),
+    boxShadow: system.depth[3],
+    minWidth: minWidth,
+    boxSizing: 'border-box',
+    transformOrigin: `${transformOriginVertical} ${transformOriginHorizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+  }),
+});
 
 export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
   return {};
@@ -50,21 +52,24 @@ export const MenuCard = createSubcomponent('div')({
   displayName: 'Menu.Card',
   modelHook: useMenuModel,
   elemPropsHook: useMenuCard,
-})<MenuCardProps>((elemProps, Element, model) => {
+})<MenuCardProps>(({minWidth, ...elemProps}, Element, model) => {
   const transformOrigin = React.useMemo(() => {
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
 
   return (
-    <StyledCard
+    <Card
       as={Element}
-      maxWidth={`calc(100vw - ${space.l})`}
-      transformOrigin={transformOrigin}
-      padding="zero"
-      depth={3}
-      {...elemProps}
+      {...mergeStyles(
+        elemProps,
+        menuCardStencil({
+          minWidth: typeof minWidth === 'number' ? px2rem(minWidth as number) : minWidth,
+          transformOriginVertical: transformOrigin.vertical,
+          transformOriginHorizontal: transformOrigin.horizontal,
+        })
+      )}
     >
       {elemProps.children}
-    </StyledCard>
+    </Card>
   );
 });

package/menu/lib/MenuList.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import {commonColors} from '@workday/canvas-kit-react/tokens';
 import {
   createSubcomponent,
   createElemPropsHook,
@@ -11,6 +10,9 @@ import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
 import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface MenuListProps<T = any>
   extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
@@ -31,6 +33,25 @@ export const useMenuList = composeHooks(
   useFocusRedirect
 );
 
+export const menuListStencil = createStencil({
+  base: {
+    background: base.frenchVanilla100,
+    borderRadius: system.shape.zero,
+    padding: system.space.zero,
+    gap: system.space.zero,
+  },
+  modifiers: {
+    orientation: {
+      vertical: {
+        flexDirection: 'column',
+      },
+      horizontal: {
+        flexDirection: 'row',
+      },
+    },
+  },
+});
+
 export const MenuList = createSubcomponent('div')({
   displayName: 'Menu.List',
   modelHook: useMenuModel,
@@ -40,14 +61,9 @@ export const MenuList = createSubcomponent('div')({
     <ListBox
       as={Element}
       model={model}
-      background={commonColors.background}
-      borderRadius="zero"
-      padding="zero"
-      marginY="xxs"
-      gap="zero"
+      marginY={cssVar(system.space.x2)}
       overflowY="auto"
-      flexDirection={model.state.orientation === 'vertical' ? 'column' : 'row'}
-      {...elemProps}
+      {...mergeStyles(elemProps, menuListStencil({orientation: model.state.orientation}))}
     >
       {children}
     </ListBox>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.715-next.0",
+  "version": "11.0.0-alpha.718-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,8 +50,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.715-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.715-next.0",
+    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.718-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.718-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "@workday/design-assets-types": "^0.2.8",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "fd7bd01d57a398a1261b471a2424a3b3ef211216"
+  "gitHead": "2281ef0e9e908a07a62610a9b41dc6b1e744bb3e"
 }

package/select/lib/Select.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
-import {
-  createSubcomponent,
-  ExtractProps,
-  createContainer,
-  Themeable,
-} from '@workday/canvas-kit-react/common';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {Combobox} from '@workday/canvas-kit-react/combobox';
-
+import {createStencil, createStyles, CSProps, px2rem} from '@workday/canvas-kit-styling';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
-import {useSelectModel} from './hooks/useSelectModel';
 import {useSelectCard} from './hooks/useSelectCard';
 import {useSelectInput} from './hooks/useSelectInput';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createStyles, CSProps} from '@workday/canvas-kit-styling';
+import {useSelectModel} from './hooks/useSelectModel';
+import {
+  createSubcomponent,
+  ExtractProps,
+  createContainer,
+  Themeable,
+} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
   /**
@@ -26,23 +26,33 @@ export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProp
   inputStartIcon?: CanvasSystemIcon;
 }
 
-const selectInputStyles = createStyles({
-  caretColor: 'transparent',
-  cursor: 'default',
-  '&::selection': {
-    backgroundColor: 'transparent',
+const selectInputStencil = createStencil({
+  base: {
+    caretColor: 'transparent',
+    cursor: 'default',
+    '&::selection': {
+      backgroundColor: 'transparent',
+    },
   },
 });
 
-const hiddenSelectStyles = createStyles({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  opacity: 0,
-  cursor: 'default',
-  pointerEvents: 'none',
+const selectIconsStencil = createStencil({
+  base: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});
+const hiddenSelectInputStencil = createStencil({
+  base: {
+    position: 'absolute',
+    top: system.space.zero,
+    bottom: system.space.zero,
+    left: system.space.zero,
+    right: system.space.zero,
+    opacity: 0,
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
 });
 
 export const SelectInput = createSubcomponent(TextInput)({
@@ -69,9 +79,9 @@ export const SelectInput = createSubcomponent(TextInput)({
     model
   ) => {
     return (
-      <InputGroup width={width} data-width="ck-formfield-width">
+      <InputGroup data-width="ck-formfield-width">
         {inputStartIcon && model.state.selectedIds.length > 0 && (
-          <InputGroup.InnerStart pointerEvents="none">
+          <InputGroup.InnerStart {...selectIconsStencil()}>
             <SystemIcon icon={inputStartIcon} />
           </InputGroup.InnerStart>
         )}
@@ -79,7 +89,6 @@ export const SelectInput = createSubcomponent(TextInput)({
         <InputGroup.Input
           error={error}
           disabled={disabled}
-          className={hiddenSelectStyles}
           tabIndex={-1}
           aria-hidden={true}
           onChange={onChange}
@@ -88,6 +97,7 @@ export const SelectInput = createSubcomponent(TextInput)({
           onFocus={onFocus}
           name={name}
           ref={ref}
+          {...hiddenSelectInputStencil()}
         />
         {/* Visual input */}
         <InputGroup.Input
@@ -96,9 +106,9 @@ export const SelectInput = createSubcomponent(TextInput)({
           placeholder={placeholder}
           error={error}
           {...textInputProps}
-          {...mergeStyles(elemProps, [selectInputStyles])}
+          {...mergeStyles(elemProps, selectInputStencil())}
         />
-        <InputGroup.InnerEnd position="absolute" pointerEvents="none">
+        <InputGroup.InnerEnd {...selectIconsStencil()}>
           <SystemIcon icon={caretDownSmallIcon} />
         </InputGroup.InnerEnd>
       </InputGroup>
@@ -119,12 +129,16 @@ export const SelectItem = createSubcomponent('li')({
   );
 });
 
+const selectCardStyles = createStyles({
+  maxHeight: px2rem(300),
+});
+
 export const SelectCard = createSubcomponent('div')({
   modelHook: useSelectModel,
   elemPropsHook: useSelectCard,
 })<ExtractProps<typeof Combobox.Menu.Card>>(({children, ...elemProps}, Element) => {
   return (
-    <Combobox.Menu.Card maxHeight={300} as={Element} {...elemProps}>
+    <Combobox.Menu.Card as={Element} {...mergeStyles(elemProps, selectCardStyles)}>
       {children}
     </Combobox.Menu.Card>
   );