@dreamcommerce/aurora 2.20.8 → 2.21.0-2

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var context = require('../context.js');
 var css_classes = require('../css_classes.js');
-var colorLabelInput = require('./color-label-input.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var color_label_input = require('./color_label_input.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
-var colorPickerSwatch = require('./color-picker-swatch.js');
+var color_picker_swatch = require('./color_picker_swatch.js');
 var color_picker_content = require('./color_picker_content.js');
 var dropdown = require('../../dropdown/components/dropdown.js');
 
@@ -19,8 +19,8 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   var id = _ref.id,
       name = _ref.name;
 
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      color = _useContext.color;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      color = _useColorPicker.color;
 
   var colorValue = typeof color === 'string' ? color : color.value;
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -29,9 +29,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputContainer])
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer])
-  }, /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.Color_picker_swatch, {
     color: colorValue
-  })), /*#__PURE__*/React__default['default'].createElement(colorLabelInput.ColorLabelInput, {
+  })), /*#__PURE__*/React__default['default'].createElement(color_label_input.Color_label_input, {
     id: id,
     name: name
   }))), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].MemoizedContent, {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var COLOR_PICKER_INITIAL_STATE = '#FFFFFF';
+var COLOR_PICKER_INITIAL_STATE = 'FFFFFF';
 var COLOR_PICKER_WIDTH = 247;
 var COLOR_PICKER_HEIGHT = 200;
 var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
@@ -14,6 +14,10 @@ var COLOR_PICKER_SWATCH_SIZES = {
   SMALL: 'small',
   BIG: 'big'
 };
+var GRADIENT_TYPES = {
+  linear: 'linear-gradient',
+  radial: 'radial-gradient'
+};
 
 exports.COLOR_PICKER_ALPHA_MAX_VALUE = COLOR_PICKER_ALPHA_MAX_VALUE;
 exports.COLOR_PICKER_HEIGHT = COLOR_PICKER_HEIGHT;
@@ -21,4 +25,5 @@ exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
 exports.COLOR_PICKER_SWATCH_SIZES = COLOR_PICKER_SWATCH_SIZES;
 exports.COLOR_PICKER_TYPES = COLOR_PICKER_TYPES;
 exports.COLOR_PICKER_WIDTH = COLOR_PICKER_WIDTH;
+exports.GRADIENT_TYPES = GRADIENT_TYPES;
 //# sourceMappingURL=constants.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js.map

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

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

@@ -20,7 +20,11 @@ var ColorPickerNewContext = /*#__PURE__*/React.createContext({
   setB: function setB() {},
   handleCancel: function handleCancel() {},
   handleSave: function handleSave() {},
-  handlePickSwatch: function handlePickSwatch() {}
+  setSolid: function setSolid() {},
+  setRadial: function setRadial() {},
+  setLinear: function setLinear() {},
+  isCurrentValueGradient: false,
+  withGradient: false
 });
 
 exports.ColorPickerNewContext = ColorPickerNewContext;

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

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

@@ -13,6 +13,11 @@ var cssColorPickerSwatchesHeaderIcon = 'color-picker__swatches-header-icon';
 var cssColorPickerSwatchesHeaderIconRotate = 'color-picker__swatches-header-icon_rotate-180';
 var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
 var cssColorPickerSwatchesSubContent = 'color-picker__swatches-subcontent';
+var cssColorPickerControls = 'color-picker__controls';
+var cssColorPickerCurrentColorPreview = 'color-picker__current-color-preview';
+var cssColorPickerGradientAngle = 'color-picker__gradient-angle';
+var cssColorPickerGradientAngleInput = 'color-picker__gradient-angle-input';
+var cssColorPickerGradientAngleInputWrapper = 'color-picker__gradient-angle-input-wrapper';
 var cssColorPickerSwatch = 'color-picker__swatch';
 var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
 var cssColorPickerSwatchBig = 'color-picker__swatch_big';
@@ -24,19 +29,32 @@ var cssColorPickerInputsType = 'color-picker__inputs-type';
 var cssColorPickerInputsValue = 'color-picker__inputs-value';
 var cssColorPickerInputsValueContainer = 'color-picker__inputs-value-container';
 var cssColorPickerFooter = 'color-picker__footer';
+var cssColorPickerHue = 'color-picker__hue';
+var cssColorPickerOpacity = 'color-picker__opacity';
+var cssColorPickerImpl = 'color-picker-impl';
+var cssColorPickerSquare = 'color-picker__square';
 
 exports.cssColorPicker = cssColorPicker;
 exports.cssColorPickerCloseIcon = cssColorPickerCloseIcon;
 exports.cssColorPickerContainer = cssColorPickerContainer;
+exports.cssColorPickerControls = cssColorPickerControls;
+exports.cssColorPickerCurrentColorPreview = cssColorPickerCurrentColorPreview;
 exports.cssColorPickerFooter = cssColorPickerFooter;
+exports.cssColorPickerGradientAngle = cssColorPickerGradientAngle;
+exports.cssColorPickerGradientAngleInput = cssColorPickerGradientAngleInput;
+exports.cssColorPickerGradientAngleInputWrapper = cssColorPickerGradientAngleInputWrapper;
 exports.cssColorPickerHeader = cssColorPickerHeader;
+exports.cssColorPickerHue = cssColorPickerHue;
+exports.cssColorPickerImpl = cssColorPickerImpl;
 exports.cssColorPickerInputColorSwatchContainer = cssColorPickerInputColorSwatchContainer;
 exports.cssColorPickerInputContainer = cssColorPickerInputContainer;
 exports.cssColorPickerInputs = cssColorPickerInputs;
 exports.cssColorPickerInputsType = cssColorPickerInputsType;
 exports.cssColorPickerInputsValue = cssColorPickerInputsValue;
 exports.cssColorPickerInputsValueContainer = cssColorPickerInputsValueContainer;
+exports.cssColorPickerOpacity = cssColorPickerOpacity;
 exports.cssColorPickerRbgcp = cssColorPickerRbgcp;
+exports.cssColorPickerSquare = cssColorPickerSquare;
 exports.cssColorPickerSwatch = cssColorPickerSwatch;
 exports.cssColorPickerSwatchBig = cssColorPickerSwatchBig;
 exports.cssColorPickerSwatchFill = cssColorPickerSwatchFill;

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

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

@@ -0,0 +1,183 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var constants = require('../constants.js');
+var color_picker_utils = require('../color_picker_utils.js');
+var isEqual = require('../../../../../../external/lodash/isEqual.js');
+var useColorPicker = require('../../../../../../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 = color_picker_utils.ColorPickerUtils.getColorPickerValue(initialColor);
+
+  var _useState = React.useState(initialColorObject),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      color = _useState2[0],
+      setColorValue = _useState2[1];
+
+  var _useState3 = React.useState(),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      previousSolidColor = _useState4[0],
+      setPreviousSolidColor = _useState4[1];
+
+  var _useState5 = React.useState(),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      previousGradientColor = _useState6[0],
+      setPreviousGradientColor = _useState6[1];
+
+  var _useState7 = React.useState(initialColor),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      prevInitialColor = _useState8[0],
+      setPrevInitialColor = _useState8[1];
+
+  var withGradient = isWithGradient || initialColorObject.value;
+
+  var setColor = function setColor(newColor) {
+    var newColorValue = color_picker_utils.ColorPickerUtils.getColorPickerValue(newColor);
+    !color_picker_utils.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
+      };
+    });
+  };
+
+  React.useEffect(function () {
+    if (!initialColor) return;
+
+    if (!isEqual['default'](initialColor, prevInitialColor)) {
+      setColor(initialColor);
+      setPrevInitialColor(initialColor);
+    }
+  }, [initialColor]);
+
+  var _useBestGradientColor = useColorPicker.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' ? color_picker_utils.ColorPickerUtils.getTinyColorInstance(color) : color_picker_utils.ColorPickerUtils.getTinyColorInstance(color.value);
+  var hex = color_picker_utils.ColorPickerUtils.getHexValue(tinyColor);
+
+  var _useState9 = React.useState(rgbaArr[3] * 100),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      alpha = _useState10[0],
+      setAlpha = _useState10[1];
+
+  var _useState11 = React.useState("".concat(alpha)),
+      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+      alphaValue = _useState12[0],
+      setAlphaValue = _useState12[1];
+
+  var setSolid = function setSolid(value) {
+    setColor(color_picker_utils.ColorPickerUtils.getColorPickerValue(value).value);
+  };
+
+  var setLinear = function setLinear(value) {
+    var gradientColor = value || defaultGradient;
+
+    if (value && !color_picker_utils.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 && !color_picker_utils.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 > constants.COLOR_PICKER_ALPHA_MAX_VALUE ? constants.COLOR_PICKER_ALPHA_MAX_VALUE : value);
+  };
+
+  React.useEffect(function () {
+    setA(alpha);
+  }, [alpha]);
+  React.useEffect(function () {
+    setAlphaValue("".concat(Math.round(rgbaArr[3] * 100)));
+  }, [rgbaArr[3]]);
+  React.useEffect(function () {
+    var colorObject = color_picker_utils.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(color_picker_utils.ColorPickerUtils.getColorPickerValue(initialColor));
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+
+  var handleSave = function handleSave() {
+    onSave === null || onSave === void 0 || onSave(color_picker_utils.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
+  };
+};
+
+exports.default = useSetupColorPicker;
+//# sourceMappingURL=setup_color_piceker.js.map

package/build/{esm/external/react-best-gradient-color-picker/dist/esm/components/ComparibleColors.js.map → cjs/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,8CAAkD;AACxE,6BAA6B,8FAAkG;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/hooks/use_color_picker.js

@@ -3,134 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var useColorPicker$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
-var constants = require('../constants.js');
-var color_picker_utils = require('../color_picker_utils.js');
-var isEqual = require('../../../../../../external/lodash/isEqual.js');
+var context = require('../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 = React.useState({
-    value: initialColor ? color_picker_utils.ColorPickerUtils.getTinyColorInstance(typeof initialColor === 'string' ? initialColor : initialColor === null || initialColor === void 0 ? void 0 : initialColor.value).toHex8() : constants.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 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      color = _useState2[0],
-      setColorValue = _useState2[1];
-
-  var _useState3 = React.useState(initialColorVariables),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 1),
-      colorVariables = _useState4[0];
-
-  var _useState5 = React.useState(initialColor),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      prevInitalColor = _useState6[0],
-      setPrevInitialColor = _useState6[1];
-
-  var setColor = function setColor(color) {
-    var hexColor = color_picker_utils.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
-      };
-    });
-  };
-
-  React.useEffect(function () {
-    if (!initialColor) return;
-
-    if (!isEqual['default'](initialColor, prevInitalColor)) {
-      setColor(initialColor);
-      setPrevInitialColor(initialColor);
-    }
-  }, [initialColor]);
-
-  var _useState7 = React.useState(color),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      choosenColor = _useState8[0],
-      setChoosenColor = _useState8[1];
-
-  var _useBestGradientColor = useColorPicker$1.useColorPicker(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' ? color_picker_utils.ColorPickerUtils.getTinyColorInstance(color) : color_picker_utils.ColorPickerUtils.getTinyColorInstance(color.value);
-  var hex = color_picker_utils.ColorPickerUtils.getHexValue(tinyColor);
-
-  var _useState9 = React.useState(rgbaArr[3] * 100),
-      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      alpha = _useState10[0],
-      setAlpha = _useState10[1];
-
-  var _useState11 = React.useState("".concat(alpha)),
-      _useState12 = _rollupPluginBabelHelpers.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 > constants.COLOR_PICKER_ALPHA_MAX_VALUE ? constants.COLOR_PICKER_ALPHA_MAX_VALUE : value);
-  };
-
-  React.useEffect(function () {
-    setA(alpha);
-  }, [alpha]);
-  React.useEffect(function () {
-    setAlphaValue("".concat(Math.round(rgbaArr[3] * 100)));
-  }, [rgbaArr[3]]);
-  React.useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(color_picker_utils.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(color_picker_utils.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 React.useContext(context.ColorPickerNewContext);
 };
 
-exports.default = useColorPicker;
+exports.useColorPicker = useColorPicker;
 //# sourceMappingURL=use_color_picker.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA,+BAA+B,8FAAkG;AACjI;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;AACA;AACA;AACA;AACA;"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var context = require('./context.js');
 var pure_color_picker = require('./components/pure_color_picker.js');
-var use_color_picker = require('./hooks/use_color_picker.js');
+var setup_color_piceker = require('./hooks/setup_color_piceker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,28 +18,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 = use_color_picker['default']({
+  var _useSetupColorPicker = setup_color_piceker['default']({
     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 = React.useMemo(function () {
     return {
@@ -56,16 +65,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__default['default'].createElement(context.ColorPickerNewContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], {
-    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__default['default'].createElement(context.ColorPickerNewContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], {
+      id: id,
+      name: name,
+      colorVariables: colorVariables
+    }))
+  );
 };
 
 exports.default = ColorPickerNewWithContext;

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

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

@@ -23,7 +23,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__default['default'].createElement(index['default'], {
     errors: errors,
     name: name,
@@ -42,7 +43,8 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
     colorVariables: colorVariables,
     onChange: onChange,
     onCancel: onCancel,
-    onSave: onSave
+    onSave: onSave,
+    withGradient: withGradient
   }))), /*#__PURE__*/React__default['default'].createElement(index['default'].Errors, null));
 };
 

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