@dreamcommerce/aurora 2.12.1-21 → 2.12.1-23

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

@@ -1,46 +1,61 @@
 import { useState, useEffect } from 'react';
-import { getAllColorFormats, getColorFormatsWithoutHsv } from '../utilities.js';
 import { COLOR_PICKER_INITIAL_STATE } from '../constants.js';
+import { useColorPicker as useColorPicker$1 } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
+import { getTinyColorInstance, getHexValue, getHexValueString } from '../utilities.js';
 
 const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
-    const [choosenColor, setChoosenColor] = useState(initialColor !== null && initialColor !== void 0 ? initialColor : COLOR_PICKER_INITIAL_STATE.hex);
-    const [color, setColor] = useState(initialColor ? getAllColorFormats(initialColor) : COLOR_PICKER_INITIAL_STATE);
+    const [choosenColor, setChoosenColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
+    const [color, setColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
+    const { hslArr, setHue, setSaturation, setLightness, rgbaArr, setR, setG, setB, setA } = useColorPicker$1(color, setColor);
+    const tinyColor = getTinyColorInstance(color);
+    const hex = getHexValue(tinyColor);
+    const hexString = getHexValueString(tinyColor);
+    const [alpha, setAlpha] = useState(rgbaArr[3] * 100);
+    const [alphaValue, setAlphaValue] = useState(`${alpha}`);
+    const handleOnChangeAlpha = (event) => {
+        changeAlphaValue(Number(event.target.value));
+    };
+    const changeAlphaValue = (value) => {
+        setAlpha(value > 100 ? 100 : value);
+    };
+    useEffect(() => {
+        setA(alpha);
+    }, [alpha]);
     useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+        setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
+    }, [rgbaArr[3]]);
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(hexString);
     }, [color]);
-    const handleChangeSaturation = (hsva) => {
-        setColors(hsva);
-    };
-    const handleChangeHue = (hsls) => {
-        const hueColorSet = getColorFormatsWithoutHsv(hsls);
-        setColor({ ...color, ...hueColorSet });
-    };
-    const handleChangeAlpha = (hsls) => {
-        const hueColorSet = 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(hexString);
     };
-    const setColors = (color) => {
-        setColor(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/esm/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,mDAAmD,8FAAkG;AACrJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/aurora/src/components/color_picker_new/index.d.ts

@@ -1,4 +1,3 @@
 import { IColorPickerNewProps } from './types';
-import React from 'react';
-declare const ColorPickerNew: React.FC<IColorPickerNewProps>;
-export default ColorPickerNew;
+declare const ColorPickerNewWithContext: ({ id, name, initialColor, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
+export default ColorPickerNewWithContext;

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

@@ -1,48 +1,45 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Input from '../controls/components/input.js';
-import { c as common } from '../../../../../external/react-color/lib/components/common/index.js';
-import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerSaturation, cssColorPickerHueAlphaContanier, cssColorPickerHueAlphaContanierSet, cssColorPickerHue, cssColorPickerAlpha, cssColorPickerHueAlphaContanierResult } from './css_classes.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from './constants.js';
+import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerRbgcp } from './css_classes.js';
+import { ColorPicker } from '../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js';
+import { ColorPickerNewContext } from './context.js';
 import styles from '../../css/color_picker_new/main.module.less.js';
 import { ColorPickerFooter } from './components/color-picker-footer.js';
-import { ColorPickerHandler } from './components/color-picker-handler.js';
 import { ColorPickerHeader } from './components/color-picker-header.js';
+import { ColorPickerInputs } from './components/color-picker-inputs/color-picker-inputs.js';
 import { ColorPickerSwatch } from './components/color-picker-swatch.js';
 import { ColorPickerSwatches } from './components/color-picker-swatches.js';
 import Dropdown from '../dropdown/index.js';
 import useColorPicker from './hooks/use_color_picker.js';
 
-// @ts-ignore
-const ColorPickerNew = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
-    var _a;
-    const { color, handleChangeSaturation, handleChangeHue, handleChangeAlpha, handlePickSwatch, handleCancel, handleSave } = useColorPicker({
-        initialColor,
-        onChange,
-        onCancel,
-        onSave
-    });
+const ColorPickerNewPure = ({ id, name }) => {
+    const { color, setColor, hex, handleCancel } = useContext(ColorPickerNewContext);
     return (React.createElement("div", { className: `${styles[cssColorPicker]}` },
         React.createElement(Dropdown, null,
             React.createElement(Dropdown.CustomLabel, null,
                 React.createElement("div", { className: `${styles[cssColorPickerInputContainer]}` },
                     React.createElement("div", { className: `${styles[cssColorPickerInputColorSwatchContainer]}` },
-                        React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba })),
-                    React.createElement(Input, { type: "text", id: id, name: name, value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}` }))),
+                        React.createElement(ColorPickerSwatch, { color: color })),
+                    React.createElement(Input, { type: "text", id: id, name: name, value: `# ${hex === null || hex === void 0 ? void 0 : hex.toUpperCase()}`, readOnly: true }))),
             React.createElement(Dropdown.Content, { onClickOutside: handleCancel },
-                React.createElement(ColorPickerHeader, { onCancel: handleCancel }),
+                React.createElement(ColorPickerHeader, null),
                 React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
-                    React.createElement("div", { className: `${styles[cssColorPickerSaturation]}` },
-                        React.createElement(common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsla, hsv: color === null || color === void 0 ? void 0 : color.hsva, pointer: () => React.createElement(ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
-                    React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanier]}` },
-                        React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierSet]}` },
-                            React.createElement("div", { className: `${styles[cssColorPickerHue]}` },
-                                React.createElement(common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: ColorPickerHandler, onChange: handleChangeHue })),
-                            React.createElement("div", { className: `${styles[cssColorPickerAlpha]}` },
-                                React.createElement(common.Alpha, { rgb: color.rgba, hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: ColorPickerHandler, onChange: handleChangeAlpha }))),
-                        React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierResult]}` },
-                            React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba, size: "big" }))),
-                    React.createElement(ColorPickerSwatches, { color: color.hsla, onClick: handlePickSwatch })),
-                React.createElement(ColorPickerFooter, { onCancel: handleCancel, onSave: handleSave, color: color === null || color === void 0 ? void 0 : color.hex })))));
+                    React.createElement(ColorPicker, { value: color, onChange: setColor, width: COLOR_PICKER_WIDTH, height: COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${styles[cssColorPickerRbgcp]}` }),
+                    React.createElement(ColorPickerInputs, null),
+                    React.createElement(ColorPickerSwatches, null)),
+                React.createElement(ColorPickerFooter, null)))));
+};
+const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
+    const colorPickerNewContext = useColorPicker({
+        initialColor,
+        onChange,
+        onCancel,
+        onSave
+    });
+    return (React.createElement(ColorPickerNewContext.Provider, { value: colorPickerNewContext },
+        React.createElement(ColorPickerNewPure, { id: id, name: name })));
 };
 
-export default ColorPickerNew;
+export default ColorPickerNewWithContext;
 //# sourceMappingURL=index.js.map

package/build/esm/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,4BAA4B,oEAAwE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4BAA4B,uFAA2F;AACvH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/aurora/src/components/color_picker_new/types.d.ts

@@ -1,31 +1,49 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface IColorPickerNewPureProps {
+    id: string;
+    name?: string;
+}
 export interface IColorPickerNewProps {
     id: string;
     name?: string;
-    initialColor?: ColorPickerColorFormats['hex'] | undefined;
-    onChange?: (color: ColorPickerColorFormats) => void;
+    initialColor?: IColorPickerColor['hex'] | undefined;
+    onChange?: (color: IColorPickerColor['hex']) => void;
     onCancel?: () => void;
-    onSave?: (color: ColorPickerColorFormats) => void;
+    onSave?: (color: IColorPickerColor['hex']) => void;
 }
-export declare type ColorPickerColorFormats = {
-    hsla: {
+export interface IColorPickerNewContextProps {
+    color: string;
+    setColor: Dispatch<SetStateAction<string>>;
+    hex: string;
+    hexString: string;
+    hslArr: number[];
+    setHue: (newHue: number) => void;
+    setSaturation: (newSat: number) => void;
+    setLightness: (newLight: number) => void;
+    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    alphaValue: string;
+    rgbaArr: number[];
+    setR: (newR: number) => void;
+    setG: (newG: number) => void;
+    setB: (newB: number) => void;
+    handleCancel: () => void;
+    handleSave: (color: IColorPickerColor['hex']) => void;
+    handlePickSwatch: (color: string) => void;
+}
+export declare type ColorPickerColorTypes = {
+    hex: string;
+    hsl: {
         h: number;
         s: number;
         l: number;
-        a: number;
     };
-    hsva: {
-        h: number;
-        s: number;
-        v: number;
-        a: number;
-    };
-    rgba: {
+    rgb: {
         r: number;
         g: number;
         b: number;
-        a: number;
     };
-    hex: string;
-    hexWithPrefix: string;
 };
-export declare type ColorPickerColorTypes = ColorPickerColorFormats['hsla'] | ColorPickerColorFormats['hsva'] | ColorPickerColorFormats['rgba'] | ColorPickerColorFormats['hex'] | ColorPickerColorFormats['hexWithPrefix'];
+export declare type IColorPickerColor = {
+    hex: ColorPickerColorTypes['hex'];
+};
+export declare type ColorPickerColors = ColorPickerColorTypes['hex'] | ColorPickerColorTypes['hsl'] | ColorPickerColorTypes['rgb'];

package/build/esm/packages/aurora/src/components/color_picker_new/types.js

@@ -1,2 +1,2 @@
-export {};
+import 'react';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker_new/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker_new/types.ts"],"names":[],"mappings":"AAAA,OAAyC,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts

@@ -1,21 +1,6 @@
-import { ColorPickerColorFormats, ColorPickerColorTypes } from './types';
+import { ColorPickerColors } from './types';
 import tinycolor from 'tinycolor2';
-export declare const getAllColorFormats: (color: ColorPickerColorTypes) => {
-    hsla: tinycolor.ColorFormats.HSLA;
-    hsva: tinycolor.ColorFormats.HSVA;
-    rgba: tinycolor.ColorFormats.RGBA;
-    hex: string;
-    hexWithPrefix: string;
-};
-export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['hsla']) => {
-    hsla: {
-        h: number;
-        s: number;
-        l: number;
-        a: number;
-    };
-    rgba: tinycolor.ColorFormats.RGBA;
-    hex: string;
-    hexWithPrefix: string;
-};
+export declare const getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
 export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
+export declare const getHexValueString: (colorSet: tinycolor.Instance) => string;
+export declare const isHexChar: (value: string) => boolean;

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

@@ -1,28 +1,19 @@
 import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
 
-const getAllColorFormats = (color) => {
-    const colorSet = tinycolor(color);
-    return {
-        hsla: colorSet.toHsl(),
-        hsva: colorSet.toHsv(),
-        rgba: colorSet.toRgb(),
-        hex: getHexValue(colorSet),
-        hexWithPrefix: `#${getHexValue(colorSet)}`
-    };
-};
-const getColorFormatsWithoutHsv = (hue) => {
-    const colorSet = tinycolor(hue);
-    return {
-        hsla: hue,
-        rgba: colorSet.toRgb(),
-        hex: getHexValue(colorSet),
-        hexWithPrefix: `#${getHexValue(colorSet)}`
-    };
+const getTinyColorInstance = (color) => {
+    return tinycolor(color);
 };
 const getHexValue = (colorSet) => {
     const alphaValue = colorSet.getAlpha();
     return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+};
+const getHexValueString = (colorSet) => {
+    return `#${getHexValue(colorSet)}`;
+};
+const isHexChar = (value) => {
+    const hexRegEx = /^$|[0-9a-fA-F]+$/;
+    return hexRegEx.test(value);
 };
 
-export { getAllColorFormats, getColorFormatsWithoutHsv, getHexValue };
+export { getHexValue, getHexValueString, getTinyColorInstance, isHexChar };
 //# sourceMappingURL=utilities.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;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,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
-import ColorPickerNew from '../../../color_picker_new/index.js';
+import ColorPickerNewWithContext from '../../../color_picker_new/index.js';
 
 const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, initialColor, onChange, onCancel, onSave }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
@@ -10,7 +10,7 @@ const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labe
             hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
-                React.createElement(ColorPickerNew, { id: id, name: name, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
+                React.createElement(ColorPickerNewWithContext, { id: id, name: name, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
         React.createElement(Control.Errors, null)));
 };
 

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../../../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(4) {\n  margin-top: 5px !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(css_248z);
 
 export default styles;

package/build/esm/packages/aurora/src/index.d.ts

@@ -15,7 +15,6 @@ import Breadcrumbs from "./components/breadcrumbs";
 import Button from "./components/button";
 import ButtonsGroup from "./components/buttons_group";
 import ColorPicker from "./components/color_picker";
-import { ColorPickerColorFormats } from "./components/color_picker_new/types";
 import ColorPickerNew from "./components/color_picker_new";
 import Control from "./components/controls";
 import ControlCellSelector from "./components/controls/hoc/control_cell_selector";
@@ -50,6 +49,7 @@ import Grid from "./components/grid";
 import Heading from "./components/heading";
 import Hint from "./components/hint";
 import { IColor } from "./components/color_picker/types";
+import { IColorPickerColor } from "./components/color_picker_new/types";
 import { IControlRadioGroupOption } from "./components/controls/types";
 import { IDatepickerRange } from "./components/date_picker/types";
 import { IDropdownContext } from "./components/dropdown/context/types";
@@ -124,4 +124,4 @@ export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect
 /**
  * export types
  */
-export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, ColorPickerColorFormats, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize };
+export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IColorPickerColor, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.12.1-21",
+  "version": "2.12.1-23",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",
@@ -64,7 +64,7 @@
     "jss": "10.4.0",
     "lodash": "4.17.15",
     "react": "17.0.2",
-    "react-color": "^2.19.3",
+    "react-best-gradient-color-picker": "^3.0.7",
     "react-dom": "17.0.2",
     "react-i18next": "11.7.2",
     "react-jss": "10.4.0",

package/build/cjs/_virtual/Alpha.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Alpha = require('../external/react-color/lib/components/common/Alpha.js');
-
-
-
-exports.default = Alpha.Alpha_1;
-//# sourceMappingURL=Alpha.js_commonjs-proxy.map

package/build/cjs/_virtual/Alpha.js_commonjs-proxy.map

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

package/build/cjs/_virtual/Checkboard.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Checkboard = require('../external/react-color/lib/components/common/Checkboard.js');
-
-
-
-exports.default = Checkboard.Checkboard_1;
-//# sourceMappingURL=Checkboard.js_commonjs-proxy.map

package/build/cjs/_virtual/Checkboard.js_commonjs-proxy.map

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

package/build/cjs/_virtual/ColorWrap.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ColorWrap = require('../external/react-color/lib/components/common/ColorWrap.js');
-
-
-
-exports.default = ColorWrap.ColorWrap_1;
-//# sourceMappingURL=ColorWrap.js_commonjs-proxy.map

package/build/cjs/_virtual/ColorWrap.js_commonjs-proxy.map

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

package/build/cjs/_virtual/EditableInput.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var EditableInput = require('../external/react-color/lib/components/common/EditableInput.js');
-
-
-
-exports.default = EditableInput.EditableInput_1;
-//# sourceMappingURL=EditableInput.js_commonjs-proxy.map

package/build/cjs/_virtual/EditableInput.js_commonjs-proxy.map

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

package/build/cjs/_virtual/Hue.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Hue = require('../external/react-color/lib/components/common/Hue.js');
-
-
-
-exports.default = Hue.Hue_1;
-//# sourceMappingURL=Hue.js_commonjs-proxy.map

package/build/cjs/_virtual/Hue.js_commonjs-proxy.map

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

package/build/cjs/_virtual/Raised.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Raised = require('../external/react-color/lib/components/common/Raised.js');
-
-
-
-exports.default = Raised.Raised_1;
-//# sourceMappingURL=Raised.js_commonjs-proxy.map

package/build/cjs/_virtual/Raised.js_commonjs-proxy.map

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

package/build/cjs/_virtual/Saturation.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Saturation = require('../external/react-color/lib/components/common/Saturation.js');
-
-
-
-exports.default = Saturation.Saturation_1;
-//# sourceMappingURL=Saturation.js_commonjs-proxy.map

package/build/cjs/_virtual/Saturation.js_commonjs-proxy.map

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

package/build/cjs/_virtual/Swatch.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Swatch = require('../external/react-color/lib/components/common/Swatch.js');
-
-
-
-exports.default = Swatch.Swatch_1;
-//# sourceMappingURL=Swatch.js_commonjs-proxy.map

package/build/cjs/_virtual/Swatch.js_commonjs-proxy.map

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

package/build/cjs/_virtual/_DataView.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _DataView = require('../external/reactcss/external/lodash/_DataView.js');
-
-
-
-exports.default = _DataView['default'];
-//# sourceMappingURL=_DataView.js_commonjs-proxy.map

package/build/cjs/_virtual/_DataView.js_commonjs-proxy.map

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

package/build/cjs/_virtual/_Hash2.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _Hash = require('../external/react-color/external/lodash/_Hash.js');
-
-
-
-exports.default = _Hash['default'];
-//# sourceMappingURL=_Hash2.js_commonjs-proxy.map

package/build/cjs/_virtual/_Hash2.js_commonjs-proxy.map

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

package/build/cjs/_virtual/_Hash3.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _Hash = require('../external/reactcss/external/lodash/_Hash.js');
-
-
-
-exports.default = _Hash['default'];
-//# sourceMappingURL=_Hash3.js_commonjs-proxy.map

package/build/cjs/_virtual/_Hash3.js_commonjs-proxy.map

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

package/build/cjs/_virtual/_ListCache2.js_commonjs-proxy

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _ListCache = require('../external/react-color/external/lodash/_ListCache.js');
-
-
-
-exports.default = _ListCache['default'];
-//# sourceMappingURL=_ListCache2.js_commonjs-proxy.map

package/build/cjs/_virtual/_ListCache2.js_commonjs-proxy.map

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