@luminati-io/uikit 6.3.4 → 6.3.6

package/dist/umd/uikit.development.js

@@ -36408,8 +36408,8 @@ __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 _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/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 _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
 /* harmony import */ var _breadcrumbs_item__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./breadcrumbs_item */ "./src/breadcrumbs/breadcrumbs_item.js");
 /* harmony import */ var _collapsed_items__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./collapsed_items */ "./src/breadcrumbs/collapsed_items.js");
 // LICENSE_CODE ZON
@@ -36503,7 +36503,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
     setHiddenItems([]);
     setRecalculationRender(true);
   }, [items]);
-  (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useResize)(runRecalculate);
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useResize)(runRecalculate);
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(function () {
     var _document$fonts;
     runRecalculate();
@@ -36551,11 +36551,11 @@ var Breadcrumbs = function Breadcrumbs(props) {
     });
   });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(BreadcrumbsContainer, _extends({
+    ref: containerRef
+  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest), {
     "data-testid": "breadcrumbs",
     "aria-label": "breadcrumbs",
-    "data-role": "breadcrumbs"
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest), {
-    ref: containerRef,
+    "data-role": "breadcrumbs",
     tabIndex: 1,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown
@@ -39260,7 +39260,9 @@ var CodeBlock = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'black' : _props$variant,
     loading = props.loading,
-    wrap = props.wrap;
+    wrap = props.wrap,
+    _props$copyButtonPlac = props.copyButtonPlacement,
+    copyButtonPlacement = _props$copyButtonPlac === void 0 ? 'top' : _props$copyButtonPlac;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CodeBlockWrapper, _extends({
     ref: ref,
     "data-testid": "code_block"
@@ -39285,6 +39287,7 @@ var CodeBlock = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
     copyButtonClassName: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(classNamePrefix, {
       copyButton: true
     }),
+    copyButtonPlacement: copyButtonPlacement,
     onCopy: onCopy,
     loading: loading,
     wrap: wrap
@@ -39303,7 +39306,8 @@ CodeBlock.propTypes = {
   copyButton: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   loading: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   onCopy: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  wrap: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  wrap: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  copyButtonPlacement: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['top', 'bottom'])
 };
 var CodeBlockWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "CodeBlockWrapper",
@@ -39378,6 +39382,7 @@ var CodeSnippet = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'black' : _ref$variant,
     copyButtonClassName = _ref.copyButtonClassName,
+    copyButtonPlacement = _ref.copyButtonPlacement,
     maxHeight = _ref.maxHeight,
     wrap = _ref.wrap;
   var codeRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
@@ -39388,6 +39393,7 @@ var CodeSnippet = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
       maxHeight: maxHeight
     } : undefined
   }, !loading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, !!copyButton && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_copy_button__WEBPACK_IMPORTED_MODULE_5__.CopyButton, {
+    placement: copyButtonPlacement,
     className: copyButtonClassName,
     code: code,
     variant: variant,
@@ -39414,6 +39420,7 @@ CodeSnippet.propTypes = {
   lineNumbers: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
   copyButton: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
   copyButtonClassName: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
+  copyButtonPlacement: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['top', 'bottom']),
   loading: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),
   onCopy: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func),
   wrap: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool)
@@ -39490,7 +39497,8 @@ var CopyButton = function CopyButton(_ref) {
     code = _ref.code,
     variant = _ref.variant,
     codeRef = _ref.codeRef,
-    onCopy = _ref.onCopy;
+    onCopy = _ref.onCopy,
+    placement = _ref.placement;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(STATE.READY),
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
@@ -39522,7 +39530,8 @@ var CopyButton = function CopyButton(_ref) {
     className: className,
     type: "button",
     onClick: handleClick,
-    $variant: variant
+    $variant: variant,
+    $placement: placement
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
     viewBox: icon.viewBox
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
@@ -39532,12 +39541,13 @@ var CopyButton = function CopyButton(_ref) {
 var StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_1___default().button.withConfig({
   displayName: "StyledButton",
   componentId: "sc-kvxvoe-0"
-})(["position:absolute;inset-inline-end:", ";top:", ";z-index:1;display:flex;padding:8px;align-items:flex-start;border:0 none;border-radius:32px;background:", ";svg{width:16px;height:16px;color:", ";}&:hover,&:active{background:", ";}"], function (_ref2) {
+})(["position:absolute;inset-inline-end:", ";", ";z-index:1;display:flex;padding:8px;align-items:flex-start;border:0 none;border-radius:32px;background:", ";svg{width:16px;height:16px;color:", ";}&:hover,&:active{background:", ";}"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacing['05'];
 }, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.spacing['05'];
+  var theme = _ref3.theme,
+    $placement = _ref3.$placement;
+  return $placement == 'bottom' ? (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["bottom:", ""], theme.spacing['02']) : (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["top:", ""], theme.spacing['05']);
 }, function (_ref4) {
   var $variant = _ref4.$variant,
     color = _ref4.theme.color;
@@ -45875,7 +45885,7 @@ __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", "name", "value", "leftInnerContent", "leftOuterContent", "rightInnerContent", "rightOuterContent", "heightCalculationCallback", "Field", "fieldRef", "onChange", "onFocus", "onBlur", "onKeyDown", "placeholder", "disabled", "invalid", "autoFocus", "helperText", "label", "labelIcon", "labelTooltip", "required", "necessityIndicator", "autoresize", "verticalAlign", "innerWrapper"];
+var _excluded = ["id", "name", "value", "leftInnerContent", "leftOuterContent", "rightInnerContent", "rightOuterContent", "heightCalculationCallback", "Field", "fieldRef", "onChange", "onFocus", "onBlur", "onKeyDown", "placeholder", "disabled", "invalid", "autoFocus", "helperText", "label", "labelIcon", "labelTooltip", "required", "necessityIndicator", "autoresize", "verticalAlign", "innerWrapper", "classNamePrefix", "className"];
 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); }
@@ -45928,6 +45938,8 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     autoresize = props.autoresize,
     verticalAlign = props.verticalAlign,
     innerWrapper = props.innerWrapper,
+    classNamePrefix = props.classNamePrefix,
+    className = props.className,
     rest = _objectWithoutProperties(props, _excluded);
   var field = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
   var setFieldRefs = (0,_util__WEBPACK_IMPORTED_MODULE_9__.useSetRefsCallback)([fieldRef, field]);
@@ -45969,6 +45981,9 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, _extends({
     ref: ref
   }, (0,_util__WEBPACK_IMPORTED_MODULE_9__.getCommonProps)(rest), {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.classNames)(classNamePrefix, {
+      container: true
+    }, className),
     flex_direction: "column",
     gap: "4px"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(InputLabel, {
@@ -45977,10 +45992,15 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     labelIcon: labelIcon,
     labelTooltip: labelTooltip,
     required: required,
-    necessityIndicator: necessityIndicator
+    necessityIndicator: necessityIndicator,
+    classNamePrefix: classNamePrefix
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(InputContentWrapper, {
     $heightCalculationCallback: heightCalculationCallback
-  }, leftOuterContent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(LeftOuterContentWrapper, null, leftOuterContent), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(InputWrapper, {
+  }, leftOuterContent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(LeftOuterContentWrapper, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.classNames)(classNamePrefix, {
+      leftOuterContent: true
+    })
+  }, leftOuterContent), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(InputWrapper, {
     ref: innerWrapper,
     $active: active,
     $disabled: disabled,
@@ -46004,7 +46024,12 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     value: value,
     placeholder: placeholder,
     "aria-labelledby": label ? labelId : undefined
-  })), rightInnerContent), rightOuterContent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RightOuterContentWrapper, null, rightOuterContent)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(HelperText, {
+  })), rightInnerContent), rightOuterContent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RightOuterContentWrapper, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.classNames)(classNamePrefix, {
+      rightOuterContent: true
+    })
+  }, rightOuterContent)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(HelperText, {
+    classNamePrefix: classNamePrefix,
     invalid: invalid
   }, helperText));
 });
@@ -46147,11 +46172,65 @@ var Asterisk = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typogra
 var LeftOuterContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "LeftOuterContentWrapper",
   componentId: "sc-r60v1b-4"
-})(["border-top-left-radius:4px;border-bottom-left-radius:4px;height:100%;"]);
+})(["display:flex;align-items:center;justify-content:center;background-color:", ";height:100%;box-sizing:border-box;border-top:1px solid ", ";border-bottom:1px solid ", ";border-left:1px solid ", ";padding:0 ", ";border-top-left-radius:4px;border-bottom-left-radius:4px;font-family:", ";font-size:", ";font-weight:", ";line-height:normal;color:", ";"], function (_ref12) {
+  var color = _ref12.theme.color;
+  return color.bg_fill;
+}, function (_ref13) {
+  var color = _ref13.theme.color;
+  return color.border;
+}, function (_ref14) {
+  var color = _ref14.theme.color;
+  return color.border;
+}, function (_ref15) {
+  var color = _ref15.theme.color;
+  return color.border;
+}, function (_ref16) {
+  var spacing = _ref16.theme.spacing;
+  return spacing['04'];
+}, function (_ref17) {
+  var font_family = _ref17.theme.font_family;
+  return font_family.sans;
+}, function (_ref18) {
+  var font_size = _ref18.theme.font_size;
+  return font_size.sm;
+}, function (_ref19) {
+  var font_weight = _ref19.theme.font_weight;
+  return font_weight.regular;
+}, function (_ref20) {
+  var color = _ref20.theme.color;
+  return color.text_quaternary;
+});
 var RightOuterContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "RightOuterContentWrapper",
   componentId: "sc-r60v1b-5"
-})(["border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;"]);
+})(["display:flex;align-items:center;justify-content:center;background-color:", ";height:100%;box-sizing:border-box;border-top:1px solid ", ";border-right:1px solid ", ";border-bottom:1px solid ", ";padding:0 ", ";border-top-right-radius:4px;border-bottom-right-radius:4px;font-family:", ";font-size:", ";font-weight:", ";line-height:normal;color:", ";"], function (_ref21) {
+  var color = _ref21.theme.color;
+  return color.bg_fill;
+}, function (_ref22) {
+  var color = _ref22.theme.color;
+  return color.border;
+}, function (_ref23) {
+  var color = _ref23.theme.color;
+  return color.border;
+}, function (_ref24) {
+  var color = _ref24.theme.color;
+  return color.border;
+}, function (_ref25) {
+  var spacing = _ref25.theme.spacing;
+  return spacing['04'];
+}, function (_ref26) {
+  var font_family = _ref26.theme.font_family;
+  return font_family.sans;
+}, function (_ref27) {
+  var font_size = _ref27.theme.font_size;
+  return font_size.sm;
+}, function (_ref28) {
+  var font_weight = _ref28.theme.font_weight;
+  return font_weight.regular;
+}, function (_ref29) {
+  var color = _ref29.theme.color;
+  return color.text_quaternary;
+});
 var InputContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).withConfig({
   displayName: "InputContentWrapper",
   componentId: "sc-r60v1b-6"
@@ -46161,11 +46240,11 @@ var InputContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default
 var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "InputWrapper",
   componentId: "sc-r60v1b-7"
-})(["position:relative;width:100%;border:1px solid;border-radius:4px;box-sizing:border-box;font-family:", ";padding:", "px ", "px;overflow:auto;display:flex;gap:8px;align-items:", ";border-left-width:1px;border-right-width:1px;border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";", " ", " box-shadow:", ";"], function (_ref12) {
-  var font_family = _ref12.theme.font_family;
+})(["position:relative;width:100%;border:1px solid;border-radius:4px;box-sizing:border-box;font-family:", ";padding:", "px ", "px;overflow:auto;display:flex;gap:8px;align-items:", ";border-left-width:1px;border-right-width:1px;border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";", " ", " box-shadow:", ";"], function (_ref30) {
+  var font_family = _ref30.theme.font_family;
   return font_family.sans;
-}, _constants__WEBPACK_IMPORTED_MODULE_11__.INPUT_VERTICAL_PADDING, _constants__WEBPACK_IMPORTED_MODULE_11__.INPUT_HORIZONTAL_PADDING, function (_ref13) {
-  var $verticalAlign = _ref13.$verticalAlign;
+}, _constants__WEBPACK_IMPORTED_MODULE_11__.INPUT_VERTICAL_PADDING, _constants__WEBPACK_IMPORTED_MODULE_11__.INPUT_HORIZONTAL_PADDING, function (_ref31) {
+  var $verticalAlign = _ref31.$verticalAlign;
   return $verticalAlign !== null && $verticalAlign !== void 0 ? $verticalAlign : 'normal';
 }, function (props) {
   return props.$leftOuterContent ? '0' : '4px';
@@ -46178,26 +46257,31 @@ var InputWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.
 }, function (props) {
   var _props$$heightCalcula;
   return (_props$$heightCalcula = props.$heightCalculationCallback) === null || _props$$heightCalcula === void 0 ? void 0 : _props$$heightCalcula.call(props);
-}, function (_ref14) {
-  var $disabled = _ref14.$disabled,
-    $invalid = _ref14.$invalid,
-    $active = _ref14.$active,
-    color = _ref14.theme.color;
+}, function (_ref32) {
+  var $disabled = _ref32.$disabled,
+    $invalid = _ref32.$invalid,
+    $active = _ref32.$active,
+    color = _ref32.theme.color;
   if ($disabled) {
     return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:default;background-color:", ";border-color:", ";color:", ";"], color.bg_fill_teritary, color.border_disabled, color.text_disabled);
   }
   return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["cursor:text;background-color:", ";color:", ";border-color:", ";&:hover{border-color:", ";}"], color.bg, color.text_tertiary, $invalid ? color.border_error : $active ? color.border_primary : color.border, color.border_accent);
-}, function (_ref15) {
-  var $active = _ref15.$active,
-    shadow = _ref15.theme.shadow;
+}, function (_ref33) {
+  var $active = _ref33.$active,
+    shadow = _ref33.theme.shadow;
   return $active ? shadow.primary : null;
 });
-var HelperText = function HelperText(props) {
-  var children = props.children,
-    invalid = props.invalid;
+var HelperText = function HelperText(_ref34) {
+  var classNamePrefix = _ref34.classNamePrefix,
+    children = _ref34.children,
+    invalid = _ref34.invalid;
   if (!children) return null;
   var color = invalid ? 'text_error' : 'text_quaternary';
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_8__.Label, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.classNames)(classNamePrefix, {
+      helperText: true,
+      'helperText--invalid': invalid
+    }),
     "data-role": "description",
     variant: "xs",
     color: color
@@ -46434,6 +46518,8 @@ var Textbox = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardR
   }));
 });
 Textbox.propTypes = {
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   value: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   onChange: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
@@ -46990,8 +47076,8 @@ __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 _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/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 _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
 // LICENSE_CODE ZON
 
@@ -47021,7 +47107,7 @@ var Toggle = function Toggle(_ref) {
     var checked = evt.target.checked;
     onChange === null || onChange === void 0 || onChange(checked, evt);
   }, [onChange]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ToggleLabel, _extends({}, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest), {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ToggleLabel, _extends({}, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest), {
     $size: size
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ToggleInput, {
     id: id,
@@ -47030,7 +47116,7 @@ var Toggle = function Toggle(_ref) {
     checked: value,
     onChange: handleChange,
     disabled: disabled
-  }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
+  }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     variant: "sm",
     tag: "span",
     color: disabled ? 'text_disabled' : 'text',
@@ -47053,7 +47139,7 @@ var ToggleInput = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input
 }).withConfig({
   displayName: "ToggleInput",
   componentId: "sc-14lfe6n-1"
-})(["&&{box-sizing:border-box;width:", ";height:", ";display:flex;align-items:center;margin:0;padding:0 2px;vertical-align:top;background-color:", ";border-radius:25px;outline:none;cursor:pointer;appearance:none;transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);&:hover:not(:disabled){background-color:", ";}&:focus{background-color:", ";outline:3px solid ", ";}&:checked{background-color:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:3px solid ", ";}}}&::after{content:\"\";display:block;width:", ";height:", ";border-radius:50%;background-color:", ";box-shadow:0 2px 2px rgba(0,0,0,0.1);transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);}&:checked::after{transform:translateX(", ");}"], function (_ref2) {
+})(["&&{box-sizing:border-box;width:", ";height:", ";display:flex;align-items:center;margin:0;padding:0 2px;vertical-align:top;background-color:", ";border-radius:25px;outline:none;cursor:pointer;appearance:none;transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);&:hover:not(:disabled){background-color:", ";}&:focus{background-color:", ";outline:3px solid ", ";}&:checked{background-color:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:3px solid ", ";}}}&::after{content:'';display:block;width:", ";height:", ";border-radius:50%;background-color:", ";box-shadow:0 2px 2px rgba(0,0,0,0.1);transition:all 0.3s cubic-bezier(0.2,0.85,0.32,1.2);}&:checked::after{transform:translateX( ", " );}"], function (_ref2) {
   var $size = _ref2.$size;
   return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.toPixel)($size == 'xs' ? 32 : 44);
 }, function (_ref3) {
@@ -47645,7 +47731,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-// import pickAttrs from 'rc-util/lib/pickAttrs';
 
 
 
@@ -48994,11 +49079,6 @@ var DialogFooter = function DialogFooter(_ref3) {
     "data-testid": "modal_footer_ok_button"
   })));
 };
-
-// victorf: FIX backdrop vertical alignment with
-// top: 0;
-// transform: translate(0, ${$show=>$show ? '0': 'calc(50vh - 50%)'});
-
 var FooterHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_7__.Flex).attrs({
   gap: '04',
   align_items: 'center',
@@ -49662,9 +49742,9 @@ __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 _layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/index.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 _layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 /* harmony import */ var _progress_bar__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./progress_bar */ "./src/progress/progress_bar.js");
 // LICENSE_CODE ZON
 
@@ -49689,15 +49769,15 @@ var Progress = function Progress(_ref) {
   if (!hasText) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_progress_bar__WEBPACK_IMPORTED_MODULE_5__.ProgressBar, _extends({}, rest, {
     progress: progress
   }));
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_2__.Flex, _extends({}, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest), {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex, _extends({}, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_2__["default"])(rest), {
     flex_direction: "column",
     gap: "03"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_2__.Flex, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex, {
     align_items: "flex-end",
     justify_content: "space-between"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     color: "text"
-  }, leftText), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
+  }, leftText), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     color: "text"
   }, rightText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_progress_bar__WEBPACK_IMPORTED_MODULE_5__.ProgressBar, {
     progress: progress
@@ -49730,7 +49810,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "prop-types");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/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");
 // LICENSE_CODE ZON
 
 
@@ -49748,7 +49828,7 @@ var ProgressBar = function ProgressBar(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var percentage = lodash_clamp__WEBPACK_IMPORTED_MODULE_0___default()(progress, 0, 100);
   var percentageFmt = percentage.toFixed(2);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ProgressBarWrapper, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ProgressBarFill, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ProgressBarWrapper, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_4__["default"])(rest), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ProgressBarFill, {
     $width: percentageFmt
   }));
 };
@@ -49811,8 +49891,8 @@ __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 _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/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 _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");
 // LICENSE_CODE ZON
 
@@ -49836,18 +49916,18 @@ var Snackbar = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forward
     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_3__.Paragraph, {
+  var content = typeof children == 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Paragraph, {
     variant: "lg_snug",
     color: "text"
   }, children) : children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Wrapper, _extends({
     ref: ref,
     $type: type
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest)), !!showIcon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_snackbar_icon__WEBPACK_IMPORTED_MODULE_5__.SnackbarIcon, {
+  }, (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_3__.Label, {
+  }, !!header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     variant: "lg",
     color: "text"
   }, header), content));
@@ -50054,7 +50134,7 @@ __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 _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/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");
 // LICENSE_CODE ZON
 
 
@@ -50106,7 +50186,7 @@ var Group = function Group(_ref) {
     $variant: variant,
     "aria-orientation": variant == 'vertical' ? 'vertical' : 'horizontal',
     onKeyDown: handleKeyDown
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_3__.getCommonProps)(rest)), react__WEBPACK_IMPORTED_MODULE_1__.Children.map(children, function (child) {
+  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest)), react__WEBPACK_IMPORTED_MODULE_1__.Children.map(children, function (child) {
     return /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(child, {
       variant: variant
     });
@@ -50184,8 +50264,8 @@ __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 _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/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 _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 // LICENSE_CODE ZON
 
 
@@ -50210,17 +50290,17 @@ var Tab = function Tab(_ref) {
     rightContent = _ref.rightContent,
     rest = _objectWithoutProperties(_ref, _excluded);
   var Wrap = variant == 'vertical' ? Left : react__WEBPACK_IMPORTED_MODULE_1__.Fragment;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(TabContainer, _extends({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(TabContainer, _extends({}, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_3__["default"])(rest), {
+    $variant: variant,
     role: "tab",
     className: className,
-    $variant: variant,
     "aria-selected": !!selected,
     tabIndex: selected ? 0 : -1,
     "aria-disabled": disabled ? 'true' : undefined,
     disabled: !!disabled
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Wrap, null, leftContent, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Text, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Wrap, null, leftContent, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Text, {
     $variant: variant,
-    $selected: selected
+    $disabled: disabled
   }, text)), rightContent);
 };
 Tab.propTypes = {
@@ -50234,32 +50314,32 @@ Tab.propTypes = {
 var TabContainer = styled_components__WEBPACK_IMPORTED_MODULE_2___default().button.withConfig({
   displayName: "TabContainer",
   componentId: "sc-dgfrlb-0"
-})(["display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border:0 none;background:transparent;cursor:pointer;&[aria-disabled=true]{cursor:not-allowed;}", ""], function (_ref2) {
+})(["display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border:0 none;background:transparent;cursor:pointer;&[aria-disabled='true']{cursor:not-allowed;}", ""], function (_ref2) {
   var $variant = _ref2.$variant,
     _ref2$theme = _ref2.theme,
     color = _ref2$theme.color,
     shadow = _ref2$theme.shadow;
   if ($variant == 'underline') {
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:24px;padding:0 16px;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;&[aria-selected=true]{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&[aria-disabled=true]{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], color.text_tertiary, color.border_secondary, color.text_primary, color.border_primary, color.text_tertiary, color.border, color.text_disabled, color.border_disabled);
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:24px;padding:0 16px;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;&[aria-selected='true']{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&[aria-disabled='true']{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], color.text_tertiary, color.border_secondary, color.text_primary, color.border_primary, color.text_tertiary, color.border, color.text_disabled, color.border_disabled);
   }
   if ($variant == 'contain') {
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:32px;padding:0px 8px;justify-content:center;gap:6px;border-radius:4px;color:", ";&[aria-selected=true]{color:", ";background:", ";border:1px solid ", ";box-shadow:", ";}&:hover{color:", ";background:", ";}&[aria-disabled=true]{color:", ";background:", ";border:0 none;box-shadow:none;}"], color.text_tertiary, color.text_primary, color.bg, color.border, shadow.meduim, color.text_tertiary, color.bg_fill_primary_secondary, color.text_disabled, color.bg_fill_teritary);
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:32px;padding:0px 8px;justify-content:center;gap:6px;border-radius:4px;color:", ";&[aria-selected='true']{color:", ";background:", ";border:1px solid ", ";box-shadow:", ";}&:hover{color:", ";background:", ";}&[aria-disabled='true']{color:", ";background:", ";border:0 none;box-shadow:none;}"], color.text_tertiary, color.text_primary, color.bg, color.border, shadow.meduim, color.text_tertiary, color.bg_fill_primary_secondary, color.text_disabled, color.bg_fill_teritary);
   }
   if ($variant == 'vertical') {
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:200px;height:40px;padding:0 12px;justify-content:space-between;gap:4px;border-radius:0 4px 4px 0;border-left:1px solid transparent;color:", ";&[aria-selected=true]{color:", ";background:", ";border-left-color:", ";}&:hover{color:", ";border-left-color:", ";}&[aria-disabled=true]{color:", ";background:0 none;border-left-color:transparent;}"], color.text, color.text, color.bg_fill_primary_secondary, color.bg_fill_primary_secondary, color.text, color.border, color.text_disabled);
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:200px;height:40px;padding:0 12px;justify-content:space-between;gap:4px;border-radius:0 4px 4px 0;border-left:1px solid transparent;color:", ";&[aria-selected='true']{color:", ";background:", ";border-left-color:", ";}&:hover{color:", ";border-left-color:", ";}&[aria-disabled='true']{color:", ";background:0 none;border-left-color:transparent;}"], color.text, color.text, color.bg_fill_primary_secondary, color.bg_fill_primary_secondary, color.text, color.border, color.text_disabled);
   }
   // main
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:36px;padding:0;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;&[aria-selected=true]{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&[aria-disabled=true]{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], color.text, color.border_teritary, color.text_primary, color.border_primary, color.text, color.border, color.text_disabled, color.border_disabled);
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:36px;padding:0;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;&[aria-selected='true']{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&[aria-disabled='true']{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], color.text, color.border_teritary, color.text_primary, color.border_primary, color.text, color.border, color.text_disabled, color.border_disabled);
 });
 var Left = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Left",
   componentId: "sc-dgfrlb-1"
 })(["display:flex;align-items:center;gap:8px;flex:1 0 0;min-width:0;"]);
-var Text = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography__WEBPACK_IMPORTED_MODULE_3__.Label).attrs(function (props) {
+var Text = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography__WEBPACK_IMPORTED_MODULE_4__.Label).attrs(function (props) {
   var v = {
     main: 'lg',
     underline: 'xs',
-    contain: 'base',
+    contain: 'lg',
     vertical: 'sm'
   };
   return {
@@ -50271,9 +50351,9 @@ var Text = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography_
   componentId: "sc-dgfrlb-2"
 })(["min-width:0;overflow-x:clip;text-overflow:ellipsis;", ""], function (_ref3) {
   var $variant = _ref3.$variant,
-    $selected = _ref3.$selected,
+    $disabled = _ref3.$disabled,
     font_weight = _ref3.theme.font_weight;
-  if ($variant == 'contain' && $selected) return "font-weight: ".concat(font_weight.semibold, ";");
+  if ($variant == 'contain' && $disabled) return "font-weight: ".concat(font_weight.regular, ";");
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Tab);
 
@@ -50393,7 +50473,7 @@ var theme = function theme(cb) {
     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,.", "-tab-btn:hover{background:", ";border:1px solid ", ";box-shadow:", ";font-weight:", ";}}&-disabled{.", "-tab-btn,.", "-tab-btn:hover{color:", ";background:", ";}}}}&-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) {
+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;
@@ -50444,25 +50524,27 @@ var TabsStyle = (0,styled_components__WEBPACK_IMPORTED_MODULE_4__.createGlobalSt
 }), prefixCls, prefixCls, theme(function (t) {
   return t.color.text_tertiary;
 }), theme(function (t) {
-  return t.font_size.xs;
+  return t.font_size.md;
 }), theme(function (t) {
-  return t.font_weight.regular;
+  return t.font_weight.semibold;
 }), theme(function (t) {
   return t.color.text_tertiary;
 }), theme(function (t) {
   return t.color.bg_fill_primary_secondary;
-}), prefixCls, prefixCls, theme(function (t) {
+}), 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.font_weight.semibold;
+  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) {
@@ -54687,27 +54769,32 @@ var StyledGroup = styled_components__WEBPACK_IMPORTED_MODULE_1___default().ul.wi
 
 /***/ }),
 
-/***/ "./src/themes/index.js":
-/*!*****************************!*\
-  !*** ./src/themes/index.js ***!
-  \*****************************/
+/***/ "./src/themes/constant.js":
+/*!********************************!*\
+  !*** ./src/themes/constant.js ***!
+  \********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ThemeProvider: () => (/* binding */ ThemeProvider),
+/* harmony export */   chartPalette: () => (/* binding */ chartPalette),
 /* harmony export */   color: () => (/* binding */ color),
-/* harmony export */   darkTheme: () => (/* binding */ darkTheme),
-/* harmony export */   lightTheme: () => (/* binding */ lightTheme),
-/* harmony export */   useTheme: () => (/* reexport safe */ styled_components__WEBPACK_IMPORTED_MODULE_2__.useTheme)
+/* harmony export */   componentDark: () => (/* binding */ componentDark),
+/* harmony export */   componentLight: () => (/* binding */ componentLight),
+/* harmony export */   fontFamily: () => (/* binding */ fontFamily),
+/* harmony export */   fontSize: () => (/* binding */ fontSize),
+/* harmony export */   fontWeight: () => (/* binding */ fontWeight),
+/* harmony export */   letterSpacing: () => (/* binding */ letterSpacing),
+/* harmony export */   lineHeight: () => (/* binding */ lineHeight),
+/* harmony export */   scrollbars: () => (/* binding */ scrollbars),
+/* harmony export */   semanticDark: () => (/* binding */ semanticDark),
+/* harmony export */   semanticLight: () => (/* binding */ semanticLight),
+/* harmony export */   shadow: () => (/* binding */ shadow),
+/* harmony export */   spacing: () => (/* binding */ spacing)
 /* 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 styled_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_0__);
 // LICENSE_CODE ZON
 
 
@@ -54719,70 +54806,59 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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); }
 
-
-
 var shadow = {
   small: '0px 0px 2px rgba(0, 0, 0, 0.04), 0px 4px 24px rgba(0, 0, 0, 0.04)',
-  medium: '0px 0px 2px rgba(0, 0, 0, 0.08), 0px 8px 24px rgba(0, 0, 0, 0.08)',
+  medium: '0px 0px 2px rgba(0, 0, 0, 0.08), ' + '0px 8px 24px rgba(0, 0, 0, 0.08)',
   large: '0px 0px 2px rgba(0, 0, 0, 0.12), 0px 0px 96px rgba(0, 0, 0, 0.16)',
   primary: '0px 0px 0px 2px rgba(0, 106, 220, 0.40)',
   success: '0px 0px 0px 2px rgba(6, 122, 111, 0.40)',
   error: '0px 0px 0px 2px rgba(205, 43, 49, 0.40)'
 };
-var baseTheme = {
-  font_family: {
-    sans: "'Inter', sans-serif",
-    mono: "'Monaco', sans-serif"
-  },
-  font_size: {
-    xxs: '11px',
-    xs: '12px',
-    sm: '13px',
-    md: '14px',
-    lg: '18px',
-    xl: '28px'
-  },
-  font_weight: {
-    regular: '400',
-    medium: '500',
-    semibold: '600'
-  },
-  letter_spacing: {
-    normal: '0em',
-    wide: '0.02em'
-  },
-  line_height: {
-    none: '100%',
-    snug: '125%',
-    loose: '150%'
-  },
-  spacing: {
-    '00': '0px',
-    '01': '2px',
-    '02': '4px',
-    '03': '8px',
-    '04': '12px',
-    '05': '16px',
-    '06': '24px',
-    '07': '32px',
-    '08': '40px',
-    '09': '48px',
-    '10': '64px',
-    '11': '72px'
-  },
-  // obsolete. use shadow
-  box_shadow: {
-    sm: '0px 0px 2px rgba(0, 0, 0, 0.04),' + '0px 4px 24px rgba(0, 0, 0, 0.04)',
-    md: '0px 0px 2px rgba(0, 0, 0, 0.08),' + '0px 8px 24px rgba(0, 0, 0, 0.08)',
-    lg: '0px 0px 2px rgba(0, 0, 0, 0.12),' + '0px 0px 96px rgba(0, 0, 0, 0.16)'
-  },
-  shadow: shadow,
-  scrollbars: {
-    thin: (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["scrollbar-color:#FFFFFF #DFE3E6;scrollbar-width:thin;&::-webkit-scrollbar{width:4px;height:4px;}&::-webkit-scrollbar-track{background-color:#FFFFFF;}&::-webkit-scrollbar-thumb{background-color:#DFE3E6;border-radius:2px;}"]),
-    auto: (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["scrollbar-color:#FFFFFF #DFE3E6;scrollbar-width:auto;&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:#FFFFFF;}&::-webkit-scrollbar-thumb{background-color:#DFE3E6;border-radius:4px;}"])
-  },
-  chart_palette: ['#AA99EC', '#3DB9CF', '#E58FB1', '#EBBC00', '#94BA2C', '#D09E72', '#0091FF', '#E5484D', '#12A594', '#FFB224']
-};
+var spacing = {
+  '00': '0px',
+  '01': '2px',
+  '02': '4px',
+  '03': '8px',
+  '04': '12px',
+  '05': '16px',
+  '06': '24px',
+  '07': '32px',
+  '08': '40px',
+  '09': '48px',
+  10: '64px',
+  11: '72px'
+};
+var fontFamily = {
+  sans: "'Inter', sans-serif",
+  mono: "'Monaco', sans-serif"
+};
+var fontSize = {
+  xxs: '11px',
+  xs: '12px',
+  sm: '13px',
+  md: '14px',
+  lg: '18px',
+  xl: '28px'
+};
+var fontWeight = {
+  regular: '400',
+  medium: '500',
+  semibold: '600'
+};
+var letterSpacing = {
+  normal: '0em',
+  wide: '0.02em'
+};
+var lineHeight = {
+  none: 'normal',
+  snug: '125%',
+  loose: '150%'
+};
+var scrollbars = {
+  thin: (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["scrollbar-color:#ffffff #dfe3e6;scrollbar-width:thin;&::-webkit-scrollbar{width:4px;height:4px;}&::-webkit-scrollbar-track{background-color:#ffffff;}&::-webkit-scrollbar-thumb{background-color:#dfe3e6;border-radius:2px;}"]),
+  auto: (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["scrollbar-color:#ffffff #dfe3e6;scrollbar-width:auto;&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:#ffffff;}&::-webkit-scrollbar-thumb{background-color:#dfe3e6;border-radius:4px;}"])
+};
+var chartPalette = ['#AA99EC', '#3DB9CF', '#E58FB1', '#EBBC00', '#94BA2C', '#D09E72', '#0091FF', '#E5484D', '#12A594', '#FFB224'];
 var color = {
   blue_1: '#FBFDFF',
   blue_2: '#F5FAFF',
@@ -54999,9 +55075,6 @@ var componentLight = {
   popover_border: semanticLight.border_secondary,
   popover_shadow: shadow.medium
 };
-var lightTheme = _objectSpread(_objectSpread({}, baseTheme), {}, {
-  color: _objectSpread(_objectSpread(_objectSpread({}, color), semanticLight), componentLight)
-});
 var semanticDark = _objectSpread(_objectSpread({}, semanticLight), {}, {
   bg: color.gray_12,
   bg_elevated: color.gray_11_75,
@@ -55119,7 +55192,7 @@ var componentDark = _objectSpread(_objectSpread({}, componentLight), {}, {
   code_text_shadow_black: 'rgba(43, 47, 49, 0.3)',
   code_header_bg_black: color.gray_11_25,
   code_bg_white: color.black,
-  code_text_white: color.text,
+  code_text_white: semanticDark.text,
   code_text_shadow_white: 'rgba(0, 0, 0, 0.3)',
   code_header_bg_white: color.gray_11_75,
   code_bg_icon_black: color.gray_11_25,
@@ -55139,9 +55212,78 @@ var componentDark = _objectSpread(_objectSpread({}, componentLight), {}, {
   popover_border: semanticDark.border,
   popover_shadow: '0px 6px 12px -3px rgba(1, 4, 9, 0.40), ' + '0px 6px 16px 0px rgba(1, 4, 9, 0.40);'
 });
+
+/***/ }),
+
+/***/ "./src/themes/index.js":
+/*!*****************************!*\
+  !*** ./src/themes/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 */   ThemeProvider: () => (/* binding */ ThemeProvider),
+/* harmony export */   color: () => (/* reexport safe */ _constant__WEBPACK_IMPORTED_MODULE_3__.color),
+/* harmony export */   darkTheme: () => (/* binding */ darkTheme),
+/* harmony export */   lightTheme: () => (/* binding */ lightTheme),
+/* harmony export */   useTheme: () => (/* reexport safe */ styled_components__WEBPACK_IMPORTED_MODULE_2__.useTheme)
+/* 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 _constant__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constant */ "./src/themes/constant.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); }
+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); }
+
+
+
+
+var baseTheme = {
+  font_family: _constant__WEBPACK_IMPORTED_MODULE_3__.fontFamily,
+  font_size: _constant__WEBPACK_IMPORTED_MODULE_3__.fontSize,
+  font_weight: _constant__WEBPACK_IMPORTED_MODULE_3__.fontWeight,
+  letter_spacing: _constant__WEBPACK_IMPORTED_MODULE_3__.letterSpacing,
+  spacing: _constant__WEBPACK_IMPORTED_MODULE_3__.spacing,
+  shadow: _constant__WEBPACK_IMPORTED_MODULE_3__.shadow,
+  scrollbars: _constant__WEBPACK_IMPORTED_MODULE_3__.scrollbars,
+  chart_palette: _constant__WEBPACK_IMPORTED_MODULE_3__.chartPalette,
+  // new line-height has none: normal
+  line_height: {
+    none: '100%',
+    snug: _constant__WEBPACK_IMPORTED_MODULE_3__.lineHeight.snug,
+    loose: _constant__WEBPACK_IMPORTED_MODULE_3__.lineHeight.loose
+  },
+  // obsolete. use shadow
+  box_shadow: {
+    sm: _constant__WEBPACK_IMPORTED_MODULE_3__.shadow.small,
+    md: _constant__WEBPACK_IMPORTED_MODULE_3__.shadow.medium,
+    lg: _constant__WEBPACK_IMPORTED_MODULE_3__.shadow.large
+  }
+};
+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)
+});
+// addVar('--uikit-', lightTheme.color);
+
 var darkTheme = _objectSpread(_objectSpread({}, baseTheme), {}, {
-  color: _objectSpread(_objectSpread(_objectSpread({}, color), semanticDark), componentDark)
+  color: _objectSpread(_objectSpread(_objectSpread({}, _constant__WEBPACK_IMPORTED_MODULE_3__.color), _constant__WEBPACK_IMPORTED_MODULE_3__.semanticDark), _constant__WEBPACK_IMPORTED_MODULE_3__.componentDark)
 });
+// 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,
     children = _ref.children;
@@ -55151,9 +55293,40 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, children);
 };
 ThemeProvider.propTypes = {
-  theme: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['light', 'dark'])
+  theme: PT_THEME
 };
 
+// export const CSSVariables = ({theme})=>{
+//     const vars = theme == 'dark' ? darkVariables : lightVariables;
+//     return <CSSVariablesGlobalStyle $variables={vars} />;
+// };
+// CSSVariables.propTypes = {theme: PT_THEME};
+
+// const variables =
+//     buildVars('--uikit-font-family-', fontFamily) +
+//     buildVars('--uikit-font-size-', fontSize) +
+//     buildVars('--uikit-font-weight-', fontWeight) +
+//     buildVars('--uikit-letter-spacing-', letterSpacing) +
+//     buildVars('--uikit-line-height-', lineHeight) +
+//     buildVars('--uikit-spacing-', spacing) +
+//     buildVars('--uikit-shadow-', shadow) +
+//     buildVars('--uikit-', color);
+
+// const lightVariables =
+//     variables +
+//     buildVars('--uikit-', semanticLight) +
+//     buildVars('--uikit-', componentLight);
+
+// const darkVariables =
+//     variables +
+//     buildVars('--uikit-', semanticDark) +
+//     buildVars('--uikit-', componentDark);
+
+// const CSSVariablesGlobalStyle = createGlobalStyle`:root {
+// ${({$variables})=>$variables}
+// }`;
+
+
 
 /***/ }),
 
@@ -56354,7 +56527,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   getTypographyProps: () => (/* binding */ getTypographyProps)
 /* harmony export */ });
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! rc-util/lib/pickAttrs */ "./node_modules/rc-util/lib/pickAttrs.js");
 // LICENSE_CODE ZON
 
 
@@ -56394,7 +56567,7 @@ var getTypographyProps = function getTypographyProps(props) {
     no_wrap: no_wrap,
     underline: underline,
     whiteSpace: whiteSpace
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_0__.getCommonProps)(props));
+  }, (0,rc_util_lib_pickAttrs__WEBPACK_IMPORTED_MODULE_0__["default"])(props));
 };
 
 /***/ }),