@dreamcommerce/aurora 3.0.0-99 → 3.0.0

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_icon_color_tokens = require('../../constants/css_tokens/css_icon_color_tokens.js');
+var stack = require('../stack/stack.js');
+var breadcrumb_child = require('./breadcrumb_child.js');
+var arrow_right_s_line_icon = require('../../assets/icons/arrow_right_s_line_icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["classname", "as", "children", "separator", "withoutSeparator"];
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var classname = _ref.classname,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'nav' : _ref$as,
+    children = _ref.children,
+    separator = _ref.separator,
+    _ref$withoutSeparator = _ref.withoutSeparator,
+    withoutSeparator = _ref$withoutSeparator === void 0 ? false : _ref$withoutSeparator,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var breadcrumbRef = React.useRef(null);
+  var allItems = React__default['default'].Children.toArray(children).map(function (child, index) {
+    return /*#__PURE__*/React__default['default'].createElement(breadcrumb_child.BreadcrumbChild, {
+      "data-test-breadcrumb-index": index,
+      key: "child-".concat(index)
+    }, child);
+  });
+  return /*#__PURE__*/React__default['default'].createElement(as, {
+    className: classname
+  }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, _rollupPluginBabelHelpers.objectSpread2({
+    ref: breadcrumbRef,
+    "aria-label": "breadcrumbs",
+    align: "center",
+    as: "ol",
+    spacing: "1",
+    className: 'aurora-m-0 aurora-p-0 aurora-list-none'
+  }, rest), withoutSeparator ? allItems : allItems.map(function (item, index) {
+    if (index === allItems.length - 1) return item;
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
+      key: index
+    }, item, /*#__PURE__*/React__default['default'].createElement("li", {
+      "aria-hidden": "true",
+      className: "-aurora-mx-0.5 aurora-shrink-0"
+    }, separator ? separator : /*#__PURE__*/React__default['default'].createElement(arrow_right_s_line_icon.ArrowRightSLineIcon, {
+      size: 16,
+      color: css_icon_color_tokens.CSS_ICON_COLOR_TOKENS_VALUES.subtle
+    })));
+  })));
+};
+
+exports.Breadcrumbs = Breadcrumbs;
+exports.default = Breadcrumbs;
+//# sourceMappingURL=breadcrumbs.js.map

package/build/cjs/packages/aurora/src/components/button/button_variants.js

@@ -6,9 +6,9 @@ var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBa
 var index = require('../../../../../external/class-variance-authority/dist/index.mjs.js');
 var button_constants = require('./button_constants.js');
 
-var buttonVariants = index.cva('aurora-inline-flex aurora-items-center aurora-justify-center aurora-font-semibold aurora-gap-2 aurora-whitespace-nowrap aurora-rounded-full aurora-text-s aurora-transition-colors aurora-border focus disabled:aurora-pointer-events-none disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle', {
+var buttonVariants = index.cva('aurora-inline-flex aurora-items-center aurora-justify-center aurora-font-semibold aurora-gap-2 aurora-whitespace-nowrap aurora-rounded-full aurora-text aurora-text-s aurora-transition-colors aurora-border focus disabled:aurora-pointer-events-none disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle', {
   variants: {
-    variant: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, button_constants.BUTTON_VARIANTS.primary, 'aurora-bg-primary aurora-border-primary aurora-text-inverse hover:aurora-border-primary-hover hover:aurora-bg-primary-hover focus-visible:aurora-bg-primary-active focus-visible:aurora-border-primary-hover'), button_constants.BUTTON_VARIANTS.secondary, 'aurora-bg aurora-border hover:aurora-bg-hover hover:aurora-border-strong focus-visible:aurora-bg-active focus-visible:aurora-border-strong'), button_constants.BUTTON_VARIANTS.destructive, 'aurora-bg-danger aurora-border-danger aurora-text-inverse hover:aurora-bg-danger-hover hover:aurora-border-danger-hover focus-visible:aurora-bg-danger-active focus-visible:aurora-border-danger-hover'), button_constants.BUTTON_VARIANTS.destructiveSecondary, 'aurora-border-danger aurora-text-danger hover:aurora-bg-danger-subtle hover:aurora-border-danger-hover hover:aurora-text-danger-hover focus-visible:aurora-bg-danger-subtle-active focus-visible:aurora-border-danger-hover focus-visible:aurora-text-danger-hover'), button_constants.BUTTON_VARIANTS.dark, 'aurora-bg-inverse aurora-border-inverse aurora-text-inverse hover:aurora-bg-inverse-hover hover:aurora-border-inverse-hover focus-visible:aurora-bg-inverse-active focus-visible:aurora-border-inverse-hover'), button_constants.BUTTON_VARIANTS.ghost, 'aurora-bg-subtle aurora-border-subtle hover:aurora-border-strong focus-visible:aurora-bg-active focus-visible:aurora-border-strong'), button_constants.BUTTON_VARIANTS.link, 'aurora-text-interactive aurora-border-none aurora-bg-transparent hover:aurora-text-interactive-hover hover:aurora-underline disabled:aurora-bg-transparent focus-visible:aurora-text-interactive-active'),
+    variant: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, button_constants.BUTTON_VARIANTS.primary, 'aurora-bg-primary aurora-border-primary aurora-text-inverse hover:aurora-border-primary-hover hover:aurora-bg-primary-hover focus-visible:aurora-bg-primary-active focus-visible:aurora-border-primary-hover'), button_constants.BUTTON_VARIANTS.secondary, 'aurora-bg aurora-border hover:aurora-bg-hover hover:aurora-border-strong focus-visible:aurora-bg-active focus-visible:aurora-border-strong'), button_constants.BUTTON_VARIANTS.destructive, 'aurora-bg-danger aurora-border-danger aurora-text-inverse hover:aurora-bg-danger-hover hover:aurora-border-danger-hover focus-visible:aurora-bg-danger-active focus-visible:aurora-border-danger-hover'), button_constants.BUTTON_VARIANTS.destructiveSecondary, 'aurora-border-danger aurora-text-danger hover:aurora-bg-danger-subtle hover:aurora-border-danger-hover hover:aurora-text-danger-hover focus-visible:aurora-bg-danger-subtle-active focus-visible:aurora-border-danger-hover focus-visible:aurora-text-danger-hover'), button_constants.BUTTON_VARIANTS.dark, 'aurora-bg-inverse aurora-border-inverse aurora-text-inverse hover:aurora-bg-inverse-hover hover:aurora-border-inverse-hover focus-visible:aurora-bg-inverse-active focus-visible:aurora-border-inverse-hover'), button_constants.BUTTON_VARIANTS.ghost, 'aurora-bg-subtle aurora-border-subtle hover:aurora-border-strong focus-visible:aurora-bg-active focus-visible:aurora-border-strong'), button_constants.BUTTON_VARIANTS.link, 'aurora-text-interactive aurora-fill-primary aurora-border-none aurora-bg-transparent hover:aurora-fill-primary-strong hover:aurora-text-interactive-hover hover:aurora-underline disabled:aurora-bg-transparent focus-visible:aurora-text-interactive-active'),
     size: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, button_constants.BUTTON_SIZES.default, 'aurora-h-[40px]'), button_constants.BUTTON_SIZES.s, 'aurora-h-[32px]')
   },
   compoundVariants: [{

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

@@ -25,8 +25,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: id,
     name: name,
     ref: ref,
-    className: cn.cn('aurora-peer aurora-h-5 aurora-w-5 aurora-shrink-0 aurora-rounded-4 aurora-bg-neutral-0 aurora-border hover:aurora-border-strong focus data-[state=checked]:aurora-bg-primary', {
-      'aurora-border-danger aurora-border-2': errors && errors.length > 0,
+    className: cn.cn('aurora-shrink-0 aurora-rounded-4 aurora-h-[20px] aurora-w-[20px] aurora-transition-all aurora-bg hover:aurora-border-strong focus data-[state=unchecked]:aurora-border data-[state=checked]:aurora-bg-primary not-disabled:data-[state=checked]:aurora-border-primary', {
+      'aurora-border-danger aurora-border-2': !!(errors !== null && errors !== void 0 && errors.length),
       'disabled:aurora-cursor-not-allowed': disabled,
       '!aurora-bg-active': disabled && checked
     }, className),
@@ -36,7 +36,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultChecked: defaultChecked,
     onCheckedChange: onCheckedChange
   }, props), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
-    className: cn.cn('aurora-flex aurora-items-center aurora-justify-center aurora-text-current')
+    className: cn.cn('aurora-rounded-4 aurora-flex aurora-items-center aurora-justify-center aurora-w-full aurora-h-full')
   }, /*#__PURE__*/React.createElement(check_icon.CheckLineIcon, {
     className: cn.cn('aurora-w-3.5 aurora-h-3.5 aurora-fill-inverse', {
       'aurora-fill-inverse-disabled': disabled && checked

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

@@ -3,28 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var color_picker_context = require('./color_picker_context.js');
 var pure_color_picker = require('./components/pure_color_picker.js');
-var setup_color_piceker = require('./hooks/setup_color_piceker.js');
+var setup_color_picker = require('./hooks/setup_color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _excluded = ["id", "name", "value", "colorVariables", "errors", "onChange", "onCancel", "onSave", "withGradient", "disabled"];
 var ColorPicker = function ColorPicker(_ref) {
   var id = _ref.id,
     name = _ref.name,
-    initialColor = _ref.initialColor,
+    value = _ref.value,
     colorVariables = _ref.colorVariables,
     errors = _ref.errors,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
     onSave = _ref.onSave,
     isWithGradient = _ref.withGradient,
-    disabled = _ref.disabled;
-  var _useSetupColorPicker = setup_color_piceker['default']({
+    disabled = _ref.disabled,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useSetupColorPicker = setup_color_picker['default']({
       colorVariables: colorVariables,
-      initialColor: initialColor,
+      value: value,
       onChange: onChange,
       onCancel: onCancel,
       onSave: onSave,
@@ -35,7 +38,7 @@ var ColorPicker = function ColorPicker(_ref) {
     hex = _useSetupColorPicker.hex,
     hslArr = _useSetupColorPicker.hslArr,
     handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
-    alphaValue = _useSetupColorPicker.alphaValue,
+    alpha = _useSetupColorPicker.alpha,
     rgbaArr = _useSetupColorPicker.rgbaArr,
     setR = _useSetupColorPicker.setR,
     setG = _useSetupColorPicker.setG,
@@ -51,15 +54,21 @@ var ColorPicker = function ColorPicker(_ref) {
     setSolid = _useSetupColorPicker.setSolid,
     withGradient = _useSetupColorPicker.withGradient,
     isColorPickerOpened = _useSetupColorPicker.isColorPickerOpened,
-    setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened;
-  var value = React.useMemo(function () {
+    setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened,
+    typedInputValue = _useSetupColorPicker.typedInputValue,
+    setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
+    isColorPickerCurrentlyUsed = _useSetupColorPicker.isColorPickerCurrentlyUsed,
+    setIsColorPickerCurrentlyUsed = _useSetupColorPicker.setIsColorPickerCurrentlyUsed,
+    degrees = _useSetupColorPicker.degrees,
+    shadeName = _useSetupColorPicker.shadeName;
+  var contextVal = React.useMemo(function () {
     return {
       color: color,
       setColor: setColor,
       hex: hex,
       hslArr: hslArr,
       handleOnChangeAlpha: handleOnChangeAlpha,
-      alphaValue: alphaValue,
+      alpha: alpha,
       rgbaArr: rgbaArr,
       setR: setR,
       setG: setG,
@@ -76,18 +85,23 @@ var ColorPicker = function ColorPicker(_ref) {
       previousGradientColor: previousGradientColor,
       withGradient: withGradient,
       isColorPickerOpened: isColorPickerOpened,
-      setIsColorPickerOpened: setIsColorPickerOpened
+      setIsColorPickerOpened: setIsColorPickerOpened,
+      typedInputValue: typedInputValue,
+      setTypedInputValue: setTypedInputValue,
+      isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
+      setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
+      degrees: degrees,
+      shadeName: shadeName
     };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened]);
+  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName]);
   return /*#__PURE__*/React__default['default'].createElement(color_picker_context.ColorPickerContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], {
+    value: contextVal
+  }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
-    colorVariables: colorVariables,
     errors: errors,
     disabled: disabled
-  }));
+  }, rest)));
 };
 
 exports.ColorPicker = ColorPicker;

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

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

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var COLOR_PICKER_INITIAL_STATE = '#FFFFFF';
-var COLOR_PICKER_WIDTH = 247;
+var COLOR_PICKER_WIDTH = 232;
+var COLOR_PICKER_PADDING_LEFT = 8;
 var COLOR_PICKER_HEIGHT = 200;
+var COLOR_PICKER_CONTENT_MAX_HEIGHT = {
+  color: 305,
+  gradient: 245
+};
 var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
 var COLOR_PICKER_TYPES = {
   HEX: 'hex',
@@ -18,17 +23,14 @@ var GRADIENT_TYPES = {
   linear: 'linear-gradient',
   radial: 'radial-gradient'
 };
-var GRADIENT_RADIAL_SHAPES = {
-  circle: 'circle',
-  ellipse: 'ellipse'
-};
 
 exports.COLOR_PICKER_ALPHA_MAX_VALUE = COLOR_PICKER_ALPHA_MAX_VALUE;
+exports.COLOR_PICKER_CONTENT_MAX_HEIGHT = COLOR_PICKER_CONTENT_MAX_HEIGHT;
 exports.COLOR_PICKER_HEIGHT = COLOR_PICKER_HEIGHT;
 exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
+exports.COLOR_PICKER_PADDING_LEFT = COLOR_PICKER_PADDING_LEFT;
 exports.COLOR_PICKER_SWATCH_SIZES = COLOR_PICKER_SWATCH_SIZES;
 exports.COLOR_PICKER_TYPES = COLOR_PICKER_TYPES;
 exports.COLOR_PICKER_WIDTH = COLOR_PICKER_WIDTH;
-exports.GRADIENT_RADIAL_SHAPES = GRADIENT_RADIAL_SHAPES;
 exports.GRADIENT_TYPES = GRADIENT_TYPES;
 //# sourceMappingURL=color_picker_constants.js.map

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

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

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

@@ -4,30 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-var ColorPickerContext = /*#__PURE__*/React.createContext({
-  color: {
-    value: '',
-    name: ''
-  },
-  setColor: function setColor() {},
-  hex: '',
-  hslArr: [],
-  handleOnChangeAlpha: function handleOnChangeAlpha() {},
-  alphaValue: '',
-  rgbaArr: [],
-  setR: function setR() {},
-  setG: function setG() {},
-  setB: function setB() {},
-  handleCancel: function handleCancel() {},
-  handleSave: function handleSave() {},
-  setSolid: function setSolid() {},
-  setRadial: function setRadial() {},
-  setLinear: function setLinear() {},
-  isCurrentValueGradient: false,
-  withGradient: false,
-  isColorPickerOpened: false,
-  setIsColorPickerOpened: function setIsColorPickerOpened() {}
-});
+var ColorPickerContext = /*#__PURE__*/React.createContext(null);
 
 exports.ColorPickerContext = ColorPickerContext;
 //# sourceMappingURL=color_picker_context.js.map

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

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

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var color_picker_constants = require('./color_picker_constants.js');
 var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
+var formatters = require('../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js');
 
 var _ColorPickerUtils;
 var ColorPickerUtils = /*#__PURE__*/function () {
@@ -14,25 +14,17 @@ var ColorPickerUtils = /*#__PURE__*/function () {
   return _rollupPluginBabelHelpers.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 === color_picker_constants.GRADIENT_TYPES.radial ? undefined : parseFloat((_gradient$degrees = gradient.degrees) !== null && _gradient$degrees !== void 0 ? _gradient$degrees : '90deg'),
-        radialShape: gradient.gradientType === color_picker_constants.GRADIENT_TYPES.radial ? color_picker_constants.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();
+      }
     }
   }]);
 }();
@@ -40,22 +32,6 @@ _ColorPickerUtils = ColorPickerUtils;
 _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
   return tinycolor['default'](color);
 });
-_rollupPluginBabelHelpers.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_constants.COLOR_PICKER_INITIAL_STATE,
-    name: ''
-  };
-  var parsedColorValue = initialColorValue ? _ColorPickerUtils.getTinyColorInstance(initialColorValue).toHex8() : color_picker_constants.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 : ''
-  };
-});
 _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
   return colorSet.toRgb();
 });
@@ -63,15 +39,14 @@ _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));
 });
-_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "isHexChar", function (value) {
-  var hexRegEx = /^$|[0-9a-fA-F]+$/;
-  return hexRegEx.test(value);
-});
 _rollupPluginBabelHelpers.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);
@@ -90,9 +65,9 @@ _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getAllColorTypes", f
   };
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, allColorTypes), variableName && variableName);
 });
-_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getVariableShades", function (_ref2) {
-  var color = _ref2.color,
-    name = _ref2.name;
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getVariableShades", function (_ref) {
+  var color = _ref.color,
+    name = _ref.name;
   var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
   var colorHsl = colorTiny.toHsl();
   var isNeutral = name.includes('neutral');
@@ -186,6 +161,36 @@ _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "convertVariableShade
     };
   });
 });
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "updateGradientWithActiveColor", function (colors, index, newColor) {
+  return colors.map(function (c, i) {
+    return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, c), {}, {
+      value: i === index ? formatters.high(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, c), {}, {
+        value: tinycolor['default'](newColor).toRgbString()
+      })) : formatters.low(c)
+    });
+  });
+});
+_rollupPluginBabelHelpers.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;
+});
+_rollupPluginBabelHelpers.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;
+});
 
 exports.ColorPickerUtils = ColorPickerUtils;
 //# sourceMappingURL=color_picker_utils.js.map

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;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+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_footer = require('./color_picker_footer.js');
-var color_picker_header = require('./color_picker_header.js');
-var color_picker_impl = require('./color_picker_impl/color_picker_impl.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');
+var color_picker_impl = require('./color_picker_impl.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,21 +18,31 @@ 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 colorValue = typeof color === 'string' ? color : color.value;
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(color_picker_header.ColorPickerHeader, null), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x"
-  }, /*#__PURE__*/React__default['default'].createElement(color_picker_impl.ColorPickerImpl, {
-    value: colorValue,
-    onChange: setColor,
-    width: color_picker_constants.COLOR_PICKER_WIDTH,
-    height: color_picker_constants.COLOR_PICKER_HEIGHT
-  }), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? /*#__PURE__*/React__default['default'].createElement(color_picker_variables.ColorPickerVariables, {
+  var defaultStyles = styles.getStyles(true);
+  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",
+    style: {
+      width: color_picker_constants.COLOR_PICKER_WIDTH + color_picker_constants.COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: color_picker_constants.COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_controls.ColorPickerControls, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-overflow-y-scroll aurora-overflow-x-visible custom-scrollbar aurora-pr-0.5",
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.body), {}, {
+      maxHeight: isCurrentValueGradient ? color_picker_constants.COLOR_PICKER_CONTENT_MAX_HEIGHT.gradient : color_picker_constants.COLOR_PICKER_CONTENT_MAX_HEIGHT.color
+    })
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-pl-2",
+    style: {
+      width: color_picker_constants.COLOR_PICKER_WIDTH + color_picker_constants.COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: color_picker_constants.COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__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;AACA;AACA;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_picker_controls.js

@@ -4,6 +4,7 @@ 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 stack = require('../../stack/stack.js');
 var typography = require('../../typography/typography.js');
 var tooltip = require('../../tooltip/tooltip.js');
@@ -15,9 +16,9 @@ var use_color_picker = require('../hooks/use_color_picker.js');
 var context = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
 var color_picker_gradient_angle = require('./color_picker_gradient_controls/color_picker_gradient_angle.js');
 var color_picker_mode_toggler = require('./color_picker_mode_toggler.js');
-var EyeDropper = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js');
-var GradientBar = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientBar.js');
-var GradientControls = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js');
+var color_picker_gradient_bar = require('./color_picker_overrides/color_picker_gradient_bar.js');
+var color_picker_eye_dropper = require('./color_picker_overrides/color_picker_eye_dropper.js');
+var color_picker_gradient_controls = require('./color_picker_overrides/color_picker_gradient_controls.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,28 +34,33 @@ var ColorPickerControls = function ColorPickerControls() {
     gradientType = _useColorPicker.gradientType,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
   var isLinearGradient = gradientType === color_picker_constants.GRADIENT_TYPES.linear;
+  var EyeDropperAvailable = typeof window['EyeDropper'] !== 'undefined';
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     justify: withGradient ? 'between' : 'end'
   }, withGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     spacing: "8"
-  }, /*#__PURE__*/React__default['default'].createElement(color_picker_mode_toggler.ColorPickerModeToggler, null))) : null, /*#__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(EyeDropper['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_mode_toggler.ColorPickerModeToggler, null))) : null, EyeDropperAvailable && (/*#__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(color_picker_eye_dropper.EyeDropper, {
     onSelect: handleChange
   })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
     size: "xs",
-    weight: "medium"
-  }, "".concat(t('Sample color'))))))), withGradient && isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    weight: "medium",
+    color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
+  }, "".concat(t('Sample color')))))))), withGradient && isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     justify: isLinearGradient ? 'between' : 'end'
-  }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLinearGradient ? /*#__PURE__*/React__default['default'].createElement(color_picker_gradient_angle.ColorPickerGradientAngle, null) : null, /*#__PURE__*/React__default['default'].createElement(GradientControls['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLinearGradient ? /*#__PURE__*/React__default['default'].createElement(color_picker_gradient_angle.ColorPickerGradientAngle, null) : null, /*#__PURE__*/React__default['default'].createElement(color_picker_gradient_controls.GradientControls, {
     hideGradientType: true,
     hideGradientAngle: true,
     hideGradientStop: true
-  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.Stack, null, /*#__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(GradientBar['default'], null)), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
+  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.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__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(color_picker_gradient_bar.GradientBar, null)), /*#__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('Add color')))))))) : null);
 };
 

package/build/cjs/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;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,iFAAqF;AAC3G;AACA;AACA,yBAAyB,+FAAmG;AAC5H,0BAA0B,gGAAoG;AAC9H,+BAA+B,qGAAyG;AACxI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,iFAAqF;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_footer.js

@@ -6,8 +6,6 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var button = require('../../button/button.js');
-var color_picker_context = require('../color_picker_context.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,12 +13,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerFooter = function ColorPickerFooter() {
-  var _useContext = React.useContext(color_picker_context.ColorPickerContext),
-    setIsColorPickerOpened = _useContext.setIsColorPickerOpened;
   var _useColorPicker = use_color_picker.useColorPicker(),
-    color = _useColorPicker.color,
     handleCancel = _useColorPicker.handleCancel,
-    handleSave = _useColorPicker.handleSave;
+    handleSave = _useColorPicker.handleSave,
+    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
   var _useTranslation = useTranslation.useTranslation(),
     _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
@@ -30,22 +26,23 @@ var ColorPickerFooter = function ColorPickerFooter() {
   };
   var handleSaveButton = function handleSaveButton() {
     setIsColorPickerOpened(false);
-    handleSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(color));
+    handleSave();
   };
   return /*#__PURE__*/React__default['default'].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__default['default'].createElement(button.Button, {
-    className: "aurora-capitalize aurora-flex-1",
+    className: "aurora-flex-1",
     variant: "secondary",
     size: "s",
     type: "button",
     onClick: handleCancelButton
-  }, "".concat(t('cancel'))), /*#__PURE__*/React__default['default'].createElement(button.Button, {
-    className: "aurora-capitalize aurora-flex-1",
+  }, "".concat(t('Cancel'))), /*#__PURE__*/React__default['default'].createElement(button.Button, {
+    className: "aurora-flex-1",
     type: "button",
     size: "s",
+    autoFocus: true,
     onClick: handleSaveButton
-  }, "".concat(t('choose'))));
+  }, "".concat(t('Choose'))));
 };
 
 exports.ColorPickerFooter = ColorPickerFooter;