@dreamcommerce/aurora 2.12.1-3 → 2.12.1-31

package/build/cjs/external/react-best-gradient-color-picker/external/tinycolor2/tinycolor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js

@@ -7,22 +7,25 @@ var useTranslation = require('../../../../../../external/react-i18next/dist/es/u
 var index$1 = require('../../button/index.js');
 var index = require('../../dropdown/context/index.js');
 var css_classes = require('../css_classes.js');
+var context = require('../context.js');
+var utilities = require('../utilities.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ColorPickerFooter = ({ onCancel, onSave, color }) => {
-    const { toggleDropdown } = React.useContext(index.DropdownContext);
+const ColorPickerFooter = () => {
+    const { closeDropdown } = React.useContext(index.DropdownContext);
+    const { color, handleCancel, handleSave } = React.useContext(context.ColorPickerNewContext);
     const [t] = useTranslation.useTranslation();
     const handleCancelButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
     };
     const handleSaveButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-        onSave(color);
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleSave(utilities.getAllColorTypes(color));
     };
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerFooter]}` },
         React__default['default'].createElement(index$1['default'], { size: "small", variant: "outline", onClick: handleCancelButton }, t('cancel')),

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var index = require('../../dropdown/context/index.js');
 var css_classes = require('../css_classes.js');
+var context = require('../context.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var icon_close = require('../../../assets/icon_close.js');
 
@@ -12,14 +14,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ColorPickerHeader = ({ text, onCancel }) => {
-    const { toggleDropdown } = React.useContext(index.DropdownContext);
+const ColorPickerHeader = () => {
+    const { handleCancel } = React.useContext(context.ColorPickerNewContext);
+    const [t] = useTranslation.useTranslation();
+    const { closeDropdown, isOpen } = React.useContext(index.DropdownContext);
     const handleCancelButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        closePicker();
     };
+    const closePicker = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+    };
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        document.addEventListener('visibilitychange', closePicker);
+        return () => document.removeEventListener('visibilitychange', closePicker);
+    }, [isOpen]);
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHeader]}` },
-        text,
+        t('Select color'),
         React__default['default'].createElement("button", { onClick: handleCancelButton, className: `${main_module['default'][css_classes.cssColorPickerCloseIcon]}` },
             React__default['default'].createElement(icon_close['default'], { size: "m" }))));
 };

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var utilities = require('../utilities.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,16 +14,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 const ColorPickerSwatch = ({ color, size, onClick }) => {
-    const { r, g, b, a } = color;
+    const colorTiny = utilities.getTinyColorInstance(color);
+    const colorHex = utilities.getHexValueString(colorTiny);
     const colorHolderClassNames = classnames__default['default'](main_module['default'][css_classes.cssColorPickerSwatch], {
         [main_module['default'][css_classes.cssColorPickerSwatchSmall]]: size === 'small',
         [main_module['default'][css_classes.cssColorPickerSwatchBig]]: size === 'big'
     });
     const handleOnClick = () => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(color);
+        onClick === null || onClick === void 0 ? void 0 : onClick(colorHex);
     };
     return (React__default['default'].createElement("div", { className: colorHolderClassNames, onClick: handleOnClick },
-        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchFill], style: { backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})` } })));
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchFill], style: { backgroundColor: `${colorHex}` } })));
 };
 
 exports.ColorPickerSwatch = ColorPickerSwatch;

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js

@@ -2,27 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const COLOR_PICKER_INITIAL_STATE = {
-    hsla: {
-        h: 0,
-        s: 0,
-        l: 0,
-        a: 0
-    },
-    hsva: {
-        h: 0,
-        s: 0,
-        v: 0,
-        a: 0
-    },
-    rgba: {
-        r: 0,
-        g: 0,
-        b: 0,
-        a: 0
-    },
-    hex: ''
-};
+const COLOR_PICKER_INITIAL_STATE = '#000000';
+const COLOR_PICKER_WIDTH = 220;
+const COLOR_PICKER_HEIGHT = 200;
 
+exports.COLOR_PICKER_HEIGHT = COLOR_PICKER_HEIGHT;
 exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
+exports.COLOR_PICKER_WIDTH = COLOR_PICKER_WIDTH;
 //# sourceMappingURL=constants.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/context.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const ColorPickerNewContext = React.createContext({
+    color: '',
+    setColor: () => { },
+    hex: '',
+    hslArr: [],
+    setHue: () => { },
+    setSaturation: () => { },
+    setLightness: () => { },
+    handleOnChangeAlpha: () => { },
+    alphaValue: '',
+    rgbaArr: [],
+    setR: () => { },
+    setG: () => { },
+    setB: () => { },
+    handleCancel: () => { },
+    handleSave: () => { },
+    handlePickSwatch: () => { }
+});
+
+exports.ColorPickerNewContext = ColorPickerNewContext;
+//# sourceMappingURL=context.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js

@@ -4,47 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const cssColorPicker = 'color-picker';
 const cssColorPickerContainer = 'color-picker__container';
+const cssColorPickerRbgcp = 'color-picker__rbgcp';
 const cssColorPickerHeader = 'color-picker__header';
 const cssColorPickerCloseIcon = 'color-picker__close-icon';
-const cssColorPickerSwatches = 'color-picker__swatches';
-const cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
-const cssColorPickerSwatchesContent = 'color-picker__swatches-content';
 const cssColorPickerSwatch = 'color-picker__swatch';
 const cssColorPickerSwatchSmall = 'color-picker__swatch_small';
 const cssColorPickerSwatchBig = 'color-picker__swatch_big';
 const cssColorPickerSwatchFill = 'color-picker__swatch-fill';
 const cssColorPickerInputColorSwatchContainer = 'color-picker__input-color-swatch-container';
 const cssColorPickerInputContainer = 'color-picker__input-container';
-const cssColorPickerHandler = 'color-picker__handler';
-const cssColorPickerHandlerBig = 'color-picker__handler_big';
-const cssColorPickerSaturation = 'color-picker__saturation';
-const cssColorPickerHueAlphaContanier = 'color-picker__hue-alpha-container';
-const cssColorPickerHueAlphaContanierSet = 'color-picker__hue-alpha-container-set';
-const cssColorPickerHueAlphaContanierResult = 'color-picker__hue-alpha-container-result';
-const cssColorPickerHue = 'color-picker__hue';
-const cssColorPickerAlpha = 'color-picker__alpha';
 const cssColorPickerFooter = 'color-picker__footer';
 
 exports.cssColorPicker = cssColorPicker;
-exports.cssColorPickerAlpha = cssColorPickerAlpha;
 exports.cssColorPickerCloseIcon = cssColorPickerCloseIcon;
 exports.cssColorPickerContainer = cssColorPickerContainer;
 exports.cssColorPickerFooter = cssColorPickerFooter;
-exports.cssColorPickerHandler = cssColorPickerHandler;
-exports.cssColorPickerHandlerBig = cssColorPickerHandlerBig;
 exports.cssColorPickerHeader = cssColorPickerHeader;
-exports.cssColorPickerHue = cssColorPickerHue;
-exports.cssColorPickerHueAlphaContanier = cssColorPickerHueAlphaContanier;
-exports.cssColorPickerHueAlphaContanierResult = cssColorPickerHueAlphaContanierResult;
-exports.cssColorPickerHueAlphaContanierSet = cssColorPickerHueAlphaContanierSet;
 exports.cssColorPickerInputColorSwatchContainer = cssColorPickerInputColorSwatchContainer;
 exports.cssColorPickerInputContainer = cssColorPickerInputContainer;
-exports.cssColorPickerSaturation = cssColorPickerSaturation;
+exports.cssColorPickerRbgcp = cssColorPickerRbgcp;
 exports.cssColorPickerSwatch = cssColorPickerSwatch;
 exports.cssColorPickerSwatchBig = cssColorPickerSwatchBig;
 exports.cssColorPickerSwatchFill = cssColorPickerSwatchFill;
 exports.cssColorPickerSwatchSmall = cssColorPickerSwatchSmall;
-exports.cssColorPickerSwatches = cssColorPickerSwatches;
-exports.cssColorPickerSwatchesContent = cssColorPickerSwatchesContent;
-exports.cssColorPickerSwatchesHeader = cssColorPickerSwatchesHeader;
 //# sourceMappingURL=css_classes.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js

@@ -3,51 +3,64 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var utilities = require('../utilities.js');
 var constants = require('../constants.js');
+var useColorPicker$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
+var utilities = require('../utilities.js');
 
 const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
-    const [choosenColor, setChoosenColor] = React.useState(initialColor);
-    const [color, setColor] = React.useState(constants.COLOR_PICKER_INITIAL_STATE);
+    const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
+    const [choosenColor, setChoosenColor] = React.useState(color);
+    const { hslArr, setHue, setSaturation, setLightness, rgbaArr, setR, setG, setB, setA } = useColorPicker$1.useColorPicker(color, setColor);
+    const tinyColor = utilities.getTinyColorInstance(color);
+    const hex = utilities.getHexValue(tinyColor);
+    const [alpha, setAlpha] = React.useState(rgbaArr[3] * 100);
+    const [alphaValue, setAlphaValue] = React.useState(`${alpha}`);
+    const handleOnChangeAlpha = (event) => {
+        changeAlphaValue(Number(event.target.value));
+    };
+    const changeAlphaValue = (value) => {
+        setAlpha(value > 100 ? 100 : value);
+    };
+    React.useEffect(() => {
+        console.log('alpha');
+        setA(alpha);
+    }, [alpha]);
     React.useEffect(() => {
-        setColors(initialColor);
-    }, [initialColor]);
+        console.log('rgbaArr[3]');
+        setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
+    }, [rgbaArr[3]]);
     React.useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+        console.log('color');
+        onChange === null || onChange === void 0 ? void 0 : onChange(utilities.getAllColorTypes(color));
     }, [color]);
-    const handleChangeSaturation = (hsva) => {
-        setColors(hsva);
-    };
-    const handleChangeHue = (hsls) => {
-        const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
-        setColor({ ...color, ...hueColorSet });
-    };
-    const handleChangeAlpha = (hsls) => {
-        const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
-        setColor({ ...color, ...hueColorSet });
-    };
-    const handlePickSwatch = (rgba) => {
-        setColors(rgba);
-    };
     const handleCancel = () => {
-        setColors(choosenColor);
+        setColor(choosenColor);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
     const handleSave = () => {
-        setChoosenColor(color.hex);
-        onSave === null || onSave === void 0 ? void 0 : onSave(color);
+        setChoosenColor(color);
+        onSave === null || onSave === void 0 ? void 0 : onSave(utilities.getAllColorTypes(color));
     };
-    const setColors = (color) => {
-        setColor(utilities.getAllColorFormats(color));
+    const handlePickSwatch = (color) => {
+        setColor(color);
     };
     return {
         color,
-        handleChangeSaturation,
-        handleChangeHue,
-        handleChangeAlpha,
-        handlePickSwatch,
+        setColor,
+        hex,
+        hslArr,
+        setHue,
+        setSaturation,
+        setLightness,
+        handleOnChangeAlpha,
+        alphaValue,
+        rgbaArr,
+        setR,
+        setG,
+        setB,
         handleCancel,
-        handleSave
+        handleSave,
+        handlePickSwatch
     };
 };
 

package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/index.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var input = require('../controls/components/input.js');
-var index$1 = require('../../../../../external/react-color/lib/components/common/index.js');
+var constants = require('./constants.js');
 var css_classes = require('./css_classes.js');
+var index$1 = require('../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
+var context = require('./context.js');
 var main_module = require('../../css/color_picker_new/main.module.less.js');
 var colorPickerFooter = require('./components/color-picker-footer.js');
-var colorPickerHandler = require('./components/color-picker-handler.js');
 var colorPickerHeader = require('./components/color-picker-header.js');
 var colorPickerSwatch = require('./components/color-picker-swatch.js');
-var colorPickerSwatches = require('./components/color-picker-swatches.js');
 var index = require('../dropdown/index.js');
 var use_color_picker = require('./hooks/use_color_picker.js');
 
@@ -19,38 +19,31 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// @ts-ignore
-const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel, onSave }) => {
-    var _a;
-    const { color, handleChangeSaturation, handleChangeHue, handleChangeAlpha, handlePickSwatch, handleCancel, handleSave } = use_color_picker['default']({
-        initialColor,
-        onChange,
-        onCancel,
-        onSave
-    });
+const ColorPickerNewPure = ({ id, name }) => {
+    const { color, setColor, hex, handleCancel } = React.useContext(context.ColorPickerNewContext);
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPicker]}` },
         React__default['default'].createElement(index['default'], null,
             React__default['default'].createElement(index['default'].CustomLabel, null,
                 React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputContainer]}` },
                     React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer]}` },
-                        React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba })),
-                    React__default['default'].createElement(input['default'], { value: (_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase(), readOnly: true }))),
+                        React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color })),
+                    React__default['default'].createElement(input['default'], { type: "text", id: id, name: name, value: `# ${hex === null || hex === void 0 ? void 0 : hex.toUpperCase()}`, readOnly: true }))),
             React__default['default'].createElement(index['default'].Content, { onClickOutside: handleCancel },
-                React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, { text: pickerText, onCancel: handleCancel }),
+                React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, null),
                 React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerContainer]}` },
-                    React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerSaturation]}` },
-                        React__default['default'].createElement(index$1.common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsla, hsv: color === null || color === void 0 ? void 0 : color.hsva, pointer: () => React__default['default'].createElement(colorPickerHandler.ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
-                    React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanier]}` },
-                        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanierSet]}` },
-                            React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHue]}` },
-                                React__default['default'].createElement(index$1.common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeHue })),
-                            React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerAlpha]}` },
-                                React__default['default'].createElement(index$1.common.Alpha, { rgb: color.rgba, hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeAlpha }))),
-                        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanierResult]}` },
-                            React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba, size: "big" }))),
-                    React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, { color: color.hsla, onClick: handlePickSwatch })),
-                React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, { onCancel: handleCancel, onSave: handleSave, color: color === null || color === void 0 ? void 0 : color.hex })))));
+                    React__default['default'].createElement(index$1.ColorPicker, { value: color, onChange: setColor, width: constants.COLOR_PICKER_WIDTH, height: constants.COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${main_module['default'][css_classes.cssColorPickerRbgcp]}` })),
+                React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null)))));
+};
+const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
+    const colorPickerNewContext = use_color_picker['default']({
+        initialColor,
+        onChange,
+        onCancel,
+        onSave
+    });
+    return (React__default['default'].createElement(context.ColorPickerNewContext.Provider, { value: colorPickerNewContext },
+        React__default['default'].createElement(ColorPickerNewPure, { id: id, name: name })));
 };
 
-exports.default = ColorPickerNew;
+exports.default = ColorPickerNewWithContext;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,oEAAwE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,uFAA2F;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js

@@ -4,29 +4,39 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
 
-const getAllColorFormats = (color) => {
-    const colorSet = tinycolor['default'](color);
-    return {
-        hsla: colorSet.toHsl(),
-        hsva: colorSet.toHsv(),
-        rgba: colorSet.toRgb(),
-        hex: `#${getHexValue(colorSet)}`
-    };
+const getTinyColorInstance = (color) => {
+    return tinycolor['default'](color);
 };
-const getColorFormatsWithoutHsv = (hue) => {
-    const colorSet = tinycolor['default'](hue);
-    return {
-        hsla: hue,
-        rgba: colorSet.toRgb(),
-        hex: `#${getHexValue(colorSet)}`
-    };
+const getRgbaValue = (colorSet) => {
+    return colorSet.toRgb();
 };
 const getHexValue = (colorSet) => {
     const alphaValue = colorSet.getAlpha();
     return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+};
+const getHexValueString = (colorSet) => {
+    return `#${getHexValue(colorSet)}`;
+};
+const getAllColorTypes = (color) => {
+    const tinyColor = getTinyColorInstance(color);
+    const rgba = getRgbaValue(tinyColor);
+    const hex = getHexValue(tinyColor);
+    const hexString = getHexValueString(tinyColor);
+    return {
+        rgba: {
+            r: rgba.r,
+            g: rgba.g,
+            b: rgba.b,
+            a: rgba.a
+        },
+        hex: hex,
+        hexString: hexString
+    };
 };
 
-exports.getAllColorFormats = getAllColorFormats;
-exports.getColorFormatsWithoutHsv = getColorFormatsWithoutHsv;
+exports.getAllColorTypes = getAllColorTypes;
 exports.getHexValue = getHexValue;
+exports.getHexValueString = getHexValueString;
+exports.getRgbaValue = getRgbaValue;
+exports.getTinyColorInstance = getTinyColorInstance;
 //# sourceMappingURL=utilities.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js

@@ -11,14 +11,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, pickerText, initialColor, onChange, onCancel, onSave }) => {
+const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, initialColor, onChange, onCancel, onSave }) => {
     return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
         (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
             hint && React__default['default'].createElement(index$1['default'], { hint: hint, spacingLeft: true }))),
         React__default['default'].createElement(index['default'].Content, null,
             React__default['default'].createElement(index['default'].Element, null,
-                React__default['default'].createElement(index$2['default'], { pickerText: pickerText, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
+                React__default['default'].createElement(index$2['default'], { id: id, name: name, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
         React__default['default'].createElement(index['default'].Errors, null)));
 };
 

package/build/cjs/packages/aurora/src/css/color_picker_new/main.module.less.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  padding: 9px 16px;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n.main-module_color-picker__handler__WVp0b {\n  width: 8px;\n  height: 8px;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);\n}\n.main-module_color-picker__handler_big__3KwDj {\n  width: 10px;\n  height: 10px;\n}\n.main-module_color-picker__saturation__19ayh {\n  position: relative;\n  width: 220px;\n  height: 200px;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__saturation__19ayh .main-module_color-picker__handler__WVp0b {\n  transform: translate(-4px, -4px);\n}\n.main-module_color-picker__hue-alpha-container__3TNSi {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 10px;\n}\n.main-module_color-picker__hue-alpha-container-set__27r78 {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n}\n.main-module_color-picker__hue-alpha-container-result__qiL7X {\n  flex-shrink: 0;\n}\n.main-module_color-picker__hue__1ow3q,\n.main-module_color-picker__alpha__1cXpq {\n  position: relative;\n  height: 10px;\n  border-radius: 10px;\n  overflow: hidden;\n}\n.main-module_color-picker__hue__1ow3q .main-module_color-picker__handler__WVp0b {\n  transform: translate(-4px, 1px);\n}\n.main-module_color-picker__alpha__1cXpq .main-module_color-picker__handler__WVp0b {\n  transform: translate(-2px, 1px);\n}\n";
-var styles = {"color-picker__container":"main-module_color-picker__container__14ccI","color-picker__header":"main-module_color-picker__header__NFjKK","color-picker__footer":"main-module_color-picker__footer__3JvEl","color-picker__swatches":"main-module_color-picker__swatches__1s2pY","color-picker__swatches-header":"main-module_color-picker__swatches-header__187FL","color-picker__swatches-content":"main-module_color-picker__swatches-content__3EFZR","color-picker__swatch":"main-module_color-picker__swatch__2IbgR","color-picker__swatch_small":"main-module_color-picker__swatch_small__3Z0pq","color-picker__swatch_big":"main-module_color-picker__swatch_big__2tsQC","color-picker__swatch-fill":"main-module_color-picker__swatch-fill__3D88w","color-picker__input-container":"main-module_color-picker__input-container__1cC2e","color-picker__input-color-swatch-container":"main-module_color-picker__input-color-swatch-container__3WX9B","color-picker__close-icon":"main-module_color-picker__close-icon__JcWAL","color-picker__handler":"main-module_color-picker__handler__WVp0b","color-picker__handler_big":"main-module_color-picker__handler_big__3KwDj","color-picker__saturation":"main-module_color-picker__saturation__19ayh","color-picker__hue-alpha-container":"main-module_color-picker__hue-alpha-container__3TNSi","color-picker__hue-alpha-container-set":"main-module_color-picker__hue-alpha-container-set__27r78","color-picker__hue-alpha-container-result":"main-module_color-picker__hue-alpha-container-result__qiL7X","color-picker__hue":"main-module_color-picker__hue__1ow3q","color-picker__alpha":"main-module_color-picker__alpha__1cXpq"};
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 250px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n  background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n  width: 24px;\n  height: 24px;\n  background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n  cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n  display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #ececec;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child) {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child):hover {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:last-child {\n  width: 44px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
+var styles = {"color-picker__container":"main-module_color-picker__container__14ccI","color-picker__rbgcp":"main-module_color-picker__rbgcp__2FKdw","color-picker__header":"main-module_color-picker__header__NFjKK","color-picker__footer":"main-module_color-picker__footer__3JvEl","color-picker__swatches":"main-module_color-picker__swatches__1s2pY","color-picker__swatches-header":"main-module_color-picker__swatches-header__187FL","color-picker__swatches-content":"main-module_color-picker__swatches-content__3EFZR","color-picker__swatch":"main-module_color-picker__swatch__2IbgR","color-picker__swatch_small":"main-module_color-picker__swatch_small__3Z0pq","color-picker__swatch_big":"main-module_color-picker__swatch_big__2tsQC","color-picker__swatch-fill":"main-module_color-picker__swatch-fill__3D88w","color-picker__input-container":"main-module_color-picker__input-container__1cC2e","color-picker__input-color-swatch-container":"main-module_color-picker__input-color-swatch-container__3WX9B","color-picker__inputs":"main-module_color-picker__inputs__3Cmmw","color-picker__inputs-type":"main-module_color-picker__inputs-type__1loVJ","color-picker__inputs-value-container":"main-module_color-picker__inputs-value-container__3ErVj","color-picker__close-icon":"main-module_color-picker__close-icon__JcWAL"};
 styleInject_es['default'](css_248z);
 
 exports.default = styles;

package/build/cjs/packages/aurora/src/translations/en.json.js

@@ -29,6 +29,7 @@ var Yesterday = "Yesterday";
 var Add = "Add";
 var Remove = "Remove";
 var Search = "Search";
+var save = "save";
 var en = {
 	date: date,
 	cancel: cancel,
@@ -83,7 +84,10 @@ var en = {
 	"Drag a file here or browse": "Drag a file here or browse",
 	"supported format": "supported format",
 	"The value cannot be greater than the width of the uploaded file": "The value cannot be greater than the width of the uploaded file",
-	"Invalid file format": "Invalid file format"
+	"Invalid file format": "Invalid file format",
+	save: save,
+	"Shades of color": "Shades of color",
+	"Select color": "Select color"
 };
 
 exports.Add = Add;
@@ -109,6 +113,7 @@ exports.monday = monday;
 exports.november = november;
 exports.october = october;
 exports.saturday = saturday;
+exports.save = save;
 exports.september = september;
 exports.sunday = sunday;
 exports.thursday = thursday;

package/build/cjs/packages/aurora/src/translations/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}