@dreamcommerce/aurora 3.0.0-99 → 3.0.0

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

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var input = require('../../../input/input.js');
+var use_color_picker = require('../../hooks/use_color_picker.js');
 var formatters = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js');
 var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
-var icon = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/icon.js');
+var angle_icon = require('../../../../assets/icons/angle_icon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,24 +14,27 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
   var _usePicker = context.usePicker(),
-    degrees = _usePicker.degrees,
     onChange = _usePicker.onChange,
     value = _usePicker.value;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    degrees = _useColorPicker.degrees;
   var handleDegrees = function handleDegrees(e) {
     var newValue = formatters.formatInputValues(e.target.value, 0, 360);
     var remaining = value.split(/,(.+)/)[1];
     onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
   };
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: 'aurora-relative aurora-p-0 aurora-flex aurora-justify-between aurora-gap-1.5 aurora-h-6 aurora-border-2 aurora-border-solid aurora-rounded-4 aurora-bg-active'
-  }, /*#__PURE__*/React__default['default'].createElement(icon.DegreesIcon, {
-    color: "#5c657e"
-  }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(input.Input, {
+    className: 'aurora-relative aurora-flex aurora-justify-between aurora-gap-1.5 aurora-h-6 aurora-border-0 aurora-p-0.5 aurora-rounded-4 aurora-bg-subtle aurora-items-center'
+  }, /*#__PURE__*/React__default['default'].createElement(angle_icon.AngleIcon, {
+    className: "aurora-w-3 aurora-h-3 aurora-stroke-0 aurora-ml-1"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
     value: degrees,
     onChange: function onChange(e) {
       return handleDegrees(e);
     },
-    className: '!aurora-h-5 !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center'
+    className: 'aurora-h-[18px] aurora-w-10 aurora-text-xs aurora-rounded-4 aurora-text-center aurora-outline-none aurora-p-0'
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       position: 'absolute',

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB,6FAAiG;AAC1H,sBAAsB,oFAAwF;AAC9G,mBAAmB,4FAAgG;AACnH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yBAAyB,6FAAiG;AAC1H,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;"}

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stack = require('../../stack/stack.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_inputs = require('./color_picker_inputs/color_picker_inputs.js');
+var color_picker_shades = require('./color_picker_shades.js');
+var color_picker_hue = require('./color_picker_overrides/color_picker_hue.js');
+var color_picker_opacity = require('./color_picker_overrides/color_picker_opacity.js');
+var color_picker_square = require('./color_picker_overrides/color_picker_square.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerImpl = function ColorPickerImpl() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    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) {
+      // 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"
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_square.Square, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "color-picker__hue aurora-w-full"
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_hue.Hue, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "color-picker__opacity aurora-w-full"
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_opacity.Opacity, null))), /*#__PURE__*/React__default['default'].createElement(color_picker_inputs.ColorPickerInputs, null), !isCurrentValueGradient ? /*#__PURE__*/React__default['default'].createElement(color_picker_shades.ColorPickerShades, null) : null);
+};
+
+exports.ColorPickerImpl = ColorPickerImpl;
+//# sourceMappingURL=color_picker_impl.js.map

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var color_picker_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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerInput = function ColorPickerInput(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    errors = _ref.errors,
+    disabled = _ref.disabled,
+    preElement = _ref.preElement;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    color = _useColorPicker.color,
+    typedInputValue = _useColorPicker.typedInputValue,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    gradientType = _useColorPicker.gradientType,
+    colorVariables = _useColorPicker.colorVariables,
+    shadeName = _useColorPicker.shadeName;
+  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 && 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,
+    className: "aurora-cursor-pointer ".concat(colorName ? 'aurora-cursor-pointer' : ''),
+    preElement: preElement,
+    readOnly: !!colorName,
+    hasCursorPointer: !!colorName
+  });
+};
+
+exports.ColorPickerInput = ColorPickerInput;
+//# sourceMappingURL=color_picker_input.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/{color_picker_header.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;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');
 
@@ -22,23 +22,16 @@ var ColorPickerInputs = function ColorPickerInputs() {
   var handleSelectType = function handleSelectType(e) {
     setType(e.target.value);
   };
-  var inputs = function inputs() {
-    switch (type) {
-      case color_picker_constants.COLOR_PICKER_TYPES.HEX:
-        return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex.ColorPickerInputsHex, null);
-      case color_picker_constants.COLOR_PICKER_TYPES.RGB:
-        return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_rgba.ColorPickerInputsRgba, null);
-      default:
-        return false;
-    }
-  };
   return /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
-    spacing: "2",
-    align: "center"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("select", {
+    spacing: "1",
+    align: "center",
+    className: "aurora-pt-2"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React__default['default'].createElement("select", {
     value: type,
     onChange: handleSelectType,
-    className: "color-picker__inputs-select aurora-text-xs aurora-text-info-strong aurora-uppercase aurora-pr-2.5 aurora-appearance-none"
+    className: "color-picker__inputs-select aurora-text-xs aurora-text-info-strong aurora-uppercase aurora-pr-2.5 aurora-appearance-none aurora-cursor-pointer"
   }, /*#__PURE__*/React__default['default'].createElement("option", {
     value: color_picker_constants.COLOR_PICKER_TYPES.HEX
   }, color_picker_constants.COLOR_PICKER_TYPES.HEX), /*#__PURE__*/React__default['default'].createElement("option", {
@@ -46,8 +39,8 @@ var ColorPickerInputs = function ColorPickerInputs() {
   }, color_picker_constants.COLOR_PICKER_TYPES.RGB))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex-1"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden"
-  }, inputs())), /*#__PURE__*/React__default['default'].createElement(current_color_preview.CurrentColorPreview, null));
+    className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden aurora-h-6"
+  }, type === color_picker_constants.COLOR_PICKER_TYPES.HEX && /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex.ColorPickerInputsHex, null), type === color_picker_constants.COLOR_PICKER_TYPES.RGB && /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_rgba.ColorPickerInputsRgba, null))), /*#__PURE__*/React__default['default'].createElement(current_color_preview.CurrentColorPreview, null));
 };
 
 exports.ColorPickerInputs = ColorPickerInputs;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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,101 @@
+'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,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+  var _useState = React.useState(hex),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var valueRef = React.useRef(value);
+  var _useState3 = React.useState(false),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    isDisabled = _useState4[0],
+    setIsDisabled = _useState4[1];
+  var inputRef = React.useRef(null);
+  var _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 (isColorPickerCurrentlyUsed && inputRef.current) {
+      inputRef.current.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
+  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, {
+    ref: inputRef,
+    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/{external/react-best-gradient-color-picker/dist/esm/components/Opacity.js.map → 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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var input = require('../../../input/input.js');
 var use_color_picker = require('../../hooks/use_color_picker.js');
-var utilities = require('@dreamcommerce/utilities');
+var color_picker_utils = require('../../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,39 +17,45 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     setG = _useColorPicker.setG,
     setB = _useColorPicker.setB,
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
-    alphaValue = _useColorPicker.alphaValue,
+    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-6 !aurora-px-2 aurora-text-xs",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[0],
     onChange: function onChange(e) {
       return setR(Number(e.target.value));
     },
-    onKeyPress: utilities.InputUtils.preventTypingLetters
+    onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[1],
     onChange: function onChange(e) {
       return setG(Number(e.target.value));
     },
-    onKeyPress: utilities.InputUtils.preventTypingLetters
+    onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[2],
     onChange: function onChange(e) {
       return setB(Number(e.target.value));
     },
-    onKeyPress: utilities.InputUtils.preventTypingLetters
-  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
+  }), /*#__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: alphaValue,
-    onChange: handleOnChangeAlpha,
-    onKeyPress: utilities.InputUtils.preventTypingLetters
-  }));
+    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.ColorPickerInputsRgba = ColorPickerInputsRgba;

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

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

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var cn = require('../../../utilities/cn.js');
 var stack = require('../../stack/stack.js');
 var typography = require('../../typography/typography.js');
 var tooltip = require('../../tooltip/tooltip.js');
@@ -26,48 +28,63 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
     setRadial = _useColorPicker.setRadial,
     setLinear = _useColorPicker.setLinear,
     previousSolidColor = _useColorPicker.previousSolidColor,
-    previousGradientColor = _useColorPicker.previousGradientColor;
-  var commonClassNames = 'aurora-block aurora-w-6 aurora-h-6 aurora-border aurora-border-solid aurora-rounded-4 aurora-cursor-pointer hover:aurora-border-strong';
-  var activeClassNames = 'aurora-border-2 aurora-border-solid aurora-border-active';
+    previousGradientColor = _useColorPicker.previousGradientColor,
+    color = _useColorPicker.color;
+  var commonClassNames = 'aurora-block aurora-w-6 aurora-h-6 aurora-border aurora-border-solid aurora-rounded-4 aurora-cursor-pointer hover:aurora-border-strong hover:aurora-border-2';
+  var activeClassNames = 'aurora-border-2 aurora-border-solid !aurora-border-active';
+  var changeToSolid = function changeToSolid() {
+    setSolid(previousSolidColor);
+  };
+  var changeToLinear = function changeToLinear() {
+    if (!isCurrentValueGradient) {
+      setLinear(previousGradientColor);
+      return;
+    }
+    setLinear(color);
+  };
+  var changeToRadial = function changeToRadial() {
+    if (!isCurrentValueGradient) {
+      setRadial(previousGradientColor);
+      return;
+    }
+    setRadial(color);
+  };
   return /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     spacing: "1",
     className: "aurora-flex aurora-list-none"
   }, /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return setSolid(previousSolidColor);
-    },
+    onClick: changeToSolid,
     "aria-label": "Color picker solid mode",
-    className: "aurora-bg-info-active ".concat(commonClassNames, " ").concat(!isCurrentValueGradient && activeClassNames)
+    className: cn.cn('aurora-bg-neutral-700', commonClassNames, !isCurrentValueGradient && activeClassNames)
   })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Solid')))))), /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return setLinear(previousGradientColor);
-    },
+    onClick: changeToLinear,
     "aria-label": "Color picker linear gradient mode",
-    className: "color-picker-mode-toggler__button_gradient_linear ".concat(commonClassNames, " ").concat(gradientType === 'linear-gradient' && activeClassNames)
+    className: cn.cn('color-picker-mode-toggler__button_gradient_linear', commonClassNames, gradientType === 'linear-gradient' && activeClassNames)
   })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Linear gradient')))))), /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return setRadial(previousGradientColor);
-    },
+    onClick: changeToRadial,
     "aria-label": "Color picker radial gradient mode",
-    className: "color-picker-mode-toggler__button_gradient_radial ".concat(commonClassNames, " ").concat(gradientType === 'radial-gradient' && activeClassNames)
+    className: cn.cn('color-picker-mode-toggler__button_gradient_radial', commonClassNames, gradientType === 'radial-gradient' && activeClassNames)
   })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Radial gradient')))))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var tinycolor = require('../../../../../../../external/tinycolor2/esm/tinycolor.js');
+var 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 dropper_fill_icon = require('../../../../assets/icons/dropper_fill_icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke
+ * - Usunieto caly kod zwiazany z html2canvas
+ */
+var EyeDropper = function EyeDropper(_ref) {
+  var onSelect = _ref.onSelect;
+  var _usePicker = context.usePicker(),
+    defaultStyles = _usePicker.defaultStyles;
+  var getEyeDrop = function getEyeDrop() {
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
+    if (!window.EyeDropper) {
+      return;
+    }
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
+    var eyeDropper = new window.EyeDropper();
+    var abortController = new window.AbortController();
+    eyeDropper.open({
+      signal: abortController.signal
+    }).then(function (result) {
+      var tinyHex = tinycolor['default'](result.sRGBHex);
+      var _tinyHex$toRgb = tinyHex.toRgb(),
+        r = _tinyHex$toRgb.r,
+        g = _tinyHex$toRgb.g,
+        b = _tinyHex$toRgb.b;
+      onSelect("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 1)"));
+    }).catch(function (e) {
+      console.log(e);
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: getEyeDrop,
+    id: "rbgcp-eyedropper-btn",
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpEyedropperBtn), styles.controlBtnStyles(false, defaultStyles)), {}, {
+      background: '#F5F6FA'
+    })
+  }, /*#__PURE__*/React__default['default'].createElement(dropper_fill_icon.DropperFillIcon, {
+    className: "aurora-w-4 aurora-h-4 aurora-stroke-0"
+  })));
+};
+
+exports.EyeDropper = EyeDropper;
+//# sourceMappingURL=color_picker_eye_dropper.js.map