@dreamcommerce/aurora 2.20.7 → 2.21.0-1

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,12 +1,14 @@
 import React, { useState } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.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 { COLOR_PICKER_TYPES } from '../../constants.js';
-import { ColorPickerInputsHex } from './color-picker-inputs-hex.js';
-import { ColorPickerInputsRgba } from './color-picker-inputs-rgba.js';
+import { Color_picker_inputs_hex } from './color_picker_inputs_hex.js';
+import { Color_picker_inputs_rgba } from './color_picker_inputs_rgba.js';
+import { CurrentColorPreview } from '../current_color_preview.js';
 
-var ColorPickerInputs = function ColorPickerInputs() {
+var Color_picker_inputs = function Color_picker_inputs() {
   var _useState = useState(COLOR_PICKER_TYPES.HEX),
       _useState2 = _slicedToArray(_useState, 2),
       type = _useState2[0],
@@ -19,17 +21,19 @@ var ColorPickerInputs = function ColorPickerInputs() {
   var inputs = function inputs() {
     switch (type) {
       case COLOR_PICKER_TYPES.HEX:
-        return /*#__PURE__*/React.createElement(ColorPickerInputsHex, null);
+        return /*#__PURE__*/React.createElement(Color_picker_inputs_hex, null);
 
       case COLOR_PICKER_TYPES.RGB:
-        return /*#__PURE__*/React.createElement(ColorPickerInputsRgba, null);
+        return /*#__PURE__*/React.createElement(Color_picker_inputs_rgba, null);
 
       default:
         return false;
     }
   };
 
-  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
+export { Color_picker_inputs };
+//# sourceMappingURL=color_picker_inputs.js.map

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

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

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

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 { useColorPicker } from '../../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../../color_picker_utils.js';
 import { InputUtils } from '@dreamcommerce/utilities';
 
-var ColorPickerInputsHex = function ColorPickerInputsHex() {
-  var _useContext = useContext(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 = useColorPicker(),
+      setColor = _useColorPicker.setColor,
+      hex = _useColorPicker.hex,
+      handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
+      alphaValue = _useColorPicker.alphaValue;
 
   var _useState = useState(hex),
       _useState2 = _slicedToArray(_useState, 2),
@@ -61,5 +61,5 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
   }));
 };
 
-export { ColorPickerInputsHex };
-//# sourceMappingURL=color-picker-inputs-hex.js.map
+export { Color_picker_inputs_hex };
+//# 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.d.ts

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

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 Color_picker_inputs_rgba = function Color_picker_inputs_rgba() {
+  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",
@@ -45,5 +45,5 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
   }));
 };
 
-export { ColorPickerInputsRgba };
-//# sourceMappingURL=color-picker-inputs-rgba.js.map
+export { Color_picker_inputs_rgba };
+//# 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,47 @@
+import React from 'react';
+import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import classnames from 'classnames';
+import Stack from '../../stack/index.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import { COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES } from './color_picker_gradient_controls/color_picker_gradient_controls_constants.js';
+
+var ColorPickerModeToggler = function ColorPickerModeToggler() {
+  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("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("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("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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

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

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 { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
-import { ColorPickerSwatch } from './color-picker-swatch.js';
+import { Color_picker_swatch } from './color_picker_swatch.js';
 
-var ColorPickerShades = function ColorPickerShades() {
-  var _useContext = useContext(ColorPickerNewContext),
-      hslArr = _useContext.hslArr,
-      handlePickSwatch = _useContext.handlePickSwatch;
+var Color_picker_shades = function Color_picker_shades() {
+  var _useColorPicker = useColorPicker(),
+      hslArr = _useColorPicker.hslArr,
+      setColor = _useColorPicker.setColor;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -76,10 +76,10 @@ 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, {
+    return /*#__PURE__*/React.createElement(Color_picker_swatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
@@ -88,5 +88,5 @@ var ColorPickerShades = function ColorPickerShades() {
   })));
 };
 
-export { ColorPickerShades };
-//# sourceMappingURL=color-picker-shades.js.map
+export { Color_picker_shades };
+//# sourceMappingURL=color_picker_shades.js.map

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

@@ -6,5 +6,5 @@ interface IColorPickerSwatchProps {
     size?: typeof COLOR_PICKER_SWATCH_SIZES[keyof typeof COLOR_PICKER_SWATCH_SIZES];
     onClick?: (color: ColorPickerColorTypes['hex']) => void;
 }
-export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
+export declare const Color_picker_swatch: React.FC<IColorPickerSwatchProps>;
 export {};

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { COLOR_PICKER_SWATCH_SIZES } from '../constants.js';
 import classnames from 'classnames';
 import { cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchSmall, cssColorPickerSwatchFill } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { COLOR_PICKER_SWATCH_SIZES } from '../constants.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
 
-var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
+var Color_picker_swatch = function Color_picker_swatch(_ref) {
   var color = _ref.color,
       size = _ref.size,
       onClick = _ref.onClick;
@@ -29,5 +29,5 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   }));
 };
 
-export { ColorPickerSwatch };
-//# sourceMappingURL=color-picker-swatch.js.map
+export { Color_picker_swatch };
+//# sourceMappingURL=color_picker_swatch.js.map

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

@@ -3,5 +3,5 @@ import React from 'react';
 interface IColorPickerVariablesProps {
     variables: IColorPickerColorVariablesType;
 }
-export declare const ColorPickerVariables: React.FC<IColorPickerVariablesProps>;
+export declare const Color_picker_variables: React.FC<IColorPickerVariablesProps>;
 export {};

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 { useColorPicker } from '../hooks/use_color_picker.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
-import { ColorPickerSwatch } from './color-picker-swatch.js';
+import { Color_picker_swatch } from './color_picker_swatch.js';
 import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
 
-var ColorPickerVariables = function ColorPickerVariables(_ref) {
+var Color_picker_variables = function Color_picker_variables(_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,13 +57,13 @@ 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)
       });
     };
 
-    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    return /*#__PURE__*/React.createElement(Color_picker_swatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
@@ -73,13 +73,13 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     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
       });
     };
 
-    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    return /*#__PURE__*/React.createElement(Color_picker_swatch, {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
@@ -88,5 +88,5 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
   })));
 };
 
-export { ColorPickerVariables };
-//# sourceMappingURL=color-picker-variables.js.map
+export { Color_picker_variables };
+//# sourceMappingURL=color_picker_variables.js.map

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 { useColorPicker } from '../hooks/use_color_picker.js';
+import styles from '../../../css/color_picker_new/main.module.less.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;"}

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

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
-import { ColorPickerNewContext } from '../context.js';
+import React from 'react';
 import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer } from '../css_classes.js';
-import { ColorLabelInput } from './color-label-input.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { Color_label_input } from './color_label_input.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { ColorPickerSwatch } from './color-picker-swatch.js';
+import { Color_picker_swatch } from './color_picker_swatch.js';
 import { ColorPickerContent } from './color_picker_content.js';
 import Dropdown from '../../dropdown/components/dropdown.js';
 
@@ -11,8 +11,8 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   var id = _ref.id,
       name = _ref.name;
 
-  var _useContext = useContext(ColorPickerNewContext),
-      color = _useContext.color;
+  var _useColorPicker = useColorPicker(),
+      color = _useColorPicker.color;
 
   var colorValue = typeof color === 'string' ? color : color.value;
   return /*#__PURE__*/React.createElement("div", {
@@ -21,9 +21,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
     className: "".concat(styles[cssColorPickerInputContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPickerInputColorSwatchContainer])
-  }, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+  }, /*#__PURE__*/React.createElement(Color_picker_swatch, {
     color: colorValue
-  })), /*#__PURE__*/React.createElement(ColorLabelInput, {
+  })), /*#__PURE__*/React.createElement(Color_label_input, {
     id: id,
     name: name
   }))), /*#__PURE__*/React.createElement(Dropdown.MemoizedContent, {

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

@@ -1,4 +1,4 @@
-export declare const COLOR_PICKER_INITIAL_STATE = "#000000";
+export declare const COLOR_PICKER_INITIAL_STATE = "FFFFFF";
 export declare const COLOR_PICKER_WIDTH = 247;
 export declare const COLOR_PICKER_HEIGHT = 200;
 export declare const COLOR_PICKER_ALPHA_MAX_VALUE = 100;
@@ -10,3 +10,7 @@ export declare const COLOR_PICKER_SWATCH_SIZES: {
     readonly SMALL: "small";
     readonly BIG: "big";
 };
+export declare const GRADIENT_TYPES: {
+    readonly linear: "linear-gradient";
+    readonly radial: "radial-gradient";
+};

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

@@ -1,4 +1,4 @@
-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;
@@ -10,6 +10,10 @@ var COLOR_PICKER_SWATCH_SIZES = {
   SMALL: 'small',
   BIG: 'big'
 };
+var GRADIENT_TYPES = {
+  linear: 'linear-gradient',
+  radial: 'radial-gradient'
+};
 
-export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH };
+export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, GRADIENT_TYPES };
 //# sourceMappingURL=constants.js.map

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

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

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IColorPickerNewContextProps } from './types';
-export declare const ColorPickerNewContext: import("react").Context<IColorPickerNewContextProps>;
+import { IColorPickerNewContext } from './types';
+export declare const ColorPickerNewContext: import("react").Context<IColorPickerNewContext>;

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

@@ -16,7 +16,11 @@ var ColorPickerNewContext = /*#__PURE__*/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
 });
 
 export { ColorPickerNewContext };

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

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

@@ -9,6 +9,11 @@ export declare const cssColorPickerSwatchesHeaderIcon = "color-picker__swatches-
 export declare const cssColorPickerSwatchesHeaderIconRotate = "color-picker__swatches-header-icon_rotate-180";
 export declare const cssColorPickerSwatchesContent = "color-picker__swatches-content";
 export declare const cssColorPickerSwatchesSubContent = "color-picker__swatches-subcontent";
+export declare const cssColorPickerControls = "color-picker__controls";
+export declare const cssColorPickerCurrentColorPreview = "color-picker__current-color-preview";
+export declare const cssColorPickerGradientAngle = "color-picker__gradient-angle";
+export declare const cssColorPickerGradientAngleInput = "color-picker__gradient-angle-input";
+export declare const cssColorPickerGradientAngleInputWrapper = "color-picker__gradient-angle-input-wrapper";
 export declare const cssColorPickerSwatch = "color-picker__swatch";
 export declare const cssColorPickerSwatchSmall = "color-picker__swatch_small";
 export declare const cssColorPickerSwatchBig = "color-picker__swatch_big";
@@ -20,3 +25,7 @@ export declare const cssColorPickerInputsType = "color-picker__inputs-type";
 export declare const cssColorPickerInputsValue = "color-picker__inputs-value";
 export declare const cssColorPickerInputsValueContainer = "color-picker__inputs-value-container";
 export declare const cssColorPickerFooter = "color-picker__footer";
+export declare const cssColorPickerHue = "color-picker__hue";
+export declare const cssColorPickerOpacity = "color-picker__opacity";
+export declare const cssColorPickerImpl = "color-picker-impl";
+export declare const cssColorPickerSquare = "color-picker__square";

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

@@ -9,6 +9,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';
@@ -20,6 +25,10 @@ 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';
 
-export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesSubContent };
+export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerControls, cssColorPickerCurrentColorPreview, cssColorPickerFooter, cssColorPickerGradientAngle, cssColorPickerGradientAngleInput, cssColorPickerGradientAngleInputWrapper, cssColorPickerHeader, cssColorPickerHue, cssColorPickerImpl, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerOpacity, cssColorPickerRbgcp, cssColorPickerSquare, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesSubContent };
 //# sourceMappingURL=css_classes.js.map

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

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

@@ -0,0 +1,33 @@
+import { ColorPickerVariable, IColorPickerColor, IColorPickerColorVariables } from '../types';
+export declare type ColorPickerHookProps = {
+    initialColor?: string | ColorPickerVariable;
+    onChange?: (color: IColorPickerColor) => void;
+    onCancel?: () => void;
+    onSave?: (color: IColorPickerColor) => void;
+    colorVariables?: IColorPickerColorVariables;
+    withGradient?: boolean;
+};
+declare const useSetupColorPicker: ({ initialColor, onChange, onCancel, onSave, colorVariables, withGradient: isWithGradient }: ColorPickerHookProps) => {
+    color: ColorPickerVariable;
+    previousSolidColor: string | undefined;
+    previousGradientColor: string | undefined;
+    setColor: (newColor: string | ColorPickerVariable) => void;
+    hex: string;
+    hslArr: number[];
+    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    alphaValue: string;
+    rgbaArr: number[];
+    setR: (newR: number) => void;
+    setG: (newG: number) => void;
+    setB: (newB: number) => void;
+    handleCancel: () => void;
+    handleSave: () => void;
+    colorVariables: IColorPickerColorVariables | undefined;
+    isCurrentValueGradient: boolean;
+    setSolid: (value?: string) => void;
+    setRadial: (value?: string) => void;
+    setLinear: (value?: string) => void;
+    gradientType: string | undefined;
+    withGradient: string | true;
+};
+export default useSetupColorPicker;