@luminati-io/uikit 6.3.23 → 6.3.25

package/dist/umd/uikit.development.js

@@ -36968,20 +36968,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
-/* harmony import */ var _loading_icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./loading_icon */ "./src/button/loading_icon.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
+/* harmony import */ var _button_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./button_icon */ "./src/button/button_icon.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styled */ "./src/button/styled.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["className", "classNamePrefix", "variant", "size", "disabled", "loading", "loadingText", "icon", "iconPlacement", "text", "children"],
-  _excluded2 = ["isLeft", "isRight", "size"];
+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", "size", "disabled", "loading", "loadingText", "icon", "iconPlacement", "text", "children"];
 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 _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; }
 
@@ -37010,78 +37012,117 @@ var Button = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRe
     text = props.text,
     children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
-  var _getIconProps = (0,_utils__WEBPACK_IMPORTED_MODULE_6__.getIconProps)('Button', {
-      size: size,
-      icon: icon,
-      iconPlacement: iconPlacement
-    }),
-    isLeft = _getIconProps.isLeft,
-    isRight = _getIconProps.isRight,
-    iconSize = _getIconProps.size,
-    iconProps = _objectWithoutProperties(_getIconProps, _excluded2);
-  var iconContent = !loading && (isLeft || isRight) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, _extends({
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.cn)(classNamePrefix, {
-      '-icon': true,
-      '-icon-left': isLeft,
-      '-icon-right': isRight
-    }),
-    size: iconSize
-  }, iconProps));
   var buttonText = loading ? loadingText : text || children;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledButton, _extends({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_7__.StyledButton, _extends({
     ref: ref
   }, rest, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.cn)(null, null, className, classNamePrefix),
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty(_defineProperty({}, "-".concat(variant), true), '-disabled', disabled), className, classNamePrefix),
     disabled: loading || disabled,
     $variant: variant,
     $size: size,
-    $iconPlacement: isLeft || loading ? 'left' : isRight ? 'right' : ''
-  }), loading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_loading_icon__WEBPACK_IMPORTED_MODULE_7__.LoadingIcon, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.cn)(classNamePrefix, {
-      '-icon': true,
-      '-icon-loading': true
-    }),
-    size: iconSize
-  }), isLeft && iconContent, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.cn)(classNamePrefix, {
+    $leftIcon: loading || !!icon && iconPlacement == 'left',
+    $rightIcon: !loading && !!icon && iconPlacement == 'right',
+    $prefixCls: classNamePrefix
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_button_icon__WEBPACK_IMPORTED_MODULE_6__.ButtonIcon, {
+    classNamePrefix: classNamePrefix,
+    size: size,
+    loading: loading,
+    icon: icon,
+    iconPlacement: iconPlacement
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_2__.Label, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
       '-text': true
     }),
     variant: size == 'xs' ? 'sm' : 'lg',
-    no_wrap: true,
+    whiteSpace: "nowrap",
     "data-label": true
-  }, buttonText), isRight && iconContent);
+  }, buttonText), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_button_icon__WEBPACK_IMPORTED_MODULE_6__.ButtonIcon, {
+    classNamePrefix: classNamePrefix,
+    size: size,
+    loading: loading,
+    icon: icon,
+    iconPlacement: iconPlacement,
+    isRight: true
+  }));
 });
 Button.displayName = 'Button';
 Button.propTypes = {
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['primary', 'secondary', 'negative', 'negative_secondary', 'positive', 'white']),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['xs', 'sm', 'md', 'lg']),
-  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_6__.iconNames),
+  variant: _constants__WEBPACK_IMPORTED_MODULE_3__.PT_BUTTON_VARIANT,
+  size: _constants__WEBPACK_IMPORTED_MODULE_3__.PT_BUTTON_SIZE,
+  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_5__.iconNames), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().elementType)]),
   iconPlacement: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['left', 'right']),
   disabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   loading: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   loadingText: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)
 };
-var StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_2___default().button.withConfig({
-  displayName: "StyledButton",
-  componentId: "sc-ckjtjy-0"
-})(["display:inline-flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;&:disabled{cursor:not-allowed;}text-decoration:none;&:hover,&:visited,:focus{text-decoration:none;}", " ", " ", ""], function (props) {
-  var gap = 4;
-  var paddingLeft = 16;
-  var paddingRight = 16;
-  if (props.$iconPlacement == 'left') paddingLeft = 12;else if (props.$iconPlacement == 'right') paddingRight = 12;
-  if (props.$size == 'xs') {
-    gap = 2;
-    paddingLeft = paddingRight = 8;
+
+/***/ }),
+
+/***/ "./src/button/button_icon.js":
+/*!***********************************!*\
+  !*** ./src/button/button_icon.js ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ButtonIcon: () => (/* binding */ ButtonIcon)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+
+var ButtonIcon = function ButtonIcon(_ref) {
+  var classNamePrefix = _ref.classNamePrefix,
+    size = _ref.size,
+    loading = _ref.loading,
+    IconComp = _ref.icon,
+    iconPlacement = _ref.iconPlacement,
+    isRight = _ref.isRight;
+  var iconSize = {
+    sm: 'xs',
+    xs: 'xxs'
+  }[size] || 'sm';
+  if (loading) {
+    return !isRight && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_1__.Icon, {
+      className: (0,_util__WEBPACK_IMPORTED_MODULE_2__.cn)(classNamePrefix, {
+        '-icon': true,
+        '-icon-loading': true
+      }),
+      size: iconSize,
+      name: "Loading"
+    });
   }
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["gap:", ";padding-left:", ";padding-right:", ";"], (0,_util__WEBPACK_IMPORTED_MODULE_5__.px)(gap), (0,_util__WEBPACK_IMPORTED_MODULE_5__.px)(paddingLeft), (0,_util__WEBPACK_IMPORTED_MODULE_5__.px)(paddingRight));
-}, function (props) {
-  var colors = (0,_util__WEBPACK_IMPORTED_MODULE_5__.getButtonColors)(props);
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["background-color:", ";border:", ";[data-label]{color:", ";}[data-icon]{color:", ";}", " ", ""], colors.backColor, colors.border || '0 none', colors.color, colors.iconColor || colors.color, colors.hover && "&:hover {\n                background-color: ".concat(colors.hover.backColor, ";\n            }"), colors.active && "&:active {\n                background-color: ".concat(colors.active.backColor, ";\n                border: ").concat(colors.active.border, ";\n                box-shadow: ").concat(colors.active.boxShadow, ";\n                ").concat(colors.active.iconColor && "[data-icon] {\n                    color: ".concat(colors.active.iconColor, ";\n                }"), "\n            }"));
-}, function (props) {
-  return (0,_util__WEBPACK_IMPORTED_MODULE_5__.getButtonSize)(props.$size);
-});
+  if (IconComp && (!isRight && iconPlacement == 'left' || isRight && iconPlacement == 'right')) {
+    var className = (0,_util__WEBPACK_IMPORTED_MODULE_2__.cn)(classNamePrefix, {
+      '-icon': true,
+      '-icon-left': iconPlacement == 'left',
+      '-icon-right': iconPlacement == 'right'
+    });
+    if (typeof IconComp == 'string') {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_1__.Icon, {
+        className: className,
+        size: iconSize,
+        name: IconComp
+      });
+    }
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(IconComp, {
+      className: className,
+      size: iconSize
+    });
+  }
+  return null;
+};
 
 /***/ }),
 
@@ -37105,59 +37146,155 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/button/loading_icon.js":
-/*!************************************!*\
-  !*** ./src/button/loading_icon.js ***!
-  \************************************/
+/***/ "./src/button/styled.js":
+/*!******************************!*\
+  !*** ./src/button/styled.js ***!
+  \******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   LoadingIcon: () => (/* binding */ LoadingIcon)
+/* harmony export */   StyledButton: () => (/* binding */ StyledButton),
+/* harmony export */   height: () => (/* binding */ height)
 /* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* 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
 
 
 /*jslint react:true*/
-var _excluded = ["size"];
-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 LoadingIcon = function LoadingIcon(_ref) {
-  var size = _ref.size,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Spinner, _extends({
-    stroke: "rgba(0,106,220,1)",
-    viewBox: "0 0 24 24",
-    $size: size
-  }, rest), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("g", {
-    className: "spinner_V8m1"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "9.5",
-    fill: "none",
-    strokeWidth: "3"
-  })));
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
+var prefixCls = function prefixCls(p) {
+  return p.$prefixCls;
+};
+var StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_0___default().button.withConfig({
+  displayName: "StyledButton",
+  componentId: "sc-gbd81f-0"
+})(["display:inline-flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;&:disabled{cursor:not-allowed;}text-decoration:none;&:hover,&:visited,:focus{text-decoration:none;}padding-left:", "px;padding-right:", "px;gap:", "px;height:", "px;&.", "-disabled{background-color:", ";border:1px solid ", ";.", "-text,.", "-icon{color:", ";}}&:not(.", "-disabled){&.", "-primary{background-color:", ";border:none;.", "-text,.", "-icon{color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";box-shadow:", ";}}&.", "-secondary{background-color:", ";border:1px solid ", ";.", "-text,.", "-icon{color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";box-shadow:", ";}}&.", "-negative{background-color:", ";border:none;.", "-text,.", "-icon{color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";box-shadow:", ";}}&.", "-negative_secondary{background-color:", ";border:1px solid ", ";.", "-text,.", "-icon{color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";box-shadow:", ";}}&.", "-positive{background-color:", ";border:1px solid ", ";.", "-text,.", "-icon{color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";box-shadow:", ";}}&.", "-white{background-color:", ";border:1px solid ", ";.", "-text{color:", ";}.", "-icon{color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";border:1px solid ", ";.", "-icon{color:", ";}}}}"], function (_ref) {
+  var $size = _ref.$size,
+    $leftIcon = _ref.$leftIcon;
+  return padding.left[$size][$leftIcon ? 1 : 0];
+}, function (_ref2) {
+  var $size = _ref2.$size,
+    $rightIcon = _ref2.$rightIcon;
+  return padding.right[$size][$rightIcon ? 1 : 0];
+}, function (_ref3) {
+  var $size = _ref3.$size;
+  return gap[$size];
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  return height[$size];
+}, prefixCls, theme(function (t) {
+  return t.color.button_bg_disabled;
+}), theme(function (t) {
+  return t.color.button_border_disabled;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.button_text_disabled;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.button_primary_bg;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.button_primary_text;
+}), theme(function (t) {
+  return t.color.button_primary_bg_hover;
+}), theme(function (t) {
+  return t.color.button_primary_bg_focused;
+}), theme(function (t) {
+  return t.color.button_primary_shadow_focused;
+}), prefixCls, theme(function (t) {
+  return t.color.button_secondary_bg;
+}), theme(function (t) {
+  return t.color.button_secondary_border;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.button_secondary_text;
+}), theme(function (t) {
+  return t.color.button_secondary_bg_hover;
+}), theme(function (t) {
+  return t.color.button_secondary_bg_focused;
+}), theme(function (t) {
+  return t.color.button_secondary_shadow_focused;
+}), prefixCls, theme(function (t) {
+  return t.color.button_negative_bg;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.button_negative_text;
+}), theme(function (t) {
+  return t.color.button_negative_bg_hover;
+}), theme(function (t) {
+  return t.color.button_negative_bg_focused;
+}), theme(function (t) {
+  return t.color.button_negative_shadow_focused;
+}), prefixCls, theme(function (t) {
+  return t.color.button_negative_secondary_bg;
+}), theme(function (t) {
+  return t.color.button_negative_secondary_border;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.button_negative_secondary_text;
+}), theme(function (t) {
+  return t.color.button_negative_secondary_bg_hover;
+}), theme(function (t) {
+  return t.color.button_negative_secondary_bg_focused;
+}), theme(function (t) {
+  return t.color.button_negative_secondary_shadow_focused;
+}), prefixCls, theme(function (t) {
+  return t.color.button_success_bg;
+}), theme(function (t) {
+  return t.color.button_success_border;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.button_success_text;
+}), theme(function (t) {
+  return t.color.button_success_bg_hover;
+}), theme(function (t) {
+  return t.color.button_success_bg_focused;
+}), theme(function (t) {
+  return t.color.button_success_shadow_focused;
+}), prefixCls, theme(function (t) {
+  return t.color.button_white_bg;
+}), theme(function (t) {
+  return t.color.button_white_border;
+}), prefixCls, theme(function (t) {
+  return t.color.button_white_text;
+}), prefixCls, theme(function (t) {
+  return t.color.button_white_icon;
+}), theme(function (t) {
+  return t.color.button_white_bg_hover;
+}), theme(function (t) {
+  return t.color.button_white_bg_focus;
+}), theme(function (t) {
+  return t.color.button_white_border_focus;
+}), prefixCls, theme(function (t) {
+  return t.color.button_white_text;
+}));
+var padding = {
+  left: {
+    xs: [8, 8],
+    sm: [16, 12],
+    md: [16, 12],
+    lg: [16, 12]
+  },
+  right: {
+    xs: [8, 8],
+    sm: [16, 12],
+    md: [16, 12],
+    lg: [16, 12]
+  }
+};
+var gap = {
+  xs: 2,
+  sm: 4,
+  md: 4,
+  lg: 4
+};
+var height = {
+  xs: 28,
+  sm: 36,
+  md: 40,
+  lg: 48
 };
-var spinner_zKoa = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["100%{transform:rotate(360deg);}"]);
-var spinner_YpZS = (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.keyframes)(["0%{stroke-dasharray:0 150;stroke-dashoffset:0;}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16;}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59;}"]);
-var Spinner = styled_components__WEBPACK_IMPORTED_MODULE_1___default().svg.withConfig({
-  displayName: "Spinner",
-  componentId: "sc-1nhtjn2-0"
-})(["", " .spinner_V8m1{transform-origin:center;animation:", " 2s linear infinite;}.spinner_V8m1 circle{stroke-linecap:round;animation:", " 1.5s ease-in-out infinite;}"], function (_ref2) {
-  var $size = _ref2.$size;
-  return (0,_util__WEBPACK_IMPORTED_MODULE_2__.getIconSize)($size);
-}, spinner_zKoa, spinner_YpZS);
 
 /***/ }),
 
@@ -39873,8 +40010,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
 /* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../menu */ "./src/menu/index.js");
 /* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
+/* harmony import */ var _button_styled__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../button/styled */ "./src/button/styled.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
 // LICENSE_CODE ZON
 
 
@@ -39900,6 +40038,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
+
 var ComboButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
   var className = props.className,
     _props$classNamePrefi = props.classNamePrefix,
@@ -39916,7 +40056,7 @@ var ComboButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
     text = props.text,
     children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
-  var _getIconProps = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.getIconProps)('Button', {
+  var _getIconProps = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.getIconProps)('Button', {
       size: size,
       icon: icon,
       iconPlacement: iconPlacement
@@ -39927,13 +40067,13 @@ var ComboButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledButtonWrapper, _extends({
     ref: ref
   }, rest, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_8__.cn)(null, null, className, classNamePrefix),
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.cn)(null, null, className, classNamePrefix),
     disabled: disabled,
     $variant: variant,
     $size: size,
     $iconPlacement: isLeft ? 'left' : ''
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledButton, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_8__.cn)(classNamePrefix, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.cn)(classNamePrefix, {
       '-primary_button': true,
       '-primary_button-disabled': disabled
     }),
@@ -39941,13 +40081,13 @@ var ComboButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
     onClick: onClick,
     "data-testid": "combo_button_main"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ComboButtonContent, null, isLeft && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_5__.Icon, _extends({
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_8__.cn)(classNamePrefix, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.cn)(classNamePrefix, {
       '-icon': true,
       '-icon-left': isLeft
     })
   }, iconProps)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_7__.Label, {
     variant: size == 'xs' ? 'sm' : 'lg',
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_8__.cn)(classNamePrefix, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.cn)(classNamePrefix, {
       '-text': true
     }),
     no_wrap: true,
@@ -39963,9 +40103,9 @@ ComboButton.displayName = 'ComboButton';
 ComboButton.propTypes = {
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['primary', 'secondary', 'negative', 'negative_secondary', 'positive', 'white']),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['xs', 'sm', 'md', 'lg']),
-  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_9__.iconNames),
+  variant: _constants__WEBPACK_IMPORTED_MODULE_3__.PT_BUTTON_VARIANT,
+  size: _constants__WEBPACK_IMPORTED_MODULE_3__.PT_BUTTON_SIZE,
+  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_10__.iconNames),
   items: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().any)).isRequired,
   disabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
@@ -39985,7 +40125,7 @@ var ComboButtonMenu = function ComboButtonMenu(_ref) {
     onVisibleChange: setVisible,
     zIndex: _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.combobutton,
     popover: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_menu__WEBPACK_IMPORTED_MODULE_6__.Menu, {
-      className: (0,_util__WEBPACK_IMPORTED_MODULE_8__.cn)(classNamePrefix, {
+      className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.cn)(classNamePrefix, {
         '-menu': true
       }),
       size: size,
@@ -39996,7 +40136,7 @@ var ComboButtonMenu = function ComboButtonMenu(_ref) {
       unstyled: true
     })
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ComboButtonArrow, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_8__.cn)(classNamePrefix, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.cn)(classNamePrefix, {
       '-menu_button': true,
       '-menu_button-disabled': disabled
     }),
@@ -40010,7 +40150,7 @@ var ComboButtonMenu = function ComboButtonMenu(_ref) {
 var StyledButtonWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "StyledButtonWrapper",
   componentId: "sc-s9elw5-0"
-})(["display:inline-flex;align-items:stretch;justify-content:center;border-radius:4px;text-decoration:none;&:hover,&:visited,:focus{text-decoration:none;}padding:0;", " ", " ", ""], function (props) {
+})(["display:inline-flex;align-items:stretch;justify-content:center;border-radius:4px;text-decoration:none;&:hover,&:visited,:focus{text-decoration:none;}padding:0;", " ", " height:", "px;"], function (props) {
   var gap = 4;
   var paddingLeft = 16;
   var paddingRight = 16;
@@ -40019,12 +40159,13 @@ var StyledButtonWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default
     gap = 2;
     paddingLeft = paddingRight = 8;
   }
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["", "{gap:", ";padding-left:", ";padding-right:", ";}"], ComboButtonContent, (0,_util__WEBPACK_IMPORTED_MODULE_8__.px)(gap), (0,_util__WEBPACK_IMPORTED_MODULE_8__.px)(paddingLeft), (0,_util__WEBPACK_IMPORTED_MODULE_8__.px)(paddingRight));
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["", "{gap:", ";padding-left:", ";padding-right:", ";}"], ComboButtonContent, (0,_util__WEBPACK_IMPORTED_MODULE_9__.px)(gap), (0,_util__WEBPACK_IMPORTED_MODULE_9__.px)(paddingLeft), (0,_util__WEBPACK_IMPORTED_MODULE_9__.px)(paddingRight));
 }, function (props) {
-  var colors = (0,_util__WEBPACK_IMPORTED_MODULE_8__.getButtonColors)(props);
+  var colors = (0,_util__WEBPACK_IMPORTED_MODULE_9__.getButtonColors)(props);
   return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["background-color:", ";", "{color:", ";border-top:", ";border-right:0 none;border-bottom:", ";border-left:", ";[data-icon]{color:", ";}", "}", "{border-top:", ";border-right:", ";border-bottom:", ";border-left:", ";[data-icon]{color:", ";}", "}", ""], colors.backColor, StyledButton, colors.color, colors.border || '0 none', colors.border || '0 none', colors.border || '0 none', colors.iconColor || colors.color, colors.active && "&:active {\n          background-color: ".concat(colors.active.backColor, ";\n          border-top: ").concat(colors.active.border, ";\n          border-bottom: ").concat(colors.active.border, ";\n          border-left: ").concat(colors.active.border, ";\n          box-shadow: ").concat(colors.active.boxShadow, ";\n          ").concat(colors.active.iconColor && "[data-icon] {\n            color: ".concat(colors.active.iconColor, ";\n          }"), "\n        }"), ComboButtonArrow, colors.border || '0 none', colors.border || '0 none', colors.border || '0 none', colors.separator || colors.border || '0 none', colors.iconColor || colors.color, colors.active && "&:active {\n          background-color: ".concat(colors.active.backColor, ";\n          border: ").concat(colors.active.border, ";\n          box-shadow: ").concat(colors.active.boxShadow, ";\n          ").concat(colors.active.iconColor && "[data-icon] {\n            color: ".concat(colors.active.iconColor, ";\n          }"), "\n        }"), colors.hover && "\n        ".concat(StyledButton, ":hover, ").concat(ComboButtonArrow, ":hover {\n          background-color: ").concat(colors.hover.backColor, ";\n        }\n      "));
-}, function (props) {
-  return (0,_util__WEBPACK_IMPORTED_MODULE_8__.getButtonSize)(props.$size);
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return _button_styled__WEBPACK_IMPORTED_MODULE_8__.height[$size];
 });
 var StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_2___default().button.withConfig({
   displayName: "StyledButton",
@@ -40072,6 +40213,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   INPUT_HORIZONTAL_PADDING: () => (/* binding */ INPUT_HORIZONTAL_PADDING),
 /* harmony export */   INPUT_VERTICAL_PADDING: () => (/* binding */ INPUT_VERTICAL_PADDING),
+/* harmony export */   PT_BUTTON_SIZE: () => (/* binding */ PT_BUTTON_SIZE),
+/* harmony export */   PT_BUTTON_VARIANT: () => (/* binding */ PT_BUTTON_VARIANT),
 /* harmony export */   PT_INPUT_SHARED: () => (/* binding */ PT_INPUT_SHARED),
 /* harmony export */   PT_NECESSITY_INDICATOR: () => (/* binding */ PT_NECESSITY_INDICATOR),
 /* harmony export */   PT_TOAST_POSITION: () => (/* binding */ PT_TOAST_POSITION),
@@ -40133,6 +40276,8 @@ var PT_INPUT_SHARED = {
   autoFocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
 var PT_TOAST_POSITION = prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right']);
+var PT_BUTTON_VARIANT = prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['primary', 'secondary', 'negative', 'negative_secondary', 'positive', 'white']);
+var PT_BUTTON_SIZE = prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['xs', 'sm', 'md', 'lg']);
 
 /***/ }),
 
@@ -48864,7 +49009,7 @@ var DialogFooter = function DialogFooter(_ref3) {
     size: "sm",
     text: cancelLabel,
     hotKey: "Escape",
-    variant: "secondary",
+    variant: "white",
     onClick: onCancel
   }, cancelProps, {
     "data-testid": "modal_footer_cancel_button"
@@ -48932,13 +49077,20 @@ __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 _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../button */ "./src/button/index.js");
+/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @icons */ "./assets/icons/index.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../button */ "./src/button/index.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["onClick", "hotKey", "size", "variant"];
+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", "onClick", "hotKey", "size"];
+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; }
@@ -48947,62 +49099,80 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 var ModalButton = function ModalButton(_ref) {
-  var onClick = _ref.onClick,
+  var className = _ref.className,
+    _ref$classNamePrefix = _ref.classNamePrefix,
+    classNamePrefix = _ref$classNamePrefix === void 0 ? 'uikit_button' : _ref$classNamePrefix,
+    onClick = _ref.onClick,
     hotKey = _ref.hotKey,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
-    variant = _ref.variant,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var icon = (0,_util__WEBPACK_IMPORTED_MODULE_4__.firstDefined)(rest.icon, getHotKeyIcon(hotKey));
-  var iconPlacement = (0,_util__WEBPACK_IMPORTED_MODULE_4__.firstDefined)(rest.iconPlacement, getHotKeyIcon(hotKey) ? 'right' : undefined);
-  var btnVariant = (0,_util__WEBPACK_IMPORTED_MODULE_4__.firstDefined)(getHotKeyVariant(hotKey, variant), variant);
+  var hotKeyIcon = getHotKeyIcon(hotKey);
+  var useHotKeyIcon = typeof rest.icon == 'undefined' && typeof hotKeyIcon != 'undefined';
+  var icon = useHotKeyIcon ? hotKeyIcon : rest.icon;
+  var iconPlacement = useHotKeyIcon ? 'right' : rest.iconPlacement;
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var _document$activeEleme;
-    (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.blur();
     if (!hotKey) return;
-    var handle_key_press = function handle_key_press(e) {
+    (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.blur();
+    var onKeydown = function onKeydown(e) {
       if (e.key && e.key.toLowerCase() == hotKey.toLowerCase()) onClick === null || onClick === void 0 || onClick(e);
     };
-    window.addEventListener('keydown', handle_key_press);
+    window.addEventListener('keydown', onKeydown);
     return function () {
-      return window.removeEventListener('keydown', handle_key_press);
+      return window.removeEventListener('keydown', onKeydown);
     };
   }, [hotKey]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyedButton, _extends({
-    onClick: onClick
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledModalButton, _extends({
+    onClick: onClick,
+    size: size,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-with_hot_key': useHotKeyIcon
+    }, className),
+    classNamePrefix: classNamePrefix
   }, rest, {
     iconPlacement: iconPlacement,
     icon: icon,
-    size: size,
-    variant: btnVariant,
-    $hotKey: hotKey
+    $useHotKeyIcon: useHotKeyIcon
   }));
 };
-ModalButton.propTypes = {
+ModalButton.propTypes = _objectSpread(_objectSpread({}, _button__WEBPACK_IMPORTED_MODULE_5__.Button.propTypes), {}, {
   hotKey: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['Enter', 'Escape'])
-};
+});
 var getHotKeyIcon = function getHotKeyIcon(hotKey) {
   if (typeof hotKey != 'string') return;
-  if (hotKey.toLowerCase() == 'enter') return 'KeyEnter';
-  if (hotKey.toLowerCase() == 'escape') return 'KeyEscape';
+  if (hotKey.toLowerCase() == 'enter') return KeyEnterIcon;
+  if (hotKey.toLowerCase() == 'escape') return KeyEscapeIcon;
 };
-var getHotKeyVariant = function getHotKeyVariant(hotKey, variant) {
-  if (typeof hotKey != 'string') return;
-  if (hotKey.toLowerCase() == 'enter') return variant;
-  if (hotKey.toLowerCase() == 'escape') return 'white';
+var prefixCls = function prefixCls(p) {
+  return p.classNamePrefix;
 };
-var StyedButton = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_button__WEBPACK_IMPORTED_MODULE_3__.Button).attrs(function (props) {
-  return {
-    classNamePrefix: 'confirm_button'
-  };
-}).withConfig({
-  displayName: "StyedButton",
+var StyledModalButton = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_button__WEBPACK_IMPORTED_MODULE_5__.Button).withConfig({
+  displayName: "StyledModalButton",
   componentId: "sc-543wca-0"
-})(["", ""], function (_ref2) {
-  var $hotKey = _ref2.$hotKey;
-  return $hotKey && "\n        gap: 8px;\n        .confirm_button-icon {\n          overflow: visible;\n          min-width: 32px;\n          width: 32px;\n          min-height: 20px;\n          height: 20px;\n        }\n    ";
-});
+})(["&.", "-with_hot_key{gap:8px;.", "-icon{width:32px;height:20px;}}"], prefixCls, prefixCls);
+var KeyEnterIcon = function KeyEnterIcon(props) {
+  var _icons$KeyEnter = _icons__WEBPACK_IMPORTED_MODULE_3__["default"].KeyEnter,
+    id = _icons$KeyEnter.id,
+    viewBox = _icons$KeyEnter.viewBox;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("svg", _extends({}, (0,_util__WEBPACK_IMPORTED_MODULE_4__.pickAttrs)(props), {
+    viewBox: viewBox
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
+    href: "#".concat(id)
+  }));
+};
+var KeyEscapeIcon = function KeyEscapeIcon(props) {
+  var _icons$KeyEscape = _icons__WEBPACK_IMPORTED_MODULE_3__["default"].KeyEscape,
+    id = _icons$KeyEscape.id,
+    viewBox = _icons$KeyEscape.viewBox;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("svg", _extends({}, (0,_util__WEBPACK_IMPORTED_MODULE_4__.pickAttrs)(props), {
+    viewBox: viewBox
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("use", {
+    href: "#".concat(id)
+  }));
+};
 
 /***/ }),
 
@@ -56438,7 +56608,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["id", "className", "classNamePrefix", "variant", "trigger", "visible", "placement", "tooltip", "showArrow", "onVisibleChange", "afterVisibleChange", "children", "destroyOnClose", "zIndex"];
+var _excluded = ["id", "className", "classNamePrefix", "variant", "placement", "tooltip", "children", "zIndex", "showDelay", "hideDelay", "align", "destroyTooltipOnHide"];
+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; }
 
@@ -56454,42 +56625,35 @@ var _Tooltip = function Tooltip(_ref) {
     classNamePrefix = _ref$classNamePrefix === void 0 ? 'uikit_tooltip' : _ref$classNamePrefix,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'black' : _ref$variant,
-    trigger = _ref.trigger,
-    visible = _ref.visible,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'top' : _ref$placement,
     tooltip = _ref.tooltip,
-    showArrow = _ref.showArrow,
-    onVisibleChange = _ref.onVisibleChange,
-    afterVisibleChange = _ref.afterVisibleChange,
     children = _ref.children,
-    _ref$destroyOnClose = _ref.destroyOnClose,
-    destroyOnClose = _ref$destroyOnClose === void 0 ? true : _ref$destroyOnClose,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.tooltip : _ref$zIndex,
+    showDelay = _ref.showDelay,
+    hideDelay = _ref.hideDelay,
+    _align = _ref.align,
+    _ref$destroyTooltipOn = _ref.destroyTooltipOnHide,
+    destroyTooltipOnHide = _ref$destroyTooltipOn === void 0 ? true : _ref$destroyTooltipOn,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var mouseEnterDelay = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(rest.showDelay, _Tooltip.showDelay);
-  var mouseLeaveDelay = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(rest.hideDelay, _Tooltip.hideDelay);
-  var align = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(rest.align, _placements__WEBPACK_IMPORTED_MODULE_4__.placements[placement]);
-  if (!tooltip) return children;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_5__.StyledTooltip, {
+  if (!tooltip && destroyTooltipOnHide) return children;
+  var mouseEnterDelay = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(showDelay, _Tooltip.showDelay);
+  var mouseLeaveDelay = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(hideDelay, _Tooltip.hideDelay);
+  var align = (0,_util__WEBPACK_IMPORTED_MODULE_2__.firstDefined)(_align, _placements__WEBPACK_IMPORTED_MODULE_4__.placements[placement]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_5__.StyledTooltip, _extends({
     prefixCls: classNamePrefix,
     id: id,
     className: (0,_util__WEBPACK_IMPORTED_MODULE_2__.cn)(null, null, className, "".concat(classNamePrefix, "-").concat(variant)),
     overlay: tooltip,
-    trigger: trigger,
-    visible: visible,
     placement: placement,
     animation: "zoom",
     mouseEnterDelay: mouseEnterDelay,
     mouseLeaveDelay: mouseLeaveDelay,
     zIndex: zIndex,
     align: align,
-    showArrow: showArrow,
-    onVisibleChange: onVisibleChange,
-    afterVisibleChange: afterVisibleChange,
-    destroyOnClose: destroyOnClose
-  }, children);
+    destroyTooltipOnHide: destroyTooltipOnHide
+  }, rest), children);
 };
 
 _Tooltip.propTypes = {
@@ -56507,7 +56671,7 @@ _Tooltip.propTypes = {
   showArrow: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   onVisibleChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   afterVisibleChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  destroyTooltipOnHide: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   zIndex: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
 };
 _Tooltip.showDelay = 0.1;
@@ -57457,36 +57621,6 @@ var getButtonColors = function getButtonColors(props) {
 
 /***/ }),
 
-/***/ "./src/util/get_button_size.js":
-/*!*************************************!*\
-  !*** ./src/util/get_button_size.js ***!
-  \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   getButtonSize: () => (/* binding */ getButtonSize)
-/* harmony export */ });
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _px__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./px */ "./src/util/px.js");
-// LICENSE_CODE ZON
-
-
-/*jslint react:true*/
-
-
-var getButtonSize = function getButtonSize(size) {
-  var w = 40; // md
-  if (size == 'lg') w = 48;
-  if (size == 'sm') w = 36;
-  if (size == 'xs') w = 28;
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["height:", ";"], (0,_px__WEBPACK_IMPORTED_MODULE_1__.px)(w));
-};
-
-/***/ }),
-
 /***/ "./src/util/get_icon_size.js":
 /*!***********************************!*\
   !*** ./src/util/get_icon_size.js ***!
@@ -57624,31 +57758,30 @@ var getStyleProps = function getStyleProps(props, name, classNamesState) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   OFFSET: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_8__.OFFSET),
-/* harmony export */   VirtualizedListFactory: () => (/* reexport safe */ _virtualized_list__WEBPACK_IMPORTED_MODULE_14__.VirtualizedListFactory),
+/* harmony export */   OFFSET: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_7__.OFFSET),
+/* harmony export */   VirtualizedListFactory: () => (/* reexport safe */ _virtualized_list__WEBPACK_IMPORTED_MODULE_13__.VirtualizedListFactory),
 /* harmony export */   cn: () => (/* reexport safe */ _cn__WEBPACK_IMPORTED_MODULE_0__.cn),
 /* harmony export */   copyTextToClipboard: () => (/* reexport safe */ _copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_1__.copyTextToClipboard),
 /* harmony export */   firstDefined: () => (/* reexport safe */ _first_defined__WEBPACK_IMPORTED_MODULE_2__.firstDefined),
 /* harmony export */   flexRender: () => (/* reexport safe */ _flex_renderer__WEBPACK_IMPORTED_MODULE_3__.flexRender),
 /* harmony export */   fromTheme: () => (/* reexport safe */ _from_theme__WEBPACK_IMPORTED_MODULE_4__.fromTheme),
 /* harmony export */   getButtonColors: () => (/* reexport safe */ _get_button_colors__WEBPACK_IMPORTED_MODULE_5__.getButtonColors),
-/* harmony export */   getButtonSize: () => (/* reexport safe */ _get_button_size__WEBPACK_IMPORTED_MODULE_6__.getButtonSize),
-/* harmony export */   getGroupRowHeight: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_8__.getGroupRowHeight),
-/* harmony export */   getIconSize: () => (/* reexport safe */ _get_icon_size__WEBPACK_IMPORTED_MODULE_7__.getIconSize),
-/* harmony export */   getListHeight: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_8__.getListHeight),
-/* harmony export */   getNextRowIndex: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_8__.getNextRowIndex),
-/* harmony export */   getScrollIndex: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_8__.getScrollIndex),
-/* harmony export */   getStyleProps: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_8__.getStyleProps),
-/* harmony export */   isGroupHeader: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_8__.isGroupHeader),
-/* harmony export */   mergeRefs: () => (/* reexport safe */ _merge_refs__WEBPACK_IMPORTED_MODULE_9__.mergeRefs),
-/* harmony export */   pickAttrs: () => (/* reexport safe */ _pick_attrs__WEBPACK_IMPORTED_MODULE_10__.pickAttrs),
-/* harmony export */   px: () => (/* reexport safe */ _px__WEBPACK_IMPORTED_MODULE_11__.px),
-/* harmony export */   setRef: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_12__.setRef),
-/* harmony export */   setRefs: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_12__.setRefs),
-/* harmony export */   splitProps: () => (/* reexport safe */ _split_props__WEBPACK_IMPORTED_MODULE_13__.splitProps),
-/* harmony export */   useSetRefsCallback: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_12__.useSetRefsCallback),
-/* harmony export */   useSetRefsEffect: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_12__.useSetRefsEffect),
-/* harmony export */   withUserStyles: () => (/* reexport safe */ _with_user_styles__WEBPACK_IMPORTED_MODULE_15__.withUserStyles)
+/* harmony export */   getGroupRowHeight: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_7__.getGroupRowHeight),
+/* harmony export */   getIconSize: () => (/* reexport safe */ _get_icon_size__WEBPACK_IMPORTED_MODULE_6__.getIconSize),
+/* harmony export */   getListHeight: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_7__.getListHeight),
+/* harmony export */   getNextRowIndex: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_7__.getNextRowIndex),
+/* harmony export */   getScrollIndex: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_7__.getScrollIndex),
+/* harmony export */   getStyleProps: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_7__.getStyleProps),
+/* harmony export */   isGroupHeader: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_7__.isGroupHeader),
+/* harmony export */   mergeRefs: () => (/* reexport safe */ _merge_refs__WEBPACK_IMPORTED_MODULE_8__.mergeRefs),
+/* harmony export */   pickAttrs: () => (/* reexport safe */ _pick_attrs__WEBPACK_IMPORTED_MODULE_9__.pickAttrs),
+/* harmony export */   px: () => (/* reexport safe */ _px__WEBPACK_IMPORTED_MODULE_10__.px),
+/* harmony export */   setRef: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_11__.setRef),
+/* harmony export */   setRefs: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_11__.setRefs),
+/* harmony export */   splitProps: () => (/* reexport safe */ _split_props__WEBPACK_IMPORTED_MODULE_12__.splitProps),
+/* harmony export */   useSetRefsCallback: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_11__.useSetRefsCallback),
+/* harmony export */   useSetRefsEffect: () => (/* reexport safe */ _set_ref__WEBPACK_IMPORTED_MODULE_11__.useSetRefsEffect),
+/* harmony export */   withUserStyles: () => (/* reexport safe */ _with_user_styles__WEBPACK_IMPORTED_MODULE_14__.withUserStyles)
 /* harmony export */ });
 /* harmony import */ var _cn__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./cn */ "./src/util/cn.js");
 /* harmony import */ var _copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./copy_text_to_clipboard */ "./src/util/copy_text_to_clipboard.js");
@@ -57656,16 +57789,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _flex_renderer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./flex_renderer */ "./src/util/flex_renderer.js");
 /* harmony import */ var _from_theme__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./from_theme */ "./src/util/from_theme.js");
 /* harmony import */ var _get_button_colors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./get_button_colors */ "./src/util/get_button_colors.js");
-/* harmony import */ var _get_button_size__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./get_button_size */ "./src/util/get_button_size.js");
-/* harmony import */ var _get_icon_size__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./get_icon_size */ "./src/util/get_icon_size.js");
-/* harmony import */ var _getters__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./getters */ "./src/util/getters.js");
-/* harmony import */ var _merge_refs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./merge_refs */ "./src/util/merge_refs.js");
-/* harmony import */ var _pick_attrs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./pick_attrs */ "./src/util/pick_attrs.js");
-/* harmony import */ var _px__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./px */ "./src/util/px.js");
-/* harmony import */ var _set_ref__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./set_ref */ "./src/util/set_ref.js");
-/* harmony import */ var _split_props__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./split_props */ "./src/util/split_props.js");
-/* harmony import */ var _virtualized_list__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./virtualized_list */ "./src/util/virtualized_list.js");
-/* harmony import */ var _with_user_styles__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./with_user_styles */ "./src/util/with_user_styles.js");
+/* harmony import */ var _get_icon_size__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./get_icon_size */ "./src/util/get_icon_size.js");
+/* harmony import */ var _getters__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./getters */ "./src/util/getters.js");
+/* harmony import */ var _merge_refs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./merge_refs */ "./src/util/merge_refs.js");
+/* harmony import */ var _pick_attrs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./pick_attrs */ "./src/util/pick_attrs.js");
+/* harmony import */ var _px__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./px */ "./src/util/px.js");
+/* harmony import */ var _set_ref__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./set_ref */ "./src/util/set_ref.js");
+/* harmony import */ var _split_props__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./split_props */ "./src/util/split_props.js");
+/* harmony import */ var _virtualized_list__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./virtualized_list */ "./src/util/virtualized_list.js");
+/* harmony import */ var _with_user_styles__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./with_user_styles */ "./src/util/with_user_styles.js");
 // LICENSE_CODE ZON
 
 
@@ -57686,7 +57818,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 /***/ }),
 
 /***/ "./src/util/merge_refs.js":