@dreamcommerce/aurora 3.1.36-5 → 3.1.36-7

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;

package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useMemo, useRef, useState, useCallback } from 'react';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_ALPHA_MAX_VALUE } from '../color_picker_constants.js';
 import { getDetails } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
@@ -16,7 +16,6 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     isWithGradient = _ref$withGradient === void 0 ? false : _ref$withGradient;
   var colorValue = ColorPickerUtils.normalizeLinearGradient(value || COLOR_PICKER_INITIAL_STATE);
   var currentSelectedVariable = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.selectedVariable;
-  var colorValueRef = useRef(colorValue);
   var savedColorRef = useRef({
     value: colorValue,
     name: currentSelectedVariable || ''
@@ -34,26 +33,13 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isColorPickerOpened = _useState6[0],
     setIsColorPickerOpened = _useState6[1];
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    shadeName = _useState8[0],
-    setShadeName = _useState8[1];
-  var _useState9 = useState(ColorPickerUtils.getHexValueWithoutHash(colorValue)),
-    _useState10 = _slicedToArray(_useState9, 2),
-    typedInputValue = _useState10[0],
-    setTypedInputValue = _useState10[1];
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isColorPickerCurrentlyUsed = _useState12[0],
-    setIsColorPickerCurrentlyUsed = _useState12[1];
   var _getDetails = getDetails(colorValue),
     degrees = _getDetails.degrees;
   var savedDegRef = useRef(isNaN(degrees) ? 180 : degrees);
+  var inputRef = useRef(null);
   var variables = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables;
   var setColor = useCallback(function (newColor) {
-    var shadeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    var variableName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-    setShadeName(shadeName);
+    var variableName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     !ColorPickerUtils.isGradient(colorValue) ? setPreviousSolidColor(colorValue) : setPreviousGradientColor(colorValue);
     var isGradient = ColorPickerUtils.isGradient(newColor);
     var newColorVar = {
@@ -66,16 +52,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
       savedDegRef.current = Number(colorDegrees[2]);
     }
     var hexString = isGradient ? newColor : colorObject.hexString;
-    colorValueRef.current = hexString;
     onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread2(_objectSpread2({}, colorObject), {}, {
       hexString: hexString
     }));
-  }, [colorValue, variables, onChange]);
-  useEffect(function () {
-    if (colorValue === colorValueRef.current) return;
-    colorValueRef.current = colorValue;
-    setShadeName('');
-  }, [colorValue]);
+  }, [colorValue, onChange]);
   var _useBestGradientColor = useColorPicker(colorValue, setColor),
     hslArr = _useBestGradientColor.hslArr,
     rgbaArr = _useBestGradientColor.rgbaArr,
@@ -88,31 +68,31 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
   var tinyColor = ColorPickerUtils.getTinyColorInstance(colorValue);
   var hex = ColorPickerUtils.getHexValue(tinyColor);
   var alpha = rgbaArr[3] * 100;
-  var setSolid = function setSolid(value) {
+  var setSolid = useCallback(function (value) {
     setColor(value || COLOR_PICKER_INITIAL_STATE);
-  };
-  var setLinear = function setLinear(value) {
+  }, [setColor]);
+  var setLinear = useCallback(function (value) {
     var gradientColor = value || defaultGradient;
     var remaining = gradientColor.split(/,(.+)/)[1];
     setColor("linear-gradient(".concat(savedDegRef.current + 'deg', ", ").concat(remaining));
-  };
-  var setRadial = function setRadial(value) {
+  }, [setColor]);
+  var setRadial = useCallback(function (value) {
     var gradientColor = value || defaultGradient;
     var remaining = gradientColor.split(/,(.+)/)[1];
     setColor("radial-gradient(circle, ".concat(remaining));
-  };
-  var handleOnChangeAlpha = function handleOnChangeAlpha(value) {
+  }, [setColor]);
+  var handleOnChangeAlpha = useCallback(function (value) {
     var val = Math.min(value, COLOR_PICKER_ALPHA_MAX_VALUE);
     setA(val);
-  };
-  var handleCancel = function handleCancel() {
+  }, [setA]);
+  var handleCancel = useCallback(function () {
     var _savedColorRef$curren = savedColorRef.current,
       value = _savedColorRef$curren.value,
       name = _savedColorRef$curren.name;
-    setColor(value, '', name || '');
+    setColor(value, name || '');
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-  };
-  var handleSave = function handleSave() {
+  }, [onCancel, setColor]);
+  var handleSave = useCallback(function () {
     var newColorVar = {
       value: colorValue,
       name: variables && ColorPickerUtils.findVariable(variables, colorValue) || currentSelectedVariable || ''
@@ -122,39 +102,45 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
       name: newColorVar.name
     };
     onSave === null || onSave === void 0 ? void 0 : onSave(ColorPickerUtils.getAllColorTypes(newColorVar));
-  };
-  return {
-    color: colorValue,
-    previousSolidColor: previousSolidColor,
-    previousGradientColor: previousGradientColor,
-    setColor: setColor,
-    hex: hex,
-    hslArr: hslArr,
-    handleOnChangeAlpha: handleOnChangeAlpha,
-    alpha: alpha,
-    rgbaArr: rgbaArr,
-    setR: setR,
-    setG: setG,
-    setB: setB,
-    handleCancel: handleCancel,
-    handleSave: handleSave,
-    colorVariables: colorVariables,
-    isCurrentValueGradient: isGradient,
-    setSolid: setSolid,
-    setRadial: setRadial,
-    setLinear: setLinear,
-    gradientType: gradientType,
-    withGradient: withGradient,
-    isColorPickerOpened: isColorPickerOpened,
-    setIsColorPickerOpened: setIsColorPickerOpened,
-    typedInputValue: typedInputValue,
-    setTypedInputValue: setTypedInputValue,
-    isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
-    setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
-    degrees: degrees,
-    shadeName: shadeName,
-    currentSelectedVariable: currentSelectedVariable
-  };
+  }, [colorValue, currentSelectedVariable, onSave, variables]);
+  var setInputRef = useCallback(function (input) {
+    inputRef.current = input;
+  }, []);
+  var blurInput = useCallback(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+  }, []);
+  return useMemo(function () {
+    return {
+      color: colorValue,
+      previousSolidColor: previousSolidColor,
+      previousGradientColor: previousGradientColor,
+      setColor: setColor,
+      hex: hex,
+      hslArr: hslArr,
+      handleOnChangeAlpha: handleOnChangeAlpha,
+      alpha: alpha,
+      rgbaArr: rgbaArr,
+      setR: setR,
+      setG: setG,
+      setB: setB,
+      handleCancel: handleCancel,
+      handleSave: handleSave,
+      colorVariables: colorVariables,
+      isCurrentValueGradient: isGradient,
+      setSolid: setSolid,
+      setRadial: setRadial,
+      setLinear: setLinear,
+      gradientType: gradientType,
+      withGradient: withGradient,
+      isColorPickerOpened: isColorPickerOpened,
+      setIsColorPickerOpened: setIsColorPickerOpened,
+      degrees: degrees,
+      currentSelectedVariable: currentSelectedVariable,
+      setInputRef: setInputRef,
+      blurInput: blurInput
+    };
+  }, [alpha, colorValue, colorVariables, currentSelectedVariable, degrees, gradientType, handleCancel, handleOnChangeAlpha, handleSave, hex, hslArr, isColorPickerOpened, isGradient, previousGradientColor, previousSolidColor, rgbaArr, setB, setColor, setG, setLinear, setR, setRadial, setSolid, withGradient, setInputRef, blurInput]);
 };
 
 export default useSetupColorPicker;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controls/date_and_time_picker_control/date_time_picker_control.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TDateTimePickerControlProps } from './date_time_picker_control_types';
+export declare const DateTimePickerControl: React.FC<TDateTimePickerControlProps>;