@flodesk/grain 6.0.0 → 6.1.0

package/es/components/autocomplete.js

@@ -33,7 +33,7 @@ import { Icon, Box, Text } from '.';
 import { IconChevronDown } from '../icons';
 import { Combobox } from '@headlessui/react';
 import { types } from '../types';
-import { InputField, MenuCard, MenuItem, MenuGroupTitle, FieldLabel, componentVars } from '../foundational';
+import { InputField, MenuCard, MenuItem, MenuGroupTitle, FieldLabel, componentVars, MenuTransition } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var Root = function Root(_ref) {
@@ -136,7 +136,7 @@ export var Autocomplete = function Autocomplete(_ref3) {
       return option && option.content;
     },
     paddingRight: "32px"
-  }), ___EmotionJSX(ExpandIcon, null)), ___EmotionJSX(Combobox.Options, {
+  }), ___EmotionJSX(ExpandIcon, null)), ___EmotionJSX(MenuTransition, null, ___EmotionJSX(Combobox.Options, {
     placement: menuPlacement,
     width: menuWidth,
     as: MenuCard,
@@ -160,7 +160,7 @@ export var Autocomplete = function Autocomplete(_ref3) {
         isDisabled: option.isDisabled
       }, option.content);
     }));
-  }), noResults && ___EmotionJSX(EmptyState, null)));
+  }), noResults && ___EmotionJSX(EmptyState, null))));
 };
 Autocomplete.propTypes = {
   options: PropTypes.array,

package/es/components/dropdown.js

@@ -7,7 +7,7 @@ import React, { Fragment } from 'react';
 import { Box } from '.';
 import { Menu } from '@headlessui/react';
 import { types } from '../types';
-import { MenuCard, MenuItem } from '../foundational';
+import { MenuCard, MenuItem, MenuTransition } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var Root = function Root(_ref) {
@@ -30,7 +30,7 @@ export var Dropdown = function Dropdown(_ref2) {
     as: Root
   }, ___EmotionJSX(Menu.Button, {
     as: Fragment
-  }, trigger), ___EmotionJSX(Menu.Items, {
+  }, trigger), ___EmotionJSX(MenuTransition, null, ___EmotionJSX(Menu.Items, {
     as: MenuCard,
     placement: menuPlacement,
     width: menuWidth,
@@ -48,7 +48,7 @@ export var Dropdown = function Dropdown(_ref2) {
         hasDivider: option.hasDivider
       }, option.content);
     });
-  })));
+  }))));
 };
 Dropdown.propTypes = {
   trigger: PropTypes.node,

package/es/components/popover.js

@@ -14,7 +14,7 @@ import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { types } from '../types';
 import { Box } from './box';
-import { placementStyles } from '../foundational';
+import { MenuTransition, placementStyles } from '../foundational';
 import { useKeyPress, useOnClickOutside } from '../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
@@ -62,7 +62,9 @@ export var Popover = function Popover(_ref2) {
     isOpen: isOpen,
     onClose: onClose,
     escPress: escPress
-  }, trigger), isOpen && ___EmotionJSX(Box, _extends({
+  }, trigger), ___EmotionJSX(MenuTransition, _extends({
+    as: Box,
+    show: isOpen,
     ref: ref,
     width: width,
     padding: padding,

package/es/components/select.js

@@ -41,7 +41,7 @@ import { IconChevronDown } from '../icons';
 import { Listbox } from '@headlessui/react';
 import { getColor, getRadius } from '../utilities';
 import { types } from '../types';
-import { FieldLabel, MenuCard, MenuItem, styles, componentVars } from '../foundational';
+import { FieldLabel, MenuCard, MenuItem, styles, componentVars, MenuTransition } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var TriggerButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
@@ -49,7 +49,7 @@ var TriggerButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "pro
 } : {
   target: "e17qd7kh0",
   label: "TriggerButton"
-})(styles.buttonReset, ";", styles.transitions, ";color:inherit;display:flex;align-items:center;gap:8px;border:none;background:", getColor('fade1'), ";padding:0 ", componentVars.fieldXPadding, ";min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1DIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCBmb3J3YXJkUmVmLCBGcmFnbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEljb24sIEJveCwgVGV4dCwgVGV4dEJ1dHRvbiB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbkNoZXZyb25Eb3duIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgTGlzdGJveCB9IGZyb20gJ0BoZWFkbGVzc3VpL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBGaWVsZExhYmVsLCBNZW51Q2FyZCwgTWVudUl0ZW0sIHN0eWxlcywgY29tcG9uZW50VmFycyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IFRyaWdnZXJCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcblxuICBjb2xvcjogaW5oZXJpdDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiA4cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignZmFkZTEnKX07XG4gIHBhZGRpbmc6IDAgJHtjb21wb25lbnRWYXJzLmZpZWxkWFBhZGRpbmd9O1xuICBtaW4taGVpZ2h0OiAke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH07XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdmYWRlMicpfTtcbiAgfVxuYDtcblxuY29uc3QgVHJpZ2dlciA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIHRyaWdnZXJWYXJpYW50LCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPD5cbiAgICB7dHJpZ2dlclZhcmlhbnQgPT09ICdib3gnICYmIChcbiAgICAgIDxUcmlnZ2VyQnV0dG9uIHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgICAgICA8VGV4dCBoYXNFbGxpcHNpcz57Y2hpbGRyZW59PC9UZXh0PlxuICAgICAgICA8Qm94IG1hcmdpbkxlZnQ9XCJhdXRvXCI+XG4gICAgICAgICAgPEljb24gaWNvbj17PEljb25DaGV2cm9uRG93biAvPn0gLz5cbiAgICAgICAgPC9Cb3g+XG4gICAgICA8L1RyaWdnZXJCdXR0b24+XG4gICAgKX1cbiAgICB7dHJpZ2dlclZhcmlhbnQgPT09ICd0ZXh0JyAmJiAoXG4gICAgICA8VGV4dEJ1dHRvbiByZWY9e3JlZn0gaWNvbj17PEljb25DaGV2cm9uRG93biAvPn0gaWNvblBvc2l0aW9uPVwicmlnaHRcIiB7Li4ucHJvcHN9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1RleHRCdXR0b24+XG4gICAgKX1cbiAgPC8+XG4pKTtcblxuY29uc3QgU2VsZWN0Um9vdCA9ICh7IC4uLnByb3BzIH0pID0+IDxCb3ggey4uLnByb3BzfSBwb3NpdGlvbj1cInJlbGF0aXZlXCIgbWluV2lkdGg9XCIwcHhcIiAvPjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7XG4gIG9wdGlvbnMsXG4gIGRlZmF1bHRPcHRpb24sXG4gIG9uQ2hhbmdlLFxuICBtZW51UGxhY2VtZW50ID0gJ2JvdHRvbVN0YXJ0JyxcbiAgbWVudVdpZHRoID0gJzEwMCUnLFxuICB0cmlnZ2VyOiBjdXN0b21UcmlnZ2VyLFxuICB0cmlnZ2VyVmFyaWFudCA9ICdib3gnLFxuICBsYWJlbCxcbiAgbWVudVpJbmRleCxcbn0pID0+IHtcbiAgY29uc3QgW3NlbGVjdGVkT3B0aW9uLCBzZXRTZWxlY3RlZE9wdGlvbl0gPSB1c2VTdGF0ZShkZWZhdWx0T3B0aW9uIHx8IHt9KTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2UgPSBvcHRpb24gPT4ge1xuICAgIHNldFNlbGVjdGVkT3B0aW9uKG9wdGlvbik7XG4gICAgb25DaGFuZ2UgJiYgb25DaGFuZ2Uob3B0aW9uKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxMaXN0Ym94IGFzPXtTZWxlY3RSb290fSB2YWx1ZT17c2VsZWN0ZWRPcHRpb259IG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9PlxuICAgICAge2xhYmVsICYmIDxMaXN0Ym94LkxhYmVsIGFzPXtGaWVsZExhYmVsfT57bGFiZWx9PC9MaXN0Ym94LkxhYmVsPn1cbiAgICAgIDxMaXN0Ym94LkJ1dHRvbiBhcz17RnJhZ21lbnR9PlxuICAgICAgICB7Y3VzdG9tVHJpZ2dlciA/IChcbiAgICAgICAgICBjdXN0b21UcmlnZ2VyKHNlbGVjdGVkT3B0aW9uKVxuICAgICAgICApIDogKFxuICAgICAgICAgIDxUcmlnZ2VyIHRyaWdnZXJWYXJpYW50PXt0cmlnZ2VyVmFyaWFudH0+e3NlbGVjdGVkT3B0aW9uLmNvbnRlbnR9PC9UcmlnZ2VyPlxuICAgICAgICApfVxuICAgICAgPC9MaXN0Ym94LkJ1dHRvbj5cblxuICAgICAgPExpc3Rib3guT3B0aW9uc1xuICAgICAgICBwbGFjZW1lbnQ9e21lbnVQbGFjZW1lbnR9XG4gICAgICAgIHdpZHRoPXttZW51V2lkdGh9XG4gICAgICAgIGFzPXtNZW51Q2FyZH1cbiAgICAgICAgekluZGV4PXttZW51WkluZGV4fVxuICAgICAgPlxuICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbiwgaW5kZXgpID0+IChcbiAgICAgICAgICA8TGlzdGJveC5PcHRpb24ga2V5PXtpbmRleH0gdmFsdWU9e29wdGlvbn0gYXM9e0ZyYWdtZW50fSBkaXNhYmxlZD17b3B0aW9uLmlzRGlzYWJsZWR9PlxuICAgICAgICAgICAgeyh7IGFjdGl2ZSwgc2VsZWN0ZWQgfSkgPT4gKFxuICAgICAgICAgICAgICA8TWVudUl0ZW0gaXNTZWxlY3RlZD17c2VsZWN0ZWR9IGlzQWN0aXZlPXthY3RpdmV9IGlzRGlzYWJsZWQ9e29wdGlvbi5pc0Rpc2FibGVkfT5cbiAgICAgICAgICAgICAgICB7b3B0aW9uLmNvbnRlbnR9XG4gICAgICAgICAgICAgIDwvTWVudUl0ZW0+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvTGlzdGJveC5PcHRpb24+XG4gICAgICAgICkpfVxuICAgICAgPC9MaXN0Ym94Lk9wdGlvbnM+XG4gICAgPC9MaXN0Ym94PlxuICApO1xufTtcblxuU2VsZWN0LnByb3BUeXBlcyA9IHtcbiAgb3B0aW9uczogUHJvcFR5cGVzLmFycmF5LFxuICBkZWZhdWx0T3B0aW9uOiBQcm9wVHlwZXMub2JqZWN0LFxuICBvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIG1lbnVQbGFjZW1lbnQ6IHR5cGVzLm1lbnVQbGFjZW1lbnQsXG4gIG1lbnVXaWR0aDogdHlwZXMuZGltZW5zaW9uLFxuICBtZW51WkluZGV4OiB0eXBlcy56SW5kZXgsXG4gIHRyaWdnZXI6IFByb3BUeXBlcy5mdW5jLFxuICB0cmlnZ2VyVmFyaWFudDogUHJvcFR5cGVzLm9uZU9mKFsnYm94JywgJ3RleHQnXSksXG4gIGxhYmVsOiB0eXBlcy5sYWJlbCxcbn07XG4iXX0= */"));
+})(styles.buttonReset, ";", styles.transitions, ";color:inherit;display:flex;align-items:center;gap:8px;border:none;background:", getColor('fade1'), ";padding:0 ", componentVars.fieldXPadding, ";min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJtQyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9zZWxlY3QuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSwgZm9yd2FyZFJlZiwgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBJY29uLCBCb3gsIFRleHQsIFRleHRCdXR0b24gfSBmcm9tICcuJztcbmltcG9ydCB7IEljb25DaGV2cm9uRG93biB9IGZyb20gJy4uL2ljb25zJztcbmltcG9ydCB7IExpc3Rib3ggfSBmcm9tICdAaGVhZGxlc3N1aS9yZWFjdCc7XG5pbXBvcnQgeyBnZXRDb2xvciwgZ2V0UmFkaXVzIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHtcbiAgRmllbGRMYWJlbCxcbiAgTWVudUNhcmQsXG4gIE1lbnVJdGVtLFxuICBzdHlsZXMsXG4gIGNvbXBvbmVudFZhcnMsXG4gIE1lbnVUcmFuc2l0aW9uLFxufSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBUcmlnZ2VyQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG5cbiAgY29sb3I6IGluaGVyaXQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogOHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ2ZhZGUxJyl9O1xuICBwYWRkaW5nOiAwICR7Y29tcG9uZW50VmFycy5maWVsZFhQYWRkaW5nfTtcbiAgbWluLWhlaWdodDogJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9O1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgd2lkdGg6IDEwMCU7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJjpob3ZlciB7XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignZmFkZTInKX07XG4gIH1cbmA7XG5cbmNvbnN0IFRyaWdnZXIgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0cmlnZ2VyVmFyaWFudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDw+XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAnYm94JyAmJiAoXG4gICAgICA8VHJpZ2dlckJ1dHRvbiByZWY9e3JlZn0gey4uLnByb3BzfT5cbiAgICAgICAgPFRleHQgaGFzRWxsaXBzaXM+e2NoaWxkcmVufTwvVGV4dD5cbiAgICAgICAgPEJveCBtYXJnaW5MZWZ0PVwiYXV0b1wiPlxuICAgICAgICAgIDxJY29uIGljb249ezxJY29uQ2hldnJvbkRvd24gLz59IC8+XG4gICAgICAgIDwvQm94PlxuICAgICAgPC9UcmlnZ2VyQnV0dG9uPlxuICAgICl9XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAndGV4dCcgJiYgKFxuICAgICAgPFRleHRCdXR0b24gcmVmPXtyZWZ9IGljb249ezxJY29uQ2hldnJvbkRvd24gLz59IGljb25Qb3NpdGlvbj1cInJpZ2h0XCIgey4uLnByb3BzfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICl9XG4gIDwvPlxuKSk7XG5cbmNvbnN0IFNlbGVjdFJvb3QgPSAoeyAuLi5wcm9wcyB9KSA9PiA8Qm94IHsuLi5wcm9wc30gcG9zaXRpb249XCJyZWxhdGl2ZVwiIG1pbldpZHRoPVwiMHB4XCIgLz47XG5cbmV4cG9ydCBjb25zdCBTZWxlY3QgPSAoe1xuICBvcHRpb25zLFxuICBkZWZhdWx0T3B0aW9uLFxuICBvbkNoYW5nZSxcbiAgbWVudVBsYWNlbWVudCA9ICdib3R0b21TdGFydCcsXG4gIG1lbnVXaWR0aCA9ICcxMDAlJyxcbiAgdHJpZ2dlcjogY3VzdG9tVHJpZ2dlcixcbiAgdHJpZ2dlclZhcmlhbnQgPSAnYm94JyxcbiAgbGFiZWwsXG4gIG1lbnVaSW5kZXgsXG59KSA9PiB7XG4gIGNvbnN0IFtzZWxlY3RlZE9wdGlvbiwgc2V0U2VsZWN0ZWRPcHRpb25dID0gdXNlU3RhdGUoZGVmYXVsdE9wdGlvbiB8fCB7fSk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gb3B0aW9uID0+IHtcbiAgICBzZXRTZWxlY3RlZE9wdGlvbihvcHRpb24pO1xuICAgIG9uQ2hhbmdlICYmIG9uQ2hhbmdlKG9wdGlvbik7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8TGlzdGJveCBhcz17U2VsZWN0Um9vdH0gdmFsdWU9e3NlbGVjdGVkT3B0aW9ufSBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfT5cbiAgICAgIHtsYWJlbCAmJiA8TGlzdGJveC5MYWJlbCBhcz17RmllbGRMYWJlbH0+e2xhYmVsfTwvTGlzdGJveC5MYWJlbD59XG4gICAgICA8TGlzdGJveC5CdXR0b24gYXM9e0ZyYWdtZW50fT5cbiAgICAgICAge2N1c3RvbVRyaWdnZXIgPyAoXG4gICAgICAgICAgY3VzdG9tVHJpZ2dlcihzZWxlY3RlZE9wdGlvbilcbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8VHJpZ2dlciB0cmlnZ2VyVmFyaWFudD17dHJpZ2dlclZhcmlhbnR9PntzZWxlY3RlZE9wdGlvbi5jb250ZW50fTwvVHJpZ2dlcj5cbiAgICAgICAgKX1cbiAgICAgIDwvTGlzdGJveC5CdXR0b24+XG5cbiAgICAgIDxNZW51VHJhbnNpdGlvbj5cbiAgICAgICAgPExpc3Rib3guT3B0aW9uc1xuICAgICAgICAgIHBsYWNlbWVudD17bWVudVBsYWNlbWVudH1cbiAgICAgICAgICB3aWR0aD17bWVudVdpZHRofVxuICAgICAgICAgIGFzPXtNZW51Q2FyZH1cbiAgICAgICAgICB6SW5kZXg9e21lbnVaSW5kZXh9XG4gICAgICAgID5cbiAgICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbiwgaW5kZXgpID0+IChcbiAgICAgICAgICAgIDxMaXN0Ym94Lk9wdGlvbiBrZXk9e2luZGV4fSB2YWx1ZT17b3B0aW9ufSBhcz17RnJhZ21lbnR9IGRpc2FibGVkPXtvcHRpb24uaXNEaXNhYmxlZH0+XG4gICAgICAgICAgICAgIHsoeyBhY3RpdmUsIHNlbGVjdGVkIH0pID0+IChcbiAgICAgICAgICAgICAgICA8TWVudUl0ZW0gaXNTZWxlY3RlZD17c2VsZWN0ZWR9IGlzQWN0aXZlPXthY3RpdmV9IGlzRGlzYWJsZWQ9e29wdGlvbi5pc0Rpc2FibGVkfT5cbiAgICAgICAgICAgICAgICAgIHtvcHRpb24uY29udGVudH1cbiAgICAgICAgICAgICAgICA8L01lbnVJdGVtPlxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgPC9MaXN0Ym94Lk9wdGlvbj5cbiAgICAgICAgICApKX1cbiAgICAgICAgPC9MaXN0Ym94Lk9wdGlvbnM+XG4gICAgICA8L01lbnVUcmFuc2l0aW9uPlxuICAgIDwvTGlzdGJveD5cbiAgKTtcbn07XG5cblNlbGVjdC5wcm9wVHlwZXMgPSB7XG4gIG9wdGlvbnM6IFByb3BUeXBlcy5hcnJheSxcbiAgZGVmYXVsdE9wdGlvbjogUHJvcFR5cGVzLm9iamVjdCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBtZW51UGxhY2VtZW50OiB0eXBlcy5tZW51UGxhY2VtZW50LFxuICBtZW51V2lkdGg6IHR5cGVzLmRpbWVuc2lvbixcbiAgbWVudVpJbmRleDogdHlwZXMuekluZGV4LFxuICB0cmlnZ2VyOiBQcm9wVHlwZXMuZnVuYyxcbiAgdHJpZ2dlclZhcmlhbnQ6IFByb3BUeXBlcy5vbmVPZihbJ2JveCcsICd0ZXh0J10pLFxuICBsYWJlbDogdHlwZXMubGFiZWwsXG59O1xuIl19 */"));
 
 var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -113,7 +113,7 @@ export var Select = function Select(_ref3) {
     as: Fragment
   }, customTrigger ? customTrigger(selectedOption) : ___EmotionJSX(Trigger, {
     triggerVariant: triggerVariant
-  }, selectedOption.content)), ___EmotionJSX(Listbox.Options, {
+  }, selectedOption.content)), ___EmotionJSX(MenuTransition, null, ___EmotionJSX(Listbox.Options, {
     placement: menuPlacement,
     width: menuWidth,
     as: MenuCard,
@@ -133,7 +133,7 @@ export var Select = function Select(_ref3) {
         isDisabled: option.isDisabled
       }, option.content);
     });
-  })));
+  }))));
 };
 Select.propTypes = {
   options: PropTypes.array,

package/es/foundational/index.js

@@ -1,3 +1,3 @@
-export { MenuCard, MenuGroupTitle, MenuItem } from './menu';
+export { MenuCard, MenuGroupTitle, MenuItem, MenuTransition } from './menu';
 export { InputField, FieldLabel, InlineFieldLabel } from './field';
 export { componentVars, styles, getClearButtonStyles, placementStyles } from './styles';

package/es/foundational/menu.js

@@ -3,9 +3,10 @@ import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.object.define-property.js";
-var _excluded = ["children", "zIndex", "width", "placement"],
-    _excluded2 = ["children", "isDisabled", "hasIcon", "isSelected", "color"],
-    _excluded3 = ["children", "isSelected", "isActive", "isDisabled", "icon", "variant", "hasDivider"];
+var _excluded = ["children", "show"],
+    _excluded2 = ["children", "zIndex", "width", "placement"],
+    _excluded3 = ["children", "isDisabled", "hasIcon", "isSelected", "color"],
+    _excluded4 = ["children", "isSelected", "isActive", "isDisabled", "icon", "variant", "hasDivider"];
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -17,25 +18,41 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React, { forwardRef } from 'react';
 import { css } from '@emotion/react';
-import { getColor, getDimension, getRadius, getShadow } from '../utilities';
+import { getColor, getDimension, getRadius, getShadow, getTransition } from '../utilities';
 import { Box, Icon, Text } from '../components';
 import { IconCheck } from '../icons';
 import { componentVars, placementStyles } from './styles';
+import { Transition } from '@headlessui/react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var cardPadding = 8;
 var cardPaddingPx = "".concat(cardPadding, "px");
 var itemXPadding = 12;
-export var MenuCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var MenuTransition = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex,
-      width = _ref.width,
-      placement = _ref.placement,
+      show = _ref.show,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  return ___EmotionJSX(Transition, _extends({
+    ref: ref,
+    show: show,
+    enterFrom: "enterFrom",
+    enterTo: "enterTo",
+    leaveFrom: "leaveFrom",
+    leaveTo: "leaveTo",
+    css: /*#__PURE__*/css("&.leaveTo,&.enterFrom{opacity:0;}&.enterTo{transition-duration:", getTransition('xxFast'), ";}&.leaveTo{transition-duration:", getTransition('xFast'), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:MenuTransition;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JZIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXREaW1lbnNpb24sIGdldFJhZGl1cywgZ2V0U2hhZG93LCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEJveCwgSWNvbiwgVGV4dCB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNoZWNrIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgcGxhY2VtZW50U3R5bGVzIH0gZnJvbSAnLi9zdHlsZXMnO1xuaW1wb3J0IHsgVHJhbnNpdGlvbiB9IGZyb20gJ0BoZWFkbGVzc3VpL3JlYWN0JztcblxuY29uc3QgY2FyZFBhZGRpbmcgPSA4O1xuY29uc3QgY2FyZFBhZGRpbmdQeCA9IGAke2NhcmRQYWRkaW5nfXB4YDtcbmNvbnN0IGl0ZW1YUGFkZGluZyA9IDEyO1xuXG5leHBvcnQgY29uc3QgTWVudVRyYW5zaXRpb24gPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBzaG93LCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFRyYW5zaXRpb25cbiAgICByZWY9e3JlZn1cbiAgICBzaG93PXtzaG93fVxuICAgIGVudGVyRnJvbT1cImVudGVyRnJvbVwiXG4gICAgZW50ZXJUbz1cImVudGVyVG9cIlxuICAgIGxlYXZlRnJvbT1cImxlYXZlRnJvbVwiXG4gICAgbGVhdmVUbz1cImxlYXZlVG9cIlxuICAgIGNzcz17Y3NzYFxuICAgICAgJi5sZWF2ZVRvLFxuICAgICAgJi5lbnRlckZyb20ge1xuICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgfVxuICAgICAgJi5lbnRlclRvIHtcbiAgICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogJHtnZXRUcmFuc2l0aW9uKCd4eEZhc3QnKX07XG4gICAgICB9XG4gICAgICAmLmxlYXZlVG8ge1xuICAgICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICAgICAgfVxuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L1RyYW5zaXRpb24+XG4pKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVDYXJkID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgekluZGV4ID0gMSwgd2lkdGgsIHBsYWNlbWVudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDx1bFxuICAgIHJlZj17cmVmfVxuICAgIGNzcz17Y3NzYFxuICAgICAgcGFkZGluZzogJHtjYXJkUGFkZGluZ1B4fSAwO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignYmFja2dyb3VuZCcpfTtcbiAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICAgIGJveC1zaGFkb3c6ICR7Z2V0U2hhZG93KCdtJyl9O1xuICAgICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICAgICBtYXgtaGVpZ2h0OiA0NjhweDtcbiAgICAgIG92ZXJmbG93OiBhdXRvO1xuICAgICAgd2lkdGg6ICR7Z2V0RGltZW5zaW9uKHdpZHRoKX07XG4gICAgICAke3BsYWNlbWVudFN0eWxlc1twbGFjZW1lbnRdfTtcblxuICAgICAgJjpmb2N1cyB7XG4gICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICB9XG4gICAgYH1cbiAgICB7Li4ucHJvcHN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvdWw+XG4pKTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGJhY2tncm91bmRDb2xvckFjdGl2ZTogZ2V0Q29sb3IoJ2JhY2tncm91bmRPdmVybGF5JyksXG4gICAgaWNvbkNvbG9yQWN0aXZlOiBnZXRDb2xvcignY29udGVudCcpLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBjb2xvcjogZ2V0Q29sb3IoJ2RhbmdlcicpLFxuICAgIGJhY2tncm91bmRDb2xvckFjdGl2ZTogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmQsXG4gIH0sXG59O1xuXG5jb25zdCBNZW51SXRlbVJvb3QgPSBmb3J3YXJkUmVmKFxuICAoeyBjaGlsZHJlbiwgaXNEaXNhYmxlZCwgaGFzSWNvbiwgaXNTZWxlY3RlZCwgY29sb3IsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICAgIDxsaVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAke2hhc0ljb24gPyAnYXV0byAxZnInIDogJzFmciBhdXRvJ307XG4gICAgICAgICR7KGhhc0ljb24gfHwgaXNTZWxlY3RlZCkgJiYgYGdhcDogOHB4YH07XG4gICAgICAgICR7aXNEaXNhYmxlZCAmJiBgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfWB9O1xuICAgICAgICAkeyFpc0Rpc2FibGVkICYmIGBjdXJzb3I6IHBvaW50ZXI7YH07XG4gICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgICAgIHBhZGRpbmc6IDAgJHtpdGVtWFBhZGRpbmd9cHg7XG4gICAgICAgIG1hcmdpbjogMCAke2NhcmRQYWRkaW5nfXB4O1xuICAgICAgICBtaW4taGVpZ2h0OiAke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgICBjb2xvcjogJHtjb2xvcn07XG5cbiAgICAgICAgLkljb24ge1xuICAgICAgICAgIHRyYW5zaXRpb246IHVuc2V0O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2xpPlxuICApLFxuKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVHcm91cFRpdGxlID0gKHsgY2hpbGRyZW4sIGhhc0RpdmlkZXIgfSkgPT4gKFxuICA8Qm94XG4gICAgcGFkZGluZ1g9e2Ake2NhcmRQYWRkaW5nICsgaXRlbVhQYWRkaW5nfXB4YH1cbiAgICBwYWRkaW5nQm90dG9tPXtjYXJkUGFkZGluZ1B4fVxuICAgIG1hcmdpblRvcD17Y2FyZFBhZGRpbmdQeH1cbiAgICBwYWRkaW5nVG9wPXtoYXNEaXZpZGVyID8gYCR7Y2FyZFBhZGRpbmcgKiAyfXB4YCA6IHVuZGVmaW5lZH1cbiAgICBib3JkZXJTaWRlPXtoYXNEaXZpZGVyID8gJ3RvcCcgOiB1bmRlZmluZWR9XG4gID5cbiAgICA8VGV4dCB2YXJpYW50PVwiY2Fwc1wiPntjaGlsZHJlbn08L1RleHQ+XG4gIDwvQm94PlxuKTtcblxuY29uc3QgTWVudUl0ZW1EaXZpZGVyID0gKCkgPT4gKFxuICA8Qm94IGhlaWdodD17Y29tcG9uZW50VmFycy5ib3JkZXJXaWR0aH0gbWFyZ2luWT17MX0gYmFja2dyb3VuZENvbG9yPVwiYm9yZGVyXCIgLz5cbik7XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbSA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7IGNoaWxkcmVuLCBpc1NlbGVjdGVkLCBpc0FjdGl2ZSwgaXNEaXNhYmxlZCwgaWNvbiwgdmFyaWFudCA9ICduZXV0cmFsJywgaGFzRGl2aWRlciwgLi4ucHJvcHMgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICB7aGFzRGl2aWRlciAmJiA8TWVudUl0ZW1EaXZpZGVyIC8+fVxuICAgICAgICA8TWVudUl0ZW1Sb290XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgaXNTZWxlY3RlZD17aXNTZWxlY3RlZH1cbiAgICAgICAgICBpc0Rpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICAgIGNvbG9yPXt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfVxuICAgICAgICAgIGhhc0ljb249e0Jvb2xlYW4oaWNvbil9XG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIGJhY2tncm91bmQ6IGlzQWN0aXZlICYmIHZhcmlhbnRTdHlsZXNbdmFyaWFudF0uYmFja2dyb3VuZENvbG9yQWN0aXZlLFxuICAgICAgICAgICAgWyctLWdybi1jb2xvci1pY29uJ106IGlzQWN0aXZlICYmIHZhcmlhbnRTdHlsZXNbdmFyaWFudF0uaWNvbkNvbG9yQWN0aXZlLFxuICAgICAgICAgIH19XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICA+XG4gICAgICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gaGFzRXZlbkJvdW5kYXJ5IGNvbG9yPXt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfSAvPn1cbiAgICAgICAgICA8Qm94IHdpZHRoPVwiMTAwJVwiIG1pbldpZHRoPVwiMHB4XCIgdGFnPVwic3BhblwiPlxuICAgICAgICAgICAgPFRleHQgaGFzRWxsaXBzaXM+e2NoaWxkcmVufTwvVGV4dD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgICB7aXNTZWxlY3RlZCAmJiA8SWNvbiBpY29uPXs8SWNvbkNoZWNrIC8+fSAvPn1cbiAgICAgICAgPC9NZW51SXRlbVJvb3Q+XG4gICAgICA8Lz5cbiAgICApO1xuICB9LFxuKTtcbiJdfQ== */")
+  }, props), children);
+});
+export var MenuCard = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$zIndex = _ref2.zIndex,
+      zIndex = _ref2$zIndex === void 0 ? 1 : _ref2$zIndex,
+      width = _ref2.width,
+      placement = _ref2.placement,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
   return ___EmotionJSX("ul", _extends({
     ref: ref,
-    css: /*#__PURE__*/css("padding:", cardPaddingPx, " 0;margin:0;position:absolute;background:white;z-index:", zIndex, ";box-shadow:", getShadow('m'), ";border-radius:", getRadius('s'), ";max-height:468px;overflow:auto;width:", getDimension(width), ";", placementStyles[placement], ";&:focus{outline:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:MenuCard;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY1kiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9tZW51LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldERpbWVuc2lvbiwgZ2V0UmFkaXVzLCBnZXRTaGFkb3cgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgQm94LCBJY29uLCBUZXh0IH0gZnJvbSAnLi4vY29tcG9uZW50cyc7XG5pbXBvcnQgeyBJY29uQ2hlY2sgfSBmcm9tICcuLi9pY29ucyc7XG5pbXBvcnQgeyBjb21wb25lbnRWYXJzLCBwbGFjZW1lbnRTdHlsZXMgfSBmcm9tICcuL3N0eWxlcyc7XG5cbmNvbnN0IGNhcmRQYWRkaW5nID0gODtcbmNvbnN0IGNhcmRQYWRkaW5nUHggPSBgJHtjYXJkUGFkZGluZ31weGA7XG5jb25zdCBpdGVtWFBhZGRpbmcgPSAxMjtcblxuZXhwb3J0IGNvbnN0IE1lbnVDYXJkID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgekluZGV4ID0gMSwgd2lkdGgsIHBsYWNlbWVudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDx1bFxuICAgIHJlZj17cmVmfVxuICAgIGNzcz17Y3NzYFxuICAgICAgcGFkZGluZzogJHtjYXJkUGFkZGluZ1B4fSAwO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgYmFja2dyb3VuZDogd2hpdGU7XG4gICAgICB6LWluZGV4OiAke3pJbmRleH07XG4gICAgICBib3gtc2hhZG93OiAke2dldFNoYWRvdygnbScpfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgICAgbWF4LWhlaWdodDogNDY4cHg7XG4gICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgIHdpZHRoOiAke2dldERpbWVuc2lvbih3aWR0aCl9O1xuICAgICAgJHtwbGFjZW1lbnRTdHlsZXNbcGxhY2VtZW50XX07XG5cbiAgICAgICY6Zm9jdXMge1xuICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgfVxuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L3VsPlxuKSk7XG5cbmNvbnN0IHZhcmlhbnRTdHlsZXMgPSB7XG4gIG5ldXRyYWw6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3JBY3RpdmU6IGdldENvbG9yKCdiYWNrZ3JvdW5kT3ZlcmxheScpLFxuICAgIGljb25Db2xvckFjdGl2ZTogZ2V0Q29sb3IoJ2NvbnRlbnQnKSxcbiAgfSxcbiAgZGFuZ2VyOiB7XG4gICAgY29sb3I6IGdldENvbG9yKCdkYW5nZXInKSxcbiAgICBiYWNrZ3JvdW5kQ29sb3JBY3RpdmU6IGNvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kLFxuICB9LFxufTtcblxuY29uc3QgTWVudUl0ZW1Sb290ID0gZm9yd2FyZFJlZihcbiAgKHsgY2hpbGRyZW4sIGlzRGlzYWJsZWQsIGhhc0ljb24sIGlzU2VsZWN0ZWQsIGNvbG9yLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgICA8bGlcbiAgICAgIHJlZj17cmVmfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgICAgIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogJHtoYXNJY29uID8gJ2F1dG8gMWZyJyA6ICcxZnIgYXV0byd9O1xuICAgICAgICAkeyhoYXNJY29uIHx8IGlzU2VsZWN0ZWQpICYmIGBnYXA6IDhweGB9O1xuICAgICAgICAke2lzRGlzYWJsZWQgJiYgYGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50RGlzYWJsZWQnKX1gfTtcbiAgICAgICAgJHshaXNEaXNhYmxlZCAmJiBgY3Vyc29yOiBwb2ludGVyO2B9O1xuICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgICAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgICAgICBwYWRkaW5nOiAwICR7aXRlbVhQYWRkaW5nfXB4O1xuICAgICAgICBtYXJnaW46IDAgJHtjYXJkUGFkZGluZ31weDtcbiAgICAgICAgbWluLWhlaWdodDogJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9O1xuICAgICAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICAgICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgICAgY29sb3I6ICR7Y29sb3J9O1xuXG4gICAgICAgIC5JY29uIHtcbiAgICAgICAgICB0cmFuc2l0aW9uOiB1bnNldDtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9saT5cbiAgKSxcbik7XG5cbmV4cG9ydCBjb25zdCBNZW51R3JvdXBUaXRsZSA9ICh7IGNoaWxkcmVuLCBoYXNEaXZpZGVyIH0pID0+IChcbiAgPEJveFxuICAgIHBhZGRpbmdYPXtgJHtjYXJkUGFkZGluZyArIGl0ZW1YUGFkZGluZ31weGB9XG4gICAgcGFkZGluZ0JvdHRvbT17Y2FyZFBhZGRpbmdQeH1cbiAgICBtYXJnaW5Ub3A9e2NhcmRQYWRkaW5nUHh9XG4gICAgcGFkZGluZ1RvcD17aGFzRGl2aWRlciA/IGAke2NhcmRQYWRkaW5nICogMn1weGAgOiB1bmRlZmluZWR9XG4gICAgYm9yZGVyU2lkZT17aGFzRGl2aWRlciA/ICd0b3AnIDogdW5kZWZpbmVkfVxuICA+XG4gICAgPFRleHQgdmFyaWFudD1cImNhcHNcIj57Y2hpbGRyZW59PC9UZXh0PlxuICA8L0JveD5cbik7XG5cbmNvbnN0IE1lbnVJdGVtRGl2aWRlciA9ICgpID0+IChcbiAgPEJveCBoZWlnaHQ9e2NvbXBvbmVudFZhcnMuYm9yZGVyV2lkdGh9IG1hcmdpblk9ezF9IGJhY2tncm91bmRDb2xvcj1cImJvcmRlclwiIC8+XG4pO1xuXG5leHBvcnQgY29uc3QgTWVudUl0ZW0gPSBmb3J3YXJkUmVmKFxuICAoXG4gICAgeyBjaGlsZHJlbiwgaXNTZWxlY3RlZCwgaXNBY3RpdmUsIGlzRGlzYWJsZWQsIGljb24sIHZhcmlhbnQgPSAnbmV1dHJhbCcsIGhhc0RpdmlkZXIsIC4uLnByb3BzIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPD5cbiAgICAgICAge2hhc0RpdmlkZXIgJiYgPE1lbnVJdGVtRGl2aWRlciAvPn1cbiAgICAgICAgPE1lbnVJdGVtUm9vdFxuICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgIGlzU2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgaXNEaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgICBjb2xvcj17dmFyaWFudFN0eWxlc1t2YXJpYW50XS5jb2xvcn1cbiAgICAgICAgICBoYXNJY29uPXtCb29sZWFuKGljb24pfVxuICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiBpc0FjdGl2ZSAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmJhY2tncm91bmRDb2xvckFjdGl2ZSxcbiAgICAgICAgICAgIFsnLS1ncm4tY29sb3ItaWNvbiddOiBpc0FjdGl2ZSAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmljb25Db2xvckFjdGl2ZSxcbiAgICAgICAgICB9fVxuICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgPlxuICAgICAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IGhhc0V2ZW5Cb3VuZGFyeSBjb2xvcj17dmFyaWFudFN0eWxlc1t2YXJpYW50XS5jb2xvcn0gLz59XG4gICAgICAgICAgPEJveCB3aWR0aD1cIjEwMCVcIiBtaW5XaWR0aD1cIjBweFwiIHRhZz1cInNwYW5cIj5cbiAgICAgICAgICAgIDxUZXh0IGhhc0VsbGlwc2lzPntjaGlsZHJlbn08L1RleHQ+XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAge2lzU2VsZWN0ZWQgJiYgPEljb24gaWNvbj17PEljb25DaGVjayAvPn0gLz59XG4gICAgICAgIDwvTWVudUl0ZW1Sb290PlxuICAgICAgPC8+XG4gICAgKTtcbiAgfSxcbik7XG4iXX0= */")
+    css: /*#__PURE__*/css("padding:", cardPaddingPx, " 0;margin:0;position:absolute;background:", getColor('background'), ";z-index:", zIndex, ";box-shadow:", getShadow('m'), ";border-radius:", getRadius('s'), ";max-height:468px;overflow:auto;width:", getDimension(width), ";", placementStyles[placement], ";&:focus{outline:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:MenuCard;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUNZIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXREaW1lbnNpb24sIGdldFJhZGl1cywgZ2V0U2hhZG93LCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEJveCwgSWNvbiwgVGV4dCB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNoZWNrIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgcGxhY2VtZW50U3R5bGVzIH0gZnJvbSAnLi9zdHlsZXMnO1xuaW1wb3J0IHsgVHJhbnNpdGlvbiB9IGZyb20gJ0BoZWFkbGVzc3VpL3JlYWN0JztcblxuY29uc3QgY2FyZFBhZGRpbmcgPSA4O1xuY29uc3QgY2FyZFBhZGRpbmdQeCA9IGAke2NhcmRQYWRkaW5nfXB4YDtcbmNvbnN0IGl0ZW1YUGFkZGluZyA9IDEyO1xuXG5leHBvcnQgY29uc3QgTWVudVRyYW5zaXRpb24gPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBzaG93LCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFRyYW5zaXRpb25cbiAgICByZWY9e3JlZn1cbiAgICBzaG93PXtzaG93fVxuICAgIGVudGVyRnJvbT1cImVudGVyRnJvbVwiXG4gICAgZW50ZXJUbz1cImVudGVyVG9cIlxuICAgIGxlYXZlRnJvbT1cImxlYXZlRnJvbVwiXG4gICAgbGVhdmVUbz1cImxlYXZlVG9cIlxuICAgIGNzcz17Y3NzYFxuICAgICAgJi5sZWF2ZVRvLFxuICAgICAgJi5lbnRlckZyb20ge1xuICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgfVxuICAgICAgJi5lbnRlclRvIHtcbiAgICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogJHtnZXRUcmFuc2l0aW9uKCd4eEZhc3QnKX07XG4gICAgICB9XG4gICAgICAmLmxlYXZlVG8ge1xuICAgICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICAgICAgfVxuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L1RyYW5zaXRpb24+XG4pKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVDYXJkID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgekluZGV4ID0gMSwgd2lkdGgsIHBsYWNlbWVudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDx1bFxuICAgIHJlZj17cmVmfVxuICAgIGNzcz17Y3NzYFxuICAgICAgcGFkZGluZzogJHtjYXJkUGFkZGluZ1B4fSAwO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignYmFja2dyb3VuZCcpfTtcbiAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICAgIGJveC1zaGFkb3c6ICR7Z2V0U2hhZG93KCdtJyl9O1xuICAgICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICAgICBtYXgtaGVpZ2h0OiA0NjhweDtcbiAgICAgIG92ZXJmbG93OiBhdXRvO1xuICAgICAgd2lkdGg6ICR7Z2V0RGltZW5zaW9uKHdpZHRoKX07XG4gICAgICAke3BsYWNlbWVudFN0eWxlc1twbGFjZW1lbnRdfTtcblxuICAgICAgJjpmb2N1cyB7XG4gICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICB9XG4gICAgYH1cbiAgICB7Li4ucHJvcHN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvdWw+XG4pKTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGJhY2tncm91bmRDb2xvckFjdGl2ZTogZ2V0Q29sb3IoJ2JhY2tncm91bmRPdmVybGF5JyksXG4gICAgaWNvbkNvbG9yQWN0aXZlOiBnZXRDb2xvcignY29udGVudCcpLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBjb2xvcjogZ2V0Q29sb3IoJ2RhbmdlcicpLFxuICAgIGJhY2tncm91bmRDb2xvckFjdGl2ZTogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmQsXG4gIH0sXG59O1xuXG5jb25zdCBNZW51SXRlbVJvb3QgPSBmb3J3YXJkUmVmKFxuICAoeyBjaGlsZHJlbiwgaXNEaXNhYmxlZCwgaGFzSWNvbiwgaXNTZWxlY3RlZCwgY29sb3IsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICAgIDxsaVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAke2hhc0ljb24gPyAnYXV0byAxZnInIDogJzFmciBhdXRvJ307XG4gICAgICAgICR7KGhhc0ljb24gfHwgaXNTZWxlY3RlZCkgJiYgYGdhcDogOHB4YH07XG4gICAgICAgICR7aXNEaXNhYmxlZCAmJiBgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfWB9O1xuICAgICAgICAkeyFpc0Rpc2FibGVkICYmIGBjdXJzb3I6IHBvaW50ZXI7YH07XG4gICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgICAgIHBhZGRpbmc6IDAgJHtpdGVtWFBhZGRpbmd9cHg7XG4gICAgICAgIG1hcmdpbjogMCAke2NhcmRQYWRkaW5nfXB4O1xuICAgICAgICBtaW4taGVpZ2h0OiAke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgICBjb2xvcjogJHtjb2xvcn07XG5cbiAgICAgICAgLkljb24ge1xuICAgICAgICAgIHRyYW5zaXRpb246IHVuc2V0O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2xpPlxuICApLFxuKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVHcm91cFRpdGxlID0gKHsgY2hpbGRyZW4sIGhhc0RpdmlkZXIgfSkgPT4gKFxuICA8Qm94XG4gICAgcGFkZGluZ1g9e2Ake2NhcmRQYWRkaW5nICsgaXRlbVhQYWRkaW5nfXB4YH1cbiAgICBwYWRkaW5nQm90dG9tPXtjYXJkUGFkZGluZ1B4fVxuICAgIG1hcmdpblRvcD17Y2FyZFBhZGRpbmdQeH1cbiAgICBwYWRkaW5nVG9wPXtoYXNEaXZpZGVyID8gYCR7Y2FyZFBhZGRpbmcgKiAyfXB4YCA6IHVuZGVmaW5lZH1cbiAgICBib3JkZXJTaWRlPXtoYXNEaXZpZGVyID8gJ3RvcCcgOiB1bmRlZmluZWR9XG4gID5cbiAgICA8VGV4dCB2YXJpYW50PVwiY2Fwc1wiPntjaGlsZHJlbn08L1RleHQ+XG4gIDwvQm94PlxuKTtcblxuY29uc3QgTWVudUl0ZW1EaXZpZGVyID0gKCkgPT4gKFxuICA8Qm94IGhlaWdodD17Y29tcG9uZW50VmFycy5ib3JkZXJXaWR0aH0gbWFyZ2luWT17MX0gYmFja2dyb3VuZENvbG9yPVwiYm9yZGVyXCIgLz5cbik7XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbSA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7IGNoaWxkcmVuLCBpc1NlbGVjdGVkLCBpc0FjdGl2ZSwgaXNEaXNhYmxlZCwgaWNvbiwgdmFyaWFudCA9ICduZXV0cmFsJywgaGFzRGl2aWRlciwgLi4ucHJvcHMgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICB7aGFzRGl2aWRlciAmJiA8TWVudUl0ZW1EaXZpZGVyIC8+fVxuICAgICAgICA8TWVudUl0ZW1Sb290XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgaXNTZWxlY3RlZD17aXNTZWxlY3RlZH1cbiAgICAgICAgICBpc0Rpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICAgIGNvbG9yPXt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfVxuICAgICAgICAgIGhhc0ljb249e0Jvb2xlYW4oaWNvbil9XG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIGJhY2tncm91bmQ6IGlzQWN0aXZlICYmIHZhcmlhbnRTdHlsZXNbdmFyaWFudF0uYmFja2dyb3VuZENvbG9yQWN0aXZlLFxuICAgICAgICAgICAgWyctLWdybi1jb2xvci1pY29uJ106IGlzQWN0aXZlICYmIHZhcmlhbnRTdHlsZXNbdmFyaWFudF0uaWNvbkNvbG9yQWN0aXZlLFxuICAgICAgICAgIH19XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICA+XG4gICAgICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gaGFzRXZlbkJvdW5kYXJ5IGNvbG9yPXt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfSAvPn1cbiAgICAgICAgICA8Qm94IHdpZHRoPVwiMTAwJVwiIG1pbldpZHRoPVwiMHB4XCIgdGFnPVwic3BhblwiPlxuICAgICAgICAgICAgPFRleHQgaGFzRWxsaXBzaXM+e2NoaWxkcmVufTwvVGV4dD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgICB7aXNTZWxlY3RlZCAmJiA8SWNvbiBpY29uPXs8SWNvbkNoZWNrIC8+fSAvPn1cbiAgICAgICAgPC9NZW51SXRlbVJvb3Q+XG4gICAgICA8Lz5cbiAgICApO1xuICB9LFxuKTtcbiJdfQ== */")
   }, props), children);
 });
 var variantStyles = {
@@ -48,22 +65,22 @@ var variantStyles = {
     backgroundColorActive: componentVars.clearButtonDangerBackground
   }
 };
-var MenuItemRoot = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      isDisabled = _ref2.isDisabled,
-      hasIcon = _ref2.hasIcon,
-      isSelected = _ref2.isSelected,
-      color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2);
+var MenuItemRoot = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      isDisabled = _ref3.isDisabled,
+      hasIcon = _ref3.hasIcon,
+      isSelected = _ref3.isSelected,
+      color = _ref3.color,
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   return ___EmotionJSX("li", _extends({
     ref: ref,
-    css: /*#__PURE__*/css("display:grid;grid-auto-flow:column;grid-template-columns:", hasIcon ? 'auto 1fr' : '1fr auto', ";", (hasIcon || isSelected) && "gap: 8px", ";", isDisabled && "color: ".concat(getColor('contentDisabled')), ";", !isDisabled && "cursor: pointer;", ";align-items:center;justify-content:start;list-style:none;padding:0 ", itemXPadding, "px;margin:0 ", cardPadding, "px;min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";appearance:none;color:", color, ";.Icon{transition:unset;}" + (process.env.NODE_ENV === "production" ? "" : ";label:MenuItemRoot;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0RjIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXREaW1lbnNpb24sIGdldFJhZGl1cywgZ2V0U2hhZG93IH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEJveCwgSWNvbiwgVGV4dCB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNoZWNrIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgcGxhY2VtZW50U3R5bGVzIH0gZnJvbSAnLi9zdHlsZXMnO1xuXG5jb25zdCBjYXJkUGFkZGluZyA9IDg7XG5jb25zdCBjYXJkUGFkZGluZ1B4ID0gYCR7Y2FyZFBhZGRpbmd9cHhgO1xuY29uc3QgaXRlbVhQYWRkaW5nID0gMTI7XG5cbmV4cG9ydCBjb25zdCBNZW51Q2FyZCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIHpJbmRleCA9IDEsIHdpZHRoLCBwbGFjZW1lbnQsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8dWxcbiAgICByZWY9e3JlZn1cbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBhZGRpbmc6ICR7Y2FyZFBhZGRpbmdQeH0gMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGJhY2tncm91bmQ6IHdoaXRlO1xuICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgYm94LXNoYWRvdzogJHtnZXRTaGFkb3coJ20nKX07XG4gICAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICAgIG1heC1oZWlnaHQ6IDQ2OHB4O1xuICAgICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgICB3aWR0aDogJHtnZXREaW1lbnNpb24od2lkdGgpfTtcbiAgICAgICR7cGxhY2VtZW50U3R5bGVzW3BsYWNlbWVudF19O1xuXG4gICAgICAmOmZvY3VzIHtcbiAgICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgIH1cbiAgICBgfVxuICAgIHsuLi5wcm9wc31cbiAgPlxuICAgIHtjaGlsZHJlbn1cbiAgPC91bD5cbikpO1xuXG5jb25zdCB2YXJpYW50U3R5bGVzID0ge1xuICBuZXV0cmFsOiB7XG4gICAgYmFja2dyb3VuZENvbG9yQWN0aXZlOiBnZXRDb2xvcignYmFja2dyb3VuZE92ZXJsYXknKSxcbiAgICBpY29uQ29sb3JBY3RpdmU6IGdldENvbG9yKCdjb250ZW50JyksXG4gIH0sXG4gIGRhbmdlcjoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgYmFja2dyb3VuZENvbG9yQWN0aXZlOiBjb21wb25lbnRWYXJzLmNsZWFyQnV0dG9uRGFuZ2VyQmFja2dyb3VuZCxcbiAgfSxcbn07XG5cbmNvbnN0IE1lbnVJdGVtUm9vdCA9IGZvcndhcmRSZWYoXG4gICh7IGNoaWxkcmVuLCBpc0Rpc2FibGVkLCBoYXNJY29uLCBpc1NlbGVjdGVkLCBjb2xvciwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gICAgPGxpXG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6ICR7aGFzSWNvbiA/ICdhdXRvIDFmcicgOiAnMWZyIGF1dG8nfTtcbiAgICAgICAgJHsoaGFzSWNvbiB8fCBpc1NlbGVjdGVkKSAmJiBgZ2FwOiA4cHhgfTtcbiAgICAgICAgJHtpc0Rpc2FibGVkICYmIGBjb2xvcjogJHtnZXRDb2xvcignY29udGVudERpc2FibGVkJyl9YH07XG4gICAgICAgICR7IWlzRGlzYWJsZWQgJiYgYGN1cnNvcjogcG9pbnRlcjtgfTtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAganVzdGlmeS1jb250ZW50OiBzdGFydDtcbiAgICAgICAgbGlzdC1zdHlsZTogbm9uZTtcbiAgICAgICAgcGFkZGluZzogMCAke2l0ZW1YUGFkZGluZ31weDtcbiAgICAgICAgbWFyZ2luOiAwICR7Y2FyZFBhZGRpbmd9cHg7XG4gICAgICAgIG1pbi1oZWlnaHQ6ICR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fTtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICAgICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICAgIGNvbG9yOiAke2NvbG9yfTtcblxuICAgICAgICAuSWNvbiB7XG4gICAgICAgICAgdHJhbnNpdGlvbjogdW5zZXQ7XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvbGk+XG4gICksXG4pO1xuXG5leHBvcnQgY29uc3QgTWVudUdyb3VwVGl0bGUgPSAoeyBjaGlsZHJlbiwgaGFzRGl2aWRlciB9KSA9PiAoXG4gIDxCb3hcbiAgICBwYWRkaW5nWD17YCR7Y2FyZFBhZGRpbmcgKyBpdGVtWFBhZGRpbmd9cHhgfVxuICAgIHBhZGRpbmdCb3R0b209e2NhcmRQYWRkaW5nUHh9XG4gICAgbWFyZ2luVG9wPXtjYXJkUGFkZGluZ1B4fVxuICAgIHBhZGRpbmdUb3A9e2hhc0RpdmlkZXIgPyBgJHtjYXJkUGFkZGluZyAqIDJ9cHhgIDogdW5kZWZpbmVkfVxuICAgIGJvcmRlclNpZGU9e2hhc0RpdmlkZXIgPyAndG9wJyA6IHVuZGVmaW5lZH1cbiAgPlxuICAgIDxUZXh0IHZhcmlhbnQ9XCJjYXBzXCI+e2NoaWxkcmVufTwvVGV4dD5cbiAgPC9Cb3g+XG4pO1xuXG5jb25zdCBNZW51SXRlbURpdmlkZXIgPSAoKSA9PiAoXG4gIDxCb3ggaGVpZ2h0PXtjb21wb25lbnRWYXJzLmJvcmRlcldpZHRofSBtYXJnaW5ZPXsxfSBiYWNrZ3JvdW5kQ29sb3I9XCJib3JkZXJcIiAvPlxuKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVJdGVtID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHsgY2hpbGRyZW4sIGlzU2VsZWN0ZWQsIGlzQWN0aXZlLCBpc0Rpc2FibGVkLCBpY29uLCB2YXJpYW50ID0gJ25ldXRyYWwnLCBoYXNEaXZpZGVyLCAuLi5wcm9wcyB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIHtoYXNEaXZpZGVyICYmIDxNZW51SXRlbURpdmlkZXIgLz59XG4gICAgICAgIDxNZW51SXRlbVJvb3RcbiAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICBpc1NlbGVjdGVkPXtpc1NlbGVjdGVkfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgY29sb3I9e3ZhcmlhbnRTdHlsZXNbdmFyaWFudF0uY29sb3J9XG4gICAgICAgICAgaGFzSWNvbj17Qm9vbGVhbihpY29uKX1cbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgYmFja2dyb3VuZDogaXNBY3RpdmUgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5iYWNrZ3JvdW5kQ29sb3JBY3RpdmUsXG4gICAgICAgICAgICBbJy0tZ3JuLWNvbG9yLWljb24nXTogaXNBY3RpdmUgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5pY29uQ29sb3JBY3RpdmUsXG4gICAgICAgICAgfX1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgID5cbiAgICAgICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSBoYXNFdmVuQm91bmRhcnkgY29sb3I9e3ZhcmlhbnRTdHlsZXNbdmFyaWFudF0uY29sb3J9IC8+fVxuICAgICAgICAgIDxCb3ggd2lkdGg9XCIxMDAlXCIgbWluV2lkdGg9XCIwcHhcIiB0YWc9XCJzcGFuXCI+XG4gICAgICAgICAgICA8VGV4dCBoYXNFbGxpcHNpcz57Y2hpbGRyZW59PC9UZXh0PlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICAgIHtpc1NlbGVjdGVkICYmIDxJY29uIGljb249ezxJY29uQ2hlY2sgLz59IC8+fVxuICAgICAgICA8L01lbnVJdGVtUm9vdD5cbiAgICAgIDwvPlxuICAgICk7XG4gIH0sXG4pO1xuIl19 */")
+    css: /*#__PURE__*/css("display:grid;grid-auto-flow:column;grid-template-columns:", hasIcon ? 'auto 1fr' : '1fr auto', ";", (hasIcon || isSelected) && "gap: 8px", ";", isDisabled && "color: ".concat(getColor('contentDisabled')), ";", !isDisabled && "cursor: pointer;", ";align-items:center;justify-content:start;list-style:none;padding:0 ", itemXPadding, "px;margin:0 ", cardPadding, "px;min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";appearance:none;color:", color, ";.Icon{transition:unset;}" + (process.env.NODE_ENV === "production" ? "" : ";label:MenuItemRoot;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0VjIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvbWVudS5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXREaW1lbnNpb24sIGdldFJhZGl1cywgZ2V0U2hhZG93LCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEJveCwgSWNvbiwgVGV4dCB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNoZWNrIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgcGxhY2VtZW50U3R5bGVzIH0gZnJvbSAnLi9zdHlsZXMnO1xuaW1wb3J0IHsgVHJhbnNpdGlvbiB9IGZyb20gJ0BoZWFkbGVzc3VpL3JlYWN0JztcblxuY29uc3QgY2FyZFBhZGRpbmcgPSA4O1xuY29uc3QgY2FyZFBhZGRpbmdQeCA9IGAke2NhcmRQYWRkaW5nfXB4YDtcbmNvbnN0IGl0ZW1YUGFkZGluZyA9IDEyO1xuXG5leHBvcnQgY29uc3QgTWVudVRyYW5zaXRpb24gPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBzaG93LCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFRyYW5zaXRpb25cbiAgICByZWY9e3JlZn1cbiAgICBzaG93PXtzaG93fVxuICAgIGVudGVyRnJvbT1cImVudGVyRnJvbVwiXG4gICAgZW50ZXJUbz1cImVudGVyVG9cIlxuICAgIGxlYXZlRnJvbT1cImxlYXZlRnJvbVwiXG4gICAgbGVhdmVUbz1cImxlYXZlVG9cIlxuICAgIGNzcz17Y3NzYFxuICAgICAgJi5sZWF2ZVRvLFxuICAgICAgJi5lbnRlckZyb20ge1xuICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgfVxuICAgICAgJi5lbnRlclRvIHtcbiAgICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogJHtnZXRUcmFuc2l0aW9uKCd4eEZhc3QnKX07XG4gICAgICB9XG4gICAgICAmLmxlYXZlVG8ge1xuICAgICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICAgICAgfVxuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L1RyYW5zaXRpb24+XG4pKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVDYXJkID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgekluZGV4ID0gMSwgd2lkdGgsIHBsYWNlbWVudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDx1bFxuICAgIHJlZj17cmVmfVxuICAgIGNzcz17Y3NzYFxuICAgICAgcGFkZGluZzogJHtjYXJkUGFkZGluZ1B4fSAwO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignYmFja2dyb3VuZCcpfTtcbiAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICAgIGJveC1zaGFkb3c6ICR7Z2V0U2hhZG93KCdtJyl9O1xuICAgICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICAgICBtYXgtaGVpZ2h0OiA0NjhweDtcbiAgICAgIG92ZXJmbG93OiBhdXRvO1xuICAgICAgd2lkdGg6ICR7Z2V0RGltZW5zaW9uKHdpZHRoKX07XG4gICAgICAke3BsYWNlbWVudFN0eWxlc1twbGFjZW1lbnRdfTtcblxuICAgICAgJjpmb2N1cyB7XG4gICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICB9XG4gICAgYH1cbiAgICB7Li4ucHJvcHN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvdWw+XG4pKTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGJhY2tncm91bmRDb2xvckFjdGl2ZTogZ2V0Q29sb3IoJ2JhY2tncm91bmRPdmVybGF5JyksXG4gICAgaWNvbkNvbG9yQWN0aXZlOiBnZXRDb2xvcignY29udGVudCcpLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBjb2xvcjogZ2V0Q29sb3IoJ2RhbmdlcicpLFxuICAgIGJhY2tncm91bmRDb2xvckFjdGl2ZTogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmQsXG4gIH0sXG59O1xuXG5jb25zdCBNZW51SXRlbVJvb3QgPSBmb3J3YXJkUmVmKFxuICAoeyBjaGlsZHJlbiwgaXNEaXNhYmxlZCwgaGFzSWNvbiwgaXNTZWxlY3RlZCwgY29sb3IsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICAgIDxsaVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAke2hhc0ljb24gPyAnYXV0byAxZnInIDogJzFmciBhdXRvJ307XG4gICAgICAgICR7KGhhc0ljb24gfHwgaXNTZWxlY3RlZCkgJiYgYGdhcDogOHB4YH07XG4gICAgICAgICR7aXNEaXNhYmxlZCAmJiBgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfWB9O1xuICAgICAgICAkeyFpc0Rpc2FibGVkICYmIGBjdXJzb3I6IHBvaW50ZXI7YH07XG4gICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgICAgIHBhZGRpbmc6IDAgJHtpdGVtWFBhZGRpbmd9cHg7XG4gICAgICAgIG1hcmdpbjogMCAke2NhcmRQYWRkaW5nfXB4O1xuICAgICAgICBtaW4taGVpZ2h0OiAke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgICBjb2xvcjogJHtjb2xvcn07XG5cbiAgICAgICAgLkljb24ge1xuICAgICAgICAgIHRyYW5zaXRpb246IHVuc2V0O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2xpPlxuICApLFxuKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVHcm91cFRpdGxlID0gKHsgY2hpbGRyZW4sIGhhc0RpdmlkZXIgfSkgPT4gKFxuICA8Qm94XG4gICAgcGFkZGluZ1g9e2Ake2NhcmRQYWRkaW5nICsgaXRlbVhQYWRkaW5nfXB4YH1cbiAgICBwYWRkaW5nQm90dG9tPXtjYXJkUGFkZGluZ1B4fVxuICAgIG1hcmdpblRvcD17Y2FyZFBhZGRpbmdQeH1cbiAgICBwYWRkaW5nVG9wPXtoYXNEaXZpZGVyID8gYCR7Y2FyZFBhZGRpbmcgKiAyfXB4YCA6IHVuZGVmaW5lZH1cbiAgICBib3JkZXJTaWRlPXtoYXNEaXZpZGVyID8gJ3RvcCcgOiB1bmRlZmluZWR9XG4gID5cbiAgICA8VGV4dCB2YXJpYW50PVwiY2Fwc1wiPntjaGlsZHJlbn08L1RleHQ+XG4gIDwvQm94PlxuKTtcblxuY29uc3QgTWVudUl0ZW1EaXZpZGVyID0gKCkgPT4gKFxuICA8Qm94IGhlaWdodD17Y29tcG9uZW50VmFycy5ib3JkZXJXaWR0aH0gbWFyZ2luWT17MX0gYmFja2dyb3VuZENvbG9yPVwiYm9yZGVyXCIgLz5cbik7XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbSA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7IGNoaWxkcmVuLCBpc1NlbGVjdGVkLCBpc0FjdGl2ZSwgaXNEaXNhYmxlZCwgaWNvbiwgdmFyaWFudCA9ICduZXV0cmFsJywgaGFzRGl2aWRlciwgLi4ucHJvcHMgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICB7aGFzRGl2aWRlciAmJiA8TWVudUl0ZW1EaXZpZGVyIC8+fVxuICAgICAgICA8TWVudUl0ZW1Sb290XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgaXNTZWxlY3RlZD17aXNTZWxlY3RlZH1cbiAgICAgICAgICBpc0Rpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICAgIGNvbG9yPXt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfVxuICAgICAgICAgIGhhc0ljb249e0Jvb2xlYW4oaWNvbil9XG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIGJhY2tncm91bmQ6IGlzQWN0aXZlICYmIHZhcmlhbnRTdHlsZXNbdmFyaWFudF0uYmFja2dyb3VuZENvbG9yQWN0aXZlLFxuICAgICAgICAgICAgWyctLWdybi1jb2xvci1pY29uJ106IGlzQWN0aXZlICYmIHZhcmlhbnRTdHlsZXNbdmFyaWFudF0uaWNvbkNvbG9yQWN0aXZlLFxuICAgICAgICAgIH19XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICA+XG4gICAgICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gaGFzRXZlbkJvdW5kYXJ5IGNvbG9yPXt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfSAvPn1cbiAgICAgICAgICA8Qm94IHdpZHRoPVwiMTAwJVwiIG1pbldpZHRoPVwiMHB4XCIgdGFnPVwic3BhblwiPlxuICAgICAgICAgICAgPFRleHQgaGFzRWxsaXBzaXM+e2NoaWxkcmVufTwvVGV4dD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgICB7aXNTZWxlY3RlZCAmJiA8SWNvbiBpY29uPXs8SWNvbkNoZWNrIC8+fSAvPn1cbiAgICAgICAgPC9NZW51SXRlbVJvb3Q+XG4gICAgICA8Lz5cbiAgICApO1xuICB9LFxuKTtcbiJdfQ== */")
   }, props), children);
 });
-export var MenuGroupTitle = function MenuGroupTitle(_ref3) {
-  var children = _ref3.children,
-      hasDivider = _ref3.hasDivider;
+export var MenuGroupTitle = function MenuGroupTitle(_ref4) {
+  var children = _ref4.children,
+      hasDivider = _ref4.hasDivider;
   return ___EmotionJSX(Box, {
     paddingX: "".concat(cardPadding + itemXPadding, "px"),
     paddingBottom: cardPaddingPx,
@@ -83,16 +100,16 @@ var MenuItemDivider = function MenuItemDivider() {
   });
 };
 
-export var MenuItem = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var children = _ref4.children,
-      isSelected = _ref4.isSelected,
-      isActive = _ref4.isActive,
-      isDisabled = _ref4.isDisabled,
-      icon = _ref4.icon,
-      _ref4$variant = _ref4.variant,
-      variant = _ref4$variant === void 0 ? 'neutral' : _ref4$variant,
-      hasDivider = _ref4.hasDivider,
-      props = _objectWithoutProperties(_ref4, _excluded3);
+export var MenuItem = /*#__PURE__*/forwardRef(function (_ref5, ref) {
+  var children = _ref5.children,
+      isSelected = _ref5.isSelected,
+      isActive = _ref5.isActive,
+      isDisabled = _ref5.isDisabled,
+      icon = _ref5.icon,
+      _ref5$variant = _ref5.variant,
+      variant = _ref5$variant === void 0 ? 'neutral' : _ref5$variant,
+      hasDivider = _ref5.hasDivider,
+      props = _objectWithoutProperties(_ref5, _excluded4);
 
   return ___EmotionJSX(React.Fragment, null, hasDivider && ___EmotionJSX(MenuItemDivider, null), ___EmotionJSX(MenuItemRoot, _extends({
     ref: ref,

package/es/styles/variables.css

@@ -44,6 +44,7 @@
   --grn-transition-slow: 400ms;
   --grn-transition-fast: 200ms;
   --grn-transition-xFast: 160ms;
+  --grn-transition-xxFast: 80ms;
 }
 
 :root {

package/es/variables.js

@@ -110,7 +110,8 @@ export var vars = {
   transitions: {
     slow: 'slow',
     fast: 'fast',
-    xFast: 'xFast'
+    xFast: 'xFast',
+    xxFast: 'xxFast'
   },
   colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.greys), colors.fades), colors.bases), colors.semantics.internal), colors.semantics.generic), colors.semantics.content), colors.semantics.background), colors.semantics.border)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",