@dreamcommerce/aurora 2.20.9 → 2.21.0-10

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA,sBAAsB,iFAAqF;AAC3G;AACA;AACA;AACA,yBAAyB,+FAAmG;AAC5H;AACA,+BAA+B,qGAAyG;AACxI,0BAA0B,gGAAoG;AAC9H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -7,10 +7,10 @@ var useTranslation = require('../../../../../../external/react-i18next/dist/es/u
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var index$1 = require('../../button/index.js');
 var index = require('../../dropdown/context/index.js');
-var context = require('../context.js');
 var css_classes = require('../css_classes.js');
-var color_picker_utils = require('../color_picker_utils.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 }; }
 
@@ -20,10 +20,10 @@ var ColorPickerFooter = function ColorPickerFooter() {
   var _useContext = React.useContext(index.DropdownContext),
       closeDropdown = _useContext.closeDropdown;
 
-  var _useContext2 = React.useContext(context.ColorPickerNewContext),
-      color = _useContext2.color,
-      handleCancel = _useContext2.handleCancel,
-      handleSave = _useContext2.handleSave;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      color = _useColorPicker.color,
+      handleCancel = _useColorPicker.handleCancel,
+      handleSave = _useColorPicker.handleSave;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -54,4 +54,4 @@ var ColorPickerFooter = function ColorPickerFooter() {
 };
 
 exports.ColorPickerFooter = ColorPickerFooter;
-//# sourceMappingURL=color-picker-footer.js.map
+//# sourceMappingURL=color_picker_footer.js.map

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

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-inputs/color-picker-inputs.js.map → color_picker_gradient_controls/color_picker_gradient_angle.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yBAAyB,6FAAiG;AAC1H,sBAAsB,oFAAwF;AAC9G,mBAAmB,4FAAgG;AACnH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var colorPickerModeTogglerBaseCssClasses = 'color-picker-mode-toggler';
+var COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES = {
+  colorPickerModeToggler: colorPickerModeTogglerBaseCssClasses,
+  colorPickerModeTogglerButton: "".concat(colorPickerModeTogglerBaseCssClasses, "__button"),
+  colorPickerModeTogglerButtonSolid: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_solid"),
+  colorPickerModeTogglerButtonLinearGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_linear"),
+  colorPickerModeTogglerButtonSolidRadialGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_radial"),
+  colorPickerModeTogglerButtonActive: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_active")
+};
+
+exports.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES = COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES;
+//# sourceMappingURL=color_picker_gradient_controls_constants.js.map

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,wFAA4F;AAChH,sBAAsB,oFAAwF;AAC9G,qBAAqB,0FAA8F;AACnH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_impl/picker_impl.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var css_classes = require('../../css_classes.js');
+var main_module = require('../../../../css/color_picker_new/main.module.less.js');
+var Square = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/Square.js');
+var Hue = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/Hue.js');
+var Opacity = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/Opacity.js');
+var use_color_picker = require('../../hooks/use_color_picker.js');
+var color_picker_controls = require('../color_picker_controls.js');
+var color_picker_shades = require('../color_picker_shades.js');
+var color_picker_inputs = require('../color_picker_inputs/color_picker_inputs.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 PickerImpl = function PickerImpl() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: classnames__default['default'](css_classes.cssColorPickerImpl, main_module['default'][css_classes.cssColorPickerImpl])
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_controls.ColorPickerControls, null), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerSquare]
+  }, /*#__PURE__*/React__default['default'].createElement(Square['default'], null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerHue]
+  }, /*#__PURE__*/React__default['default'].createElement(Hue['default'], null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerOpacity]
+  }, /*#__PURE__*/React__default['default'].createElement(Opacity['default'], null)), /*#__PURE__*/React__default['default'].createElement(color_picker_inputs.ColorPickerInputs, null), !isCurrentValueGradient ? /*#__PURE__*/React__default['default'].createElement(color_picker_shades.ColorPickerShades, null) : null);
+};
+
+exports.PickerImpl = PickerImpl;
+//# sourceMappingURL=picker_impl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,8FAAkG;AACvH,kBAAkB,2FAA+F;AACjH,sBAAsB,+FAAmG;AACzH;AACA;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-inputs/color-picker-inputs.js → color_picker_inputs/color_picker_inputs.js}

@@ -4,11 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var css_classes = require('../../css_classes.js');
 var constants = require('../../constants.js');
+var index = require('../../../stack/index.js');
+var css_classes = require('../../css_classes.js');
 var main_module = require('../../../../css/color_picker_new/main.module.less.js');
-var colorPickerInputsHex = require('./color-picker-inputs-hex.js');
-var colorPickerInputsRgba = require('./color-picker-inputs-rgba.js');
+var current_color_preview = require('../current_color_preview.js');
+var color_picker_inputs_hex = require('./color_picker_inputs_hex.js');
+var color_picker_inputs_rgba = require('./color_picker_inputs_rgba.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,17 +29,19 @@ var ColorPickerInputs = function ColorPickerInputs() {
   var inputs = function inputs() {
     switch (type) {
       case constants.COLOR_PICKER_TYPES.HEX:
-        return /*#__PURE__*/React__default['default'].createElement(colorPickerInputsHex.ColorPickerInputsHex, null);
+        return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex.ColorPickerInputsHex, null);
 
       case constants.COLOR_PICKER_TYPES.RGB:
-        return /*#__PURE__*/React__default['default'].createElement(colorPickerInputsRgba.ColorPickerInputsRgba, null);
+        return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_rgba.ColorPickerInputsRgba, null);
 
       default:
         return false;
     }
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement(index['default'], {
+    spacing: 4,
+    align: "center",
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputs])
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputsType])
@@ -52,8 +56,8 @@ var ColorPickerInputs = function ColorPickerInputs() {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputsValue])
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputsValueContainer])
-  }, inputs())));
+  }, inputs())), /*#__PURE__*/React__default['default'].createElement(current_color_preview.CurrentColorPreview, null));
 };
 
 exports.ColorPickerInputs = ColorPickerInputs;
-//# sourceMappingURL=color-picker-inputs.js.map
+//# sourceMappingURL=color_picker_inputs.js.map

package/build/cjs/{external/react-best-gradient-color-picker/dist/esm/components/Picker.js.map → packages/aurora/src/components/color_picker_new/components/color_picker_inputs/color_picker_inputs.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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-inputs/color-picker-inputs-hex.js → color_picker_inputs/color_picker_inputs_hex.js}

@@ -5,20 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var input = require('../../../controls/components/input.js');
-var context = require('../../context.js');
-var color_picker_utils = require('../../color_picker_utils.js');
+var use_color_picker = require('../../hooks/use_color_picker.js');
 var utilities = require('@dreamcommerce/utilities');
+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 ColorPickerInputsHex = function ColorPickerInputsHex() {
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      setColor = _useContext.setColor,
-      hex = _useContext.hex,
-      handleOnChangeAlpha = _useContext.handleOnChangeAlpha,
-      alphaValue = _useContext.alphaValue;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      setColor = _useColorPicker.setColor,
+      hex = _useColorPicker.hex,
+      handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
+      alphaValue = _useColorPicker.alphaValue;
 
   var _useState = React.useState(hex),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -70,4 +70,4 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
 };
 
 exports.ColorPickerInputsHex = ColorPickerInputsHex;
-//# sourceMappingURL=color-picker-inputs-hex.js.map
+//# sourceMappingURL=color_picker_inputs_hex.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-inputs/color-picker-inputs-rgba.js → color_picker_inputs/color_picker_inputs_rgba.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var input = require('../../../controls/components/input.js');
-var context = require('../../context.js');
+var use_color_picker = require('../../hooks/use_color_picker.js');
 var utilities = require('@dreamcommerce/utilities');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,13 +12,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      setR = _useContext.setR,
-      setG = _useContext.setG,
-      setB = _useContext.setB,
-      handleOnChangeAlpha = _useContext.handleOnChangeAlpha,
-      alphaValue = _useContext.alphaValue,
-      rgbaArr = _useContext.rgbaArr;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      setR = _useColorPicker.setR,
+      setG = _useColorPicker.setG,
+      setB = _useColorPicker.setB,
+      handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
+      alphaValue = _useColorPicker.alphaValue,
+      rgbaArr = _useColorPicker.rgbaArr;
 
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(input['default'], {
     padding: "small",
@@ -54,4 +54,4 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
 };
 
 exports.ColorPickerInputsRgba = ColorPickerInputsRgba;
-//# sourceMappingURL=color-picker-inputs-rgba.js.map
+//# sourceMappingURL=color_picker_inputs_rgba.js.map

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

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var classnames = require('classnames');
+var index = require('../../stack/index.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var color_picker_gradient_controls_constants = require('./color_picker_gradient_controls/color_picker_gradient_controls_constants.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var index$1 = require('../../tooltip/index.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 ColorPickerModeToggler = function ColorPickerModeToggler() {
+  var _useTranslation = useTranslation.useTranslation(),
+      t = _useTranslation.t;
+
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      gradientType = _useColorPicker.gradientType,
+      isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+      setSolid = _useColorPicker.setSolid,
+      setRadial = _useColorPicker.setRadial,
+      setLinear = _useColorPicker.setLinear,
+      previousSolidColor = _useColorPicker.previousSolidColor,
+      previousGradientColor = _useColorPicker.previousGradientColor;
+
+  return /*#__PURE__*/React__default['default'].createElement(index['default'], {
+    spacing: 4,
+    className: main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeToggler]
+  }, /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
+    content: t('Solid'),
+    left: true,
+    top: true
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setSolid(previousSolidColor);
+    },
+    "aria-label": "Color picker solid mode",
+    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolid], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], !isCurrentValueGradient))
+  })), /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
+    content: t('Linear gradient'),
+    left: true,
+    top: true
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setLinear(previousGradientColor);
+    },
+    "aria-label": "Color picker linear gradient mode",
+    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonLinearGradient], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'linear-gradient'))
+  })), /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
+    content: t('Radial gradient'),
+    left: true,
+    top: true
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setRadial(previousGradientColor);
+    },
+    "aria-label": "Color picker radial gradient mode",
+    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolidRadialGradient], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'radial-gradient'))
+  })));
+};
+
+exports.ColorPickerModeToggler = ColorPickerModeToggler;
+//# sourceMappingURL=color_picker_mode_toggler.js.map

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

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

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

@@ -5,20 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var context = require('../context.js');
 var css_classes = require('../css_classes.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
-var colorPickerSwatch = require('./color-picker-swatch.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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerShades = function ColorPickerShades() {
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      hslArr = _useContext.hslArr,
-      handlePickSwatch = _useContext.handlePickSwatch;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      hslArr = _useColorPicker.hslArr,
+      setColor = _useColorPicker.setColor;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -84,17 +84,18 @@ var ColorPickerShades = function ColorPickerShades() {
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
 
     var handleOnClick = function handleOnClick() {
-      handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
+      setColor === null || setColor === void 0 || setColor(colorHex);
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
+    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)
     });
   })));
 };
 
 exports.ColorPickerShades = ColorPickerShades;
-//# sourceMappingURL=color-picker-shades.js.map
+//# sourceMappingURL=color_picker_shades.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-shades.js.map → 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 → color_picker_swatch.js}

@@ -4,10 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var constants = require('../constants.js');
 var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
-var constants = require('../constants.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -17,14 +16,13 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 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 ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes.cssColorPickerSwatchFill],
     style: {
-      backgroundColor: "".concat(colorHex)
+      background: "".concat(cssColor)
     }
   }));
 };
 
 exports.ColorPickerSwatch = ColorPickerSwatch;
-//# sourceMappingURL=color-picker-swatch.js.map
+//# sourceMappingURL=color_picker_swatch.js.map