@dreamcommerce/aurora 2.20.7 → 2.21.0-1

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

@@ -2,84 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var constants = require('../constants.js');
-var formatters = require('./formatters.js');
 
-var barSize = constants.config.barSize,
-    crossSize = constants.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 = formatters.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 formatters.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 formatters.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(' ', '')
@@ -112,37 +56,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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, c), {}, {
+    return __assign(__assign({}, c), {
       index: i
     });
   });
@@ -158,10 +74,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);
 };
 
@@ -178,12 +94,7 @@ var getDetails = function getDetails(value) {
   };
 };
 
-exports.computePickerPosition = computePickerPosition;
-exports.computeSquareXY = computeSquareXY;
 exports.getColorObj = getColorObj;
 exports.getDetails = getDetails;
-exports.getHandleValue = getHandleValue;
 exports.isUpperCase = isUpperCase;
-exports.objectToString = objectToString;
-exports.safeBounds = safeBounds;
 //# sourceMappingURL=utils.js.map

package/build/cjs/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;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;"}

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

@@ -3,18 +3,48 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var constants = require('./constants.js');
 var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
 
 var _ColorPickerUtils;
-var ColorPickerUtils = /*#__PURE__*/_rollupPluginBabelHelpers.createClass(function ColorPickerUtils() {
-  _rollupPluginBabelHelpers.classCallCheck(this, ColorPickerUtils);
-});
+var ColorPickerUtils = /*#__PURE__*/function () {
+  function ColorPickerUtils() {
+    _rollupPluginBabelHelpers.classCallCheck(this, ColorPickerUtils);
+  }
+
+  return _rollupPluginBabelHelpers.createClass(ColorPickerUtils, null, [{
+    key: "isGradient",
+    value: function isGradient(color) {
+      return color.includes('linear-gradient') || color.includes('radial-gradient');
+    }
+  }]);
+}();
 _ColorPickerUtils = ColorPickerUtils;
 
 _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
   return tinycolor['default'](color);
 });
 
+_rollupPluginBabelHelpers.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: constants.COLOR_PICKER_INITIAL_STATE,
+    name: ''
+  };
+  var parsedColorValue = initialColorValue ? _ColorPickerUtils.getTinyColorInstance(initialColorValue).toHex8() : constants.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 : ''
+  };
+});
+
 _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
   return colorSet.toRgb();
 });

package/build/cjs/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;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker_new/components/{color-label-input.js → color_label_input.js}

@@ -6,19 +6,19 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var input = require('../../controls/components/input.js');
-var context = require('../context.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ColorLabelInput = function ColorLabelInput(_ref) {
+var Color_label_input = function Color_label_input(_ref) {
   var id = _ref.id,
       name = _ref.name;
 
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      hex = _useContext.hex,
-      color = _useContext.color;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      hex = _useColorPicker.hex,
+      color = _useColorPicker.color;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -33,5 +33,5 @@ var ColorLabelInput = function ColorLabelInput(_ref) {
   });
 };
 
-exports.ColorLabelInput = ColorLabelInput;
-//# sourceMappingURL=color-label-input.js.map
+exports.Color_label_input = Color_label_input;
+//# sourceMappingURL=color_label_input.js.map

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

@@ -3,17 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var constants = require('../constants.js');
 var classnames = require('classnames');
-var context = require('../context.js');
 var css_classes = require('../css_classes.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
-var index = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
-var constants = require('../constants.js');
-var colorPickerShades = require('./color-picker-shades.js');
-var colorPickerHeader = require('./color-picker-header.js');
-var colorPickerInputs = require('./color-picker-inputs/color-picker-inputs.js');
-var colorPickerVariables = require('./color-picker-variables.js');
-var colorPickerFooter = require('./color-picker-footer.js');
+var color_picker_header = require('./color_picker_header.js');
+var color_picker_variables = require('./color_picker_variables.js');
+var color_picker_footer = require('./color_picker_footer.js');
+var color_picker_impl = require('./color_picker_impl/color_picker_impl.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,29 +19,23 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var ColorPickerContent = function ColorPickerContent() {
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      color = _useContext.color,
-      setColor = _useContext.setColor,
-      colorVariables = _useContext.colorVariables;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      color = _useColorPicker.color,
+      setColor = _useColorPicker.setColor,
+      colorVariables = _useColorPicker.colorVariables;
 
   var colorValue = typeof color === 'string' ? color : color.value;
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(color_picker_header.Color_picker_header, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerContainer])
-  }, /*#__PURE__*/React__default['default'].createElement(index.ColorPicker, {
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_impl.ColorPickerImpl, {
     value: colorValue,
     onChange: setColor,
     width: constants.COLOR_PICKER_WIDTH,
     height: constants.COLOR_PICKER_HEIGHT,
-    hideColorTypeBtns: true,
-    hideColorGuide: true,
-    hideAdvancedSliders: true,
-    hideInputType: true,
-    hideInputs: true,
-    hidePresets: true,
     className: classnames__default['default'](main_module['default'][css_classes.cssColorPickerRbgcp], css_classes.cssColorPickerRbgcp)
-  }), /*#__PURE__*/React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null), /*#__PURE__*/React__default['default'].createElement(colorPickerShades.ColorPickerShades, null), (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.isVisible) && /*#__PURE__*/React__default['default'].createElement(colorPickerVariables.ColorPickerVariables, {
+  }), (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.isVisible) && /*#__PURE__*/React__default['default'].createElement(color_picker_variables.Color_picker_variables, {
     variables: colorVariables.variables
-  })), /*#__PURE__*/React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null));
+  })), /*#__PURE__*/React__default['default'].createElement(color_picker_footer.Color_picker_footer, null));
 };
 
 exports.ColorPickerContent = ColorPickerContent;

package/build/cjs/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;AACA;AACA;AACA;AACA,oBAAoB,0FAA8F;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;"}
+{"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/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_controls.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var constants = require('../constants.js');
+var index = require('../../stack/index.js');
+var css_classes = require('../css_classes.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var PickerContextWrapper = require('react-best-gradient-color-picker/dist/esm/context');
+var GradientBar = require('react-best-gradient-color-picker/dist/esm/components/GradientBar');
+var color_picker_mode_toggler = require('./color_picker_mode_toggler.js');
+var EyeDropper = require('react-best-gradient-color-picker/dist/esm/components/EyeDropper');
+var color_picker_gradient_angle = require('./color_picker_gradient_controls/color_picker_gradient_angle.js');
+var GradientControls = require('react-best-gradient-color-picker/dist/esm/components/GradientControls');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var GradientBar__default = /*#__PURE__*/_interopDefaultLegacy(GradientBar);
+var EyeDropper__default = /*#__PURE__*/_interopDefaultLegacy(EyeDropper);
+var GradientControls__default = /*#__PURE__*/_interopDefaultLegacy(GradientControls);
+
+var ColorPickerControls = function ColorPickerControls() {
+  var _usePicker = PickerContextWrapper.usePicker(),
+      handleChange = _usePicker.handleChange;
+
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      gradientType = _useColorPicker.gradientType;
+
+  var isLinearGradient = gradientType === constants.GRADIENT_TYPES.linear;
+
+  var _useColorPicker2 = use_color_picker.useColorPicker(),
+      withGradient = _useColorPicker2.withGradient,
+      isCurrentValueGradient = _useColorPicker2.isCurrentValueGradient;
+
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index['default'], {
+    className: main_module['default'][css_classes.cssColorPickerControls],
+    justify: withGradient ? 'space-between' : 'flex-end'
+  }, withGradient ? /*#__PURE__*/React__default['default'].createElement(index['default'], {
+    spacing: 8
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_mode_toggler.ColorPickerModeToggler, null)) : null, /*#__PURE__*/React__default['default'].createElement(EyeDropper__default['default'], {
+    onSelect: handleChange
+  })), withGradient && isCurrentValueGradient ? /*#__PURE__*/React__default['default'].createElement(index['default'], {
+    justify: isLinearGradient ? 'space-between' : 'flex-end'
+  }, isLinearGradient ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(color_picker_gradient_angle.ColorPickerGradientAngle, null), " ", /*#__PURE__*/React__default['default'].createElement(GradientControls__default['default'], {
+    hideGradientType: true,
+    hideGradientAngle: true,
+    hideGradientStop: true
+  })) : null) : null, withGradient && isCurrentValueGradient ? /*#__PURE__*/React__default['default'].createElement(index['default'], null, /*#__PURE__*/React__default['default'].createElement(GradientBar__default['default'], null)) : null);
+};
+
+exports.ColorPickerControls = ColorPickerControls;
+//# sourceMappingURL=color_picker_controls.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -7,8 +7,8 @@ var useTranslation = require('../../../../../../external/react-i18next/dist/es/u
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var index$1 = require('../../button/index.js');
 var index = require('../../dropdown/context/index.js');
-var context = require('../context.js');
 var css_classes = require('../css_classes.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var color_picker_utils = require('../color_picker_utils.js');
 
@@ -16,14 +16,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ColorPickerFooter = function ColorPickerFooter() {
+var Color_picker_footer = function Color_picker_footer() {
   var _useContext = React.useContext(index.DropdownContext),
       closeDropdown = _useContext.closeDropdown;
 
-  var _useContext2 = React.useContext(context.ColorPickerNewContext),
-      color = _useContext2.color,
-      handleCancel = _useContext2.handleCancel,
-      handleSave = _useContext2.handleSave;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      color = _useColorPicker.color,
+      handleCancel = _useColorPicker.handleCancel,
+      handleSave = _useColorPicker.handleSave;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -53,5 +53,5 @@ var ColorPickerFooter = function ColorPickerFooter() {
   }, t('choose')));
 };
 
-exports.ColorPickerFooter = ColorPickerFooter;
-//# sourceMappingURL=color-picker-footer.js.map
+exports.Color_picker_footer = Color_picker_footer;
+//# sourceMappingURL=color_picker_footer.js.map

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

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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")
+};
+
+exports.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES = COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES;
+//# sourceMappingURL=color_picker_gradient_controls_constants.js.map

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

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

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

@@ -6,8 +6,8 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../../dropdown/context/index.js');
-var context = require('../context.js');
 var css_classes = require('../css_classes.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var icon_close = require('../../../assets/icon_close.js');
 
@@ -15,17 +15,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ColorPickerHeader = function ColorPickerHeader() {
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      handleCancel = _useContext.handleCancel;
+var Color_picker_header = function Color_picker_header() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      handleCancel = _useColorPicker.handleCancel;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
       t = _useTranslation2[0];
 
-  var _useContext2 = React.useContext(index.DropdownContext),
-      closeDropdown = _useContext2.closeDropdown,
-      isOpen = _useContext2.isOpen;
+  var _useContext = React.useContext(index.DropdownContext),
+      closeDropdown = _useContext.closeDropdown,
+      isOpen = _useContext.isOpen;
 
   var handleCancelButton = function handleCancelButton() {
     closePicker();
@@ -53,5 +53,5 @@ var ColorPickerHeader = function ColorPickerHeader() {
   })));
 };
 
-exports.ColorPickerHeader = ColorPickerHeader;
-//# sourceMappingURL=color-picker-header.js.map
+exports.Color_picker_header = Color_picker_header;
+//# sourceMappingURL=color_picker_header.js.map

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

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var utils = require('react-best-gradient-color-picker/dist/esm/utils/utils');
+var PickerContextWrapper = require('react-best-gradient-color-picker/dist/esm/context');
+var picker_impl = require('./picker_impl.js');
+var styles = require('react-best-gradient-color-picker/dist/esm/styles/styles');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PickerContextWrapper__default = /*#__PURE__*/_interopDefaultLegacy(PickerContextWrapper);
+
+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 = utils.objectToString(value);
+  var contRef = React.useRef(null);
+  var defaultStyles = styles.getStyles(true);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: contRef,
+    className: className,
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.body), style), {}, {
+      width: width
+    })
+  }, /*#__PURE__*/React__default['default'].createElement(PickerContextWrapper__default['default'], {
+    value: safeValue,
+    defaultStyles: defaultStyles,
+    onChange: onChange,
+    squareWidth: width,
+    squareHeight: height,
+    hideOpacity: false
+  }, /*#__PURE__*/React__default['default'].createElement(picker_impl.PickerImpl, null)));
+};
+
+exports.ColorPickerImpl = ColorPickerImpl;
+//# sourceMappingURL=color_picker_impl.js.map

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

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