@dreamcommerce/aurora 2.21.0-3 → 2.21.0-5

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

@@ -17,6 +17,25 @@ var ColorPickerUtils = /*#__PURE__*/function () {
     value: function isGradient(color) {
       return color.includes('linear-gradient') || color.includes('radial-gradient');
     }
+  }, {
+    key: "getColorPickerGradientValue",
+    value: function getColorPickerGradientValue(gradient) {
+      var _gradient$degrees;
+
+      return {
+        gradientType: gradient.gradientType,
+        angle: gradient.gradientType === constants.GRADIENT_TYPES.radial ? null : parseFloat((_gradient$degrees = gradient.degrees) !== null && _gradient$degrees !== void 0 ? _gradient$degrees : ''),
+        radialShape: gradient.gradientType === constants.GRADIENT_TYPES.radial ? constants.GRADIENT_RADIAL_SHAPES.circle : undefined,
+        colors: gradient.colors.map(function (_ref) {
+          var left = _ref.left,
+              value = _ref.value;
+          return {
+            stop: left,
+            value: ColorPickerUtils.getTinyColorInstance(value).toHex8()
+          };
+        })
+      };
+    }
   }]);
 }();
 _ColorPickerUtils = ColorPickerUtils;
@@ -88,9 +107,9 @@ _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getAllColorTypes", f
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, allColorTypes), variableName && variableName);
 });
 
-_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getVariableShades", function (_ref) {
-  var color = _ref.color,
-      name = _ref.name;
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getVariableShades", function (_ref2) {
+  var color = _ref2.color,
+      name = _ref2.name;
 
   var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
 

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;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;"}
+{"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;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

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var Color_label_input = function Color_label_input(_ref) {
+var ColorPickerInput = function ColorPickerInput(_ref) {
   var id = _ref.id,
       name = _ref.name;
 
@@ -33,5 +33,5 @@ var Color_label_input = function Color_label_input(_ref) {
   });
 };
 
-exports.Color_label_input = Color_label_input;
+exports.ColorPickerInput = ColorPickerInput;
 //# sourceMappingURL=color_label_input.js.map

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

@@ -6,8 +6,8 @@ var React = require('react');
 var constants = require('../constants.js');
 var classnames = require('classnames');
 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 use_color_picker = require('../hooks/use_color_picker.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');

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

@@ -6,8 +6,8 @@ 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 use_color_picker = require('../hooks/use_color_picker.js');
 var context = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
 var color_picker_mode_toggler = require('./color_picker_mode_toggler.js');
 var EyeDropper = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js');

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

@@ -8,8 +8,8 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var index$1 = require('../../button/index.js');
 var index = require('../../dropdown/context/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 use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_utils = require('../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -7,9 +7,9 @@ var useTranslation = require('../../../../../../external/react-i18next/dist/es/u
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../../dropdown/context/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 icon_close = require('../../../assets/icon_close.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 }; }
 

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

@@ -6,8 +6,8 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var classnames = require('classnames');
 var index = require('../../stack/index.js');
-var use_color_picker = require('../hooks/use_color_picker.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_gradient_controls_constants = require('./color_picker_gradient_controls/color_picker_gradient_controls_constants.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_shades.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 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 use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_utils = require('../color_picker_utils.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
 
@@ -87,11 +87,12 @@ var Color_picker_shades = function Color_picker_shades() {
       setColor === null || setColor === void 0 || setColor(colorHex);
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.Color_picker_swatch, {
+    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
-      color: colorHex
+      color: colorHex,
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny)
     });
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_swatch.js

@@ -8,23 +8,21 @@ var constants = require('../constants.js');
 var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
-var color_picker_utils = require('../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var Color_picker_swatch = function Color_picker_swatch(_ref) {
+var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
+      cssColor = _ref.cssColor,
       size = _ref.size,
       onClick = _ref.onClick;
-  var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(color);
-  var colorHex = color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny);
-  var colorHolderClassNames = classnames__default['default'](main_module['default'][css_classes.cssColorPickerSwatch], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][css_classes.cssColorPickerSwatchSmall], size === constants.COLOR_PICKER_SWATCH_SIZES.SMALL), main_module['default'][css_classes.cssColorPickerSwatchBig], size === constants.COLOR_PICKER_SWATCH_SIZES.BIG));
+  var colorHolderClassNames = classnames__default['default'](main_module['default'][css_classes.cssColorPickerSwatch], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][css_classes.cssColorPickerSwatchSmall], size === constants.ColorPickerSwatch_SIZES.SMALL), main_module['default'][css_classes.cssColorPickerSwatchBig], size === constants.ColorPickerSwatch_SIZES.BIG));
 
   var handleOnClick = function handleOnClick() {
-    onClick === null || onClick === void 0 || onClick(colorHex);
+    onClick === null || onClick === void 0 || onClick(color);
   };
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -33,10 +31,10 @@ var Color_picker_swatch = function Color_picker_swatch(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes.cssColorPickerSwatchFill],
     style: {
-      backgroundColor: "".concat(colorHex)
+      background: "".concat(cssColor)
     }
   }));
 };
 
-exports.Color_picker_swatch = Color_picker_swatch;
+exports.ColorPickerSwatch = ColorPickerSwatch;
 //# sourceMappingURL=color_picker_swatch.js.map

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

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

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

@@ -6,11 +6,11 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.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 use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_utils = require('../color_picker_utils.js');
-var color_picker_swatch = require('./color_picker_swatch.js');
 var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
+var color_picker_swatch = require('./color_picker_swatch.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -71,11 +71,12 @@ var Color_picker_variables = function Color_picker_variables(_ref) {
       });
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.Color_picker_swatch, {
+    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: colorHex
+      color: colorHex,
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny)
     });
   })), isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes.cssColorPickerSwatchesSubContent]
@@ -87,11 +88,13 @@ var Color_picker_variables = function Color_picker_variables(_ref) {
       });
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.Color_picker_swatch, {
+    console.log('variable.value', variable.value);
+    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: variable.value
+      color: variable.value,
+      cssColor: variable.value
     });
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/current_color_preview.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 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 use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_utils = require('../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var css_classes = require('../css_classes.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 use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_utils = require('../color_picker_utils.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');
+var color_label_input = require('./color_label_input.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,15 +24,17 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
       color = _useColorPicker.color;
 
   var colorValue = typeof color === 'string' ? color : color.value;
+  var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(colorValue);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPicker])
   }, /*#__PURE__*/React__default['default'].createElement(dropdown['default'], null, /*#__PURE__*/React__default['default'].createElement(dropdown['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement("div", {
     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(color_picker_swatch.Color_picker_swatch, {
-    color: colorValue
-  })), /*#__PURE__*/React__default['default'].createElement(color_label_input.Color_label_input, {
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+    color: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValue(colorTiny),
+    cssColor: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny)
+  })), /*#__PURE__*/React__default['default'].createElement(color_label_input.ColorPickerInput, {
     id: id,
     name: name
   }))), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].MemoizedContent, {

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

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

@@ -10,7 +10,7 @@ var COLOR_PICKER_TYPES = {
   HEX: 'hex',
   RGB: 'rgb'
 };
-var COLOR_PICKER_SWATCH_SIZES = {
+var ColorPickerSwatch_SIZES = {
   SMALL: 'small',
   BIG: 'big'
 };
@@ -18,12 +18,17 @@ var GRADIENT_TYPES = {
   linear: 'linear-gradient',
   radial: 'radial-gradient'
 };
+var GRADIENT_RADIAL_SHAPES = {
+  circle: 'circle',
+  ellipse: 'ellipse'
+};
 
 exports.COLOR_PICKER_ALPHA_MAX_VALUE = COLOR_PICKER_ALPHA_MAX_VALUE;
 exports.COLOR_PICKER_HEIGHT = COLOR_PICKER_HEIGHT;
 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.ColorPickerSwatch_SIZES = ColorPickerSwatch_SIZES;
+exports.GRADIENT_RADIAL_SHAPES = GRADIENT_RADIAL_SHAPES;
 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;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;"}

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

@@ -9,7 +9,7 @@ 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 defaultGradient = 'linear-gradient(90deg, #000000 0%, #FFFFFF 100%)';
 
 var useSetupColorPicker = function useSetupColorPicker(_ref) {
   var initialColor = _ref.initialColor,
@@ -137,13 +137,9 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
   React.useEffect(function () {
     var colorObject = color_picker_utils.ColorPickerUtils.getAllColorTypes(color);
     var gradientObject = getGradientObject();
-
-    if (gradientObject !== null && gradientObject !== void 0 && gradientObject.isGradient) {
-      gradientObject.gradientString = color.value;
-      colorObject.gradient = gradientObject;
-    }
-
-    onChange === null || onChange === void 0 || onChange(colorObject);
+    onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, colorObject), {}, {
+      gradient: gradientObject !== null && gradientObject !== void 0 && gradientObject.isGradient ? color_picker_utils.ColorPickerUtils.getColorPickerGradientValue(gradientObject) : undefined
+    }));
   }, [color]);
 
   var handleCancel = function handleCancel() {

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

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var constants = require('./components/color_picker_new/constants.js');
 var index$u = require('./components/modal/hoc/absolute_modal/index.js');
 var index = require('./components/accordion/index.js');
 var index$7 = require('./components/stack/index.js');
@@ -97,6 +98,8 @@ var index$M = require('./components/with_loader/index.js');
 
 
 
+exports.GRADIENT_RADIAL_SHAPES = constants.GRADIENT_RADIAL_SHAPES;
+exports.GRADIENT_TYPES = constants.GRADIENT_TYPES;
 exports.AbsoluteModal = index$u['default'];
 exports.Accordion = index['default'];
 exports.Stack = index$7['default'];

package/build/cjs/packages/aurora/src/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -1,4 +1,4 @@
-import { ColorPickerColors, ColorPickerVariable, IColorPickerColor } from './types';
+import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, TGradientColoPickerLibGradientObject, TGradientObject } from './types';
 import tinycolor from 'tinycolor2';
 export declare class ColorPickerUtils {
     static getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
@@ -14,4 +14,5 @@ export declare class ColorPickerUtils {
         name: string;
     }) => ColorPickerVariable[];
     private static convertVariableShadesToHex;
+    static getColorPickerGradientValue(gradient: TGradientColoPickerLibGradientObject): TGradientObject;
 }

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

@@ -1,5 +1,5 @@
 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 { COLOR_PICKER_INITIAL_STATE, GRADIENT_TYPES, GRADIENT_RADIAL_SHAPES } from './constants.js';
 import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
 
 var _ColorPickerUtils;
@@ -13,6 +13,25 @@ var ColorPickerUtils = /*#__PURE__*/function () {
     value: function isGradient(color) {
       return color.includes('linear-gradient') || color.includes('radial-gradient');
     }
+  }, {
+    key: "getColorPickerGradientValue",
+    value: function getColorPickerGradientValue(gradient) {
+      var _gradient$degrees;
+
+      return {
+        gradientType: gradient.gradientType,
+        angle: gradient.gradientType === GRADIENT_TYPES.radial ? null : parseFloat((_gradient$degrees = gradient.degrees) !== null && _gradient$degrees !== void 0 ? _gradient$degrees : ''),
+        radialShape: gradient.gradientType === GRADIENT_TYPES.radial ? GRADIENT_RADIAL_SHAPES.circle : undefined,
+        colors: gradient.colors.map(function (_ref) {
+          var left = _ref.left,
+              value = _ref.value;
+          return {
+            stop: left,
+            value: ColorPickerUtils.getTinyColorInstance(value).toHex8()
+          };
+        })
+      };
+    }
   }]);
 }();
 _ColorPickerUtils = ColorPickerUtils;
@@ -84,9 +103,9 @@ _defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
   return _objectSpread2(_objectSpread2({}, allColorTypes), variableName && variableName);
 });
 
-_defineProperty(ColorPickerUtils, "getVariableShades", function (_ref) {
-  var color = _ref.color,
-      name = _ref.name;
+_defineProperty(ColorPickerUtils, "getVariableShades", function (_ref2) {
+  var color = _ref2.color,
+      name = _ref2.name;
 
   var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
 

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;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;"}
+{"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;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

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

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

@@ -4,7 +4,7 @@ import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rol
 import Input from '../../controls/components/input.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 
-var Color_label_input = function Color_label_input(_ref) {
+var ColorPickerInput = function ColorPickerInput(_ref) {
   var id = _ref.id,
       name = _ref.name;
 
@@ -25,5 +25,5 @@ var Color_label_input = function Color_label_input(_ref) {
   });
 };
 
-export { Color_label_input };
+export { ColorPickerInput };
 //# sourceMappingURL=color_label_input.js.map

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
 import classnames from 'classnames';
 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 { useColorPicker } from '../hooks/use_color_picker.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';

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

@@ -2,8 +2,8 @@ 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 { useColorPicker } from '../hooks/use_color_picker.js';
 import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
 import Dropper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js';

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

@@ -4,8 +4,8 @@ import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rol
 import Button from '../../button/index.js';
 import { DropdownContext } from '../../dropdown/context/index.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 { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
 
 var Color_picker_footer = function Color_picker_footer() {

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

@@ -3,9 +3,9 @@ import { useTranslation } from '../../../../../../external/react-i18next/dist/es
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { DropdownContext } from '../../dropdown/context/index.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';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var Color_picker_header = function Color_picker_header() {
   var _useColorPicker = useColorPicker(),

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import classnames from 'classnames';
 import Stack from '../../stack/index.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import { COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES } from './color_picker_gradient_controls/color_picker_gradient_controls_constants.js';
 
 var ColorPickerModeToggler = function ColorPickerModeToggler() {

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
-import { Color_picker_swatch } from './color_picker_swatch.js';
+import { ColorPickerSwatch } from './color_picker_swatch.js';
 
 var Color_picker_shades = function Color_picker_shades() {
   var _useColorPicker = useColorPicker(),
@@ -79,11 +79,12 @@ var Color_picker_shades = function Color_picker_shades() {
       setColor === null || setColor === void 0 || setColor(colorHex);
     };
 
-    return /*#__PURE__*/React.createElement(Color_picker_swatch, {
+    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
-      color: colorHex
+      color: colorHex,
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny)
     });
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_swatch.d.ts

@@ -1,10 +1,11 @@
-import { ColorPickerColorTypes, ColorPickerColors } from '../types';
-import { COLOR_PICKER_SWATCH_SIZES } from '../constants';
+import { ColorPickerColorTypes } from '../types';
+import { ColorPickerSwatch_SIZES } from '../constants';
 import React from 'react';
 interface IColorPickerSwatchProps {
-    color: ColorPickerColors;
-    size?: typeof COLOR_PICKER_SWATCH_SIZES[keyof typeof COLOR_PICKER_SWATCH_SIZES];
+    color: string;
+    cssColor: string;
+    size?: typeof ColorPickerSwatch_SIZES[keyof typeof ColorPickerSwatch_SIZES];
     onClick?: (color: ColorPickerColorTypes['hex']) => void;
 }
-export declare const Color_picker_swatch: React.FC<IColorPickerSwatchProps>;
+export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
 export {};

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

@@ -1,21 +1,19 @@
 import React from 'react';
 import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { COLOR_PICKER_SWATCH_SIZES } from '../constants.js';
+import { ColorPickerSwatch_SIZES } from '../constants.js';
 import classnames from 'classnames';
 import { cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchSmall, cssColorPickerSwatchFill } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 
-var Color_picker_swatch = function Color_picker_swatch(_ref) {
+var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
+      cssColor = _ref.cssColor,
       size = _ref.size,
       onClick = _ref.onClick;
-  var colorTiny = ColorPickerUtils.getTinyColorInstance(color);
-  var colorHex = ColorPickerUtils.getHexValueString(colorTiny);
-  var colorHolderClassNames = classnames(styles[cssColorPickerSwatch], _defineProperty(_defineProperty({}, styles[cssColorPickerSwatchSmall], size === COLOR_PICKER_SWATCH_SIZES.SMALL), styles[cssColorPickerSwatchBig], size === COLOR_PICKER_SWATCH_SIZES.BIG));
+  var colorHolderClassNames = classnames(styles[cssColorPickerSwatch], _defineProperty(_defineProperty({}, styles[cssColorPickerSwatchSmall], size === ColorPickerSwatch_SIZES.SMALL), styles[cssColorPickerSwatchBig], size === ColorPickerSwatch_SIZES.BIG));
 
   var handleOnClick = function handleOnClick() {
-    onClick === null || onClick === void 0 || onClick(colorHex);
+    onClick === null || onClick === void 0 || onClick(color);
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -24,10 +22,10 @@ var Color_picker_swatch = function Color_picker_swatch(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles[cssColorPickerSwatchFill],
     style: {
-      backgroundColor: "".concat(colorHex)
+      background: "".concat(cssColor)
     }
   }));
 };
 
-export { Color_picker_swatch };
+export { ColorPickerSwatch };
 //# sourceMappingURL=color_picker_swatch.js.map

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

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

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesContent, cssColorPickerSwatchesSubContent } from '../css_classes.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
-import { Color_picker_swatch } from './color_picker_swatch.js';
 import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
+import { ColorPickerSwatch } from './color_picker_swatch.js';
 
 var Color_picker_variables = function Color_picker_variables(_ref) {
   var variables = _ref.variables;
@@ -63,11 +63,12 @@ var Color_picker_variables = function Color_picker_variables(_ref) {
       });
     };
 
-    return /*#__PURE__*/React.createElement(Color_picker_swatch, {
+    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: colorHex
+      color: colorHex,
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny)
     });
   })), isOpen && /*#__PURE__*/React.createElement("div", {
     className: styles[cssColorPickerSwatchesSubContent]
@@ -79,11 +80,13 @@ var Color_picker_variables = function Color_picker_variables(_ref) {
       });
     };
 
-    return /*#__PURE__*/React.createElement(Color_picker_swatch, {
+    console.log('variable.value', variable.value);
+    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: variable.value
+      color: variable.value,
+      cssColor: variable.value
     });
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/current_color_preview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { cssColorPickerCurrentColorPreview } from '../css_classes.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
 
 var CurrentColorPreview = function CurrentColorPreview() {

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer } from '../css_classes.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
-import { Color_label_input } from './color_label_input.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { Color_picker_swatch } from './color_picker_swatch.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
+import { ColorPickerSwatch } from './color_picker_swatch.js';
 import { ColorPickerContent } from './color_picker_content.js';
 import Dropdown from '../../dropdown/components/dropdown.js';
+import { ColorPickerInput } from './color_label_input.js';
 
 var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   var id = _ref.id,
@@ -15,15 +16,17 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
       color = _useColorPicker.color;
 
   var colorValue = typeof color === 'string' ? color : color.value;
+  var colorTiny = ColorPickerUtils.getTinyColorInstance(colorValue);
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPicker])
   }, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.CustomLabel, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPickerInputContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPickerInputColorSwatchContainer])
-  }, /*#__PURE__*/React.createElement(Color_picker_swatch, {
-    color: colorValue
-  })), /*#__PURE__*/React.createElement(Color_label_input, {
+  }, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    color: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValue(colorTiny),
+    cssColor: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValueString(colorTiny)
+  })), /*#__PURE__*/React.createElement(ColorPickerInput, {
     id: id,
     name: name
   }))), /*#__PURE__*/React.createElement(Dropdown.MemoizedContent, {

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

@@ -6,7 +6,7 @@ export declare const COLOR_PICKER_TYPES: {
     readonly HEX: "hex";
     readonly RGB: "rgb";
 };
-export declare const COLOR_PICKER_SWATCH_SIZES: {
+export declare const ColorPickerSwatch_SIZES: {
     readonly SMALL: "small";
     readonly BIG: "big";
 };
@@ -14,3 +14,7 @@ export declare const GRADIENT_TYPES: {
     readonly linear: "linear-gradient";
     readonly radial: "radial-gradient";
 };
+export declare const GRADIENT_RADIAL_SHAPES: {
+    readonly circle: "circle";
+    readonly ellipse: "ellipse";
+};

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

@@ -6,7 +6,7 @@ var COLOR_PICKER_TYPES = {
   HEX: 'hex',
   RGB: 'rgb'
 };
-var COLOR_PICKER_SWATCH_SIZES = {
+var ColorPickerSwatch_SIZES = {
   SMALL: 'small',
   BIG: 'big'
 };
@@ -14,6 +14,10 @@ var GRADIENT_TYPES = {
   linear: 'linear-gradient',
   radial: 'radial-gradient'
 };
+var GRADIENT_RADIAL_SHAPES = {
+  circle: 'circle',
+  ellipse: 'ellipse'
+};
 
-export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, GRADIENT_TYPES };
+export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, ColorPickerSwatch_SIZES, GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES };
 //# sourceMappingURL=constants.js.map

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

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

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { COLOR_PICKER_ALPHA_MAX_VALUE } from '../constants.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
 import isEqual_1 from '../../../../../../external/lodash/isEqual.js';
 import { useColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
 
-var defaultGradient = 'linear-gradient(90deg, rgba(13, 12, 12, 1) 0%, rgba(255,255,255,1) 100%)';
+var defaultGradient = 'linear-gradient(90deg, #000000 0%, #FFFFFF 100%)';
 
 var useSetupColorPicker = function useSetupColorPicker(_ref) {
   var initialColor = _ref.initialColor,
@@ -133,13 +133,9 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
   useEffect(function () {
     var colorObject = ColorPickerUtils.getAllColorTypes(color);
     var gradientObject = getGradientObject();
-
-    if (gradientObject !== null && gradientObject !== void 0 && gradientObject.isGradient) {
-      gradientObject.gradientString = color.value;
-      colorObject.gradient = gradientObject;
-    }
-
-    onChange === null || onChange === void 0 || onChange(colorObject);
+    onChange === null || onChange === void 0 || onChange(_objectSpread2(_objectSpread2({}, colorObject), {}, {
+      gradient: gradientObject !== null && gradientObject !== void 0 && gradientObject.isGradient ? ColorPickerUtils.getColorPickerGradientValue(gradientObject) : undefined
+    }));
   }, [color]);
 
   var handleCancel = function handleCancel() {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8CAAkD;AACxE,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8CAAkD;AACxE,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { GRADIENT_TYPES } from "./constants";
+import { GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from "./constants";
+import { Any } from 'ts-toolbelt';
 export interface IColorPickerNewPureProps {
     id: string;
     name?: string;
@@ -76,16 +77,25 @@ export declare type IColorPickerColor = {
 };
 export declare type ColorPickerColors = ColorPickerColorTypes['hex'] | ColorPickerColorTypes['hsl'] | ColorPickerColorTypes['rgba'];
 export declare type TGradientType = typeof GRADIENT_TYPES[keyof typeof GRADIENT_TYPES];
+export declare type TGradientColorStop = {
+    stop: number;
+    value: string;
+};
+export declare type TGradientRadialShape = Any.Keys<typeof GRADIENT_RADIAL_SHAPES>;
 export declare type TGradientObject = {
+    gradientType: TGradientType;
+    radialShape?: TGradientRadialShape;
+    angle: number | null;
+    colors: TGradientColorStop[];
+};
+export declare type TGradientColoPickerLibGradientObject = {
     isGradient: boolean;
     gradientType: string | undefined;
     degrees: string;
     colors: any;
-    gradientString: string;
 } | {
     isGradient: boolean;
     gradientType: null;
     degrees: null;
     colors: any;
-    gradientString: string;
 };

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

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

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

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

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

@@ -6,6 +6,7 @@ import { ICellProps, IIRowProps, ITableProps } from "./components/table/types";
 import { IDropdownProps, ISelectOption } from "./components/dropdown/types";
 import { TFlashMessage, TFlashMessageExtended } from "./components/flash_messenger/types";
 import { TImagePickerFile, TImageSize } from "./components/image_picker/types";
+import { IColorPickerColor, TGradientObject, TGradientColorStop, TGradientRadialShape, TGradientType } from "./components/color_picker_new/types";
 import AbsoluteModal from "./components/modal/hoc/absolute_modal";
 /**
  * import components for export
@@ -51,7 +52,6 @@ import Grid from "./components/grid";
 import Heading from "./components/heading";
 import Hint from "./components/hint";
 import { IColor } from "./components/color_picker/types";
-import { IColorPickerColor } from "./components/color_picker_new/types";
 import { IControlRadioGroupOption } from "./components/controls/types";
 import { IDatepickerRange } from "./components/date_picker/types";
 import { IDropdownContext } from "./components/dropdown/context/types";
@@ -127,7 +127,11 @@ import { useToggle } from "./components/dropdown/hooks";
  * export components
  */
 export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ColorPickerNew, ColorPickerUtils, ControlColorPicker, ControlColorPickerNew, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalNew, ModalsManager, useModalsContext, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, DropdownsManager, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideSubHeader, SlideContent, SlideFooter, XhrImagePicker, ValuesSyncer, Tree, TreeNode, ScrollSyncContainer, ScrollSync, useClickOutside, Breadcrumbs };
+/**
+ * export constants
+ */
+export { GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from "./components/color_picker_new/constants";
 /**
  * export types
  */
-export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IColorPickerColor, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize, IImageEditorProps, TUploadedImageData };
+export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IColorPickerColor, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize, IImageEditorProps, TUploadedImageData, TGradientObject, TGradientColorStop, TGradientRadialShape, TGradientType };

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

@@ -1,3 +1,4 @@
+export { GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from './components/color_picker_new/constants.js';
 export { default as AbsoluteModal } from './components/modal/hoc/absolute_modal/index.js';
 export { default as Accordion } from './components/accordion/index.js';
 export { default as Stack } from './components/stack/index.js';

package/build/esm/packages/aurora/src/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;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/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.21.0-3",
+  "version": "2.21.0-5",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",