@dreamcommerce/aurora 3.0.0-280 → 3.0.0-281

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(colorHex);
+      setColor === null || setColor === void 0 ? void 0 : 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 { useColorPicker } from '../hooks/use_color_picker.js';
 import tinycolor from '../../../../../../external/tinycolor2/esm/tinycolor.js';
+import { useColorPicker } from '../hooks/use_color_picker.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).toHex() === color;
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor(activeColor.value).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;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;"}
+{"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;"}

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,7 +53,10 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor(colorHex);
+      return setColor({
+        value: colorHex,
+        name: "".concat(variable.name)
+      });
     };
     return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       className: "aurora-cursor-pointer",
@@ -70,7 +73,10 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor(colorHex, variable.name);
+      return setColor({
+        value: colorHex,
+        name: "".concat(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;"}
+{"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;"}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var CurrentColorPreview = function CurrentColorPreview() {
@@ -8,7 +9,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: color
+      background: ColorPickerUtils.isGradient(color.value) ? color.value : "#".concat(color.value)
     }
   });
 };

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;"}
+{"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/components/pure_color_picker.js

@@ -3,6 +3,7 @@ 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';
@@ -20,10 +21,10 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
   var _useColorPicker = useColorPicker(),
     color = _useColorPicker.color,
     isColorPickerOpened = _useColorPicker.isColorPickerOpened,
-    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
-    handleSave = _useColorPicker.handleSave;
+    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
+  var colorValue = typeof color === 'string' ? color : color.value;
+  var colorTiny = ColorPickerUtils.getTinyColorInstance(colorValue);
   var handleClosePopover = function handleClosePopover() {
-    handleSave();
     setIsColorPickerOpened(false);
   };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Popover, {
@@ -43,8 +44,8 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     errors: errors,
     disabled: disabled,
     preElement: /*#__PURE__*/React.createElement(ColorPickerSwatch, {
-      color: color,
-      cssColor: color,
+      color: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValue(colorTiny),
+      cssColor: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValueString(colorTiny),
       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;"}
+{"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;"}

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

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

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

@@ -1,61 +1,67 @@
-import { useRef, useState, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_ALPHA_MAX_VALUE } from '../color_picker_constants.js';
+import { COLOR_PICKER_ALPHA_MAX_VALUE } from '../color_picker_constants.js';
 import { getDetails } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
 import { useColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
+import isEqual from 'lodash/isEqual';
 
 var defaultGradient = 'linear-gradient(90deg, #000000 0%, #FFFFFF 100%)';
 var useSetupColorPicker = function useSetupColorPicker(_ref) {
-  var value = _ref.value,
+  var initialColor = _ref.initialColor,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
     onSave = _ref.onSave,
     colorVariables = _ref.colorVariables,
     _ref$withGradient = _ref.withGradient,
     isWithGradient = _ref$withGradient === void 0 ? false : _ref$withGradient;
-  var colorValue = value || COLOR_PICKER_INITIAL_STATE;
-  var savedColorRef = useRef(colorValue);
-  var _useState = useState(),
+  var initialColorObject = ColorPickerUtils.getColorPickerValue(initialColor);
+  var _useState = useState(initialColorObject),
     _useState2 = _slicedToArray(_useState, 2),
-    previousSolidColor = _useState2[0],
-    setPreviousSolidColor = _useState2[1];
-  var _useState3 = useState(defaultGradient),
+    color = _useState2[0],
+    setColorValue = _useState2[1];
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    previousGradientColor = _useState4[0],
-    setPreviousGradientColor = _useState4[1];
-  var withGradient = isWithGradient || ColorPickerUtils.isGradient(colorValue);
-  var _useState5 = useState(false),
+    previousSolidColor = _useState4[0],
+    setPreviousSolidColor = _useState4[1];
+  var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
-    isColorPickerOpened = _useState6[0],
-    setIsColorPickerOpened = _useState6[1];
-  var _useState7 = useState(''),
+    previousGradientColor = _useState6[0],
+    setPreviousGradientColor = _useState6[1];
+  var _useState7 = useState(initialColor),
     _useState8 = _slicedToArray(_useState7, 2),
-    shadeName = _useState8[0],
-    setShadeName = _useState8[1];
-  var _getDetails = getDetails(colorValue),
-    degrees = _getDetails.degrees;
-  var savedDegRef = useRef(degrees);
-  var variables = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables;
-  var setColor = useCallback(function (newColor) {
-    var shadeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    setShadeName(shadeName);
-    !ColorPickerUtils.isGradient(colorValue) ? setPreviousSolidColor(colorValue) : setPreviousGradientColor(colorValue);
-    var newColorVar = {
-      value: newColor,
-      name: variables && ColorPickerUtils.findVariable(variables, newColor) || ''
-    };
-    var colorObject = ColorPickerUtils.getAllColorTypes(newColorVar);
-    var isGradient = ColorPickerUtils.isGradient(newColor);
-    var colorDegrees = newColor.match(/(linear|radial)-gradient\([^)]*?([0-9.]+)deg/);
-    if (isGradient && colorDegrees !== null && colorDegrees !== void 0 && colorDegrees[2]) {
-      savedDegRef.current = Number(colorDegrees[2]);
+    prevInitialColor = _useState8[0],
+    setPrevInitialColor = _useState8[1];
+  var withGradient = isWithGradient || ColorPickerUtils.isGradient(initialColorObject.value);
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isColorPickerOpened = _useState10[0],
+    setIsColorPickerOpened = _useState10[1];
+  var _getDetails = getDetails(initialColorObject.value),
+    _degrees = _getDetails.degrees;
+  var _useState11 = useState(_degrees),
+    _useState12 = _slicedToArray(_useState11, 2),
+    degrees = _useState12[0],
+    setDegrees = _useState12[1];
+  var setColor = function setColor(newColor) {
+    var newColorValue = ColorPickerUtils.getColorPickerValue(newColor);
+    !ColorPickerUtils.isGradient(color.value) ? setPreviousSolidColor(color.value) : setPreviousGradientColor(color.value);
+    setColorValue(function (prevColor) {
+      var _prevColor$value;
+      return {
+        value: newColorValue.value,
+        name: ((_prevColor$value = prevColor.value) !== null && _prevColor$value !== void 0 ? _prevColor$value : prevColor) === newColorValue.value ? prevColor === null || prevColor === void 0 ? void 0 : prevColor.name : typeof newColor === 'string' ? '' : newColor === null || newColor === void 0 ? void 0 : newColor.name
+      };
+    });
+  };
+  useEffect(function () {
+    if (!initialColor) return;
+    if (!isEqual(initialColor, prevInitialColor) && !isColorPickerOpened) {
+      setColor(initialColor);
+      setPrevInitialColor(initialColor);
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread2(_objectSpread2({}, colorObject), {}, {
-      hexString: isGradient ? newColor : colorObject.hexString
-    }));
-  }, [colorValue, variables, onChange]);
-  var _useBestGradientColor = useColorPicker(colorValue, setColor),
+  }, [initialColor]);
+  var _useBestGradientColor = useColorPicker(color.value, setColor),
     hslArr = _useBestGradientColor.hslArr,
     rgbaArr = _useBestGradientColor.rgbaArr,
     setR = _useBestGradientColor.setR,
@@ -63,42 +69,69 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     setB = _useBestGradientColor.setB,
     setA = _useBestGradientColor.setA,
     isGradient = _useBestGradientColor.isGradient,
-    gradientType = _useBestGradientColor.gradientType;
-  var tinyColor = ColorPickerUtils.getTinyColorInstance(colorValue);
+    gradientType = _useBestGradientColor.gradientType,
+    getGradientObject = _useBestGradientColor.getGradientObject;
+  var tinyColor = typeof color === 'string' ? ColorPickerUtils.getTinyColorInstance(color) : ColorPickerUtils.getTinyColorInstance(color.value);
   var hex = ColorPickerUtils.getHexValue(tinyColor);
-  var alpha = rgbaArr[3] * 100;
-  var alphaValue = "".concat(alpha);
+  var _useState13 = useState(rgbaArr[3] * 100),
+    _useState14 = _slicedToArray(_useState13, 2),
+    alpha = _useState14[0],
+    setAlpha = _useState14[1];
+  var _useState15 = useState("".concat(alpha)),
+    _useState16 = _slicedToArray(_useState15, 2),
+    alphaValue = _useState16[0],
+    setAlphaValue = _useState16[1];
   var setSolid = function setSolid(value) {
-    setColor(value || COLOR_PICKER_INITIAL_STATE);
+    setColor(ColorPickerUtils.getColorPickerValue(value).value);
   };
-  var setLinear = function setLinear(value) {
+  var setLinear = function setLinear(value, deg) {
     var gradientColor = value || defaultGradient;
+    if (value && !ColorPickerUtils.isGradient(value)) {
+      setGradient(gradientColor);
+    }
     var remaining = gradientColor.split(/,(.+)/)[1];
-    setColor("linear-gradient(".concat(savedDegRef.current + 'deg', ", ").concat(remaining));
+    setColor("linear-gradient(".concat(deg !== undefined ? deg + 'deg' : '90deg', ", ").concat(remaining));
   };
   var setRadial = function setRadial(value) {
     var gradientColor = value || defaultGradient;
+    if (value && !ColorPickerUtils.isGradient(value)) {
+      setGradient(gradientColor);
+    }
     var remaining = gradientColor.split(/,(.+)/)[1];
     setColor("radial-gradient(circle, ".concat(remaining));
   };
-  var handleOnChangeAlpha = function handleOnChangeAlpha(value) {
-    var val = Math.min(value, COLOR_PICKER_ALPHA_MAX_VALUE);
-    setA(val);
+  var setGradient = function setGradient(value) {
+    var gradientColor = value || defaultGradient;
+    setColor(gradientColor);
+  };
+  var handleOnChangeAlpha = function handleOnChangeAlpha(event) {
+    changeAlphaValue(Number(event.target.value));
+  };
+  var changeAlphaValue = function changeAlphaValue(value) {
+    setAlpha(value > COLOR_PICKER_ALPHA_MAX_VALUE ? COLOR_PICKER_ALPHA_MAX_VALUE : value);
   };
+  useEffect(function () {
+    setA(alpha);
+  }, [alpha]);
+  useEffect(function () {
+    setAlphaValue("".concat(Math.round(rgbaArr[3] * 100)));
+  }, [rgbaArr[3]]);
+  useEffect(function () {
+    var colorObject = ColorPickerUtils.getAllColorTypes(color);
+    var gradientObject = getGradientObject();
+    onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread2(_objectSpread2({}, colorObject), {}, {
+      gradient: gradientObject !== null && gradientObject !== void 0 && gradientObject.isGradient ? ColorPickerUtils.getColorPickerGradientValue(gradientObject) : undefined
+    }));
+  }, [color]);
   var handleCancel = function handleCancel() {
-    setColor(savedColorRef.current);
+    setColor(ColorPickerUtils.getColorPickerValue(initialColor));
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   };
   var handleSave = function handleSave() {
-    var newColorVar = {
-      value: colorValue,
-      name: variables && ColorPickerUtils.findVariable(variables, colorValue) || ''
-    };
-    savedColorRef.current = colorValue;
-    onSave === null || onSave === void 0 ? void 0 : onSave(ColorPickerUtils.getAllColorTypes(newColorVar));
+    onSave === null || onSave === void 0 ? void 0 : onSave(ColorPickerUtils.getAllColorTypes(color));
   };
   return {
-    color: colorValue,
+    color: color,
     previousSolidColor: previousSolidColor,
     previousGradientColor: previousGradientColor,
     setColor: setColor,
@@ -122,7 +155,7 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     isColorPickerOpened: isColorPickerOpened,
     setIsColorPickerOpened: setIsColorPickerOpened,
     degrees: degrees,
-    shadeName: shadeName
+    setDegrees: setDegrees
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2BAA2B,qFAAyF;AACpH,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controls/color_picker_control/color_picker_control.js

@@ -7,7 +7,7 @@ import { ErrorList } from '../../error_list/error_list.js';
 import { Control } from '../../control/control.js';
 import { ColorPicker } from '../../color_picker/color_picker.js';
 
-var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
+var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "initialColor", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
 var ColorPickerControl = function ColorPickerControl(_ref) {
   var label = _ref.label,
     tooltip = _ref.tooltip,
@@ -16,7 +16,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
     id = _ref.id,
     name = _ref.name,
     errors = _ref.errors,
-    value = _ref.value,
+    initialColor = _ref.initialColor,
     colorVariables = _ref.colorVariables,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
@@ -34,7 +34,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
   }, label)) : null, /*#__PURE__*/React.createElement(ColorPicker, _objectSpread2({
     id: id,
     name: name,
-    value: value,
+    initialColor: initialColor,
     colorVariables: colorVariables,
     errors: errors,
     onChange: onChange,

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { TValuesSyncerControlProps } from './values_syncer_control_types';
-export declare const ValuesSyncerControl: {
-    <T>({ label, required, tooltip, errors, firstControl, secondControl, firstValue, secondValue, isLocked, onLock, onChange, disabled, helperText, className }: TValuesSyncerControlProps<T>): React.JSX.Element;
-    displayName: string;
-};
+export declare const ValuesSyncerControl: React.FC<TValuesSyncerControlProps>;

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js

@@ -14,14 +14,13 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
     errors = _ref.errors,
     firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
-    firstValue = _ref.firstValue,
-    secondValue = _ref.secondValue,
+    initialFirstValue = _ref.initialFirstValue,
+    initialSecondValue = _ref.initialSecondValue,
     isLocked = _ref.isLocked,
     onLock = _ref.onLock,
     onChange = _ref.onChange,
     disabled = _ref.disabled,
-    helperText = _ref.helperText,
-    className = _ref.className;
+    helperText = _ref.helperText;
   return /*#__PURE__*/React.createElement(Control, {
     classname: "aurora-flex-col"
   }, label ? (/*#__PURE__*/React.createElement(Label, {
@@ -30,12 +29,11 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
   }, label)) : null, /*#__PURE__*/React.createElement(ValuesSyncer, {
     firstControl: firstControl,
     secondControl: secondControl,
-    firstValue: firstValue,
-    secondValue: secondValue,
+    initialFirstValue: initialFirstValue,
+    initialSecondValue: initialSecondValue,
     isLocked: isLocked,
     onLock: onLock,
-    onChange: onChange,
-    className: className
+    onChange: onChange
   }), helperText ? /*#__PURE__*/React.createElement(HelperText, {
     color: disabled ? CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
   }, helperText) : null, errors ? /*#__PURE__*/React.createElement(ErrorList, {

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map

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

@@ -1,6 +1,6 @@
 import { TValuesSyncerProps } from "../../values_syncer/values_syncer_types";
 import React from 'react';
-export declare type TValuesSyncerControlProps<T> = TValuesSyncerProps<T> & {
+export declare type TValuesSyncerControlProps = TValuesSyncerProps & {
     label?: string | React.ReactNode;
     required?: boolean;
     tooltip?: string | React.ReactNode;

package/build/esm/packages/aurora/src/components/image_picker/image_picker.js

@@ -59,6 +59,9 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     imageSize = _useState2[0],
     setImageSize = _useState2[1];
   var acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
+  useEffect(function () {
+    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(imageSize);
+  }, [imageSize]);
   useEffect(function () {
     initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
   }, [initialFile]);
@@ -74,12 +77,10 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   };
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
     createImageFromUrl(fileUrl).then(function (image) {
-      var size = {
+      setImageSize({
         width: image.naturalWidth,
         height: image.naturalHeight
-      };
-      setImageSize(size);
-      onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(size);
+      });
     });
   };
   var createImageFromUrl = /*#__PURE__*/function () {
@@ -107,7 +108,6 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   var handleOnFileDelete = function handleOnFileDelete() {
     onFileDelete();
     setImageSize(undefined);
-    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(undefined);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "aurora-mb-1"

package/build/esm/packages/aurora/src/components/input/input.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { inputVariants } from './input_variants.js';
 
@@ -22,6 +22,24 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown = _ref.onKeyDown,
     onKeyUp = _ref.onKeyUp,
     props = _objectWithoutProperties(_ref, _excluded);
+  var preElRef = useRef(null);
+  var postElRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    preElWidth = _useState2[0],
+    setPreElWidth = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    postElWidth = _useState4[0],
+    setPostElWidth = _useState4[1];
+  useEffect(function () {
+    if (preElRef.current) {
+      setPreElWidth((Math.round(preElRef.current.getBoundingClientRect().width) + 8).toString());
+    }
+    if (postElRef.current) {
+      setPostElWidth((Math.round(postElRef.current.getBoundingClientRect().width) + 8).toString());
+    }
+  }, [preElement, postElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: cn(inputVariants(), {
       'aurora-border-danger aurora-border-2': !!(errors !== null && errors !== void 0 && errors.length),
@@ -29,7 +47,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'aurora-appearance-none': type === 'number'
     })
   }, preElement && (/*#__PURE__*/React.createElement("div", {
-    className: 'aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
+    ref: preElRef,
+    className: 'aurora-absolute aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
   }, preElement)), /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     id: id,
@@ -43,10 +62,15 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     type: type,
-    className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', className)
-  })), postElement && /*#__PURE__*/React.createElement("div", {
-    className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
-  }, postElement));
+    className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-3 aurora-rounded-6', className),
+    style: {
+      paddingLeft: preElWidth ? "".concat(preElWidth, "px") : '',
+      paddingRight: postElWidth ? "".concat(postElWidth, "px") : ''
+    }
+  })), postElement && (/*#__PURE__*/React.createElement("div", {
+    ref: postElRef,
+    className: "aurora-absolute aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
+  }, postElement)));
 });
 Input.displayName = 'Input';
 

package/build/esm/packages/aurora/src/components/input/input.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;"}
+{"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;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/input/input_variants.js

@@ -1,6 +1,6 @@
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
 
-var inputVariants = cva('aurora-relative aurora-flex aurora-items-center aurora-rounded-6 focus aurora-border aurora-bg aurora-text-s aurora-placeholder-neutral-500 aurora-text hover:aurora-border-strong active:aurora-border-active disabled:aurora-opacity-50 aurora-w-full');
+var inputVariants = cva('aurora-relative aurora-flex aurora-rounded-6 focus aurora-border aurora-bg aurora-text-s aurora-placeholder-neutral-500 aurora-text hover:aurora-border-strong active:aurora-border-active disabled:aurora-opacity-50 aurora-w-full');
 
 export { inputVariants };
 //# sourceMappingURL=input_variants.js.map

package/build/esm/packages/aurora/src/components/sidebar/components/persistent_sidebar.js

@@ -38,7 +38,7 @@ var PersistentSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   return /*#__PURE__*/React.createElement("aside", _objectSpread2({
     "aria-expanded": open,
-    className: cn('aurora-relative aurora-transition-all aurora-duration-200'),
+    className: cn('aurora-relative'),
     style: {
       width: open ? width : 0,
       maxWidth: open ? width : 0,

package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js

@@ -95,7 +95,7 @@ var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props), TriggerButton ? TriggerButton : null, /*#__PURE__*/React.createElement("aside", {
     onScroll: onScroll,
     ref: sidebarRef,
-    className: cn(' aurora-w-full aurora-h-full -aurora-translate-x-full aurora-duration-300 aurora-transition-[transform] aurora-overflow-auto custom-scrollbar', {
+    className: cn(' aurora-w-full aurora-h-full -aurora-translate-x-full aurora-overflow-auto custom-scrollbar', {
       'aurora-translate-x-full': side === SIDEBAR_SIDE.right,
       '-aurora-translate-x-full': side === SIDEBAR_SIDE.left
     }, className)