@dreamcommerce/aurora 2.12.1-53 → 2.12.1-54

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

@@ -6,9 +6,9 @@ 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 utilities = require('../utilities.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 }; }

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

@@ -5,22 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var utilities = require('@dreamcommerce/utilities');
 var input = require('../../../controls/components/input.js');
-var utilities$1 = require('../../utilities.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 { updateColor, hex, handleOnChangeAlpha, alphaValue } = React.useContext(context.ColorPickerNewContext);
+    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);
-            updateColor(inputValue);
+            setColor(inputValue);
         }
     };
     const hexFocus = () => {

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var utilities = require('../utilities.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 }; }

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
-var utilities = require('../utilities.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');
 var colorPickerSwatch = require('./color-picker-swatch.js');
 

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var constants = require('../constants.js');
-var index$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
 var context = require('../context.js');
+var constants = require('../constants.js');
 var css_classes = require('../css_classes.js');
 var colorLabelInput = require('./color-label-input.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');
@@ -21,7 +21,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const ColorPickerNewPure = ({ id, name }) => {
-    const { color, updateColor, handleCancel } = React.useContext(context.ColorPickerNewContext);
+    const { color, setColor, 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,
             React__default['default'].createElement(index['default'].CustomLabel, null,
@@ -32,7 +33,7 @@ const ColorPickerNewPure = ({ id, name }) => {
             React__default['default'].createElement(index['default'].Content, { onClickOutside: handleCancel },
                 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: updateColor, 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)))));

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

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var constants = require('./constants.js');
-var use_color_picker = require('./hooks/use_color_picker.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const ColorPickerNewContext = React.createContext({
     color: '',
-    updateColor: () => { },
+    setColor: () => { },
     hex: '',
     hslArr: [],
     handleOnChangeAlpha: () => { },
@@ -24,37 +18,7 @@ const ColorPickerNewContext = React.createContext({
     handleCancel: () => { },
     handleSave: () => { },
     handlePickSwatch: () => { }
-});
-const actionTypes = {
-    UPDATE_COLOR: 'UPDATE_COLOR'
-};
-const reducer = (state, action) => {
-    switch (action.type) {
-        case actionTypes.UPDATE_COLOR:
-            return action.payload;
-        default:
-            return state;
-    }
-};
-const ColorPickerNewContextProvider = ({ initialColor, onChange, onCancel, onSave, children }) => {
-    const initialColorValue = initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE;
-    const [color, dispatch] = React.useReducer(reducer, initialColorValue);
-    const updateColor = (color) => {
-        dispatch({
-            type: actionTypes.UPDATE_COLOR,
-            payload: color
-        });
-    };
-    const contextValue = use_color_picker['default']({
-        color,
-        updateColor,
-        onChange,
-        onCancel,
-        onSave
-    });
-    return React__default['default'].createElement(ColorPickerNewContext.Provider, { value: contextValue }, children);
-};
+});
 
 exports.ColorPickerNewContext = ColorPickerNewContext;
-exports.ColorPickerNewContextProvider = ColorPickerNewContextProvider;
 //# sourceMappingURL=context.js.map

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

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var utilities = require('../utilities.js');
+var constants = require('../constants.js');
 var useColorPicker$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
+var utilities = require('../utilities.js');
 
-const useColorPicker = ({ color, updateColor, onChange, onCancel, onSave }) => {
+const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
+    const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
     const [choosenColor, setChoosenColor] = React.useState(color);
-    const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1.useColorPicker(color, updateColor);
+    const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1.useColorPicker(color, setColor);
     const tinyColor = utilities.getTinyColorInstance(color);
     const hex = utilities.getHexValue(tinyColor);
     const [alpha, setAlpha] = React.useState(rgbaArr[3] * 100);
@@ -27,9 +29,10 @@ const useColorPicker = ({ color, updateColor, onChange, onCancel, onSave }) => {
     }, [rgbaArr[3]]);
     React.useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(utilities.getAllColorTypes(color));
+        console.log('color', color);
     }, [color]);
     const handleCancel = () => {
-        updateColor(choosenColor);
+        setColor(choosenColor);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
     const handleSave = () => {
@@ -37,11 +40,11 @@ const useColorPicker = ({ color, updateColor, onChange, onCancel, onSave }) => {
         onSave === null || onSave === void 0 ? void 0 : onSave(utilities.getAllColorTypes(color));
     };
     const handlePickSwatch = (color) => {
-        updateColor(color);
+        setColor(color);
     };
     return {
         color,
-        updateColor,
+        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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

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

@@ -2,9 +2,9 @@ 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 { getAllColorTypes } from '../utilities.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 = () => {

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

@@ -1,18 +1,18 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { InputUtils } from '@dreamcommerce/utilities';
 import Input from '../../../controls/components/input.js';
-import { isHexChar } from '../../utilities.js';
 import { ColorPickerNewContext } from '../../context.js';
+import { isHexChar } from '../../utilities.js';
 
 const ColorPickerInputsHex = () => {
-    const { updateColor, hex, handleOnChangeAlpha, alphaValue } = useContext(ColorPickerNewContext);
+    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);
-            updateColor(inputValue);
+            setColor(inputValue);
         }
     };
     const hexFocus = () => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { getTinyColorInstance, getHexValueString } from '../utilities.js';
 import { cssColorPickerSwatch, cssColorPickerSwatchSmall, cssColorPickerSwatchBig, cssColorPickerSwatchFill } from '../css_classes.js';
+import { getTinyColorInstance, getHexValueString } from '../utilities.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 
 const ColorPickerSwatch = ({ color, size, onClick }) => {

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

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { getTinyColorInstance, getHexValue } from '../utilities.js';
 import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.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';
 

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

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
-import { ColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js';
 import { ColorPickerNewContext } from '../context.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
 import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerRbgcp } from '../css_classes.js';
 import { ColorLabelInput } from './color-label-input.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';
@@ -13,7 +13,8 @@ import { ColorPickerSwatches } from './color-picker-swatches.js';
 import Dropdown from '../../dropdown/index.js';
 
 const ColorPickerNewPure = ({ id, name }) => {
-    const { color, updateColor, handleCancel } = useContext(ColorPickerNewContext);
+    const { color, setColor, handleCancel } = useContext(ColorPickerNewContext);
+    // const [color, setColor] = useState('rgba(255,255,255,1)');
     return (React.createElement("div", { className: `${styles[cssColorPicker]}` },
         React.createElement(Dropdown, null,
             React.createElement(Dropdown.CustomLabel, null,
@@ -24,7 +25,7 @@ const ColorPickerNewPure = ({ id, name }) => {
             React.createElement(Dropdown.Content, { onClickOutside: handleCancel },
                 React.createElement(ColorPickerHeader, null),
                 React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
-                    React.createElement(ColorPicker, { value: color, onChange: updateColor, 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)))));

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

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

@@ -1,4 +1,3 @@
-import { IColorPickerNewContextProps, IColorPickerNewContextProviderProps } from './types';
-import React, { FC } from 'react';
-export declare const ColorPickerNewContext: React.Context<IColorPickerNewContextProps>;
-export declare const ColorPickerNewContextProvider: FC<IColorPickerNewContextProviderProps>;
+/// <reference types="react" />
+import { IColorPickerNewContextProps } from './types';
+export declare const ColorPickerNewContext: import("react").Context<IColorPickerNewContextProps>;

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

@@ -1,10 +1,8 @@
-import React, { createContext, useReducer } from 'react';
-import { COLOR_PICKER_INITIAL_STATE } from './constants.js';
-import useColorPicker from './hooks/use_color_picker.js';
+import { createContext } from 'react';
 
 const ColorPickerNewContext = createContext({
     color: '',
-    updateColor: () => { },
+    setColor: () => { },
     hex: '',
     hslArr: [],
     handleOnChangeAlpha: () => { },
@@ -16,36 +14,7 @@ const ColorPickerNewContext = createContext({
     handleCancel: () => { },
     handleSave: () => { },
     handlePickSwatch: () => { }
-});
-const actionTypes = {
-    UPDATE_COLOR: 'UPDATE_COLOR'
-};
-const reducer = (state, action) => {
-    switch (action.type) {
-        case actionTypes.UPDATE_COLOR:
-            return action.payload;
-        default:
-            return state;
-    }
-};
-const ColorPickerNewContextProvider = ({ initialColor, onChange, onCancel, onSave, children }) => {
-    const initialColorValue = initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE;
-    const [color, dispatch] = useReducer(reducer, initialColorValue);
-    const updateColor = (color) => {
-        dispatch({
-            type: actionTypes.UPDATE_COLOR,
-            payload: color
-        });
-    };
-    const contextValue = useColorPicker({
-        color,
-        updateColor,
-        onChange,
-        onCancel,
-        onSave
-    });
-    return React.createElement(ColorPickerNewContext.Provider, { value: contextValue }, children);
-};
+});
 
-export { ColorPickerNewContext, ColorPickerNewContextProvider };
+export { ColorPickerNewContext };
 //# sourceMappingURL=context.js.map

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

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

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

@@ -1,14 +1,14 @@
+/// <reference types="react" />
 import { ColorPickerColorTypes, IColorPickerColor } from '../types';
 export declare type ColorPickerHookProps = {
-    color: string;
-    updateColor: (color: string) => void;
+    initialColor?: ColorPickerColorTypes['hex'];
     onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;
 };
-declare const useColorPicker: ({ color, updateColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
+declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
     color: string;
-    updateColor: (color: string) => void;
+    setColor: import("react").Dispatch<import("react").SetStateAction<string>>;
     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,12 @@
 import { useState, useEffect } from 'react';
-import { getTinyColorInstance, getHexValue, getAllColorTypes } from '../utilities.js';
+import { COLOR_PICKER_INITIAL_STATE } from '../constants.js';
 import { useColorPicker as useColorPicker$1 } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
+import { getTinyColorInstance, getHexValue, getAllColorTypes } from '../utilities.js';
 
-const useColorPicker = ({ color, updateColor, onChange, onCancel, onSave }) => {
+const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
+    const [color, setColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
     const [choosenColor, setChoosenColor] = useState(color);
-    const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1(color, updateColor);
+    const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1(color, setColor);
     const tinyColor = getTinyColorInstance(color);
     const hex = getHexValue(tinyColor);
     const [alpha, setAlpha] = useState(rgbaArr[3] * 100);
@@ -23,9 +25,10 @@ const useColorPicker = ({ color, updateColor, onChange, onCancel, onSave }) => {
     }, [rgbaArr[3]]);
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(getAllColorTypes(color));
+        console.log('color', color);
     }, [color]);
     const handleCancel = () => {
-        updateColor(choosenColor);
+        setColor(choosenColor);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
     const handleSave = () => {
@@ -33,11 +36,11 @@ const useColorPicker = ({ color, updateColor, onChange, onCancel, onSave }) => {
         onSave === null || onSave === void 0 ? void 0 : onSave(getAllColorTypes(color));
     };
     const handlePickSwatch = (color) => {
-        updateColor(color);
+        setColor(color);
     };
     return {
         color,
-        updateColor,
+        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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,mDAAmD,8FAAkG;AACrJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,9 +1,16 @@
 import React from 'react';
-import { ColorPickerNewContextProvider } from './context.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 }) => {
-    return (React.createElement(ColorPickerNewContextProvider, { initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave },
+    const contextValue = useColorPicker({
+        initialColor,
+        onChange,
+        onCancel,
+        onSave
+    });
+    return (React.createElement(ColorPickerNewContext.Provider, { value: contextValue },
         React.createElement(ColorPickerNewPure, { id: id, name: name })));
 };
 

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

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 export interface IColorPickerNewPureProps {
     id: string;
     name?: string;
@@ -11,12 +11,9 @@ export interface IColorPickerNewProps {
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;
 }
-export interface IColorPickerNewContextProviderProps extends Omit<IColorPickerNewProps, 'id' | 'name'> {
-    children: ReactNode;
-}
 export interface IColorPickerNewContextProps {
     color: string;
-    updateColor: (color: string) => void;
+    setColor: Dispatch<SetStateAction<string>>;
     hex: string;
     hslArr: number[];
     handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;

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

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

package/package.json

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