@dreamcommerce/aurora 2.20.7 → 2.21.0-1

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/setup_color_piceker.js

@@ -0,0 +1,179 @@
+import { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { COLOR_PICKER_ALPHA_MAX_VALUE } from '../constants.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
+import isEqual_1 from '../../../../../../external/lodash/isEqual.js';
+import { useColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
+
+var defaultGradient = 'linear-gradient(90deg, rgba(13, 12, 12, 1) 0%, rgba(255,255,255,1) 100%)';
+
+var useSetupColorPicker = function useSetupColorPicker(_ref) {
+  var initialColor = _ref.initialColor,
+      onChange = _ref.onChange,
+      onCancel = _ref.onCancel,
+      onSave = _ref.onSave,
+      colorVariables = _ref.colorVariables,
+      _ref$withGradient = _ref.withGradient,
+      isWithGradient = _ref$withGradient === void 0 ? false : _ref$withGradient;
+  var initialColorObject = ColorPickerUtils.getColorPickerValue(initialColor);
+
+  var _useState = useState(initialColorObject),
+      _useState2 = _slicedToArray(_useState, 2),
+      color = _useState2[0],
+      setColorValue = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      previousSolidColor = _useState4[0],
+      setPreviousSolidColor = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      previousGradientColor = _useState6[0],
+      setPreviousGradientColor = _useState6[1];
+
+  var _useState7 = useState(initialColor),
+      _useState8 = _slicedToArray(_useState7, 2),
+      prevInitialColor = _useState8[0],
+      setPrevInitialColor = _useState8[1];
+
+  var withGradient = isWithGradient || initialColorObject.value;
+
+  var setColor = function setColor(newColor) {
+    var newColorValue = ColorPickerUtils.getColorPickerValue(newColor);
+    !ColorPickerUtils.isGradient(color.value) ? setPreviousSolidColor(color.value) : setPreviousGradientColor(color.value);
+    setColorValue(function (prevColor) {
+      var _prevColor$value;
+
+      return {
+        value: newColorValue.value,
+        name: ((_prevColor$value = prevColor.value) !== null && _prevColor$value !== void 0 ? _prevColor$value : prevColor) === newColorValue.value ? prevColor === null || prevColor === void 0 ? void 0 : prevColor.name : typeof newColor === 'string' ? '' : newColor === null || newColor === void 0 ? void 0 : newColor.name
+      };
+    });
+  };
+
+  useEffect(function () {
+    if (!initialColor) return;
+
+    if (!isEqual_1(initialColor, prevInitialColor)) {
+      setColor(initialColor);
+      setPrevInitialColor(initialColor);
+    }
+  }, [initialColor]);
+
+  var _useBestGradientColor = useColorPicker(color.value, setColor),
+      hslArr = _useBestGradientColor.hslArr,
+      rgbaArr = _useBestGradientColor.rgbaArr,
+      setR = _useBestGradientColor.setR,
+      setG = _useBestGradientColor.setG,
+      setB = _useBestGradientColor.setB,
+      setA = _useBestGradientColor.setA,
+      isGradient = _useBestGradientColor.isGradient,
+      gradientType = _useBestGradientColor.gradientType,
+      getGradientObject = _useBestGradientColor.getGradientObject;
+
+  var tinyColor = typeof color === 'string' ? ColorPickerUtils.getTinyColorInstance(color) : ColorPickerUtils.getTinyColorInstance(color.value);
+  var hex = ColorPickerUtils.getHexValue(tinyColor);
+
+  var _useState9 = useState(rgbaArr[3] * 100),
+      _useState10 = _slicedToArray(_useState9, 2),
+      alpha = _useState10[0],
+      setAlpha = _useState10[1];
+
+  var _useState11 = useState("".concat(alpha)),
+      _useState12 = _slicedToArray(_useState11, 2),
+      alphaValue = _useState12[0],
+      setAlphaValue = _useState12[1];
+
+  var setSolid = function setSolid(value) {
+    setColor(ColorPickerUtils.getColorPickerValue(value).value);
+  };
+
+  var setLinear = function setLinear(value) {
+    var gradientColor = value || defaultGradient;
+
+    if (value && !ColorPickerUtils.isGradient(value)) {
+      setGradient(gradientColor);
+    }
+
+    var remaining = gradientColor.split(/,(.+)/)[1];
+    setColor("linear-gradient(90deg, ".concat(remaining));
+  };
+
+  var setRadial = function setRadial(value) {
+    var gradientColor = value || defaultGradient;
+
+    if (value && !ColorPickerUtils.isGradient(value)) {
+      setGradient(gradientColor);
+    }
+
+    var remaining = gradientColor.split(/,(.+)/)[1];
+    setColor("radial-gradient(circle, ".concat(remaining));
+  };
+
+  var setGradient = function setGradient(value) {
+    var gradientColor = value || defaultGradient;
+    setColor(gradientColor);
+  };
+
+  var handleOnChangeAlpha = function handleOnChangeAlpha(event) {
+    changeAlphaValue(Number(event.target.value));
+  };
+
+  var changeAlphaValue = function changeAlphaValue(value) {
+    setAlpha(value > COLOR_PICKER_ALPHA_MAX_VALUE ? COLOR_PICKER_ALPHA_MAX_VALUE : value);
+  };
+
+  useEffect(function () {
+    setA(alpha);
+  }, [alpha]);
+  useEffect(function () {
+    setAlphaValue("".concat(Math.round(rgbaArr[3] * 100)));
+  }, [rgbaArr[3]]);
+  useEffect(function () {
+    var colorObject = ColorPickerUtils.getAllColorTypes(color);
+    var gradientObject = getGradientObject();
+
+    if (gradientObject !== null && gradientObject !== void 0 && gradientObject.isGradient) {
+      colorObject.gradient = gradientObject;
+    }
+
+    onChange === null || onChange === void 0 || onChange(colorObject); // onChange?.(ColorPickerUtils.getAllColorTypes(color));
+  }, [color]);
+
+  var handleCancel = function handleCancel() {
+    setColor(ColorPickerUtils.getColorPickerValue(initialColor));
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+
+  var handleSave = function handleSave() {
+    onSave === null || onSave === void 0 || onSave(ColorPickerUtils.getAllColorTypes(color));
+  };
+
+  return {
+    color: color,
+    previousSolidColor: previousSolidColor,
+    previousGradientColor: previousGradientColor,
+    setColor: setColor,
+    hex: hex,
+    hslArr: hslArr,
+    handleOnChangeAlpha: handleOnChangeAlpha,
+    alphaValue: alphaValue,
+    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
+  };
+};
+
+export default useSetupColorPicker;
+//# sourceMappingURL=setup_color_piceker.js.map

package/build/{cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js.map → esm/packages/aurora/src/components/color_picker_new/hooks/setup_color_piceker.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,8CAAkD;AACxE,+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;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_new/hooks/use_color_picker.d.ts

@@ -1,25 +1,2 @@
-import { ColorPickerColorTypes, ColorPickerVariable, IColorPickerColor, IColorPickerColorVariables } from '../types';
-export declare type ColorPickerHookProps = {
-    initialColor?: ColorPickerColorTypes['hex'] | ColorPickerVariable;
-    onChange?: (color: IColorPickerColor) => void;
-    onCancel?: () => void;
-    onSave?: (color: IColorPickerColor) => void;
-    colorVariables?: IColorPickerColorVariables;
-};
-declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave, colorVariables: initialColorVariables }: ColorPickerHookProps) => {
-    color: ColorPickerVariable;
-    setColor: (color: ColorPickerColorTypes['hex'] | ColorPickerVariable) => void;
-    hex: string;
-    hslArr: number[];
-    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    alphaValue: string;
-    rgbaArr: number[];
-    setR: (newR: number) => void;
-    setG: (newG: number) => void;
-    setB: (newB: number) => void;
-    handleCancel: () => void;
-    handleSave: () => void;
-    handlePickSwatch: (color: ColorPickerColorTypes['hex'] | ColorPickerVariable) => void;
-    colorVariables: IColorPickerColorVariables | undefined;
-};
-export default useColorPicker;
+import { IColorPickerNewContext } from '../types';
+export declare const useColorPicker: () => IColorPickerNewContext;

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js

@@ -1,132 +1,9 @@
-import { useState, useEffect } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useColorPicker as useColorPicker$1 } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
-import { COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_ALPHA_MAX_VALUE } from '../constants.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
-import isEqual_1 from '../../../../../../external/lodash/isEqual.js';
+import { useContext } from 'react';
+import { ColorPickerNewContext } from '../context.js';
 
-var useColorPicker = function useColorPicker(_ref) {
-  var _initialColor$name;
-
-  var initialColor = _ref.initialColor,
-      onChange = _ref.onChange,
-      onCancel = _ref.onCancel,
-      onSave = _ref.onSave,
-      initialColorVariables = _ref.colorVariables;
-
-  var _useState = useState({
-    value: initialColor ? ColorPickerUtils.getTinyColorInstance(typeof initialColor === 'string' ? initialColor : initialColor === null || initialColor === void 0 ? void 0 : initialColor.value).toHex8() : COLOR_PICKER_INITIAL_STATE,
-    name: typeof initialColor === 'string' ? '' : (_initialColor$name = initialColor === null || initialColor === void 0 ? void 0 : initialColor.name) !== null && _initialColor$name !== void 0 ? _initialColor$name : ''
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      color = _useState2[0],
-      setColorValue = _useState2[1];
-
-  var _useState3 = useState(initialColorVariables),
-      _useState4 = _slicedToArray(_useState3, 1),
-      colorVariables = _useState4[0];
-
-  var _useState5 = useState(initialColor),
-      _useState6 = _slicedToArray(_useState5, 2),
-      prevInitalColor = _useState6[0],
-      setPrevInitialColor = _useState6[1];
-
-  var setColor = function setColor(color) {
-    var hexColor = ColorPickerUtils.getTinyColorInstance(typeof color === 'string' ? color : color.value).toHex8();
-    setColorValue(function (prevColor) {
-      var _prevColor$value;
-
-      return {
-        value: hexColor,
-        name: ((_prevColor$value = prevColor.value) !== null && _prevColor$value !== void 0 ? _prevColor$value : prevColor) === hexColor ? prevColor === null || prevColor === void 0 ? void 0 : prevColor.name : typeof color === 'string' ? '' : color === null || color === void 0 ? void 0 : color.name
-      };
-    });
-  };
-
-  useEffect(function () {
-    if (!initialColor) return;
-
-    if (!isEqual_1(initialColor, prevInitalColor)) {
-      setColor(initialColor);
-      setPrevInitialColor(initialColor);
-    }
-  }, [initialColor]);
-
-  var _useState7 = useState(color),
-      _useState8 = _slicedToArray(_useState7, 2),
-      choosenColor = _useState8[0],
-      setChoosenColor = _useState8[1];
-
-  var _useBestGradientColor = useColorPicker$1(typeof color === 'string' ? color : color.value, setColor),
-      hslArr = _useBestGradientColor.hslArr,
-      rgbaArr = _useBestGradientColor.rgbaArr,
-      setR = _useBestGradientColor.setR,
-      setG = _useBestGradientColor.setG,
-      setB = _useBestGradientColor.setB,
-      setA = _useBestGradientColor.setA;
-
-  var tinyColor = typeof color === 'string' ? ColorPickerUtils.getTinyColorInstance(color) : ColorPickerUtils.getTinyColorInstance(color.value);
-  var hex = ColorPickerUtils.getHexValue(tinyColor);
-
-  var _useState9 = useState(rgbaArr[3] * 100),
-      _useState10 = _slicedToArray(_useState9, 2),
-      alpha = _useState10[0],
-      setAlpha = _useState10[1];
-
-  var _useState11 = useState("".concat(alpha)),
-      _useState12 = _slicedToArray(_useState11, 2),
-      alphaValue = _useState12[0],
-      setAlphaValue = _useState12[1];
-
-  var handleOnChangeAlpha = function handleOnChangeAlpha(event) {
-    changeAlphaValue(Number(event.target.value));
-  };
-
-  var changeAlphaValue = function changeAlphaValue(value) {
-    setAlpha(value > COLOR_PICKER_ALPHA_MAX_VALUE ? COLOR_PICKER_ALPHA_MAX_VALUE : value);
-  };
-
-  useEffect(function () {
-    setA(alpha);
-  }, [alpha]);
-  useEffect(function () {
-    setAlphaValue("".concat(Math.round(rgbaArr[3] * 100)));
-  }, [rgbaArr[3]]);
-  useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(ColorPickerUtils.getAllColorTypes(color));
-  }, [color]);
-
-  var handleCancel = function handleCancel() {
-    setColor(choosenColor);
-    onCancel === null || onCancel === void 0 || onCancel();
-  };
-
-  var handleSave = function handleSave() {
-    setChoosenColor(color);
-    onSave === null || onSave === void 0 || onSave(ColorPickerUtils.getAllColorTypes(color));
-  };
-
-  var handlePickSwatch = function handlePickSwatch(color) {
-    setColor(color);
-  };
-
-  return {
-    color: color,
-    setColor: setColor,
-    hex: hex,
-    hslArr: hslArr,
-    handleOnChangeAlpha: handleOnChangeAlpha,
-    alphaValue: alphaValue,
-    rgbaArr: rgbaArr,
-    setR: setR,
-    setG: setG,
-    setB: setB,
-    handleCancel: handleCancel,
-    handleSave: handleSave,
-    handlePickSwatch: handlePickSwatch,
-    colorVariables: colorVariables
-  };
+var useColorPicker = function useColorPicker() {
+  return useContext(ColorPickerNewContext);
 };
 
-export default useColorPicker;
+export { useColorPicker };
 //# sourceMappingURL=use_color_picker.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map

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

package/build/esm/packages/aurora/src/components/color_picker_new/index.d.ts

@@ -1,3 +1,3 @@
 import { IColorPickerNewProps } from './types';
-declare const ColorPickerNewWithContext: ({ id, name, initialColor, colorVariables, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
+declare const ColorPickerNewWithContext: ({ id, name, initialColor, colorVariables, onChange, onCancel, onSave, withGradient: isWithGradient }: IColorPickerNewProps) => JSX.Element;
 export default ColorPickerNewWithContext;

package/build/esm/packages/aurora/src/components/color_picker_new/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { ColorPickerNewContext } from './context.js';
 import ColorPickerNewPure from './components/pure_color_picker.js';
-import useColorPicker from './hooks/use_color_picker.js';
+import useSetupColorPicker from './hooks/setup_color_piceker.js';
 
 var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
   var id = _ref.id,
@@ -10,28 +10,37 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
       colorVariables = _ref.colorVariables,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
-      onSave = _ref.onSave;
+      onSave = _ref.onSave,
+      isWithGradient = _ref.withGradient;
 
-  var _useColorPicker = useColorPicker({
+  var _useSetupColorPicker = useSetupColorPicker({
     colorVariables: colorVariables,
     initialColor: initialColor,
     onChange: onChange,
     onCancel: onCancel,
-    onSave: onSave
+    onSave: onSave,
+    withGradient: isWithGradient
   }),
-      color = _useColorPicker.color,
-      setColor = _useColorPicker.setColor,
-      hex = _useColorPicker.hex,
-      hslArr = _useColorPicker.hslArr,
-      handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
-      alphaValue = _useColorPicker.alphaValue,
-      rgbaArr = _useColorPicker.rgbaArr,
-      setR = _useColorPicker.setR,
-      setG = _useColorPicker.setG,
-      setB = _useColorPicker.setB,
-      handleCancel = _useColorPicker.handleCancel,
-      handleSave = _useColorPicker.handleSave,
-      handlePickSwatch = _useColorPicker.handlePickSwatch;
+      color = _useSetupColorPicker.color,
+      setColor = _useSetupColorPicker.setColor,
+      hex = _useSetupColorPicker.hex,
+      hslArr = _useSetupColorPicker.hslArr,
+      handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
+      alphaValue = _useSetupColorPicker.alphaValue,
+      rgbaArr = _useSetupColorPicker.rgbaArr,
+      setR = _useSetupColorPicker.setR,
+      setG = _useSetupColorPicker.setG,
+      setB = _useSetupColorPicker.setB,
+      handleCancel = _useSetupColorPicker.handleCancel,
+      handleSave = _useSetupColorPicker.handleSave,
+      previousSolidColor = _useSetupColorPicker.previousSolidColor,
+      isCurrentValueGradient = _useSetupColorPicker.isCurrentValueGradient,
+      setLinear = _useSetupColorPicker.setLinear,
+      setRadial = _useSetupColorPicker.setRadial,
+      gradientType = _useSetupColorPicker.gradientType,
+      previousGradientColor = _useSetupColorPicker.previousGradientColor,
+      setSolid = _useSetupColorPicker.setSolid,
+      withGradient = _useSetupColorPicker.withGradient;
 
   var value = useMemo(function () {
     return {
@@ -48,16 +57,27 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
       handleCancel: handleCancel,
       handleSave: handleSave,
       colorVariables: colorVariables,
-      handlePickSwatch: handlePickSwatch
+      previousSolidColor: previousSolidColor,
+      isCurrentValueGradient: isCurrentValueGradient,
+      setLinear: setLinear,
+      setRadial: setRadial,
+      gradientType: gradientType,
+      setSolid: setSolid,
+      previousGradientColor: previousGradientColor,
+      withGradient: withGradient
     };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, handlePickSwatch, colorVariables]);
-  return /*#__PURE__*/React.createElement(ColorPickerNewContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement(ColorPickerNewPure, {
-    id: id,
-    name: name,
-    colorVariables: colorVariables
-  }));
+  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient]);
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(ColorPickerNewContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React.createElement(ColorPickerNewPure, {
+      id: id,
+      name: name,
+      colorVariables: colorVariables
+    }))
+  );
 };
 
 export default ColorPickerNewWithContext;

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

package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
+import { GRADIENT_TYPES } from "./constants";
 export interface IColorPickerNewPureProps {
     id: string;
     name?: string;
@@ -19,12 +20,13 @@ export interface IColorPickerNewProps {
     id: string;
     name?: string;
     initialColor?: ColorPickerColorTypes['hex'] | ColorPickerVariable | undefined;
+    withGradient?: boolean;
     colorVariables?: IColorPickerColorVariables;
     onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;
 }
-export interface IColorPickerNewContextProps {
+export interface IColorPickerNewContext {
     color: ColorPickerVariable;
     setColor: Dispatch<SetStateAction<string | ColorPickerVariable>>;
     hex: string;
@@ -36,9 +38,16 @@ export interface IColorPickerNewContextProps {
     setG: (newG: number) => void;
     setB: (newB: number) => void;
     handleCancel: () => void;
+    withGradient: boolean;
     handleSave: (color: IColorPickerColor) => void;
-    handlePickSwatch: (color: string | ColorPickerVariable) => void;
     colorVariables?: IColorPickerColorVariables;
+    isCurrentValueGradient: boolean;
+    setSolid: (value?: string) => void;
+    setRadial: (value?: string) => void;
+    setLinear: (value?: string) => void;
+    gradientType?: TGradientType;
+    previousSolidColor?: string;
+    previousGradientColor?: string;
 }
 export declare type ColorPickerColorTypes = {
     hex: string;
@@ -63,5 +72,18 @@ export declare type IColorPickerColor = {
     hex: string;
     hexString: string;
     variable: string;
+    gradient?: TGradientObject;
 };
 export declare type ColorPickerColors = ColorPickerColorTypes['hex'] | ColorPickerColorTypes['hsl'] | ColorPickerColorTypes['rgba'];
+export declare type TGradientType = typeof GRADIENT_TYPES[keyof typeof GRADIENT_TYPES];
+export declare type TGradientObject = {
+    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_new/types.js

@@ -1,2 +1,3 @@
 import 'react';
+import '@auroraComponents/color_picker_new/constants';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker_new/types.ts"],"names":[],"mappings":"AAAA,OAAyC,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker_new/types.ts"],"names":[],"mappings":"AAAA,OAAyC,OAAO,CAAC;AACjD,OAA+B,8CAA8C,CAAC"}

package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js

@@ -15,7 +15,8 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
       colorVariables = _ref.colorVariables,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
-      onSave = _ref.onSave;
+      onSave = _ref.onSave,
+      withGradient = _ref.withGradient;
   return /*#__PURE__*/React.createElement(Control, {
     errors: errors,
     name: name,
@@ -34,7 +35,8 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
     colorVariables: colorVariables,
     onChange: onChange,
     onCancel: onCancel,
-    onSave: onSave
+    onSave: onSave,
+    withGradient: withGradient
   }))), /*#__PURE__*/React.createElement(Control.Errors, null));
 };
 

package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/controls/types.d.ts

@@ -202,6 +202,7 @@ export interface IControlColorPickerNew extends IColorPickerNewProps, IControlCo
     name?: string;
     className?: string;
     label?: string;
+    withGradient?: boolean;
     isRequired?: boolean;
     hideChooseCancelButtons?: boolean;
     labelAdditionalInfo?: string | React.ReactNode;

package/build/esm/packages/aurora/src/css/color_picker_new/main.module.less.js

@@ -1,9 +1,22 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 280px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw [role='button'] {\n  transition: none;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n  background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n  width: 24px;\n  height: 24px;\n  background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n  cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div:hover {\n  background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NTc5IDQuNTgwMjFMMTIuNTg4OCA1Ljc0OTI1TDEzLjc1NzkgNi45MTgzTDEyLjU4ODggOC4wODczNEwxMi4wMDQzIDcuNTAyODJMNS43NDkyNSAxMy43NTc5QzUuNTg5OCAxMy45MTczIDUuMzcyMTMgMTQuMDA0NyA1LjE0NjY5IDEzLjk5OThMMi44NTg1NiAxMy45NDk4QzIuNDE2MTUgMTMuOTQwMiAyLjA1OTgyIDEzLjU4MzggMi4wNTAxNiAxMy4xNDE0TDIuMDAwMiAxMC44NTMzQzEuOTk1MjcgMTAuNjI3OSAyLjA4MjY3IDEwLjQxMDIgMi4yNDIxMiAxMC4yNTA3TDguNDk3MTggMy45OTU2OUw3LjkxMjY2IDMuNDExMTZMOS4wODE3IDIuMjQyMTJMMTAuMjUwNyAzLjQxMTE2TDExLjQxOTggMi4yNDIxMkMxMS43NDI2IDEuOTE5MjkgMTIuMjY2IDEuOTE5MjkgMTIuNTg4OCAyLjI0MjEyTDEzLjc1NzkgMy40MTExNkMxNC4wODA3IDMuNzMzOTggMTQuMDgwNyA0LjI1NzM4IDEzLjc1NzkgNC41ODAyMVpNOS42NjYyMyA1LjE2NDczTDQuMDc3NyAxMC43NTMzTDUuMjQ2NzQgMTEuOTIyM0wxMC44MzUzIDYuMzMzNzhMOS42NjYyMyA1LjE2NDczWiIgZmlsbD0iIzJEMzc0OCIvPgo8L3N2Zz4K) center;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n  display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n  transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: (1fr)[12];\n  grid-template-columns: repeat(12, 1fr);\n  gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #abb4cd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n  width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n  width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker-impl__1W-fs {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'],\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] {\n  cursor: pointer;\n  border-radius: 4px;\n  width: 24px !important;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f3f4f8;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn']:hover > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn']:hover > svg * {\n  stroke: #2d3748 !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'] > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] > svg * {\n  stroke: #5c657e !important;\n}\n.main-module_color-picker-impl__1W-fs [id='gradient-bar'] {\n  margin-top: 4px !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] {\n  margin: 0 !important;\n  padding: 0 !important;\n  display: flex;\n  width: auto;\n  height: auto;\n  border-radius: 4px;\n  justify-content: center;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] > div:nth-child(1) {\n  display: none;\n}\n.main-module_color-picker-mode-toggler__1f2oJ {\n  list-style: none;\n  display: flex;\n}\n.main-module_color-picker-mode-toggler__button__3vyH- {\n  cursor: pointer;\n  display: block;\n  width: 24px;\n  height: 24px;\n  border: 1px solid #2d3748;\n  border-radius: 4px;\n}\n.main-module_color-picker-mode-toggler__button_solid___X6iZ {\n  background: #5c657e;\n}\n.main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB {\n  background: linear-gradient(0deg, #fff 0%, #5c657e 81.67%);\n}\n.main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE {\n  background: radial-gradient(64.58% 64.58% at 50% 50%, #fff 0%, #9197a8 57.17%, #9197a8 57.18%, #5c657e 100%);\n}\n.main-module_color-picker-mode-toggler__button_active__wWPPx {\n  border: 2px solid #3c83ec;\n}\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 280px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__hue__1ow3q > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__opacity__232os > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__current-color-preview__mxKEu {\n  display: block;\n  border-radius: 4px;\n  border: 1px solid #f3f4f8;\n  width: 28px;\n  height: 28px;\n}\n.main-module_color-picker__gradient-angle__1dUul {\n  padding: 0;\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  height: 24px;\n  border: 2px solid #f3f4f8;\n  border-radius: 4px;\n  background: #f3f4f8;\n  position: relative;\n}\n.main-module_color-picker__gradient-angle__1dUul > svg * {\n  stroke: #5c657e;\n}\n.main-module_color-picker__gradient-angle-input__1nVDi {\n  background: #fff;\n  height: 20px;\n  border-radius: 4px;\n  width: 34px;\n  text-align: center;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__square__omS4M > div > div > div:first-child {\n  pointer-events: none;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n  transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: (1fr)[12];\n  grid-template-columns: repeat(12, 1fr);\n  gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #abb4cd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n  width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n  width: auto;\n}\n.main-module_color-picker__inputs__3Cmmw .main-module_color-picker__current-color-preview__mxKEu {\n  -ms-grid-row-align: stretch;\n      align-self: stretch;\n  width: 32px;\n  height: 32px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
 var styles = {
+  "color-picker-impl": "main-module_color-picker-impl__1W-fs",
+  "color-picker-mode-toggler": "main-module_color-picker-mode-toggler__1f2oJ",
+  "color-picker-mode-toggler__button": "main-module_color-picker-mode-toggler__button__3vyH-",
+  "color-picker-mode-toggler__button_solid": "main-module_color-picker-mode-toggler__button_solid___X6iZ",
+  "color-picker-mode-toggler__button_gradient_linear": "main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB",
+  "color-picker-mode-toggler__button_gradient_radial": "main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE",
+  "color-picker-mode-toggler__button_active": "main-module_color-picker-mode-toggler__button_active__wWPPx",
   "color-picker__container": "main-module_color-picker__container__14ccI",
+  "color-picker__hue": "main-module_color-picker__hue__1ow3q",
+  "color-picker__opacity": "main-module_color-picker__opacity__232os",
+  "color-picker__current-color-preview": "main-module_color-picker__current-color-preview__mxKEu",
+  "color-picker__gradient-angle": "main-module_color-picker__gradient-angle__1dUul",
+  "color-picker__gradient-angle-input": "main-module_color-picker__gradient-angle-input__1nVDi",
   "color-picker__rbgcp": "main-module_color-picker__rbgcp__2FKdw",
+  "color-picker__square": "main-module_color-picker__square__omS4M",
   "color-picker__header": "main-module_color-picker__header__NFjKK",
   "color-picker__footer": "main-module_color-picker__footer__3JvEl",
   "color-picker__swatches": "main-module_color-picker__swatches__1s2pY",
@@ -18,10 +31,10 @@ var styles = {
   "color-picker__swatch-fill": "main-module_color-picker__swatch-fill__3D88w",
   "color-picker__input-container": "main-module_color-picker__input-container__1cC2e",
   "color-picker__input-color-swatch-container": "main-module_color-picker__input-color-swatch-container__3WX9B",
-  "color-picker__inputs": "main-module_color-picker__inputs__3Cmmw",
   "color-picker__inputs-type": "main-module_color-picker__inputs-type__1loVJ",
   "color-picker__inputs-value": "main-module_color-picker__inputs-value__Rig14",
   "color-picker__inputs-value-container": "main-module_color-picker__inputs-value-container__3ErVj",
+  "color-picker__inputs": "main-module_color-picker__inputs__3Cmmw",
   "color-picker__close-icon": "main-module_color-picker__close-icon__JcWAL"
 };
 styleInject(css_248z);

package/build/esm/packages/aurora/src/css/color_picker_new/main.module.less.js.map

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