@dreamcommerce/aurora 3.0.0-287 → 3.0.0-289

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var tinycolor = require('../../../../../../../external/tinycolor2/esm/tinycolor.js');
 var constants = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/constants.js');
 var utils = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js');
 var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
 var usePaintSquare = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintSquare.js');
-var tinycolor = require('../../../../../../../external/tinycolor2/esm/tinycolor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/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;AACA;AACA;AACA;AACA,wBAAwB,sFAA0F;AAClH,oBAAoB,wFAA4F;AAChH,sBAAsB,oFAAwF;AAC9G,6BAA6B,iGAAqG;AAClI,wBAAwB,2DAA+D;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,2DAA+D;AACvF,wBAAwB,sFAA0F;AAClH,oBAAoB,wFAA4F;AAChH,sBAAsB,oFAAwF;AAC9G,6BAA6B,iGAAqG;AAClI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_shades.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -80,7 +80,7 @@ var ColorPickerShades = function ColorPickerShades() {
     var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(shade);
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      setColor === null || setColor === void 0 ? void 0 : setColor(colorHex);
+      setColor(colorHex);
     };
     return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
       className: "aurora-cursor-pointer",

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('../../../utilities/cn.js');
 var color_picker_constants = require('../color_picker_constants.js');
-var tinycolor = require('../../../../../../external/tinycolor2/esm/tinycolor.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
+var tinycolor = require('../../../../../../external/tinycolor2/esm/tinycolor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,7 +24,7 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(color);
   };
-  var shouldApplyActiveBorder = hasActiveBorder && tinycolor['default'](activeColor.value).toHex() === color;
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor['default'](activeColor).toHex() === color;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: cn.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_constants.COLOR_PICKER_SWATCH_SIZES.small,

package/build/cjs/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;AACA;AACA;AACA,wBAAwB,wDAA4D;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,wDAA4D;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_variables.js

@@ -6,9 +6,9 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../../utilities/cn.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
 var arrow_down_s_fill = require('../../../assets/icons/arrow_down_s_fill.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -61,10 +61,7 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor({
-        value: colorHex,
-        name: "".concat(variable.name)
-      });
+      return setColor(colorHex);
     };
     return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
       className: "aurora-cursor-pointer",
@@ -81,10 +78,7 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor({
-        value: colorHex,
-        name: "".concat(variable.name)
-      });
+      return setColor(colorHex, variable.name);
     };
     return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
       className: "aurora-cursor-pointer",

package/build/cjs/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;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/current_color_preview.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var color_picker_utils = require('../color_picker_utils.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 }; }
@@ -17,7 +16,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_picker_utils.ColorPickerUtils.isGradient(color.value) ? color.value : "#".concat(color.value)
+      background: color
     }
   });
 };

package/build/cjs/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;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;"}

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

@@ -7,7 +7,6 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var cn = require('../../../utilities/cn.js');
 var popover = require('../../popover/popover.js');
 var popover_trigger = require('../../popover/components/popover_trigger.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
 var color_picker_content = require('./color_picker_content.js');
@@ -29,10 +28,10 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
   var _useColorPicker = use_color_picker.useColorPicker(),
     color = _useColorPicker.color,
     isColorPickerOpened = _useColorPicker.isColorPickerOpened,
-    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
-  var colorValue = typeof color === 'string' ? color : color.value;
-  var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(colorValue);
+    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
+    handleSave = _useColorPicker.handleSave;
   var handleClosePopover = function handleClosePopover() {
+    handleSave();
     setIsColorPickerOpened(false);
   };
   return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(popover.Popover, {
@@ -52,8 +51,8 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     errors: errors,
     disabled: disabled,
     preElement: /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
-      color: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValue(colorTiny),
-      cssColor: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      color: color,
+      cssColor: color,
       size: "big"
     })
   })), /*#__PURE__*/React__default['default'].createElement(popover_content.PopoverContent, _rollupPluginBabelHelpers.objectSpread2({

package/build/cjs/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;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;"}

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

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

package/build/cjs/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;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,6BAA6B,8FAAkG;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,qFAAyF;AAC7G,6BAA6B,8FAAkG;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controls/color_picker_control/color_picker_control.js

@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "initialColor", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
+var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
 var ColorPickerControl = function ColorPickerControl(_ref) {
   var label$1 = _ref.label,
     tooltip = _ref.tooltip,
@@ -24,7 +24,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
     id = _ref.id,
     name = _ref.name,
     errors = _ref.errors,
-    initialColor = _ref.initialColor,
+    value = _ref.value,
     colorVariables = _ref.colorVariables,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
@@ -42,7 +42,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
   }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(color_picker.ColorPicker, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
-    initialColor: initialColor,
+    value: value,
     colorVariables: colorVariables,
     errors: errors,
     onChange: onChange,

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

@@ -22,13 +22,14 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
     errors = _ref.errors,
     firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
-    initialFirstValue = _ref.initialFirstValue,
-    initialSecondValue = _ref.initialSecondValue,
+    firstValue = _ref.firstValue,
+    secondValue = _ref.secondValue,
     isLocked = _ref.isLocked,
     onLock = _ref.onLock,
     onChange = _ref.onChange,
     disabled = _ref.disabled,
-    helperText = _ref.helperText;
+    helperText = _ref.helperText,
+    className = _ref.className;
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
   }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
@@ -37,11 +38,12 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
   }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(values_syncer.ValuesSyncer, {
     firstControl: firstControl,
     secondControl: secondControl,
-    initialFirstValue: initialFirstValue,
-    initialSecondValue: initialSecondValue,
+    firstValue: firstValue,
+    secondValue: secondValue,
     isLocked: isLocked,
     onLock: onLock,
-    onChange: onChange
+    onChange: onChange,
+    className: className
   }), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
     color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
   }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {

package/build/cjs/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;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/cjs/packages/aurora/src/components/image_picker/image_picker.js

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

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

@@ -30,33 +30,14 @@ var Input = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
     onKeyDown = _ref.onKeyDown,
     onKeyUp = _ref.onKeyUp,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var preElRef = React.useRef(null);
-  var postElRef = React.useRef(null);
-  var _useState = React.useState(''),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    preElWidth = _useState2[0],
-    setPreElWidth = _useState2[1];
-  var _useState3 = React.useState(''),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    postElWidth = _useState4[0],
-    setPostElWidth = _useState4[1];
-  React.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__default['default'].createElement("div", {
     className: cn.cn(input_variants.inputVariants(), {
       'aurora-border-danger aurora-border-2': !!(errors !== null && errors !== void 0 && errors.length),
       'aurora-bg-subtle aurora-text-subtle-light aurora-pointer-events-none aurora-cursor-not-allowed': disabled,
       'aurora-appearance-none': type === 'number'
-    })
+    }, className)
   }, preElement && (/*#__PURE__*/React__default['default'].createElement("div", {
-    ref: preElRef,
-    className: 'aurora-absolute aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
+    className: 'aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
   }, preElement)), /*#__PURE__*/React__default['default'].createElement("input", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
     ref: ref,
     id: id,
@@ -70,15 +51,10 @@ var Input = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     type: type,
-    className: cn.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__default['default'].createElement("div", {
-    ref: postElRef,
-    className: "aurora-absolute aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
-  }, postElement)));
+    className: cn.cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6')
+  })), postElement && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
+  }, postElement));
 });
 Input.displayName = 'Input';
 

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

package/build/cjs/packages/aurora/src/components/input/input_variants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../../../../../external/class-variance-authority/dist/index.mjs.js');
 
-var inputVariants = index.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');
+var inputVariants = index.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');
 
 exports.inputVariants = inputVariants;
 //# sourceMappingURL=input_variants.js.map