@dreamcommerce/aurora 3.0.0-316 → 3.0.0-318

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

@@ -35,6 +35,8 @@ var ColorPicker = function ColorPicker(_ref) {
     }),
     color = _useSetupColorPicker.color,
     setColor = _useSetupColorPicker.setColor,
+    typedInputValue = _useSetupColorPicker.typedInputValue,
+    setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
     hex = _useSetupColorPicker.hex,
     hslArr = _useSetupColorPicker.hslArr,
     handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
@@ -61,6 +63,8 @@ var ColorPicker = function ColorPicker(_ref) {
     return {
       color: color,
       setColor: setColor,
+      typedInputValue: typedInputValue,
+      setTypedInputValue: setTypedInputValue,
       hex: hex,
       hslArr: hslArr,
       handleOnChangeAlpha: handleOnChangeAlpha,
@@ -85,7 +89,7 @@ var ColorPicker = function ColorPicker(_ref) {
       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, typedInputValue, setTypedInputValue, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, 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;"}

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_content.js

@@ -7,8 +7,6 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var color_picker_constants = require('../color_picker_constants.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_footer = require('./color_picker_footer.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 styles = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js');
 var color_picker_variables = require('./color_picker_variables.js');
 var color_picker_controls = require('./color_picker_controls.js');
@@ -20,20 +18,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerContent = function ColorPickerContent() {
   var _useColorPicker = use_color_picker.useColorPicker(),
-    color = _useColorPicker.color,
-    setColor = _useColorPicker.setColor,
     colorVariables = _useColorPicker.colorVariables,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
-  var safeValue = utils.objectToString(color);
   var defaultStyles = styles.getStyles(true);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(context['default'], {
-    value: safeValue,
-    defaultStyles: defaultStyles,
-    onChange: setColor,
-    squareWidth: color_picker_constants.COLOR_PICKER_WIDTH,
-    squareHeight: color_picker_constants.COLOR_PICKER_HEIGHT,
-    hideOpacity: false
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-pl-2 aurora-pr-2 aurora-pt-3 aurora-border-x aurora-border-t aurora-border-subtle aurora-rounded-t-16 aurora-bg-neutral-0"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-pb-2 aurora-gap-2",
@@ -54,7 +42,7 @@ var ColorPickerContent = function ColorPickerContent() {
     }
   }, /*#__PURE__*/React__default['default'].createElement(color_picker_impl.ColorPickerImpl, null), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(color_picker_variables.ColorPickerVariables, {
     variables: colorVariables.variables
-  })) : null)))), /*#__PURE__*/React__default['default'].createElement(color_picker_footer.ColorPickerFooter, null));
+  })) : null))), /*#__PURE__*/React__default['default'].createElement(color_picker_footer.ColorPickerFooter, null));
 };
 
 exports.ColorPickerContent = ColorPickerContent;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,sBAAsB,iFAAqF;AAC3G,qBAAqB,uFAA2F;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qBAAqB,uFAA2F;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_label_input.js → color_picker_input.js}

@@ -5,10 +5,10 @@ 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 input = require('../../input/input.js');
 var color_picker_constants = require('../color_picker_constants.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_utils = require('../color_picker_utils.js');
+var color_picker_inputs_hex_input = require('./color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,8 +21,8 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
     disabled = _ref.disabled,
     preElement = _ref.preElement;
   var _useColorPicker = use_color_picker.useColorPicker(),
-    hex = _useColorPicker.hex,
     color = _useColorPicker.color,
+    typedInputValue = _useColorPicker.typedInputValue,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
     colorVariables = _useColorPicker.colorVariables,
@@ -30,21 +30,26 @@ 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 = variableName ? "".concat(t(variableName)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
-  if (isCurrentValueGradient) colorName = gradientType === color_picker_constants.GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
-  return /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    className: "aurora-cursor-pointer",
-    preElement: preElement,
-    type: "text",
+  var colorName = undefined;
+  if (isCurrentValueGradient) {
+    colorName = gradientType === color_picker_constants.GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
+  } else if (variableName && typedInputValueHasFullHexLength) {
+    colorName = "".concat(t(variableName));
+  }
+  return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex_input.ColorPickerInputsHexInput, {
     id: id,
     name: name,
     value: colorName,
     errors: errors,
     disabled: disabled,
-    readOnly: true
+    className: "aurora-cursor-pointer ".concat(colorName ? 'aurora-cursor-pointer' : ''),
+    preElement: preElement,
+    readOnly: !!colorName,
+    hasCursorPointer: !!colorName
   });
 };
 
 exports.ColorPickerInput = ColorPickerInput;
-//# sourceMappingURL=color_label_input.js.map
+//# sourceMappingURL=color_picker_input.js.map

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

@@ -6,7 +6,7 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var stack = require('../../../stack/stack.js');
 var color_picker_constants = require('../../color_picker_constants.js');
-var color_picker_inputs_hex = require('./color_picker_inputs_hex.js');
+var color_picker_inputs_hex = require('./color_picker_inputs_hex/color_picker_inputs_hex.js');
 var color_picker_inputs_rgba = require('./color_picker_inputs_rgba.js');
 var current_color_preview = require('../current_color_preview.js');
 

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var color_picker_inputs_hex_input = require('./color_picker_inputs_hex_input.js');
+var color_picker_inputs_hex_alpha = require('./color_picker_inputs_hex_alpha.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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-text-xs"
+  }), /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex_alpha.ColorPickerInputsHexAlpha, null));
+};
+
+exports.ColorPickerInputsHex = ColorPickerInputsHex;
+//# sourceMappingURL=color_picker_inputs_hex.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var use_color_picker = require('../../../hooks/use_color_picker.js');
+var color_picker_utils = require('../../../color_picker_utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
+    alpha = _useColorPicker.alpha;
+  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", {
+    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),
+    onChange: function onChange(e) {
+      return handleOnChangeAlpha(Number(e.target.value));
+    },
+    onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-text-xs aurora-pl-0.5"
+  }, "%"));
+};
+
+exports.ColorPickerInputsHexAlpha = ColorPickerInputsHexAlpha;
+//# sourceMappingURL=color_picker_inputs_hex_alpha.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var input = require('../../../../input/input.js');
+var use_color_picker = require('../../../hooks/use_color_picker.js');
+var tinycolor = require('../../../../../../../../external/tinycolor2/esm/tinycolor.js');
+var context = require('../../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var color_picker_utils = require('../../../color_picker_utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    setColor = _useColorPicker.setColor,
+    setTypedInputValue = _useColorPicker.setTypedInputValue,
+    hex = _useColorPicker.hex,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    gradientType = _useColorPicker.gradientType;
+  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 _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;
+    if (isCurrentValueGradient && gradientType) {
+      var newColors = color_picker_utils.ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
+      createGradientStr(newColors);
+    } else {
+      setColor(inputValue);
+    }
+  };
+  var hexFocus = function hexFocus() {
+    setIsDisabled(true);
+  };
+  var hexBlur = function hexBlur() {
+    setIsDisabled(false);
+  };
+  React.useEffect(function () {
+    if (hex === valueRef.current) return;
+    if (!isDisabled) {
+      setValue(hex);
+      valueRef.current = hex;
+    }
+  }, [hex, isDisabled]);
+  return /*#__PURE__*/React__default['default'].createElement(input.Input, {
+    className: className,
+    type: type,
+    preElement: preElement,
+    id: id,
+    name: name,
+    errors: errors,
+    disabled: disabled,
+    maxLength: 8,
+    value: initialValue || value.toUpperCase(),
+    onChange: handleOnChange,
+    onBlur: hexBlur,
+    onFocus: hexFocus,
+    readOnly: readOnly,
+    hasCursorPointer: hasCursorPointer
+  });
+};
+
+exports.ColorPickerInputsHexInput = ColorPickerInputsHexInput;
+//# sourceMappingURL=color_picker_inputs_hex_input.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/{color_picker_inputs_hex.js.map → 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,2DAA+D;AACvF,sBAAsB,oFAAwF;AAC9G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

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

@@ -20,7 +20,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     alpha = _useColorPicker.alpha,
     rgbaArr = _useColorPicker.rgbaArr;
   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",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[0],
     onChange: function onChange(e) {
@@ -28,7 +28,7 @@ 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",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[1],
     onChange: function onChange(e) {
@@ -36,7 +36,7 @@ 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",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[2],
     onChange: function onChange(e) {

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

@@ -7,10 +7,14 @@ 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_constants = require('../color_picker_constants.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.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 styles = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js');
 var color_picker_content = require('./color_picker_content.js');
-var color_label_input = require('./color_label_input.js');
+var color_picker_input = require('./color_picker_input.js');
 var popover_content = require('../../popover/components/popover_content.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,9 +33,12 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useColorPicker = use_color_picker.useColorPicker(),
     color = _useColorPicker.color,
+    setColor = _useColorPicker.setColor,
     isColorPickerOpened = _useColorPicker.isColorPickerOpened,
     setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
     handleSave = _useColorPicker.handleSave;
+  var safeValue = utils.objectToString(color);
+  var defaultStyles = styles.getStyles(true);
   var handleClosePopover = function handleClosePopover() {
     handleSave();
     setIsColorPickerOpened(false);
@@ -41,13 +48,20 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     onOpenChange: function onOpenChange(value) {
       return !value && handleClosePopover();
     }
+  }, /*#__PURE__*/React__default['default'].createElement(context['default'], {
+    value: safeValue,
+    defaultStyles: defaultStyles,
+    onChange: setColor,
+    squareWidth: color_picker_constants.COLOR_PICKER_WIDTH,
+    squareHeight: color_picker_constants.COLOR_PICKER_HEIGHT,
+    hideOpacity: false
   }, /*#__PURE__*/React__default['default'].createElement(popover_trigger.PopoverTrigger, {
     onClick: function onClick() {
       return setIsColorPickerOpened(true);
     },
     disabled: disabled,
     className: cn.cn('aurora-w-full', triggerClassName)
-  }, !children && (/*#__PURE__*/React__default['default'].createElement(color_label_input.ColorPickerInput, {
+  }, !children && (/*#__PURE__*/React__default['default'].createElement(color_picker_input.ColorPickerInput, {
     id: id,
     name: name,
     errors: errors,
@@ -59,7 +73,7 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     })
   })), children), /*#__PURE__*/React__default['default'].createElement(popover_content.PopoverContent, _rollupPluginBabelHelpers.objectSpread2({
     className: cn.cn('aurora-rounded-16 aurora-overflow-hidden aurora-z-[99999] js__aurora-color-picker', className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement(color_picker_content.ColorPickerContent, null)));
+  }, rest), /*#__PURE__*/React__default['default'].createElement(color_picker_content.ColorPickerContent, null))));
 };
 
 exports.default = ColorPickerPure;

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;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,sBAAsB,iFAAqF;AAC3G,qBAAqB,uFAA2F;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -38,6 +38,10 @@ 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 _getDetails = utils.getDetails(colorValue),
     degrees = _getDetails.degrees;
   var savedDegRef = React.useRef(isNaN(degrees) ? 180 : degrees);
@@ -112,6 +116,8 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     color: colorValue,
     previousSolidColor: previousSolidColor,
     previousGradientColor: previousGradientColor,
+    typedInputValue: typedInputValue,
+    setTypedInputValue: setTypedInputValue,
     setColor: setColor,
     hex: hex,
     hslArr: hslArr,

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

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

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "onChange", "onKeyDown", "onKeyUp"];
+var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "hasCursorPointer", "onChange", "onKeyDown", "onKeyUp"];
 var Input = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var preElement = _ref.preElement,
     postElement = _ref.postElement,
@@ -26,6 +26,7 @@ var Input = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     type = _ref.type,
+    hasCursorPointer = _ref.hasCursorPointer,
     onChange = _ref.onChange,
     onKeyDown = _ref.onKeyDown,
     onKeyUp = _ref.onKeyUp,
@@ -51,7 +52,9 @@ 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-2 aurora-rounded-6')
+    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
+    })
   })), postElement && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
   }, postElement));

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

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

@@ -27,6 +27,8 @@ var ColorPicker = function ColorPicker(_ref) {
     }),
     color = _useSetupColorPicker.color,
     setColor = _useSetupColorPicker.setColor,
+    typedInputValue = _useSetupColorPicker.typedInputValue,
+    setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
     hex = _useSetupColorPicker.hex,
     hslArr = _useSetupColorPicker.hslArr,
     handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
@@ -53,6 +55,8 @@ var ColorPicker = function ColorPicker(_ref) {
     return {
       color: color,
       setColor: setColor,
+      typedInputValue: typedInputValue,
+      setTypedInputValue: setTypedInputValue,
       hex: hex,
       hslArr: hslArr,
       handleOnChangeAlpha: handleOnChangeAlpha,
@@ -77,7 +81,7 @@ var ColorPicker = function ColorPicker(_ref) {
       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, typedInputValue, setTypedInputValue, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, 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;"}

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

@@ -34,6 +34,8 @@ export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
     triggerClassName?: string;
 }
 export interface IColorPickerContext {
+    typedInputValue: string;
+    setTypedInputValue: (newValue: string) => void;
     color: string;
     setColor: (newColor: string, shadeName?: string) => void;
     hex: 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_content.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_CONTENT_MAX_HEIGHT } from '../color_picker_constants.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_CONTENT_MAX_HEIGHT } from '../color_picker_constants.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerFooter } from './color_picker_footer.js';
-import { objectToString } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
-import PickerContextWrapper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
 import { ColorPickerVariables } from './color_picker_variables.js';
 import { ColorPickerControls } from './color_picker_controls.js';
@@ -12,20 +10,10 @@ import { ColorPickerImpl } from './color_picker_impl.js';
 
 var ColorPickerContent = function ColorPickerContent() {
   var _useColorPicker = useColorPicker(),
-    color = _useColorPicker.color,
-    setColor = _useColorPicker.setColor,
     colorVariables = _useColorPicker.colorVariables,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
-  var safeValue = objectToString(color);
   var defaultStyles = getStyles(true);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PickerContextWrapper, {
-    value: safeValue,
-    defaultStyles: defaultStyles,
-    onChange: setColor,
-    squareWidth: COLOR_PICKER_WIDTH,
-    squareHeight: COLOR_PICKER_HEIGHT,
-    hideOpacity: false
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-pl-2 aurora-pr-2 aurora-pt-3 aurora-border-x aurora-border-t aurora-border-subtle aurora-rounded-t-16 aurora-bg-neutral-0"
   }, /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-pb-2 aurora-gap-2",
@@ -46,7 +34,7 @@ var ColorPickerContent = function ColorPickerContent() {
     }
   }, /*#__PURE__*/React.createElement(ColorPickerImpl, null), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? (/*#__PURE__*/React.createElement(ColorPickerVariables, {
     variables: colorVariables.variables
-  })) : null)))), /*#__PURE__*/React.createElement(ColorPickerFooter, null));
+  })) : null))), /*#__PURE__*/React.createElement(ColorPickerFooter, null));
 };
 
 export { ColorPickerContent };