intergalactic 15.129.0 → 15.130.0-prerelease.0

package/color-picker/lib/esm/PaletteManager.mjs

@@ -1,117 +1,135 @@
-import v from "@babel/runtime/helpers/esm/classCallCheck";
-import h from "@babel/runtime/helpers/esm/createClass";
-import i from "@babel/runtime/helpers/esm/assertThisInitialized";
-import C from "@babel/runtime/helpers/esm/inherits";
-import x from "@babel/runtime/helpers/esm/createSuper";
-import _ from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as S } from 'intergalactic/utils/lib/core/index';
-import o from "react";
-import { CORE_INSTANCE as b, sstyled as y, Component as I } from 'intergalactic/core';
-import P from 'intergalactic/divider';
-import { localizedMessages as m } from "./translations/__intergalactic-dynamic-locales.mjs";
-import k from 'intergalactic/utils/lib/enhances/i18nEnhance';
-import T from 'intergalactic/utils/lib/uniqueID';
-var w = (
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from 'intergalactic/utils/lib/core/index';
+import React from "react";
+import { CORE_INSTANCE, sstyled as sstyled$1, Component } from 'intergalactic/core';
+import Divider from 'intergalactic/divider';
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import uniqueIdEnhance from 'intergalactic/utils/lib/uniqueID';
+/*!__reshadow-styles__:"./style/color-picker.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (S.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SColorPickerPopper_15lm4_gg_{max-width:calc(var(--intergalactic-spacing-4x, 16px)*2 + 28px*6 + 4px*6);padding:var(--intergalactic-spacing-4x, 16px)}.___SItemContainer_15lm4_gg_{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid transparent;outline:0;cursor:pointer}@media (hover:hover){.___SItemContainer_15lm4_gg_:hover{border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}}.___SItemContainer_15lm4_gg_::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 1px var(--intergalactic-border-secondary, #e0e1e9);background:var(--value_15lm4)}@media (hover:hover){.___SItemContainer_15lm4_gg_:hover>.___SCloseIcon_15lm4_gg_{opacity:1}}.___SItemContainer_15lm4_gg_.__keyboardFocused_15lm4_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemContainer_15lm4_gg_.__selected_15lm4_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca)}.___SItemContainer_15lm4_gg_.__displayLabel_15lm4_gg_::after{background:var(--value_15lm4);opacity:.15}.___SItemContainer_15lm4_gg_:not(.__value_15lm4_gg_)::after{border:.9px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColorsContainer_15lm4_gg_,.___SColors_15lm4_gg_{display:flex;flex-wrap:wrap;align-items:center;gap:var(--intergalactic-spacing-1x, 4px)}.___SPaletteManager_15lm4_gg_{justify-content:space-between;margin-top:var(--intergalactic-spacing-3x, 12px);margin-left:calc(var(--intergalactic-spacing-1x, 4px) - 1px)}.___SInputContainer_15lm4_gg_,.___SPaletteManager_15lm4_gg_,.___SPlusButton_15lm4_gg_{display:flex;align-items:center}.___SPlusButton_15lm4_gg_{justify-content:center;width:28px;height:28px;border-radius:50%;cursor:pointer}@media (hover:hover){.___SPlusButton_15lm4_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SDefaultTrigger_15lm4_gg_{display:inline-flex;align-items:center;outline:0;cursor:pointer;border:0;background:0 0;padding:0}.___SDefaultTrigger_15lm4_gg_.__keyboardFocused_15lm4_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STriggerCircle_15lm4_gg_{position:relative;width:16px;height:16px;margin-right:calc(var(--intergalactic-spacing-1x, 4px) + 1px);border-radius:50%;background-color:var(--data-value_15lm4);border:1px solid transparent}.___STriggerCircle_15lm4_gg_:not([data-value]){border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STriggerCircleLine_15lm4_gg_{position:absolute;top:1px;left:1px}.___SCloseIcon_15lm4_gg_{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);opacity:0;z-index:1}.___SLine_15lm4_gg_{position:absolute}.___SLabel_15lm4_gg_{z-index:1;color:var(--data-value_15lm4);font-size:calc(var(--intergalactic-fs-100, 12px) + 1px);font-weight:var(--intergalactic-bold, 700)}.___SItemColor_15lm4_gg_{width:20px;height:20px;border-radius:50%;border:1px solid var(--intergalactic-border-secondary, #e0e1e9);background:var(--data-value_15lm4)}.___SClearConfirm_15lm4_gg_.__hidden_15lm4_gg_,.___SConfirmColor_15lm4_gg_.__hidden_15lm4_gg_{display:none}',
-    "15lm4_gg_"
-  ), {
-    __SColorPickerPopper: "___SColorPickerPopper_15lm4_gg_",
-    __SItemContainer: "___SItemContainer_15lm4_gg_",
-    __SCloseIcon: "___SCloseIcon_15lm4_gg_",
-    _keyboardFocused: "__keyboardFocused_15lm4_gg_",
-    _selected: "__selected_15lm4_gg_",
-    __SColorsContainer: "___SColorsContainer_15lm4_gg_",
-    __SColors: "___SColors_15lm4_gg_",
-    __SPaletteManager: "___SPaletteManager_15lm4_gg_",
-    __SInputContainer: "___SInputContainer_15lm4_gg_",
-    __SDefaultTrigger: "___SDefaultTrigger_15lm4_gg_",
-    __STriggerCircle: "___STriggerCircle_15lm4_gg_",
-    "--data-value": "--data-value_15lm4",
-    __STriggerCircleLine: "___STriggerCircleLine_15lm4_gg_",
-    __SLine: "___SLine_15lm4_gg_",
-    __SLabel: "___SLabel_15lm4_gg_",
-    __SItemColor: "___SItemColor_15lm4_gg_",
-    __SConfirmColor: "___SConfirmColor_15lm4_gg_",
-    _hidden: "__hidden_15lm4_gg_",
-    __SClearConfirm: "___SClearConfirm_15lm4_gg_",
-    "--value": "--value_15lm4",
-    _displayLabel: "__displayLabel_15lm4_gg_",
-    _value: "__value_15lm4_gg_",
-    __SPlusButton: "___SPlusButton_15lm4_gg_"
+    '.___SColorPickerPopper_1uje6_gg_{max-width:calc(var(--intergalactic-spacing-4x, 16px)*2 + 28px*6 + 4px*6);padding:var(--intergalactic-spacing-4x, 16px)}.___SItemContainer_1uje6_gg_{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid transparent;outline:0;cursor:pointer}@media (hover:hover){.___SItemContainer_1uje6_gg_:hover{border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}}.___SItemContainer_1uje6_gg_::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 1px var(--intergalactic-border-secondary, #e0e1e9);background:var(--value_1uje6)}@media (hover:hover){.___SItemContainer_1uje6_gg_:hover>.___SCloseIcon_1uje6_gg_{opacity:1}}.___SItemContainer_1uje6_gg_.__keyboardFocused_1uje6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemContainer_1uje6_gg_.__selected_1uje6_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca)}.___SItemContainer_1uje6_gg_.__displayLabel_1uje6_gg_::after{background:var(--value_1uje6);opacity:.15}.___SItemContainer_1uje6_gg_:not(.__value_1uje6_gg_)::after{border:.9px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColorsContainer_1uje6_gg_,.___SColors_1uje6_gg_{display:flex;flex-wrap:wrap;align-items:center;gap:var(--intergalactic-spacing-1x, 4px)}.___SPaletteManager_1uje6_gg_{justify-content:space-between;margin-top:var(--intergalactic-spacing-3x, 12px);margin-left:calc(var(--intergalactic-spacing-1x, 4px) - 1px)}.___SInputContainer_1uje6_gg_,.___SPaletteManager_1uje6_gg_,.___SPlusButton_1uje6_gg_{display:flex;align-items:center}.___SPlusButton_1uje6_gg_{justify-content:center;width:28px;height:28px;border-radius:50%;cursor:pointer}@media (hover:hover){.___SPlusButton_1uje6_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SDefaultTrigger_1uje6_gg_{display:inline-flex;align-items:center;outline:0;cursor:pointer;border:0;background:0 0;padding:0}.___SDefaultTrigger_1uje6_gg_.__keyboardFocused_1uje6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STriggerCircle_1uje6_gg_{position:relative;width:16px;height:16px;margin-right:calc(var(--intergalactic-spacing-1x, 4px) + 1px);border-radius:50%;background-color:var(--data-value_1uje6);border:1px solid transparent}.___STriggerCircle_1uje6_gg_:not([data-value]){border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STriggerCircleLine_1uje6_gg_{position:absolute;top:1px;left:1px}.___SCloseIcon_1uje6_gg_{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);opacity:0;z-index:1}.___SLine_1uje6_gg_{position:absolute}.___SLabel_1uje6_gg_{z-index:1;color:var(--data-value_1uje6);font-size:calc(var(--intergalactic-fs-100, 12px) + 1px);font-weight:var(--intergalactic-bold, 700)}.___SItemColor_1uje6_gg_{width:20px;height:20px;border-radius:50%;border:1px solid var(--intergalactic-border-secondary, #e0e1e9);background:var(--data-value_1uje6)}.___SClearConfirm_1uje6_gg_.__hidden_1uje6_gg_,.___SConfirmColor_1uje6_gg_.__hidden_1uje6_gg_{display:none}',
+    /*__inner_css_end__*/
+    "1uje6_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SColorPickerPopper": "___SColorPickerPopper_1uje6_gg_",
+    "__SItemContainer": "___SItemContainer_1uje6_gg_",
+    "__SCloseIcon": "___SCloseIcon_1uje6_gg_",
+    "_keyboardFocused": "__keyboardFocused_1uje6_gg_",
+    "_selected": "__selected_1uje6_gg_",
+    "__SColorsContainer": "___SColorsContainer_1uje6_gg_",
+    "__SColors": "___SColors_1uje6_gg_",
+    "__SPaletteManager": "___SPaletteManager_1uje6_gg_",
+    "__SInputContainer": "___SInputContainer_1uje6_gg_",
+    "__SDefaultTrigger": "___SDefaultTrigger_1uje6_gg_",
+    "__STriggerCircle": "___STriggerCircle_1uje6_gg_",
+    "--data-value": "--data-value_1uje6",
+    "__STriggerCircleLine": "___STriggerCircleLine_1uje6_gg_",
+    "__SLine": "___SLine_1uje6_gg_",
+    "__SLabel": "___SLabel_1uje6_gg_",
+    "__SItemColor": "___SItemColor_1uje6_gg_",
+    "__SConfirmColor": "___SConfirmColor_1uje6_gg_",
+    "_hidden": "__hidden_1uje6_gg_",
+    "__SClearConfirm": "___SClearConfirm_1uje6_gg_",
+    "--value": "--value_1uje6",
+    "_displayLabel": "__displayLabel_1uje6_gg_",
+    "_value": "__value_1uje6_gg_",
+    "__SPlusButton": "___SPlusButton_1uje6_gg_"
   })
-), L = [k(m), T()], d = /* @__PURE__ */ function(p) {
-  C(g, p);
-  var u = x(g);
-  function g() {
-    var e;
-    v(this, g);
-    for (var t = arguments.length, n = new Array(t), a = 0; a < t; a++)
-      n[a] = arguments[a];
-    return e = u.call.apply(u, [this].concat(n)), _(i(e), "refInput", /* @__PURE__ */ o.createRef()), _(i(e), "state", {
-      focus: !1
-    }), _(i(e), "bindHandlerItemRemove", function(r) {
-      return function(l) {
-        l.stopPropagation();
-        var s = e.asProps.colors, c = s === void 0 ? [] : s;
-        e.handlers.colors(c.filter(function(f) {
-          return f !== r;
-        }), l);
+);
+var enhance = [i18nEnhance(localizedMessages), uniqueIdEnhance()];
+var PaletteManagerRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(PaletteManagerRoot2, _Component);
+  var _super = _createSuper(PaletteManagerRoot2);
+  function PaletteManagerRoot2() {
+    var _this;
+    _classCallCheck(this, PaletteManagerRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "refInput", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      focus: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerItemRemove", function(value) {
+      return function(event) {
+        event.stopPropagation();
+        var _this$asProps$colors = _this.asProps.colors, colors = _this$asProps$colors === void 0 ? [] : _this$asProps$colors;
+        _this.handlers.colors(colors.filter(function(color) {
+          return color !== value;
+        }), event);
       };
-    }), _(i(e), "bindHandlerItemAdd", function() {
-      return function(r, l) {
-        var s = e.asProps.colors, c = s === void 0 ? [] : s;
-        c.includes(r) || e.handlers.colors(c.concat(r), l);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerItemAdd", function() {
+      return function(value, event) {
+        var _this$asProps$colors2 = _this.asProps.colors, colors = _this$asProps$colors2 === void 0 ? [] : _this$asProps$colors2;
+        if (!colors.includes(value)) {
+          _this.handlers.colors(colors.concat(value), event);
+        }
       };
-    }), _(i(e), "bindHandlerButtonClick", function() {
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerButtonClick", function() {
       return function() {
-        var r;
-        (r = e.refInput.current) === null || r === void 0 || r.focus(), e.onFocus();
+        var _this$refInput$curren;
+        (_this$refInput$curren = _this.refInput.current) === null || _this$refInput$curren === void 0 ? void 0 : _this$refInput$curren.focus();
+        _this.onFocus();
       };
-    }), _(i(e), "onFocus", function() {
-      return e.setState({
-        focus: !0
+    });
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function() {
+      return _this.setState({
+        focus: true
       });
-    }), _(i(e), "onBlur", function() {
-      return e.setState({
-        focus: !1
+    });
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function() {
+      return _this.setState({
+        focus: false
       });
-    }), e;
+    });
+    return _this;
   }
-  return h(g, [{
+  _createClass(PaletteManagerRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
+    value: function uncontrolledProps() {
       return {
         colors: []
       };
     }
   }, {
     key: "getColorsProps",
-    value: function() {
-      var t = this.asProps.colors;
+    value: function getColorsProps() {
+      var colors = this.asProps.colors;
       return {
-        colors: t,
-        editable: !0,
+        colors,
+        editable: true,
         onPlusButtonClick: this.bindHandlerButtonClick(),
         getI18nText: this.asProps.getI18nText
       };
     }
   }, {
     key: "getItemProps",
-    value: function(t) {
-      var n = t.value, a = this.asProps.uid;
+    value: function getItemProps(_ref2) {
+      var value = _ref2.value;
+      var uid = this.asProps.uid;
       return {
-        uid: a,
-        editable: !0,
-        onRemove: this.bindHandlerItemRemove(n),
+        uid,
+        editable: true,
+        onRemove: this.bindHandlerItemRemove(value),
         getI18nText: this.asProps.getI18nText
       };
     }
   }, {
     key: "getInputColorProps",
-    value: function() {
+    value: function getInputColorProps() {
       return {
         ref: this.refInput,
         onAdd: this.bindHandlerItemAdd(),
@@ -123,23 +141,26 @@ var w = (
     }
   }, {
     key: "render",
-    value: function() {
-      var t, n = this.asProps, a = n.styles, r = n.Children, l = this[b];
-      return t = y(a), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(P, t.cn("Divider", {
-        mt: 3,
-        mb: 3
-      })), r.origin ? /* @__PURE__ */ o.createElement(r, t.cn("Children", {})) : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(l.Colors, null), /* @__PURE__ */ o.createElement(l.InputColor, null)));
+    value: function render() {
+      var _ref;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children;
+      var PaletteManager = this[CORE_INSTANCE];
+      return _ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, _ref.cn("Divider", {
+        "mt": 3,
+        "mb": 3
+      })), Children.origin ? /* @__PURE__ */ React.createElement(Children, _ref.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PaletteManager.Colors, null), /* @__PURE__ */ React.createElement(PaletteManager.InputColor, null)));
     }
-  }]), g;
-}(I);
-_(d, "displayName", "PaletteManager");
-_(d, "style", w);
-_(d, "enhance", L);
-_(d, "defaultProps", {
+  }]);
+  return PaletteManagerRoot2;
+}(Component);
+_defineProperty(PaletteManagerRoot, "displayName", "PaletteManager");
+_defineProperty(PaletteManagerRoot, "style", style);
+_defineProperty(PaletteManagerRoot, "enhance", enhance);
+_defineProperty(PaletteManagerRoot, "defaultProps", {
   defaultColors: [],
-  i18n: m,
+  i18n: localizedMessages,
   locale: "en"
 });
 export {
-  d as default
+  PaletteManagerRoot as default
 };

package/color-picker/lib/esm/components/InputColor.mjs

@@ -1,95 +1,118 @@
-import F from "@babel/runtime/helpers/esm/objectSpread2";
-import T from "@babel/runtime/helpers/esm/classCallCheck";
-import L from "@babel/runtime/helpers/esm/createClass";
-import v from "@babel/runtime/helpers/esm/assertThisInitialized";
-import E from "@babel/runtime/helpers/esm/inherits";
-import M from "@babel/runtime/helpers/esm/createSuper";
-import d from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as B } from 'intergalactic/utils/lib/core/index';
-import D, { sstyled as j, assignProps as A, Component as V } from 'intergalactic/core';
-import l from "react";
-import { Box as h } from 'intergalactic/flex-box';
-import f from 'intergalactic/input';
-import z from 'intergalactic/icon/Check/m';
-import R from 'intergalactic/icon/Close/m';
-var H = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from 'intergalactic/utils/lib/core/index';
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from 'intergalactic/core';
+import React from "react";
+import { Box } from 'intergalactic/flex-box';
+import Input from 'intergalactic/input';
+import CheckM from 'intergalactic/icon/Check/m';
+import CloseM from 'intergalactic/icon/Close/m';
+/*!__reshadow-styles__:"../style/color-picker.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (B.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SColorPickerPopper_15lm4_gg_{max-width:calc(var(--intergalactic-spacing-4x, 16px)*2 + 28px*6 + 4px*6);padding:var(--intergalactic-spacing-4x, 16px)}.___SItemContainer_15lm4_gg_{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid transparent;outline:0;cursor:pointer}@media (hover:hover){.___SItemContainer_15lm4_gg_:hover{border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}}.___SItemContainer_15lm4_gg_::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 1px var(--intergalactic-border-secondary, #e0e1e9);background:var(--value_15lm4)}@media (hover:hover){.___SItemContainer_15lm4_gg_:hover>.___SCloseIcon_15lm4_gg_{opacity:1}}.___SItemContainer_15lm4_gg_.__keyboardFocused_15lm4_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemContainer_15lm4_gg_.__selected_15lm4_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca)}.___SItemContainer_15lm4_gg_.__displayLabel_15lm4_gg_::after{background:var(--value_15lm4);opacity:.15}.___SItemContainer_15lm4_gg_:not(.__value_15lm4_gg_)::after{border:.9px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColorsContainer_15lm4_gg_,.___SColors_15lm4_gg_{display:flex;flex-wrap:wrap;align-items:center;gap:var(--intergalactic-spacing-1x, 4px)}.___SPaletteManager_15lm4_gg_{justify-content:space-between;margin-top:var(--intergalactic-spacing-3x, 12px);margin-left:calc(var(--intergalactic-spacing-1x, 4px) - 1px)}.___SInputContainer_15lm4_gg_,.___SPaletteManager_15lm4_gg_,.___SPlusButton_15lm4_gg_{display:flex;align-items:center}.___SPlusButton_15lm4_gg_{justify-content:center;width:28px;height:28px;border-radius:50%;cursor:pointer}@media (hover:hover){.___SPlusButton_15lm4_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SDefaultTrigger_15lm4_gg_{display:inline-flex;align-items:center;outline:0;cursor:pointer;border:0;background:0 0;padding:0}.___SDefaultTrigger_15lm4_gg_.__keyboardFocused_15lm4_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STriggerCircle_15lm4_gg_{position:relative;width:16px;height:16px;margin-right:calc(var(--intergalactic-spacing-1x, 4px) + 1px);border-radius:50%;background-color:var(--data-value_15lm4);border:1px solid transparent}.___STriggerCircle_15lm4_gg_:not([data-value]){border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STriggerCircleLine_15lm4_gg_{position:absolute;top:1px;left:1px}.___SCloseIcon_15lm4_gg_{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);opacity:0;z-index:1}.___SLine_15lm4_gg_{position:absolute}.___SLabel_15lm4_gg_{z-index:1;color:var(--data-value_15lm4);font-size:calc(var(--intergalactic-fs-100, 12px) + 1px);font-weight:var(--intergalactic-bold, 700)}.___SItemColor_15lm4_gg_{width:20px;height:20px;border-radius:50%;border:1px solid var(--intergalactic-border-secondary, #e0e1e9);background:var(--data-value_15lm4)}.___SClearConfirm_15lm4_gg_.__hidden_15lm4_gg_,.___SConfirmColor_15lm4_gg_.__hidden_15lm4_gg_{display:none}',
-    "15lm4_gg_"
-  ), {
-    __SColorPickerPopper: "___SColorPickerPopper_15lm4_gg_",
-    __SItemContainer: "___SItemContainer_15lm4_gg_",
-    __SCloseIcon: "___SCloseIcon_15lm4_gg_",
-    _keyboardFocused: "__keyboardFocused_15lm4_gg_",
-    _selected: "__selected_15lm4_gg_",
-    __SColorsContainer: "___SColorsContainer_15lm4_gg_",
-    __SColors: "___SColors_15lm4_gg_",
-    __SPaletteManager: "___SPaletteManager_15lm4_gg_",
-    __SInputContainer: "___SInputContainer_15lm4_gg_",
-    __SDefaultTrigger: "___SDefaultTrigger_15lm4_gg_",
-    __STriggerCircle: "___STriggerCircle_15lm4_gg_",
-    "--data-value": "--data-value_15lm4",
-    __STriggerCircleLine: "___STriggerCircleLine_15lm4_gg_",
-    __SLine: "___SLine_15lm4_gg_",
-    __SLabel: "___SLabel_15lm4_gg_",
-    __SItemColor: "___SItemColor_15lm4_gg_",
-    __SConfirmColor: "___SConfirmColor_15lm4_gg_",
-    _hidden: "__hidden_15lm4_gg_",
-    __SClearConfirm: "___SClearConfirm_15lm4_gg_",
-    "--value": "--value_15lm4",
-    _displayLabel: "__displayLabel_15lm4_gg_",
-    _value: "__value_15lm4_gg_",
-    __SPlusButton: "___SPlusButton_15lm4_gg_"
+    '.___SColorPickerPopper_1uje6_gg_{max-width:calc(var(--intergalactic-spacing-4x, 16px)*2 + 28px*6 + 4px*6);padding:var(--intergalactic-spacing-4x, 16px)}.___SItemContainer_1uje6_gg_{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid transparent;outline:0;cursor:pointer}@media (hover:hover){.___SItemContainer_1uje6_gg_:hover{border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}}.___SItemContainer_1uje6_gg_::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 1px var(--intergalactic-border-secondary, #e0e1e9);background:var(--value_1uje6)}@media (hover:hover){.___SItemContainer_1uje6_gg_:hover>.___SCloseIcon_1uje6_gg_{opacity:1}}.___SItemContainer_1uje6_gg_.__keyboardFocused_1uje6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemContainer_1uje6_gg_.__selected_1uje6_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca)}.___SItemContainer_1uje6_gg_.__displayLabel_1uje6_gg_::after{background:var(--value_1uje6);opacity:.15}.___SItemContainer_1uje6_gg_:not(.__value_1uje6_gg_)::after{border:.9px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColorsContainer_1uje6_gg_,.___SColors_1uje6_gg_{display:flex;flex-wrap:wrap;align-items:center;gap:var(--intergalactic-spacing-1x, 4px)}.___SPaletteManager_1uje6_gg_{justify-content:space-between;margin-top:var(--intergalactic-spacing-3x, 12px);margin-left:calc(var(--intergalactic-spacing-1x, 4px) - 1px)}.___SInputContainer_1uje6_gg_,.___SPaletteManager_1uje6_gg_,.___SPlusButton_1uje6_gg_{display:flex;align-items:center}.___SPlusButton_1uje6_gg_{justify-content:center;width:28px;height:28px;border-radius:50%;cursor:pointer}@media (hover:hover){.___SPlusButton_1uje6_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SDefaultTrigger_1uje6_gg_{display:inline-flex;align-items:center;outline:0;cursor:pointer;border:0;background:0 0;padding:0}.___SDefaultTrigger_1uje6_gg_.__keyboardFocused_1uje6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STriggerCircle_1uje6_gg_{position:relative;width:16px;height:16px;margin-right:calc(var(--intergalactic-spacing-1x, 4px) + 1px);border-radius:50%;background-color:var(--data-value_1uje6);border:1px solid transparent}.___STriggerCircle_1uje6_gg_:not([data-value]){border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STriggerCircleLine_1uje6_gg_{position:absolute;top:1px;left:1px}.___SCloseIcon_1uje6_gg_{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);opacity:0;z-index:1}.___SLine_1uje6_gg_{position:absolute}.___SLabel_1uje6_gg_{z-index:1;color:var(--data-value_1uje6);font-size:calc(var(--intergalactic-fs-100, 12px) + 1px);font-weight:var(--intergalactic-bold, 700)}.___SItemColor_1uje6_gg_{width:20px;height:20px;border-radius:50%;border:1px solid var(--intergalactic-border-secondary, #e0e1e9);background:var(--data-value_1uje6)}.___SClearConfirm_1uje6_gg_.__hidden_1uje6_gg_,.___SConfirmColor_1uje6_gg_.__hidden_1uje6_gg_{display:none}',
+    /*__inner_css_end__*/
+    "1uje6_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SColorPickerPopper": "___SColorPickerPopper_1uje6_gg_",
+    "__SItemContainer": "___SItemContainer_1uje6_gg_",
+    "__SCloseIcon": "___SCloseIcon_1uje6_gg_",
+    "_keyboardFocused": "__keyboardFocused_1uje6_gg_",
+    "_selected": "__selected_1uje6_gg_",
+    "__SColorsContainer": "___SColorsContainer_1uje6_gg_",
+    "__SColors": "___SColors_1uje6_gg_",
+    "__SPaletteManager": "___SPaletteManager_1uje6_gg_",
+    "__SInputContainer": "___SInputContainer_1uje6_gg_",
+    "__SDefaultTrigger": "___SDefaultTrigger_1uje6_gg_",
+    "__STriggerCircle": "___STriggerCircle_1uje6_gg_",
+    "--data-value": "--data-value_1uje6",
+    "__STriggerCircleLine": "___STriggerCircleLine_1uje6_gg_",
+    "__SLine": "___SLine_1uje6_gg_",
+    "__SLabel": "___SLabel_1uje6_gg_",
+    "__SItemColor": "___SItemColor_1uje6_gg_",
+    "__SConfirmColor": "___SConfirmColor_1uje6_gg_",
+    "_hidden": "__hidden_1uje6_gg_",
+    "__SClearConfirm": "___SClearConfirm_1uje6_gg_",
+    "--value": "--value_1uje6",
+    "_displayLabel": "__displayLabel_1uje6_gg_",
+    "_value": "__value_1uje6_gg_",
+    "__SPlusButton": "___SPlusButton_1uje6_gg_"
   })
 );
-function K(o) {
-  if (o[0] !== "#" && o.length === 7) return !1;
-  var i = /^#([0-9a-f]{3,4}){1,2}$/i;
-  return o[0] === "#" ? i.test(o) : i.test("#".concat(o));
+function isValidHex(hex) {
+  if (hex[0] !== "#" && hex.length === 7) return false;
+  var reg = /^#([0-9a-f]{3,4}){1,2}$/i;
+  return hex[0] === "#" ? reg.test(hex) : reg.test("#".concat(hex));
 }
-function N(o, i) {
-  var g = this, e;
+function debounce(func, timeout) {
+  var _this = this;
+  var timer;
   return function() {
-    for (var c = arguments.length, r = new Array(c), _ = 0; _ < c; _++)
-      r[_] = arguments[_];
-    clearTimeout(e), e = setTimeout(function() {
-      o.apply(g, r);
-    }, i);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timer);
+    timer = setTimeout(function() {
+      func.apply(_this, args);
+    }, timeout);
   };
 }
-var C = /* @__PURE__ */ function(o) {
-  E(g, o);
-  var i = M(g);
-  function g() {
-    var e;
-    T(this, g);
-    for (var c = arguments.length, r = new Array(c), _ = 0; _ < c; _++)
-      r[_] = arguments[_];
-    return e = i.call.apply(i, [this].concat(r)), d(v(e), "handlerAdd", function(a) {
-      var p = e.asProps, t = p.value, S = p.state;
-      if (t.length !== 0 && S === "normal") {
-        if (t[0] === "#") {
-          var m, s;
-          (m = e.asProps) === null || m === void 0 || (s = m.onAdd) === null || s === void 0 || s.call(m, t.toLowerCase(), a);
+var InputColorRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(InputColorRoot2, _Component);
+  var _super = _createSuper(InputColorRoot2);
+  function InputColorRoot2() {
+    var _this2;
+    _classCallCheck(this, InputColorRoot2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "handlerAdd", function(event) {
+      var _ref3 = _this2.asProps, value = _ref3.value, state = _ref3.state;
+      if (value.length !== 0 && state === "normal") {
+        if (value[0] === "#") {
+          var _this2$asProps, _this2$asProps$onAdd;
+          (_this2$asProps = _this2.asProps) === null || _this2$asProps === void 0 ? void 0 : (_this2$asProps$onAdd = _this2$asProps.onAdd) === null || _this2$asProps$onAdd === void 0 ? void 0 : _this2$asProps$onAdd.call(_this2$asProps, value.toLowerCase(), event);
+        } else {
+          var _this2$asProps2, _this2$asProps2$onAdd;
+          (_this2$asProps2 = _this2.asProps) === null || _this2$asProps2 === void 0 ? void 0 : (_this2$asProps2$onAdd = _this2$asProps2.onAdd) === null || _this2$asProps2$onAdd === void 0 ? void 0 : _this2$asProps2$onAdd.call(_this2$asProps2, "#".concat(value.toLowerCase()), event);
+        }
+        _this2.handlers.value("", event);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handlerCancel", function(event) {
+      _this2.handlers.value("", event);
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handlerChange", debounce(function(value) {
+      if (value.length !== 0) {
+        if (isValidHex(value)) {
+          _this2.handlers.state("normal");
         } else {
-          var n, u;
-          (n = e.asProps) === null || n === void 0 || (u = n.onAdd) === null || u === void 0 || u.call(n, "#".concat(t.toLowerCase()), a);
+          _this2.handlers.state("invalid");
         }
-        e.handlers.value("", a);
+      } else {
+        _this2.handlers.state("normal");
+      }
+    }, 300));
+    _defineProperty(_assertThisInitialized(_this2), "handlekeyDown", function(event) {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        _this2.handlerAdd(event);
       }
-    }), d(v(e), "handlerCancel", function(a) {
-      e.handlers.value("", a);
-    }), d(v(e), "handlerChange", N(function(a) {
-      a.length !== 0 ? K(a) ? e.handlers.state("normal") : e.handlers.state("invalid") : e.handlers.state("normal");
-    }, 300)), d(v(e), "handlekeyDown", function(a) {
-      a.key === "Enter" && (a.preventDefault(), e.handlerAdd(a));
-    }), e;
+    });
+    return _this2;
   }
-  return L(g, [{
+  _createClass(InputColorRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
+    value: function uncontrolledProps() {
       return {
         value: "",
         state: null
@@ -97,55 +120,65 @@ var C = /* @__PURE__ */ function(o) {
     }
   }, {
     key: "render",
-    value: function() {
-      var c = this.asProps, r, _ = this.asProps, a = _.styles, p = _.state, t = _.value, S = _.onFocus, m = _.onBlur, s = _.focus, n = _.getI18nText, u = h, x = f.Value, b = "div", y = "div", I = f.Addon, w = f.Addon, k = h, P = (t == null ? void 0 : t[0]) === "#" ? t : t ? "#".concat(t) : null;
-      return r = j(a), /* @__PURE__ */ l.createElement(u, r.cn("SPaletteManager", {}), /* @__PURE__ */ l.createElement(k, r.cn("SItemColor", {
-        "data-value": P
-      })), /* @__PURE__ */ l.createElement(y, r.cn("SInputContainer", {}), /* @__PURE__ */ l.createElement("span", r.cn("span", {
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, state = _this$asProps.state, value = _this$asProps.value, onFocus = _this$asProps.onFocus, onBlur = _this$asProps.onBlur, focus = _this$asProps.focus, getI18nText = _this$asProps.getI18nText;
+      var SPaletteManager = Box;
+      var SInputValue = Input.Value;
+      var SInput = "div";
+      var SInputContainer = "div";
+      var SConfirmColor = Input.Addon;
+      var SClearConfirm = Input.Addon;
+      var SItemColor = Box;
+      var valueColor = (value === null || value === void 0 ? void 0 : value[0]) === "#" ? value : value ? "#".concat(value) : null;
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPaletteManager, _ref2.cn("SPaletteManager", {}), /* @__PURE__ */ React.createElement(SItemColor, _ref2.cn("SItemColor", {
+        "data-value": valueColor
+      })), /* @__PURE__ */ React.createElement(SInputContainer, _ref2.cn("SInputContainer", {}), /* @__PURE__ */ React.createElement("span", _ref2.cn("span", {
         "aria-hidden": "true"
-      }), "#"), /* @__PURE__ */ l.createElement(b, r.cn("SInput", {}), /* @__PURE__ */ l.createElement(f, r.cn("Input", {
-        ml: 1,
-        w: 135,
-        state: p,
-        onKeyDown: this.handlekeyDown
-      }), /* @__PURE__ */ l.createElement(x, r.cn("SInputValue", F({}, A({
-        placeholder: "FFFFFF",
-        "aria-label": n("colorField"),
-        onChange: this.handlerChange,
-        maxLength: 7,
-        onFocus: S,
-        onBlur: m
-      }, c)))), /* @__PURE__ */ l.createElement(I, r.cn("SConfirmColor", {
+      }), "#"), /* @__PURE__ */ React.createElement(SInput, _ref2.cn("SInput", {}), /* @__PURE__ */ React.createElement(Input, _ref2.cn("Input", {
+        "ml": 1,
+        "w": 135,
+        "state": state,
+        "onKeyDown": this.handlekeyDown
+      }), /* @__PURE__ */ React.createElement(SInputValue, _ref2.cn("SInputValue", _objectSpread({}, assignProps({
+        "placeholder": "FFFFFF",
+        "aria-label": getI18nText("colorField"),
+        "onChange": this.handlerChange,
+        "maxLength": 7,
+        "onFocus": onFocus,
+        "onBlur": onBlur
+      }, _ref)))), /* @__PURE__ */ React.createElement(SConfirmColor, _ref2.cn("SConfirmColor", {
         "aria-hidden": "true",
-        "aria-label": n("colorFieldConfirm"),
-        role: "button",
-        interactive: !0,
-        onClick: this.handlerAdd,
-        pr: "4px",
-        hidden: !s
-      }), /* @__PURE__ */ l.createElement(z, r.cn("CheckM", {
-        color: "green-300"
-      }))), /* @__PURE__ */ l.createElement(w, r.cn("SClearConfirm", {
+        "aria-label": getI18nText("colorFieldConfirm"),
+        "role": "button",
+        "interactive": true,
+        "onClick": this.handlerAdd,
+        "pr": "4px",
+        "hidden": !focus
+      }), /* @__PURE__ */ React.createElement(CheckM, _ref2.cn("CheckM", {
+        "color": "green-300"
+      }))), /* @__PURE__ */ React.createElement(SClearConfirm, _ref2.cn("SClearConfirm", {
         "aria-hidden": "true",
-        "aria-label": n("colorFieldClear"),
-        role: "button",
-        interactive: !0,
-        onClick: this.handlerCancel,
-        pl: "4px",
-        hidden: !s
-      }), /* @__PURE__ */ l.createElement(R, r.cn("CloseM", {
-        color: "gray-300"
+        "aria-label": getI18nText("colorFieldClear"),
+        "role": "button",
+        "interactive": true,
+        "onClick": this.handlerCancel,
+        "pl": "4px",
+        "hidden": !focus
+      }), /* @__PURE__ */ React.createElement(CloseM, _ref2.cn("CloseM", {
+        "color": "gray-300"
       })))))));
     }
-  }]), g;
-}(V);
-d(C, "displayName", "InputColor");
-d(C, "style", H);
-d(C, "defaultProps", {
+  }]);
+  return InputColorRoot2;
+}(Component);
+_defineProperty(InputColorRoot, "displayName", "InputColor");
+_defineProperty(InputColorRoot, "style", style);
+_defineProperty(InputColorRoot, "defaultProps", {
   defaultValue: "",
   defaultState: "normal"
 });
-var ae = D(C);
+var InputColor = createComponent(InputColorRoot);
 export {
-  ae as InputColor
+  InputColor
 };