@dreamcommerce/aurora 3.1.36-5 → 3.1.36

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

@@ -16,8 +16,46 @@ export interface IColorPickerColorVariables {
 }
 export interface IColorPickerColorVariablesType {
     primary: ColorPickerVariable;
+    primary10: ColorPickerVariable;
+    primary20: ColorPickerVariable;
+    primary50: ColorPickerVariable;
+    primary100: ColorPickerVariable;
+    primary200: ColorPickerVariable;
+    primary300: ColorPickerVariable;
+    primary400: ColorPickerVariable;
+    primary500: ColorPickerVariable;
+    primary600: ColorPickerVariable;
+    primary700: ColorPickerVariable;
+    primary800: ColorPickerVariable;
+    primary900: ColorPickerVariable;
     secondary: ColorPickerVariable;
+    secondary10: ColorPickerVariable;
+    secondary20: ColorPickerVariable;
+    secondary50: ColorPickerVariable;
+    secondary100: ColorPickerVariable;
+    secondary200: ColorPickerVariable;
+    secondary300: ColorPickerVariable;
+    secondary400: ColorPickerVariable;
+    secondary500: ColorPickerVariable;
+    secondary600: ColorPickerVariable;
+    secondary700: ColorPickerVariable;
+    secondary800: ColorPickerVariable;
+    secondary900: ColorPickerVariable;
     neutral: ColorPickerVariable;
+    neutral0: ColorPickerVariable;
+    neutral10: ColorPickerVariable;
+    neutral20: ColorPickerVariable;
+    neutral50: ColorPickerVariable;
+    neutral100: ColorPickerVariable;
+    neutral200: ColorPickerVariable;
+    neutral300: ColorPickerVariable;
+    neutral400: ColorPickerVariable;
+    neutral500: ColorPickerVariable;
+    neutral600: ColorPickerVariable;
+    neutral700: ColorPickerVariable;
+    neutral800: ColorPickerVariable;
+    neutral900: ColorPickerVariable;
+    neutral1000: ColorPickerVariable;
     font: ColorPickerVariable;
     background: ColorPickerVariable;
 }
@@ -37,7 +75,7 @@ export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 export interface IColorPickerContext {
     color: string;
-    setColor: (newColor: string, shadeName?: string, variableName?: string) => void;
+    setColor: (newColor: string, variableName?: string) => void;
     hex: string;
     hslArr: number[];
     handleOnChangeAlpha: (val: number) => void;
@@ -59,14 +97,11 @@ export interface IColorPickerContext {
     previousGradientColor?: string;
     isColorPickerOpened: boolean;
     setIsColorPickerOpened: (isOpened: boolean) => void;
-    typedInputValue: string;
-    setTypedInputValue: (newValue: string) => void;
-    isColorPickerCurrentlyUsed: boolean;
-    setIsColorPickerCurrentlyUsed: (isUsed: boolean) => void;
     degrees: number;
-    shadeName: string;
     onPickShade?: (shadeValue: string) => void;
     currentSelectedVariable?: string;
+    setInputRef: (input: HTMLInputElement) => void;
+    blurInput: () => void;
 }
 export declare type ColorPickerColorTypes = {
     hex: string;

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

@@ -7,14 +7,8 @@ export declare class ColorPickerUtils {
     static isGradient(color: string): boolean;
     static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
     static getHexValue: (colorSet: tinycolor.Instance) => string;
-    static getHexValueWithoutHash: (color: string) => string;
     static getHexValueString: (colorSet: tinycolor.Instance) => string;
     static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
-    static getVariableShades: ({ color, name }: {
-        color: ColorPickerColors;
-        name: string;
-    }) => ColorPickerVariable[];
-    private static convertVariableShadesToHex;
     static updateGradientWithActiveColor: (colors: GradientProps[], index: number, newColor: string) => GradientProps[];
     static findVariable: (variables: IColorPickerColorVariablesType | ColorPickerVariable[], color: string) => string | undefined;
     static findVariableByName: (variables: IColorPickerColorVariablesType | ColorPickerVariable[], name: string) => string | undefined;

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

@@ -1,4 +1,4 @@
-import { createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, classCallCheck as _classCallCheck } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, classCallCheck as _classCallCheck } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
 import { high, low } from '../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
 
@@ -35,9 +35,6 @@ _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));
 });
@@ -61,102 +58,6 @@ _defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
   };
   return _objectSpread2(_objectSpread2({}, allColorTypes), variableName && variableName);
 });
-_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');
-  var blackShade = [{
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 100,
-    name: "".concat(name, "s0")
-  }];
-  var whiteShade = [{
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 0,
-    name: "".concat(name, "s1000")
-  }];
-  var shades = [{
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 99,
-    name: "".concat(name, "s10")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 98,
-    name: "".concat(name, "s20")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 95,
-    name: "".concat(name, "s50")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 90,
-    name: "".concat(name, "s100")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 80,
-    name: "".concat(name, "s200")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 70,
-    name: "".concat(name, "s300")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 60,
-    name: "".concat(name, "s400")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 50,
-    name: "".concat(name, "s500")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 40,
-    name: "".concat(name, "s600")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 30,
-    name: "".concat(name, "s700")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 20,
-    name: "".concat(name, "s800")
-  }, {
-    h: colorHsl.h,
-    s: colorHsl.s,
-    l: 10,
-    name: "".concat(name, "s900")
-  }];
-  var result = [].concat(_toConsumableArray(isNeutral ? blackShade : []), shades, _toConsumableArray(isNeutral ? whiteShade : []));
-  return _ColorPickerUtils.convertVariableShadesToHex(result);
-});
-_defineProperty(ColorPickerUtils, "convertVariableShadesToHex", function (variables) {
-  return variables.map(function (variable) {
-    var colorTiny = _ColorPickerUtils.getTinyColorInstance({
-      h: variable.h,
-      s: variable.s,
-      l: variable.l
-    });
-    var colorHex = colorTiny.toHexString();
-    return {
-      name: variable.name,
-      value: colorHex
-    };
-  });
-});
 _defineProperty(ColorPickerUtils, "updateGradientWithActiveColor", function (colors, index, newColor) {
   return colors.map(function (c, i) {
     return _objectSpread2(_objectSpread2({}, c), {}, {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,sBAAsB,qDAAyD;AAC/E,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

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

@@ -10,8 +10,8 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
     value = _usePicker.value;
   var _useColorPicker = useColorPicker(),
     degrees = _useColorPicker.degrees;
-  var handleDegrees = function handleDegrees(e) {
-    var newValue = formatInputValues(e.target.value, 0, 360);
+  var handleDegrees = function handleDegrees(val) {
+    var newValue = formatInputValues(val, 0, 360);
     var remaining = value.split(/,(.+)/)[1];
     onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
   };
@@ -24,7 +24,7 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
   }, /*#__PURE__*/React__default.createElement("input", {
     value: degrees,
     onChange: function onChange(e) {
-      return handleDegrees(e);
+      return handleDegrees(Number(e.target.value));
     },
     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.createElement("div", {

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

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

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

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

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

@@ -7,39 +7,38 @@ 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 _ref2;
   var id = _ref.id,
     name = _ref.name,
     errors = _ref.errors,
     disabled = _ref.disabled,
     preElement = _ref.preElement;
   var _useColorPicker = useColorPicker(),
-    typedInputValue = _useColorPicker.typedInputValue,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
     colorVariables = _useColorPicker.colorVariables,
-    shadeName = _useColorPicker.shadeName,
     currentSelectedVariable = _useColorPicker.currentSelectedVariable;
   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) && currentSelectedVariable && ColorPickerUtils.findVariableByName(colorVariables.variables, currentSelectedVariable) || shadeName || '';
+  var variableName = (_ref2 = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && currentSelectedVariable && ColorPickerUtils.findVariableByName(colorVariables.variables, currentSelectedVariable)) !== null && _ref2 !== void 0 ? _ref2 : '';
   var colorName = undefined;
   if (isCurrentValueGradient) {
     colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
-  } else if (variableName && typedInputValueHasFullHexLength) {
+  } else if (variableName) {
     colorName = "".concat(t(variableName));
   }
   return /*#__PURE__*/React__default.createElement(ColorPickerInputsHexInput, {
     id: id,
     name: name,
-    value: colorName,
+    colorName: colorName,
     errors: errors,
     disabled: disabled,
     className: "aurora-cursor-pointer ".concat(colorName ? 'aurora-cursor-pointer' : ''),
     preElement: preElement,
     readOnly: !!colorName,
-    hasCursorPointer: !!colorName
+    hasCursorPointer: !!colorName,
+    primary: true
   });
 };
 

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

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

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

@@ -1,3 +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;
+export declare const ColorPickerInputsHexInput: ({ id, name, type, errors, disabled, className, preElement, colorName, primary }: TInputProps) => React.JSX.Element;

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

@@ -9,39 +9,32 @@ import { ColorPickerUtils } from '../../../color_picker_utils.js';
 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;
+    colorName = _ref.colorName,
+    primary = _ref.primary;
   var _useColorPicker = useColorPicker(),
     setColor = _useColorPicker.setColor,
-    setTypedInputValue = _useColorPicker.setTypedInputValue,
     hex = _useColorPicker.hex,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
-    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+    setInputRef = _useColorPicker.setInputRef;
   var _useState = useState(hex),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
   var valueRef = useRef(value);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isDisabled = _useState4[0],
-    setIsDisabled = _useState4[1];
-  var inputRef = useRef(null);
+  var isDisabledRef = useRef(false);
   var _usePicker = usePicker(),
     colors = _usePicker.colors,
     selectedColor = _usePicker.selectedColor,
     createGradientStr = _usePicker.createGradientStr;
   var handleOnChange = function handleOnChange(event) {
     var inputValue = event.target.value.replace('%', '');
-    setTypedInputValue(inputValue);
     setValue(inputValue);
     valueRef.current = inputValue;
     if (!tinycolor(inputValue).isValid()) return;
@@ -53,25 +46,20 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     }
   };
   var hexFocus = function hexFocus() {
-    setIsDisabled(true);
+    isDisabledRef.current = true;
   };
   var hexBlur = function hexBlur() {
-    setIsDisabled(false);
+    isDisabledRef.current = false;
   };
-  useEffect(function () {
-    if (isColorPickerCurrentlyUsed && inputRef.current) {
-      inputRef.current.blur();
-    }
-  }, [isColorPickerCurrentlyUsed]);
   useEffect(function () {
     if (hex === valueRef.current) return;
-    if (!isDisabled) {
+    if (!isDisabledRef.current) {
       setValue(hex);
       valueRef.current = hex;
     }
-  }, [hex, isDisabled]);
+  }, [hex]);
   return /*#__PURE__*/React__default.createElement(Input, {
-    ref: inputRef,
+    ref: primary ? setInputRef : undefined,
     className: className,
     type: type,
     preElement: preElement,
@@ -80,12 +68,12 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
     errors: errors,
     disabled: disabled,
     maxLength: 8,
-    value: initialValue || value.toUpperCase(),
+    value: colorName || value.toUpperCase(),
     onChange: handleOnChange,
     onBlur: hexBlur,
     onFocus: hexFocus,
-    readOnly: readOnly,
-    hasCursorPointer: hasCursorPointer
+    readOnly: !!colorName,
+    hasCursorPointer: !!colorName
   });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,6 +1,6 @@
 import React__default, { useState } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
 import { cn } from '../../../utilities/cn.js';
 import { Typography } from '../../typography/typography.js';
@@ -24,22 +24,11 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  var primary = variables.primary,
-    secondary = variables.secondary,
-    neutral = variables.neutral;
-  var primaryShades = ColorPickerUtils.getVariableShades({
-    color: primary.value,
-    name: primary.name
-  });
-  var secondaryShades = ColorPickerUtils.getVariableShades({
-    color: secondary.value,
-    name: secondary.name
-  });
-  var neutralShades = ColorPickerUtils.getVariableShades({
-    color: neutral.value,
-    name: neutral.name
-  });
-  var allShades = [].concat(_toConsumableArray(primaryShades), _toConsumableArray(secondaryShades), _toConsumableArray(neutralShades));
+  var primaryShades = [variables.primary10, variables.primary20, variables.primary50, variables.primary100, variables.primary200, variables.primary300, variables.primary400, variables.primary500, variables.primary600, variables.primary700, variables.primary800, variables.primary900];
+  var secondaryShades = [variables.secondary10, variables.secondary20, variables.secondary50, variables.secondary100, variables.secondary200, variables.secondary300, variables.secondary400, variables.secondary500, variables.secondary600, variables.secondary700, variables.secondary800, variables.secondary900];
+  var neutralShades = [variables.neutral0, variables.neutral10, variables.neutral20, variables.neutral50, variables.neutral100, variables.neutral200, variables.neutral300, variables.neutral400, variables.neutral500, variables.neutral600, variables.neutral700, variables.neutral800, variables.neutral900, variables.neutral1000];
+  var primaryVariables = [variables.primary, variables.secondary, variables.neutral, variables.font, variables.background];
+  var allShades = [].concat(primaryShades, secondaryShades, neutralShades);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-mt-3.5"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -55,11 +44,11 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     className: cn('aurora-h-full aurora-w-full', isOpen && 'aurora-rotate-180')
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
-  }, Object.values(variables).map(function (variable, index) {
+  }, Object.values(primaryVariables).map(function (variable, index) {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor(colorHex, '', variable.name);
+      return setColor(colorHex, variable.name);
     };
     return /*#__PURE__*/React__default.createElement(TooltipProvider, {
       key: "".concat(variable, "-").concat(index)
@@ -94,7 +83,8 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       onClick: handleOnClick,
       color: colorHex,
       cssColor: ColorPickerUtils.getHexValueString(colorTiny),
-      hasActiveBorder: true
+      hasActiveBorder: true,
+      variableName: variable.name
     })), /*#__PURE__*/React__default.createElement(TooltipContent, {
       variant: "dark"
     }, /*#__PURE__*/React__default.createElement(Typography, {

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/hooks/setup_color_picker.d.ts

@@ -12,7 +12,7 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
     color: string;
     previousSolidColor: string;
     previousGradientColor: string;
-    setColor: (newColor: string, shadeName?: string, variableName?: string) => void;
+    setColor: (newColor: string, variableName?: string) => void;
     hex: string;
     hslArr: number[];
     handleOnChangeAlpha: (value: number) => void;
@@ -32,12 +32,9 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
     withGradient: boolean;
     isColorPickerOpened: boolean;
     setIsColorPickerOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    typedInputValue: string;
-    setTypedInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
-    isColorPickerCurrentlyUsed: boolean;
-    setIsColorPickerCurrentlyUsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     degrees: number;
-    shadeName: string;
     currentSelectedVariable: string | undefined;
+    setInputRef: (input: HTMLInputElement) => void;
+    blurInput: () => void;
 };
 export default useSetupColorPicker;