@luminati-io/uikit 6.3.12 → 6.3.13

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", "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,100 @@ __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,
     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
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.classNames)(classNamePrefix, {
+      '-content': true
+    })
   }, 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 +39980,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),
@@ -41698,8 +41730,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 +41756,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 +41797,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 +41830,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 +42187,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 +42224,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 +42277,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 +42308,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 +43575,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 +43780,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 +47721,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 +47762,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 +48104,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)));
 };
@@ -48288,20 +48321,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",
@@ -49946,13 +49977,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 +49994,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 +50106,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
   });
 };
 
@@ -55354,6 +55423,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 +55438,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 +55464,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 +55515,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":
@@ -57808,6 +57918,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 +57931,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 +57956,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 +57997,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 +58022,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 +58042,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 +58061,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,