@dreamcommerce/aurora 3.0.0-287 → 3.0.0-289

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

@@ -17,73 +17,95 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ValuesSyncer = function ValuesSyncer(_ref) {
   var firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
-    initialFirstValue = _ref.initialFirstValue,
-    initialSecondValue = _ref.initialSecondValue,
-    _ref$isLocked = _ref.isLocked,
-    isLocked = _ref$isLocked === void 0 ? false : _ref$isLocked,
+    firstValue = _ref.firstValue,
+    secondValue = _ref.secondValue,
+    isLocked = _ref.isLocked,
     onLock = _ref.onLock,
-    onChange = _ref.onChange;
-  var _useState = React.useState(isLocked),
+    onChange = _ref.onChange,
+    className = _ref.className;
+  var _useState = React.useState(isLocked !== null && isLocked !== void 0 ? isLocked : false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     locked = _useState2[0],
     setLocked = _useState2[1];
-  var _useState3 = React.useState(initialFirstValue),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    firstControlValue = _useState4[0],
-    setFirstControlValue = _useState4[1];
-  var _useState5 = React.useState(initialSecondValue),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    secondControlValue = _useState6[0],
-    setSecondControlValue = _useState6[1];
-  React.useEffect(function () {
-    onLock === null || onLock === void 0 ? void 0 : onLock(locked);
+  var firstValueRef = React.useRef(firstValue);
+  var secondValueRef = React.useRef(secondValue);
+  var lockedRef = React.useRef(locked);
+  var handleFirstControlChange = React.useCallback(function (value) {
+    firstValueRef.current = value;
     if (locked) {
-      setSecondControlValue(firstControlValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: value,
+        isLocked: locked
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: secondValue,
+        isLocked: locked
+      });
     }
-  }, [locked]);
-  React.useEffect(function () {
-    setFirstControlValue(initialFirstValue);
-    setSecondControlValue(initialSecondValue);
-  }, [initialFirstValue, initialSecondValue]);
-  React.useEffect(function () {
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      first: firstControlValue,
-      second: secondControlValue,
-      isLocked: locked
-    });
-  }, [firstControlValue, secondControlValue, locked]);
-  var handleFirstControlChange = function handleFirstControlChange(value) {
-    setFirstControlValue(value);
+  }, [locked, onChange, secondValue]);
+  var handleSecondControlChange = React.useCallback(function (value) {
+    secondValueRef.current = value;
     if (locked) {
-      setSecondControlValue(value);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: value,
+        isLocked: locked
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: firstValue,
+        second: value,
+        isLocked: locked
+      });
     }
-  };
-  var handleSecondControlChange = function handleSecondControlChange(value) {
-    setSecondControlValue(value);
-    if (locked) {
-      setFirstControlValue(value);
+  }, [firstValue, locked, onChange]);
+  var handleLockedChange = React.useCallback(function (newLock) {
+    var triggerOnLock = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    setLocked(newLock);
+    lockedRef.current = newLock;
+    if (triggerOnLock && onLock) onLock(newLock);
+    if (newLock) {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: firstValue,
+        second: firstValue,
+        isLocked: newLock
+      });
     }
-  };
-  var toggleLock = function toggleLock() {
-    return setLocked(function (prev) {
-      return !prev;
-    });
-  };
+  }, [firstValue, onChange, onLock]);
+  // Reagujemy na zmiany wszystkiego co przychodzi z gory
+  // zebysmy nigdy nie skonczyli z nielegalnym stanem -> first !== second && locked
+  React.useEffect(function () {
+    if (isLocked === undefined || isLocked === lockedRef.current) return;
+    handleLockedChange(isLocked, false);
+  }, [isLocked, handleLockedChange]);
+  React.useEffect(function () {
+    if (firstValue === firstValueRef.current && secondValue === secondValueRef.current) return;
+    firstValueRef.current = firstValue;
+    secondValueRef.current = secondValue;
+    if (firstValue !== secondValue) {
+      handleLockedChange(false);
+    }
+  }, [firstValue, secondValue, handleLockedChange]);
   return /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     spacing: "3",
     align: "end",
-    className: "aurora-items-end"
-  }, firstControl(firstControlValue, handleFirstControlChange), /*#__PURE__*/React__default['default'].createElement("button", {
+    className: cn.cn('aurora-items-end', className)
+  }, firstControl(firstValue, handleFirstControlChange), /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
     className: cn.cn(locked ? 'aurora-bg-active aurora-rounded-4' : 'aurora-bg-subtle', 'aurora-h-6 aurora-w-6 aurora-p-1 aurora-mb-2 aurora-rounded-4 focus'),
-    onClick: toggleLock
+    onClick: function onClick() {
+      return handleLockedChange(!locked);
+    }
   }, locked ? (/*#__PURE__*/React__default['default'].createElement(lock_icon.LockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: css_color_tokens_values.CSS_COLOR_TOKENS_VALUES.neutral900
   })) : (/*#__PURE__*/React__default['default'].createElement(lock_unlock_icon.LockUnlockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: css_color_tokens_values.CSS_COLOR_TOKENS_VALUES.neutral600
-  }))), secondControl(secondControlValue, handleSecondControlChange));
+  }))), secondControl(secondValue, handleSecondControlChange));
 };
 
 exports.ValuesSyncer = ValuesSyncer;

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

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

@@ -8,8 +8,8 @@ var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBa
 var loader = require('../loader/loader.js');
 var use_modals_context = require('../modal/hooks/use_modals_context.js');
 var modal = require('../modal/components/modal/modal.js');
-var utilities = require('@dreamcommerce/utilities');
 var image_picker_constants = require('../image_picker/image_picker_constants.js');
+var utilities = require('@dreamcommerce/utilities');
 var image_picker = require('../image_picker/image_picker.js');
 var http_requester_contants = require('../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js');
 var use_http_api = require('../../hooks/use_http_api.js');

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IColorPickerProps } from './color_picker_types';
-export declare const ColorPicker: ({ id, name, initialColor, colorVariables, errors, onChange, onCancel, onSave, withGradient: isWithGradient, disabled, ...rest }: IColorPickerProps) => React.JSX.Element;
+export declare const ColorPicker: ({ id, name, value, colorVariables, errors, onChange, onCancel, onSave, withGradient: isWithGradient, disabled, ...rest }: IColorPickerProps) => React.JSX.Element;

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

@@ -4,11 +4,11 @@ import { ColorPickerContext } from './color_picker_context.js';
 import ColorPickerPure from './components/pure_color_picker.js';
 import useSetupColorPicker from './hooks/setup_color_picker.js';
 
-var _excluded = ["id", "name", "initialColor", "colorVariables", "errors", "onChange", "onCancel", "onSave", "withGradient", "disabled"];
+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,
@@ -19,7 +19,7 @@ var ColorPicker = function ColorPicker(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useSetupColorPicker = useSetupColorPicker({
       colorVariables: colorVariables,
-      initialColor: initialColor,
+      value: value,
       onChange: onChange,
       onCancel: onCancel,
       onSave: onSave,
@@ -30,7 +30,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,
@@ -48,15 +48,15 @@ var ColorPicker = function ColorPicker(_ref) {
     isColorPickerOpened = _useSetupColorPicker.isColorPickerOpened,
     setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened,
     degrees = _useSetupColorPicker.degrees,
-    setDegrees = _useSetupColorPicker.setDegrees;
-  var value = useMemo(function () {
+    shadeName = _useSetupColorPicker.shadeName;
+  var contextVal = useMemo(function () {
     return {
       color: color,
       setColor: setColor,
       hex: hex,
       hslArr: hslArr,
       handleOnChangeAlpha: handleOnChangeAlpha,
-      alphaValue: alphaValue,
+      alpha: alpha,
       rgbaArr: rgbaArr,
       setR: setR,
       setG: setG,
@@ -75,11 +75,11 @@ var ColorPicker = function ColorPicker(_ref) {
       isColorPickerOpened: isColorPickerOpened,
       setIsColorPickerOpened: setIsColorPickerOpened,
       degrees: degrees,
-      setDegrees: setDegrees
+      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, degrees, setDegrees]);
+  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, degrees, shadeName]);
   return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
-    value: value
+    value: contextVal
   }, /*#__PURE__*/React.createElement(ColorPickerPure, _objectSpread2({
     id: id,
     name: name,

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

@@ -19,10 +19,6 @@ var GRADIENT_TYPES = {
   linear: 'linear-gradient',
   radial: 'radial-gradient'
 };
-var GRADIENT_RADIAL_SHAPES = {
-  circle: 'circle',
-  ellipse: 'ellipse'
-};
 
-export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_CONTENT_MAX_HEIGHT, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES };
+export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_CONTENT_MAX_HEIGHT, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, GRADIENT_TYPES };
 //# sourceMappingURL=color_picker_constants.js.map

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

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

@@ -1,4 +1,4 @@
-import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+import { HTMLAttributes } from 'react';
 import { GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from "./color_picker_constants";
 import { Any } from 'ts-toolbelt';
 export interface IColorPickerPureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -21,7 +21,7 @@ export interface IColorPickerColorVariablesType {
 export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     id: string;
     name?: string;
-    initialColor?: ColorPickerColorTypes['hex'] | ColorPickerVariable | undefined;
+    value?: ColorPickerColorTypes['hex'] | undefined;
     withGradient?: boolean;
     colorVariables?: IColorPickerColorVariables;
     errors?: string | string[];
@@ -31,31 +31,31 @@ export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
     disabled?: boolean;
 }
 export interface IColorPickerContext {
-    color: ColorPickerVariable;
-    setColor: Dispatch<SetStateAction<string | ColorPickerVariable>>;
+    color: string;
+    setColor: (newColor: string, shadeName?: string) => void;
     hex: string;
     hslArr: number[];
-    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    alphaValue: string;
+    handleOnChangeAlpha: (val: number) => void;
+    alpha: number;
     rgbaArr: number[];
     setR: (newR: number) => void;
     setG: (newG: number) => void;
     setB: (newB: number) => void;
     handleCancel: () => void;
     withGradient: boolean;
-    handleSave: (color: IColorPickerColor) => void;
+    handleSave: () => void;
     colorVariables?: IColorPickerColorVariables;
     isCurrentValueGradient: boolean;
     setSolid: (value?: string) => void;
     setRadial: (value?: string) => void;
-    setLinear: (value?: string, deg?: number) => void;
+    setLinear: (value?: string) => void;
     gradientType?: TGradientType;
     previousSolidColor?: string;
     previousGradientColor?: string;
     isColorPickerOpened: boolean;
     setIsColorPickerOpened: (isOpened: boolean) => void;
     degrees: number;
-    setDegrees: Dispatch<SetStateAction<number>>;
+    shadeName: string;
 }
 export declare type ColorPickerColorTypes = {
     hex: string;
@@ -95,14 +95,3 @@ export declare type TGradientObject = {
     radialShape?: TGradientRadialShape;
     angle?: number;
 };
-export declare type TGradientColoPickerLibGradientObject = {
-    isGradient: boolean;
-    gradientType: string | undefined;
-    degrees: string;
-    colors: any;
-} | {
-    isGradient: boolean;
-    gradientType: null;
-    degrees: null;
-    colors: any;
-};

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

@@ -1 +1 @@
-{"version":3,"file":"color_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/color_picker_types.ts"],"names":[],"mappings":"AAAA,OAAyD,OAAO,CAAC;AACjE,OAAuD,uDAAuD,CAAC;AAE/G,OAAoB,aAAa,CAAC"}
+{"version":3,"file":"color_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/color_picker_types.ts"],"names":[],"mappings":"AAAA,OAA+B,OAAO,CAAC;AACvC,OAAuD,uDAAuD,CAAC;AAE/G,OAAoB,aAAa,CAAC"}

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

@@ -1,20 +1,21 @@
-import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, TGradientColoPickerLibGradientObject, TGradientObject } from './color_picker_types';
+/// <reference types="react" />
+import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, IColorPickerColorVariablesType } from './color_picker_types';
 import { GradientProps } from 'react-best-gradient-color-picker';
 import tinycolor from 'tinycolor2';
 export declare class ColorPickerUtils {
     static getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
     static isGradient(color: string): boolean;
-    static getColorPickerValue: (color: string | ColorPickerVariable | undefined) => ColorPickerVariable;
     static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
     static getHexValue: (colorSet: tinycolor.Instance) => string;
     static getHexValueString: (colorSet: tinycolor.Instance) => string;
-    static isHexChar: (value: string) => boolean;
     static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
     static getVariableShades: ({ color, name }: {
         color: ColorPickerColors;
         name: string;
     }) => ColorPickerVariable[];
     private static convertVariableShadesToHex;
-    static getColorPickerGradientValue(gradient: TGradientColoPickerLibGradientObject): TGradientObject;
     static updateGradientWithActiveColor: (colors: GradientProps[], index: number, newColor: string) => GradientProps[];
+    static findVariable: (variables: IColorPickerColorVariablesType | ColorPickerVariable[], color: string) => string | undefined;
+    static normalizeLinearGradient: (color: string) => string;
+    static preventTypingLetters(event: React.KeyboardEvent<HTMLInputElement>): void;
 }

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

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

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

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

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

@@ -4,6 +4,7 @@ import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rol
 import { Input } from '../../input/input.js';
 import { GRADIENT_TYPES } from '../color_picker_constants.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 
 var ColorPickerInput = function ColorPickerInput(_ref) {
   var id = _ref.id,
@@ -15,11 +16,14 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
     hex = _useColorPicker.hex,
     color = _useColorPicker.color,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
-    gradientType = _useColorPicker.gradientType;
+    gradientType = _useColorPicker.gradientType,
+    colorVariables = _useColorPicker.colorVariables,
+    shadeName = _useColorPicker.shadeName;
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-  var colorName = color.name ? "".concat(t(color.name)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
+  var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
+  var colorName = variableName ? "".concat(t(variableName)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
   if (isCurrentValueGradient) colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
   return /*#__PURE__*/React.createElement(Input, {
     className: "aurora-cursor-pointer",

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

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_CONTENT_MAX_HEIGHT } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerFooter } from './color_picker_footer.js';
 import { objectToString } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
 import PickerContextWrapper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
-import { ColorPickerFooter } from './color_picker_footer.js';
 import { ColorPickerVariables } from './color_picker_variables.js';
 import { ColorPickerControls } from './color_picker_controls.js';
 import { ColorPickerImpl } from './color_picker_impl.js';
@@ -16,8 +16,7 @@ var ColorPickerContent = function ColorPickerContent() {
     setColor = _useColorPicker.setColor,
     colorVariables = _useColorPicker.colorVariables,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
-  var colorValue = typeof color === 'string' ? color : color.value;
-  var safeValue = objectToString(colorValue);
+  var safeValue = objectToString(color);
   var defaultStyles = getStyles(true);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PickerContextWrapper, {
     value: safeValue,

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

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

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

@@ -8,8 +8,8 @@ import { TooltipTrigger } from '../../tooltip/components/tooltip_trigger.js';
 import { TooltipContent } from '../../tooltip/components/tooltip_content.js';
 import { TooltipProvider } from '../../tooltip/context/tooltip_provider.js';
 import { GRADIENT_TYPES } from '../color_picker_constants.js';
-import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
+import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { ColorPickerGradientAngle } from './color_picker_gradient_controls/color_picker_gradient_angle.js';
 import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
 import { GradientBar } from './color_picker_overrides/color_picker_gradient_bar.js';

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,iFAAqF;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,iFAAqF;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -2,12 +2,10 @@ import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button } from '../../button/button.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var ColorPickerFooter = function ColorPickerFooter() {
   var _useColorPicker = useColorPicker(),
-    color = _useColorPicker.color,
     handleCancel = _useColorPicker.handleCancel,
     handleSave = _useColorPicker.handleSave,
     setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
@@ -20,7 +18,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
   };
   var handleSaveButton = function handleSaveButton() {
     setIsColorPickerOpened(false);
-    handleSave(ColorPickerUtils.getAllColorTypes(color));
+    handleSave();
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-border-subtle aurora-rounded-b-16 aurora-bg-neutral-0"

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { formatInputValues } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
-import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { AngleIcon } from '../../../../assets/icons/angle_icon.js';
 
 var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
@@ -9,12 +9,10 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
     onChange = _usePicker.onChange,
     value = _usePicker.value;
   var _useColorPicker = useColorPicker(),
-    degrees = _useColorPicker.degrees,
-    setDegrees = _useColorPicker.setDegrees;
+    degrees = _useColorPicker.degrees;
   var handleDegrees = function handleDegrees(e) {
     var newValue = formatInputValues(e.target.value, 0, 360);
     var remaining = value.split(/,(.+)/)[1];
-    setDegrees(newValue);
     onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
   };
   return /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}