@dreamcommerce/aurora 3.0.0-99 → 3.0.0

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

@@ -1,6 +1,6 @@
 import { createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, classCallCheck as _classCallCheck } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { COLOR_PICKER_INITIAL_STATE, GRADIENT_TYPES, GRADIENT_RADIAL_SHAPES } from './color_picker_constants.js';
 import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
+import { high, low } from '../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
 
 var _ColorPickerUtils;
 var ColorPickerUtils = /*#__PURE__*/function () {
@@ -10,25 +10,17 @@ var ColorPickerUtils = /*#__PURE__*/function () {
   return _createClass(ColorPickerUtils, null, [{
     key: "isGradient",
     value: function isGradient(color) {
-      return color.includes('linear-gradient') || color.includes('radial-gradient');
+      return /(linear|radial|conic)-gradient\s*\(/.test(color);
     }
   }, {
-    key: "getColorPickerGradientValue",
-    value: function getColorPickerGradientValue(gradient) {
-      var _gradient$degrees;
-      return {
-        gradientType: gradient.gradientType,
-        angle: gradient.gradientType === GRADIENT_TYPES.radial ? undefined : parseFloat((_gradient$degrees = gradient.degrees) !== null && _gradient$degrees !== void 0 ? _gradient$degrees : '90deg'),
-        radialShape: gradient.gradientType === GRADIENT_TYPES.radial ? GRADIENT_RADIAL_SHAPES.circle : undefined,
-        colors: gradient.colors.map(function (_ref) {
-          var left = _ref.left,
-            value = _ref.value;
-          return {
-            stop: left,
-            value: "#".concat(ColorPickerUtils.getTinyColorInstance(value).toHex8())
-          };
-        })
-      };
+    key: "preventTypingLetters",
+    value: function preventTypingLetters(event) {
+      var allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete', 'Tab', 'Home', 'End'];
+      if (allowedKeys.includes(event.key) || event.ctrlKey || event.metaKey || /^[0-9]$/.test(event.key)) {
+        return;
+      } else {
+        event.preventDefault();
+      }
     }
   }]);
 }();
@@ -36,22 +28,6 @@ _ColorPickerUtils = ColorPickerUtils;
 _defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
   return tinycolor(color);
 });
-_defineProperty(ColorPickerUtils, "getColorPickerValue", function (color) {
-  var _color$name;
-  var initialColorValue = typeof color === 'string' ? color : color === null || color === void 0 ? void 0 : color.value;
-  if (!initialColorValue) return {
-    value: COLOR_PICKER_INITIAL_STATE,
-    name: ''
-  };
-  var parsedColorValue = initialColorValue ? _ColorPickerUtils.getTinyColorInstance(initialColorValue).toHex8() : COLOR_PICKER_INITIAL_STATE;
-  if (_ColorPickerUtils.isGradient(initialColorValue)) {
-    parsedColorValue = initialColorValue;
-  }
-  return {
-    value: parsedColorValue,
-    name: typeof color === 'string' ? '' : (_color$name = color === null || color === void 0 ? void 0 : color.name) !== null && _color$name !== void 0 ? _color$name : ''
-  };
-});
 _defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
   return colorSet.toRgb();
 });
@@ -59,15 +35,14 @@ _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));
 });
-_defineProperty(ColorPickerUtils, "isHexChar", function (value) {
-  var hexRegEx = /^$|[0-9a-fA-F]+$/;
-  return hexRegEx.test(value);
-});
 _defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
-  var tinyColor = typeof color === 'string' ? _ColorPickerUtils.getTinyColorInstance(color) : _ColorPickerUtils.getTinyColorInstance(color.value);
+  var tinyColor = _ColorPickerUtils.getTinyColorInstance(color.value);
   var rgba = _ColorPickerUtils.getRgbaValue(tinyColor);
   var hex = _ColorPickerUtils.getHexValue(tinyColor);
   var hexString = _ColorPickerUtils.getHexValueString(tinyColor);
@@ -86,9 +61,9 @@ _defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
   };
   return _objectSpread2(_objectSpread2({}, allColorTypes), variableName && variableName);
 });
-_defineProperty(ColorPickerUtils, "getVariableShades", function (_ref2) {
-  var color = _ref2.color,
-    name = _ref2.name;
+_defineProperty(ColorPickerUtils, "getVariableShades", function (_ref) {
+  var color = _ref.color,
+    name = _ref.name;
   var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
   var colorHsl = colorTiny.toHsl();
   var isNeutral = name.includes('neutral');
@@ -182,6 +157,36 @@ _defineProperty(ColorPickerUtils, "convertVariableShadesToHex", function (variab
     };
   });
 });
+_defineProperty(ColorPickerUtils, "updateGradientWithActiveColor", function (colors, index, newColor) {
+  return colors.map(function (c, i) {
+    return _objectSpread2(_objectSpread2({}, c), {}, {
+      value: i === index ? high(_objectSpread2(_objectSpread2({}, c), {}, {
+        value: tinycolor(newColor).toRgbString()
+      })) : low(c)
+    });
+  });
+});
+_defineProperty(ColorPickerUtils, "findVariable", function (variables, color) {
+  var _Object$values$find;
+  return (_Object$values$find = Object.values(variables).find(function (v) {
+    var variableTiny = _ColorPickerUtils.getTinyColorInstance(v.value);
+    var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
+    return variableTiny.toHex8String() === colorTiny.toHex8String();
+  })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.name;
+});
+_defineProperty(ColorPickerUtils, "normalizeLinearGradient", function (color) {
+  var gradientRegex = /linear-gradient\s*\((.*?)\)/i;
+  var match = color.match(gradientRegex);
+  if (!match) {
+    return color;
+  }
+  var inner = match[1].trim();
+  var hasAngleOrDirection = /^([0-9.]+(deg|rad|grad|turn)|to\s+(left|right|top|bottom)(\s+(left|right|top|bottom))?)/i;
+  if (!hasAngleOrDirection.test(inner)) {
+    return color.replace(gradientRegex, "linear-gradient(180deg, ".concat(inner, ")"));
+  }
+  return color;
+});
 
 export { ColorPickerUtils };
 //# sourceMappingURL=color_picker_utils.js.map

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;AACA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,28 +1,40 @@
 import React from 'react';
-import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../color_picker_constants.js';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.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 { ColorPickerHeader } from './color_picker_header.js';
-import { ColorPickerImpl } from './color_picker_impl/color_picker_impl.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';
+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 colorValue = typeof color === 'string' ? color : color.value;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
-    className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x"
-  }, /*#__PURE__*/React.createElement(ColorPickerImpl, {
-    value: colorValue,
-    onChange: setColor,
-    width: COLOR_PICKER_WIDTH,
-    height: COLOR_PICKER_HEIGHT
-  }), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? /*#__PURE__*/React.createElement(ColorPickerVariables, {
+  var defaultStyles = getStyles(true);
+  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",
+    style: {
+      width: COLOR_PICKER_WIDTH + COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React.createElement(ColorPickerControls, null)), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-overflow-y-scroll aurora-overflow-x-visible custom-scrollbar aurora-pr-0.5",
+    style: _objectSpread2(_objectSpread2({}, defaultStyles.body), {}, {
+      maxHeight: isCurrentValueGradient ? COLOR_PICKER_CONTENT_MAX_HEIGHT.gradient : COLOR_PICKER_CONTENT_MAX_HEIGHT.color
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-pl-2",
+    style: {
+      width: COLOR_PICKER_WIDTH + COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__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 };

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
 import { Stack } from '../../stack/stack.js';
 import { Typography } from '../../typography/typography.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
@@ -11,9 +12,9 @@ import { useColorPicker } from '../hooks/use_color_picker.js';
 import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { ColorPickerGradientAngle } from './color_picker_gradient_controls/color_picker_gradient_angle.js';
 import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
-import Dropper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js';
-import GradientBar from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientBar.js';
-import GradientControls from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js';
+import { GradientBar } from './color_picker_overrides/color_picker_gradient_bar.js';
+import { EyeDropper } from './color_picker_overrides/color_picker_eye_dropper.js';
+import { GradientControls } from './color_picker_overrides/color_picker_gradient_controls.js';
 
 var ColorPickerControls = function ColorPickerControls() {
   var _usePicker = usePicker(),
@@ -25,28 +26,33 @@ var ColorPickerControls = function ColorPickerControls() {
     gradientType = _useColorPicker.gradientType,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
   var isLinearGradient = gradientType === GRADIENT_TYPES.linear;
+  var EyeDropperAvailable = typeof window['EyeDropper'] !== 'undefined';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
     justify: withGradient ? 'between' : 'end'
   }, withGradient ? (/*#__PURE__*/React.createElement(Stack, {
     spacing: "8"
-  }, /*#__PURE__*/React.createElement(ColorPickerModeToggler, null))) : null, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(Dropper, {
+  }, /*#__PURE__*/React.createElement(ColorPickerModeToggler, null))) : null, EyeDropperAvailable && (/*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(EyeDropper, {
     onSelect: handleChange
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
     size: "xs",
-    weight: "medium"
-  }, "".concat(t('Sample color'))))))), withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, {
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
+  }, "".concat(t('Sample color')))))))), withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, {
     justify: isLinearGradient ? 'between' : 'end'
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isLinearGradient ? /*#__PURE__*/React.createElement(ColorPickerGradientAngle, null) : null, /*#__PURE__*/React.createElement(GradientControls, {
     hideGradientType: true,
     hideGradientAngle: true,
     hideGradientStop: true
-  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(GradientBar, null)), /*#__PURE__*/React.createElement(TooltipContent, {
+  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, {
+    className: "aurora-border-b aurora-border-subtle aurora-pb-2 aurora-pl-4 aurora-pr-[1.125rem] -aurora-mb-[1px] -aurora-ml-4 -aurora-mr-[1.125rem]"
+  }, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(GradientBar, null)), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Add color')))))))) : null);
 };
 

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.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,0BAA0B,iFAAqF;AAC/G;AACA;AACA,oBAAoB,+FAAmG;AACvH,wBAAwB,gGAAoG;AAC5H,6BAA6B,qGAAyG;AACtI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,iFAAqF;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_footer.js

@@ -1,18 +1,14 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button } from '../../button/button.js';
-import { ColorPickerContext } from '../color_picker_context.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var ColorPickerFooter = function ColorPickerFooter() {
-  var _useContext = useContext(ColorPickerContext),
-    setIsColorPickerOpened = _useContext.setIsColorPickerOpened;
   var _useColorPicker = useColorPicker(),
-    color = _useColorPicker.color,
     handleCancel = _useColorPicker.handleCancel,
-    handleSave = _useColorPicker.handleSave;
+    handleSave = _useColorPicker.handleSave,
+    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
@@ -22,22 +18,23 @@ var ColorPickerFooter = function ColorPickerFooter() {
   };
   var handleSaveButton = function handleSaveButton() {
     setIsColorPickerOpened(false);
-    handleSave(ColorPickerUtils.getAllColorTypes(color));
+    handleSave();
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-rounded-b-16"
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-border-subtle aurora-rounded-b-16 aurora-bg-neutral-0"
   }, /*#__PURE__*/React.createElement(Button, {
-    className: "aurora-capitalize aurora-flex-1",
+    className: "aurora-flex-1",
     variant: "secondary",
     size: "s",
     type: "button",
     onClick: handleCancelButton
-  }, "".concat(t('cancel'))), /*#__PURE__*/React.createElement(Button, {
-    className: "aurora-capitalize aurora-flex-1",
+  }, "".concat(t('Cancel'))), /*#__PURE__*/React.createElement(Button, {
+    className: "aurora-flex-1",
     type: "button",
     size: "s",
+    autoFocus: true,
     onClick: handleSaveButton
-  }, "".concat(t('choose'))));
+  }, "".concat(t('Choose'))));
 };
 
 export { ColorPickerFooter };

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

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

@@ -1,29 +1,32 @@
 import React from 'react';
-import { Input } from '../../../input/input.js';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { formatInputValues } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
-import { DegreesIcon } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/icon.js';
+import { AngleIcon } from '../../../../assets/icons/angle_icon.js';
 
 var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
   var _usePicker = usePicker(),
-    degrees = _usePicker.degrees,
     onChange = _usePicker.onChange,
     value = _usePicker.value;
+  var _useColorPicker = useColorPicker(),
+    degrees = _useColorPicker.degrees;
   var handleDegrees = function handleDegrees(e) {
     var newValue = formatInputValues(e.target.value, 0, 360);
     var remaining = value.split(/,(.+)/)[1];
     onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
   };
   return /*#__PURE__*/React.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.createElement(DegreesIcon, {
-    color: "#5c657e"
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(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.createElement(AngleIcon, {
+    className: "aurora-w-3 aurora-h-3 aurora-stroke-0 aurora-ml-1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React.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.createElement("div", {
     style: {
       position: 'absolute',

package/build/esm/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,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH,4BAA4B,4FAAgG;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerImpl: () => React.JSX.Element;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Stack } from '../../stack/stack.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerInputs } from './color_picker_inputs/color_picker_inputs.js';
+import { ColorPickerShades } from './color_picker_shades.js';
+import { Hue } from './color_picker_overrides/color_picker_hue.js';
+import { Opacity } from './color_picker_overrides/color_picker_opacity.js';
+import { Square } from './color_picker_overrides/color_picker_square.js';
+
+var ColorPickerImpl = function ColorPickerImpl() {
+  var _useColorPicker = useColorPicker(),
+    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) {
+      // 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"
+  }, /*#__PURE__*/React.createElement(Square, null)), /*#__PURE__*/React.createElement("div", {
+    className: "color-picker__hue aurora-w-full"
+  }, /*#__PURE__*/React.createElement(Hue, null)), /*#__PURE__*/React.createElement("div", {
+    className: "color-picker__opacity aurora-w-full"
+  }, /*#__PURE__*/React.createElement(Opacity, null))), /*#__PURE__*/React.createElement(ColorPickerInputs, null), !isCurrentValueGradient ? /*#__PURE__*/React.createElement(ColorPickerShades, null) : null);
+};
+
+export { ColorPickerImpl };
+//# sourceMappingURL=color_picker_impl.js.map

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

package/build/esm/packages/aurora/src/components/color_picker/components/{color_label_input.d.ts → color_picker_input.d.ts}

@@ -4,6 +4,7 @@ interface IColorLabelInputProps {
     name?: string;
     errors?: string | string[];
     disabled?: boolean;
+    preElement?: React.ReactNode;
 }
 export declare const ColorPickerInput: React.FC<IColorLabelInputProps>;
 export {};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { GRADIENT_TYPES } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
+import { ColorPickerInputsHexInput } from './color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js';
+
+var ColorPickerInput = function ColorPickerInput(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    errors = _ref.errors,
+    disabled = _ref.disabled,
+    preElement = _ref.preElement;
+  var _useColorPicker = useColorPicker(),
+    color = _useColorPicker.color,
+    typedInputValue = _useColorPicker.typedInputValue,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    gradientType = _useColorPicker.gradientType,
+    colorVariables = _useColorPicker.colorVariables,
+    shadeName = _useColorPicker.shadeName;
+  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 && typedInputValueHasFullHexLength) {
+    colorName = "".concat(t(variableName));
+  }
+  return /*#__PURE__*/React.createElement(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
+  });
+};
+
+export { ColorPickerInput };
+//# sourceMappingURL=color_picker_input.js.map

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Stack } from '../../../stack/stack.js';
 import { COLOR_PICKER_TYPES } from '../../color_picker_constants.js';
-import { ColorPickerInputsHex } from './color_picker_inputs_hex.js';
+import { ColorPickerInputsHex } from './color_picker_inputs_hex/color_picker_inputs_hex.js';
 import { ColorPickerInputsRgba } from './color_picker_inputs_rgba.js';
 import { CurrentColorPreview } from '../current_color_preview.js';
 
@@ -14,23 +14,16 @@ var ColorPickerInputs = function ColorPickerInputs() {
   var handleSelectType = function handleSelectType(e) {
     setType(e.target.value);
   };
-  var inputs = function inputs() {
-    switch (type) {
-      case COLOR_PICKER_TYPES.HEX:
-        return /*#__PURE__*/React.createElement(ColorPickerInputsHex, null);
-      case COLOR_PICKER_TYPES.RGB:
-        return /*#__PURE__*/React.createElement(ColorPickerInputsRgba, null);
-      default:
-        return false;
-    }
-  };
   return /*#__PURE__*/React.createElement(Stack, {
-    spacing: "2",
-    align: "center"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("select", {
+    spacing: "1",
+    align: "center",
+    className: "aurora-pt-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React.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.createElement("option", {
     value: COLOR_PICKER_TYPES.HEX
   }, COLOR_PICKER_TYPES.HEX), /*#__PURE__*/React.createElement("option", {
@@ -38,8 +31,8 @@ var ColorPickerInputs = function ColorPickerInputs() {
   }, COLOR_PICKER_TYPES.RGB))), /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex-1"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden"
-  }, inputs())), /*#__PURE__*/React.createElement(CurrentColorPreview, null));
+    className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden aurora-h-6"
+  }, type === COLOR_PICKER_TYPES.HEX && /*#__PURE__*/React.createElement(ColorPickerInputsHex, null), type === COLOR_PICKER_TYPES.RGB && /*#__PURE__*/React.createElement(ColorPickerInputsRgba, null))), /*#__PURE__*/React.createElement(CurrentColorPreview, null));
 };
 
 export { ColorPickerInputs };

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ColorPickerInputsHexInput } from './color_picker_inputs_hex_input.js';
+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-text-xs"
+  }), /*#__PURE__*/React.createElement(ColorPickerInputsHexAlpha, null));
+};
+
+export { ColorPickerInputsHex };
+//# sourceMappingURL=color_picker_inputs_hex.js.map

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

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerInputsHexAlpha: () => React.JSX.Element;

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

@@ -0,0 +1,25 @@
+import React 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;
+  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", {
+    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: ColorPickerUtils.preventTypingLetters
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-text-xs aurora-pl-0.5"
+  }, "%"));
+};
+
+export { ColorPickerInputsHexAlpha };
+//# sourceMappingURL=color_picker_inputs_hex_alpha.js.map

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TInputProps } from "../../../../input/input_types";
+export declare const ColorPickerInputsHexInput: ({ id, name, value: initialValue, type, errors, disabled, className, preElement, readOnly, hasCursorPointer }: TInputProps) => React.JSX.Element;