@workday/canvas-kit-react 8.0.0 → 8.0.2

package/dist/es6/layout/lib/utils/stack.d.ts

@@ -1,8 +1,7 @@
-import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
-import { CanvasSpaceKeys } from '@workday/canvas-kit-react/tokens';
+import { SystemPropValues } from './systemProps';
 export declare type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 declare const selector = "& > *:not(style) ~ *:not(style)";
-export declare type StackSpacing = CanvasSpaceKeys | number | (string & {});
+export declare type StackSpacing = SystemPropValues['space'];
 export declare type StackStyleProps = {
     /** sets space values between child elements (bidirectional support) */
     spacing: StackSpacing;
@@ -17,9 +16,7 @@ export declare type StackStyleProps = {
      * */
     shouldWrapChildren?: boolean;
 };
-export declare function stack<P extends StackStyleProps & {
-    theme?: PartialEmotionCanvasTheme;
-}>(props: P): {
+export declare function stack<P extends StackStyleProps>(props: P): {
     "& > *:not(style) ~ *:not(style)": {};
 };
 export {};

package/dist/es6/layout/lib/utils/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAE1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAuB,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAEvF,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD,oBAAY,YAAY,GAAG,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEpE,oBAAY,eAAe,GAAG;IAC5B,uEAAuE;IACvE,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;SAGK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA+BF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,GAAG;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,EAAE,KAAK,EAAE,CAAC;;EAoB9F"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEvE,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD,oBAAY,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAErD,oBAAY,eAAe,GAAG;IAC5B,uEAAuE;IACvE,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;SAGK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC;;EAuBxD"}

package/dist/es6/layout/lib/utils/stack.js

@@ -1,49 +1,23 @@
-import { ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
 import { space as spaceTokens } from '@workday/canvas-kit-react/tokens';
 var selector = '& > *:not(style) ~ *:not(style)';
-var column = function (value) { return ({
-    marginTop: spaceTokens[value] || value,
-}); };
-var columnReverse = function (value) { return ({
-    marginBottom: spaceTokens[value] || value,
-}); };
-var row = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'marginRight' : 'marginLeft';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var rowReverse = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'marginLeft' : 'marginRight';
-    return _a = {},
-        _a[attr] = spaceTokens[value] || value,
-        _a;
-};
-var stackDirectionProps = {
-    column: column,
-    'column-reverse': columnReverse,
-    row: row,
-    'row-reverse': rowReverse,
+var getSpace = function (value) {
+    return spaceTokens[value] || value;
 };
 export function stack(props) {
     var _a;
-    var styles = {};
     var _b = props.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = props.spacing;
-    if (flexDirection === 'column' || flexDirection === 'column-reverse') {
-        var stackFn = stackDirectionProps[flexDirection];
-        styles = stackFn(spacing);
+    var styles = {};
+    if (flexDirection === 'column') {
+        styles = { marginTop: getSpace(spacing) };
+    }
+    if (flexDirection === 'column-reverse') {
+        styles = { marginBottom: getSpace(spacing) };
+    }
+    if (flexDirection === 'row') {
+        styles = { marginInlineStart: getSpace(spacing) };
     }
-    if (flexDirection === 'row' || flexDirection === 'row-reverse') {
-        // stack will always be used within the context of a component, but eslint doesn't know that
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        var canvas = useTheme(props.theme).canvas;
-        var stackFn = stackDirectionProps[flexDirection];
-        var isRTL = canvas.direction === ContentDirection.RTL;
-        styles = stackFn(spacing, isRTL);
+    if (flexDirection === 'row-reverse') {
+        styles = { marginInlineEnd: getSpace(spacing) };
     }
     return _a = {},
         _a[selector] = styles,

package/dist/es6/layout/lib/utils/styleProps.d.ts

@@ -0,0 +1,41 @@
+import { BackgroundStyleProps } from './background';
+import { BorderStyleProps } from './border';
+import { ColorStyleProps } from './color';
+import { DepthStyleProps } from './depth';
+import { FlexStyleProps } from './flex';
+import { FlexItemStyleProps } from './flexItem';
+import { GridStyleProps } from './grid';
+import { GridItemStyleProps } from './gridItem';
+import { LayoutStyleProps } from './layout';
+import { OtherStyleProps } from './other';
+import { PositionStyleProps } from './position';
+import { SpaceStyleProps } from './space';
+import { TextStyleProps } from './text';
+/**
+ * Common Style Props
+ * ---
+ *Types for common style props shared across all components
+ *
+ * - background
+ * - border
+ * - color
+ * - depth
+ * - flexItem
+ * - gridItem
+ * - layout
+ * - other
+ * - position
+ * - space
+ * - text
+ */
+export declare type CommonStyleProps = BackgroundStyleProps & BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & GridItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & TextStyleProps;
+/**
+ * All Style Props
+ * ---
+ * Types for every style prop
+ * - common
+ * - flex
+ * - grid
+ */
+export declare type AllStyleProps = CommonStyleProps & Omit<FlexStyleProps, 'display'> & Omit<GridStyleProps, 'display'>;
+//# sourceMappingURL=styleProps.d.ts.map

package/dist/es6/layout/lib/utils/styleProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleProps.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/styleProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAC,cAAc,EAAC,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAC,kBAAkB,EAAC,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAC,cAAc,EAAC,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAC,kBAAkB,EAAC,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAC,kBAAkB,EAAC,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAC,cAAc,EAAC,MAAM,QAAQ,CAAC;AAEtC;;;;;;;;;;;;;;;;GAgBG;AACH,oBAAY,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,cAAc,CAAC;AAEjB;;;;;;;GAOG;AACH,oBAAY,aAAa,GAAG,gBAAgB,GAE1C,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAE/B,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC"}

package/dist/es6/layout/lib/utils/systemProps.d.ts

@@ -0,0 +1,31 @@
+import { CanvasBorderRadiusKeys, CanvasColor, CanvasDepth, CanvasSpaceKeys, CanvasTypeProperties } from '@workday/canvas-kit-react/tokens';
+export declare type SystemPropNames = 'color' | 'depth' | 'font' | 'fontSize' | 'fontWeight' | 'shape' | 'space';
+/**
+ * Canvas System Prop Values
+ * ---
+ * These system prop values are restricted to Canvas token values.
+ */
+export declare type CanvasSystemPropValues = {
+    color: CanvasColor;
+    depth: keyof CanvasDepth;
+    font: keyof CanvasTypeProperties['fontFamilies'];
+    fontSize: keyof CanvasTypeProperties['fontSizes'];
+    fontWeight: keyof CanvasTypeProperties['fontWeights'];
+    shape: CanvasBorderRadiusKeys;
+    space: CanvasSpaceKeys;
+};
+/**
+ * System Prop Values
+ * ---
+ * These system prop values include Canvas System Prop Values and generic values.
+ */
+export declare type SystemPropValues = {
+    color: CanvasSystemPropValues['color'] | (string & {});
+    depth: CanvasSystemPropValues['depth'];
+    font: CanvasSystemPropValues['font'] | (string & {});
+    fontSize: CanvasSystemPropValues['fontSize'] | (string & {});
+    fontWeight: CanvasSystemPropValues['fontWeight'] | (string & {});
+    shape: CanvasSystemPropValues['shape'] | number | (string & {});
+    space: CanvasSystemPropValues['space'] | number | (string & {});
+};
+//# sourceMappingURL=systemProps.d.ts.map

package/dist/es6/layout/lib/utils/systemProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"systemProps.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/systemProps.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,WAAW,EACX,WAAW,EACX,eAAe,EACf,oBAAoB,EACrB,MAAM,kCAAkC,CAAC;AAE1C,oBAAY,eAAe,GACvB,OAAO,GACP,OAAO,GACP,MAAM,GACN,UAAU,GACV,YAAY,GACZ,OAAO,GACP,OAAO,CAAC;AAEZ;;;;GAIG;AACH,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,WAAW,CAAC;IACzB,IAAI,EAAE,MAAM,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,EAAE,MAAM,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAClD,UAAU,EAAE,MAAM,oBAAoB,CAAC,aAAa,CAAC,CAAC;IACtD,KAAK,EAAE,sBAAsB,CAAC;IAC9B,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,oBAAY,gBAAgB,GAAG;IAC7B,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACvD,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,IAAI,EAAE,sBAAsB,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrD,QAAQ,EAAE,sBAAsB,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC7D,UAAU,EAAE,sBAAsB,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjE,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAChE,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACjE,CAAC"}

package/dist/es6/layout/lib/utils/systemProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es6/layout/lib/utils/text.d.ts

@@ -0,0 +1,53 @@
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to for CSS font and text properties */
+export declare type TextStyleProps = {
+    /**
+     * - sets [CSS font-family property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
+     * - system tokens: `font` */
+    fontFamily?: Property.FontFamily | SystemPropValues['font'];
+    /**
+     * - sets [CSS font-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
+     * - system tokens: `fontSize` */
+    fontSize?: Property.FontSize | SystemPropValues['fontSize'];
+    /** sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) */
+    fontStyle?: Property.FontStyle;
+    /**
+     * - sets [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+     * - system tokens: `fontWeight` */
+    fontWeight?: Property.FontWeight | SystemPropValues['fontWeight'];
+    /** sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) */
+    lineHeight?: Property.LineHeight;
+    /** sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) */
+    letterSpacing?: Property.LetterSpacing;
+    /** sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) */
+    textAlign?: Property.TextAlign;
+    /** sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) */
+    textDecoration?: Property.TextDecoration;
+    /** sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) */
+    textOverflow?: Property.TextOverflow;
+    /** sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) */
+    textTransform?: Property.TextTransform;
+    /** sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) */
+    textShadow?: Property.TextShadow;
+    /** sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) */
+    whiteSpace?: Property.WhiteSpace;
+    /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) */
+    wordBreak?: Property.WordBreak;
+};
+export declare const textStyleFnConfigs: StyleFnConfig[];
+export declare const textStyleFns: import("./buildStyleFns").StyleFns;
+/**
+ * A style prop function that takes component props and returns font and text styles.
+ * If no `TextStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```
+ * const BoxExample = () => (
+ *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
+ * );
+ * ```
+ */
+export declare const text: (props: TextStyleProps) => {};
+//# sourceMappingURL=text.d.ts.map

package/dist/es6/layout/lib/utils/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,sDAAsD;AACtD,oBAAY,cAAc,GAAG;IAC3B;;iCAE6B;IAC7B,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC5D;;qCAEiC;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC5D,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;uCAEmC;IACnC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAClE,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAkE7C,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}

package/dist/es6/layout/lib/utils/text.js

@@ -0,0 +1,81 @@
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var textStyleFnConfigs = [
+    {
+        name: 'fontFamily',
+        properties: ['fontFamily'],
+        system: 'font',
+    },
+    {
+        name: 'fontSize',
+        properties: ['fontSize'],
+        system: 'fontSize',
+    },
+    {
+        name: 'fontStyle',
+        properties: ['fontStyle'],
+        system: 'none',
+    },
+    {
+        name: 'fontWeight',
+        properties: ['fontWeight'],
+        system: 'fontWeight',
+    },
+    {
+        name: 'lineHeight',
+        properties: ['lineHeight'],
+        system: 'none',
+    },
+    {
+        name: 'letterSpacing',
+        properties: ['letterSpacing'],
+        system: 'none',
+    },
+    {
+        name: 'textAlign',
+        properties: ['textAlign'],
+        system: 'none',
+    },
+    {
+        name: 'textDecoration',
+        properties: ['textDecoration'],
+        system: 'none',
+    },
+    {
+        name: 'textOverflow',
+        properties: ['textOverflow'],
+        system: 'none',
+    },
+    {
+        name: 'textTransform',
+        properties: ['textTransform'],
+        system: 'none',
+    },
+    {
+        name: 'textShadow',
+        properties: ['textShadow'],
+        system: 'none',
+    },
+    {
+        name: 'whiteSpace',
+        properties: ['whiteSpace'],
+        system: 'none',
+    },
+    {
+        name: 'wordBreak',
+        properties: ['wordBreak'],
+        system: 'none',
+    },
+];
+export var textStyleFns = buildStyleFns(textStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns font and text styles.
+ * If no `TextStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```
+ * const BoxExample = () => (
+ *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
+ * );
+ * ```
+ */
+export var text = buildStylePropFn(textStyleFns);

package/dist/es6/loading-dots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/LoadingDots';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/loading-dots/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../loading-dots/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/es6/loading-dots/index.js

@@ -0,0 +1 @@
+export * from './lib/LoadingDots';

package/dist/es6/{loading-animation → loading-dots}/lib/LoadingDots.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export default function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
 //# sourceMappingURL=LoadingDots.d.ts.map

package/dist/es6/loading-dots/lib/LoadingDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2D/B;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,eAUtE"}

package/dist/es6/{loading-animation → loading-dots}/lib/LoadingDots.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { keyframes } from '@emotion/react';
-import canvas, { borderRadius } from '@workday/canvas-kit-react/tokens';
+import { canvas, borderRadius } from '@workday/canvas-kit-react/tokens';
 import { styled } from '@workday/canvas-kit-react/common';
 /**
  * Keyframe for the dots loading animation.
@@ -67,7 +67,7 @@ var Container = styled('div')({
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export default function LoadingDots(props) {
+export function LoadingDots(props) {
     var elemProps = __rest(props, []);
     return (React.createElement(Container, __assign({}, elemProps),
         React.createElement(LoadingAnimationDot, { animationDelay: 0 }),

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

@@ -1519,7 +1519,7 @@ export declare const Menu: import("../../common").ComponentM<MenuProps & Partial
      *   )
      * }
      */
-    List: import("../../common").ElementComponentM<"div", import("./MenuList").MenuListProps, {
+    List: import("../../common").ElementComponentM<"div", import("./MenuList").MenuListProps<any>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -1671,7 +1671,7 @@ export declare const Menu: import("../../common").ComponentM<MenuProps & Partial
         Icon: import("../../common").ElementComponent<"span", import("../..").SystemIconProps>;
         Text: import("@emotion/styled").StyledComponent<{
             theme?: import("@emotion/react").Theme | undefined;
-            as?: "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+            as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
         }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
     };
     Divider: import("../../common").ElementComponent<"hr", unknown>;

package/dist/es6/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBnB,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}

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

@@ -44,5 +44,5 @@ export var MenuCard = createSubcomponent('div')({
     var transformOrigin = React.useMemo(function () {
         return getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    return (React.createElement(StyledCard, __assign({ as: Element, maxWidth: "calc(100vw - " + space.l + ")", transformOrigin: transformOrigin, padding: "zero" }, elemProps), elemProps.children));
+    return (React.createElement(StyledCard, __assign({ as: Element, maxWidth: "calc(100vw - " + space.l + ")", transformOrigin: transformOrigin, padding: "zero", depth: 3 }, elemProps), elemProps.children));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"MenuContextTarget.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuContextTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAoBD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;OAAkD,CAAC;AAC7E,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;OAAyD,CAAC;AAE3F,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMrB,CAAC"}
+{"version":3,"file":"MenuContextTarget.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuContextTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;OAAkD,CAAC;AAC7E,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;OAAyD,CAAC;AAE3F,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMrB,CAAC"}

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

@@ -33,10 +33,8 @@ var useMenuTargetBase = createElemPropsHook(useMenuModel)(function (model) {
         onKeyDown: function (event) {
             // eslint-disable-next-line default-case
             switch (event.key) {
-                case 'Down':
-                case 'ArrowDown': // IE11
-                case 'Up':
-                case 'ArrowUp': // IE11
+                case 'ArrowDown':
+                case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
                     model.events.show(event);
             }
         },

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

@@ -139,7 +139,7 @@ export declare const MenuItem: import("../../common").ElementComponentM<"button"
     Icon: import("../../common").ElementComponent<"span", import("../../icon").SystemIconProps>;
     Text: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
-        as?: "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+        as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 };
 //# sourceMappingURL=MenuItem.d.ts.map

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

@@ -33,16 +33,14 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
     var theme = _a.theme;
     return __assign(__assign({}, type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
                 marginLeft: space.xxs,
-            }, display: 'block', width: '100%', padding: space.xxs + " " + space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: iconColors.active,
-            }, '&:hover, &[aria-selected=true]': {
+            }, display: 'block', width: '100%', padding: space.xxs + " " + space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
                 backgroundColor: theme.canvas.palette.primary.lightest,
                 color: colors.blackPepper300,
                 '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                     fill: iconColors.hover,
                 },
                 '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: iconColors.active,
+                    fill: iconColors.hover,
                 },
             }, '&:focus': {
                 outline: 'none',
@@ -51,15 +49,15 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
                 '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                     fill: iconColors.inverse,
                 },
+                '*:hover .wd-icon-fill': {
+                    fill: iconColors.inverse,
+                },
                 '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
                     fill: iconColors.inverse,
                 },
             } }, _b["[data-whatinput]"] = {
         backgroundColor: 'inherit',
         color: colors.blackPepper300,
-        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: iconColors.active,
-        },
         '&:hover, &[aria-selected=true]': {
             backgroundColor: theme.canvas.palette.primary.lightest,
             '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -68,7 +66,7 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
         },
         '&:focus': {
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: iconColors.active,
+                fill: iconColors.hover,
             },
         },
     }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
@@ -82,10 +80,13 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
                 fill: iconColors.disabled,
             },
-            '&:hover, &[aria-selected=true]': {
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: iconColors.disabled,
-                },
+        },
+        '&:hover, &[aria-selected=true]': {
+            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                fill: iconColors.disabled,
+            },
+            '*:hover .wd-icon-fill': {
+                fill: iconColors.disabled,
             },
         },
     }, _b));

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Stack } from '@workday/canvas-kit-react/layout';
-export interface MenuListProps extends Partial<ExtractProps<typeof Stack, never>> {
+export interface MenuListProps<T = any> extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
     /**
      * The label text of the MenuList.
      */
-    children: React.ReactNode;
+    children: React.ReactNode | ((item: T) => React.ReactNode);
 }
 export declare const useMenuList: <P extends {}, R>(model: {
     state: {
@@ -80,7 +80,7 @@ export declare const useMenuList: <P extends {}, R>(model: {
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
-export declare const MenuList: import("../../common").ElementComponentM<"div", MenuListProps, {
+export declare const MenuList: import("../../common").ElementComponentM<"div", MenuListProps<any>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;

package/dist/es6/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,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAIvD,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;IAC/E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAKtB,CAAC;AAEH,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;AAG/B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAIvD,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACpE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAKtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTarget.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAoBD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;OAAkD,CAAC;AAC7E,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;OAAyD,CAAC;AAE3F,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMrB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM5B,CAAC"}
+{"version":3,"file":"MenuTarget.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;OAAkD,CAAC;AAC7E,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;OAAyD,CAAC;AAE3F,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMrB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM5B,CAAC"}

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

@@ -33,10 +33,8 @@ var useMenuTargetBase = createElemPropsHook(useMenuModel)(function (model) {
         onKeyDown: function (event) {
             // eslint-disable-next-line default-case
             switch (event.key) {
-                case 'Down':
-                case 'ArrowDown': // IE11
-                case 'Up':
-                case 'ArrowUp': // IE11
+                case 'ArrowDown':
+                case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
                     model.events.show(event);
             }
         },

package/dist/es6/modal/lib/Modal.d.ts

@@ -99,7 +99,7 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
-    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+    Body: import("../../common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;

package/dist/es6/modal/lib/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAEjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAQpB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAWjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}