@dreamcommerce/aurora 2.12.1-21 → 2.12.1-22

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,24 @@ 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 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 ColorPickerFooter = () => {
     const { toggleDropdown } = 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();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
     };
     const handleSaveButton = () => {
         toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-        onSave(color);
+        handleSave(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;"}

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

@@ -6,6 +6,7 @@ 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');
 
@@ -13,12 +14,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ColorPickerHeader = ({ onCancel }) => {
+const ColorPickerHeader = () => {
+    const { handleCancel } = React.useContext(context.ColorPickerNewContext);
     const [t] = useTranslation.useTranslation();
     const { toggleDropdown } = React.useContext(index.DropdownContext);
     const handleCancelButton = () => {
         toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
     };
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHeader]}` },
         t('Select color'),

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,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;"}
+{"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;"}

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utilities = require('@dreamcommerce/utilities');
+var input = require('../../../controls/components/input.js');
+var context = require('../../context.js');
+var utilities$1 = require('../../utilities.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerInputsHex = () => {
+    const { setColor, hex, handleOnChangeAlpha, alphaValue } = React.useContext(context.ColorPickerNewContext);
+    const [value, setValue] = React.useState(hex);
+    const [disable, setDisable] = React.useState(false);
+    const handleOnChange = (event) => {
+        const inputValue = event.target.value.replace('%', '');
+        if (utilities$1.isHexChar(inputValue)) {
+            setValue(inputValue);
+            setColor(inputValue);
+        }
+    };
+    const hexFocus = () => {
+        setDisable(true);
+    };
+    const hexBlur = () => {
+        setDisable(false);
+    };
+    React.useEffect(() => {
+        if (!disable) {
+            setValue(hex);
+        }
+    }, [hex, disable]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", maxLength: 8, value: value.toUpperCase(), onChange: handleOnChange, onBlur: hexBlur, onFocus: hexFocus }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: utilities.InputUtils.preventTypingLetters })));
+};
+
+exports.ColorPickerInputsHex = ColorPickerInputsHex;
+//# sourceMappingURL=color-picker-inputs-hex.js.map

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utilities = require('@dreamcommerce/utilities');
+var input = require('../../../controls/components/input.js');
+var context = require('../../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerInputsHsl = () => {
+    const { setHue, setSaturation, setLightness, hslArr, handleOnChangeAlpha, alphaValue } = React.useContext(context.ColorPickerNewContext);
+    const handleChangeHue = (event) => {
+        const value = Number(event.target.value);
+        console.log('value - h', value);
+        setHue(value);
+    };
+    const handleChangeSaturation = (event) => {
+        const value = Number(event.target.value);
+        console.log('value - s', value);
+        setSaturation(value);
+    };
+    const handleChangeLightness = (event) => {
+        const value = Number(event.target.value);
+        console.log('value - l', value);
+        setLightness(value);
+    };
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: Math.round(hslArr[0]), onChange: handleChangeHue, onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: Math.round(hslArr[1] * 100), onChange: handleChangeSaturation, onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: Math.round(hslArr[2] * 100), onChange: handleChangeLightness, onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: utilities.InputUtils.preventTypingLetters })));
+};
+
+exports.ColorPickerInputsHsl = ColorPickerInputsHsl;
+//# sourceMappingURL=color-picker-inputs-hsl.js.map

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utilities = require('@dreamcommerce/utilities');
+var input = require('../../../controls/components/input.js');
+var context = require('../../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerInputsRgba = () => {
+    const { setR, setG, setB, handleOnChangeAlpha, alphaValue, rgbaArr } = React.useContext(context.ColorPickerNewContext);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: rgbaArr[0], onChange: (e) => setR(Number(e.target.value)), onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: rgbaArr[1], onChange: (e) => setG(Number(e.target.value)), onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: rgbaArr[2], onChange: (e) => setB(Number(e.target.value)), onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: utilities.InputUtils.preventTypingLetters })));
+};
+
+exports.ColorPickerInputsRgba = ColorPickerInputsRgba;
+//# sourceMappingURL=color-picker-inputs-rgba.js.map

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var constants = require('../../constants.js');
+var css_classes = require('../../css_classes.js');
+var main_module = require('../../../../css/color_picker_new/main.module.less.js');
+var colorPickerInputsHex = require('./color-picker-inputs-hex.js');
+var colorPickerInputsHsl = require('./color-picker-inputs-hsl.js');
+var colorPickerInputsRgba = require('./color-picker-inputs-rgba.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerInputs = () => {
+    const [type, setType] = React.useState(constants.COLOR_PICKER_TYPE_RGB);
+    const handleSelectType = (e) => {
+        setType(e.target.value);
+    };
+    const inputs = () => {
+        switch (type) {
+            case constants.COLOR_PICKER_TYPE_HEX:
+                return React__default['default'].createElement(colorPickerInputsHex.ColorPickerInputsHex, null);
+            case constants.COLOR_PICKER_TYPE_RGB:
+                return React__default['default'].createElement(colorPickerInputsRgba.ColorPickerInputsRgba, null);
+            case constants.COLOR_PICKER_TYPE_HSL:
+                return React__default['default'].createElement(colorPickerInputsHsl.ColorPickerInputsHsl, null);
+            default:
+                return false;
+        }
+    };
+    return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputs]}` },
+        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputsType]}` },
+            React__default['default'].createElement("select", { value: type, onChange: handleSelectType },
+                React__default['default'].createElement("option", { value: constants.COLOR_PICKER_TYPE_HEX }, constants.COLOR_PICKER_TYPE_HEX),
+                React__default['default'].createElement("option", { value: constants.COLOR_PICKER_TYPE_RGB }, constants.COLOR_PICKER_TYPE_RGB))),
+        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputsValue]}` },
+            React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputsValueContainer]}` }, inputs()))));
+};
+
+exports.ColorPickerInputs = ColorPickerInputs;
+//# sourceMappingURL=color-picker-inputs.js.map

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

@@ -6,6 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var utilities = require('../utilities.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/components/color-picker-swatches.js

@@ -5,39 +5,42 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.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 utilities = require('../utilities.js');
 var colorPickerSwatch = require('./color-picker-swatch.js');
-var tinycolor = require('../../../../../../external/tinycolor2/esm/tinycolor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ColorPickerSwatches = ({ color, onClick }) => {
+const ColorPickerSwatches = () => {
+    const { hslArr, handlePickSwatch } = React.useContext(context.ColorPickerNewContext);
     const [t] = useTranslation.useTranslation();
+    const [h, s] = hslArr;
     const shades = [
-        { ...color, l: 95, a: 100 },
-        { ...color, l: 90, a: 100 },
-        { ...color, l: 80, a: 100 },
-        { ...color, l: 70, a: 100 },
-        { ...color, l: 60, a: 100 },
-        { ...color, l: 50, a: 100 },
-        { ...color, l: 40, a: 100 },
-        { ...color, l: 30, a: 100 },
-        { ...color, l: 20, a: 100 },
-        { ...color, l: 10, a: 100 },
-        { ...color, l: 5, a: 100 }
+        { h, s, l: 95 },
+        { h, s, l: 90 },
+        { h, s, l: 80 },
+        { h, s, l: 70 },
+        { h, s, l: 60 },
+        { h, s, l: 50 },
+        { h, s, l: 40 },
+        { h, s, l: 30 },
+        { h, s, l: 20 },
+        { h, s, l: 10 },
+        { h, s, l: 5 }
     ];
     return (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatches] },
         React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesHeader] },
             React__default['default'].createElement("p", null, t('Shades of color'))),
         React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
-            const color = tinycolor['default'](shade);
-            const rgbColor = color.toRgb();
+            const colorTiny = utilities.getTinyColorInstance(shade);
+            const colorHex = utilities.getHexValue(colorTiny);
             const handleOnClick = () => {
-                onClick === null || onClick === void 0 ? void 0 : onClick(rgbColor);
+                handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch(colorHex);
             };
-            return React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { size: "small", onClick: handleOnClick, key: `${shade}-${index}`, color: rgbColor });
+            return React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { size: "small", onClick: handleOnClick, key: `${shade}-${index}`, color: colorHex });
         }))));
 };
 

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.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,wBAAwB,wDAA4D;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -2,28 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const COLOR_PICKER_INITIAL_STATE = {
-    hsla: {
-        h: 0,
-        s: 0,
-        l: 0,
-        a: 1
-    },
-    hsva: {
-        h: 0,
-        s: 0,
-        v: 0,
-        a: 1
-    },
-    rgba: {
-        r: 0,
-        g: 0,
-        b: 0,
-        a: 1
-    },
-    hex: '000000',
-    hexWithPrefix: '#000000'
-};
+const COLOR_PICKER_INITIAL_STATE = '000000';
+const COLOR_PICKER_WIDTH = 220;
+const COLOR_PICKER_HEIGHT = 200;
+const COLOR_PICKER_TYPE_HEX = 'hex';
+const COLOR_PICKER_TYPE_RGB = 'rgb';
+const COLOR_PICKER_TYPE_HSL = 'hsl';
 
+exports.COLOR_PICKER_HEIGHT = COLOR_PICKER_HEIGHT;
 exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
+exports.COLOR_PICKER_TYPE_HEX = COLOR_PICKER_TYPE_HEX;
+exports.COLOR_PICKER_TYPE_HSL = COLOR_PICKER_TYPE_HSL;
+exports.COLOR_PICKER_TYPE_RGB = COLOR_PICKER_TYPE_RGB;
+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;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;"}

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const ColorPickerNewContext = React.createContext({
+    color: '',
+    setColor: () => { },
+    hex: '',
+    hexString: '',
+    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,6 +4,7 @@ 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';
@@ -15,31 +16,24 @@ 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 cssColorPickerInputs = 'color-picker__inputs';
+const cssColorPickerInputsType = 'color-picker__inputs-type';
+const cssColorPickerInputsValue = 'color-picker__inputs-value';
+const cssColorPickerInputsValueContainer = 'color-picker__inputs-value-container';
 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.cssColorPickerInputs = cssColorPickerInputs;
+exports.cssColorPickerInputsType = cssColorPickerInputsType;
+exports.cssColorPickerInputsValue = cssColorPickerInputsValue;
+exports.cssColorPickerInputsValueContainer = cssColorPickerInputsValueContainer;
+exports.cssColorPickerRbgcp = cssColorPickerRbgcp;
 exports.cssColorPickerSwatch = cssColorPickerSwatch;
 exports.cssColorPickerSwatchBig = cssColorPickerSwatchBig;
 exports.cssColorPickerSwatchFill = cssColorPickerSwatchFill;

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;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,48 +3,63 @@
 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 !== null && initialColor !== void 0 ? initialColor : constants.COLOR_PICKER_INITIAL_STATE.hex);
-    const [color, setColor] = React.useState(initialColor ? utilities.getAllColorFormats(initialColor) : constants.COLOR_PICKER_INITIAL_STATE);
-    React.useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(color);
-    }, [color]);
-    const handleChangeSaturation = (hsva) => {
-        setColors(hsva);
-    };
-    const handleChangeHue = (hsls) => {
-        const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
-        setColor({ ...color, ...hueColorSet });
+    const [choosenColor, setChoosenColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
+    const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
+    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 hexString = utilities.getHexValueString(tinyColor);
+    const [alpha, setAlpha] = React.useState(rgbaArr[3] * 100);
+    const [alphaValue, setAlphaValue] = React.useState(`${alpha}`);
+    const handleOnChangeAlpha = (event) => {
+        changeAlphaValue(Number(event.target.value));
     };
-    const handleChangeAlpha = (hsls) => {
-        const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
-        setColor({ ...color, ...hueColorSet });
-    };
-    const handlePickSwatch = (rgba) => {
-        setColors(rgba);
+    const changeAlphaValue = (value) => {
+        setAlpha(value > 100 ? 100 : value);
     };
+    React.useEffect(() => {
+        setA(alpha);
+    }, [alpha]);
+    React.useEffect(() => {
+        setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
+    }, [rgbaArr[3]]);
+    React.useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(hexString);
+    }, [color]);
     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(hexString);
     };
-    const setColors = (color) => {
-        setColor(utilities.getAllColorFormats(color));
+    const handlePickSwatch = (color) => {
+        setColor(color);
     };
     return {
         color,
-        handleChangeSaturation,
-        handleChangeHue,
-        handleChangeAlpha,
-        handlePickSwatch,
+        setColor,
+        hex,
+        hexString,
+        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;"}
+{"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;"}