@dreamcommerce/aurora 2.20.7 → 2.21.0-1

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

@@ -0,0 +1,39 @@
+'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');
+require('react-best-gradient-color-picker/dist/esm/context');
+var Square = require('react-best-gradient-color-picker/dist/esm/components/Square');
+require('react-best-gradient-color-picker/dist/esm/components/GradientBar');
+var Hue = require('react-best-gradient-color-picker/dist/esm/components/Hue');
+var Opacity = require('react-best-gradient-color-picker/dist/esm/components/Opacity');
+var color_picker_controls = require('../color_picker_controls.js');
+var color_picker_inputs = require('../color_picker_inputs/color_picker_inputs.js');
+var color_picker_shades = require('../color_picker_shades.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 Square__default = /*#__PURE__*/_interopDefaultLegacy(Square);
+var Hue__default = /*#__PURE__*/_interopDefaultLegacy(Hue);
+var Opacity__default = /*#__PURE__*/_interopDefaultLegacy(Opacity);
+
+var PickerImpl = function PickerImpl() {
+  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['default'], null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerHue]
+  }, /*#__PURE__*/React__default['default'].createElement(Hue__default['default'], null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerOpacity]
+  }, /*#__PURE__*/React__default['default'].createElement(Opacity__default['default'], null)), /*#__PURE__*/React__default['default'].createElement(color_picker_inputs.Color_picker_inputs, null), /*#__PURE__*/React__default['default'].createElement(color_picker_shades.Color_picker_shades, null));
+};
+
+exports.PickerImpl = PickerImpl;
+//# sourceMappingURL=picker_impl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-inputs/color-picker-inputs.js → color_picker_inputs/color_picker_inputs.js}

@@ -4,17 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.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 constants = require('../../constants.js');
-var colorPickerInputsHex = require('./color-picker-inputs-hex.js');
-var colorPickerInputsRgba = require('./color-picker-inputs-rgba.js');
+var color_picker_inputs_hex = require('./color_picker_inputs_hex.js');
+var color_picker_inputs_rgba = require('./color_picker_inputs_rgba.js');
+var current_color_preview = require('../current_color_preview.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ColorPickerInputs = function ColorPickerInputs() {
+var Color_picker_inputs = function Color_picker_inputs() {
   var _useState = React.useState(constants.COLOR_PICKER_TYPES.HEX),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       type = _useState2[0],
@@ -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.Color_picker_inputs_hex, 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.Color_picker_inputs_rgba, 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
+exports.Color_picker_inputs = Color_picker_inputs;
+//# 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,7 +5,7 @@ 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 use_color_picker = require('../../hooks/use_color_picker.js');
 var color_picker_utils = require('../../color_picker_utils.js');
 var utilities = require('@dreamcommerce/utilities');
 
@@ -13,12 +13,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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 Color_picker_inputs_hex = function Color_picker_inputs_hex() {
+  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),
@@ -69,5 +69,5 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
   }));
 };
 
-exports.ColorPickerInputsHex = ColorPickerInputsHex;
-//# sourceMappingURL=color-picker-inputs-hex.js.map
+exports.Color_picker_inputs_hex = Color_picker_inputs_hex;
+//# 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,21 +4,21 @@ 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 }; }
 
 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 Color_picker_inputs_rgba = function Color_picker_inputs_rgba() {
+  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",
@@ -53,5 +53,5 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
   }));
 };
 
-exports.ColorPickerInputsRgba = ColorPickerInputsRgba;
-//# sourceMappingURL=color-picker-inputs-rgba.js.map
+exports.Color_picker_inputs_rgba = Color_picker_inputs_rgba;
+//# 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,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var ColorPickerModeToggler = function ColorPickerModeToggler() {
+  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("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("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("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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 use_color_picker = require('../hooks/use_color_picker.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var color_picker_utils = require('../color_picker_utils.js');
-var colorPickerSwatch = require('./color-picker-swatch.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 Color_picker_shades = function Color_picker_shades() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      hslArr = _useColorPicker.hslArr,
+      setColor = _useColorPicker.setColor;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -84,10 +84,10 @@ 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.Color_picker_swatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
@@ -96,5 +96,5 @@ var ColorPickerShades = function ColorPickerShades() {
   })));
 };
 
-exports.ColorPickerShades = ColorPickerShades;
-//# sourceMappingURL=color-picker-shades.js.map
+exports.Color_picker_shades = Color_picker_shades;
+//# sourceMappingURL=color_picker_shades.js.map

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

@@ -4,10 +4,10 @@ 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 main_module = require('../../../css/color_picker_new/main.module.less.js');
-var constants = require('../constants.js');
 var color_picker_utils = require('../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
+var Color_picker_swatch = function Color_picker_swatch(_ref) {
   var color = _ref.color,
       size = _ref.size,
       onClick = _ref.onClick;
@@ -38,5 +38,5 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   }));
 };
 
-exports.ColorPickerSwatch = ColorPickerSwatch;
-//# sourceMappingURL=color-picker-swatch.js.map
+exports.Color_picker_swatch = Color_picker_swatch;
+//# sourceMappingURL=color_picker_swatch.js.map

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

@@ -5,22 +5,22 @@ 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 use_color_picker = require('../hooks/use_color_picker.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var color_picker_utils = require('../color_picker_utils.js');
-var colorPickerSwatch = require('./color-picker-swatch.js');
+var color_picker_swatch = require('./color_picker_swatch.js');
 var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ColorPickerVariables = function ColorPickerVariables(_ref) {
+var Color_picker_variables = function Color_picker_variables(_ref) {
   var variables = _ref.variables;
 
-  var _useContext = React.useContext(context.ColorPickerNewContext),
-      handlePickSwatch = _useContext.handlePickSwatch;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      setColor = _useColorPicker.setColor;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -65,13 +65,13 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
 
     var handleOnClick = function handleOnClick() {
-      return handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch({
+      return setColor({
         value: colorHex,
         name: "".concat(variable.name)
       });
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
+    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.Color_picker_swatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
@@ -81,13 +81,13 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     className: main_module['default'][css_classes.cssColorPickerSwatchesSubContent]
   }, allShades.map(function (variable, index) {
     var handleOnClick = function handleOnClick() {
-      return handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch({
+      return setColor === null || setColor === void 0 ? void 0 : setColor({
         value: variable.value,
         name: variable.name
       });
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
+    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.Color_picker_swatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
@@ -96,5 +96,5 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
   })));
 };
 
-exports.ColorPickerVariables = ColorPickerVariables;
-//# sourceMappingURL=color-picker-variables.js.map
+exports.Color_picker_variables = Color_picker_variables;
+//# sourceMappingURL=color_picker_variables.js.map

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

@@ -0,0 +1,29 @@
+'use strict';
+
+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 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 CurrentColorPreview = function CurrentColorPreview() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      color = _useColorPicker.color;
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerCurrentColorPreview],
+    "aria-label": "color picker current color value",
+    style: {
+      background: color_picker_utils.ColorPickerUtils.isGradient(color.value) ? color.value : "#".concat(color.value)
+    }
+  });
+};
+
+exports.CurrentColorPreview = CurrentColorPreview;
+//# sourceMappingURL=current_color_preview.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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