@luminati-io/uikit 1.7.2 → 1.7.3

package/dist/uikit.umd.js

@@ -5882,7 +5882,7 @@ var Badge = function Badge(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(BadgeWrapper, {
     $shape: shape,
     $color: bgColor,
-    iconPlacement: iconPlacement
+    flex_direction: iconPlacement == 'right' ? 'row-reverse' : 'row'
   }, icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_5__["default"], {
     name: icon,
     size: "xxs",
@@ -5905,10 +5905,7 @@ Badge.propTypes = {
 var BadgeWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(Flex).attrs({
   gap: _theme__WEBPACK_IMPORTED_MODULE_7__["default"].spacing["01"],
   align_items: 'center',
-  padding: "".concat(_theme__WEBPACK_IMPORTED_MODULE_7__["default"].spacing["02"]),
-  flex_direction: function flex_direction(props) {
-    return props.iconPlacement == 'right' ? 'row-reverse' : 'row';
-  }
+  padding: "".concat(_theme__WEBPACK_IMPORTED_MODULE_7__["default"].spacing["02"])
 }).withConfig({
   displayName: "BadgeWrapper",
   componentId: "sc-1fckq03-0"
@@ -6684,16 +6681,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-popper */ "./node_modules/react-popper/lib/esm/usePopper.js");
+/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-popper */ "./node_modules/react-popper/lib/esm/usePopper.js");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./util */ "./src/hoc/util.js");
+/* harmony import */ var _with_portal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./with_portal */ "./src/hoc/with_portal.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["popoverProps", "onOpenChange"];
+var _excluded = ["popoverProps", "onOpenChange"],
+  _excluded2 = ["portalTarget"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -6708,12 +6707,19 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-var withPopover = function withPopover(Comp, PopoverComp, popoverOptions) {
+
+var withPopover = function withPopover(Comp, PopoverComp) {
+  var popoverOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var WithPopover = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
-    var popoverProps = props.popoverProps,
+    var _props$popoverProps = props.popoverProps,
+      popoverProps = _props$popoverProps === void 0 ? {} : _props$popoverProps,
       onOpenChange = props.onOpenChange,
       compProps = _objectWithoutProperties(props, _excluded);
-    var placement = popoverOptions.placement;
+    var portalTarget = popoverProps.portalTarget,
+      restPopoverProps = _objectWithoutProperties(popoverProps, _excluded2);
+    var placement = popoverOptions.placement,
+      wrapperClassName = popoverOptions.wrapperClassName,
+      wrapperStyle = popoverOptions.wrapperStyle;
     var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
       referenceElement = _useState2[0],
@@ -6737,7 +6743,7 @@ var withPopover = function withPopover(Comp, PopoverComp, popoverOptions) {
         return !v;
       });
     }, []);
-    var _usePopper = (0,react_popper__WEBPACK_IMPORTED_MODULE_4__.usePopper)(referenceElement, popperElement, {
+    var _usePopper = (0,react_popper__WEBPACK_IMPORTED_MODULE_5__.usePopper)(referenceElement, popperElement, {
         placement: placement,
         modifiers: [{
           name: 'offset',
@@ -6763,29 +6769,44 @@ var withPopover = function withPopover(Comp, PopoverComp, popoverOptions) {
     }, [popoverVisible, hidePopover]);
     (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useOutsideClick)([referenceElement, popperElement], hideAndStopEvt);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RefCompContainer, {
-      ref: setReferenceElement
+      ref: setReferenceElement,
+      className: wrapperClassName,
+      style: wrapperStyle
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Comp, _extends({
       ref: ref
     }, compProps, {
       popover: popoverApi
-    }))), popoverVisible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PopoverContainer, _extends({
+    }))), popoverVisible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PopoverContainer, {
       ref: setPopperElement,
-      style: styles.popper
-    }, attributes.popper, {
-      visible: popoverVisible
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PopoverComp, _extends({}, popoverProps, {
+      style: styles.popper,
+      attributes: attributes.popper,
+      visible: popoverVisible,
+      portalTarget: portalTarget
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PopoverComp, _extends({}, restPopoverProps, {
       popover: popoverApi
     }))));
   });
   WithPopover.displayName = "WithPopover(".concat((0,_util__WEBPACK_IMPORTED_MODULE_3__.getDisplayName)(Comp), ")");
   return WithPopover;
 };
+var PopoverContainer = (0,_with_portal__WEBPACK_IMPORTED_MODULE_4__["default"])( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function _PopoverContainer(props, ref) {
+  var style = props.style,
+    children = props.children,
+    attributes = props.attributes,
+    visible = props.visible;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledPopoverContainer, _extends({
+    ref: ref,
+    style: style
+  }, attributes, {
+    visible: visible
+  }), children);
+}));
 var RefCompContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "RefCompContainer",
   componentId: "sc-1hvrlux-0"
 })(["width:fit-content;"]);
-var PopoverContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(RefCompContainer).withConfig({
-  displayName: "PopoverContainer",
+var StyledPopoverContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(RefCompContainer).withConfig({
+  displayName: "StyledPopoverContainer",
   componentId: "sc-1hvrlux-1"
 })(["z-index:1000;visibility:", ";"], function (props) {
   return props.visible ? 'visible' : 'hidden';
@@ -6807,6 +6828,49 @@ var useStateWithCallback = function useStateWithCallback(initialValue, callback)
 
 /***/ }),
 
+/***/ "./src/hoc/with_portal.js":
+/*!********************************!*\
+  !*** ./src/hoc/with_portal.js ***!
+  \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "react-dom");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./util */ "./src/hoc/util.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["portalTarget"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+var withPortal = function withPortal(Comp) {
+  var WithPortal = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
+    var portalTarget = props.portalTarget,
+      rest = _objectWithoutProperties(props, _excluded);
+    var comp = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Comp, _extends({
+      ref: ref
+    }, rest));
+    return portalTarget ? /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal(comp, portalTarget) : comp;
+  });
+  WithPortal.displayName = "WithPortal(".concat((0,_util__WEBPACK_IMPORTED_MODULE_2__.getDisplayName)(Comp), ")");
+  return WithPortal;
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (withPortal);
+
+/***/ }),
+
 /***/ "./src/hooks/index.js":
 /*!****************************!*\
   !*** ./src/hooks/index.js ***!
@@ -7606,28 +7670,25 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/react-select.esm.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
-/* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../menu */ "./src/menu/index.js");
-/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
-/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./shared */ "./src/input/shared.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _translation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../translation */ "./src/translation.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
-/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @icons */ "./assets/icons/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/react-select.esm.js");
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
+/* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../menu */ "./src/menu/index.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./shared */ "./src/input/shared.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _translation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../translation */ "./src/translation.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
+/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @icons */ "./assets/icons/index.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-var _excluded = ["label", "labelIcon", "required", "size", "value", "defaultValue", "placeholder", "options", "onChange", "onFocus", "onBlur", "multiselect", "creatable", "clearable", "disabled", "invalid", "helperText", "classNamePrefix", "menuPortalTarget"];
+var _excluded = ["label", "labelIcon", "required", "size", "value", "defaultValue", "placeholder", "options", "onChange", "onFocus", "onBlur", "multiselect", "creatable", "clearable", "disabled", "invalid", "helperText", "classNamePrefix", "menuPortalTarget", "filterOption"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -7647,14 +7708,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-var Item = _menu__WEBPACK_IMPORTED_MODULE_4__.Menu.Item;
-var _StyledItem = styled_components__WEBPACK_IMPORTED_MODULE_0___default()(Item).withConfig({
-  displayName: "_StyledItem",
-  componentId: "sc-1clfzmr-0"
-})(["", ""], function (p) {
-  return p.$_css;
-});
-var Dropdown = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
+var Item = _menu__WEBPACK_IMPORTED_MODULE_3__.Menu.Item;
+var Dropdown = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
   var label = props.label,
     labelIcon = props.labelIcon,
     required = props.required,
@@ -7674,23 +7729,25 @@ var Dropdown = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forward
     helperText = props.helperText,
     classNamePrefix = props.classNamePrefix,
     menuPortalTarget = props.menuPortalTarget,
+    filterOption = props.filterOption,
     rest = _objectWithoutProperties(props, _excluded);
-  var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_7__.useLabelId)(props.id);
-  var t = (0,_translation__WEBPACK_IMPORTED_MODULE_8__.useTranslation)();
+  var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_6__.useLabelId)(props.id);
+  var t = (0,_translation__WEBPACK_IMPORTED_MODULE_7__.useTranslation)();
   var styles = useCustomStyles(size);
-  var SelectComp = creatable ? react_select__WEBPACK_IMPORTED_MODULE_11__["default"].Creatable : react_select__WEBPACK_IMPORTED_MODULE_11__["default"];
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex, _extends({
+  var SelectComp = creatable ? react_select__WEBPACK_IMPORTED_MODULE_10__["default"].Creatable : react_select__WEBPACK_IMPORTED_MODULE_10__["default"];
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_2__.Flex, _extends({
     ref: ref,
     "data-testid": "dropdown"
   }, rest, {
     flex_direction: "column",
-    gap: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["02"]
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_6__.InputLabel, {
+    gap: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"]
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_5__.InputLabel, {
     id: labelId,
     label: label,
     labelIcon: labelIcon,
     required: required
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(SelectComp, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectComp, {
+    filterOption: filterOption,
     "aria-labelledby": label ? labelId : undefined,
     "aria-invalid": invalid,
     value: value,
@@ -7714,31 +7771,36 @@ var Dropdown = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forward
       Option: Option
     },
     classNamePrefix: classNamePrefix,
-    menuPortalTarget: menuPortalTarget
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_6__.HelperText, {
+    menuPortalTarget: menuPortalTarget,
+    isOptionDisabled: function isOptionDisabled(opt) {
+      return opt.disabled;
+    },
+    closeMenuOnSelect: !multiselect
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_5__.HelperText, {
     invalid: invalid
   }, helperText));
 });
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
-  value: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().any),
-  defaultValue: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().any),
-  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func),
-  onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func),
-  onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func),
-  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
-  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
-  required: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
-  invalid: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
-  label: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func)]),
-  labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
-  helperText: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func)]),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['sm', 'md', 'lg']),
-  options: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().any)).isRequired,
-  multiselect: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
-  clearable: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
-  creatable: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
-  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)
+  value: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
+  defaultValue: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
+  filterOption: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  required: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  invalid: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  label: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
+  labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  helperText: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['sm', 'md', 'lg']),
+  options: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().any)).isRequired,
+  multiselect: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  clearable: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  creatable: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 Dropdown.defaultProps = {
   size: 'sm',
@@ -7749,17 +7811,17 @@ var DropdownIndicator = function DropdownIndicator(props) {
     innerRef = props.innerRef,
     innerProps = props.innerProps,
     isDisabled = props.isDisabled;
-  var ic = _icons__WEBPACK_IMPORTED_MODULE_10__["default"][selectProps.menuIsOpen ? 'ChevronUp' : 'ChevronDown'];
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("svg", _extends({
+  var ic = _icons__WEBPACK_IMPORTED_MODULE_9__["default"][selectProps.menuIsOpen ? 'ChevronUp' : 'ChevronDown'];
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", _extends({
     ref: innerRef,
     width: "18px",
     height: "18px",
     viewBox: ic.viewBox,
     style: {
-      color: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_9,
+      color: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_9,
       cursor: isDisabled ? 'default' : 'pointer'
     }
-  }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
+  }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
     href: "#".concat(ic.id)
   }));
 };
@@ -7767,17 +7829,17 @@ DropdownIndicator.displayName = 'DropdownIndicator';
 var ClearIndicator = function ClearIndicator(props) {
   var innerRef = props.innerRef,
     innerProps = props.innerProps;
-  var ic = _icons__WEBPACK_IMPORTED_MODULE_10__["default"].CloseSmall;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("svg", _extends({
+  var ic = _icons__WEBPACK_IMPORTED_MODULE_9__["default"].CloseSmall;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", _extends({
     ref: innerRef,
     width: "18px",
     height: "18px",
     viewBox: ic.viewBox,
     style: {
-      color: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_9,
+      color: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_9,
       cursor: 'pointer'
     }
-  }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
+  }, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
     href: "#".concat(ic.id)
   }));
 };
@@ -7786,13 +7848,12 @@ var Option = function Option(props) {
   var data = props.data,
     className = props.className,
     cx = props.cx,
-    getStyles = props.getStyles,
     isDisabled = props.isDisabled,
     isFocused = props.isFocused,
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_StyledItem, _extends({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Item, _extends({
     ref: innerRef,
     className: cx({
       option: true,
@@ -7802,13 +7863,14 @@ var Option = function Option(props) {
     }, className)
   }, innerProps, {
     text: data.label,
-    tag: "div",
-    $_css: getStyles('option', props)
+    disabled: isDisabled,
+    selected: isSelected,
+    tag: "div"
   }));
 };
 Option.displayName = 'Option';
 var useCustomStyles = function useCustomStyles(size) {
-  return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+  return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return {
       control: function control(baseStyles, state) {
         var height = {
@@ -7816,25 +7878,25 @@ var useCustomStyles = function useCustomStyles(size) {
           md: 40,
           lg: 48
         };
-        var borderColor = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_7;
-        var color = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_11_50;
-        var backgroundColor = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.white;
+        var borderColor = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_7;
+        var color = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_11_50;
+        var backgroundColor = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.white;
         var cursor = 'text';
         if (state.isDisabled) {
-          color = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_9;
-          borderColor = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_6;
-          backgroundColor = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_2;
+          color = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_9;
+          borderColor = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_6;
+          backgroundColor = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_2;
           cursor = 'default';
-        } else if (state.selectProps['aria-invalid']) borderColor = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.red_11;else if (state.isFocused) borderColor = _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.blue_11;
+        } else if (state.selectProps['aria-invalid']) borderColor = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.red_11;else if (state.isFocused) borderColor = _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.blue_11;
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          minHeight: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.toPixel)(height[size] || height.sm),
-          padding: "".concat(_shared__WEBPACK_IMPORTED_MODULE_6__.inputVerticalPadding, "px ").concat(_shared__WEBPACK_IMPORTED_MODULE_6__.inputHorizontalPadding, "px"),
+          minHeight: (0,_utils__WEBPACK_IMPORTED_MODULE_8__.toPixel)(height[size] || height.sm),
+          padding: "".concat(_shared__WEBPACK_IMPORTED_MODULE_5__.inputVerticalPadding, "px ").concat(_shared__WEBPACK_IMPORTED_MODULE_5__.inputHorizontalPadding, "px"),
           /* Label/sm */
-          fontFamily: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].font_family.sans,
+          fontFamily: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].font_family.sans,
           fontStyle: 'normal',
-          fontWeight: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].font_weight.regular,
-          fontSize: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].font_size.sm,
-          lineHeight: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].line_height.none,
+          fontWeight: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].font_weight.regular,
+          fontSize: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].font_size.sm,
+          lineHeight: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].line_height.none,
           color: color,
           backgroundColor: backgroundColor,
           borderColor: borderColor,
@@ -7849,38 +7911,68 @@ var useCustomStyles = function useCustomStyles(size) {
       },
       placeholder: function placeholder(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          color: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_11
+          color: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_11
         });
       },
       indicatorsContainer: function indicatorsContainer(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          gap: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["03"],
+          gap: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["03"],
           height: '24px'
         });
       },
       menu: function menu(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          margin: '8px 0 0 0',
-          padding: '4px 0',
+          margin: "".concat(_theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["03"], " 0 0 0"),
+          padding: "".concat(_theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"], " 0"),
           boxSizing: 'border-box',
           minWidth: '168px',
           maxWidth: '540px',
-          background: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.white,
-          borderRadius: '4px',
-          boxShadow: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].box_shadow.md
+          background: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.white,
+          borderRadius: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"],
+          boxShadow: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].box_shadow.md
         });
       },
       menuList: function menuList(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
           display: 'flex',
           flexDirection: 'column',
-          gap: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["01"]
+          gap: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["01"]
         });
       },
       menuPortal: function menuPortal(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
           zIndex: 99999
         });
+      },
+      multiValue: function multiValue(baseStyles) {
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          backgroundColor: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_3,
+          borderRadius: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"]
+        });
+      },
+      multiValueLabel: function multiValueLabel(baseStyles) {
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          /* Label/sm */
+          fontFamily: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].font_family.sans,
+          fontStyle: 'normal',
+          fontWeight: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].font_weight.regular,
+          fontSize: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].font_size.sm,
+          lineHeight: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].line_height.none,
+          color: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_11_25,
+          paddingLeft: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"],
+          paddingRight: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["00"]
+        });
+      },
+      multiValueRemove: function multiValueRemove(baseStyles) {
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          borderRadius: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"],
+          color: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_11,
+          cursor: 'pointer',
+          ':hover': {
+            backgroundColor: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_3,
+            color: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_11_50
+          }
+        });
       }
     };
   }, [size]);
@@ -8869,20 +8961,44 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./box */ "./src/layout/box.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./box */ "./src/layout/box.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
 
-var Flex = styled_components__WEBPACK_IMPORTED_MODULE_0___default()(_box__WEBPACK_IMPORTED_MODULE_2__["default"]).withConfig({
-  displayName: "Flex",
+
+var Flex = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function _Flex(props, ref) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledFlex, _extends({
+    ref: ref
+  }, props));
+});
+Flex.defaultProps = {
+  flex_direction: 'row'
+};
+Flex.propTypes = {
+  inline: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
+  align_items: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'start', 'end', 'self-start', 'self-end']),
+  align_content: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['normal', 'stretch', 'flex-start', 'flex-end', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline']),
+  justify_items: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
+  justify_content: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly']),
+  flex_wrap: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['nowrap', 'wrap', 'wrap-reverse']),
+  flex_direction: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+  gap: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
+  row_gap: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
+  column_gap: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)
+};
+var StyledFlex = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_box__WEBPACK_IMPORTED_MODULE_3__["default"]).withConfig({
+  displayName: "StyledFlex",
   componentId: "sc-2aqm31-0"
 })(["display:", ";align-items:", ";align-content:", ";justify-items:", ";justify-content:", ";flex-wrap:", ";flex-direction:", ";gap:", ";row-gap:", ";column-gap:", ";"], function (props) {
   return props.inline ? 'inline-flex' : 'flex';
@@ -8905,21 +9021,6 @@ var Flex = styled_components__WEBPACK_IMPORTED_MODULE_0___default()(_box__WEBPAC
 }, function (props) {
   return props.column_gap;
 });
-Flex.defaultProps = {
-  flex_direction: 'row'
-};
-Flex.propTypes = {
-  inline: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  align_items: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['flex-start', 'center']),
-  align_content: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  justify_items: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  justify_content: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  flex_wrap: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  flex_direction: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
-  gap: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  row_gap: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  column_gap: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
-};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Flex);
 
 /***/ }),
@@ -9084,12 +9185,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "Menu": () => (/* reexport safe */ _menu__WEBPACK_IMPORTED_MODULE_0__["default"])
 /* harmony export */ });
 /* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./menu */ "./src/menu/menu.js");
+/* harmony import */ var _menu_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./menu_item */ "./src/menu/menu_item.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
 
 
+_menu__WEBPACK_IMPORTED_MODULE_0__["default"].Item = _menu_item__WEBPACK_IMPORTED_MODULE_1__["default"];
+
 
 /***/ }),
 
@@ -9106,22 +9210,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
-/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _menu_item__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./menu_item */ "./src/menu/menu_item.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shared */ "./src/menu/shared.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["items", "size"],
-  _excluded2 = ["type", "text", "secondaryText", "tertiaryText", "description", "size", "children", "variant", "tag"],
-  _excluded3 = ["isLeft"],
-  _excluded4 = ["text", "size", "children"];
+var _excluded = ["items", "size"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -9129,21 +9226,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
-
-
-var Label = _typography__WEBPACK_IMPORTED_MODULE_4__["default"].Label;
 var Menu = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
   var items = props.items,
     size = props.size,
     rest = _objectWithoutProperties(props, _excluded);
   if (!items || !items.length) return null;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuContainer, _extends({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_3__.MenuContainer, _extends({
     ref: ref
   }, rest, {
     role: "menu",
     "data-testid": "menu"
-  }), buildMenuItems(items, {
+  }), (0,_menu_item__WEBPACK_IMPORTED_MODULE_2__.buildMenuItems)(items, {
     size: size
   }));
 });
@@ -9152,15 +9245,60 @@ Menu.defaultProps = {
   size: 'md'
 };
 Menu.propTypes = {
-  size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['sm', 'md']),
-  items: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().any)).isRequired
+  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['sm', 'md']),
+  items: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().any)).isRequired
 };
-var MenuContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default().ul.withConfig({
-  displayName: "MenuContainer",
-  componentId: "sc-1qqkfjv-0"
-})(["margin:0;padding:4px 0;box-sizing:border-box;min-width:168px;max-width:540px;background:white;border-radius:4px;display:flex;flex-direction:column;gap:2px;", ""], function (props) {
-  return props.isGroup ? undefined : (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["box-shadow:", ";"], _theme__WEBPACK_IMPORTED_MODULE_6__["default"].box_shadow.md);
-});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Menu);
+
+/***/ }),
+
+/***/ "./src/menu/menu_item.js":
+/*!*******************************!*\
+  !*** ./src/menu/menu_item.js ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "buildMenuItems": () => (/* binding */ buildMenuItems),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _hoc__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hoc */ "./src/hoc/index.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _menu_item_divider__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./menu_item_divider */ "./src/menu/menu_item_divider.js");
+/* harmony import */ var _menu_item_group__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./menu_item_group */ "./src/menu/menu_item_group.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./shared */ "./src/menu/shared.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["type", "text", "secondaryText", "tertiaryText", "description", "size", "children", "variant", "tag", "disabled", "selected"],
+  _excluded2 = ["isLeft"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+
+
+
+
+
+var Label = _typography__WEBPACK_IMPORTED_MODULE_5__["default"].Label;
 var MenuItem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
   var type = props.type,
     text = props.text,
@@ -9171,37 +9309,52 @@ var MenuItem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forward
     children = props.children,
     variant = props.variant,
     tag = props.tag,
-    rest = _objectWithoutProperties(props, _excluded2);
-  if (type == 'divider') return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemDivider, {
+    disabled = props.disabled,
+    selected = props.selected,
+    rest = _objectWithoutProperties(props, _excluded);
+  if (type == 'divider') return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_menu_item_divider__WEBPACK_IMPORTED_MODULE_8__["default"], {
     ref: ref
   });
-  if (type == 'group') return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemGroup, _extends({
-    ref: ref
-  }, props));
-  var subMenu = props.subMenu || children;
-  var _getIconProps = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getIconProps)('MenuItem', props),
+  var subItems = Array.isArray(children) && children.length ? buildMenuItems(children, {
+    size: size
+  }) : undefined;
+  if (type == 'group') {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_menu_item_group__WEBPACK_IMPORTED_MODULE_9__["default"], _extends({
+      ref: ref
+    }, props), subItems);
+  }
+  var _getIconProps = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.getIconProps)('MenuItem', props),
     isLeft = _getIconProps.isLeft,
-    iconProps = _objectWithoutProperties(_getIconProps, _excluded3);
-  var iconColor = variant == 'negative' ? 'red_10' : 'gray_9';
-  var labelColor = variant == 'negative' ? 'red_11' : 'gray_11_50';
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemContainer, {
+    iconProps = _objectWithoutProperties(_getIconProps, _excluded2);
+  var iconColor = disabled ? 'gray_6' : variant == 'negative' ? 'red_10' : 'gray_9';
+  var labelColor = disabled ? 'gray_9' : variant == 'negative' ? 'red_11' : 'gray_11_50';
+  var Comp = subItems ? MenuItemPopover : MenuItemButton;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_10__.MenuItemContainer, {
     ref: ref,
     as: tag,
     role: "menuitem"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledMenuItem, _extends({}, rest, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Comp, _extends({}, rest, {
+    "aria-disabled": !!disabled,
     size: size,
-    role: "button"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemText, null, isLeft && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_5__["default"], _extends({}, iconProps, {
+    role: "button",
+    popoverProps: {
+      subItems: subItems
+    }
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemText, null, isLeft && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_6__["default"], _extends({}, iconProps, {
     color: iconColor
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Label, {
     variant: "sm",
     no_wrap: true,
     color: labelColor
-  }, text), !!tertiaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Label, {
+  }, text), !!subItems && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SecondaryIcon, {
+    subMenu: true
+  }), !subItems && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, !!tertiaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Label, {
     variant: "sm",
     no_wrap: true,
     color: "gray_9"
-  }, tertiaryText), !!secondaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SecondaryText, null, secondaryText), subMenu && !secondaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SubMenuIcon, null)), !!description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Description, null, description)));
+  }, tertiaryText), !!secondaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SecondaryText, null, secondaryText), !secondaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SecondaryIcon, {
+    selected: selected
+  }))), !!description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Description, null, description)));
 });
 MenuItem.displayName = 'MenuItem';
 MenuItem.defaultProps = {
@@ -9216,31 +9369,56 @@ MenuItem.propTypes = {
   description: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
   type: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['item', 'divider', 'group']),
   size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['sm', 'md']),
-  icon: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_3__.iconNames),
-  children: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf(MenuItem),
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['default', 'negative'])
+  icon: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_4__.iconNames),
+  children: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_2___default().shape(MenuItem.propTypes)),
+  variant: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['default', 'negative']),
+  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
+  selected: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool)
 };
-Menu.Item = MenuItem;
-var MenuItemContainer = styled_components__WEBPACK_IMPORTED_MODULE_1___default().li.withConfig({
-  displayName: "MenuItemContainer",
-  componentId: "sc-1qqkfjv-1"
-})(["list-style:none;width:100%;"]);
-var StyledMenuItem = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
-  displayName: "StyledMenuItem",
-  componentId: "sc-1qqkfjv-2"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-decoration:none;background:0 none;border:0 none;padding:0 12px;box-sizing:border-box;width:100%;height:", ";gap:4px;cursor:pointer;&:disabled{cursor:not-allowed;}&:hover{background-color:", ";}&:hover,:visited,:focus{text-decoration:none;}&:active{background-color:", ";}"], function (props) {
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_3__.toPixel)(props.size == 'sm' ? 32 : 40);
-}, _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_2, _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_4);
+var MenuItemButton = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+  displayName: "MenuItemButton",
+  componentId: "sc-vtiffr-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-decoration:none;background:0 none;border:0 none;padding:0 12px;box-sizing:border-box;width:100%;height:", ";gap:4px;cursor:", ";&:hover{background-color:", ";}&:hover,:visited,:focus{text-decoration:none;}&:active{background-color:", ";}"], function (props) {
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toPixel)(props.size == 'sm' ? 32 : 40);
+}, function (props) {
+  return props['aria-disabled'] ? 'not-allowed' : 'pointer';
+}, _theme__WEBPACK_IMPORTED_MODULE_7__["default"].color.gray_2, _theme__WEBPACK_IMPORTED_MODULE_7__["default"].color.gray_4);
+var MenuItemPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_3__.withPopover)(function (props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemButton, _extends({}, props, {
+    onClick: props.popover.toggle
+  }));
+}, function (props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_10__.MenuContainer, {
+    onClick: props.popover.hide
+  }, props.subItems);
+}, {
+  placement: 'right-start',
+  wrapperStyle: {
+    width: '100%'
+  }
+});
 var MenuItemText = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "MenuItemText",
-  componentId: "sc-1qqkfjv-3"
-})(["display:flex;align-items:center;justify-content:flex-start;width:100%;gap:8px;max-width:516px;overflow:hidden;"]);
-var SubMenuIcon = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_icon__WEBPACK_IMPORTED_MODULE_5__["default"]).attrs({
-  name: 'ChevronRight',
+  componentId: "sc-vtiffr-1"
+})(["display:flex;align-items:center;justify-content:flex-start;width:100%;gap:8px;max-width:516px;"]);
+var SecondaryIcon = function SecondaryIcon(props) {
+  var subMenu = props.subMenu,
+    selected = props.selected;
+  if (subMenu) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RightIcon, {
+    name: "ChevronRight"
+  });
+  if (selected) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RightIcon, {
+    name: "Check",
+    color: "blue_11"
+  });
+  return null;
+};
+SecondaryIcon.displayName = 'SecondaryIcon';
+var RightIcon = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_icon__WEBPACK_IMPORTED_MODULE_6__["default"]).attrs({
   size: 'xs'
 }).withConfig({
-  displayName: "SubMenuIcon",
-  componentId: "sc-1qqkfjv-4"
+  displayName: "RightIcon",
+  componentId: "sc-vtiffr-2"
 })(["margin-left:auto;"]);
 var SecondaryText = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(Label).attrs({
   variant: 'sm',
@@ -9248,7 +9426,7 @@ var SecondaryText = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(Lab
   no_wrap: true
 }).withConfig({
   displayName: "SecondaryText",
-  componentId: "sc-1qqkfjv-5"
+  componentId: "sc-vtiffr-3"
 })(["margin-left:auto;"]);
 var Description = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(Label).attrs({
   variant: 'xs',
@@ -9256,47 +9434,140 @@ var Description = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(Label
   no_wrap: true
 }).withConfig({
   displayName: "Description",
-  componentId: "sc-1qqkfjv-6"
-})(["max-width:516px;text-overflow:ellipsis;overflow:hidden;"]);
+  componentId: "sc-vtiffr-4"
+})(["max-width:516px;text-overflow:ellipsis;overflow-x:clip;"]);
+var buildMenuItems = function buildMenuItems(items, itemProps) {
+  return items.map(function (item) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItem, _extends({
+      key: item.key
+    }, item, itemProps));
+  });
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MenuItem);
+
+/***/ }),
+
+/***/ "./src/menu/menu_item_divider.js":
+/*!***************************************!*\
+  !*** ./src/menu/menu_item_divider.js ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shared */ "./src/menu/shared.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+
+
 var MenuItemDivider = function MenuItemDivider() {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemContainer, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_3__.MenuItemContainer, {
     role: "separator"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledHr, null));
 };
 MenuItemDivider.displayName = 'MenuItemDivider';
 var StyledHr = styled_components__WEBPACK_IMPORTED_MODULE_1___default().hr.withConfig({
   displayName: "StyledHr",
-  componentId: "sc-1qqkfjv-7"
-})(["margin:0;border-top:1px solid ", ";border-right:0 none;border-bottom:0 none;border-left:0 none;"], _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_4);
+  componentId: "sc-1urlki3-0"
+})(["margin:0;border-top:1px solid ", ";border-right:0 none;border-bottom:0 none;border-left:0 none;"], _theme__WEBPACK_IMPORTED_MODULE_2__["default"].color.gray_4);
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MenuItemDivider);
+
+/***/ }),
+
+/***/ "./src/menu/menu_item_group.js":
+/*!*************************************!*\
+  !*** ./src/menu/menu_item_group.js ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shared */ "./src/menu/shared.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["text", "children"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+var Label = _typography__WEBPACK_IMPORTED_MODULE_2__["default"].Label;
 var MenuItemGroup = function MenuItemGroup(props) {
   var text = props.text,
-    size = props.size,
     children = props.children,
-    rest = _objectWithoutProperties(props, _excluded4);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemContainer, rest, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemGroupText, {
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_3__.MenuItemContainer, rest, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItemGroupText, {
     variant: "base",
     no_wrap: true,
     color: "gray_11"
-  }, text), children && children.length > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuContainer, {
+  }, text), children && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_3__.MenuContainer, {
     isGroup: true,
     role: "group"
-  }, buildMenuItems(children, {
-    size: size
-  })));
+  }, children));
 };
 MenuItemGroup.displayName = 'MenuItemGroup';
 var MenuItemGroupText = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(Label).withConfig({
   displayName: "MenuItemGroupText",
-  componentId: "sc-1qqkfjv-8"
+  componentId: "sc-q9wnng-0"
 })(["display:flex;align-items:center;justify-content:flex-start;padding:8px 12px 0;width:100%;height:28px;box-sizing:border-box;"]);
-var buildMenuItems = function buildMenuItems(items, itemProps) {
-  return items.map(function (item) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MenuItem, _extends({
-      key: item.key
-    }, item, itemProps));
-  });
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Menu);
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MenuItemGroup);
+
+/***/ }),
+
+/***/ "./src/menu/shared.js":
+/*!****************************!*\
+  !*** ./src/menu/shared.js ***!
+  \****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MenuContainer": () => (/* binding */ MenuContainer),
+/* harmony export */   "MenuItemContainer": () => (/* binding */ MenuItemContainer)
+/* harmony export */ });
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+var MenuContainer = styled_components__WEBPACK_IMPORTED_MODULE_0___default().ul.withConfig({
+  displayName: "MenuContainer",
+  componentId: "sc-laozu6-0"
+})(["margin:0;padding:4px 0;box-sizing:border-box;min-width:168px;max-width:540px;background:white;border-radius:4px;display:flex;flex-direction:column;gap:2px;", ""], function (props) {
+  return props.isGroup ? undefined : (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["box-shadow:", ";"], _theme__WEBPACK_IMPORTED_MODULE_1__["default"].box_shadow.md);
+});
+var MenuItemContainer = styled_components__WEBPACK_IMPORTED_MODULE_0___default().li.withConfig({
+  displayName: "MenuItemContainer",
+  componentId: "sc-laozu6-1"
+})(["list-style:none;width:100%;"]);
 
 /***/ }),