@dreamcommerce/aurora 3.1.36-6 → 3.1.36-7

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

@@ -26,80 +26,16 @@ var ColorPicker = /*#__PURE__*/React__default['default'].forwardRef(function (_r
     isWithGradient = _ref.withGradient,
     disabled = _ref.disabled,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useSetupColorPicker = setup_color_picker['default']({
-      colorVariables: colorVariables,
-      value: value,
-      onChange: onChange,
-      onCancel: onCancel,
-      onSave: onSave,
-      withGradient: isWithGradient
-    }),
-    color = _useSetupColorPicker.color,
-    setColor = _useSetupColorPicker.setColor,
-    hex = _useSetupColorPicker.hex,
-    hslArr = _useSetupColorPicker.hslArr,
-    handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
-    alpha = _useSetupColorPicker.alpha,
-    rgbaArr = _useSetupColorPicker.rgbaArr,
-    setR = _useSetupColorPicker.setR,
-    setG = _useSetupColorPicker.setG,
-    setB = _useSetupColorPicker.setB,
-    handleCancel = _useSetupColorPicker.handleCancel,
-    handleSave = _useSetupColorPicker.handleSave,
-    previousSolidColor = _useSetupColorPicker.previousSolidColor,
-    isCurrentValueGradient = _useSetupColorPicker.isCurrentValueGradient,
-    setLinear = _useSetupColorPicker.setLinear,
-    setRadial = _useSetupColorPicker.setRadial,
-    gradientType = _useSetupColorPicker.gradientType,
-    previousGradientColor = _useSetupColorPicker.previousGradientColor,
-    setSolid = _useSetupColorPicker.setSolid,
-    withGradient = _useSetupColorPicker.withGradient,
-    isColorPickerOpened = _useSetupColorPicker.isColorPickerOpened,
-    setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened,
-    typedInputValue = _useSetupColorPicker.typedInputValue,
-    setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
-    isColorPickerCurrentlyUsed = _useSetupColorPicker.isColorPickerCurrentlyUsed,
-    setIsColorPickerCurrentlyUsed = _useSetupColorPicker.setIsColorPickerCurrentlyUsed,
-    degrees = _useSetupColorPicker.degrees,
-    shadeName = _useSetupColorPicker.shadeName,
-    currentSelectedVariable = _useSetupColorPicker.currentSelectedVariable;
-  var contextVal = React.useMemo(function () {
-    return {
-      color: color,
-      setColor: setColor,
-      hex: hex,
-      hslArr: hslArr,
-      handleOnChangeAlpha: handleOnChangeAlpha,
-      alpha: alpha,
-      rgbaArr: rgbaArr,
-      setR: setR,
-      setG: setG,
-      setB: setB,
-      handleCancel: handleCancel,
-      handleSave: handleSave,
-      colorVariables: colorVariables,
-      previousSolidColor: previousSolidColor,
-      isCurrentValueGradient: isCurrentValueGradient,
-      setLinear: setLinear,
-      setRadial: setRadial,
-      gradientType: gradientType,
-      setSolid: setSolid,
-      previousGradientColor: previousGradientColor,
-      withGradient: withGradient,
-      isColorPickerOpened: isColorPickerOpened,
-      setIsColorPickerOpened: setIsColorPickerOpened,
-      typedInputValue: typedInputValue,
-      setTypedInputValue: setTypedInputValue,
-      isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
-      setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
-      degrees: degrees,
-      shadeName: shadeName,
-      onPickShade: onPickShade,
-      currentSelectedVariable: currentSelectedVariable
-    };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade, currentSelectedVariable]);
+  var colorPicker = setup_color_picker['default']({
+    colorVariables: colorVariables,
+    value: value,
+    onChange: onChange,
+    onCancel: onCancel,
+    onSave: onSave,
+    withGradient: isWithGradient
+  });
   return /*#__PURE__*/React__default['default'].createElement(color_picker_context.ColorPickerContext.Provider, {
-    value: contextVal
+    value: colorPicker
   }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,

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

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

@@ -39,9 +39,6 @@ _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getHexValue", functi
   var alphaValue = colorSet.getAlpha();
   return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
 });
-_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getHexValueWithoutHash", function (color) {
-  return color.replace('#', '');
-});
 _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
   return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
 });
@@ -65,102 +62,6 @@ _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getAllColorTypes", f
   };
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, allColorTypes), variableName && variableName);
 });
-_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getVariableShades", function (_ref) {
-  var color = _ref.color,
-    name = _ref.name;
-  var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
-  var colorHsl = colorTiny.toHsl();
-  var isNeutral = name.includes('neutral');
-  var blackShade = [{
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 100,
-    name: "".concat(name, "s0")
-  }];
-  var whiteShade = [{
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 0,
-    name: "".concat(name, "s1000")
-  }];
-  var shades = [{
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 99,
-    name: "".concat(name, "s10")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 98,
-    name: "".concat(name, "s20")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 95,
-    name: "".concat(name, "s50")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 90,
-    name: "".concat(name, "s100")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 80,
-    name: "".concat(name, "s200")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 70,
-    name: "".concat(name, "s300")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 60,
-    name: "".concat(name, "s400")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 50,
-    name: "".concat(name, "s500")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 40,
-    name: "".concat(name, "s600")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 30,
-    name: "".concat(name, "s700")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 20,
-    name: "".concat(name, "s800")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 10,
-    name: "".concat(name, "s900")
-  }];
-  var result = [].concat(_rollupPluginBabelHelpers.toConsumableArray(isNeutral ? blackShade : []), shades, _rollupPluginBabelHelpers.toConsumableArray(isNeutral ? whiteShade : []));
-  return _ColorPickerUtils.convertVariableShadesToHex(result);
-});
-_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "convertVariableShadesToHex", function (variables) {
-  return variables.map(function (variable) {
-    var colorTiny = _ColorPickerUtils.getTinyColorInstance({
-      h: variable.h,
-      s: variable.s,
-      l: variable.l
-    });
-    var colorHex = colorTiny.toHexString();
-    return {
-      name: variable.name,
-      value: colorHex
-    };
-  });
-});
 _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "updateGradientWithActiveColor", function (colors, index, newColor) {
   return colors.map(function (c, i) {
     return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, c), {}, {

package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF,yBAAyB,uFAA2F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,qDAAyD;AACjF,yBAAyB,uFAA2F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_gradient_controls/color_picker_gradient_angle.js

@@ -18,8 +18,8 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
     value = _usePicker.value;
   var _useColorPicker = use_color_picker.useColorPicker(),
     degrees = _useColorPicker.degrees;
-  var handleDegrees = function handleDegrees(e) {
-    var newValue = formatters.formatInputValues(e.target.value, 0, 360);
+  var handleDegrees = function handleDegrees(val) {
+    var newValue = formatters.formatInputValues(val, 0, 360);
     var remaining = value.split(/,(.+)/)[1];
     onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
   };
@@ -32,7 +32,7 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     value: degrees,
     onChange: function onChange(e) {
-      return handleDegrees(e);
+      return handleDegrees(Number(e.target.value));
     },
     className: 'aurora-h-[18px] aurora-w-10 aurora-text-xs aurora-rounded-4 aurora-text-center aurora-outline-none aurora-p-0'
   }), /*#__PURE__*/React__default['default'].createElement("div", {

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

@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ColorPickerImpl = function ColorPickerImpl() {
   var _useColorPicker = use_color_picker.useColorPicker(),
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
-    setIsColorPickerCurrentlyUsed = _useColorPicker.setIsColorPickerCurrentlyUsed;
+    blurInput = _useColorPicker.blurInput;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-gap-2"
   }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
@@ -27,10 +27,7 @@ var ColorPickerImpl = function ColorPickerImpl() {
     onMouseDown: function onMouseDown(ev) {
       // Prevents whole page from being selected when dragging
       ev.preventDefault();
-      setIsColorPickerCurrentlyUsed(true);
-    },
-    onMouseUp: function onMouseUp() {
-      setIsColorPickerCurrentlyUsed(false);
+      blurInput();
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "color-picker__square aurora-overflow-hidden"

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_impl.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;"}
+{"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;"}

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

@@ -15,39 +15,38 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerInput = function ColorPickerInput(_ref) {
+  var _ref2;
   var id = _ref.id,
     name = _ref.name,
     errors = _ref.errors,
     disabled = _ref.disabled,
     preElement = _ref.preElement;
   var _useColorPicker = use_color_picker.useColorPicker(),
-    typedInputValue = _useColorPicker.typedInputValue,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
     colorVariables = _useColorPicker.colorVariables,
-    shadeName = _useColorPicker.shadeName,
     currentSelectedVariable = _useColorPicker.currentSelectedVariable;
   var _useTranslation = useTranslation.useTranslation(),
     _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-  var typedInputValueHasFullHexLength = typedInputValue.length >= 6;
-  var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && currentSelectedVariable && color_picker_utils.ColorPickerUtils.findVariableByName(colorVariables.variables, currentSelectedVariable) || shadeName || '';
+  var variableName = (_ref2 = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && currentSelectedVariable && color_picker_utils.ColorPickerUtils.findVariableByName(colorVariables.variables, currentSelectedVariable)) !== null && _ref2 !== void 0 ? _ref2 : '';
   var colorName = undefined;
   if (isCurrentValueGradient) {
     colorName = gradientType === color_picker_constants.GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
-  } else if (variableName && typedInputValueHasFullHexLength) {
+  } else if (variableName) {
     colorName = "".concat(t(variableName));
   }
   return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex_input.ColorPickerInputsHexInput, {
     id: id,
     name: name,
-    value: colorName,
+    colorName: colorName,
     errors: errors,
     disabled: disabled,
     className: "aurora-cursor-pointer ".concat(colorName ? 'aurora-cursor-pointer' : ''),
     preElement: preElement,
     readOnly: !!colorName,
-    hasCursorPointer: !!colorName
+    hasCursorPointer: !!colorName,
+    primary: true
   });
 };
 

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_input.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;"}
+{"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;"}

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

@@ -17,39 +17,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
   var id = _ref.id,
     name = _ref.name,
-    initialValue = _ref.value,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     errors = _ref.errors,
     disabled = _ref.disabled,
     className = _ref.className,
     preElement = _ref.preElement,
-    readOnly = _ref.readOnly,
-    hasCursorPointer = _ref.hasCursorPointer;
+    colorName = _ref.colorName,
+    primary = _ref.primary;
   var _useColorPicker = use_color_picker.useColorPicker(),
     setColor = _useColorPicker.setColor,
-    setTypedInputValue = _useColorPicker.setTypedInputValue,
     hex = _useColorPicker.hex,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
-    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+    setInputRef = _useColorPicker.setInputRef;
   var _useState = React.useState(hex),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
   var valueRef = React.useRef(value);
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    isDisabled = _useState4[0],
-    setIsDisabled = _useState4[1];
-  var inputRef = React.useRef(null);
+  var isDisabledRef = React.useRef(false);
   var _usePicker = context.usePicker(),
     colors = _usePicker.colors,
     selectedColor = _usePicker.selectedColor,
     createGradientStr = _usePicker.createGradientStr;
   var handleOnChange = function handleOnChange(event) {
     var inputValue = event.target.value.replace('%', '');
-    setTypedInputValue(inputValue);
     setValue(inputValue);
     valueRef.current = inputValue;
     if (!tinycolor['default'](inputValue).isValid()) return;
@@ -61,25 +54,20 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     }
   };
   var hexFocus = function hexFocus() {
-    setIsDisabled(true);
+    isDisabledRef.current = true;
   };
   var hexBlur = function hexBlur() {
-    setIsDisabled(false);
+    isDisabledRef.current = false;
   };
-  React.useEffect(function () {
-    if (isColorPickerCurrentlyUsed && inputRef.current) {
-      inputRef.current.blur();
-    }
-  }, [isColorPickerCurrentlyUsed]);
   React.useEffect(function () {
     if (hex === valueRef.current) return;
-    if (!isDisabled) {
+    if (!isDisabledRef.current) {
       setValue(hex);
       valueRef.current = hex;
     }
-  }, [hex, isDisabled]);
+  }, [hex]);
   return /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    ref: inputRef,
+    ref: primary ? setInputRef : undefined,
     className: className,
     type: type,
     preElement: preElement,
@@ -88,12 +76,12 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     errors: errors,
     disabled: disabled,
     maxLength: 8,
-    value: initialValue || value.toUpperCase(),
+    value: colorName || value.toUpperCase(),
     onChange: handleOnChange,
     onBlur: hexBlur,
     onFocus: hexFocus,
-    readOnly: readOnly,
-    hasCursorPointer: hasCursorPointer
+    readOnly: !!colorName,
+    hasCursorPointer: !!colorName
   });
 };
 

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,8DAAkE;AAC1F,sBAAsB,uFAA2F;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,8DAAkE;AAC1F,sBAAsB,uFAA2F;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -32,22 +32,11 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  var primary = variables.primary,
-    secondary = variables.secondary,
-    neutral = variables.neutral;
-  var primaryShades = color_picker_utils.ColorPickerUtils.getVariableShades({
-    color: primary.value,
-    name: primary.name
-  });
-  var secondaryShades = color_picker_utils.ColorPickerUtils.getVariableShades({
-    color: secondary.value,
-    name: secondary.name
-  });
-  var neutralShades = color_picker_utils.ColorPickerUtils.getVariableShades({
-    color: neutral.value,
-    name: neutral.name
-  });
-  var allShades = [].concat(_rollupPluginBabelHelpers.toConsumableArray(primaryShades), _rollupPluginBabelHelpers.toConsumableArray(secondaryShades), _rollupPluginBabelHelpers.toConsumableArray(neutralShades));
+  var primaryShades = [variables.primary10, variables.primary20, variables.primary50, variables.primary100, variables.primary200, variables.primary300, variables.primary400, variables.primary500, variables.primary600, variables.primary700, variables.primary800, variables.primary900];
+  var secondaryShades = [variables.secondary10, variables.secondary20, variables.secondary50, variables.secondary100, variables.secondary200, variables.secondary300, variables.secondary400, variables.secondary500, variables.secondary600, variables.secondary700, variables.secondary800, variables.secondary900];
+  var neutralShades = [variables.neutral0, variables.neutral10, variables.neutral20, variables.neutral50, variables.neutral100, variables.neutral200, variables.neutral300, variables.neutral400, variables.neutral500, variables.neutral600, variables.neutral700, variables.neutral800, variables.neutral900, variables.neutral1000];
+  var primaryVariables = [variables.primary, variables.secondary, variables.neutral, variables.font, variables.background];
+  var allShades = [].concat(primaryShades, secondaryShades, neutralShades);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-mt-3.5"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -63,11 +52,11 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     className: cn.cn('aurora-h-full aurora-w-full', isOpen && 'aurora-rotate-180')
   }))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
-  }, Object.values(variables).map(function (variable, index) {
+  }, Object.values(primaryVariables).map(function (variable, index) {
     var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor(colorHex, '', variable.name);
+      return setColor(colorHex, variable.name);
     };
     return /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, {
       key: "".concat(variable, "-").concat(index)
@@ -102,7 +91,8 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       onClick: handleOnClick,
       color: colorHex,
       cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
-      hasActiveBorder: true
+      hasActiveBorder: true,
+      variableName: variable.name
     })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
       variant: "dark"
     }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {

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

@@ -20,7 +20,6 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     isWithGradient = _ref$withGradient === void 0 ? false : _ref$withGradient;
   var colorValue = color_picker_utils.ColorPickerUtils.normalizeLinearGradient(value || color_picker_constants.COLOR_PICKER_INITIAL_STATE);
   var currentSelectedVariable = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.selectedVariable;
-  var colorValueRef = React.useRef(colorValue);
   var savedColorRef = React.useRef({
     value: colorValue,
     name: currentSelectedVariable || ''
@@ -38,26 +37,13 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     isColorPickerOpened = _useState6[0],
     setIsColorPickerOpened = _useState6[1];
-  var _useState7 = React.useState(''),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    shadeName = _useState8[0],
-    setShadeName = _useState8[1];
-  var _useState9 = React.useState(color_picker_utils.ColorPickerUtils.getHexValueWithoutHash(colorValue)),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    typedInputValue = _useState10[0],
-    setTypedInputValue = _useState10[1];
-  var _useState11 = React.useState(false),
-    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    isColorPickerCurrentlyUsed = _useState12[0],
-    setIsColorPickerCurrentlyUsed = _useState12[1];
   var _getDetails = utils.getDetails(colorValue),
     degrees = _getDetails.degrees;
   var savedDegRef = React.useRef(isNaN(degrees) ? 180 : degrees);
+  var inputRef = React.useRef(null);
   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] : '';
-    var variableName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-    setShadeName(shadeName);
+    var variableName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     !color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? setPreviousSolidColor(colorValue) : setPreviousGradientColor(colorValue);
     var isGradient = color_picker_utils.ColorPickerUtils.isGradient(newColor);
     var newColorVar = {
@@ -70,16 +56,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
       savedDegRef.current = Number(colorDegrees[2]);
     }
     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]);
+  }, [colorValue, onChange]);
   var _useBestGradientColor = useColorPicker.useColorPicker(colorValue, setColor),
     hslArr = _useBestGradientColor.hslArr,
     rgbaArr = _useBestGradientColor.rgbaArr,
@@ -92,31 +72,31 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
   var tinyColor = color_picker_utils.ColorPickerUtils.getTinyColorInstance(colorValue);
   var hex = color_picker_utils.ColorPickerUtils.getHexValue(tinyColor);
   var alpha = rgbaArr[3] * 100;
-  var setSolid = function setSolid(value) {
+  var setSolid = React.useCallback(function (value) {
     setColor(value || color_picker_constants.COLOR_PICKER_INITIAL_STATE);
-  };
-  var setLinear = function setLinear(value) {
+  }, [setColor]);
+  var setLinear = React.useCallback(function (value) {
     var gradientColor = value || defaultGradient;
     var remaining = gradientColor.split(/,(.+)/)[1];
     setColor("linear-gradient(".concat(savedDegRef.current + 'deg', ", ").concat(remaining));
-  };
-  var setRadial = function setRadial(value) {
+  }, [setColor]);
+  var setRadial = React.useCallback(function (value) {
     var gradientColor = value || defaultGradient;
     var remaining = gradientColor.split(/,(.+)/)[1];
     setColor("radial-gradient(circle, ".concat(remaining));
-  };
-  var handleOnChangeAlpha = function handleOnChangeAlpha(value) {
+  }, [setColor]);
+  var handleOnChangeAlpha = React.useCallback(function (value) {
     var val = Math.min(value, color_picker_constants.COLOR_PICKER_ALPHA_MAX_VALUE);
     setA(val);
-  };
-  var handleCancel = function handleCancel() {
+  }, [setA]);
+  var handleCancel = React.useCallback(function () {
     var _savedColorRef$curren = savedColorRef.current,
       value = _savedColorRef$curren.value,
       name = _savedColorRef$curren.name;
-    setColor(value, '', name || '');
+    setColor(value, name || '');
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-  };
-  var handleSave = function handleSave() {
+  }, [onCancel, setColor]);
+  var handleSave = React.useCallback(function () {
     var newColorVar = {
       value: colorValue,
       name: variables && color_picker_utils.ColorPickerUtils.findVariable(variables, colorValue) || currentSelectedVariable || ''
@@ -126,39 +106,45 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
       name: newColorVar.name
     };
     onSave === null || onSave === void 0 ? void 0 : onSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(newColorVar));
-  };
-  return {
-    color: colorValue,
-    previousSolidColor: previousSolidColor,
-    previousGradientColor: previousGradientColor,
-    setColor: setColor,
-    hex: hex,
-    hslArr: hslArr,
-    handleOnChangeAlpha: handleOnChangeAlpha,
-    alpha: alpha,
-    rgbaArr: rgbaArr,
-    setR: setR,
-    setG: setG,
-    setB: setB,
-    handleCancel: handleCancel,
-    handleSave: handleSave,
-    colorVariables: colorVariables,
-    isCurrentValueGradient: isGradient,
-    setSolid: setSolid,
-    setRadial: setRadial,
-    setLinear: setLinear,
-    gradientType: gradientType,
-    withGradient: withGradient,
-    isColorPickerOpened: isColorPickerOpened,
-    setIsColorPickerOpened: setIsColorPickerOpened,
-    typedInputValue: typedInputValue,
-    setTypedInputValue: setTypedInputValue,
-    isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
-    setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
-    degrees: degrees,
-    shadeName: shadeName,
-    currentSelectedVariable: currentSelectedVariable
-  };
+  }, [colorValue, currentSelectedVariable, onSave, variables]);
+  var setInputRef = React.useCallback(function (input) {
+    inputRef.current = input;
+  }, []);
+  var blurInput = React.useCallback(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+  }, []);
+  return React.useMemo(function () {
+    return {
+      color: colorValue,
+      previousSolidColor: previousSolidColor,
+      previousGradientColor: previousGradientColor,
+      setColor: setColor,
+      hex: hex,
+      hslArr: hslArr,
+      handleOnChangeAlpha: handleOnChangeAlpha,
+      alpha: alpha,
+      rgbaArr: rgbaArr,
+      setR: setR,
+      setG: setG,
+      setB: setB,
+      handleCancel: handleCancel,
+      handleSave: handleSave,
+      colorVariables: colorVariables,
+      isCurrentValueGradient: isGradient,
+      setSolid: setSolid,
+      setRadial: setRadial,
+      setLinear: setLinear,
+      gradientType: gradientType,
+      withGradient: withGradient,
+      isColorPickerOpened: isColorPickerOpened,
+      setIsColorPickerOpened: setIsColorPickerOpened,
+      degrees: degrees,
+      currentSelectedVariable: currentSelectedVariable,
+      setInputRef: setInputRef,
+      blurInput: blurInput
+    };
+  }, [alpha, colorValue, colorVariables, currentSelectedVariable, degrees, gradientType, handleCancel, handleOnChangeAlpha, handleSave, hex, hslArr, isColorPickerOpened, isGradient, previousGradientColor, previousSolidColor, rgbaArr, setB, setColor, setG, setLinear, setR, setRadial, setSolid, withGradient, setInputRef, blurInput]);
 };
 
 exports.default = useSetupColorPicker;