@luminati-io/uikit 1.7.1 → 1.7.3

package/dist/uikit.umd.js

@@ -171,18 +171,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sum_svg__WEBPACK_IMPORTED_MODULE_146__ = __webpack_require__(/*! ./sum.svg */ "./assets/icons/sum.svg");
 /* harmony import */ var _support_svg__WEBPACK_IMPORTED_MODULE_147__ = __webpack_require__(/*! ./support.svg */ "./assets/icons/support.svg");
 /* harmony import */ var _table_svg__WEBPACK_IMPORTED_MODULE_148__ = __webpack_require__(/*! ./table.svg */ "./assets/icons/table.svg");
-/* harmony import */ var _text_svg__WEBPACK_IMPORTED_MODULE_149__ = __webpack_require__(/*! ./text.svg */ "./assets/icons/text.svg");
-/* harmony import */ var _ticket_svg__WEBPACK_IMPORTED_MODULE_150__ = __webpack_require__(/*! ./ticket.svg */ "./assets/icons/ticket.svg");
-/* harmony import */ var _time_svg__WEBPACK_IMPORTED_MODULE_151__ = __webpack_require__(/*! ./time.svg */ "./assets/icons/time.svg");
-/* harmony import */ var _tool_svg__WEBPACK_IMPORTED_MODULE_152__ = __webpack_require__(/*! ./tool.svg */ "./assets/icons/tool.svg");
-/* harmony import */ var _trash_svg__WEBPACK_IMPORTED_MODULE_153__ = __webpack_require__(/*! ./trash.svg */ "./assets/icons/trash.svg");
-/* harmony import */ var _unique_svg__WEBPACK_IMPORTED_MODULE_154__ = __webpack_require__(/*! ./unique.svg */ "./assets/icons/unique.svg");
-/* harmony import */ var _unpin_svg__WEBPACK_IMPORTED_MODULE_155__ = __webpack_require__(/*! ./unpin.svg */ "./assets/icons/unpin.svg");
-/* harmony import */ var _upgrade_svg__WEBPACK_IMPORTED_MODULE_156__ = __webpack_require__(/*! ./upgrade.svg */ "./assets/icons/upgrade.svg");
-/* harmony import */ var _upload_cloud_svg__WEBPACK_IMPORTED_MODULE_157__ = __webpack_require__(/*! ./upload_cloud.svg */ "./assets/icons/upload_cloud.svg");
-/* harmony import */ var _upload_svg__WEBPACK_IMPORTED_MODULE_158__ = __webpack_require__(/*! ./upload.svg */ "./assets/icons/upload.svg");
-/* harmony import */ var _verify_svg__WEBPACK_IMPORTED_MODULE_159__ = __webpack_require__(/*! ./verify.svg */ "./assets/icons/verify.svg");
-/* harmony import */ var _video_svg__WEBPACK_IMPORTED_MODULE_160__ = __webpack_require__(/*! ./video.svg */ "./assets/icons/video.svg");
+/* harmony import */ var _terminal_window_svg__WEBPACK_IMPORTED_MODULE_149__ = __webpack_require__(/*! ./terminal_window.svg */ "./assets/icons/terminal_window.svg");
+/* harmony import */ var _text_svg__WEBPACK_IMPORTED_MODULE_150__ = __webpack_require__(/*! ./text.svg */ "./assets/icons/text.svg");
+/* harmony import */ var _ticket_svg__WEBPACK_IMPORTED_MODULE_151__ = __webpack_require__(/*! ./ticket.svg */ "./assets/icons/ticket.svg");
+/* harmony import */ var _time_svg__WEBPACK_IMPORTED_MODULE_152__ = __webpack_require__(/*! ./time.svg */ "./assets/icons/time.svg");
+/* harmony import */ var _tool_svg__WEBPACK_IMPORTED_MODULE_153__ = __webpack_require__(/*! ./tool.svg */ "./assets/icons/tool.svg");
+/* harmony import */ var _trash_svg__WEBPACK_IMPORTED_MODULE_154__ = __webpack_require__(/*! ./trash.svg */ "./assets/icons/trash.svg");
+/* harmony import */ var _unique_svg__WEBPACK_IMPORTED_MODULE_155__ = __webpack_require__(/*! ./unique.svg */ "./assets/icons/unique.svg");
+/* harmony import */ var _unpin_svg__WEBPACK_IMPORTED_MODULE_156__ = __webpack_require__(/*! ./unpin.svg */ "./assets/icons/unpin.svg");
+/* harmony import */ var _upgrade_svg__WEBPACK_IMPORTED_MODULE_157__ = __webpack_require__(/*! ./upgrade.svg */ "./assets/icons/upgrade.svg");
+/* harmony import */ var _upload_cloud_svg__WEBPACK_IMPORTED_MODULE_158__ = __webpack_require__(/*! ./upload_cloud.svg */ "./assets/icons/upload_cloud.svg");
+/* harmony import */ var _upload_svg__WEBPACK_IMPORTED_MODULE_159__ = __webpack_require__(/*! ./upload.svg */ "./assets/icons/upload.svg");
+/* harmony import */ var _verify_svg__WEBPACK_IMPORTED_MODULE_160__ = __webpack_require__(/*! ./verify.svg */ "./assets/icons/verify.svg");
+/* harmony import */ var _video_svg__WEBPACK_IMPORTED_MODULE_161__ = __webpack_require__(/*! ./video.svg */ "./assets/icons/video.svg");
 // LICENSE_CODE ZON
  /*jslint react:true*/
 
@@ -346,6 +347,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
@@ -498,18 +500,19 @@ __webpack_require__.r(__webpack_exports__);
     Sum: _sum_svg__WEBPACK_IMPORTED_MODULE_146__["default"],
     Support: _support_svg__WEBPACK_IMPORTED_MODULE_147__["default"],
     Table: _table_svg__WEBPACK_IMPORTED_MODULE_148__["default"],
-    Text: _text_svg__WEBPACK_IMPORTED_MODULE_149__["default"],
-    Ticket: _ticket_svg__WEBPACK_IMPORTED_MODULE_150__["default"],
-    Time: _time_svg__WEBPACK_IMPORTED_MODULE_151__["default"],
-    Tool: _tool_svg__WEBPACK_IMPORTED_MODULE_152__["default"],
-    Trash: _trash_svg__WEBPACK_IMPORTED_MODULE_153__["default"],
-    Unique: _unique_svg__WEBPACK_IMPORTED_MODULE_154__["default"],
-    Unpin: _unpin_svg__WEBPACK_IMPORTED_MODULE_155__["default"],
-    Upgrade: _upgrade_svg__WEBPACK_IMPORTED_MODULE_156__["default"],
-    UploadCloud: _upload_cloud_svg__WEBPACK_IMPORTED_MODULE_157__["default"],
-    Upload: _upload_svg__WEBPACK_IMPORTED_MODULE_158__["default"],
-    Verify: _verify_svg__WEBPACK_IMPORTED_MODULE_159__["default"],
-    Video: _video_svg__WEBPACK_IMPORTED_MODULE_160__["default"],
+    TerminalWindow: _terminal_window_svg__WEBPACK_IMPORTED_MODULE_149__["default"],
+    Text: _text_svg__WEBPACK_IMPORTED_MODULE_150__["default"],
+    Ticket: _ticket_svg__WEBPACK_IMPORTED_MODULE_151__["default"],
+    Time: _time_svg__WEBPACK_IMPORTED_MODULE_152__["default"],
+    Tool: _tool_svg__WEBPACK_IMPORTED_MODULE_153__["default"],
+    Trash: _trash_svg__WEBPACK_IMPORTED_MODULE_154__["default"],
+    Unique: _unique_svg__WEBPACK_IMPORTED_MODULE_155__["default"],
+    Unpin: _unpin_svg__WEBPACK_IMPORTED_MODULE_156__["default"],
+    Upgrade: _upgrade_svg__WEBPACK_IMPORTED_MODULE_157__["default"],
+    UploadCloud: _upload_cloud_svg__WEBPACK_IMPORTED_MODULE_158__["default"],
+    Upload: _upload_svg__WEBPACK_IMPORTED_MODULE_159__["default"],
+    Verify: _verify_svg__WEBPACK_IMPORTED_MODULE_160__["default"],
+    Video: _video_svg__WEBPACK_IMPORTED_MODULE_161__["default"],
 });
 
 
@@ -5879,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",
@@ -5902,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"
@@ -6681,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."); }
@@ -6705,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],
@@ -6734,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',
@@ -6760,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';
@@ -6804,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 ***!
@@ -7603,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; }
@@ -7644,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,
@@ -7671,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,
@@ -7711,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',
@@ -7746,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)
   }));
 };
@@ -7764,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)
   }));
 };
@@ -7783,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,
@@ -7799,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 = {
@@ -7813,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,
@@ -7846,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]);
@@ -8866,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';
@@ -8902,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);
 
 /***/ }),
@@ -9081,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"];
+
 
 /***/ }),
 
@@ -9103,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; }
@@ -9126,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
   }));
 });
@@ -9149,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,
@@ -9168,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 = {
@@ -9213,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',
@@ -9245,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',
@@ -9253,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%;"]);
 
 /***/ }),
 
@@ -10628,6 +10902,7 @@ var PaginationControls = function PaginationControls(props) {
   var to = Math.min((pageIndex + 1) * pageSize, total);
   if (!(total > minPageSize)) return null;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, opts.length > 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dropdown, {
+    classNamePrefix: "uikit-table-pagination",
     value: sel,
     options: opts,
     onChange: handleChange
@@ -12204,14 +12479,16 @@ __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_6__ = __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 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 _theme__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./theme */ "./src/theme.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typography */ "./src/typography/index.js");
+/* 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 react_popper__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-popper */ "./node_modules/react-popper/lib/esm/usePopper.js");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ "./src/utils.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./theme */ "./src/theme.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./typography */ "./src/typography/index.js");
 // LICENSE_CODE ZON
 
 
@@ -12230,7 +12507,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
-var Label = _typography__WEBPACK_IMPORTED_MODULE_5__["default"].Label;
+
+var Label = _typography__WEBPACK_IMPORTED_MODULE_6__["default"].Label;
 var Tooltip = function Tooltip(props) {
   var children = props.children,
     tooltip = props.tooltip,
@@ -12257,7 +12535,7 @@ var Tooltip = function Tooltip(props) {
   var hide = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     return setVisible(false);
   }, []);
-  var _usePopper = (0,react_popper__WEBPACK_IMPORTED_MODULE_6__.usePopper)(referenceElement, popperElement, {
+  var _usePopper = (0,react_popper__WEBPACK_IMPORTED_MODULE_7__.usePopper)(referenceElement, popperElement, {
       placement: placement,
       modifiers: [{
         name: 'arrow',
@@ -12274,11 +12552,7 @@ var Tooltip = function Tooltip(props) {
     styles = _usePopper.styles,
     attributes = _usePopper.attributes;
   if (!tooltip) return children;
-  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(StyledTooltipReference, {
-    ref: setReferenceElement,
-    onPointerEnter: show,
-    onPointerLeave: hide
-  }, children), visible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledTooltipBody, _extends({
+  var tooltipNode = /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledTooltipBody, _extends({
     ref: setPopperElement,
     style: styles.popper
   }, attributes.popper), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Label, {
@@ -12287,29 +12561,34 @@ var Tooltip = function Tooltip(props) {
   }, tooltip), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledTooltipArrow, _extends({
     ref: setArrowElement,
     style: styles.arrow
-  }, attributes.arrow))));
+  }, attributes.arrow))), document.body);
+  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(StyledTooltipReference, {
+    ref: setReferenceElement,
+    onPointerEnter: show,
+    onPointerLeave: hide
+  }, children), visible && tooltipNode);
 };
 Tooltip.defaultProps = {
   placement: 'top'
 };
 Tooltip.propTypes = {
-  tooltip: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().node),
-  placement: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_3__.tooltipPlacements)
+  tooltip: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node),
+  placement: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_4__.tooltipPlacements)
 };
 var withTooltip = function withTooltip(Comp, tooltipProps) {
   return function WithTooltip(props) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Tooltip, tooltipProps, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Comp, props));
   };
 };
-var StyledTooltipBody = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+var StyledTooltipBody = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-146jrck-0"
-})(["background-color:", ";padding:", ";width:fit-content;max-width:500px;border-radius:", ";transition:opacity 200ms;z-index:9999;"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["03"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"]);
-var StyledTooltipArrow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+})(["background-color:", ";padding:", ";width:fit-content;max-width:500px;border-radius:", ";transition:opacity 200ms;z-index:9999;"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["03"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["02"]);
+var StyledTooltipArrow = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "StyledTooltipArrow",
   componentId: "sc-146jrck-1"
-})(["&,&::before{position:absolute;width:", ";height:", ";background:inherit;border-radius:", ";}z-index:-1;visibility:hidden;&::before{visibility:visible;content:'';transform:rotate(45deg);}[data-popper-placement^='top'] > &{bottom:-", ";}[data-popper-placement^='right'] > &{left:-", ";}[data-popper-placement^='bottom'] > &{top:-", ";}[data-popper-placement^='left'] > &{right:-", ";}"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["04"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["04"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["01"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].spacing["02"]);
-var StyledTooltipReference = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+})(["&,&::before{position:absolute;width:", ";height:", ";background:inherit;border-radius:", ";}z-index:-1;visibility:hidden;&::before{visibility:visible;content:'';transform:rotate(45deg);}[data-popper-placement^='top'] > &{bottom:-", ";}[data-popper-placement^='right'] > &{left:-", ";}[data-popper-placement^='bottom'] > &{top:-", ";}[data-popper-placement^='left'] > &{right:-", ";}"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["04"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["04"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["01"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["02"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["02"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["02"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["02"]);
+var StyledTooltipReference = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "StyledTooltipReference",
   componentId: "sc-146jrck-2"
 })(["width:fit-content;"]);
@@ -12535,7 +12814,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./header */ "./src/typography/header.js");
 /* harmony import */ var _label__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./label */ "./src/typography/label.js");
 /* harmony import */ var _paragraph__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./paragraph */ "./src/typography/paragraph.js");
-/* harmony import */ var _hyperlink__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hyperlink */ "./src/typography/hyperlink.js");
+/* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./style */ "./src/typography/style.js");
+/* harmony import */ var _hyperlink__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./hyperlink */ "./src/typography/hyperlink.js");
 // LICENSE_CODE ZON
 
 
@@ -12545,12 +12825,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var typography = {
   Typography: _typography__WEBPACK_IMPORTED_MODULE_0__["default"],
   Header: _header__WEBPACK_IMPORTED_MODULE_1__["default"],
   Label: _label__WEBPACK_IMPORTED_MODULE_2__["default"],
   Paragraph: _paragraph__WEBPACK_IMPORTED_MODULE_3__["default"],
-  Hyperlink: _hyperlink__WEBPACK_IMPORTED_MODULE_4__["default"]
+  Hyperlink: _hyperlink__WEBPACK_IMPORTED_MODULE_5__["default"],
+  Style: _style__WEBPACK_IMPORTED_MODULE_4__["default"]
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (typography);
 
@@ -12675,6 +12957,72 @@ Paragraph.propTypes = {
 
 /***/ }),
 
+/***/ "./src/typography/style.js":
+/*!*********************************!*\
+  !*** ./src/typography/style.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 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 _typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./typography */ "./src/typography/typography.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "./src/utils.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); }
+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 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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+var Style = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
+  var children = props.children;
+  var typographyProps = _objectSpread(_objectSpread({}, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getTypographyProps)(props)), {}, {
+    font_size: {
+      italic_sm: 'sm',
+      code: 'sm',
+      italic_xs: 'xs',
+      capitals: 'xs'
+    }[props.variant] || 'md',
+    line_height: {
+      italic_lg: 'snug',
+      italic_sm: 'snug'
+    }[props.variant] || 'none',
+    font_family: {
+      code: 'mono'
+    }[props.variant] || 'sans',
+    italic: ['italic_lg', 'italic_sm', 'italic_xs'].includes(props.variant),
+    uppercase: props.variant == 'capitals'
+  });
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({
+    ref: ref
+  }, typographyProps), children);
+});
+Style.displayName = 'Style';
+Style.defaultProps = {
+  variant: 'italic_lg'
+};
+Style.propTypes = {
+  variant: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['italic_lg', 'italic_sm', 'italic_xs', 'code', 'capitals'])
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Style);
+
+/***/ }),
+
 /***/ "./src/typography/typography.js":
 /*!**************************************!*\
   !*** ./src/typography/typography.js ***!
@@ -12700,17 +13048,22 @@ __webpack_require__.r(__webpack_exports__);
 var Typography = styled_components__WEBPACK_IMPORTED_MODULE_0___default().div.withConfig({
   displayName: "Typography",
   componentId: "sc-11dsq0e-0"
-})(["font-family:", "", ";font-style:", ";font-weight:", ";font-size:", ";line-height:", ";letter-spacing:", ";color:", ";", " ", ""], function (props) {
+})(["font-family:", "", ";font-style:", ";font-weight:", ";font-size:", ";line-height:", ";letter-spacing:", ";color:", ";", " ", " ", " ", ""], function (props) {
   return _theme__WEBPACK_IMPORTED_MODULE_2__["default"].font_family[props.font_family];
 }, function (props) {
   return props.as == 'h1' ? ' !important' : '';
 }, function (props) {
   return props.italic ? 'italic' : 'normal';
 }, (0,_utils__WEBPACK_IMPORTED_MODULE_1__.fromTheme)('font_weight'), (0,_utils__WEBPACK_IMPORTED_MODULE_1__.fromTheme)('font_size'), (0,_utils__WEBPACK_IMPORTED_MODULE_1__.fromTheme)('line_height'), (0,_utils__WEBPACK_IMPORTED_MODULE_1__.fromTheme)('letter_spacing'), (0,_utils__WEBPACK_IMPORTED_MODULE_1__.fromTheme)('color'), function (props) {
+  return props.uppercase ? 'text-transform: uppercase;' : null;
+}, function (props) {
+  return props.uppercase ? 'letter-spacing: 0.02em;' : null;
+}, function (props) {
   return props.no_wrap ? 'white-space: nowrap;' : null;
 }, function (props) {
   return props.underline ? 'text-decoration: underline;' : null;
 });
+Typography.displayName = 'Typography';
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Typography);
 
 /***/ }),
@@ -55316,6 +55669,34 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 /***/ }),
 
+/***/ "./assets/icons/terminal_window.svg":
+/*!******************************************!*\
+  !*** ./assets/icons/terminal_window.svg ***!
+  \******************************************/
+/***/ ((__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 _node_modules_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/svg-baker-runtime/browser-symbol.js */ "./node_modules/svg-baker-runtime/browser-symbol.js");
+/* harmony import */ var _node_modules_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/svg-sprite-loader/runtime/browser-sprite.build.js */ "./node_modules/svg-sprite-loader/runtime/browser-sprite.build.js");
+/* harmony import */ var _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var symbol = new (_node_modules_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0___default())({
+  "id": "terminal_window_uikit_icon",
+  "use": "terminal_window_uikit_icon-usage",
+  "viewBox": "0 0 20 21",
+  "content": "<symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 21\" id=\"terminal_window_uikit_icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"m5.938 7.296 3.385 2.708-3.386 2.709M10.677 12.713h3.385\" /><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17.406 3.234H2.594a.72.72 0 0 0-.719.719v12.103c0 .397.322.72.72.72h14.81a.72.72 0 0 0 .72-.72V3.953a.72.72 0 0 0-.72-.72Z\" /></symbol>"
+});
+var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1___default().add(symbol);
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (symbol);
+
+/***/ }),
+
 /***/ "./assets/icons/text.svg":
 /*!*******************************!*\
   !*** ./assets/icons/text.svg ***!