@dreamcommerce/aurora 2.20.7 → 2.21.0-1

package/build/esm/external/react-best-gradient-color-picker/dist/esm/utils/utils.js

@@ -1,81 +1,25 @@
-import { objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { config } from '../constants.js';
-import { formatInputValues } from './formatters.js';
 
-var barSize = config.barSize,
-    crossSize = config.crossSize;
-var safeBounds = function safeBounds(e) {
-  var client = e.target.parentNode.getBoundingClientRect();
-  var className = e.target.className;
-  var adjuster = className === 'c-resize ps-rl' ? 15 : 0;
-  return {
-    offsetLeft: (client === null || client === void 0 ? void 0 : client.x) + adjuster,
-    offsetTop: client === null || client === void 0 ? void 0 : client.y,
-    clientWidth: client === null || client === void 0 ? void 0 : client.width,
-    clientHeight: client === null || client === void 0 ? void 0 : client.height
-  };
-};
-function getHandleValue(e) {
-  var _safeBounds = safeBounds(e),
-      offsetLeft = _safeBounds.offsetLeft,
-      clientWidth = _safeBounds.clientWidth;
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
 
-  var pos = e.clientX - offsetLeft - barSize / 2;
-  var adjuster = clientWidth - 18;
-  var bounded = formatInputValues(pos, 0, adjuster);
-  return Math.round(bounded / (adjuster / 100));
-}
-function computeSquareXY(s, v, squareWidth, squareHeight) {
-  var x = s * squareWidth - crossSize / 2;
-  var y = (100 - v) / 100 * squareHeight - crossSize / 2;
-  return [x, y];
-}
-
-var getClientXY = function getClientXY(e) {
-  if (e.clientX) {
-    return {
-      clientX: e.clientX,
-      clientY: e.clientY
-    };
-  } else {
-    var touch = e.touches[0] || {};
-    return {
-      clientX: touch.clientX,
-      clientY: touch.clientY
-    };
-  }
-};
-
-function computePickerPosition(e) {
-  var _safeBounds2 = safeBounds(e),
-      offsetLeft = _safeBounds2.offsetLeft,
-      offsetTop = _safeBounds2.offsetTop,
-      clientWidth = _safeBounds2.clientWidth,
-      clientHeight = _safeBounds2.clientHeight;
-
-  var _getClientXY = getClientXY(e),
-      clientX = _getClientXY.clientX,
-      clientY = _getClientXY.clientY;
-
-  var getX = function getX() {
-    var xPos = clientX - offsetLeft - crossSize / 2;
-    return formatInputValues(xPos, -9, clientWidth - 10);
-  };
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
 
-  var getY = function getY() {
-    var yPos = clientY - offsetTop - crossSize / 2;
-    return formatInputValues(yPos, -9, clientHeight - 10);
+    return t;
   };
 
-  return [getX(), getY()];
-} // export const getGradientType = (value: string) => {
+  return __assign.apply(this, arguments);
+};
 //   return value?.split('(')[0]
 // }
 
 var isUpperCase = function isUpperCase(str) {
-  var _str$;
+  var _a;
 
-  return (str === null || str === void 0 ? void 0 : str[0]) === (str === null || str === void 0 || (_str$ = str[0]) === null || _str$ === void 0 ? void 0 : _str$.toUpperCase());
+  return (str === null || str === void 0 ? void 0 : str[0]) === ((_a = str === null || str === void 0 ? void 0 : str[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase());
 }; // export const compareGradients = (g1: string, g2: string) => {
 //   const ng1 = g1?.toLowerCase()?.replaceAll(' ', '')
 //   const ng2 = g2?.toLowerCase()?.replaceAll(' ', '')
@@ -108,37 +52,9 @@ var convertShortHandDeg = function convertShortHandDeg(dir) {
     return parseInt(safeDir);
   }
 };
-
-var objectToString = function objectToString(value) {
-  if (typeof value === 'string') {
-    return value;
-  } else {
-    var _value$type;
-
-    if (value !== null && value !== void 0 && (_value$type = value.type) !== null && _value$type !== void 0 && _value$type.includes('gradient')) {
-      var _value$colorStops, _sorted$map, _value$orientation;
-
-      var sorted = value === null || value === void 0 || (_value$colorStops = value.colorStops) === null || _value$colorStops === void 0 ? void 0 : _value$colorStops.sort(function (a, b) {
-        return (a === null || a === void 0 ? void 0 : a.left) - (b === null || b === void 0 ? void 0 : b.left);
-      });
-      var string = sorted === null || sorted === void 0 || (_sorted$map = sorted.map(function (c) {
-        return "".concat(c === null || c === void 0 ? void 0 : c.value, " ").concat(c === null || c === void 0 ? void 0 : c.left, "%");
-      })) === null || _sorted$map === void 0 ? void 0 : _sorted$map.join(', ');
-      var type = value === null || value === void 0 ? void 0 : value.type;
-      var degs = convertShortHandDeg(value === null || value === void 0 || (_value$orientation = value.orientation) === null || _value$orientation === void 0 ? void 0 : _value$orientation.value);
-      var gradientStr = type === 'linear-gradient' ? "".concat(degs, "deg") : 'circle';
-      return "".concat(type, "(").concat(gradientStr, ", ").concat(string, ")");
-    } else {
-      var _value$colorStops$;
-
-      var color = (value === null || value === void 0 || (_value$colorStops$ = value.colorStops[0]) === null || _value$colorStops$ === void 0 ? void 0 : _value$colorStops$.value) || 'rgba(175, 51, 242, 1)';
-      return color;
-    }
-  }
-};
 var getColorObj = function getColorObj(colors) {
   var idxCols = colors === null || colors === void 0 ? void 0 : colors.map(function (c, i) {
-    return _objectSpread2(_objectSpread2({}, c), {}, {
+    return __assign(__assign({}, c), {
       index: i
     });
   });
@@ -154,10 +70,10 @@ var getColorObj = function getColorObj(colors) {
 };
 
 var getDegrees = function getDegrees(value) {
-  var _s1$split$;
+  var _a;
 
   var s1 = value === null || value === void 0 ? void 0 : value.split(',')[0];
-  var s2 = s1 === null || s1 === void 0 || (_s1$split$ = s1.split('(')[1]) === null || _s1$split$ === void 0 ? void 0 : _s1$split$.replace('deg', '');
+  var s2 = (_a = s1 === null || s1 === void 0 ? void 0 : s1.split('(')[1]) === null || _a === void 0 ? void 0 : _a.replace('deg', '');
   return convertShortHandDeg(s2);
 };
 
@@ -174,5 +90,5 @@ var getDetails = function getDetails(value) {
   };
 };
 
-export { computePickerPosition, computeSquareXY, getColorObj, getDetails, getHandleValue, isUpperCase, objectToString, safeBounds };
+export { getColorObj, getDetails, isUpperCase };
 //# sourceMappingURL=utils.js.map

package/build/esm/external/react-best-gradient-color-picker/dist/esm/utils/utils.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;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;"}

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

@@ -2,6 +2,8 @@ import { ColorPickerColors, ColorPickerVariable, IColorPickerColor } from './typ
 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;

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

@@ -1,16 +1,46 @@
 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 } from './constants.js';
 import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
 
 var _ColorPickerUtils;
-var ColorPickerUtils = /*#__PURE__*/_createClass(function ColorPickerUtils() {
-  _classCallCheck(this, ColorPickerUtils);
-});
+var ColorPickerUtils = /*#__PURE__*/function () {
+  function ColorPickerUtils() {
+    _classCallCheck(this, ColorPickerUtils);
+  }
+
+  return _createClass(ColorPickerUtils, null, [{
+    key: "isGradient",
+    value: function isGradient(color) {
+      return color.includes('linear-gradient') || color.includes('radial-gradient');
+    }
+  }]);
+}();
 _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();
 });

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

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-label-input.d.ts → color_label_input.d.ts}

@@ -3,5 +3,5 @@ interface IColorLabelInputProps {
     id: string;
     name?: string;
 }
-export declare const ColorLabelInput: React.FC<IColorLabelInputProps>;
+export declare const Color_label_input: React.FC<IColorLabelInputProps>;
 export {};

package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-label-input.js → color_label_input.js}

@@ -1,16 +1,16 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import Input from '../../controls/components/input.js';
-import { ColorPickerNewContext } from '../context.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 
-var ColorLabelInput = function ColorLabelInput(_ref) {
+var Color_label_input = function Color_label_input(_ref) {
   var id = _ref.id,
       name = _ref.name;
 
-  var _useContext = useContext(ColorPickerNewContext),
-      hex = _useContext.hex,
-      color = _useContext.color;
+  var _useColorPicker = useColorPicker(),
+      hex = _useColorPicker.hex,
+      color = _useColorPicker.color;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -25,5 +25,5 @@ var ColorLabelInput = function ColorLabelInput(_ref) {
   });
 };
 
-export { ColorLabelInput };
-//# sourceMappingURL=color-label-input.js.map
+export { Color_label_input };
+//# sourceMappingURL=color_label_input.js.map

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

@@ -1,40 +1,32 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
 import classnames from 'classnames';
-import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerContainer, cssColorPickerRbgcp } from '../css_classes.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { ColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js';
-import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
-import { ColorPickerShades } from './color-picker-shades.js';
-import { ColorPickerHeader } from './color-picker-header.js';
-import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
-import { ColorPickerVariables } from './color-picker-variables.js';
-import { ColorPickerFooter } from './color-picker-footer.js';
+import { Color_picker_header } from './color_picker_header.js';
+import { Color_picker_variables } from './color_picker_variables.js';
+import { Color_picker_footer } from './color_picker_footer.js';
+import { ColorPickerImpl } from './color_picker_impl/color_picker_impl.js';
 
 var ColorPickerContent = function ColorPickerContent() {
-  var _useContext = useContext(ColorPickerNewContext),
-      color = _useContext.color,
-      setColor = _useContext.setColor,
-      colorVariables = _useContext.colorVariables;
+  var _useColorPicker = useColorPicker(),
+      color = _useColorPicker.color,
+      setColor = _useColorPicker.setColor,
+      colorVariables = _useColorPicker.colorVariables;
 
   var colorValue = typeof color === 'string' ? color : color.value;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Color_picker_header, null), /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPickerContainer])
-  }, /*#__PURE__*/React.createElement(ColorPicker, {
+  }, /*#__PURE__*/React.createElement(ColorPickerImpl, {
     value: colorValue,
     onChange: setColor,
     width: COLOR_PICKER_WIDTH,
     height: COLOR_PICKER_HEIGHT,
-    hideColorTypeBtns: true,
-    hideColorGuide: true,
-    hideAdvancedSliders: true,
-    hideInputType: true,
-    hideInputs: true,
-    hidePresets: true,
     className: classnames(styles[cssColorPickerRbgcp], cssColorPickerRbgcp)
-  }), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerShades, null), (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.isVisible) && /*#__PURE__*/React.createElement(ColorPickerVariables, {
+  }), (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.isVisible) && /*#__PURE__*/React.createElement(Color_picker_variables, {
     variables: colorVariables.variables
-  })), /*#__PURE__*/React.createElement(ColorPickerFooter, null));
+  })), /*#__PURE__*/React.createElement(Color_picker_footer, null));
 };
 
 export { ColorPickerContent };

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

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

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

@@ -0,0 +1 @@
+export declare const ColorPickerControls: () => JSX.Element;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { GRADIENT_TYPES } from '../constants.js';
+import Stack from '../../stack/index.js';
+import { cssColorPickerControls } from '../css_classes.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import GradientBar from 'react-best-gradient-color-picker/dist/esm/components/GradientBar';
+import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
+import EyeDropper from 'react-best-gradient-color-picker/dist/esm/components/EyeDropper';
+import { ColorPickerGradientAngle } from './color_picker_gradient_controls/color_picker_gradient_angle.js';
+import GradientControls from 'react-best-gradient-color-picker/dist/esm/components/GradientControls';
+
+var ColorPickerControls = function ColorPickerControls() {
+  var _usePicker = usePicker(),
+      handleChange = _usePicker.handleChange;
+
+  var _useColorPicker = useColorPicker(),
+      gradientType = _useColorPicker.gradientType;
+
+  var isLinearGradient = gradientType === GRADIENT_TYPES.linear;
+
+  var _useColorPicker2 = useColorPicker(),
+      withGradient = _useColorPicker2.withGradient,
+      isCurrentValueGradient = _useColorPicker2.isCurrentValueGradient;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+    className: styles[cssColorPickerControls],
+    justify: withGradient ? 'space-between' : 'flex-end'
+  }, withGradient ? /*#__PURE__*/React.createElement(Stack, {
+    spacing: 8
+  }, /*#__PURE__*/React.createElement(ColorPickerModeToggler, null)) : null, /*#__PURE__*/React.createElement(EyeDropper, {
+    onSelect: handleChange
+  })), withGradient && isCurrentValueGradient ? /*#__PURE__*/React.createElement(Stack, {
+    justify: isLinearGradient ? 'space-between' : 'flex-end'
+  }, isLinearGradient ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerGradientAngle, null), " ", /*#__PURE__*/React.createElement(GradientControls, {
+    hideGradientType: true,
+    hideGradientAngle: true,
+    hideGradientStop: true
+  })) : null) : null, withGradient && isCurrentValueGradient ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(GradientBar, null)) : null);
+};
+
+export { ColorPickerControls };
+//# sourceMappingURL=color_picker_controls.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1 @@
+export declare const Color_picker_footer: () => JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-picker-footer.js → color_picker_footer.js}

@@ -3,19 +3,19 @@ import { useTranslation } from '../../../../../../external/react-i18next/dist/es
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import Button from '../../button/index.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
-import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerFooter } from '../css_classes.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
 
-var ColorPickerFooter = function ColorPickerFooter() {
+var Color_picker_footer = function Color_picker_footer() {
   var _useContext = useContext(DropdownContext),
       closeDropdown = _useContext.closeDropdown;
 
-  var _useContext2 = useContext(ColorPickerNewContext),
-      color = _useContext2.color,
-      handleCancel = _useContext2.handleCancel,
-      handleSave = _useContext2.handleSave;
+  var _useColorPicker = useColorPicker(),
+      color = _useColorPicker.color,
+      handleCancel = _useColorPicker.handleCancel,
+      handleSave = _useColorPicker.handleSave;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -45,5 +45,5 @@ var ColorPickerFooter = function ColorPickerFooter() {
   }, t('choose')));
 };
 
-export { ColorPickerFooter };
-//# sourceMappingURL=color-picker-footer.js.map
+export { Color_picker_footer };
+//# sourceMappingURL=color_picker_footer.js.map

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

@@ -0,0 +1 @@
+export declare const ColorPickerGradientAngle: () => JSX.Element;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { cssColorPickerGradientAngle, cssColorPickerGradientAngleInputWrapper, cssColorPickerGradientAngleInput } from '../../css_classes.js';
+import styles from '../../../../css/color_picker_new/main.module.less.js';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import { formatInputValues } from 'react-best-gradient-color-picker/dist/esm/utils/formatters';
+import { DegreesIcon } from 'react-best-gradient-color-picker/dist/esm/components/icon';
+
+var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
+  var _usePicker = usePicker(),
+      degrees = _usePicker.degrees,
+      onChange = _usePicker.onChange,
+      value = _usePicker.value;
+
+  var handleDegrees = function handleDegrees(e) {
+    var newValue = formatInputValues(e.target.value, 0, 360);
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerGradientAngle], " ")
+  }, /*#__PURE__*/React.createElement(DegreesIcon, null), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerGradientAngleInputWrapper]
+  }, /*#__PURE__*/React.createElement("input", {
+    value: degrees,
+    onChange: function onChange(e) {
+      return handleDegrees(e);
+    },
+    className: styles[cssColorPickerGradientAngleInput]
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+      top: 1,
+      fontWeight: 400,
+      fontSize: 13
+    }
+  }, "\xB0")));
+};
+
+export { ColorPickerGradientAngle };
+//# sourceMappingURL=color_picker_gradient_angle.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+export declare const COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES: {
+    colorPickerModeToggler: string;
+    colorPickerModeTogglerButton: string;
+    colorPickerModeTogglerButtonSolid: string;
+    colorPickerModeTogglerButtonLinearGradient: string;
+    colorPickerModeTogglerButtonSolidRadialGradient: string;
+    colorPickerModeTogglerButtonActive: string;
+};

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_gradient_controls/color_picker_gradient_controls_constants.js

@@ -0,0 +1,12 @@
+var colorPickerModeTogglerBaseCssClasses = 'color-picker-mode-toggler';
+var COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES = {
+  colorPickerModeToggler: colorPickerModeTogglerBaseCssClasses,
+  colorPickerModeTogglerButton: "".concat(colorPickerModeTogglerBaseCssClasses, "__button"),
+  colorPickerModeTogglerButtonSolid: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_solid"),
+  colorPickerModeTogglerButtonLinearGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_linear"),
+  colorPickerModeTogglerButtonSolidRadialGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_radial"),
+  colorPickerModeTogglerButtonActive: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_active")
+};
+
+export { COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES };
+//# sourceMappingURL=color_picker_gradient_controls_constants.js.map

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

@@ -0,0 +1 @@
+export declare const Color_picker_header: () => JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-picker-header.js → color_picker_header.js}

@@ -2,22 +2,22 @@ import React, { useContext, useEffect } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
-import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import IconClose from '../../../assets/icon_close.js';
 
-var ColorPickerHeader = function ColorPickerHeader() {
-  var _useContext = useContext(ColorPickerNewContext),
-      handleCancel = _useContext.handleCancel;
+var Color_picker_header = function Color_picker_header() {
+  var _useColorPicker = useColorPicker(),
+      handleCancel = _useColorPicker.handleCancel;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
       t = _useTranslation2[0];
 
-  var _useContext2 = useContext(DropdownContext),
-      closeDropdown = _useContext2.closeDropdown,
-      isOpen = _useContext2.isOpen;
+  var _useContext = useContext(DropdownContext),
+      closeDropdown = _useContext.closeDropdown,
+      isOpen = _useContext.isOpen;
 
   var handleCancelButton = function handleCancelButton() {
     closePicker();
@@ -45,5 +45,5 @@ var ColorPickerHeader = function ColorPickerHeader() {
   })));
 };
 
-export { ColorPickerHeader };
-//# sourceMappingURL=color-picker-header.js.map
+export { Color_picker_header };
+//# sourceMappingURL=color_picker_header.js.map

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

@@ -0,0 +1 @@
+export declare const ColorPickerImpl: ({ value, onChange, width, height, style, className }: any) => JSX.Element;

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

@@ -0,0 +1,39 @@
+import React, { useRef } from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectToString } from 'react-best-gradient-color-picker/dist/esm/utils/utils';
+import PickerContextWrapper from 'react-best-gradient-color-picker/dist/esm/context';
+import { PickerImpl } from './picker_impl.js';
+import { getStyles } from 'react-best-gradient-color-picker/dist/esm/styles/styles';
+
+var ColorPickerImpl = function ColorPickerImpl(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 'rgba(175, 51, 242, 1)' : _ref$value,
+      onChange = _ref.onChange,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 294 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 294 : _ref$height,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      className = _ref.className;
+  var safeValue = objectToString(value);
+  var contRef = useRef(null);
+  var defaultStyles = getStyles(true);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contRef,
+    className: className,
+    style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.body), style), {}, {
+      width: width
+    })
+  }, /*#__PURE__*/React.createElement(PickerContextWrapper, {
+    value: safeValue,
+    defaultStyles: defaultStyles,
+    onChange: onChange,
+    squareWidth: width,
+    squareHeight: height,
+    hideOpacity: false
+  }, /*#__PURE__*/React.createElement(PickerImpl, null)));
+};
+
+export { ColorPickerImpl };
+//# sourceMappingURL=color_picker_impl.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1 @@
+export declare const PickerImpl: () => JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_impl/picker_impl.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+import { cssColorPickerImpl, cssColorPickerSquare, cssColorPickerHue, cssColorPickerOpacity } from '../../css_classes.js';
+import styles from '../../../../css/color_picker_new/main.module.less.js';
+import 'react-best-gradient-color-picker/dist/esm/context';
+import Square from 'react-best-gradient-color-picker/dist/esm/components/Square';
+import 'react-best-gradient-color-picker/dist/esm/components/GradientBar';
+import Hue from 'react-best-gradient-color-picker/dist/esm/components/Hue';
+import Opacity from 'react-best-gradient-color-picker/dist/esm/components/Opacity';
+import { ColorPickerControls } from '../color_picker_controls.js';
+import { Color_picker_inputs } from '../color_picker_inputs/color_picker_inputs.js';
+import { Color_picker_shades } from '../color_picker_shades.js';
+
+var PickerImpl = function PickerImpl() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssColorPickerImpl, styles[cssColorPickerImpl])
+  }, /*#__PURE__*/React.createElement(ColorPickerControls, null), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerSquare]
+  }, /*#__PURE__*/React.createElement(Square, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerHue]
+  }, /*#__PURE__*/React.createElement(Hue, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerOpacity]
+  }, /*#__PURE__*/React.createElement(Opacity, null)), /*#__PURE__*/React.createElement(Color_picker_inputs, null), /*#__PURE__*/React.createElement(Color_picker_shades, null));
+};
+
+export { PickerImpl };
+//# sourceMappingURL=picker_impl.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-picker-swatch.js.map → color_picker_impl/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;"}
+{"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;"}

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

@@ -0,0 +1 @@
+export declare const Color_picker_inputs: () => JSX.Element;