@dreamcommerce/aurora 3.0.0-317 → 3.0.0-319

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

@@ -55,6 +55,10 @@ var ColorPicker = function ColorPicker(_ref) {
     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;
   var contextVal = React.useMemo(function () {
@@ -82,10 +86,14 @@ var ColorPicker = function ColorPicker(_ref) {
       withGradient: withGradient,
       isColorPickerOpened: isColorPickerOpened,
       setIsColorPickerOpened: setIsColorPickerOpened,
+      typedInputValue: typedInputValue,
+      setTypedInputValue: setTypedInputValue,
+      isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
+      setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
       degrees: degrees,
       shadeName: shadeName
     };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, degrees, shadeName]);
+  }, [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]);
   return /*#__PURE__*/React__default['default'].createElement(color_picker_context.ColorPickerContext.Provider, {
     value: contextVal
   }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], _rollupPluginBabelHelpers.objectSpread2({

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

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

@@ -39,6 +39,9 @@ _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));
 });

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

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

@@ -17,17 +17,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerImpl = function ColorPickerImpl() {
   var _useColorPicker = use_color_picker.useColorPicker(),
-    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    setIsColorPickerCurrentlyUsed = _useColorPicker.setIsColorPickerCurrentlyUsed;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-gap-2"
   }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     spacing: "2.5",
     direction: "column",
     onMouseDown: function onMouseDown(ev) {
-      return (
-        // Prevents whole page from being selected when dragging
-        ev.preventDefault()
-      );
+      // Prevents whole page from being selected when dragging
+      ev.preventDefault();
+      setIsColorPickerCurrentlyUsed(true);
+    },
+    onMouseUp: function onMouseUp() {
+      setIsColorPickerCurrentlyUsed(false);
     }
   }, /*#__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;"}
+{"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;"}

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

@@ -22,6 +22,7 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
     preElement = _ref.preElement;
   var _useColorPicker = use_color_picker.useColorPicker(),
     color = _useColorPicker.color,
+    typedInputValue = _useColorPicker.typedInputValue,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
     colorVariables = _useColorPicker.colorVariables,
@@ -29,11 +30,12 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
   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) && color_picker_utils.ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
   var colorName = undefined;
   if (isCurrentValueGradient) {
     colorName = gradientType === color_picker_constants.GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
-  } else if (variableName) {
+  } else if (variableName && typedInputValueHasFullHexLength) {
     colorName = "".concat(t(variableName));
   }
   return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex_input.ColorPickerInputsHexInput, {

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

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

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerInputsHex = function ColorPickerInputsHex() {
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex_input.ColorPickerInputsHexInput, {
-    className: "aurora-h-full aurora-px-2 aurora-text-xs"
+    className: "aurora-h-full aurora-text-xs"
   }), /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex_alpha.ColorPickerInputsHexAlpha, null));
 };
 

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

@@ -13,7 +13,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
   var _useColorPicker = use_color_picker.useColorPicker(),
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
-    alpha = _useColorPicker.alpha;
+    alpha = _useColorPicker.alpha,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+  var alphaInputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isColorPickerCurrentlyUsed && alphaInputRef.current) {
+      alphaInputRef.current.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
   }, /*#__PURE__*/React__default['default'].createElement("input", {

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

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

@@ -28,9 +28,11 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     hasCursorPointer = _ref.hasCursorPointer;
   var _useColorPicker = use_color_picker.useColorPicker(),
     setColor = _useColorPicker.setColor,
+    setTypedInputValue = _useColorPicker.setTypedInputValue,
     hex = _useColorPicker.hex,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
-    gradientType = _useColorPicker.gradientType;
+    gradientType = _useColorPicker.gradientType,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
   var _useState = React.useState(hex),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -40,12 +42,14 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     isDisabled = _useState4[0],
     setIsDisabled = _useState4[1];
+  var inputRef = React.useRef(null);
   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;
@@ -62,6 +66,11 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
   var hexBlur = function hexBlur() {
     setIsDisabled(false);
   };
+  React.useEffect(function () {
+    if (isColorPickerCurrentlyUsed && inputRef.current) {
+      inputRef.current.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
   React.useEffect(function () {
     if (hex === valueRef.current) return;
     if (!isDisabled) {
@@ -70,6 +79,7 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     }
   }, [hex, isDisabled]);
   return /*#__PURE__*/React__default['default'].createElement(input.Input, {
+    ref: inputRef,
     className: className,
     type: type,
     preElement: preElement,

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

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

@@ -18,9 +18,24 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     setB = _useColorPicker.setB,
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
     alpha = _useColorPicker.alpha,
-    rgbaArr = _useColorPicker.rgbaArr;
+    rgbaArr = _useColorPicker.rgbaArr,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+  var rInputRef = React.useRef(null);
+  var gInputRef = React.useRef(null);
+  var bInputRef = React.useRef(null);
+  var alphaInputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isColorPickerCurrentlyUsed) {
+      var _rInputRef$current, _gInputRef$current, _bInputRef$current, _alphaInputRef$curren;
+      (_rInputRef$current = rInputRef.current) === null || _rInputRef$current === void 0 ? void 0 : _rInputRef$current.blur();
+      (_gInputRef$current = gInputRef.current) === null || _gInputRef$current === void 0 ? void 0 : _gInputRef$current.blur();
+      (_bInputRef$current = bInputRef.current) === null || _bInputRef$current === void 0 ? void 0 : _bInputRef$current.blur();
+      (_alphaInputRef$curren = alphaInputRef.current) === null || _alphaInputRef$curren === void 0 ? void 0 : _alphaInputRef$curren.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
+    ref: rInputRef,
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[0],
     onChange: function onChange(e) {
@@ -28,7 +43,8 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     },
     onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
+    ref: gInputRef,
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[1],
     onChange: function onChange(e) {
@@ -36,7 +52,8 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     },
     onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
+    ref: bInputRef,
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[2],
     onChange: function onChange(e) {
@@ -46,6 +63,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
+    ref: alphaInputRef,
     className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
     type: "text",
     value: Math.round(alpha),

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

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

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

@@ -56,8 +56,8 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     squareHeight: color_picker_constants.COLOR_PICKER_HEIGHT,
     hideOpacity: false
   }, /*#__PURE__*/React__default['default'].createElement(popover_trigger.PopoverTrigger, {
-    onClick: function onClick(e) {
-      e.preventDefault();
+    onClick: function onClick(ev) {
+      ev.preventDefault();
       setIsColorPickerOpened(true);
     },
     disabled: disabled,

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

@@ -38,6 +38,14 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     _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);
@@ -132,6 +140,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     withGradient: withGradient,
     isColorPickerOpened: isColorPickerOpened,
     setIsColorPickerOpened: setIsColorPickerOpened,
+    typedInputValue: typedInputValue,
+    setTypedInputValue: setTypedInputValue,
+    isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
+    setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
     degrees: degrees,
     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;"}
+{"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;"}

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

@@ -53,7 +53,7 @@ var Input = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
     onKeyUp: onKeyUp,
     type: type,
     className: cn.cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', {
-      '!aurora-cursor-pointer': hasCursorPointer
+      'aurora-cursor-pointer': hasCursorPointer
     })
   })), postElement && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"

package/build/cjs/packages/aurora/src/components/tooltip/components/tooltip_content.js

@@ -18,7 +18,7 @@ var TooltipContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
     sideOffset: sideOffset,
-    className: cn.cn('aurora-z-[1000] aurora-max-w-[320px] aurora-shadow aurora-overflow-hidden aurora-border aurora-rounded-8 aurora-px-3 aurora-py-2 aurora-text-xs aurora-animate-in aurora-fade-in-0 data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', 'js__aurora-tooltip-content', tooltip_content_variants.tooltipContentVariants({
+    className: cn.cn('aurora-z-[99999] aurora-max-w-[320px] aurora-shadow aurora-overflow-hidden aurora-border aurora-rounded-8 aurora-px-3 aurora-py-2 aurora-text-xs aurora-animate-in aurora-fade-in-0 data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', 'js__aurora-tooltip-content', tooltip_content_variants.tooltipContentVariants({
       variant: variant
     }), className)
   }, props)));

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

@@ -47,6 +47,10 @@ var ColorPicker = function ColorPicker(_ref) {
     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;
   var contextVal = useMemo(function () {
@@ -74,10 +78,14 @@ var ColorPicker = function ColorPicker(_ref) {
       withGradient: withGradient,
       isColorPickerOpened: isColorPickerOpened,
       setIsColorPickerOpened: setIsColorPickerOpened,
+      typedInputValue: typedInputValue,
+      setTypedInputValue: setTypedInputValue,
+      isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
+      setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
       degrees: degrees,
       shadeName: shadeName
     };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, degrees, shadeName]);
+  }, [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]);
   return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
     value: contextVal
   }, /*#__PURE__*/React.createElement(ColorPickerPure, _objectSpread2({

package/build/esm/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;"}
+{"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;"}

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

@@ -57,6 +57,10 @@ export interface IColorPickerContext {
     previousGradientColor?: string;
     isColorPickerOpened: boolean;
     setIsColorPickerOpened: (isOpened: boolean) => void;
+    typedInputValue: string;
+    setTypedInputValue: (newValue: string) => void;
+    isColorPickerCurrentlyUsed: boolean;
+    setIsColorPickerCurrentlyUsed: (isUsed: boolean) => void;
     degrees: number;
     shadeName: string;
 }

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

@@ -7,6 +7,7 @@ export declare class ColorPickerUtils {
     static isGradient(color: string): boolean;
     static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
     static getHexValue: (colorSet: tinycolor.Instance) => string;
+    static getHexValueWithoutHash: (color: string) => string;
     static getHexValueString: (colorSet: tinycolor.Instance) => string;
     static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
     static getVariableShades: ({ color, name }: {

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

@@ -35,6 +35,9 @@ _defineProperty(ColorPickerUtils, "getHexValue", function (colorSet) {
   var alphaValue = colorSet.getAlpha();
   return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
 });
+_defineProperty(ColorPickerUtils, "getHexValueWithoutHash", function (color) {
+  return color.replace('#', '');
+});
 _defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
   return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
 });

package/build/esm/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,sBAAsB,qDAAyD;AAC/E,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,qDAAyD;AAC/E,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_impl.js

@@ -9,17 +9,20 @@ import { Square } from './color_picker_overrides/color_picker_square.js';
 
 var ColorPickerImpl = function ColorPickerImpl() {
   var _useColorPicker = useColorPicker(),
-    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    setIsColorPickerCurrentlyUsed = _useColorPicker.setIsColorPickerCurrentlyUsed;
   return /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-gap-2"
   }, /*#__PURE__*/React.createElement(Stack, {
     spacing: "2.5",
     direction: "column",
     onMouseDown: function onMouseDown(ev) {
-      return (
-        // Prevents whole page from being selected when dragging
-        ev.preventDefault()
-      );
+      // Prevents whole page from being selected when dragging
+      ev.preventDefault();
+      setIsColorPickerCurrentlyUsed(true);
+    },
+    onMouseUp: function onMouseUp() {
+      setIsColorPickerCurrentlyUsed(false);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "color-picker__square aurora-overflow-hidden"

package/build/esm/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;"}
+{"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;"}

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

@@ -14,6 +14,7 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
     preElement = _ref.preElement;
   var _useColorPicker = useColorPicker(),
     color = _useColorPicker.color,
+    typedInputValue = _useColorPicker.typedInputValue,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
     colorVariables = _useColorPicker.colorVariables,
@@ -21,11 +22,12 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
+  var typedInputValueHasFullHexLength = typedInputValue.length >= 6;
   var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
   var colorName = undefined;
   if (isCurrentValueGradient) {
     colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
-  } else if (variableName) {
+  } else if (variableName && typedInputValueHasFullHexLength) {
     colorName = "".concat(t(variableName));
   }
   return /*#__PURE__*/React.createElement(ColorPickerInputsHexInput, {

package/build/esm/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,+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;"}
+{"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;"}

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

@@ -4,7 +4,7 @@ import { ColorPickerInputsHexAlpha } from './color_picker_inputs_hex_alpha.js';
 
 var ColorPickerInputsHex = function ColorPickerInputsHex() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerInputsHexInput, {
-    className: "aurora-h-full aurora-px-2 aurora-text-xs"
+    className: "aurora-h-full aurora-text-xs"
   }), /*#__PURE__*/React.createElement(ColorPickerInputsHexAlpha, null));
 };
 

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

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useColorPicker } from '../../../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../../../color_picker_utils.js';
 
 var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
   var _useColorPicker = useColorPicker(),
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
-    alpha = _useColorPicker.alpha;
+    alpha = _useColorPicker.alpha,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+  var alphaInputRef = useRef(null);
+  useEffect(function () {
+    if (isColorPickerCurrentlyUsed && alphaInputRef.current) {
+      alphaInputRef.current.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
   return /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
   }, /*#__PURE__*/React.createElement("input", {

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.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;"}
+{"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;"}

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

@@ -20,9 +20,11 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     hasCursorPointer = _ref.hasCursorPointer;
   var _useColorPicker = useColorPicker(),
     setColor = _useColorPicker.setColor,
+    setTypedInputValue = _useColorPicker.setTypedInputValue,
     hex = _useColorPicker.hex,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
-    gradientType = _useColorPicker.gradientType;
+    gradientType = _useColorPicker.gradientType,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
   var _useState = useState(hex),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -32,12 +34,14 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isDisabled = _useState4[0],
     setIsDisabled = _useState4[1];
+  var inputRef = useRef(null);
   var _usePicker = 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(inputValue).isValid()) return;
@@ -54,6 +58,11 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
   var hexBlur = function hexBlur() {
     setIsDisabled(false);
   };
+  useEffect(function () {
+    if (isColorPickerCurrentlyUsed && inputRef.current) {
+      inputRef.current.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
   useEffect(function () {
     if (hex === valueRef.current) return;
     if (!isDisabled) {
@@ -62,6 +71,7 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     }
   }, [hex, isDisabled]);
   return /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef,
     className: className,
     type: type,
     preElement: preElement,

package/build/esm/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,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Input } from '../../../input/input.js';
 import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../../color_picker_utils.js';
@@ -10,9 +10,24 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     setB = _useColorPicker.setB,
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
     alpha = _useColorPicker.alpha,
-    rgbaArr = _useColorPicker.rgbaArr;
+    rgbaArr = _useColorPicker.rgbaArr,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+  var rInputRef = useRef(null);
+  var gInputRef = useRef(null);
+  var bInputRef = useRef(null);
+  var alphaInputRef = useRef(null);
+  useEffect(function () {
+    if (isColorPickerCurrentlyUsed) {
+      var _rInputRef$current, _gInputRef$current, _bInputRef$current, _alphaInputRef$curren;
+      (_rInputRef$current = rInputRef.current) === null || _rInputRef$current === void 0 ? void 0 : _rInputRef$current.blur();
+      (_gInputRef$current = gInputRef.current) === null || _gInputRef$current === void 0 ? void 0 : _gInputRef$current.blur();
+      (_bInputRef$current = bInputRef.current) === null || _bInputRef$current === void 0 ? void 0 : _bInputRef$current.blur();
+      (_alphaInputRef$curren = alphaInputRef.current) === null || _alphaInputRef$curren === void 0 ? void 0 : _alphaInputRef$curren.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
-    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
+    ref: rInputRef,
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[0],
     onChange: function onChange(e) {
@@ -20,7 +35,8 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     },
     onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
-    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
+    ref: gInputRef,
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[1],
     onChange: function onChange(e) {
@@ -28,7 +44,8 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     },
     onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
-    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
+    ref: bInputRef,
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[2],
     onChange: function onChange(e) {
@@ -38,6 +55,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
   }), /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
   }, /*#__PURE__*/React.createElement("input", {
+    ref: alphaInputRef,
     className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
     type: "text",
     value: Math.round(alpha),