@luminati-io/uikit 6.3.54 → 6.3.56

package/dist/umd/uikit.development.js

@@ -46561,7 +46561,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Number: () => (/* binding */ Number)
+/* harmony export */   Number: () => (/* binding */ _Number)
 /* 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__);
@@ -46578,8 +46578,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["onChange", "onBlur", "value", "step", "minValue", "maxValue", "size", "placeholder", "changeOnBlur", "tabIndex", "readOnly"],
-  _excluded2 = ["onFocus", "onBlur", "onChange", "readOnly"];
+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 = ["onChange", "onBlur", "value", "step", "minValue", "maxValue", "size", "placeholder", "changeOnBlur", "tabIndex", "readOnly", "formatThousands"],
+  _excluded2 = ["onFocus", "onBlur", "onChange", "readOnly", "formatThousands", "value", "step", "onKeyDown"];
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -46597,7 +46603,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {
+var _Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     value = _ref.value,
@@ -46612,12 +46618,13 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
     changeOnBlur = _ref$changeOnBlur === void 0 ? true : _ref$changeOnBlur,
     tabIndex = _ref.tabIndex,
     readOnly = _ref.readOnly,
+    formatThousands = _ref.formatThousands,
     rest = _objectWithoutProperties(_ref, _excluded);
   var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     var v = e.target.value;
     if (v != '') v = +v;
     onChange === null || onChange === void 0 || onChange(v, e);
-  }, [onChange, minValue, maxValue]);
+  }, [onChange]);
   var handleBlur = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     onBlur === null || onBlur === void 0 || onBlur(e);
     if (!changeOnBlur) return;
@@ -46636,7 +46643,8 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
       max: maxValue,
       tabIndex: tabIndex,
       readOnly: readOnly,
-      required: rest.required
+      required: rest.required,
+      formatThousands: formatThousands
     },
     Field: NumberField,
     value: value,
@@ -46645,8 +46653,9 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
     placeholder: t(placeholder)
   }));
 });
-Number.displayName = 'Number';
-Number.propTypes = {
+
+_Number.displayName = 'Number';
+_Number.propTypes = {
   value: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)]),
   step: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
   minValue: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
@@ -46676,48 +46685,141 @@ Number.propTypes = {
   size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
   changeOnBlur: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   tabIndex: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
-  readOnly: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+  readOnly: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  formatThousands: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+};
+var formatNumber = function formatNumber(val) {
+  if (val === '' || val === null || val === undefined || isNaN(val)) return '';
+  return window.Number(val).toLocaleString();
+};
+var unformatNumber = function unformatNumber(val) {
+  if (typeof val == 'string') return val.replace(/,/g, '');
+  return val;
 };
 var NumberField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
   var onFocus = props.onFocus,
     onBlur = props.onBlur,
     onChange = props.onChange,
     readOnly = props.readOnly,
+    _props$formatThousand = props.formatThousands,
+    formatThousands = _props$formatThousand === void 0 ? false : _props$formatThousand,
+    value = props.value,
+    step = props.step,
+    onKeyDown = props.onKeyDown,
     rest = _objectWithoutProperties(props, _excluded2);
   var inputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(function () {
+      return formatThousands && value != null ? formatNumber(value) : value;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
+    displayValue = _useState2[0],
+    setDisplayValue = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
+    var raw = unformatNumber(evt.target.value);
+    if (formatThousands) setDisplayValue(formatNumber(raw));else setDisplayValue(evt.target.value);
+    onChange === null || onChange === void 0 || onChange(_objectSpread(_objectSpread({}, evt), {}, {
+      target: _objectSpread(_objectSpread({}, evt.target), {}, {
+        value: raw
+      })
+    }));
+  }, [onChange]);
   var handleFocus = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
     setFocused(true);
     onFocus === null || onFocus === void 0 || onFocus(evt);
-  }, [onFocus]);
+  }, [onFocus, formatThousands, displayValue]);
   var handleBlur = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
     setFocused(false);
     onBlur === null || onBlur === void 0 || onBlur(evt);
-  }, [onBlur]);
+  }, [onBlur, formatThousands, displayValue]);
   var stepUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
-    inputRef.current.stepUp();
-    onChange === null || onChange === void 0 || onChange({
-      target: inputRef.current
-    });
-  }, [onChange]);
+    if (formatThousands) {
+      var raw = window.Number(unformatNumber(displayValue));
+      var newValue = raw + step;
+      setDisplayValue(formatNumber(newValue));
+      onChange === null || onChange === void 0 || onChange({
+        target: {
+          value: newValue
+        }
+      });
+    } else {
+      inputRef.current.stepUp();
+      handleChange === null || handleChange === void 0 || handleChange({
+        target: inputRef.current
+      });
+    }
+  }, [formatThousands, displayValue, step, handleChange]);
   var stepDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
-    inputRef.current.stepDown();
-    onChange === null || onChange === void 0 || onChange({
-      target: inputRef.current
-    });
-  }, [onChange]);
+    if (formatThousands) {
+      var raw = window.Number(unformatNumber(displayValue));
+      var newValue = raw - step;
+      setDisplayValue(formatNumber(newValue));
+      onChange === null || onChange === void 0 || onChange({
+        target: {
+          value: newValue
+        }
+      });
+    } else {
+      inputRef.current.stepDown();
+      handleChange === null || handleChange === void 0 || handleChange({
+        target: inputRef.current
+      });
+    }
+  }, [formatThousands, displayValue, step, handleChange]);
   var onMouseDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
     evt.preventDefault();
   }, []);
+  var handleKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!formatThousands) {
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+      return;
+    }
+    var allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End'];
+    var isCtrlCmd = e.ctrlKey || e.metaKey;
+    // Allow: Ctrl/Cmd + C/V/X/A
+    if (isCtrlCmd && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) return;
+    var isNumber = /^[0-9]$/.test(e.key);
+    var isComma = e.key == ',';
+    if (!isNumber && !isComma && !allowedKeys.includes(e.key)) e.preventDefault();
+    if (e.key == 'ArrowUp') stepUp();else if (e.key == 'ArrowDown') stepDown();
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+  }, [stepDown, stepUp, formatThousands]);
+  var handlePaste = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!formatThousands) return;
+    var pasted = e.clipboardData.getData('text');
+    var cleaned = pasted.replace(/[^\d,]/g, '');
+    e.preventDefault();
+    var input = e.target;
+    var start = input.selectionStart;
+    var end = input.selectionEnd;
+    var newValue = input.value.slice(0, start) + cleaned + input.value.slice(end);
+    var newVal = unformatNumber(newValue);
+    setDisplayValue(formatNumber(newVal));
+    onChange === null || onChange === void 0 || onChange({
+      target: {
+        value: newVal
+      }
+    });
+  }, [formatThousands, onChange]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!focused) {
+      setDisplayValue(formatThousands && value != null ? formatNumber(value) : value);
+    }
+  }, [value, formatThousands, focused]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(NumberFieldWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(NumberInput, _extends({
     ref: (0,_util__WEBPACK_IMPORTED_MODULE_6__.mergeRefs)(inputRef, ref),
     onFocus: handleFocus,
     onBlur: handleBlur,
-    onChange: onChange,
-    readOnly: readOnly
+    onChange: handleChange,
+    readOnly: readOnly,
+    value: displayValue,
+    $formatThousands: formatThousands,
+    step: step,
+    onKeyDown: handleKeyDown,
+    onPaste: handlePaste
   }, rest)), focused && !readOnly && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Buttons, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "up",
     onClick: stepUp,
@@ -46745,33 +46847,37 @@ var NumberFieldWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default(
   displayName: "NumberFieldWrapper",
   componentId: "sc-13mfzjc-0"
 })(["flex-grow:1;display:inline-flex;"]);
-var NumberInput = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.attrs({
-  type: 'number',
-  pattern: '[0-9.]'
+var NumberInput = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.attrs(function (_ref2) {
+  var $formatThousands = _ref2.$formatThousands;
+  return {
+    type: $formatThousands ? 'text' : 'number',
+    pattern: '[0-9.]',
+    inputMode: 'numeric'
+  };
 }).withConfig({
   displayName: "NumberInput",
   componentId: "sc-13mfzjc-1"
-})(["padding:0;outline:none;border:0;width:100%;color:inherit;background:inherit;::placeholder{color:", ";}&:focus{margin-right:21px;}appearance:textfield;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;}"], function (_ref2) {
-  var color = _ref2.theme.color;
+})(["padding:0;outline:none;border:0;width:100%;color:inherit;background:inherit;::placeholder{color:", ";}&:focus{margin-right:21px;}appearance:textfield;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;}"], function (_ref3) {
+  var color = _ref3.theme.color;
   return color.text_disabled;
 });
 var Buttons = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Buttons",
   componentId: "sc-13mfzjc-2"
-})(["position:absolute;top:0;right:0;display:flex;flex-direction:column;border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;div[role=\"button\"]{box-sizing:border-box;min-height:0;height:50%;background:", ";border-left:1px solid ", ";padding:2px 4px;display:flex;align-items:center;cursor:pointer;&.up{border-top-right-radius:4px;}&.down{border-bottom-right-radius:4px;border-top:1px solid ", ";}&:hover{background:", ";svg{color:", ";}}}"], function (_ref3) {
-  var color = _ref3.theme.color;
-  return color.bg;
-}, function (_ref4) {
+})(["position:absolute;top:0;right:0;display:flex;flex-direction:column;border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;div[role=\"button\"]{box-sizing:border-box;min-height:0;height:50%;background:", ";border-left:1px solid ", ";padding:2px 4px;display:flex;align-items:center;cursor:pointer;&.up{border-top-right-radius:4px;}&.down{border-bottom-right-radius:4px;border-top:1px solid ", ";}&:hover{background:", ";svg{color:", ";}}}"], function (_ref4) {
   var color = _ref4.theme.color;
-  return color.border;
+  return color.bg;
 }, function (_ref5) {
   var color = _ref5.theme.color;
   return color.border;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.bg_fill_secondary;
+  return color.border;
 }, function (_ref7) {
   var color = _ref7.theme.color;
+  return color.bg_fill_secondary;
+}, function (_ref8) {
+  var color = _ref8.theme.color;
   return color.icon_accent;
 });
 
@@ -59141,27 +59247,25 @@ var Toast = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef
     rest = _objectWithoutProperties(_ref, _excluded);
   var _dismissible = (0,_util__WEBPACK_IMPORTED_MODULE_3__.firstDefined)(dismissible, type == 'error' || type == 'warning');
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Wrapper, _extends({
-    ref: ref,
-    $type: type
+    ref: ref
   }, (0,_util__WEBPACK_IMPORTED_MODULE_3__.pickAttrs)(rest), {
     className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.cn)(classNamePrefix, {
       wrapper: true
     }, className)
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Content, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ToastIcon, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ToastIcon, {
     type: type,
     classNamePrefix: classNamePrefix
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_6__.Paragraph, {
-    variant: "sm",
-    color: "text",
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Content, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledText, {
     className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.cn)(classNamePrefix, {
       body: true
-    })
-  }, children)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RemoveButton, {
-    onClick: onClose,
+    }),
+    color: "text_secondary",
+    variant: "sm"
+  }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RemoveButton, {
     classNamePrefix: classNamePrefix,
-    type: type,
-    dismissible: _dismissible
-  }));
+    dismissible: _dismissible,
+    onClick: onClose
+  })));
 });
 Toast.displayName = 'Toast';
 Toast.propTypes = {
@@ -59170,58 +59274,63 @@ Toast.propTypes = {
   dismissible: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)
 };
+var StyledText = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography__WEBPACK_IMPORTED_MODULE_6__.Paragraph).withConfig({
+  displayName: "StyledText",
+  componentId: "sc-tn2lqb-0"
+})(["padding:16px 12px;"]);
 var Wrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Wrapper",
-  componentId: "sc-tn2lqb-0"
-})(["display:flex;flex-direction:row;justify-content:space-between;padding:8px;gap:8px;border-radius:4px;background-color:", ";box-shadow:", ";"], function (p) {
-  return getBackgroundColor(p);
-}, function (_ref2) {
-  var shadow = _ref2.theme.shadow;
+  componentId: "sc-tn2lqb-1"
+})(["display:flex;flex-direction:row;justify-content:space-between;border-radius:8px;border:1px solid ", ";box-shadow:", ";"], function (_ref2) {
+  var color = _ref2.theme.color;
+  return color.border;
+}, function (_ref3) {
+  var shadow = _ref3.theme.shadow;
   return shadow.medium;
 });
 var Content = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Content",
-  componentId: "sc-tn2lqb-1"
-})(["display:flex;flex-direction:row;gap:8px;"]);
-var ToastIcon = function ToastIcon(_ref3) {
-  var type = _ref3.type,
-    classNamePrefix = _ref3.classNamePrefix;
+  componentId: "sc-tn2lqb-2"
+})(["display:flex;flex-direction:row;align-items:center;padding-left:12px;padding-right:8px;gap:8px;"]);
+var IconContainer = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-tn2lqb-3"
+})(["background-color:", ";border-radius:8px 0px 0px 8px;padding:16px 8px;display:flex;justify-content:center;align-items:center;"], function (p) {
+  return getBackgroundColor(p);
+});
+var ToastIcon = function ToastIcon(_ref4) {
+  var type = _ref4.type,
+    classNamePrefix = _ref4.classNamePrefix;
   var name = {
-    success: 'CheckCircle',
-    error: 'Warning',
+    success: 'Check',
+    error: 'Close',
     warning: 'Warning',
     info: 'Info',
     generic: 'Info'
   }[type] || 'Info';
-  var _color = {
-    success: 'icon_success',
-    error: 'icon_error',
-    warning: 'icon_warning',
-    info: 'icon_primary'
-  }[type] || 'icon';
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
-    name: name,
-    color: _color,
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(IconContainer, {
+    $type: type
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
     className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.cn)(classNamePrefix, {
       icon: true
     }),
-    size: "xs"
-  });
+    color: "icon_white",
+    name: name,
+    size: "sm"
+  }));
 };
-var RemoveButton = function RemoveButton(_ref4) {
-  var onClick = _ref4.onClick,
-    dismissible = _ref4.dismissible,
-    classNamePrefix = _ref4.classNamePrefix,
-    type = _ref4.type;
+var RemoveButton = function RemoveButton(_ref5) {
+  var onClick = _ref5.onClick,
+    dismissible = _ref5.dismissible,
+    classNamePrefix = _ref5.classNamePrefix;
   if (!dismissible) return null;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledRemoveButton, {
-    size: "xs",
-    icon: "CloseSmall",
-    $type: type,
-    onClick: onClick,
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
     className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.cn)(classNamePrefix, {
       dismissButton: true
-    })
+    }),
+    icon: "CloseSmall",
+    onClick: onClick,
+    size: "xs"
   });
 };
 RemoveButton.propTypes = {
@@ -59229,24 +59338,15 @@ RemoveButton.propTypes = {
   onClick: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   dismissible: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
-var StyledRemoveButton = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_icon_button__WEBPACK_IMPORTED_MODULE_5__.IconButton).withConfig({
-  displayName: "StyledRemoveButton",
-  componentId: "sc-tn2lqb-2"
-})(["border-radius:", ";min-width:16px;width:16px;min-height:16px;height:16px;background-color:", ";"], function (_ref5) {
-  var spacing = _ref5.theme.spacing;
-  return spacing['05'];
-}, function (p) {
-  return getBackgroundColor(p);
-});
 var getBackgroundColor = function getBackgroundColor(_ref6) {
   var $type = _ref6.$type,
     color = _ref6.theme.color;
   return {
-    success: color.bg_fill_success_secondary,
-    error: color.bg_fill_error_secondary,
-    warning: color.bg_fill_warning_secondary,
-    info: color.bg_fill_primary_secondary
-  }[$type] || color.bg_fill_secondary;
+    success: color.green_10,
+    error: color.bg_fill_error,
+    warning: color.bg_fill_warning,
+    info: color.bg_fill_primary
+  }[$type] || color.border_accent;
 };
 
 /***/ }),