@dreamcommerce/aurora 2.12.1-45 → 2.12.1-46

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

@@ -4,14 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var input = require('../../controls/components/input.js');
-var context = require('../context.js');
 var constants = require('../constants.js');
+var context = require('../context.js');
 var css_classes = require('../css_classes.js');
 var index$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
-var colorPickerFooter = require('./color-picker-footer.js');
 var colorPickerHeader = require('./color-picker-header.js');
-var colorPickerInputs = require('./color-picker-inputs/color-picker-inputs.js');
 var colorPickerSwatch = require('./color-picker-swatch.js');
 var colorPickerSwatches = require('./color-picker-swatches.js');
 var index = require('../../dropdown/index.js');
@@ -20,8 +18,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ColorPickerNewPure = ({ id, name }) => {
-    const { color, setColor, hex, handleCancel } = React.useContext(context.ColorPickerNewContext);
+const ColorPickerNewPure = ({ color, setColor, id, name }) => {
+    const { hex, handleCancel } = React.useContext(context.ColorPickerNewContext);
     // const [color, setColor] = useState('rgba(255,255,255,1)');
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPicker]}` },
         React__default['default'].createElement(index['default'], null,
@@ -34,9 +32,7 @@ const ColorPickerNewPure = ({ id, name }) => {
                 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(colorPickerInputs.ColorPickerInputs, null),
-                    React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null)),
-                React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null)))));
+                    React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null))))));
 };
 
 exports.default = ColorPickerNewPure;

package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-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,sBAAsB,0FAA8F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,0FAA8F;AACpH;AACA;AACA;AACA;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,13 +4,9 @@ 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_TYPE_HEX = 'hex';
-const COLOR_PICKER_TYPE_RGB = 'rgb';
+const COLOR_PICKER_HEIGHT = 200;
 
 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;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 const ColorPickerNewContext = React.createContext({
-    color: '',
-    setColor: () => { },
+    // color: '',
+    // setColor: () => {},
     hex: '',
     hslArr: [],
     handleOnChangeAlpha: () => { },

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

@@ -15,24 +15,14 @@ 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 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';
+const cssColorPickerInputContainer = 'color-picker__input-container';
 
 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;

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

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

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

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var constants = require('../constants.js');
 var useColorPicker$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
 var utilities = require('../utilities.js');
 
-const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
-    const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
+const useColorPicker = ({ color, setColor, onChange, onCancel, onSave }) => {
     const [choosenColor, setChoosenColor] = React.useState(color);
     const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1.useColorPicker(color, setColor);
     const tinyColor = utilities.getTinyColorInstance(color);
@@ -27,9 +25,9 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
     React.useEffect(() => {
         setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
     }, [rgbaArr[3]]);
-    // useEffect(() => {
-    //     onChange?.(getAllColorTypes(color));
-    // }, [color]);
+    React.useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(utilities.getAllColorTypes(color));
+    }, [color]);
     const handleCancel = () => {
         setColor(choosenColor);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
@@ -42,8 +40,6 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
         setColor(color);
     };
     return {
-        color,
-        setColor,
         hex,
         hslArr,
         handleOnChangeAlpha,

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

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

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var constants = require('./constants.js');
 var context = require('./context.js');
 var pureColorPicker = require('./components/pure-color-picker.js');
 var use_color_picker = require('./hooks/use_color_picker.js');
@@ -12,14 +13,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
+    const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
     const contextValue = use_color_picker['default']({
-        initialColor,
+        color,
+        setColor,
         onChange,
         onCancel,
         onSave
     });
     return (React__default['default'].createElement(context.ColorPickerNewContext.Provider, { value: contextValue },
-        React__default['default'].createElement(pureColorPicker['default'], { id: id, name: name })));
+        React__default['default'].createElement(pureColorPicker['default'], { color: color, setColor: setColor, id: id, name: name })));
 };
 
 exports.default = ColorPickerNewWithContext;

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

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

@@ -17,10 +17,6 @@ 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);
@@ -43,5 +39,4 @@ 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;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,28 +1,27 @@
 import React, { useContext } from 'react';
-import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
-import Button from '../../button/index.js';
-import { DropdownContext } from '../../dropdown/context/index.js';
-import { ColorPickerNewContext } from '../context.js';
-import { cssColorPickerFooter } from '../css_classes.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'))));
+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 { 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("#fff"));
+    };
+    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'))));
 };
-
-export { ColorPickerFooter };
-//# sourceMappingURL=color-picker-footer.js.map
+//# 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":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;"}
+{"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,YAAY,EAAE,UAAU,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IACpG,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,MAAM,CAAC,CAAC,CAAC;IACzC,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"}

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

@@ -1,35 +1,33 @@
-import React, { useContext, useState, useEffect } from 'react';
+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 { InputUtils } from '@dreamcommerce/utilities';
-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 })));
+import { isHexChar } from '@auroraComponents/color_picker_new/utilities';
+export const ColorPickerInputsHex = () => {
+    const { 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 })));
 };
-
-export { ColorPickerInputsHex };
-//# sourceMappingURL=color-picker-inputs-hex.js.map
+//# 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":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;"}
+{"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,GAAG,EAAE,mBAAmB,EAAE,UAAU,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IAEhH,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,wBAAwB;SAC3B;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"}

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

@@ -1,16 +1,14 @@
 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';
-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 })));
+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 })));
 };
-
-export { ColorPickerInputsRgba };
-//# sourceMappingURL=color-picker-inputs-rgba.js.map
+//# 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":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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"}

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

@@ -1,33 +1,30 @@
+import { COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_RGB } from '../../constants';
 import React, { useState } from 'react';
-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()))));
+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()))));
 };
-
-export { ColorPickerInputs };
-//# sourceMappingURL=color-picker-inputs.js.map
+//# 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":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;"}
+{"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"}

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

@@ -1,19 +1,17 @@
 import React, { useContext } from 'react';
 import Input from '../../controls/components/input.js';
-import { ColorPickerNewContext } from '../context.js';
 import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
+import { ColorPickerNewContext } from '../context.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 styles from '../../../css/color_picker_new/main.module.less.js';
-import { ColorPickerFooter } from './color-picker-footer.js';
 import { ColorPickerHeader } from './color-picker-header.js';
-import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
 import { ColorPickerSwatch } from './color-picker-swatch.js';
 import { ColorPickerSwatches } from './color-picker-swatches.js';
 import Dropdown from '../../dropdown/index.js';
 
-const ColorPickerNewPure = ({ id, name }) => {
-    const { color, setColor, hex, handleCancel } = useContext(ColorPickerNewContext);
+const ColorPickerNewPure = ({ color, setColor, id, name }) => {
+    const { hex, handleCancel } = useContext(ColorPickerNewContext);
     // const [color, setColor] = useState('rgba(255,255,255,1)');
     return (React.createElement("div", { className: `${styles[cssColorPicker]}` },
         React.createElement(Dropdown, null,
@@ -26,9 +24,7 @@ const ColorPickerNewPure = ({ id, name }) => {
                 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(ColorPickerInputs, null),
-                    React.createElement(ColorPickerSwatches, null)),
-                React.createElement(ColorPickerFooter, null)))));
+                    React.createElement(ColorPickerSwatches, null))))));
 };
 
 export default ColorPickerNewPure;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;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,4BAA4B,0FAA8F;AAC1H;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,8 +1,6 @@
 const COLOR_PICKER_INITIAL_STATE = '#000000';
 const COLOR_PICKER_WIDTH = 220;
-const COLOR_PICKER_HEIGHT = 200;
-const COLOR_PICKER_TYPE_HEX = 'hex';
-const COLOR_PICKER_TYPE_RGB = 'rgb';
+const COLOR_PICKER_HEIGHT = 200;
 
-export { COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_RGB, COLOR_PICKER_WIDTH };
+export { COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, 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;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}

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

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
 const ColorPickerNewContext = createContext({
-    color: '',
-    setColor: () => { },
+    // color: '',
+    // setColor: () => {},
     hex: '',
     hslArr: [],
     handleOnChangeAlpha: () => { },

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

@@ -11,12 +11,7 @@ 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 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';
+const cssColorPickerInputContainer = 'color-picker__input-container';
 
-export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader };
+export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, 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;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;"}

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

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 import { ColorPickerColorTypes, IColorPickerColor } from '../types';
+import { Dispatch, SetStateAction } from 'react';
 export declare type ColorPickerHookProps = {
-    initialColor?: ColorPickerColorTypes['hex'];
+    color: string;
+    setColor: Dispatch<SetStateAction<string>>;
     onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;
 };
-declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
-    color: string;
-    setColor: import("react").Dispatch<import("react").SetStateAction<string>>;
+declare const useColorPicker: ({ color, setColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
     hex: string;
     hslArr: number[];
     handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -1,10 +1,8 @@
 import { useState, useEffect } from 'react';
-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, getAllColorTypes } from '../utilities.js';
 
-const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
-    const [color, setColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
+const useColorPicker = ({ color, setColor, onChange, onCancel, onSave }) => {
     const [choosenColor, setChoosenColor] = useState(color);
     const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1(color, setColor);
     const tinyColor = getTinyColorInstance(color);
@@ -23,9 +21,9 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
     useEffect(() => {
         setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
     }, [rgbaArr[3]]);
-    // useEffect(() => {
-    //     onChange?.(getAllColorTypes(color));
-    // }, [color]);
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(getAllColorTypes(color));
+    }, [color]);
     const handleCancel = () => {
         setColor(choosenColor);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
@@ -38,8 +36,6 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
         setColor(color);
     };
     return {
-        color,
-        setColor,
         hex,
         hslArr,
         handleOnChangeAlpha,

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

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

@@ -1,17 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { COLOR_PICKER_INITIAL_STATE } from './constants.js';
 import { ColorPickerNewContext } from './context.js';
 import ColorPickerNewPure from './components/pure-color-picker.js';
 import useColorPicker from './hooks/use_color_picker.js';
 
 const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
+    const [color, setColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
     const contextValue = useColorPicker({
-        initialColor,
+        color,
+        setColor,
         onChange,
         onCancel,
         onSave
     });
     return (React.createElement(ColorPickerNewContext.Provider, { value: contextValue },
-        React.createElement(ColorPickerNewPure, { id: id, name: name })));
+        React.createElement(ColorPickerNewPure, { color: color, setColor: setColor, id: id, name: name })));
 };
 
 export default ColorPickerNewWithContext;

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

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

@@ -1,5 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 export interface IColorPickerNewPureProps {
+    color: string;
+    setColor: Dispatch<SetStateAction<string>>;
     id: string;
     name?: string;
 }
@@ -12,8 +14,6 @@ export interface IColorPickerNewProps {
     onSave?: (color: IColorPickerColor) => void;
 }
 export interface IColorPickerNewContextProps {
-    color: string;
-    setColor: Dispatch<SetStateAction<string>>;
     hex: string;
     hslArr: number[];
     handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -13,10 +13,6 @@ 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);
@@ -34,5 +30,5 @@ const getAllColorTypes = (color) => {
     };
 };
 
-export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, isHexChar };
+export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance };
 //# 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;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;"}

package/package.json

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

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

@@ -1,36 +0,0 @@
-'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 context = require('../context.js');
-var css_classes = require('../css_classes.js');
-var utilities = require('../utilities.js');
-var main_module = require('../../../css/color_picker_new/main.module.less.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-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

@@ -1 +0,0 @@
-{"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-inputs/color-picker-inputs-hex.js

@@ -1,43 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,24 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,41 +0,0 @@
-'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

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