@dreamcommerce/aurora 2.20.9 → 2.21.0-10

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

@@ -3,19 +3,19 @@ import { useTranslation } from '../../../../../../external/react-i18next/dist/es
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import Button from '../../button/index.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
-import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerFooter } from '../css_classes.js';
-import { ColorPickerUtils } from '../color_picker_utils.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 ColorPickerFooter = function ColorPickerFooter() {
   var _useContext = useContext(DropdownContext),
       closeDropdown = _useContext.closeDropdown;
 
-  var _useContext2 = useContext(ColorPickerNewContext),
-      color = _useContext2.color,
-      handleCancel = _useContext2.handleCancel,
-      handleSave = _useContext2.handleSave;
+  var _useColorPicker = useColorPicker(),
+      color = _useColorPicker.color,
+      handleCancel = _useColorPicker.handleCancel,
+      handleSave = _useColorPicker.handleSave;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -46,4 +46,4 @@ var ColorPickerFooter = function ColorPickerFooter() {
 };
 
 export { ColorPickerFooter };
-//# sourceMappingURL=color-picker-footer.js.map
+//# sourceMappingURL=color_picker_footer.js.map

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

@@ -0,0 +1 @@
+export declare const ColorPickerGradientAngle: () => JSX.Element;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH,4BAA4B,4FAAgG;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_gradient_controls/color_picker_gradient_controls_constants.d.ts

@@ -0,0 +1,8 @@
+export declare const COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES: {
+    colorPickerModeToggler: string;
+    colorPickerModeTogglerButton: string;
+    colorPickerModeTogglerButtonSolid: string;
+    colorPickerModeTogglerButtonLinearGradient: string;
+    colorPickerModeTogglerButtonSolidRadialGradient: string;
+    colorPickerModeTogglerButtonActive: string;
+};

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

@@ -0,0 +1,12 @@
+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")
+};
+
+export { COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES };
+//# sourceMappingURL=color_picker_gradient_controls_constants.js.map

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

@@ -2,22 +2,22 @@ import React, { useContext, useEffect } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
-import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import IconClose from '../../../assets/icon_close.js';
 
 var ColorPickerHeader = function ColorPickerHeader() {
-  var _useContext = useContext(ColorPickerNewContext),
-      handleCancel = _useContext.handleCancel;
+  var _useColorPicker = useColorPicker(),
+      handleCancel = _useColorPicker.handleCancel;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
       t = _useTranslation2[0];
 
-  var _useContext2 = useContext(DropdownContext),
-      closeDropdown = _useContext2.closeDropdown,
-      isOpen = _useContext2.isOpen;
+  var _useContext = useContext(DropdownContext),
+      closeDropdown = _useContext.closeDropdown,
+      isOpen = _useContext.isOpen;
 
   var handleCancelButton = function handleCancelButton() {
     closePicker();
@@ -46,4 +46,4 @@ var ColorPickerHeader = function ColorPickerHeader() {
 };
 
 export { ColorPickerHeader };
-//# sourceMappingURL=color-picker-header.js.map
+//# sourceMappingURL=color_picker_header.js.map

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

@@ -0,0 +1 @@
+export declare const ColorPickerImpl: ({ value, onChange, width, height, style, className }: any) => JSX.Element;

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

@@ -0,0 +1,39 @@
+import React, { useRef } from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectToString } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
+import PickerContextWrapper from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { getStyles } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
+import { PickerImpl } from './picker_impl.js';
+
+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 = objectToString(value);
+  var contRef = useRef(null);
+  var defaultStyles = getStyles(true);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contRef,
+    className: className,
+    style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.body), style), {}, {
+      width: width
+    })
+  }, /*#__PURE__*/React.createElement(PickerContextWrapper, {
+    value: safeValue,
+    defaultStyles: defaultStyles,
+    onChange: onChange,
+    squareWidth: width,
+    squareHeight: height,
+    hideOpacity: false
+  }, /*#__PURE__*/React.createElement(PickerImpl, null)));
+};
+
+export { ColorPickerImpl };
+//# sourceMappingURL=color_picker_impl.js.map

package/build/esm/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,+BAA+B,wFAA4F;AAC3H,iCAAiC,oFAAwF;AACzH,0BAA0B,0FAA8F;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_impl/picker_impl.d.ts

@@ -0,0 +1 @@
+export declare const PickerImpl: () => JSX.Element;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import classnames from 'classnames';
+import { cssColorPickerImpl, cssColorPickerSquare, cssColorPickerHue, cssColorPickerOpacity } from '../../css_classes.js';
+import styles from '../../../../css/color_picker_new/main.module.less.js';
+import Square from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/Square.js';
+import Hue from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/Hue.js';
+import Opacity from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/Opacity.js';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
+import { ColorPickerControls } from '../color_picker_controls.js';
+import { ColorPickerShades } from '../color_picker_shades.js';
+import { ColorPickerInputs } from '../color_picker_inputs/color_picker_inputs.js';
+
+var PickerImpl = function PickerImpl() {
+  var _useColorPicker = useColorPicker(),
+      isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssColorPickerImpl, styles[cssColorPickerImpl])
+  }, /*#__PURE__*/React.createElement(ColorPickerControls, null), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerSquare]
+  }, /*#__PURE__*/React.createElement(Square, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerHue]
+  }, /*#__PURE__*/React.createElement(Hue, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerOpacity]
+  }, /*#__PURE__*/React.createElement(Opacity, null)), /*#__PURE__*/React.createElement(ColorPickerInputs, null), !isCurrentValueGradient ? /*#__PURE__*/React.createElement(ColorPickerShades, null) : null);
+};
+
+export { PickerImpl };
+//# sourceMappingURL=picker_impl.js.map

package/build/esm/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,mBAAmB,8FAAkG;AACrH,gBAAgB,2FAA+F;AAC/G,oBAAoB,+FAAmG;AACvH;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-inputs/color-picker-inputs.js → color_picker_inputs/color_picker_inputs.js}

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer } from '../../css_classes.js';
 import { COLOR_PICKER_TYPES } from '../../constants.js';
+import Stack from '../../../stack/index.js';
+import { cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer } from '../../css_classes.js';
 import styles from '../../../../css/color_picker_new/main.module.less.js';
-import { ColorPickerInputsHex } from './color-picker-inputs-hex.js';
-import { ColorPickerInputsRgba } from './color-picker-inputs-rgba.js';
+import { CurrentColorPreview } from '../current_color_preview.js';
+import { ColorPickerInputsHex } from './color_picker_inputs_hex.js';
+import { ColorPickerInputsRgba } from './color_picker_inputs_rgba.js';
 
 var ColorPickerInputs = function ColorPickerInputs() {
   var _useState = useState(COLOR_PICKER_TYPES.HEX),
@@ -29,7 +31,9 @@ var ColorPickerInputs = function ColorPickerInputs() {
     }
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Stack, {
+    spacing: 4,
+    align: "center",
     className: "".concat(styles[cssColorPickerInputs])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPickerInputsType])
@@ -44,8 +48,8 @@ var ColorPickerInputs = function ColorPickerInputs() {
     className: "".concat(styles[cssColorPickerInputsValue])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPickerInputsValueContainer])
-  }, inputs())));
+  }, inputs())), /*#__PURE__*/React.createElement(CurrentColorPreview, null));
 };
 
 export { ColorPickerInputs };
-//# sourceMappingURL=color-picker-inputs.js.map
+//# sourceMappingURL=color_picker_inputs.js.map

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

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

@@ -1,16 +1,16 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import Input from '../../../controls/components/input.js';
-import { ColorPickerNewContext } from '../../context.js';
-import { ColorPickerUtils } from '../../color_picker_utils.js';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { InputUtils } from '@dreamcommerce/utilities';
+import { ColorPickerUtils } from '../../color_picker_utils.js';
 
 var ColorPickerInputsHex = function ColorPickerInputsHex() {
-  var _useContext = useContext(ColorPickerNewContext),
-      setColor = _useContext.setColor,
-      hex = _useContext.hex,
-      handleOnChangeAlpha = _useContext.handleOnChangeAlpha,
-      alphaValue = _useContext.alphaValue;
+  var _useColorPicker = useColorPicker(),
+      setColor = _useColorPicker.setColor,
+      hex = _useColorPicker.hex,
+      handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
+      alphaValue = _useColorPicker.alphaValue;
 
   var _useState = useState(hex),
       _useState2 = _slicedToArray(_useState, 2),
@@ -62,4 +62,4 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
 };
 
 export { ColorPickerInputsHex };
-//# sourceMappingURL=color-picker-inputs-hex.js.map
+//# sourceMappingURL=color_picker_inputs_hex.js.map

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

@@ -1,16 +1,16 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import Input from '../../../controls/components/input.js';
-import { ColorPickerNewContext } from '../../context.js';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { InputUtils } from '@dreamcommerce/utilities';
 
 var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
-  var _useContext = useContext(ColorPickerNewContext),
-      setR = _useContext.setR,
-      setG = _useContext.setG,
-      setB = _useContext.setB,
-      handleOnChangeAlpha = _useContext.handleOnChangeAlpha,
-      alphaValue = _useContext.alphaValue,
-      rgbaArr = _useContext.rgbaArr;
+  var _useColorPicker = useColorPicker(),
+      setR = _useColorPicker.setR,
+      setG = _useColorPicker.setG,
+      setB = _useColorPicker.setB,
+      handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
+      alphaValue = _useColorPicker.alphaValue,
+      rgbaArr = _useColorPicker.rgbaArr;
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
     padding: "small",
@@ -46,4 +46,4 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
 };
 
 export { ColorPickerInputsRgba };
-//# sourceMappingURL=color-picker-inputs-rgba.js.map
+//# sourceMappingURL=color_picker_inputs_rgba.js.map

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

@@ -0,0 +1 @@
+export declare const ColorPickerModeToggler: () => JSX.Element;

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

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

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

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

@@ -1,16 +1,16 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { ColorPickerSwatch } 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';
 
 var ColorPickerShades = function ColorPickerShades() {
-  var _useContext = useContext(ColorPickerNewContext),
-      hslArr = _useContext.hslArr,
-      handlePickSwatch = _useContext.handlePickSwatch;
+  var _useColorPicker = useColorPicker(),
+      hslArr = _useColorPicker.hslArr,
+      setColor = _useColorPicker.setColor;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -76,17 +76,18 @@ var ColorPickerShades = function ColorPickerShades() {
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
 
     var handleOnClick = function handleOnClick() {
-      handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
+      setColor === null || setColor === void 0 || setColor(colorHex);
     };
 
     return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
-      color: colorHex
+      color: colorHex,
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny)
     });
   })));
 };
 
 export { ColorPickerShades };
-//# sourceMappingURL=color-picker-shades.js.map
+//# sourceMappingURL=color_picker_shades.js.map

package/build/esm/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,+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

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

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

@@ -1,21 +1,19 @@
 import React from 'react';
 import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { ColorPickerSwatch_SIZES } from '../constants.js';
 import classnames from 'classnames';
 import { cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchSmall, cssColorPickerSwatchFill } from '../css_classes.js';
-import { COLOR_PICKER_SWATCH_SIZES } from '../constants.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 
 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 ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles[cssColorPickerSwatchFill],
     style: {
-      backgroundColor: "".concat(colorHex)
+      background: "".concat(cssColor)
     }
   }));
 };
 
 export { ColorPickerSwatch };
-//# sourceMappingURL=color-picker-swatch.js.map
+//# sourceMappingURL=color_picker_swatch.js.map

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

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

@@ -1,18 +1,18 @@
-import React, { useContext, useState } from 'react';
+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 { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesContent, cssColorPickerSwatchesSubContent } from '../css_classes.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { ColorPickerSwatch } 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 { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
 
 var ColorPickerVariables = function ColorPickerVariables(_ref) {
   var variables = _ref.variables;
 
-  var _useContext = useContext(ColorPickerNewContext),
-      handlePickSwatch = _useContext.handlePickSwatch;
+  var _useColorPicker = useColorPicker(),
+      setColor = _useColorPicker.setColor;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -57,7 +57,7 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
 
     var handleOnClick = function handleOnClick() {
-      return handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch({
+      return setColor({
         value: colorHex,
         name: "".concat(variable.name)
       });
@@ -67,13 +67,14 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       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]
   }, 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
       });
@@ -83,10 +84,11 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: variable.value
+      color: variable.value,
+      cssColor: variable.value
     });
   })));
 };
 
 export { ColorPickerVariables };
-//# sourceMappingURL=color-picker-variables.js.map
+//# sourceMappingURL=color_picker_variables.js.map

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

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

@@ -0,0 +1 @@
+export declare const CurrentColorPreview: () => JSX.Element;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { cssColorPickerCurrentColorPreview } from '../css_classes.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() {
+  var _useColorPicker = useColorPicker(),
+      color = _useColorPicker.color;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerCurrentColorPreview],
+    "aria-label": "color picker current color value",
+    style: {
+      background: ColorPickerUtils.isGradient(color.value) ? color.value : "#".concat(color.value)
+    }
+  });
+};
+
+export { CurrentColorPreview };
+//# sourceMappingURL=current_color_preview.js.map

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