@dreamcommerce/aurora 3.0.0-287 → 3.0.0-289

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js

@@ -14,16 +14,6 @@ var ColorPickerInputs = function ColorPickerInputs() {
   var handleSelectType = function handleSelectType(e) {
     setType(e.target.value);
   };
-  var inputs = function inputs() {
-    switch (type) {
-      case COLOR_PICKER_TYPES.HEX:
-        return /*#__PURE__*/React.createElement(ColorPickerInputsHex, null);
-      case COLOR_PICKER_TYPES.RGB:
-        return /*#__PURE__*/React.createElement(ColorPickerInputsRgba, null);
-      default:
-        return false;
-    }
-  };
   return /*#__PURE__*/React.createElement(Stack, {
     spacing: "1",
     align: "center",
@@ -42,7 +32,7 @@ var ColorPickerInputs = function ColorPickerInputs() {
     className: "aurora-flex-1"
   }, /*#__PURE__*/React.createElement("div", {
     className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden aurora-h-6"
-  }, inputs())), /*#__PURE__*/React.createElement(CurrentColorPreview, null));
+  }, type === COLOR_PICKER_TYPES.HEX && /*#__PURE__*/React.createElement(ColorPickerInputsHex, null), type === COLOR_PICKER_TYPES.RGB && /*#__PURE__*/React.createElement(ColorPickerInputsRgba, null))), /*#__PURE__*/React.createElement(CurrentColorPreview, null));
 };
 
 export { ColorPickerInputs };

package/build/esm/packages/aurora/src/components/color_picker/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;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;"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js

@@ -1,24 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Input } from '../../../input/input.js';
-import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
 import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
+import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { ColorPickerUtils } from '../../color_picker_utils.js';
-import { useColorPicker } from '../../hooks/use_color_picker.js';
-import { InputUtils } from '@dreamcommerce/utilities';
 
 var ColorPickerInputsHex = function ColorPickerInputsHex() {
   var _useColorPicker = useColorPicker(),
     setColor = _useColorPicker.setColor,
     hex = _useColorPicker.hex,
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
-    alphaValue = _useColorPicker.alphaValue,
+    alpha = _useColorPicker.alpha,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType;
   var _useState = useState(hex),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
+  var valueRef = useRef(value);
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     disable = _useState4[0],
@@ -30,6 +30,7 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
   var handleOnChange = function handleOnChange(event) {
     var inputValue = event.target.value.replace('%', '');
     setValue(inputValue);
+    valueRef.current = inputValue;
     if (!tinycolor(inputValue).isValid()) return;
     if (isCurrentValueGradient && gradientType) {
       var newColors = ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
@@ -45,8 +46,10 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
     setDisable(false);
   };
   useEffect(function () {
+    if (hex === valueRef.current) return;
     if (!disable) {
       setValue(hex);
+      valueRef.current = hex;
     }
   }, [hex, disable]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
@@ -62,9 +65,11 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
   }, /*#__PURE__*/React.createElement("input", {
     className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
     type: "text",
-    value: alphaValue,
-    onChange: handleOnChangeAlpha,
-    onKeyPress: InputUtils.preventTypingLetters
+    value: Math.round(alpha),
+    onChange: function onChange(e) {
+      return handleOnChangeAlpha(Number(e.target.value));
+    },
+    onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement("div", {
     className: "aurora-text-xs aurora-pl-0.5"
   }, "%")));

package/build/esm/packages/aurora/src/components/color_picker/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,0BAA0B,oFAAwF;AAClH,sBAAsB,2DAA+D;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,2DAA+D;AACrF,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_inputs/color_picker_inputs_rgba.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input } from '../../../input/input.js';
 import { useColorPicker } from '../../hooks/use_color_picker.js';
-import { InputUtils } from '@dreamcommerce/utilities';
+import { ColorPickerUtils } from '../../color_picker_utils.js';
 
 var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
   var _useColorPicker = useColorPicker(),
@@ -9,7 +9,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     setG = _useColorPicker.setG,
     setB = _useColorPicker.setB,
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
-    alphaValue = _useColorPicker.alphaValue,
+    alpha = _useColorPicker.alpha,
     rgbaArr = _useColorPicker.rgbaArr;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
     className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
@@ -18,7 +18,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     onChange: function onChange(e) {
       return setR(Number(e.target.value));
     },
-    onKeyPress: InputUtils.preventTypingLetters
+    onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
     className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
     type: "text",
@@ -26,7 +26,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     onChange: function onChange(e) {
       return setG(Number(e.target.value));
     },
-    onKeyPress: InputUtils.preventTypingLetters
+    onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
     className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
     type: "text",
@@ -34,15 +34,17 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     onChange: function onChange(e) {
       return setB(Number(e.target.value));
     },
-    onKeyPress: InputUtils.preventTypingLetters
+    onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
   }, /*#__PURE__*/React.createElement("input", {
     className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
     type: "text",
-    value: alphaValue,
-    onChange: handleOnChangeAlpha,
-    onKeyPress: InputUtils.preventTypingLetters
+    value: Math.round(alpha),
+    onChange: function onChange(e) {
+      return handleOnChangeAlpha(Number(e.target.value));
+    },
+    onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement("div", {
     className: "aurora-text-xs aurora-pl-0.5"
   }, "%")));

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js

@@ -21,8 +21,7 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
     setLinear = _useColorPicker.setLinear,
     previousSolidColor = _useColorPicker.previousSolidColor,
     previousGradientColor = _useColorPicker.previousGradientColor,
-    color = _useColorPicker.color,
-    degrees = _useColorPicker.degrees;
+    color = _useColorPicker.color;
   var commonClassNames = 'aurora-block aurora-w-6 aurora-h-6 aurora-border aurora-border-solid aurora-rounded-4 aurora-cursor-pointer hover:aurora-border-strong hover:aurora-border-2';
   var activeClassNames = 'aurora-border-2 aurora-border-solid !aurora-border-active';
   var changeToSolid = function changeToSolid() {
@@ -30,17 +29,17 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
   };
   var changeToLinear = function changeToLinear() {
     if (!isCurrentValueGradient) {
-      setLinear(previousGradientColor, degrees);
+      setLinear(previousGradientColor);
       return;
     }
-    setLinear(color.value, degrees);
+    setLinear(color);
   };
   var changeToRadial = function changeToRadial() {
     if (!isCurrentValueGradient) {
       setRadial(previousGradientColor);
       return;
     }
-    setRadial(color.value);
+    setRadial(color);
   };
   return /*#__PURE__*/React.createElement(Stack, {
     spacing: "1",

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_overrides/color_picker_eye_dropper.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { controlBtnStyles } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
-import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 import { DropperFillIcon } from '../../../../assets/icons/dropper_fill_icon.js';
 
 /**

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,0BAA0B,oFAAwF;AAClH,iCAAiC,0FAA8F;AAC/H,sBAAsB,2DAA+D;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,2DAA+D;AACrF,0BAA0B,oFAAwF;AAClH,iCAAiC,0FAA8F;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_overrides/color_picker_hue.js

@@ -1,9 +1,9 @@
 import React, { useRef, useCallback, useEffect } from 'react';
 import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 import { getHandleValue } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import usePaintHue from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintHue.js';
-import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 
 /**
  * Zmieniono wzgledem react-best-gradient-color-picker:

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,+BAA+B,wFAA4F;AAC3H,0BAA0B,oFAAwF;AAClH,wBAAwB,8FAAkG;AAC1H,sBAAsB,2DAA+D;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,2DAA+D;AACrF,+BAA+B,wFAA4F;AAC3H,0BAA0B,oFAAwF;AAClH,wBAAwB,8FAAkG;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_overrides/color_picker_square.js

@@ -1,10 +1,10 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 import { config } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/constants.js';
 import { computeSquareXY, computePickerPosition } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import usePaintSquare from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintSquare.js';
-import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 
 var crossSize = config.crossSize;
 /**

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,uBAAuB,sFAA0F;AACjH,uDAAuD,wFAA4F;AACnJ,0BAA0B,oFAAwF;AAClH,2BAA2B,iGAAqG;AAChI,sBAAsB,2DAA+D;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,2DAA+D;AACrF,uBAAuB,sFAA0F;AACjH,uDAAuD,wFAA4F;AACnJ,0BAA0B,oFAAwF;AAClH,2BAA2B,iGAAqG;AAChI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_shades.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 
 var ColorPickerShades = function ColorPickerShades() {
   var _useColorPicker = useColorPicker(),
@@ -72,7 +72,7 @@ var ColorPickerShades = function ColorPickerShades() {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(shade);
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      setColor === null || setColor === void 0 ? void 0 : setColor(colorHex);
+      setColor(colorHex);
     };
     return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       className: "aurora-cursor-pointer",

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_swatch.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { cn } from '../../../utilities/cn.js';
 import { COLOR_PICKER_SWATCH_SIZES } from '../color_picker_constants.js';
-import tinycolor from '../../../../../../external/tinycolor2/esm/tinycolor.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
+import tinycolor from '../../../../../../external/tinycolor2/esm/tinycolor.js';
 
 var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
@@ -16,7 +16,7 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(color);
   };
-  var shouldApplyActiveBorder = hasActiveBorder && tinycolor(activeColor.value).toHex() === color;
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor(activeColor).toHex() === color;
   return /*#__PURE__*/React.createElement("div", {
     className: cn("color-picker__swatch aurora-relative aurora-border aurora-rounded-4 aurora-overflow-hidden hover:aurora-border-2 hover:aurora-border-strong", {
       'aurora-w-4 aurora-h-4': size === COLOR_PICKER_SWATCH_SIZES.small,

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,sBAAsB,wDAA4D;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,wDAA4D;AAClF;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_variables.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 import { ArrowDownSFillIcon } from '../../../assets/icons/arrow_down_s_fill.js';
 
 var ColorPickerVariables = function ColorPickerVariables(_ref) {
@@ -53,10 +53,7 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor({
-        value: colorHex,
-        name: "".concat(variable.name)
-      });
+      return setColor(colorHex);
     };
     return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       className: "aurora-cursor-pointer",
@@ -73,10 +70,7 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor({
-        value: colorHex,
-        name: "".concat(variable.name)
-      });
+      return setColor(colorHex, variable.name);
     };
     return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       className: "aurora-cursor-pointer",

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/current_color_preview.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var CurrentColorPreview = function CurrentColorPreview() {
@@ -9,7 +8,7 @@ var CurrentColorPreview = function CurrentColorPreview() {
     className: "aurora-w-6 aurora-h-6 aurora-border aurora-rounded-4",
     "aria-label": "color picker current color value",
     style: {
-      background: ColorPickerUtils.isGradient(color.value) ? color.value : "#".concat(color.value)
+      background: color
     }
   });
 };

package/build/esm/packages/aurora/src/components/color_picker/components/current_color_preview.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;"}

package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js

@@ -3,7 +3,6 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { cn } from '../../../utilities/cn.js';
 import { Popover } from '../../popover/popover.js';
 import { PopoverTrigger } from '../../popover/components/popover_trigger.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerSwatch } from './color_picker_swatch.js';
 import { ColorPickerContent } from './color_picker_content.js';
@@ -21,10 +20,10 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
   var _useColorPicker = useColorPicker(),
     color = _useColorPicker.color,
     isColorPickerOpened = _useColorPicker.isColorPickerOpened,
-    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
-  var colorValue = typeof color === 'string' ? color : color.value;
-  var colorTiny = ColorPickerUtils.getTinyColorInstance(colorValue);
+    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
+    handleSave = _useColorPicker.handleSave;
   var handleClosePopover = function handleClosePopover() {
+    handleSave();
     setIsColorPickerOpened(false);
   };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Popover, {
@@ -44,8 +43,8 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     errors: errors,
     disabled: disabled,
     preElement: /*#__PURE__*/React.createElement(ColorPickerSwatch, {
-      color: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValue(colorTiny),
-      cssColor: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValueString(colorTiny),
+      color: color,
+      cssColor: color,
       size: "big"
     })
   })), /*#__PURE__*/React.createElement(PopoverContent, _objectSpread2({

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

package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.d.ts

@@ -1,22 +1,22 @@
-import { ColorPickerVariable, IColorPickerColor, IColorPickerColorVariables, TGradientType } from '../color_picker_types';
-import React from 'react';
+/// <reference types="react" />
+import { IColorPickerColor, IColorPickerColorVariables, TGradientType } from '../color_picker_types';
 export declare type ColorPickerHookProps = {
-    initialColor?: string | ColorPickerVariable;
+    value?: string;
     onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;
     colorVariables?: IColorPickerColorVariables;
     withGradient?: boolean;
 };
-declare const useSetupColorPicker: ({ initialColor, onChange, onCancel, onSave, colorVariables, withGradient: isWithGradient }: ColorPickerHookProps) => {
-    color: ColorPickerVariable;
-    previousSolidColor: string | undefined;
-    previousGradientColor: string | undefined;
-    setColor: (newColor: string | ColorPickerVariable) => void;
+declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVariables, withGradient: isWithGradient }: ColorPickerHookProps) => {
+    color: string;
+    previousSolidColor: string;
+    previousGradientColor: string;
+    setColor: (newColor: string, shadeName?: string) => void;
     hex: string;
     hslArr: number[];
-    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    alphaValue: string;
+    handleOnChangeAlpha: (value: number) => void;
+    alpha: number;
     rgbaArr: number[];
     setR: (newR: number) => void;
     setG: (newG: number) => void;
@@ -27,12 +27,12 @@ declare const useSetupColorPicker: ({ initialColor, onChange, onCancel, onSave,
     isCurrentValueGradient: boolean;
     setSolid: (value?: string) => void;
     setRadial: (value?: string) => void;
-    setLinear: (value?: string, deg?: number) => void;
+    setLinear: (value?: string) => void;
     gradientType: TGradientType;
     withGradient: boolean;
     isColorPickerOpened: boolean;
-    setIsColorPickerOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsColorPickerOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     degrees: number;
-    setDegrees: React.Dispatch<React.SetStateAction<number>>;
+    shadeName: string;
 };
 export default useSetupColorPicker;