@luminati-io/uikit 6.3.12 → 6.3.14

package/dist/umd/uikit.development.js

@@ -36300,14 +36300,26 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* 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 _icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./icon */ "./src/icon.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./layout */ "./src/layout/index.js");
+/* harmony import */ var rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./icon */ "./src/icon.js");
 /* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typography */ "./src/typography/index.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils */ "./src/utils.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./util */ "./src/util/index.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils */ "./src/utils.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "classNamePrefix", "variant", "text", "children", "shape", "icon", "iconPlacement", "onIconClick", "style"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
 
 
 
@@ -36317,80 +36329,101 @@ __webpack_require__.r(__webpack_exports__);
 
 var Badge = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
   var className = props.className,
+    _props$classNamePrefi = props.classNamePrefix,
+    classNamePrefix = _props$classNamePrefi === void 0 ? 'uikit_badge' : _props$classNamePrefi,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'generic' : _props$variant,
+    text = props.text,
     children = props.children,
     _props$shape = props.shape,
     shape = _props$shape === void 0 ? 'square' : _props$shape,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'default' : _props$variant,
     icon = props.icon,
     iconPlacement = props.iconPlacement,
-    onClick = props.onClick;
-  var textColor = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return {
-      "default": 'text',
-      negative: 'text_error',
-      positive: 'text_success',
-      gold: 'text_warning',
-      blue: 'text_primary'
-    }[variant] || 'text';
-  }, [variant]);
-  var iconColor = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return {
-      "default": 'icon_accent',
-      negative: 'icon_error',
-      positive: 'icon_success',
-      gold: 'icon_warning',
-      blue: 'icon_primary'
-    }[variant] || 'icon_accent';
-  }, [variant]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(BadgeWrapper, {
-    ref: ref,
-    className: className,
-    $shape: shape,
-    $variant: variant,
-    flex_direction: iconPlacement == 'right' ? 'row-reverse' : 'row'
-  }, icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
+    onIconClick = props.onIconClick,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Wrapper, _extends({
+    ref: ref
+  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest), {
+    $prefixCls: classNamePrefix,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.classNames)(null, null, className, classNamePrefix, "".concat(classNamePrefix, "_").concat(variant), "".concat(classNamePrefix, "_").concat(shape)),
+    style: _objectSpread({
+      flexDirection: iconPlacement == 'right' ? 'row-reverse' : 'row'
+    }, style)
+  }), icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
     name: icon,
     size: "xxs",
-    color: iconColor,
-    onClick: onClick
+    onClick: onIconClick,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.classNames)(classNamePrefix, {
+      '-icon': true
+    })
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "xs",
-    color: textColor
-  }, children));
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.classNames)(classNamePrefix, {
+      '-content': true
+    })
+  }, text || children));
 });
 Badge.displayName = 'Badge';
 Badge.propTypes = {
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   shape: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['rounded', 'square']),
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['default', 'negative', 'positive', 'gold', 'blue']),
-  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_6__.iconNames),
-  iconPlacement: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['left', 'right'])
+  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['generic', 'info', 'success', 'error', 'warning']),
+  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_7__.iconNames),
+  iconPlacement: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['left', 'right']),
+  onIconClick: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)
 };
-var BadgeWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex).attrs({
-  gap: '01',
-  align_items: 'center',
-  padding: '02'
-}).withConfig({
-  displayName: "BadgeWrapper",
+var prefixCls = function prefixCls(p) {
+  return p.$prefixCls;
+};
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
+var Wrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "Wrapper",
   componentId: "sc-1fckq03-0"
-})(["width:fit-content;border-radius:", ";background-color:", ";"], function (_ref) {
-  var $shape = _ref.$shape,
-    spacing = _ref.theme.spacing;
-  return {
-    rounded: '16px',
-    square: spacing['02']
-  }[$shape];
-}, function (_ref2) {
-  var $variant = _ref2.$variant,
-    color = _ref2.theme.color;
-  return {
-    "default": color.bg_fill_secondary,
-    negative: color.bg_fill_error_secondary,
-    positive: color.bg_fill_success_secondary,
-    gold: color.bg_fill_warning_secondary,
-    blue: color.bg_fill_primary_secondary
-  }[$variant] || color.bg_fill_secondary;
-});
+})(["display:flex;width:fit-content;gap:", ";padding:", ";align-self:center;&.", "{&_square{border-radius:", ";}&_rounded{border-radius:", ";}&_info{background-color:", ";.", "{&-icon{color:", ";}&-content{color:", ";}}}&_success{background-color:", ";.", "{&-icon{color:", ";}&-content{color:", ";}}}&_error{background-color:", ";.", "{&-icon{color:", ";}&-content{color:", ";}}}&_warning{background-color:", ";.", "{&-icon{color:", ";}&-content{color:", ";}}}&_generic{background-color:", ";.", "{&-icon{color:", ";}&-content{color:", ";}}}}"], theme(function (t) {
+  return t.spacing['01'];
+}), theme(function (t) {
+  return t.spacing['02'];
+}), prefixCls, theme(function (t) {
+  return t.spacing['02'];
+}), theme(function (t) {
+  return t.spacing['05'];
+}), theme(function (t) {
+  return t.color.bg_fill_primary_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_primary;
+}), theme(function (t) {
+  return t.color.text_primary;
+}), theme(function (t) {
+  return t.color.bg_fill_success_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_success;
+}), theme(function (t) {
+  return t.color.text_success;
+}), theme(function (t) {
+  return t.color.bg_fill_error_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_error;
+}), theme(function (t) {
+  return t.color.text_error;
+}), theme(function (t) {
+  return t.color.bg_fill_warning_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_warning;
+}), theme(function (t) {
+  return t.color.text_warning;
+}), theme(function (t) {
+  return t.color.bg_fill_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_accent;
+}), theme(function (t) {
+  return t.color.text;
+}));
 
 /***/ }),
 
@@ -39948,7 +39981,7 @@ var PT_INPUT_SHARED = {
   onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   onKeyDown: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   disabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   invalid: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   after: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
@@ -39990,32 +40023,31 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Drawer: () => (/* reexport safe */ _drawer__WEBPACK_IMPORTED_MODULE_11__.Drawer),
 /* harmony export */   Icon: () => (/* reexport safe */ _icon__WEBPACK_IMPORTED_MODULE_20__.Icon),
 /* harmony export */   IconButton: () => (/* reexport safe */ _icon_button__WEBPACK_IMPORTED_MODULE_21__.IconButton),
-/* harmony export */   InfoChip: () => (/* reexport safe */ _infochip__WEBPACK_IMPORTED_MODULE_22__.InfoChip),
 /* harmony export */   Input: () => (/* reexport module object */ _input__WEBPACK_IMPORTED_MODULE_1__),
 /* harmony export */   Layout: () => (/* reexport module object */ _layout__WEBPACK_IMPORTED_MODULE_2__),
 /* harmony export */   Link: () => (/* reexport safe */ _link__WEBPACK_IMPORTED_MODULE_13__.Link),
 /* harmony export */   Menu: () => (/* reexport safe */ _menu__WEBPACK_IMPORTED_MODULE_14__.Menu),
 /* harmony export */   Modal: () => (/* reexport module object */ _modal__WEBPACK_IMPORTED_MODULE_3__),
-/* harmony export */   Popover: () => (/* reexport safe */ _popover__WEBPACK_IMPORTED_MODULE_25__.Popover),
+/* harmony export */   Popover: () => (/* reexport safe */ _popover__WEBPACK_IMPORTED_MODULE_24__.Popover),
 /* harmony export */   Progress: () => (/* reexport safe */ _progress__WEBPACK_IMPORTED_MODULE_15__.Progress),
 /* harmony export */   ProgressBar: () => (/* reexport safe */ _progress__WEBPACK_IMPORTED_MODULE_15__.ProgressBar),
 /* harmony export */   RemovableTag: () => (/* reexport safe */ _tag__WEBPACK_IMPORTED_MODULE_18__.RemovableTag),
 /* harmony export */   Snackbar: () => (/* reexport safe */ _snackbar__WEBPACK_IMPORTED_MODULE_16__.Snackbar),
-/* harmony export */   Tab: () => (/* reexport safe */ _tab__WEBPACK_IMPORTED_MODULE_23__.Tab),
+/* harmony export */   Tab: () => (/* reexport safe */ _tab__WEBPACK_IMPORTED_MODULE_22__.Tab),
 /* harmony export */   Table: () => (/* reexport safe */ _table__WEBPACK_IMPORTED_MODULE_17__.Table),
-/* harmony export */   Tabs: () => (/* reexport safe */ _tab__WEBPACK_IMPORTED_MODULE_23__.Tabs),
+/* harmony export */   Tabs: () => (/* reexport safe */ _tab__WEBPACK_IMPORTED_MODULE_22__.Tabs),
 /* harmony export */   TagGroup: () => (/* reexport safe */ _tag__WEBPACK_IMPORTED_MODULE_18__.TagGroup),
-/* harmony export */   ThemeProvider: () => (/* reexport safe */ _themes__WEBPACK_IMPORTED_MODULE_26__.ThemeProvider),
+/* harmony export */   ThemeProvider: () => (/* reexport safe */ _themes__WEBPACK_IMPORTED_MODULE_25__.ThemeProvider),
 /* harmony export */   Toast: () => (/* reexport safe */ _toast__WEBPACK_IMPORTED_MODULE_19__.Toast),
 /* harmony export */   Toaster: () => (/* reexport safe */ _toast__WEBPACK_IMPORTED_MODULE_19__.Toaster),
-/* harmony export */   Tooltip: () => (/* reexport safe */ _tooltip__WEBPACK_IMPORTED_MODULE_24__.Tooltip),
-/* harmony export */   Tooltip2: () => (/* reexport safe */ _tooltip__WEBPACK_IMPORTED_MODULE_24__.Tooltip2),
+/* harmony export */   Tooltip: () => (/* reexport safe */ _tooltip__WEBPACK_IMPORTED_MODULE_23__.Tooltip),
+/* harmony export */   Tooltip2: () => (/* reexport safe */ _tooltip__WEBPACK_IMPORTED_MODULE_23__.Tooltip2),
 /* harmony export */   Typography: () => (/* reexport module object */ _typography__WEBPACK_IMPORTED_MODULE_5__),
-/* harmony export */   globalConfig: () => (/* reexport safe */ _global_config__WEBPACK_IMPORTED_MODULE_27__.globalConfig),
-/* harmony export */   setGlobalConfig: () => (/* reexport safe */ _global_config__WEBPACK_IMPORTED_MODULE_27__.setGlobalConfig),
-/* harmony export */   theme: () => (/* reexport safe */ _themes__WEBPACK_IMPORTED_MODULE_26__.lightTheme),
+/* harmony export */   globalConfig: () => (/* reexport safe */ _global_config__WEBPACK_IMPORTED_MODULE_26__.globalConfig),
+/* harmony export */   setGlobalConfig: () => (/* reexport safe */ _global_config__WEBPACK_IMPORTED_MODULE_26__.setGlobalConfig),
+/* harmony export */   theme: () => (/* reexport safe */ _themes__WEBPACK_IMPORTED_MODULE_25__.lightTheme),
 /* harmony export */   translation: () => (/* reexport safe */ _translation__WEBPACK_IMPORTED_MODULE_4__["default"]),
-/* harmony export */   useTheme: () => (/* reexport safe */ _themes__WEBPACK_IMPORTED_MODULE_26__.useTheme),
+/* harmony export */   useTheme: () => (/* reexport safe */ _themes__WEBPACK_IMPORTED_MODULE_25__.useTheme),
 /* harmony export */   useToaster: () => (/* reexport safe */ _toast__WEBPACK_IMPORTED_MODULE_19__.useToaster),
 /* harmony export */   withPopover: () => (/* reexport safe */ _hoc__WEBPACK_IMPORTED_MODULE_12__.withPopover)
 /* harmony export */ });
@@ -40041,12 +40073,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _toast__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./toast */ "./src/toast/index.js");
 /* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./icon */ "./src/icon.js");
 /* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./icon_button */ "./src/icon_button.js");
-/* harmony import */ var _infochip__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./infochip */ "./src/infochip.js");
-/* harmony import */ var _tab__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./tab */ "./src/tab/index.js");
-/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./tooltip */ "./src/tooltip/index.js");
-/* harmony import */ var _popover__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./popover */ "./src/popover/index.js");
-/* harmony import */ var _themes__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./themes */ "./src/themes/index.js");
-/* harmony import */ var _global_config__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./global_config */ "./src/global_config.js");
+/* harmony import */ var _tab__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./tab */ "./src/tab/index.js");
+/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./tooltip */ "./src/tooltip/index.js");
+/* harmony import */ var _popover__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./popover */ "./src/popover/index.js");
+/* harmony import */ var _themes__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./themes */ "./src/themes/index.js");
+/* harmony import */ var _global_config__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./global_config */ "./src/global_config.js");
 // LICENSE_CODE ZON
 
 
@@ -40078,7 +40109,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 
 
 /***/ }),
@@ -40098,13 +40128,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__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 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 rc_drawer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rc-drawer */ "./node_modules/rc-drawer/es/index.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
-/* harmony import */ var _modal_modal2__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../modal/modal2 */ "./src/modal/modal2.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
+/* harmony import */ var _modal_modal2__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../modal/modal2 */ "./src/modal/modal2.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styled */ "./src/drawer/styled.js");
 // LICENSE_CODE ZON
 
 
@@ -40116,7 +40144,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 var Drawer = function Drawer(_ref) {
   var className = _ref.className,
     _ref$classNamePrefix = _ref.classNamePrefix,
@@ -40146,8 +40173,10 @@ var Drawer = function Drawer(_ref) {
     _ref$mask = _ref.mask,
     mask = _ref$mask === void 0 ? false : _ref$mask,
     styles = _ref.styles,
-    classNames = _ref.classNames;
-  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.useTheme)();
+    classNames = _ref.classNames,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_2__.Z_INDEX.drawer : _ref$zIndex,
+    destroyOnClose = _ref.destroyOnClose;
   var renderCancel = !footer && !!(onCancel && cancelLabel);
   var renderOk = !footer && !!(onOk && okLabel);
   var renderFooter = !!footer || renderOk || renderCancel;
@@ -40168,41 +40197,39 @@ var Drawer = function Drawer(_ref) {
       motionDeadline: 500
     };
   };
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(DrawerStyle, {
-    $prefixCls: classNamePrefix,
-    $theme: theme
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(rc_drawer__WEBPACK_IMPORTED_MODULE_3__["default"], {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_6__.StyledDrawer, {
     width: width,
     height: height,
     open: open,
     onClose: onClose,
     placement: placement,
     duration: duration,
-    className: className,
+    contentClassName: className,
     prefixCls: classNamePrefix,
-    zIndex: _constants__WEBPACK_IMPORTED_MODULE_4__.Z_INDEX.drawer,
+    zIndex: zIndex,
     maskClosable: closable,
     classNames: classNames,
     afterOpenChange: afterOpenChange,
     mask: mask,
     styles: styles,
     maskMotion: maskMotion,
-    motion: motion
-  }, closable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_6__.IconButton, {
+    motion: motion,
+    destroyOnClose: destroyOnClose
+  }, closable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
     className: "".concat(classNamePrefix, "-close"),
     size: "xs",
     icon: "Close",
     onClick: onClose
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
     className: "".concat(classNamePrefix, "-header")
-  }, !!title && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Header, {
+  }, !!title && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Header, {
     className: "".concat(classNamePrefix, "-title"),
     color: "text"
   }, title)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
     className: "".concat(classNamePrefix, "-body")
   }, children), renderFooter && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
     className: "".concat(classNamePrefix, "-footer")
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_modal2__WEBPACK_IMPORTED_MODULE_7__.DialogFooter, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_modal2__WEBPACK_IMPORTED_MODULE_5__.DialogFooter, {
     onOk: onOk,
     onCancel: onCancel,
     okLabel: okLabel,
@@ -40211,7 +40238,7 @@ var Drawer = function Drawer(_ref) {
     cancelProps: cancelProps,
     variant: footerVariant,
     footer: footer
-  }))));
+  })));
 };
 Drawer.propTypes = {
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
@@ -40243,17 +40270,85 @@ Drawer.propTypes = {
     mask: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
     wrapper: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
     content: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)
-  })
+  }),
+  zIndex: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
+  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+};
+
+/***/ }),
+
+/***/ "./src/drawer/index.js":
+/*!*****************************!*\
+  !*** ./src/drawer/index.js ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Drawer: () => (/* reexport safe */ _drawer__WEBPACK_IMPORTED_MODULE_0__.Drawer)
+/* harmony export */ });
+/* harmony import */ var _drawer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./drawer */ "./src/drawer/drawer.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+/***/ }),
+
+/***/ "./src/drawer/styled.js":
+/*!******************************!*\
+  !*** ./src/drawer/styled.js ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StyledDrawer: () => (/* binding */ StyledDrawer)
+/* 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 rc_drawer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rc-drawer */ "./node_modules/rc-drawer/es/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["className", "contentClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+var DrawerAdaptor = function DrawerAdaptor(_ref) {
+  var className = _ref.className,
+    contentClassName = _ref.contentClassName,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(rc_drawer__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({
+    className: contentClassName,
+    rootClassName: className
+  }, rest));
 };
 var prefixCls = function prefixCls(p) {
-  return p.$prefixCls;
+  return p.prefixCls;
 };
 var theme = function theme(cb) {
   return function (p) {
-    return cb(p.$theme);
+    return cb(p.theme);
   };
 };
-var DrawerStyle = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.createGlobalStyle)([".", "{inset:0;position:fixed;pointer-events:none;&-inline{position:absolute;}&-mask{inset:0;position:absolute;background-color:", ";background-color:", ";filter:alpha(opacity=70);pointer-events:auto;}&-content-wrapper{position:absolute;overflow:hidden;box-shadow:", ";&-hidden{display:none;}}&-left &-content-wrapper{top:0;bottom:0;left:0;}&-right &-content-wrapper{top:0;right:0;bottom:0;}&-content{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:", ";pointer-events:auto;}&-left &-content{border-right:1px solid ", ";}&-right &-content{border-left:1px solid ", ";}&-close{position:absolute;margin-top:16px;inset-inline-end:16px;z-index:1;background:transparent;}&-header{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";}&-body{flex:1;overflow:auto;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";color:", ";", "}&-footer{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";border-top:1px solid ", ";}&-mask-motion{&-enter,&-appear,&-leave{&-start{transition:none;}&-active{transition:all 0.3s;}}&-enter,&-appear{opacity:0;&-active{opacity:1;}}&-leave{opacity:1;&-active{opacity:0;}}}&-panel-motion{&-left,&-right{&-enter,&-appear,&-leave{&-start{transition:none;}&-active{transition:all 0.3s;}}&-enter,&-appear{opacity:0.7;&-active{opacity:1;}}&-leave{opacity:1;&-active{opacity:0.7;}}}&-left{&-enter,&-appear{transform:translateX(-100%);&-active{transform:none;}}&-leave{transform:none;&-active{transform:translateX(-100%);}}}&-right{&-enter,&-appear{transform:translateX(100%);&-active{transform:none;}}&-leave{transform:none;&-active{transform:translateX(100%);}}}}}"], prefixCls, theme(function (t) {
+var StyledDrawer = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(DrawerAdaptor).withConfig({
+  displayName: "StyledDrawer",
+  componentId: "sc-12ycvcn-0"
+})(["&.", "{inset:0;position:fixed;pointer-events:none;&-inline{position:absolute;}&-left .", "-content-wrapper{top:0;bottom:0;left:0;}&-right .", "-content-wrapper{top:0;right:0;bottom:0;}&-left .", "-content{border-right:1px solid ", ";}&-right .", "-content{border-left:1px solid ", ";}}.", "{&-mask{inset:0;position:absolute;background-color:", ";background-color:", ";filter:alpha(opacity=70);pointer-events:auto;}&-content-wrapper{position:absolute;overflow:hidden;box-shadow:", ";&-hidden{display:none;}}&-content{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:", ";pointer-events:auto;}&-close{position:absolute;margin-top:16px;inset-inline-end:16px;z-index:1;background:transparent;}&-header{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";}&-body{flex:1;overflow:auto;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";color:", ";", "}&-footer{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";border-top:1px solid ", ";}&-mask-motion{&-enter,&-appear,&-leave{&-start{transition:none;}&-active{transition:all 0.3s;}}&-enter,&-appear{opacity:0;&-active{opacity:1;}}&-leave{opacity:1;&-active{opacity:0;}}}&-panel-motion{&-left,&-right{&-enter,&-appear,&-leave{&-start{transition:none;}&-active{transition:all 0.3s;}}&-enter,&-appear{opacity:0.7;&-active{opacity:1;}}&-leave{opacity:1;&-active{opacity:0.7;}}}&-left{&-enter,&-appear{transform:translateX(-100%);&-active{transform:none;}}&-leave{transform:none;&-active{transform:translateX(-100%);}}}&-right{&-enter,&-appear{transform:translateX(100%);&-active{transform:none;}}&-leave{transform:none;&-active{transform:translateX(100%);}}}}}"], prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.border_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.border_secondary;
+}), prefixCls, theme(function (t) {
   return t.color.modal_shadow_bg;
 }), theme(function (t) {
   return t.color.modal2_shadow_bg;
@@ -40261,10 +40356,6 @@ var DrawerStyle = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.createGlobal
   return t.shadow.medium;
 }), theme(function (t) {
   return t.color.bg_elevated;
-}), theme(function (t) {
-  return t.color.border_secondary;
-}), theme(function (t) {
-  return t.color.border_secondary;
 }), theme(function (t) {
   return t.spacing['05'];
 }), theme(function (t) {
@@ -40297,26 +40388,6 @@ var DrawerStyle = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.createGlobal
   return t.color.border_secondary;
 }));
 
-/***/ }),
-
-/***/ "./src/drawer/index.js":
-/*!*****************************!*\
-  !*** ./src/drawer/index.js ***!
-  \*****************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Drawer: () => (/* reexport safe */ _drawer__WEBPACK_IMPORTED_MODULE_0__.Drawer)
-/* harmony export */ });
-/* harmony import */ var _drawer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./drawer */ "./src/drawer/drawer.js");
-// LICENSE_CODE ZON
-
-
-/*jslint react:true*/
-
-
 /***/ }),
 
 /***/ "./src/global_config.js":
@@ -41350,103 +41421,6 @@ var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_1___default().svg.wit
 
 /***/ }),
 
-/***/ "./src/infochip.js":
-/*!*************************!*\
-  !*** ./src/infochip.js ***!
-  \*************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   InfoChip: () => (/* binding */ InfoChip)
-/* harmony export */ });
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__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 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 rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
-/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./icon */ "./src/icon.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./layout */ "./src/layout/index.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./typography */ "./src/typography/index.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils */ "./src/utils.js");
-// LICENSE_CODE ZON
-
-
-/*jslint react:true*/
-var _excluded = ["variant", "text", "icon"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-
-
-
-
-
-
-
-
-var InfoChip = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
-  var _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'default' : _props$variant,
-    text = props.text,
-    icon = props.icon,
-    rest = _objectWithoutProperties(props, _excluded);
-  var iconColor = {
-    success: 'text_success',
-    alert: 'text_error',
-    warning: 'text_warning',
-    info: 'text_primary'
-  }[variant] || 'text';
-  var textColor = {
-    success: 'icon_success',
-    alert: 'icon_error',
-    warning: 'icon_warning',
-    info: 'icon_primary'
-  }[variant] || 'icon_accent';
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(InfoChipWrapper, _extends({
-    ref: ref,
-    $variant: variant
-  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest)), icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
-    size: "xxs",
-    color: iconColor,
-    name: icon
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_6__.Label, {
-    variant: "xs",
-    color: textColor
-  }, text));
-});
-InfoChip.displayName = 'InfoChip';
-InfoChip.propTypes = {
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['default', 'success', 'alert', 'warning', 'info']),
-  text: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
-  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_7__.iconNames)
-};
-var InfoChipWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).attrs({
-  align_items: 'center',
-  gap: '02',
-  padding_top: '0',
-  padding_right: '04',
-  padding_bottom: '0',
-  padding_left: '04'
-}).withConfig({
-  displayName: "InfoChipWrapper",
-  componentId: "sc-qtbg7s-0"
-})(["background-color:", ";border-radius:24px;width:fit-content;min-height:24px;height:24px;"], function (_ref) {
-  var color = _ref.theme.color,
-    $variant = _ref.$variant;
-  return color[{
-    success: 'bg_fill_success_secondary',
-    alert: 'bg_fill_error_secondary',
-    warning: 'bg_fill_warning_secondary',
-    info: 'bg_fill_primary_secondary'
-  }[$variant] || 'bg_fill_secondary'];
-});
-
-/***/ }),
-
 /***/ "./src/input/checkbox.js":
 /*!*******************************!*\
   !*** ./src/input/checkbox.js ***!
@@ -41698,8 +41672,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 
 var _excluded = ["id", "styles", "size", "async", "creatable", "isOptionDisabled", "className", "label", "labelIcon", "labelTooltip", "required", "necessityIndicator", "invalid", "helperText", "placeholder", "disabled"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -41718,26 +41698,26 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-var CheckboxList = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwardRef(function (_ref, forwardRef) {
-  var id = _ref.id,
-    styles = _ref.styles,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'sm' : _ref$size,
-    async = _ref.async,
-    creatable = _ref.creatable,
-    isOptionDisabled = _ref.isOptionDisabled,
-    className = _ref.className,
-    label = _ref.label,
-    labelIcon = _ref.labelIcon,
-    labelTooltip = _ref.labelTooltip,
-    required = _ref.required,
-    necessityIndicator = _ref.necessityIndicator,
-    invalid = _ref.invalid,
-    helperText = _ref.helperText,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Search...' : _ref$placeholder,
-    disabled = _ref.disabled,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var CheckboxList = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwardRef(function (props, ref) {
+  var id = props.id,
+    styles = props.styles,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
+    async = props.async,
+    creatable = props.creatable,
+    isOptionDisabled = props.isOptionDisabled,
+    className = props.className,
+    label = props.label,
+    labelIcon = props.labelIcon,
+    labelTooltip = props.labelTooltip,
+    required = props.required,
+    necessityIndicator = props.necessityIndicator,
+    invalid = props.invalid,
+    helperText = props.helperText,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? 'Search...' : _props$placeholder,
+    disabled = props.disabled,
+    rest = _objectWithoutProperties(props, _excluded);
   var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_8__.useLabelId)(id);
   var t = (0,_translation__WEBPACK_IMPORTED_MODULE_10__.useTranslate)();
   var SelectComp = getComponent({
@@ -41759,7 +41739,7 @@ var CheckboxList = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().for
   });
   var selectProps = lodash_omit__WEBPACK_IMPORTED_MODULE_0___default()(rest, Object.keys(wrapperProps));
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_9__.Flex, _extends({
-    ref: forwardRef,
+    ref: ref,
     "data-testid": "checkbox-list",
     className: className,
     flex_direction: "column",
@@ -41792,23 +41772,14 @@ var CheckboxList = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().for
   }, helperText));
 });
 CheckboxList.displayName = 'CheckboxList';
-CheckboxList.propTypes = {
-  value: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
-  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().node),
-  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  required: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  necessityIndicator: _constants__WEBPACK_IMPORTED_MODULE_7__.PT_NECESSITY_INDICATOR,
-  invalid: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  labelTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  helperText: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+CheckboxList.propTypes = _objectSpread(_objectSpread({}, _constants__WEBPACK_IMPORTED_MODULE_7__.PT_INPUT_SHARED), {}, {
   size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['sm', 'md', 'lg']),
-  virtualized: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
-};
+  virtualized: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  /** Minimum height of the menu before flipping */
+  minMenuHeight: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+  /** Maximum height of the menu before scrolling */
+  maxMenuHeight: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
+});
 var getComponent = function getComponent(opt) {
   if (opt.async) return opt.creatable ? react_select_async_creatable__WEBPACK_IMPORTED_MODULE_5__["default"] : react_select_async__WEBPACK_IMPORTED_MODULE_4__["default"];
   return opt.creatable ? react_select_creatable__WEBPACK_IMPORTED_MODULE_3__["default"] : react_select__WEBPACK_IMPORTED_MODULE_15__["default"];
@@ -42158,28 +42129,26 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-var CompareTo = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwardRef(function (_ref, ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$format = _ref.format,
-    fmt = _ref$format === void 0 ? 'dd/MM/yyyy' : _ref$format,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Compare to' : _ref$placeholder,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? [] : _ref$options,
-    formatOptionLabel = _ref.formatOptionLabel,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var CompareTo = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwardRef(function (props, ref) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 'md' : _props$size,
+    _props$format = props.format,
+    fmt = _props$format === void 0 ? 'dd/MM/yyyy' : _props$format,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? 'Compare to' : _props$placeholder,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    formatOptionLabel = props.formatOptionLabel,
+    rest = _objectWithoutProperties(props, _excluded);
   var _formatOptionLabel = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (opt) {
-    if (opt && lodash_isObject__WEBPACK_IMPORTED_MODULE_0___default()(opt)) {
-      var str;
-      try {
-        str = opt.value != 'custom' ? opt.label : (0,date_fns_format__WEBPACK_IMPORTED_MODULE_11__["default"])(opt.from, fmt);
-      } catch (e) {
-        str = '-';
-      }
-      return "".concat(placeholder, " ").concat(str);
+    if (!opt || !lodash_isObject__WEBPACK_IMPORTED_MODULE_0___default()(opt)) return '';
+    var str;
+    try {
+      str = opt.value != 'custom' ? opt.label : (0,date_fns_format__WEBPACK_IMPORTED_MODULE_11__["default"])(opt.from, fmt);
+    } catch (e) {
+      str = '-';
     }
-    return '';
+    return "".concat(placeholder, " ").concat(str);
   }, [fmt, placeholder]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_dropdown__WEBPACK_IMPORTED_MODULE_9__.Dropdown, _extends({
     ref: ref
@@ -42197,9 +42166,7 @@ var CompareTo = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwar
     styles: {
       menu: function menu(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          padding: '8px',
-          margin: '0',
-          minWidth: '0',
+          minWidth: 0,
           width: null
         });
       }
@@ -42252,6 +42219,14 @@ var CompareToCalendar = function CompareToCalendar(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     customDate = _useState4[0],
     setCustomDate = _useState4[1];
+  var onButtonClick = function onButtonClick() {
+    var opt = {
+      value: 'custom',
+      label: 'Custom',
+      from: customDate
+    };
+    onApply(opt, 'select-option');
+  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, {
     flex_direction: "column",
     padding: "04",
@@ -42275,13 +42250,7 @@ var CompareToCalendar = function CompareToCalendar(props) {
     variant: "primary",
     text: "Apply",
     disabled: !customDate,
-    onClick: function onClick() {
-      onApply({
-        value: 'custom',
-        label: 'Custom',
-        from: customDate
-      }, 'select-option');
-    },
+    onClick: onButtonClick,
     style: {
       width: '100%'
     }
@@ -43548,11 +43517,10 @@ var MenuList = function MenuList(props) {
     children = props.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_menu_shared__WEBPACK_IMPORTED_MODULE_1__.MenuContainer, _extends({
     ref: innerRef,
-    $noBorder: true,
     role: "menu",
     className: cx({
       menuList: true
-    }, className),
+    }, className, 'unstyled'),
     style: getStyles('menuList', props)
   }, innerProps), react__WEBPACK_IMPORTED_MODULE_0___default().Children.map(children, function (child, ind) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(child, {
@@ -43754,9 +43722,10 @@ var useStyles = function useStyles(_ref) {
           minWidth: 'fit-content',
           maxWidth: '540px',
           width: '100%',
-          backgroundColor: color.bg_elevated,
+          border: "1px solid ".concat(color.popover_border),
+          backgroundColor: color.bg,
           borderRadius: spacing['02'],
-          boxShadow: shadow.medium,
+          boxShadow: color.popover_shadow,
           zIndex: menuPortalTarget ? baseStyles.zIndex : _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.dropdown
         });
       },
@@ -47694,29 +47663,34 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__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 _shared__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shared */ "./src/menu/shared.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util */ "./src/util/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 = ["items", "size", "noBorder"];
+var _excluded = ["className", "items", "size", "noBorder", "unstyled"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 
 
 
-var Menu = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (_ref, ref) {
-  var items = _ref.items,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    noBorder = _ref.noBorder,
-    rest = _objectWithoutProperties(_ref, _excluded);
+
+var Menu = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? 'uikit_menu' : _props$className,
+    items = props.items,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'md' : _props$size,
+    noBorder = props.noBorder,
+    unstyled = props.unstyled,
+    rest = _objectWithoutProperties(props, _excluded);
   if (!items || !items.length) return null;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_2__.MenuContainer, _extends({
-    ref: ref
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_3__.MenuContainer, _extends({
+    ref: ref,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_2__.classNames)(null, null, className, (noBorder || unstyled) && 'unstyled')
   }, rest, {
-    $noBorder: noBorder,
     role: "menu",
     "data-testid": "menu"
   }), items.map(function (item, ind) {
@@ -47730,9 +47704,10 @@ var Menu = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(
 });
 Menu.displayName = 'Menu';
 Menu.propTypes = {
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg']),
   items: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().any)).isRequired,
-  noBorder: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  unstyled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
 
 /***/ }),
@@ -48071,7 +48046,7 @@ var MenuItemGroup = function MenuItemGroup(_ref) {
     color: "text_quaternary",
     role: "presentation"
   }, text), children && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_4__.MenuContainer, {
-    $noBorder: true,
+    className: "unstyled",
     role: "group"
   }, children)));
 };
@@ -48095,12 +48070,10 @@ __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 _rc_component_trigger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @rc-component/trigger */ "./node_modules/@rc-component/trigger/es/index.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
-/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./shared */ "./src/menu/shared.js");
-/* harmony import */ var _placements__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./placements */ "./src/menu/placements.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shared */ "./src/menu/shared.js");
+/* harmony import */ var _placements__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./placements */ "./src/menu/placements.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styled */ "./src/menu/styled.js");
 // LICENSE_CODE ZON
 
 
@@ -48116,7 +48089,6 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
-
 var prefixCls = 'uikit_menu_popup';
 var MenuItemPopup = function MenuItemPopup(_ref) {
   var subItems = _ref.subItems,
@@ -48138,9 +48110,7 @@ var MenuItemPopup = function MenuItemPopup(_ref) {
     motionLeave: true,
     motionDeadline: 500
   };
-  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(MenuItemPopupStyle, {
-    $prefixCls: prefixCls
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_rc_component_trigger__WEBPACK_IMPORTED_MODULE_2__["default"], {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_4__.StyledMenuItemPopup, {
     prefixCls: prefixCls,
     mask: true,
     action: popupTrigger,
@@ -48150,18 +48120,15 @@ var MenuItemPopup = function MenuItemPopup(_ref) {
     popupStyle: popupStyle,
     popupVisible: visible,
     onPopupVisibleChange: setVisible,
-    builtinPlacements: _placements__WEBPACK_IMPORTED_MODULE_5__.placements,
-    zIndex: _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.popover,
-    popup: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_4__.MenuContainer, {
+    builtinPlacements: _placements__WEBPACK_IMPORTED_MODULE_3__.placements,
+    zIndex: _constants__WEBPACK_IMPORTED_MODULE_1__.Z_INDEX.popover,
+    popup: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_2__.MenuContainer, {
       onClick: function onClick() {
         return setVisible(false);
       }
     }, subItems)
-  }, children));
+  }, children);
 };
-var MenuItemPopupStyle = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.createGlobalStyle)([".", "{position:absolute;display:block;visibility:visible;width:fit-content;max-width:min(500px,80vw);background-color:transparent;&-hidden{display:none;}&-mask{position:fixed;inset:0;pointer-events:none;&-hidden{display:none;}}&-motion{&-enter,&-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.6,0.04,0.98,0.34);animation-play-state:paused;}&-enter&-enter-active,&-appear&-appear-active{animation-name:rcMenuPopupZoomIn;animation-play-state:running;}&-leave&-leave-active{animation-name:rcMenuPopupZoomOut;animation-play-state:running;}}@keyframes rcMenuPopupZoomIn{0%{opacity:0;transform:scale(0,0);}100%{opacity:1;transform:scale(1,1);}}@keyframes rcMenuPopupZoomOut{0%{transform:scale(1,1);}100%{opacity:0;transform:scale(0,0);}}}"], function (p) {
-  return p.$prefixCls;
-});
 
 /***/ }),
 
@@ -48288,20 +48255,18 @@ __webpack_require__.r(__webpack_exports__);
 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:", ";border:", ";border-radius:4px;display:flex;flex-direction:column;gap:2px;box-shadow:", ";max-height:80vh;overflow-y:auto;", ";"], function (_ref) {
-  var color = _ref.theme.color;
-  return color.bg_elevated;
+})(["margin:0;padding:4px 0;box-sizing:border-box;min-width:168px;max-width:540px;border-radius:4px;display:flex;flex-direction:column;gap:2px;max-height:80vh;overflow-y:auto;", ";&:not(.unstyled){background:", ";border:", ";box-shadow:", ";}"], function (_ref) {
+  var scrollbars = _ref.theme.scrollbars;
+  return scrollbars.thin;
 }, function (_ref2) {
-  var $noBorder = _ref2.$noBorder,
-    color = _ref2.theme.color;
-  return $noBorder ? '0 none' : "1px solid ".concat(color.border_secondary);
+  var color = _ref2.theme.color;
+  return color.bg;
 }, function (_ref3) {
-  var $noBorder = _ref3.$noBorder,
-    shadow = _ref3.theme.shadow;
-  return $noBorder ? 'none' : shadow.medium;
+  var color = _ref3.theme.color;
+  return "1px solid ".concat(color.popover_border);
 }, function (_ref4) {
-  var scrollbars = _ref4.theme.scrollbars;
-  return scrollbars.thin;
+  var color = _ref4.theme.color;
+  return color.popover_shadow;
 });
 var MenuItemContainer = styled_components__WEBPACK_IMPORTED_MODULE_0___default().li.withConfig({
   displayName: "MenuItemContainer",
@@ -48310,6 +48275,63 @@ var MenuItemContainer = styled_components__WEBPACK_IMPORTED_MODULE_0___default()
 
 /***/ }),
 
+/***/ "./src/menu/styled.js":
+/*!****************************!*\
+  !*** ./src/menu/styled.js ***!
+  \****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StyledMenuItemPopup: () => (/* binding */ StyledMenuItemPopup)
+/* 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 _rc_component_trigger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @rc-component/trigger */ "./node_modules/@rc-component/trigger/es/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["className", "popupClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+var PopoverAdaptor = function PopoverAdaptor(_ref) {
+  var className = _ref.className,
+    popupClassName = _ref.popupClassName,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // Motion
+  var maskMotion = {
+    motionName: "".concat(className, " .").concat(rest.prefixCls, "-mask"),
+    motionAppear: false,
+    motionEnter: true,
+    motionLeave: false
+  };
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_rc_component_trigger__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({
+    popupClassName: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(null, null, className, popupClassName),
+    maskMotion: maskMotion
+  }, rest));
+};
+var rcZoomIn = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:0;transform:scale(0,0);}100%{opacity:1;transform:scale(1,1);}"]);
+var rcZoomOut = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:1;transform:scale(1,1);}100%{opacity:0;transform:scale(0,0);}"]);
+var prefixCls = function prefixCls(p) {
+  return p.prefixCls;
+};
+var StyledMenuItemPopup = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(PopoverAdaptor).withConfig({
+  displayName: "StyledMenuItemPopup",
+  componentId: "sc-18082hw-0"
+})(["&.", "{position:absolute;display:block;visibility:visible;width:fit-content;max-width:min(500px,80vw);background-color:transparent;&-hidden{display:none;}&-mask{position:fixed;inset:0;pointer-events:none;&-hidden{display:none;}}&-motion{&-enter,&-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.6,0.04,0.98,0.34);animation-play-state:paused;}&-enter-active,&-appear-active{animation-name:", ";animation-play-state:running;}&-leave-active{animation-name:", ";animation-play-state:running;}}}"], prefixCls, rcZoomIn, rcZoomOut);
+
+/***/ }),
+
 /***/ "./src/modal/base.js":
 /*!***************************!*\
   !*** ./src/modal/base.js ***!
@@ -48887,15 +48909,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* 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 rc_dialog__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rc-dialog */ "./node_modules/rc-dialog/es/index.js");
-/* harmony import */ var rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _icon_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../icon.js */ "./src/icon.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./base.js */ "./src/modal/base.js");
-/* harmony import */ var _modal_button_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./modal_button.js */ "./src/modal/modal_button.js");
+/* harmony import */ var rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _icon_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../icon.js */ "./src/icon.js");
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./base.js */ "./src/modal/base.js");
+/* harmony import */ var _modal_button_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./modal_button.js */ "./src/modal/modal_button.js");
+/* harmony import */ var _styled_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./styled.js */ "./src/modal/styled.js");
 // LICENSE_CODE ZON
 
 
@@ -48940,7 +48962,7 @@ var Modal2 = function Modal2(_ref) {
     cancelProps = _ref.cancelProps,
     icon = _ref.icon,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_8__.Z_INDEX.modal : _ref$zIndex,
+    zIndex = _ref$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_7__.Z_INDEX.modal : _ref$zIndex,
     children = _ref.children,
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? 300 : _ref$minHeight,
@@ -48948,9 +48970,8 @@ var Modal2 = function Modal2(_ref) {
     _ref$destroyOnClose = _ref.destroyOnClose,
     destroyOnClose = _ref$destroyOnClose === void 0 ? true : _ref$destroyOnClose,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.useTheme)();
-  var width = _base_js__WEBPACK_IMPORTED_MODULE_10__.MODAL_WIDTHS[size] || _base_js__WEBPACK_IMPORTED_MODULE_10__.MODAL_WIDTHS.md;
-  var _useWindowSize = (0,_hooks__WEBPACK_IMPORTED_MODULE_9__.useWindowSize)(),
+  var width = _base_js__WEBPACK_IMPORTED_MODULE_9__.MODAL_WIDTHS[size] || _base_js__WEBPACK_IMPORTED_MODULE_9__.MODAL_WIDTHS.md;
+  var _useWindowSize = (0,_hooks__WEBPACK_IMPORTED_MODULE_8__.useWindowSize)(),
     windowHeight = _useWindowSize.height;
   var maxHeight = "".concat(Math.max(windowHeight * 0.8, minHeight), "px");
   var dialogFooter = footer !== null ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(DialogFooter, {
@@ -48963,14 +48984,11 @@ var Modal2 = function Modal2(_ref) {
     variant: footerVariant,
     footer: footer
   }) : null;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Modal2Style, {
-    $prefixCls: classNamePrefix,
-    $theme: theme
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(rc_dialog__WEBPACK_IMPORTED_MODULE_3__["default"], _extends({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled_js__WEBPACK_IMPORTED_MODULE_11__.StyledModal, _extends({
     "data-testid": "modal_general",
     visible: show,
     onClose: onClose,
-    className: className,
+    modalClassName: className,
     prefixCls: classNamePrefix,
     closable: closable,
     closeIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CloseIcon, null),
@@ -48995,7 +49013,7 @@ var Modal2 = function Modal2(_ref) {
     keyboard: false,
     animation: "zoom",
     maskAnimation: "fade"
-  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_4__["default"])(rest)), children));
+  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest)), children);
 };
 Modal2.propTypes = {
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
@@ -49021,69 +49039,6 @@ Modal2.propTypes = {
   icon: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
-var prefixCls = function prefixCls(p) {
-  return p.$prefixCls;
-};
-var theme = function theme(cb) {
-  return function (p) {
-    return cb(p.$theme);
-  };
-};
-var Modal2Style = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.createGlobalStyle)([".", "{&-root{div[role=\"dialog\"]{margin:10vh auto 0;}}&-mask{position:fixed;inset:0;height:100%;background-color:", ";background-color:", ";filter:alpha(opacity=70);pointer-events:none;&-hidden{display:none;}}&-fade-enter,&-fade-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.55,0,0.55,0.2);animation-play-state:paused;}&-fade-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.55,0,0.55,0.2);animation-play-state:paused;}&-fade-enter&-fade-enter-active,&-fade-appear&-fade-appear-active{animation-name:rcDialogFadeIn;animation-play-state:running;}&-fade-leave&-fade-leave-active{animation-name:rcDialogFadeOut;animation-play-state:running;}@keyframes rcDialogFadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframes rcDialogFadeOut{0%{opacity:1;}100%{opacity:0;}}&-wrap{position:fixed;inset:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch;}&-content{position:relative;display:flex;flex-direction:column;box-sizing:border-box;padding-top:", ";background-color:", ";border-radius:", ";font-family:", ";box-shadow:", ";pointer-events:auto;}&-close{position:absolute;margin-top:8px;inset-inline-end:16px;z-index:1;padding:4px;text-decoration:none;background:transparent;border-radius:4px;width:24px;height:24px;border:0;outline:0;cursor:pointer;svg{color:", ";}&:hover{background-color:", ";svg{color:", ";}}}&-header{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";}&-title{display:flex;flex-direction:column;gap:", ";}&-title-wrap{display:flex;flex-direction:row;align-items:center;gap:", ";}&-body{overflow-y:auto;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";color:", ";", "}&-footer{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";border-top:1px solid ", ";}&-zoom-enter,&-zoom-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-zoom-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.6,0.04,0.98,0.34);animation-play-state:paused;}&-zoom-enter&-zoom-enter-active,&-zoom-appear&-zoom-appear-active{animation-name:rcDialogZoomIn;animation-play-state:running;}&-zoom-leave&-zoom-leave-active{animation-name:rcDialogZoomOut;animation-play-state:running;}@keyframes rcDialogZoomIn{0%{opacity:0;transform:scale(0,0);}100%{opacity:1;transform:scale(1,1);}}@keyframes rcDialogZoomOut{0%{transform:scale(1,1);}100%{opacity:0;transform:scale(0,0);}}}"], prefixCls, theme(function (t) {
-  return t.color.modal_shadow_bg;
-}), theme(function (t) {
-  return t.color.modal2_shadow_bg;
-}), theme(function (t) {
-  return t.spacing['05'];
-}), theme(function (t) {
-  return t.color.bg;
-}), theme(function (t) {
-  return t.spacing['02'];
-}), theme(function (t) {
-  return t.font_family.sans;
-}), theme(function (t) {
-  return t.shadow.large;
-}), theme(function (t) {
-  return t.color.icon_button_icon_default;
-}), theme(function (t) {
-  return t.color.icon_button_bg_hover;
-}), theme(function (t) {
-  return t.color.icon_button_icon_hover;
-}), theme(function (t) {
-  return t.spacing['03'];
-}), theme(function (t) {
-  return t.spacing['08'];
-}), theme(function (t) {
-  return t.spacing['03'];
-}), theme(function (t) {
-  return t.spacing['07'];
-}), theme(function (t) {
-  return t.spacing['03'];
-}), theme(function (t) {
-  return t.spacing['03'];
-}), theme(function (t) {
-  return t.spacing['06'];
-}), theme(function (t) {
-  return t.spacing['07'];
-}), theme(function (t) {
-  return t.spacing['08'];
-}), theme(function (t) {
-  return t.spacing['07'];
-}), theme(function (t) {
-  return t.color.text_secondary;
-}), theme(function (t) {
-  return t.scrollbars.thin;
-}), theme(function (t) {
-  return t.spacing['04'];
-}), theme(function (t) {
-  return t.spacing['07'];
-}), theme(function (t) {
-  return t.spacing['04'];
-}), theme(function (t) {
-  return t.spacing['07'];
-}), theme(function (t) {
-  return t.color.border_secondary;
-}));
 var DialogHeader = function DialogHeader(_ref2) {
   var icon = _ref2.icon,
     title = _ref2.title,
@@ -49091,9 +49046,9 @@ var DialogHeader = function DialogHeader(_ref2) {
     _prexifCls = _ref2.prefixCls;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
     className: "".concat(_prexifCls, "-title-wrap")
-  }, icon, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Header, {
+  }, icon, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Header, {
     color: "text"
-  }, title)), !!subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
+  }, title)), !!subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     padding_right: "04",
     color: "text_tertiary"
   }, subtitle));
@@ -49111,7 +49066,7 @@ var DialogFooter = function DialogFooter(_ref3) {
   var renderOk = !footer && !!(onOk && okLabel);
   var renderFooter = !!footer || renderOk || renderCancel;
   var FooterLayout = footerLayout[variant] || FooterHorizontal;
-  return renderFooter && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(FooterLayout, null, footer, renderCancel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_11__.ModalButton, _extends({
+  return renderFooter && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(FooterLayout, null, footer, renderCancel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_10__.ModalButton, _extends({
     size: "sm",
     text: cancelLabel,
     hotKey: "Escape",
@@ -49119,7 +49074,7 @@ var DialogFooter = function DialogFooter(_ref3) {
     onClick: onCancel
   }, cancelProps, {
     "data-testid": "modal_footer_cancel_button"
-  })), renderOk && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_11__.ModalButton, _extends({
+  })), renderOk && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_10__.ModalButton, _extends({
     size: "sm",
     text: okLabel,
     hotKey: "Enter",
@@ -49129,7 +49084,7 @@ var DialogFooter = function DialogFooter(_ref3) {
     "data-testid": "modal_footer_ok_button"
   })));
 };
-var FooterHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_7__.Flex).attrs({
+var FooterHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_6__.Flex).attrs({
   gap: '04',
   align_items: 'center',
   justify_content: 'flex-end'
@@ -49137,14 +49092,14 @@ var FooterHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(
   displayName: "FooterHorizontal",
   componentId: "sc-1p3wums-0"
 })([""]);
-var FooterFullHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_7__.Flex).attrs({
+var FooterFullHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_6__.Flex).attrs({
   gap: '04',
   align_items: 'space-between'
 }).withConfig({
   displayName: "FooterFullHorizontal",
   componentId: "sc-1p3wums-1"
 })(["button{width:100%;}"]);
-var FooterVertical = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_7__.Flex).attrs({
+var FooterVertical = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_6__.Flex).attrs({
   gap: '04',
   flex_direction: 'column'
 }).withConfig({
@@ -49157,7 +49112,7 @@ var footerLayout = {
   vertical: FooterVertical
 };
 var CloseIcon = function CloseIcon() {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_js__WEBPACK_IMPORTED_MODULE_6__.Icon, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_js__WEBPACK_IMPORTED_MODULE_5__.Icon, {
     name: "Close",
     size: "xs",
     "data-testid": "modal_header_close_button"
@@ -49234,6 +49189,115 @@ var getHotKeyIcon = function getHotKeyIcon(hotKey) {
 
 /***/ }),
 
+/***/ "./src/modal/styled.js":
+/*!*****************************!*\
+  !*** ./src/modal/styled.js ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StyledModal: () => (/* binding */ StyledModal)
+/* 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 rc_dialog__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rc-dialog */ "./node_modules/rc-dialog/es/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["className", "modalClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+var ModalAdaptor = function ModalAdaptor(_ref) {
+  var className = _ref.className,
+    modalClassName = _ref.modalClassName,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(rc_dialog__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({
+    className: modalClassName,
+    rootClassName: className
+  }, rest));
+};
+var rcFadeIn = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:0;}100%{opacity:1;}"]);
+var rcFadeOut = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:1;}100%{opacity:0;}"]);
+var rcZoomIn = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:0;transform:scale(0,0);}100%{opacity:1;transform:scale(1,1);}"]);
+var rcZoomOut = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:1;transform:scale(1,1);}100%{opacity:0;transform:scale(0,0);}"]);
+var prefixCls = function prefixCls(p) {
+  return p.prefixCls;
+};
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
+var StyledModal = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(ModalAdaptor).withConfig({
+  displayName: "StyledModal",
+  componentId: "sc-flnd5c-0"
+})(["&.", "-root{div[role='dialog']{margin:10vh auto 0;}}.", "{&-mask{position:fixed;inset:0;height:100%;background-color:", ";background-color:", ";filter:alpha(opacity=70);pointer-events:none;&-hidden{display:none;}}&-fade{&-enter,&-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.55,0,0.55,0.2);animation-play-state:paused;}&-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.55,0,0.55,0.2);animation-play-state:paused;}&-enter-active,&-appear-active{animation-name:", ";animation-play-state:running;}&-leave-active{animation-name:", ";animation-play-state:running;}}&-wrap{position:fixed;inset:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch;}&-content{position:relative;display:flex;flex-direction:column;box-sizing:border-box;padding-top:", ";background-color:", ";border-radius:", ";font-family:", ";box-shadow:", ";pointer-events:auto;}&-close{position:absolute;margin-top:8px;inset-inline-end:16px;z-index:1;padding:4px;text-decoration:none;background:transparent;border-radius:4px;width:24px;height:24px;border:0;outline:0;cursor:pointer;svg{color:", ";}&:hover{background-color:", ";svg{color:", ";}}}&-header{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";}&-title{display:flex;flex-direction:column;gap:", ";}&-title-wrap{display:flex;flex-direction:row;align-items:center;gap:", ";}&-body{overflow-y:auto;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";color:", ";", "}&-footer{padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";border-top:1px solid ", ";}&-zoom{&-enter,&-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.6,0.04,0.98,0.34);animation-play-state:paused;}&-enter-active,&-appear-active{animation-name:", ";animation-play-state:running;}&-leave-active{animation-name:", ";animation-play-state:running;}}}"], prefixCls, prefixCls, theme(function (t) {
+  return t.color.modal_shadow_bg;
+}), theme(function (t) {
+  return t.color.modal2_shadow_bg;
+}), rcFadeIn, rcFadeOut, theme(function (t) {
+  return t.spacing['05'];
+}), theme(function (t) {
+  return t.color.bg;
+}), theme(function (t) {
+  return t.spacing['02'];
+}), theme(function (t) {
+  return t.font_family.sans;
+}), theme(function (t) {
+  return t.shadow.large;
+}), theme(function (t) {
+  return t.color.icon_button_icon_default;
+}), theme(function (t) {
+  return t.color.icon_button_bg_hover;
+}), theme(function (t) {
+  return t.color.icon_button_icon_hover;
+}), theme(function (t) {
+  return t.spacing['03'];
+}), theme(function (t) {
+  return t.spacing['08'];
+}), theme(function (t) {
+  return t.spacing['03'];
+}), theme(function (t) {
+  return t.spacing['07'];
+}), theme(function (t) {
+  return t.spacing['03'];
+}), theme(function (t) {
+  return t.spacing['03'];
+}), theme(function (t) {
+  return t.spacing['06'];
+}), theme(function (t) {
+  return t.spacing['07'];
+}), theme(function (t) {
+  return t.spacing['08'];
+}), theme(function (t) {
+  return t.spacing['07'];
+}), theme(function (t) {
+  return t.color.text_secondary;
+}), theme(function (t) {
+  return t.scrollbars.thin;
+}), theme(function (t) {
+  return t.spacing['04'];
+}), theme(function (t) {
+  return t.spacing['07'];
+}), theme(function (t) {
+  return t.spacing['04'];
+}), theme(function (t) {
+  return t.spacing['07'];
+}), theme(function (t) {
+  return t.color.border_secondary;
+}), rcZoomIn, rcZoomOut);
+
+/***/ }),
+
 /***/ "./src/modal/util.js":
 /*!***************************!*\
   !*** ./src/modal/util.js ***!
@@ -49624,19 +49688,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__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 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 _rc_component_trigger__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @rc-component/trigger */ "./node_modules/@rc-component/trigger/es/index.js");
-/* harmony import */ var dom_helpers_listen__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! dom-helpers/listen */ "./node_modules/dom-helpers/esm/listen.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _placements__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./placements */ "./src/popover/placements.js");
+/* harmony import */ var dom_helpers_listen__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! dom-helpers/listen */ "./node_modules/dom-helpers/esm/listen.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _placements__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./placements */ "./src/popover/placements.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styled */ "./src/popover/styled.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["className", "classNamePrefix", "style", "trigger", "visible", "placement", "popover", "onVisibleChange", "afterVisibleChange", "children", "hideOnScroll", "getScrollDOMNode", "destroyOnClose"];
+var _excluded = ["className", "classNamePrefix", "style", "trigger", "visible", "placement", "popover", "onVisibleChange", "afterVisibleChange", "children", "hideOnScroll", "getScrollDOMNode", "destroyOnClose", "zIndex"];
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -49653,7 +49715,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-
 var _Popover = function Popover(_ref) {
   var className = _ref.className,
     _ref$classNamePrefix = _ref.classNamePrefix,
@@ -49671,10 +49732,11 @@ var _Popover = function Popover(_ref) {
     getScrollDOMNode = _ref.getScrollDOMNode,
     _ref$destroyOnClose = _ref.destroyOnClose,
     destroyOnClose = _ref$destroyOnClose === void 0 ? true : _ref$destroyOnClose,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_4__.Z_INDEX.popover : _ref$zIndex,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.useTheme)();
-  var mouseEnterDelay = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(rest.showDelay, _Popover.showDelay);
-  var mouseLeaveDelay = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(rest.hideDelay, _Popover.hideDelay);
+  var mouseEnterDelay = (0,_util__WEBPACK_IMPORTED_MODULE_3__.firstDefined)(rest.showDelay, _Popover.showDelay);
+  var mouseLeaveDelay = (0,_util__WEBPACK_IMPORTED_MODULE_3__.firstDefined)(rest.hideDelay, _Popover.hideDelay);
   var popupMotion = {
     motionName: "".concat(classNamePrefix, "-motion"),
     motionAppear: true,
@@ -49682,7 +49744,7 @@ var _Popover = function Popover(_ref) {
     motionLeave: true,
     motionDeadline: 500
   };
-  var _useStateWithEffect = (0,_hooks__WEBPACK_IMPORTED_MODULE_7__.useStateWithEffect)(visible),
+  var _useStateWithEffect = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useStateWithEffect)(visible),
     _useStateWithEffect2 = _slicedToArray(_useStateWithEffect, 2),
     popupVisible = _useStateWithEffect2[0],
     setPopupVisible = _useStateWithEffect2[1];
@@ -49694,15 +49756,12 @@ var _Popover = function Popover(_ref) {
     if (!hideOnScroll || !popupVisible) return;
     var htmlElement = typeof getScrollDOMNode == 'function' ? getScrollDOMNode() : window;
     if (htmlElement) {
-      return (0,dom_helpers_listen__WEBPACK_IMPORTED_MODULE_4__["default"])(htmlElement, 'scroll', function () {
+      return (0,dom_helpers_listen__WEBPACK_IMPORTED_MODULE_2__["default"])(htmlElement, 'scroll', function () {
         return onPopupVisibleChange(false);
       });
     }
   }, [hideOnScroll, popupVisible, getScrollDOMNode, onPopupVisibleChange]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PopoverStyle, {
-    $prefixCls: classNamePrefix,
-    $theme: theme
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_rc_component_trigger__WEBPACK_IMPORTED_MODULE_3__["default"], {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_7__.StyledPopover, {
     prefixCls: classNamePrefix,
     mask: true,
     action: trigger,
@@ -49712,23 +49771,23 @@ var _Popover = function Popover(_ref) {
     popupStyle: style,
     popupVisible: popupVisible,
     onPopupVisibleChange: onPopupVisibleChange,
-    builtinPlacements: _placements__WEBPACK_IMPORTED_MODULE_8__.placements,
-    zIndex: _constants__WEBPACK_IMPORTED_MODULE_6__.Z_INDEX.popover,
+    builtinPlacements: _placements__WEBPACK_IMPORTED_MODULE_6__.placements,
+    zIndex: zIndex,
     afterPopupVisibleChange: afterVisibleChange,
     mouseEnterDelay: mouseEnterDelay,
     mouseLeaveDelay: mouseLeaveDelay,
     popup: popover,
-    destroyOnClose: destroyOnClose
-  }, children));
+    autoDestroy: destroyOnClose
+  }, children);
 };
 
 _Popover.propTypes = {
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   style: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  trigger: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([_constants__WEBPACK_IMPORTED_MODULE_6__.PT_TRIGGER, prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(_constants__WEBPACK_IMPORTED_MODULE_6__.PT_TRIGGER)]),
+  trigger: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([_constants__WEBPACK_IMPORTED_MODULE_4__.PT_TRIGGER, prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(_constants__WEBPACK_IMPORTED_MODULE_4__.PT_TRIGGER)]),
   visible: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  placement: _constants__WEBPACK_IMPORTED_MODULE_6__.PT_TOOLTIP_PLACEMENT,
+  placement: _constants__WEBPACK_IMPORTED_MODULE_4__.PT_TOOLTIP_PLACEMENT,
   popover: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   showDelay: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
   hideDelay: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
@@ -49736,25 +49795,79 @@ _Popover.propTypes = {
   afterVisibleChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   hideOnScroll: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   getScrollDOMNode: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  zIndex: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
 };
 _Popover.showDelay = 0.1;
 _Popover.hideDelay = 0.1;
+
+/***/ }),
+
+/***/ "./src/popover/styled.js":
+/*!*******************************!*\
+  !*** ./src/popover/styled.js ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StyledPopover: () => (/* binding */ StyledPopover)
+/* 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 _rc_component_trigger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @rc-component/trigger */ "./node_modules/@rc-component/trigger/es/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["className", "popupClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+var PopoverAdaptor = function PopoverAdaptor(_ref) {
+  var className = _ref.className,
+    popupClassName = _ref.popupClassName,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // Motion
+  var maskMotion = {
+    motionName: "".concat(className, " .").concat(rest.prefixCls, "-mask"),
+    motionAppear: false,
+    motionEnter: true,
+    motionLeave: false
+  };
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_rc_component_trigger__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({
+    popupClassName: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(null, null, className, popupClassName),
+    maskMotion: maskMotion
+  }, rest));
+};
+var rcZoomIn = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:0;transform:scale(0,0);}100%{opacity:1;transform:scale(1,1);}"]);
+var rcZoomOut = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{opacity:1;transform:scale(1,1);}100%{opacity:0;transform:scale(0,0);}"]);
 var prefixCls = function prefixCls(p) {
-  return p.$prefixCls;
+  return p.prefixCls;
 };
 var theme = function theme(cb) {
   return function (p) {
-    return cb(p.$theme);
+    return cb(p.theme);
   };
 };
-var PopoverStyle = (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.createGlobalStyle)([".", "{position:absolute;display:block;visibility:visible;width:fit-content;border-radius:4px;border:1px solid ", ";background:", ";box-shadow:", ";&-hidden{display:none;}&-mask{position:fixed;inset:0;pointer-events:none;&-hidden{display:none;}}&-motion{&-enter,&-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.6,0.04,0.98,0.34);animation-play-state:paused;}&-enter&-enter-active,&-appear&-appear-active{animation-name:rcPopoverZoomIn;animation-play-state:running;}&-leave&-leave-active{animation-name:rcPopoverZoomOut;animation-play-state:running;}}@keyframes rcPopoverZoomIn{0%{opacity:0;transform:scale(0,0);}100%{opacity:1;transform:scale(1,1);}}@keyframes rcPopoverZoomOut{0%{opacity:1;transform:scale(1,1);}100%{opacity:0;transform:scale(0,0);}}}"], prefixCls, theme(function (t) {
+var StyledPopover = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(PopoverAdaptor).withConfig({
+  displayName: "StyledPopover",
+  componentId: "sc-5py21r-0"
+})(["&.", "{position:absolute;display:block;visibility:visible;width:fit-content;border-radius:4px;border:1px solid ", ";background:", ";box-shadow:", ";&-hidden{display:none;}&-mask{position:fixed;inset:0;pointer-events:none;&-hidden{display:none;}}&-motion{&-enter,&-appear{opacity:0;animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-leave{animation-duration:0.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.6,0.04,0.98,0.34);animation-play-state:paused;}&-enter-active,&-appear-active{animation-name:", ";animation-play-state:running;}&-leave-active{animation-name:", ";animation-play-state:running;}}}"], prefixCls, theme(function (t) {
   return t.color.popover_border;
 }), theme(function (t) {
   return t.color.bg;
 }), theme(function (t) {
   return t.color.popover_shadow;
-}));
+}), rcZoomIn, rcZoomOut);
 
 /***/ }),
 
@@ -49946,13 +50059,14 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _snackbar_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./snackbar_icon */ "./src/snackbar/snackbar_icon.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _snackbar_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./snackbar_icon */ "./src/snackbar/snackbar_icon.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["type", "showIcon", "header", "children", "container_style"];
+var _excluded = ["className", "classNamePrefix", "variant", "type", "showIcon", "header", "children", "contentStyle", "container_style"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -49962,54 +50076,95 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-var Snackbar = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (_ref, ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'info' : _ref$type,
-    showIcon = _ref.showIcon,
-    header = _ref.header,
-    children = _ref.children,
-    container_style = _ref.container_style,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var content = typeof children == 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Paragraph, {
+
+var Snackbar = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$classNamePrefi = props.classNamePrefix,
+    classNamePrefix = _props$classNamePrefi === void 0 ? 'uikit_snackbar' : _props$classNamePrefi,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'generic' : _props$variant,
+    type = props.type,
+    showIcon = props.showIcon,
+    header = props.header,
+    children = props.children,
+    contentStyle = props.contentStyle,
+    container_style = props.container_style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _variant = type || variant;
+  var content = typeof children == 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Paragraph, {
     variant: "lg_snug",
     color: "text"
   }, children) : children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Wrapper, _extends({
-    ref: ref,
-    $type: type
-  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest)), !!showIcon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_snackbar_icon__WEBPACK_IMPORTED_MODULE_5__.SnackbarIcon, {
-    type: type
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Container, {
-    style: container_style
-  }, !!header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
+    ref: ref
+  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest), {
+    $prefixCls: classNamePrefix,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.classNames)(null, null, className, classNamePrefix, "".concat(classNamePrefix, "_").concat(_variant))
+  }), !!showIcon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_snackbar_icon__WEBPACK_IMPORTED_MODULE_6__.SnackbarIcon, {
+    variant: _variant,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.classNames)(classNamePrefix, {
+      '-icon': true
+    })
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Content, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.classNames)(classNamePrefix, {
+      '-content': true
+    }),
+    style: container_style || contentStyle
+  }, !!header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     variant: "lg",
-    color: "text"
+    color: "text",
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.classNames)(classNamePrefix, {
+      '-header': true
+    })
   }, header), content));
 });
 Snackbar.displayName = 'Snackbar';
 Snackbar.propTypes = {
-  container_style: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  type: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['info', 'success', 'error', 'warning', 'generic']),
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  contentStyle: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
+  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['generic', 'info', 'success', 'error', 'warning']),
   header: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   showIcon: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
+var prefixCls = function prefixCls(p) {
+  return p.$prefixCls;
+};
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
 var Wrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Wrapper",
   componentId: "sc-6ku6mu-0"
-})(["display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;padding:16px;gap:16px;border-radius:4px;background-color:", ";"], function (_ref2) {
-  var $type = _ref2.$type,
-    color = _ref2.theme.color;
-  return {
-    info: color.bg_fill_primary_secondary,
-    success: color.bg_fill_success_secondary,
-    error: color.bg_fill_error_secondary,
-    warning: color.bg_fill_warning_secondary
-  }[$type] || color.bg_fill_secondary;
-});
-var Container = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
-  displayName: "Container",
+})(["display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;padding:16px;gap:16px;border-radius:4px;&.", "{&_info{background-color:", ";.", "-icon{color:", ";}}&_success{background-color:", ";.", "-icon{color:", ";}}&_error{background-color:", ";.", "-icon{color:", ";}}&_warning{background-color:", ";.", "-icon{color:", ";}}&_generic{background-color:", ";.", "-icon{color:", ";}}}"], prefixCls, theme(function (t) {
+  return t.color.bg_fill_primary_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_primary;
+}), theme(function (t) {
+  return t.color.bg_fill_success_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_success;
+}), theme(function (t) {
+  return t.color.bg_fill_error_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_error;
+}), theme(function (t) {
+  return t.color.bg_fill_warning_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_warning;
+}), theme(function (t) {
+  return t.color.bg_fill_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon;
+}));
+var Content = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "Content",
   componentId: "sc-6ku6mu-1"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;"]);
+})(["display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:", ";"], theme(function (t) {
+  return t.spacing['05'];
+}));
 
 /***/ }),
 
@@ -50033,25 +50188,21 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 
 
-var SnackbarIcon = function SnackbarIcon(props) {
-  var type = props.type;
+var SnackbarIcon = function SnackbarIcon(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'info' : _ref$variant,
+    className = _ref.className;
   var name = {
     info: 'Info',
     success: 'CheckCircle',
     error: 'Warning',
     warning: 'Warning',
     generic: 'Info'
-  }[type] || 'Info';
-  var color = {
-    info: 'icon_primary',
-    success: 'icon_success',
-    error: 'icon_error',
-    warning: 'icon_warning'
-  }[type] || 'icon';
+  }[variant] || 'Info';
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_1__.Icon, {
     name: name,
-    color: color,
-    size: "sm"
+    size: "sm",
+    className: className
   });
 };
 
@@ -50299,6 +50450,123 @@ _tab__WEBPACK_IMPORTED_MODULE_1__["default"].Group = _group__WEBPACK_IMPORTED_MO
 
 
 
+/***/ }),
+
+/***/ "./src/tab/styled.js":
+/*!***************************!*\
+  !*** ./src/tab/styled.js ***!
+  \***************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StyledTabs: () => (/* binding */ StyledTabs)
+/* harmony export */ });
+/* harmony import */ var rc_tabs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! rc-tabs */ "./node_modules/rc-tabs/es/index.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__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+var prefixCls = function prefixCls(p) {
+  return p.prefixCls;
+};
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
+var StyledTabs = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(rc_tabs__WEBPACK_IMPORTED_MODULE_0__["default"]).withConfig({
+  displayName: "StyledTabs",
+  componentId: "sc-1skhq03-0"
+})(["&.", "{box-sizing:border-box;margin:0;padding:0;list-style:none;display:flex;&-top,&-bottom{flex-direction:column;.", "-nav-list{flex-direction:row;}}&-left,&-right{flex-direction:row;.", "-nav-list{flex-direction:column;}}&-main{.", "-nav-list{width:fit-content;align-items:center;gap:24px;}.", "-tab{.", "-tab-btn{height:36px;padding:0;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;font-size:", ";font-weight:", ";&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-active{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}}}}&-underline{.", "-nav-list{width:fit-content;align-items:center;}.", "-tab{.", "-tab-btn{height:24px;padding:0 16px;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;font-size:", ";font-weight:", ";&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-active{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}}}}&-contain{.", "-nav-list{width:fit-content;padding:2px;gap:2px;border-radius:4px;background:", ";align-items:center;}.", "-tab{.", "-tab-btn{height:32px;padding:0px 8px;justify-content:center;gap:6px;border-radius:4px;color:", ";font-size:", ";font-weight:", ";&:hover{color:", ";background:", ";}}&-active{.", "-tab-btn{background:", ";border:1px solid ", ";box-shadow:", ";color:", ";}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";background:", ";font-weight:", ";}}}}&-vertical{.", "-nav-list{width:100%;align-items:stretch;}.", "-tab{.", "-tab-btn{width:100%;height:40px;padding:0 12px;justify-content:flex-start;gap:4px;border-radius:0 4px 4px 0;border-left:1px solid transparent;color:", ";overflow-x:clip;text-overflow:ellipsis;&:hover{border-left-color:", ";}}&-active{.", "-tab-btn{background:", ";border-left-color:", ";}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";border-left-color:transparent;}}}}}.", "{&-nav{position:relative;display:flex;flex:none;align-items:center;&-wrap{position:relative;display:flex;flex:auto;align-self:stretch;white-space:nowrap;transform:translate(0);box-sizing:border-box;width:100%;}&-list{position:relative;display:flex;transition:opacity 0.3s;justify-content:flex-start;box-sizing:border-box;}&-operations{display:flex;align-self:stretch;&-hidden{position:absolute;visibility:hidden;pointer-events:none;}}}&-content-holder{flex:auto;min-width:0;min-height:0;box-sizing:border-box;}&-content{position:relative;width:100%;}&-tabpane{outline:none;&-hidden{display:none;}}&-tab{&-btn{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border:0 none;background:transparent;min-width:0;width:fit-content;cursor:pointer;white-space:nowrap;font-family:", ";line-height:", ";letter-spacing:", ";}&-disabled{.", "-tab-btn{cursor:not-allowed;}}}&-ink-bar{display:none;position:absolute;pointer-events:none;}}"], prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.text;
+}), theme(function (t) {
+  return t.color.border_teritary;
+}), theme(function (t) {
+  return t.font_size.md;
+}), theme(function (t) {
+  return t.font_weight.semibold;
+}), theme(function (t) {
+  return t.color.text;
+}), theme(function (t) {
+  return t.color.border;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_primary;
+}), theme(function (t) {
+  return t.color.border_primary;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_disabled;
+}), theme(function (t) {
+  return t.color.border_disabled;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_tertiary;
+}), theme(function (t) {
+  return t.color.border_secondary;
+}), theme(function (t) {
+  return t.font_size.xs;
+}), theme(function (t) {
+  return t.font_weight.regular;
+}), theme(function (t) {
+  return t.color.text_tertiary;
+}), theme(function (t) {
+  return t.color.border;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_primary;
+}), theme(function (t) {
+  return t.color.border_primary;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_disabled;
+}), theme(function (t) {
+  return t.color.border_disabled;
+}), prefixCls, theme(function (t) {
+  return t.color.tab_contained_bg;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_tertiary;
+}), theme(function (t) {
+  return t.font_size.md;
+}), theme(function (t) {
+  return t.font_weight.semibold;
+}), theme(function (t) {
+  return t.color.text_tertiary;
+}), theme(function (t) {
+  return t.color.bg_fill_primary_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.bg;
+}), theme(function (t) {
+  return t.color.border;
+}), theme(function (t) {
+  return t.shadow.meduim;
+}), theme(function (t) {
+  return t.color.text_primary;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_disabled;
+}), theme(function (t) {
+  return t.color.bg_fill_teritary;
+}), theme(function (t) {
+  return t.font_weight.regular;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.text;
+}), theme(function (t) {
+  return t.color.border;
+}), prefixCls, theme(function (t) {
+  return t.color.bg_fill_primary_secondary;
+}), theme(function (t) {
+  return t.color.bg_fill_primary_secondary;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_disabled;
+}), prefixCls, theme(function (t) {
+  return t.font_family.sans;
+}), theme(function (t) {
+  return t.line_height.none;
+}), theme(function (t) {
+  return t.letter_spacing.normal;
+}), prefixCls);
+
 /***/ }),
 
 /***/ "./src/tab/tab.js":
@@ -50428,12 +50696,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__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 rc_tabs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rc-tabs */ "./node_modules/rc-tabs/es/index.js");
-/* harmony import */ var rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _use_legacy_items__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./use_legacy_items */ "./src/tab/use_legacy_items.js");
+/* harmony import */ var rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styled */ "./src/tab/styled.js");
+/* harmony import */ var _use_legacy_items__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./use_legacy_items */ "./src/tab/use_legacy_items.js");
 // LICENSE_CODE ZON
 
 
@@ -50448,7 +50714,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-
 var Tabs = function Tabs(_ref) {
   var className = _ref.className,
     _ref$classNamePrefix = _ref.classNamePrefix,
@@ -50472,14 +50737,10 @@ var Tabs = function Tabs(_ref) {
     activeKey = _ref.activeKey,
     renderTabBar = _ref.renderTabBar,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_4__.useTheme)();
-  var mergedItems = (0,_use_legacy_items__WEBPACK_IMPORTED_MODULE_6__.useLegacyItems)(items, children);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(TabsStyle, {
-    $prefixCls: classNamePrefix,
-    $theme: theme
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(rc_tabs__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({}, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest), {
+  var mergedItems = (0,_use_legacy_items__WEBPACK_IMPORTED_MODULE_5__.useLegacyItems)(items, children);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_4__.StyledTabs, _extends({}, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_2__["default"])(rest), {
     items: mergedItems,
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.classNames)(null, null, className, variant && "".concat(classNamePrefix, "-").concat(variant)),
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(null, null, className, "".concat(classNamePrefix, "-").concat(variant)),
     popupClassName: popupClassName,
     style: style
     // more={{
@@ -50500,7 +50761,7 @@ var Tabs = function Tabs(_ref) {
     locale: locale,
     activeKey: activeKey,
     renderTabBar: renderTabBar
-  })));
+  }));
 };
 Tabs.propTypes = {
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
@@ -50526,97 +50787,6 @@ Tabs.propTypes = {
   activeKey: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   renderTabBar: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)
 };
-var prefixCls = function prefixCls(p) {
-  return p.$prefixCls;
-};
-var theme = function theme(cb) {
-  return function (p) {
-    return cb(p.$theme);
-  };
-};
-var TabsStyle = (0,styled_components__WEBPACK_IMPORTED_MODULE_4__.createGlobalStyle)([".", "{box-sizing:border-box;margin:0;padding:0;list-style:none;display:flex;&-top,&-bottom{flex-direction:column;.", "-nav-list{flex-direction:row;}}&-left,&-right{flex-direction:row;.", "-nav-list{flex-direction:column;}}&-nav{position:relative;display:flex;flex:none;align-items:center;&-wrap{position:relative;display:flex;flex:auto;align-self:stretch;white-space:nowrap;transform:translate(0);}&-list{position:relative;display:flex;transition:opacity 0.3s;justify-content:flex-start;align-items:center;box-sizing:border-box;width:fit-content;}&-operations{display:flex;align-self:stretch;&-hidden{position:absolute;visibility:hidden;pointer-events:none;}}}&-content-holder{flex:auto;min-width:0;min-height:0;box-sizing:border-box;}&-content{position:relative;width:100%;}&-tabpane{outline:none;&-hidden{display:none;}}&-tab{&-btn{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border:0 none;background:transparent;min-width:0;width:fit-content;cursor:pointer;white-space:nowrap;font-family:", ";line-height:", ";letter-spacing:", ";}&-disabled{.", "-tab-btn{cursor:not-allowed;}}}&-main{.", "-nav-list{gap:24px;}.", "-tab{.", "-tab-btn{height:36px;padding:0;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;font-size:", ";font-weight:", ";&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-active{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}}}}&-underline{.", "-tab{.", "-tab-btn{height:24px;padding:0 16px;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;font-size:", ";font-weight:", ";&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-active{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}}}}&-contain{.", "-nav-list{padding:2px;gap:2px;border-radius:4px;background:", ";}.", "-tab{.", "-tab-btn{height:32px;padding:0px 8px;justify-content:center;gap:6px;border-radius:4px;color:", ";font-size:", ";font-weight:", ";&:hover{color:", ";background:", ";}}&-active{.", "-tab-btn{background:", ";border:1px solid ", ";box-shadow:", ";color:", ";}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";background:", ";font-weight:", ";}}}}&-vertical{.", "-tab{.", "-tab-btn{width:200px;height:40px;padding:0 12px;justify-content:flex-start;gap:4px;border-radius:0 4px 4px 0;border-left:1px solid transparent;color:", ";overflow-x:clip;text-overflow:ellipsis;&:hover{border-left-color:", ";}}&-active{.", "-tab-btn{background:", ";border-left-color:", ";}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";border-left-color:transparent;}}}}&-ink-bar{display:none;position:absolute;pointer-events:none;}}"], prefixCls, prefixCls, prefixCls, theme(function (t) {
-  return t.font_family.sans;
-}), theme(function (t) {
-  return t.line_height.none;
-}), theme(function (t) {
-  return t.letter_spacing.normal;
-}), prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
-  return t.color.text;
-}), theme(function (t) {
-  return t.color.border_teritary;
-}), theme(function (t) {
-  return t.font_size.md;
-}), theme(function (t) {
-  return t.font_weight.semibold;
-}), theme(function (t) {
-  return t.color.text;
-}), theme(function (t) {
-  return t.color.border;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_primary;
-}), theme(function (t) {
-  return t.color.border_primary;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_disabled;
-}), theme(function (t) {
-  return t.color.border_disabled;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_tertiary;
-}), theme(function (t) {
-  return t.color.border_secondary;
-}), theme(function (t) {
-  return t.font_size.xs;
-}), theme(function (t) {
-  return t.font_weight.regular;
-}), theme(function (t) {
-  return t.color.text_tertiary;
-}), theme(function (t) {
-  return t.color.border;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_primary;
-}), theme(function (t) {
-  return t.color.border_primary;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_disabled;
-}), theme(function (t) {
-  return t.color.border_disabled;
-}), prefixCls, theme(function (t) {
-  return t.color.tab_contained_bg;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_tertiary;
-}), theme(function (t) {
-  return t.font_size.md;
-}), theme(function (t) {
-  return t.font_weight.semibold;
-}), theme(function (t) {
-  return t.color.text_tertiary;
-}), theme(function (t) {
-  return t.color.bg_fill_primary_secondary;
-}), prefixCls, theme(function (t) {
-  return t.color.bg;
-}), theme(function (t) {
-  return t.color.border;
-}), theme(function (t) {
-  return t.shadow.meduim;
-}), theme(function (t) {
-  return t.color.text_primary;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_disabled;
-}), theme(function (t) {
-  return t.color.bg_fill_teritary;
-}), theme(function (t) {
-  return t.font_weight.regular;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text;
-}), theme(function (t) {
-  return t.color.border;
-}), prefixCls, theme(function (t) {
-  return t.color.bg_fill_primary_secondary;
-}), theme(function (t) {
-  return t.color.bg_fill_primary_secondary;
-}), prefixCls, prefixCls, theme(function (t) {
-  return t.color.text_disabled;
-}));
 
 /***/ }),
 
@@ -55354,6 +55524,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _constant__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constant */ "./src/themes/constant.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./util */ "./src/themes/util.js");
 // LICENSE_CODE ZON
 
 
@@ -55368,6 +55539,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 var baseTheme = {
   font_family: _constant__WEBPACK_IMPORTED_MODULE_3__.fontFamily,
   font_size: _constant__WEBPACK_IMPORTED_MODULE_3__.fontSize,
@@ -55393,14 +55565,12 @@ var lightTheme = _objectSpread(_objectSpread({}, baseTheme), {}, {
   color: _objectSpread(_objectSpread(_objectSpread({}, _constant__WEBPACK_IMPORTED_MODULE_3__.color), _constant__WEBPACK_IMPORTED_MODULE_3__.semanticLight), _constant__WEBPACK_IMPORTED_MODULE_3__.componentLight)
 });
 lightTheme.scrollbars = (0,_constant__WEBPACK_IMPORTED_MODULE_3__.scrollbars)(lightTheme);
-// addVar('--uikit-', lightTheme.color);
-
+(0,_util__WEBPACK_IMPORTED_MODULE_4__.addVar)('--uikit-', lightTheme.color);
 var darkTheme = _objectSpread(_objectSpread({}, baseTheme), {}, {
   color: _objectSpread(_objectSpread(_objectSpread({}, _constant__WEBPACK_IMPORTED_MODULE_3__.color), _constant__WEBPACK_IMPORTED_MODULE_3__.semanticDark), _constant__WEBPACK_IMPORTED_MODULE_3__.componentDark)
 });
 darkTheme.scrollbars = (0,_constant__WEBPACK_IMPORTED_MODULE_3__.scrollbars)(darkTheme);
-// addVar('--uikit-', darkTheme.color);
-
+(0,_util__WEBPACK_IMPORTED_MODULE_4__.addVar)('--uikit-', darkTheme.color);
 var PT_THEME = prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['light', 'dark']);
 var ThemeProvider = function ThemeProvider(_ref) {
   var theme = _ref.theme,
@@ -55446,6 +55616,47 @@ ThemeProvider.propTypes = {
 
 
 
+/***/ }),
+
+/***/ "./src/themes/util.js":
+/*!****************************!*\
+  !*** ./src/themes/util.js ***!
+  \****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   addVar: () => (/* binding */ addVar),
+/* harmony export */   buildVars: () => (/* binding */ buildVars)
+/* harmony export */ });
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var buildVars = function buildVars(prefix, obj) {
+  var res = '';
+  Object.entries(obj).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      k = _ref2[0],
+      v = _ref2[1];
+    res += prefix + k.replaceAll('_', '-') + ': ' + v + ';\n';
+  });
+  return res;
+};
+var addVar = function addVar(prefix, obj) {
+  Object.keys(obj).forEach(function (k) {
+    if (typeof obj[k] != 'string' || obj[k].includes(',')) return;
+    obj[k] = 'var(' + prefix + k.replaceAll('_', '-') + ', ' + obj[k] + ')';
+  });
+};
+
 /***/ }),
 
 /***/ "./src/toast/context.js":
@@ -56104,6 +56315,113 @@ var placements = {
 
 /***/ }),
 
+/***/ "./src/tooltip/styled.js":
+/*!*******************************!*\
+  !*** ./src/tooltip/styled.js ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StyledTooltip: () => (/* binding */ StyledTooltip)
+/* 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 rc_tooltip__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! rc-tooltip */ "./node_modules/rc-tooltip/es/index.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__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+var prefixCls = function prefixCls(p) {
+  return p.prefixCls;
+};
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
+var TooltipAdaptor = function TooltipAdaptor(_ref) {
+  var className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(rc_tooltip__WEBPACK_IMPORTED_MODULE_1__["default"], _extends({
+    overlayClassName: className
+  }, rest));
+};
+var StyledTooltip = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(TooltipAdaptor).withConfig({
+  displayName: "StyledTooltip",
+  componentId: "sc-148yrjz-0"
+})(["&.", "{position:absolute;display:block;visibility:visible;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";padding:1px;width:fit-content;max-width:min(500px,80vw);background-color:transparent;&-hidden{display:none;}.", "-inner{padding:8px 10px;text-align:left;text-decoration:none;border-radius:", ";box-shadow:", ";min-height:", ";}.", "-arrow,.", "-arrow::before{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;}&-placement-top .", "-arrow,&-placement-topLeft .", "-arrow,&-placement-topRight .", "-arrow{transform:translate(-50%,5px);margin-left:-6px;border-width:6px 6px 0;}&-placement-top .", "-arrow::before,&-placement-topLeft .", "-arrow::before,&-placement-topRight .", "-arrow::before{bottom:1px;margin-left:-6px;border-width:6px 6px 0;}&-placement-top .", "-arrow{left:50%;}&-placement-topLeft .", "-arrow{left:15%;}&-placement-topRight .", "-arrow{right:15%;}&-placement-right .", "-arrow,&-placement-rightTop .", "-arrow,&-placement-rightBottom .", "-arrow{left:-5px;margin-top:-6px;border-width:6px 6px 6px 0;transform:translateX(calc(-100% + 1px));}&-placement-right .", "-arrow::before,&-placement-rightTop .", "-arrow::before,&-placement-rightBottom .", "-arrow::before{left:1px;margin-top:-6px;border-width:6px 6px 6px 0;}&-placement-right .", "-arrow{top:50%;}&-placement-rightTop .", "-arrow{top:15%;margin-top:0;}&-placement-rightBottom .", "-arrow{bottom:15%;}&-placement-left .", "-arrow,&-placement-leftTop .", "-arrow,&-placement-leftBottom .", "-arrow{right:-5px;margin-top:-6px;border-width:6px 0 6px 6px;transform:translateX(calc(100% - 1px));}&-placement-left .", "-arrow::before,&-placement-leftTop .", "-arrow::before,&-placement-leftBottom .", "-arrow::before{right:1px;margin-top:-6px;border-width:6px 0 6px 6px;}&-placement-left .", "-arrow{top:50%;}&-placement-leftTop .", "-arrow{top:15%;margin-top:0;}&-placement-leftBottom .", "-arrow{bottom:15%;}&-placement-bottom .", "-arrow,&-placement-bottomLeft .", "-arrow,&-placement-bottomRight .", "-arrow{transform:translate(-50%,-5px);margin-left:-6px;border-width:0 6px 6px;}&-placement-bottom .", "-arrow::before,&-placement-bottomLeft .", "-arrow::before,&-placement-bottomRight .", "-arrow::before{top:1px;margin-left:-6px;border-width:0 6px 6px;}&-placement-bottom .", "-arrow{left:50%;}&-placement-bottomLeft .", "-arrow{left:15%;}&-placement-bottomRight .", "-arrow{right:15%;}&&-zoom-appear,&&-zoom-enter{opacity:0;}&&-zoom-enter,&&-zoom-leave{display:block;}&-zoom-enter,&-zoom-appear{opacity:0;animation-duration:0.1s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-zoom-leave{animation-duration:0.1s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.78,0.14,0.15,0.86);animation-play-state:paused;}&-zoom-enter&-zoom-enter-active,&-zoom-appear&-zoom-appear-active{animation-name:rcToolTipZoomIn;animation-play-state:running;}&-zoom-leave&-zoom-leave-active{animation-name:rcToolTipZoomOut;animation-play-state:running;}@keyframes rcToolTipZoomIn{0%{opacity:0;transform-origin:50% 50%;transform:scale(0,0);}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);}}@keyframes rcToolTipZoomOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);}100%{opacity:0;transform-origin:50% 50%;transform:scale(0,0);}}}&.", "-white{.", "-inner{color:", ";background-color:", ";border:1px solid ", ";}&.", "{&-placement-top .", "-arrow,&-placement-topLeft .", "-arrow,&-placement-topRight .", "-arrow{border-top-color:", ";}&-placement-top .", "-arrow::before,&-placement-topLeft .", "-arrow::before,&-placement-topRight .", "-arrow::before{content:'';border-top-color:", ";}&-placement-right .", "-arrow,&-placement-rightTop .", "-arrow,&-placement-rightBottom .", "-arrow{border-right-color:", ";}&-placement-right .", "-arrow::before,&-placement-rightTop .", "-arrow::before,&-placement-rightBottom .", "-arrow::before{content:'';border-right-color:", ";}&-placement-left .", "-arrow,&-placement-leftTop .", "-arrow,&-placement-leftBottom .", "-arrow{border-left-color:", ";}&-placement-left .", "-arrow::before,&-placement-leftTop .", "-arrow::before,&-placement-leftBottom .", "-arrow::before{content:'';border-left-color:", ";}&-placement-bottom .", "-arrow,&-placement-bottomLeft .", "-arrow,&-placement-bottomRight .", "-arrow{border-bottom-color:", ";}&-placement-bottom .", "-arrow::before,&-placement-bottomLeft .", "-arrow::before,&-placement-bottomRight .", "-arrow::before{content:'';border-bottom-color:", ";}}}&.", "-black{.", "-inner{color:", ";background-color:", ";border:1px solid ", ";}&.", "{&-placement-top .", "-arrow,&-placement-topLeft .", "-arrow,&-placement-topRight .", "-arrow{border-top-color:", ";}&-placement-top .", "-arrow::before,&-placement-topLeft .", "-arrow::before,&-placement-topRight .", "-arrow::before{border-top-color:", ";}&-placement-right .", "-arrow,&-placement-rightTop .", "-arrow,&-placement-rightBottom .", "-arrow{border-right-color:", ";}&-placement-right .", "-arrow::before,&-placement-rightTop .", "-arrow::before,&-placement-rightBottom .", "-arrow::before{border-right-color:", ";}&-placement-left .", "-arrow,&-placement-leftTop .", "-arrow,&-placement-leftBottom .", "-arrow{border-left-color:", ";}&-placement-left .", "-arrow::before,&-placement-leftTop .", "-arrow::before,&-placement-leftBottom .", "-arrow::before{border-left-color:", ";}&-placement-bottom .", "-arrow,&-placement-bottomLeft .", "-arrow,&-placement-bottomRight .", "-arrow{border-bottom-color:", ";}&-placement-bottom .", "-arrow::before,&-placement-bottomLeft .", "-arrow::before,&-placement-bottomRight .", "-arrow::before{border-bottom-color:", ";}}}"], prefixCls, theme(function (t) {
+  return t.font_family.sans;
+}), theme(function (t) {
+  return t.font_size.sm;
+}), theme(function (t) {
+  return t.font_weight.regular;
+}), theme(function (t) {
+  return t.line_height.snug;
+}), prefixCls, theme(function (t) {
+  return t.spacing['02'];
+}), theme(function (t) {
+  return t.shadow.medium;
+}), theme(function (t) {
+  return t.font_size.sm;
+}), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_text_white;
+}), theme(function (t) {
+  return t.color.tooltip_bg_white;
+}), theme(function (t) {
+  return t.color.tooltip_border_white;
+}), prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_border_white;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_white;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_border_white;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_white;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_border_white;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_white;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_border_white;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_white;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_text_black;
+}), theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}), prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.tooltip_bg_black;
+}));
+
+/***/ }),
+
 /***/ "./src/tooltip/tooltip.js":
 /*!********************************!*\
   !*** ./src/tooltip/tooltip.js ***!
@@ -56353,17 +56671,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__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 rc_tooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rc-tooltip */ "./node_modules/rc-tooltip/es/index.js");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
-/* harmony import */ var _placements__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./placements */ "./src/tooltip/placements.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _placements__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./placements */ "./src/tooltip/placements.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./styled */ "./src/tooltip/styled.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["id", "className", "classNamePrefix", "variant", "trigger", "visible", "placement", "tooltip", "showArrow", "onVisibleChange", "afterVisibleChange", "children", "destroyOnClose"];
+var _excluded = ["id", "className", "classNamePrefix", "variant", "trigger", "visible", "placement", "tooltip", "showArrow", "onVisibleChange", "afterVisibleChange", "children", "destroyOnClose", "zIndex"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 
@@ -56372,7 +56688,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-
 var _Tooltip = function Tooltip2(_ref) {
   var id = _ref.id,
     className = _ref.className,
@@ -56391,19 +56706,17 @@ var _Tooltip = function Tooltip2(_ref) {
     children = _ref.children,
     _ref$destroyOnClose = _ref.destroyOnClose,
     destroyOnClose = _ref$destroyOnClose === void 0 ? true : _ref$destroyOnClose,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.tooltip : _ref$zIndex,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = (0,styled_components__WEBPACK_IMPORTED_MODULE_3__.useTheme)();
-  var mouseEnterDelay = (0,_util__WEBPACK_IMPORTED_MODULE_4__.firstDefined)(rest.showDelay, _Tooltip.showDelay);
-  var mouseLeaveDelay = (0,_util__WEBPACK_IMPORTED_MODULE_4__.firstDefined)(rest.hideDelay, _Tooltip.hideDelay);
-  var align = (0,_util__WEBPACK_IMPORTED_MODULE_4__.firstDefined)(rest.align, _placements__WEBPACK_IMPORTED_MODULE_6__.placements[placement]);
+  var mouseEnterDelay = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(rest.showDelay, _Tooltip.showDelay);
+  var mouseLeaveDelay = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(rest.hideDelay, _Tooltip.hideDelay);
+  var align = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(rest.align, _placements__WEBPACK_IMPORTED_MODULE_4__.placements[placement]);
   if (!tooltip) return children;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Tooltip2Style, {
-    $prefixCls: classNamePrefix,
-    $theme: theme
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(rc_tooltip__WEBPACK_IMPORTED_MODULE_2__["default"], {
-    prefixCls: "".concat(classNamePrefix, "_").concat(variant),
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_5__.StyledTooltip, {
+    prefixCls: classNamePrefix,
     id: id,
-    overlayClassName: className,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_2__.classNames)(null, null, className, "".concat(classNamePrefix, "-").concat(variant)),
     overlay: tooltip,
     trigger: trigger,
     visible: visible,
@@ -56411,13 +56724,13 @@ var _Tooltip = function Tooltip2(_ref) {
     animation: "zoom",
     mouseEnterDelay: mouseEnterDelay,
     mouseLeaveDelay: mouseLeaveDelay,
-    zIndex: _constants__WEBPACK_IMPORTED_MODULE_5__.Z_INDEX.tooltip,
+    zIndex: zIndex,
     align: align,
     showArrow: showArrow,
     onVisibleChange: onVisibleChange,
     afterVisibleChange: afterVisibleChange,
     destroyOnClose: destroyOnClose
-  }, children));
+  }, children);
 };
 
 _Tooltip.propTypes = {
@@ -56425,9 +56738,9 @@ _Tooltip.propTypes = {
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['black', 'white']),
-  trigger: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([_constants__WEBPACK_IMPORTED_MODULE_5__.PT_TRIGGER, prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(_constants__WEBPACK_IMPORTED_MODULE_5__.PT_TRIGGER)]),
+  trigger: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([_constants__WEBPACK_IMPORTED_MODULE_3__.PT_TRIGGER, prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(_constants__WEBPACK_IMPORTED_MODULE_3__.PT_TRIGGER)]),
   visible: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  placement: _constants__WEBPACK_IMPORTED_MODULE_5__.PT_TOOLTIP_PLACEMENT,
+  placement: _constants__WEBPACK_IMPORTED_MODULE_3__.PT_TOOLTIP_PLACEMENT,
   tooltip: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   showDelay: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
   hideDelay: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
@@ -56435,77 +56748,11 @@ _Tooltip.propTypes = {
   showArrow: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   onVisibleChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   afterVisibleChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  zIndex: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
 };
 _Tooltip.showDelay = 0.1;
 _Tooltip.hideDelay = 0.1;
-var prefixCls = function prefixCls(p) {
-  return p.$prefixCls;
-};
-var theme = function theme(cb) {
-  return function (p) {
-    return cb(p.$theme);
-  };
-};
-var Tooltip2Style = (0,styled_components__WEBPACK_IMPORTED_MODULE_3__.createGlobalStyle)([".", "{&_white,&_black{position:absolute;display:block;visibility:visible;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";padding:1px;width:fit-content;max-width:min(500px,80vw);background-color:transparent;&-hidden{display:none;}&-inner{padding:8px 10px;text-align:left;text-decoration:none;border-radius:", ";box-shadow:", ";min-height:", ";}&-arrow,&-arrow::before{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;}&-placement-top &-arrow,&-placement-topLeft &-arrow,&-placement-topRight &-arrow{transform:translate(-50%,5px);margin-left:-6px;border-width:6px 6px 0;}&-placement-top &-arrow::before,&-placement-topLeft &-arrow::before,&-placement-topRight &-arrow::before{bottom:1px;margin-left:-6px;border-width:6px 6px 0;}&-placement-top &-arrow{left:50%;}&-placement-topLeft &-arrow{left:15%;}&-placement-topRight &-arrow{right:15%;}&-placement-right &-arrow,&-placement-rightTop &-arrow,&-placement-rightBottom &-arrow{left:-5px;margin-top:-6px;border-width:6px 6px 6px 0;transform:translateX(calc(-100% + 1px));}&-placement-right &-arrow::before,&-placement-rightTop &-arrow::before,&-placement-rightBottom &-arrow::before{left:1px;margin-top:-6px;border-width:6px 6px 6px 0;}&-placement-right &-arrow{top:50%;}&-placement-rightTop &-arrow{top:15%;margin-top:0;}&-placement-rightBottom &-arrow{bottom:15%;}&-placement-left &-arrow,&-placement-leftTop &-arrow,&-placement-leftBottom &-arrow{right:-5px;margin-top:-6px;border-width:6px 0 6px 6px;transform:translateX(calc(100% - 1px));}&-placement-left &-arrow::before,&-placement-leftTop &-arrow::before,&-placement-leftBottom &-arrow::before{right:1px;margin-top:-6px;border-width:6px 0 6px 6px;}&-placement-left &-arrow{top:50%;}&-placement-leftTop &-arrow{top:15%;margin-top:0;}&-placement-leftBottom &-arrow{bottom:15%;}&-placement-bottom &-arrow,&-placement-bottomLeft &-arrow,&-placement-bottomRight &-arrow{transform:translate(-50%,-5px);margin-left:-6px;border-width:0 6px 6px;}&-placement-bottom &-arrow::before,&-placement-bottomLeft &-arrow::before,&-placement-bottomRight &-arrow::before{top:1px;margin-left:-6px;border-width:0 6px 6px;}&-placement-bottom &-arrow{left:50%;}&-placement-bottomLeft &-arrow{left:15%;}&-placement-bottomRight &-arrow{right:15%;}&&-zoom-appear,&&-zoom-enter{opacity:0;}&&-zoom-enter,&&-zoom-leave{display:block;}&-zoom-enter,&-zoom-appear{opacity:0;animation-duration:0.1s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-play-state:paused;}&-zoom-leave{animation-duration:0.1s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.78,0.14,0.15,0.86);animation-play-state:paused;}&-zoom-enter&-zoom-enter-active,&-zoom-appear&-zoom-appear-active{animation-name:rcToolTipZoomIn;animation-play-state:running;}&-zoom-leave&-zoom-leave-active{animation-name:rcToolTipZoomOut;animation-play-state:running;}@keyframes rcToolTipZoomIn{0%{opacity:0;transform-origin:50% 50%;transform:scale(0,0);}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);}}@keyframes rcToolTipZoomOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);}100%{opacity:0;transform-origin:50% 50%;transform:scale(0,0);}}}&_white{&-inner{color:", ";background-color:", ";border:1px solid ", ";}&-placement-top &-arrow,&-placement-topLeft &-arrow,&-placement-topRight &-arrow{border-top-color:", ";}&-placement-top &-arrow::before,&-placement-topLeft &-arrow::before,&-placement-topRight &-arrow::before{content:'';border-top-color:", ";}&-placement-right &-arrow,&-placement-rightTop &-arrow,&-placement-rightBottom &-arrow{border-right-color:", ";}&-placement-right &-arrow::before,&-placement-rightTop &-arrow::before,&-placement-rightBottom &-arrow::before{content:'';border-right-color:", ";}&-placement-left &-arrow,&-placement-leftTop &-arrow,&-placement-leftBottom &-arrow{border-left-color:", ";}&-placement-left &-arrow::before,&-placement-leftTop &-arrow::before,&-placement-leftBottom &-arrow::before{content:'';border-left-color:", ";}&-placement-bottom &-arrow,&-placement-bottomLeft &-arrow,&-placement-bottomRight &-arrow{border-bottom-color:", ";}&-placement-bottom &-arrow::before,&-placement-bottomLeft &-arrow::before,&-placement-bottomRight &-arrow::before{content:'';border-bottom-color:", ";}}&_black{&-inner{color:", ";background-color:", ";border:1px solid ", ";}&-placement-top &-arrow,&-placement-topLeft &-arrow,&-placement-topRight &-arrow{border-top-color:", ";}&-placement-top &-arrow::before,&-placement-topLeft &-arrow::before,&-placement-topRight &-arrow::before{border-top-color:", ";}&-placement-right &-arrow,&-placement-rightTop &-arrow,&-placement-rightBottom &-arrow{border-right-color:", ";}&-placement-right &-arrow::before,&-placement-rightTop &-arrow::before,&-placement-rightBottom &-arrow::before{border-right-color:", ";}&-placement-left &-arrow,&-placement-leftTop &-arrow,&-placement-leftBottom &-arrow{border-left-color:", ";}&-placement-left &-arrow::before,&-placement-leftTop &-arrow::before,&-placement-leftBottom &-arrow::before{border-left-color:", ";}&-placement-bottom &-arrow,&-placement-bottomLeft &-arrow,&-placement-bottomRight &-arrow{border-bottom-color:", ";}&-placement-bottom &-arrow::before,&-placement-bottomLeft &-arrow::before,&-placement-bottomRight &-arrow::before{border-bottom-color:", ";}}}"], prefixCls, theme(function (t) {
-  return t.font_family.sans;
-}), theme(function (t) {
-  return t.font_size.sm;
-}), theme(function (t) {
-  return t.font_weight.regular;
-}), theme(function (t) {
-  return t.line_height.snug;
-}), theme(function (t) {
-  return t.spacing['02'];
-}), theme(function (t) {
-  return t.shadow.medium;
-}), theme(function (t) {
-  return t.font_size.sm;
-}), theme(function (t) {
-  return t.color.tooltip_text_white;
-}), theme(function (t) {
-  return t.color.tooltip_bg_white;
-}), theme(function (t) {
-  return t.color.tooltip_border_white;
-}), theme(function (t) {
-  return t.color.tooltip_border_white;
-}), theme(function (t) {
-  return t.color.tooltip_bg_white;
-}), theme(function (t) {
-  return t.color.tooltip_border_white;
-}), theme(function (t) {
-  return t.color.tooltip_bg_white;
-}), theme(function (t) {
-  return t.color.tooltip_border_white;
-}), theme(function (t) {
-  return t.color.tooltip_bg_white;
-}), theme(function (t) {
-  return t.color.tooltip_border_white;
-}), theme(function (t) {
-  return t.color.tooltip_bg_white;
-}), theme(function (t) {
-  return t.color.tooltip_text_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}), theme(function (t) {
-  return t.color.tooltip_bg_black;
-}));
 
 /***/ }),
 
@@ -57808,6 +58055,9 @@ var StyledList = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_
   var scrollbars = _ref2.theme.scrollbars;
   return scrollbars.thin;
 });
+var defaultValueGetter = function defaultValueGetter(item) {
+  return item && item.value;
+};
 var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
   var listComponent;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(undefined),
@@ -57818,15 +58068,20 @@ var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     queueScrollToIdx = _useState4[0],
     setQueueScrollToIdx = _useState4[1];
-  var maxHeight = props.maxHeight,
+  var _props$maxHeight = props.maxHeight,
+    maxHeight = _props$maxHeight === void 0 ? 200 : _props$maxHeight,
+    _props$minimumBatchSi = props.minimumBatchSize,
+    minimumBatchSize = _props$minimumBatchSi === void 0 ? 100 : _props$minimumBatchSi,
     children = props.children,
     optionHeight = props.optionHeight,
     options = props.options,
     selectedValue = props.selectedValue,
     defaultValue = props.defaultValue,
-    valueGetter = props.valueGetter,
+    _props$valueGetter = props.valueGetter,
+    valueGetter = _props$valueGetter === void 0 ? defaultValueGetter : _props$valueGetter,
     formatOptionLabel = props.formatOptionLabel,
-    Option = props.Option;
+    Option = props.Option,
+    threshold = props.threshold;
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     // only scroll to index when we have something in the queue of focused
     // and not visible
@@ -57838,7 +58093,8 @@ var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
   var onOptionFocused = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3) {
     var index = _ref3.index,
       isVisible = _ref3.isVisible;
-    // enqueue the changes to the task queue so we do not interrupt rendering
+    // enqueue the changes to the task queue so we do not interrupt
+    // rendering
     setTimeout(function () {
       if (index !== undefined && focusedItemIndex !== index && isVisible) setFocusedItemIndex(index);else if (index !== undefined && !isVisible && !queueScrollToIdx) setQueueScrollToIdx(index);
     }, 100);
@@ -57878,16 +58134,17 @@ var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
       stopIndex = _ref5.stopIndex;
     for (var i = startIndex; i <= stopIndex; i++) list.push(children[i]);
   }, 100);
+  var rowCount = (children === null || children === void 0 ? void 0 : children.length) || 0;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.AutoSizer, {
     disableHeight: true
   }, function (_ref6) {
     var width = _ref6.width;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.InfiniteLoader, {
       isRowLoaded: isRowLoaded,
-      threshold: props.threshold,
+      threshold: threshold,
       loadMoreRows: loadMoreRows,
-      rowCount: props.children.length || 0,
-      minimumBatchSize: props.minimumBatchSize
+      rowCount: rowCount,
+      minimumBatchSize: minimumBatchSize
     }, function (_ref7) {
       var onRowsRendered = _ref7.onRowsRendered,
         registerChild = _ref7.registerChild;
@@ -57902,8 +58159,8 @@ var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
         onRowsRendered: onRowsRendered,
         height: height,
         scrollToIndex: scrollToIndex,
-        rowCount: props.children.length,
-        rowHeight: props.optionHeight,
+        rowCount: rowCount,
+        rowHeight: optionHeight,
         rowRenderer: rowRenderer,
         width: width
       });
@@ -57922,13 +58179,6 @@ ListVirtualized.propTypes = {
   options: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().array).isRequired,
   minimumBatchSize: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
 };
-ListVirtualized.defaultProps = {
-  valueGetter: function valueGetter(item) {
-    return item && item.value;
-  },
-  maxHeight: 200,
-  minimumBatchSize: 100
-};
 var VirtualizedListRowRenderer = function VirtualizedListRowRenderer(_ref8) {
   var children = _ref8.children,
     onOptionFocused = _ref8.onOptionFocused,
@@ -57948,12 +58198,14 @@ var VirtualizedListRowRenderer = function VirtualizedListRowRenderer(_ref8) {
     var className = thisProps.cx({
       'virtualized-item': true
     });
-    if (thisProps.isFocused && !isScrolling) onOptionFocused({
-      data: thisProps.data,
-      index: index,
-      isVisible: isVisible,
-      isScrolling: isScrolling
-    });
+    if (thisProps.isFocused && !isScrolling) {
+      onOptionFocused({
+        data: thisProps.data,
+        index: index,
+        isVisible: isVisible,
+        isScrolling: isScrolling
+      });
+    }
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
       className: className,
       key: key,
@@ -144560,7 +144812,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Drawer: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Drawer),
 /* harmony export */   Icon: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Icon),
 /* harmony export */   IconButton: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.IconButton),
-/* harmony export */   InfoChip: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.InfoChip),
 /* harmony export */   Input: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Input),
 /* harmony export */   Layout: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Layout),
 /* harmony export */   Link: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Link),