@dreamcommerce/aurora 2.12.1-33 → 2.12.1-35

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+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 = () => {
+    const { closeDropdown } = React.useContext(index.DropdownContext);
+    const { color, handleCancel, handleSave } = React.useContext(context.ColorPickerNewContext);
+    const [t] = useTranslation.useTranslation();
+    const handleCancelButton = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+    };
+    const handleSaveButton = () => {
+        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')),
+        React__default['default'].createElement(index$1['default'], { size: "small", onClick: handleSaveButton }, t('save'))));
+};
+
+exports.ColorPickerFooter = ColorPickerFooter;
+//# sourceMappingURL=color-picker-footer.js.map

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

@@ -0,0 +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;AACA;AACA;AACA;"}

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

@@ -0,0 +1,41 @@
+'use strict';
+
+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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerHeader = () => {
+    const { handleCancel } = React.useContext(context.ColorPickerNewContext);
+    const [t] = useTranslation.useTranslation();
+    const { closeDropdown, isOpen } = React.useContext(index.DropdownContext);
+    const handleCancelButton = () => {
+        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]}` },
+        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" }))));
+};
+
+exports.ColorPickerHeader = ColorPickerHeader;
+//# sourceMappingURL=color-picker-header.js.map

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

@@ -0,0 +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;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-hex.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;"}

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-rgba.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;"}

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

@@ -0,0 +1,41 @@
+'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 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_HEX);
+    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);
+            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-inputs/color-picker-inputs.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;"}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+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 utilities = require('../utilities.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var colorPickerSwatch = require('./color-picker-swatch.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerSwatches = () => {
+    const { hslArr, handlePickSwatch } = React.useContext(context.ColorPickerNewContext);
+    const [t] = useTranslation.useTranslation();
+    const [h, s] = hslArr;
+    const shades = [
+        { 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 colorTiny = utilities.getTinyColorInstance(shade);
+            const colorHex = utilities.getHexValue(colorTiny);
+            const handleOnClick = () => {
+                handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch(colorHex);
+            };
+            return React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { size: "small", onClick: handleOnClick, key: `${shade}-${index}`, color: colorHex });
+        }))));
+};
+
+exports.ColorPickerSwatches = ColorPickerSwatches;
+//# sourceMappingURL=color-picker-swatches.js.map

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

@@ -0,0 +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;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

@@ -4,9 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const COLOR_PICKER_INITIAL_STATE = '#000000';
 const COLOR_PICKER_WIDTH = 220;
-const COLOR_PICKER_HEIGHT = 200;
+const COLOR_PICKER_HEIGHT = 200;
+const COLOR_PICKER_TYPE_HEX = 'hex';
+const COLOR_PICKER_TYPE_RGB = 'rgb';
 
 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_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;"}
+{"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;"}

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

@@ -5,20 +5,40 @@ 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 cssColorPickerInputContainer = 'color-picker__input-container';
+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.cssColorPickerCloseIcon = cssColorPickerCloseIcon;
 exports.cssColorPickerContainer = cssColorPickerContainer;
+exports.cssColorPickerFooter = cssColorPickerFooter;
+exports.cssColorPickerHeader = cssColorPickerHeader;
 exports.cssColorPickerInputColorSwatchContainer = cssColorPickerInputColorSwatchContainer;
 exports.cssColorPickerInputContainer = cssColorPickerInputContainer;
+exports.cssColorPickerInputs = cssColorPickerInputs;
+exports.cssColorPickerInputsType = cssColorPickerInputsType;
+exports.cssColorPickerInputsValue = cssColorPickerInputsValue;
+exports.cssColorPickerInputsValueContainer = cssColorPickerInputsValueContainer;
 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;"}
+{"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/index.js

@@ -9,7 +9,11 @@ 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 colorPickerHeader = require('./components/color-picker-header.js');
+var colorPickerInputs = require('./components/color-picker-inputs/color-picker-inputs.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');
 
@@ -28,8 +32,12 @@ const ColorPickerNewPure = ({ id, name }) => {
                         React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color })),
                     React__default['default'].createElement(input['default'], { type: "text", id: id, name: name, value: `# ${color === null || color === void 0 ? void 0 : color.toUpperCase()}`, readOnly: true }))),
             React__default['default'].createElement(index['default'].Content, null,
+                React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, null),
                 React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerContainer]}` },
-                    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(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(colorPickerInputs.ColorPickerInputs, null),
+                    React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null)),
+                React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null)))));
 };
 const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
     const colorPickerNewContext = use_color_picker['default']({

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

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

@@ -17,6 +17,10 @@ const getHexValue = (colorSet) => {
 const getHexValueString = (colorSet) => {
     return `#${getHexValue(colorSet)}`;
 };
+const isHexChar = (value) => {
+    const hexRegEx = /^$|[0-9a-fA-F]+$/;
+    return hexRegEx.test(value);
+};
 const getAllColorTypes = (color) => {
     const tinyColor = getTinyColorInstance(color);
     const rgba = getRgbaValue(tinyColor);
@@ -39,4 +43,5 @@ exports.getHexValue = getHexValue;
 exports.getHexValueString = getHexValueString;
 exports.getRgbaValue = getRgbaValue;
 exports.getTinyColorInstance = getTinyColorInstance;
+exports.isHexChar = isHexChar;
 //# 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;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;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,27 +1,28 @@
 import React, { useContext } from 'react';
-import Button from '@auroraComponents/button';
-import { ColorPickerNewContext } from '../context';
-import { DropdownContext } from '@auroraComponents/dropdown/context';
-import '../types';
-import '@auroraComponents/dropdown/context/types';
-import { cssColorPickerFooter } from '../css_classes';
-import { getAllColorTypes } from '../utilities';
-import styles from '@auroraCss/color_picker_new/main.module.less';
-import { useTranslation } from 'react-i18next';
-export const ColorPickerFooter = () => {
-    const { closeDropdown } = useContext(DropdownContext);
-    const { color, handleCancel, handleSave } = useContext(ColorPickerNewContext);
-    const [t] = useTranslation();
-    const handleCancelButton = () => {
-        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
-        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
-    };
-    const handleSaveButton = () => {
-        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
-        handleSave(getAllColorTypes(color));
-    };
-    return (React.createElement("div", { className: `${styles[cssColorPickerFooter]}` },
-        React.createElement(Button, { size: "small", variant: "outline", onClick: handleCancelButton }, t('cancel')),
-        React.createElement(Button, { size: "small", onClick: handleSaveButton }, t('save'))));
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import Button from '../../button/index.js';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import { cssColorPickerFooter } from '../css_classes.js';
+import { ColorPickerNewContext } from '../context.js';
+import { getAllColorTypes } from '../utilities.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+
+const ColorPickerFooter = () => {
+    const { closeDropdown } = useContext(DropdownContext);
+    const { color, handleCancel, handleSave } = useContext(ColorPickerNewContext);
+    const [t] = useTranslation();
+    const handleCancelButton = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+    };
+    const handleSaveButton = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleSave(getAllColorTypes(color));
+    };
+    return (React.createElement("div", { className: `${styles[cssColorPickerFooter]}` },
+        React.createElement(Button, { size: "small", variant: "outline", onClick: handleCancelButton }, t('cancel')),
+        React.createElement(Button, { size: "small", onClick: handleSaveButton }, t('save'))));
 };
-//# sourceMappingURL=color-picker-footer.js.map
+
+export { ColorPickerFooter };
+//# sourceMappingURL=color-picker-footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-footer.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker_new/components/color-picker-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAA4C,UAAU,CAAC;AACvD,OAAiC,0CAA0C,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,EAAE,aAAa,EAAE,GAAqB,UAAU,CAAC,eAAe,CAAC,CAAC;IACxE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IAC3G,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,aAAa,aAAb,aAAa,uBAAb,aAAa,EAAI,CAAC;QAClB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC1B,aAAa,aAAb,aAAa,uBAAb,aAAa,EAAI,CAAC;QAClB,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAoB,CAAC,EAAE;QAC7C,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,kBAAkB,IAC7D,CAAC,CAAC,QAAQ,CAAC,CACP;QAET,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,gBAAgB,IACzC,CAAC,CAAC,MAAM,CAAC,CACL,CACP,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;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/components/color-picker-header.js

@@ -1,32 +1,33 @@
 import React, { useContext, useEffect } from 'react';
-import { cssColorPickerCloseIcon, cssColorPickerHeader } from '../css_classes';
-import { ColorPickerNewContext } from '../context';
-import { DropdownContext } from '@auroraComponents/dropdown/context';
-import '../types';
-import '@auroraComponents/dropdown/context/types';
-import IconClose from '@auroraAssets/icon_close';
-import styles from '@auroraCss/color_picker_new/main.module.less';
-import { useTranslation } from 'react-i18next';
-export const ColorPickerHeader = () => {
-    const { handleCancel } = useContext(ColorPickerNewContext);
-    const [t] = useTranslation();
-    const { closeDropdown, isOpen } = useContext(DropdownContext);
-    const handleCancelButton = () => {
-        closePicker();
-    };
-    const closePicker = () => {
-        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
-        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
-    };
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        document.addEventListener('visibilitychange', closePicker);
-        return () => document.removeEventListener('visibilitychange', closePicker);
-    }, [isOpen]);
-    return (React.createElement("div", { className: `${styles[cssColorPickerHeader]}` },
-        t('Select color'),
-        React.createElement("button", { onClick: handleCancelButton, className: `${styles[cssColorPickerCloseIcon]}` },
-            React.createElement(IconClose, { size: "m" }))));
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
+import { ColorPickerNewContext } from '../context.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import IconClose from '../../../assets/icon_close.js';
+
+const ColorPickerHeader = () => {
+    const { handleCancel } = useContext(ColorPickerNewContext);
+    const [t] = useTranslation();
+    const { closeDropdown, isOpen } = useContext(DropdownContext);
+    const handleCancelButton = () => {
+        closePicker();
+    };
+    const closePicker = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        document.addEventListener('visibilitychange', closePicker);
+        return () => document.removeEventListener('visibilitychange', closePicker);
+    }, [isOpen]);
+    return (React.createElement("div", { className: `${styles[cssColorPickerHeader]}` },
+        t('Select color'),
+        React.createElement("button", { onClick: handleCancelButton, className: `${styles[cssColorPickerCloseIcon]}` },
+            React.createElement(IconClose, { size: "m" }))));
 };
-//# sourceMappingURL=color-picker-header.js.map
+
+export { ColorPickerHeader };
+//# sourceMappingURL=color-picker-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-header.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker_new/components/color-picker-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAA4C,UAAU,CAAC;AACvD,OAAiC,0CAA0C,CAAC;AAC5E,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IACxF,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,GAAqB,UAAU,CAAC,eAAe,CAAC,CAAC;IAEhF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,WAAW,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,EAAI,CAAC;QAClB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAoB,CAAC,EAAE;QAC5C,CAAC,CAAC,cAAc,CAAC;QAElB,gCAAQ,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,uBAAuB,CAAC,EAAE;YAChF,oBAAC,SAAS,IAAC,IAAI,EAAC,GAAG,GAAG,CACjB,CACP,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;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/components/color-picker-inputs/color-picker-inputs-hex.js

@@ -1,33 +1,35 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { ColorPickerNewContext } from '@auroraComponents/color_picker_new/context';
-import '@auroraComponents/color_picker_new/types';
-import Input from '@auroraComponents/controls/components/input';
+import React, { useContext, useState, useEffect } from 'react';
 import { InputUtils } from '@dreamcommerce/utilities';
-import { isHexChar } from '@auroraComponents/color_picker_new/utilities';
-export const ColorPickerInputsHex = () => {
-    const { setColor, hex, handleOnChangeAlpha, alphaValue } = useContext(ColorPickerNewContext);
-    const [value, setValue] = useState(hex);
-    const [disable, setDisable] = useState(false);
-    const handleOnChange = (event) => {
-        const inputValue = event.target.value.replace('%', '');
-        if (isHexChar(inputValue)) {
-            setValue(inputValue);
-            setColor(inputValue);
-        }
-    };
-    const hexFocus = () => {
-        setDisable(true);
-    };
-    const hexBlur = () => {
-        setDisable(false);
-    };
-    useEffect(() => {
-        if (!disable) {
-            setValue(hex);
-        }
-    }, [hex, disable]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { padding: "small", type: "text", maxLength: 8, value: value.toUpperCase(), onChange: handleOnChange, onBlur: hexBlur, onFocus: hexFocus }),
-        React.createElement(Input, { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters })));
+import Input from '../../../controls/components/input.js';
+import { ColorPickerNewContext } from '../../context.js';
+import { isHexChar } from '../../utilities.js';
+
+const ColorPickerInputsHex = () => {
+    const { setColor, hex, handleOnChangeAlpha, alphaValue } = useContext(ColorPickerNewContext);
+    const [value, setValue] = useState(hex);
+    const [disable, setDisable] = useState(false);
+    const handleOnChange = (event) => {
+        const inputValue = event.target.value.replace('%', '');
+        if (isHexChar(inputValue)) {
+            setValue(inputValue);
+            setColor(inputValue);
+        }
+    };
+    const hexFocus = () => {
+        setDisable(true);
+    };
+    const hexBlur = () => {
+        setDisable(false);
+    };
+    useEffect(() => {
+        if (!disable) {
+            setValue(hex);
+        }
+    }, [hex, disable]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { padding: "small", type: "text", maxLength: 8, value: value.toUpperCase(), onChange: handleOnChange, onBlur: hexBlur, onFocus: hexFocus }),
+        React.createElement(Input, { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters })));
 };
-//# sourceMappingURL=color-picker-inputs-hex.js.map
+
+export { ColorPickerInputsHex };
+//# sourceMappingURL=color-picker-inputs-hex.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-inputs-hex.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAA4C,0CAA0C,CAAC;AACvF,OAAO,KAAK,MAAM,6CAA6C,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AAEzE,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,mBAAmB,EAAE,UAAU,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IAE1H,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAEvD,IAAI,SAAS,CAAC,UAAU,CAAC,EAAE;YACvB,QAAQ,CAAC,UAAU,CAAC,CAAC;YACrB,QAAQ,CAAC,UAAU,CAAC,CAAC;SACxB;IACL,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,UAAU,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,UAAU,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,OAAO,EAAE;YACV,QAAQ,CAAC,GAAG,CAAC,CAAC;SACjB;IACL,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH;QACI,oBAAC,KAAK,IACF,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,EAC1B,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,QAAQ,GACnB;QACF,oBAAC,KAAK,IAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAAI,CACrI,CACN,CAAC;AACN,CAAC,CAAC"}
+{"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;"}

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

@@ -1,14 +1,16 @@
 import React, { useContext } from 'react';
-import { ColorPickerNewContext } from '@auroraComponents/color_picker_new/context';
-import '@auroraComponents/color_picker_new/types';
-import Input from '@auroraComponents/controls/components/input';
 import { InputUtils } from '@dreamcommerce/utilities';
-export const ColorPickerInputsRgba = () => {
-    const { setR, setG, setB, handleOnChangeAlpha, alphaValue, rgbaArr } = useContext(ColorPickerNewContext);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { padding: "small", type: "text", value: rgbaArr[0], onChange: (e) => setR(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
-        React.createElement(Input, { padding: "small", type: "text", value: rgbaArr[1], onChange: (e) => setG(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
-        React.createElement(Input, { padding: "small", type: "text", value: rgbaArr[2], onChange: (e) => setB(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
-        React.createElement(Input, { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters })));
+import Input from '../../../controls/components/input.js';
+import { ColorPickerNewContext } from '../../context.js';
+
+const ColorPickerInputsRgba = () => {
+    const { setR, setG, setB, handleOnChangeAlpha, alphaValue, rgbaArr } = useContext(ColorPickerNewContext);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { padding: "small", type: "text", value: rgbaArr[0], onChange: (e) => setR(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { padding: "small", type: "text", value: rgbaArr[1], onChange: (e) => setG(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { padding: "small", type: "text", value: rgbaArr[2], onChange: (e) => setB(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters })));
 };
-//# sourceMappingURL=color-picker-inputs-rgba.js.map
+
+export { ColorPickerInputsRgba };
+//# sourceMappingURL=color-picker-inputs-rgba.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-inputs-rgba.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-rgba.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAA4C,0CAA0C,CAAC;AACvF,OAAO,KAAK,MAAM,6CAA6C,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACtC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IAEtI,OAAO,CACH;QACI,oBAAC,KAAK,IACF,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;QACF,oBAAC,KAAK,IACF,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;QACF,oBAAC,KAAK,IACF,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;QACF,oBAAC,KAAK,IAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAAI,CACrI,CACN,CAAC;AACN,CAAC,CAAC"}
+{"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;"}

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

@@ -1,30 +1,33 @@
-import { COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_RGB } from '../../constants';
 import React, { useState } from 'react';
-import { cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer } from '../../css_classes';
-import { ColorPickerInputsHex } from './color-picker-inputs-hex';
-import { ColorPickerInputsRgba } from './color-picker-inputs-rgba';
-import styles from '@auroraCss/color_picker_new/main.module.less';
-export const ColorPickerInputs = () => {
-    const [type, setType] = useState(COLOR_PICKER_TYPE_HEX);
-    const handleSelectType = (e) => {
-        setType(e.target.value);
-    };
-    const inputs = () => {
-        switch (type) {
-            case COLOR_PICKER_TYPE_HEX:
-                return React.createElement(ColorPickerInputsHex, null);
-            case COLOR_PICKER_TYPE_RGB:
-                return React.createElement(ColorPickerInputsRgba, null);
-            default:
-                return false;
-        }
-    };
-    return (React.createElement("div", { className: `${styles[cssColorPickerInputs]}` },
-        React.createElement("div", { className: `${styles[cssColorPickerInputsType]}` },
-            React.createElement("select", { value: type, onChange: handleSelectType },
-                React.createElement("option", { value: COLOR_PICKER_TYPE_HEX }, COLOR_PICKER_TYPE_HEX),
-                React.createElement("option", { value: COLOR_PICKER_TYPE_RGB }, COLOR_PICKER_TYPE_RGB))),
-        React.createElement("div", { className: `${styles[cssColorPickerInputsValue]}` },
-            React.createElement("div", { className: `${styles[cssColorPickerInputsValueContainer]}` }, inputs()))));
+import { COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_RGB } from '../../constants.js';
+import { cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer } from '../../css_classes.js';
+import styles from '../../../../css/color_picker_new/main.module.less.js';
+import { ColorPickerInputsHex } from './color-picker-inputs-hex.js';
+import { ColorPickerInputsRgba } from './color-picker-inputs-rgba.js';
+
+const ColorPickerInputs = () => {
+    const [type, setType] = useState(COLOR_PICKER_TYPE_HEX);
+    const handleSelectType = (e) => {
+        setType(e.target.value);
+    };
+    const inputs = () => {
+        switch (type) {
+            case COLOR_PICKER_TYPE_HEX:
+                return React.createElement(ColorPickerInputsHex, null);
+            case COLOR_PICKER_TYPE_RGB:
+                return React.createElement(ColorPickerInputsRgba, null);
+            default:
+                return false;
+        }
+    };
+    return (React.createElement("div", { className: `${styles[cssColorPickerInputs]}` },
+        React.createElement("div", { className: `${styles[cssColorPickerInputsType]}` },
+            React.createElement("select", { value: type, onChange: handleSelectType },
+                React.createElement("option", { value: COLOR_PICKER_TYPE_HEX }, COLOR_PICKER_TYPE_HEX),
+                React.createElement("option", { value: COLOR_PICKER_TYPE_RGB }, COLOR_PICKER_TYPE_RGB))),
+        React.createElement("div", { className: `${styles[cssColorPickerInputsValue]}` },
+            React.createElement("div", { className: `${styles[cssColorPickerInputsValueContainer]}` }, inputs()))));
 };
-//# sourceMappingURL=color-picker-inputs.js.map
+
+export { ColorPickerInputs };
+//# sourceMappingURL=color-picker-inputs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-inputs.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EACH,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,kCAAkC,EACrC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAElE,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAExD,MAAM,gBAAgB,GAAG,CAAC,CAAuC,EAAE,EAAE;QACjE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,GAAG,EAAE;QAChB,QAAQ,IAAI,EAAE;YACV,KAAK,qBAAqB;gBACtB,OAAO,oBAAC,oBAAoB,OAAG,CAAC;YACpC,KAAK,qBAAqB;gBACtB,OAAO,oBAAC,qBAAqB,OAAG,CAAC;YACrC;gBACI,OAAO,KAAK,CAAC;SACpB;IACL,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAoB,CAAC,EAAE;QAC7C,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,wBAAwB,CAAC,EAAE;YACjD,gCAAQ,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB;gBAC3C,gCAAQ,KAAK,EAAE,qBAAqB,IAAG,qBAAqB,CAAU;gBACtE,gCAAQ,KAAK,EAAE,qBAAqB,IAAG,qBAAqB,CAAU,CACjE,CACP;QAEN,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,CAAC,EAAE;YAClD,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,kCAAkC,CAAC,EAAE,IAAG,MAAM,EAAE,CAAO,CAC/E,CACJ,CACT,CAAC;AACN,CAAC,CAAC"}
+{"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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js

@@ -1,38 +1,40 @@
 import React, { useContext } from 'react';
-import { cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader } from '../css_classes';
-import { getHexValue, getTinyColorInstance } from '../utilities';
-import { ColorPickerNewContext } from '../context';
-import { ColorPickerSwatch } from './color-picker-swatch';
-import '../types';
-import styles from '@auroraCss/color_picker_new/main.module.less';
-import { useTranslation } from 'react-i18next';
-export const ColorPickerSwatches = () => {
-    const { hslArr, handlePickSwatch } = useContext(ColorPickerNewContext);
-    const [t] = useTranslation();
-    const [h, s] = hslArr;
-    const shades = [
-        { 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.createElement("div", { className: styles[cssColorPickerSwatches] },
-        React.createElement("div", { className: styles[cssColorPickerSwatchesHeader] },
-            React.createElement("p", null, t('Shades of color'))),
-        React.createElement("div", { className: styles[cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
-            const colorTiny = getTinyColorInstance(shade);
-            const colorHex = getHexValue(colorTiny);
-            const handleOnClick = () => {
-                handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch(colorHex);
-            };
-            return React.createElement(ColorPickerSwatch, { size: "small", onClick: handleOnClick, key: `${shade}-${index}`, color: colorHex });
-        }))));
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
+import { ColorPickerNewContext } from '../context.js';
+import { getTinyColorInstance, getHexValue } from '../utilities.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import { ColorPickerSwatch } from './color-picker-swatch.js';
+
+const ColorPickerSwatches = () => {
+    const { hslArr, handlePickSwatch } = useContext(ColorPickerNewContext);
+    const [t] = useTranslation();
+    const [h, s] = hslArr;
+    const shades = [
+        { 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.createElement("div", { className: styles[cssColorPickerSwatches] },
+        React.createElement("div", { className: styles[cssColorPickerSwatchesHeader] },
+            React.createElement("p", null, t('Shades of color'))),
+        React.createElement("div", { className: styles[cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
+            const colorTiny = getTinyColorInstance(shade);
+            const colorHex = getHexValue(colorTiny);
+            const handleOnClick = () => {
+                handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch(colorHex);
+            };
+            return React.createElement(ColorPickerSwatch, { size: "small", onClick: handleOnClick, key: `${shade}-${index}`, color: colorHex });
+        }))));
 };
-//# sourceMappingURL=color-picker-swatches.js.map
+
+export { ColorPickerSwatches };
+//# sourceMappingURL=color-picker-swatches.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-swatches.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker_new/components/color-picker-swatches.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,6BAA6B,EAAE,4BAA4B,EAAE,MAAM,gBAAgB,CAAC;AACrH,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAA4C,UAAU,CAAC;AACvD,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACpC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IACpG,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC;IACtB,MAAM,MAAM,GAAG;QACX,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;QACf,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;KACjB,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;QAC1C,6BAAK,SAAS,EAAE,MAAM,CAAC,4BAA4B,CAAC;YAChD,+BAAI,CAAC,CAAC,iBAAiB,CAAC,CAAK,CAC3B;QAEN,6BAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,CAAC,IAChD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,SAAS,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC9C,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;YAExC,MAAM,aAAa,GAAG,GAAG,EAAE;gBACvB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,CAAC,CAAC;YACjC,CAAC,CAAC;YAEF,OAAO,oBAAC,iBAAiB,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,GAAI,CAAC;QACjH,CAAC,CAAC,CACA,CACJ,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/constants.js

@@ -1,6 +1,8 @@
 const COLOR_PICKER_INITIAL_STATE = '#000000';
 const COLOR_PICKER_WIDTH = 220;
-const COLOR_PICKER_HEIGHT = 200;
+const COLOR_PICKER_HEIGHT = 200;
+const COLOR_PICKER_TYPE_HEX = 'hex';
+const COLOR_PICKER_TYPE_RGB = 'rgb';
 
-export { COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_WIDTH };
+export { COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_RGB, COLOR_PICKER_WIDTH };
 //# sourceMappingURL=constants.js.map

package/build/esm/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,12 +1,22 @@
 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 cssColorPickerInputContainer = 'color-picker__input-container';
+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';
 
-export { cssColorPicker, cssColorPickerContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall };
+export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader };
 //# sourceMappingURL=css_classes.js.map

package/build/esm/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;"}
+{"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;"}

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

@@ -5,7 +5,11 @@ import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorS
 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 { 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';
 
@@ -20,8 +24,12 @@ const ColorPickerNewPure = ({ id, name }) => {
                         React.createElement(ColorPickerSwatch, { color: color })),
                     React.createElement(Input, { type: "text", id: id, name: name, value: `# ${color === null || color === void 0 ? void 0 : color.toUpperCase()}`, readOnly: true }))),
             React.createElement(Dropdown.Content, null,
+                React.createElement(ColorPickerHeader, null),
                 React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
-                    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(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({

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

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

@@ -13,6 +13,10 @@ const getHexValue = (colorSet) => {
 const getHexValueString = (colorSet) => {
     return `#${getHexValue(colorSet)}`;
 };
+const isHexChar = (value) => {
+    const hexRegEx = /^$|[0-9a-fA-F]+$/;
+    return hexRegEx.test(value);
+};
 const getAllColorTypes = (color) => {
     const tinyColor = getTinyColorInstance(color);
     const rgba = getRgbaValue(tinyColor);
@@ -30,5 +34,5 @@ const getAllColorTypes = (color) => {
     };
 };
 
-export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance };
+export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, 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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.12.1-33",
+  "version": "2.12.1-35",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",