@dreamcommerce/aurora 2.12.0 → 2.12.1-1

package/build/esm/external/tinycolor2/esm/tinycolor.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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-footer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IColorPickerFooterProps {
+    onCancel?: () => void;
+    onSave: (color: string) => void;
+    color: string;
+}
+export declare const ColorPickerFooter: React.FC<IColorPickerFooterProps>;
+export {};

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import Button from '../../button/index.js';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import { cssColorPickerFooter } from '../css_classes.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+
+const ColorPickerFooter = ({ onCancel, onSave, color }) => {
+    const { toggleDropdown } = useContext(DropdownContext);
+    const [t] = useTranslation();
+    const handleCancelButton = () => {
+        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleSaveButton = () => {
+        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+        onSave(color);
+    };
+    return (React.createElement("div", { className: `${styles[cssColorPickerFooter]}` },
+        React.createElement(Button, { size: "small", variant: "outline", onClick: handleCancelButton }, t('cancel')),
+        React.createElement(Button, { size: "small", onClick: handleSaveButton }, t('save'))));
+};
+
+export { ColorPickerFooter };
+//# sourceMappingURL=color-picker-footer.js.map

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-handler.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IColorPickerHandlerProps {
+    size?: 'big';
+}
+export declare const ColorPickerHandler: React.FC<IColorPickerHandlerProps>;
+export {};

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-handler.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+import { cssColorPickerHandler, cssColorPickerHandlerBig } from '../css_classes.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+
+const ColorPickerHandler = ({ size }) => {
+    const colorPickerHandlerClassNames = classnames(styles[cssColorPickerHandler], {
+        [styles[cssColorPickerHandlerBig]]: size === 'big'
+    });
+    return React.createElement("div", { className: colorPickerHandlerClassNames });
+};
+
+export { ColorPickerHandler };
+//# sourceMappingURL=color-picker-handler.js.map

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IColorPickerHeaderProps {
+    text: string;
+    onCancel?: () => void;
+}
+export declare const ColorPickerHeader: React.FC<IColorPickerHeaderProps>;
+export {};

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import IconClose from '../../../assets/icon_close.js';
+
+const ColorPickerHeader = ({ text, onCancel }) => {
+    const { toggleDropdown } = useContext(DropdownContext);
+    const handleCancelButton = () => {
+        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    return (React.createElement("div", { className: `${styles[cssColorPickerHeader]}` },
+        text,
+        React.createElement("button", { onClick: handleCancelButton, className: `${styles[cssColorPickerCloseIcon]}` },
+            React.createElement(IconClose, { size: "m" }))));
+};
+
+export { ColorPickerHeader };
+//# sourceMappingURL=color-picker-header.js.map

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

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

@@ -0,0 +1,9 @@
+import { ColorPickerColorFormats } from '../types';
+import React from 'react';
+interface IColorPickerSwatchProps {
+    color: ColorPickerColorFormats['rgb'];
+    size?: 'small' | 'big';
+    onClick?: (color: ColorPickerColorFormats['rgb']) => void;
+}
+export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
+export {};

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import classnames from 'classnames';
+import { cssColorPickerSwatch, cssColorPickerSwatchSmall, cssColorPickerSwatchBig, cssColorPickerSwatchFill } from '../css_classes.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+
+const ColorPickerSwatch = ({ color, size, onClick }) => {
+    const { r, g, b, a } = color;
+    const colorHolderClassNames = classnames(styles[cssColorPickerSwatch], {
+        [styles[cssColorPickerSwatchSmall]]: size === 'small',
+        [styles[cssColorPickerSwatchBig]]: size === 'big'
+    });
+    const handleOnClick = () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(color);
+    };
+    return (React.createElement("div", { className: colorHolderClassNames, onClick: handleOnClick },
+        React.createElement("div", { className: styles[cssColorPickerSwatchFill], style: { backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})` } })));
+};
+
+export { ColorPickerSwatch };
+//# 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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerColorFormats } from '../types';
+import React from 'react';
+interface IColorPickerSwatchesProps {
+    color: ColorPickerColorFormats['hsl'];
+    onClick?: (color: ColorPickerColorFormats['rgb']) => void;
+}
+export declare const ColorPickerSwatches: React.FC<IColorPickerSwatchesProps>;
+export {};

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import { ColorPickerSwatch } from './color-picker-swatch.js';
+import tinycolor from '../../../../../../external/tinycolor2/esm/tinycolor.js';
+
+const ColorPickerSwatches = ({ color, onClick }) => {
+    const [t] = useTranslation();
+    const shades = [
+        { ...color, l: 95, a: 100 },
+        { ...color, l: 90, a: 100 },
+        { ...color, l: 80, a: 100 },
+        { ...color, l: 70, a: 100 },
+        { ...color, l: 60, a: 100 },
+        { ...color, l: 50, a: 100 },
+        { ...color, l: 40, a: 100 },
+        { ...color, l: 30, a: 100 },
+        { ...color, l: 20, a: 100 },
+        { ...color, l: 10, a: 100 },
+        { ...color, l: 5, a: 100 }
+    ];
+    return (React.createElement("div", { className: styles[cssColorPickerSwatches] },
+        React.createElement("div", { className: styles[cssColorPickerSwatchesHeader] },
+            React.createElement("p", null, t('Shades of color'))),
+        React.createElement("div", { className: styles[cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
+            const tiny = tinycolor(shade);
+            const rgbColor = tiny.toRgb();
+            const handleOnClick = () => {
+                onClick === null || onClick === void 0 ? void 0 : onClick(rgbColor);
+            };
+            return React.createElement(ColorPickerSwatch, { size: "small", onClick: handleOnClick, key: `${shade}-${index}`, color: rgbColor });
+        }))));
+};
+
+export { ColorPickerSwatches };
+//# sourceMappingURL=color-picker-swatches.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA,sBAAsB,wDAA4D;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,21 @@
+export declare const COLOR_PICKER_INITIAL_STATE: {
+    hsl: {
+        h: number;
+        s: number;
+        l: number;
+        a: number;
+    };
+    hsv: {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    };
+    rgb: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    hex: string;
+};

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

@@ -0,0 +1,24 @@
+const COLOR_PICKER_INITIAL_STATE = {
+    hsl: {
+        h: 0,
+        s: 0,
+        l: 0,
+        a: 0
+    },
+    hsv: {
+        h: 0,
+        s: 0,
+        v: 0,
+        a: 0
+    },
+    rgb: {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 0
+    },
+    hex: ''
+};
+
+export { COLOR_PICKER_INITIAL_STATE };
+//# sourceMappingURL=constants.js.map

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

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

@@ -0,0 +1,22 @@
+export declare const cssColorPicker = "color-picker";
+export declare const cssColorPickerContainer = "color-picker__container";
+export declare const cssColorPickerHeader = "color-picker__header";
+export declare const cssColorPickerCloseIcon = "color-picker__close-icon";
+export declare const cssColorPickerSwatches = "color-picker__swatches";
+export declare const cssColorPickerSwatchesHeader = "color-picker__swatches-header";
+export declare const cssColorPickerSwatchesContent = "color-picker__swatches-content";
+export declare const cssColorPickerSwatch = "color-picker__swatch";
+export declare const cssColorPickerSwatchSmall = "color-picker__swatch_small";
+export declare const cssColorPickerSwatchBig = "color-picker__swatch_big";
+export declare const cssColorPickerSwatchFill = "color-picker__swatch-fill";
+export declare const cssColorPickerInputColorSwatchContainer = "color-picker__input-color-swatch-container";
+export declare const cssColorPickerInputContainer = "color-picker__input-container";
+export declare const cssColorPickerHandler = "color-picker__handler";
+export declare const cssColorPickerHandlerBig = "color-picker__handler_big";
+export declare const cssColorPickerSaturation = "color-picker__saturation";
+export declare const cssColorPickerHueAlphaContanier = "color-picker__hue-alpha-container";
+export declare const cssColorPickerHueAlphaContanierSet = "color-picker__hue-alpha-container-set";
+export declare const cssColorPickerHueAlphaContanierResult = "color-picker__hue-alpha-container-result";
+export declare const cssColorPickerHue = "color-picker__hue";
+export declare const cssColorPickerAlpha = "color-picker__alpha";
+export declare const cssColorPickerFooter = "color-picker__footer";

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

@@ -0,0 +1,25 @@
+const cssColorPicker = 'color-picker';
+const cssColorPickerContainer = 'color-picker__container';
+const cssColorPickerHeader = 'color-picker__header';
+const cssColorPickerCloseIcon = 'color-picker__close-icon';
+const cssColorPickerSwatches = 'color-picker__swatches';
+const cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
+const cssColorPickerSwatchesContent = 'color-picker__swatches-content';
+const cssColorPickerSwatch = 'color-picker__swatch';
+const cssColorPickerSwatchSmall = 'color-picker__swatch_small';
+const cssColorPickerSwatchBig = 'color-picker__swatch_big';
+const cssColorPickerSwatchFill = 'color-picker__swatch-fill';
+const cssColorPickerInputColorSwatchContainer = 'color-picker__input-color-swatch-container';
+const cssColorPickerInputContainer = 'color-picker__input-container';
+const cssColorPickerHandler = 'color-picker__handler';
+const cssColorPickerHandlerBig = 'color-picker__handler_big';
+const cssColorPickerSaturation = 'color-picker__saturation';
+const cssColorPickerHueAlphaContanier = 'color-picker__hue-alpha-container';
+const cssColorPickerHueAlphaContanierSet = 'color-picker__hue-alpha-container-set';
+const cssColorPickerHueAlphaContanierResult = 'color-picker__hue-alpha-container-result';
+const cssColorPickerHue = 'color-picker__hue';
+const cssColorPickerAlpha = 'color-picker__alpha';
+const cssColorPickerFooter = 'color-picker__footer';
+
+export { cssColorPicker, cssColorPickerAlpha, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHandler, cssColorPickerHandlerBig, cssColorPickerHeader, cssColorPickerHue, cssColorPickerHueAlphaContanier, cssColorPickerHueAlphaContanierResult, cssColorPickerHueAlphaContanierSet, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerSaturation, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader };
+//# sourceMappingURL=css_classes.js.map

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

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

@@ -0,0 +1,17 @@
+import { ColorPickerColorFormats } from '../types';
+export declare type ColorPickerHookProps = {
+    initialColor: ColorPickerColorFormats['hex'];
+    onChange?: (color: string) => void;
+    onCancel?: () => void;
+    onSave?: (color: string) => void;
+};
+declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
+    color: ColorPickerColorFormats;
+    handleChangeSaturation: (hsv: ColorPickerColorFormats['hsv']) => void;
+    handleChangeHue: (hsl: ColorPickerColorFormats['hsl']) => void;
+    handleChangeAlpha: (hsl: ColorPickerColorFormats['hsl']) => void;
+    handlePickSwatch: (rgb: ColorPickerColorFormats['rgb']) => void;
+    handleCancel: () => void;
+    handleSave: () => void;
+};
+export default useColorPicker;

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

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { getColorFormatsWithoutHsv, getAllColorFormats } from '../utilities.js';
+import { COLOR_PICKER_INITIAL_STATE } from '../constants.js';
+
+const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
+    const [choosenColor, setChoosenColor] = useState(initialColor);
+    const [color, setColor] = useState(COLOR_PICKER_INITIAL_STATE);
+    useEffect(() => {
+        setColors(initialColor);
+    }, [initialColor]);
+    const handleChangeSaturation = (hsv) => {
+        setColors(hsv);
+        onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
+    };
+    const handleChangeHue = (hsl) => {
+        const hueColorSet = getColorFormatsWithoutHsv(hsl);
+        setColor({ ...color, ...hueColorSet });
+        onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
+    };
+    const handleChangeAlpha = (hsl) => {
+        const hueColorSet = getColorFormatsWithoutHsv(hsl);
+        setColor({ ...color, ...hueColorSet });
+        onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
+    };
+    const handlePickSwatch = (rgb) => {
+        setColors(rgb);
+        onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
+    };
+    const handleCancel = () => {
+        setColors(choosenColor);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleSave = () => {
+        setChoosenColor(color.hex);
+        onSave === null || onSave === void 0 ? void 0 : onSave(color.hex);
+    };
+    const setColors = (color) => {
+        setColor(getAllColorFormats(color));
+    };
+    return {
+        color,
+        handleChangeSaturation,
+        handleChangeHue,
+        handleChangeAlpha,
+        handlePickSwatch,
+        handleCancel,
+        handleSave
+    };
+};
+
+export default useColorPicker;
+//# sourceMappingURL=use_color_picker.js.map

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

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

@@ -0,0 +1,4 @@
+import { IColorPickerNewProps } from './types';
+import React from 'react';
+declare const ColorPickerNew: React.FC<IColorPickerNewProps>;
+export default ColorPickerNew;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import Input from '../controls/components/input.js';
+import { c as common } from '../../../../../external/react-color/lib/components/common/index.js';
+import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerSaturation, cssColorPickerHueAlphaContanier, cssColorPickerHueAlphaContanierSet, cssColorPickerHue, cssColorPickerAlpha, cssColorPickerHueAlphaContanierResult } from './css_classes.js';
+import styles from '../../css/color_picker_new/main.module.less.js';
+import { ColorPickerFooter } from './components/color-picker-footer.js';
+import { ColorPickerHandler } from './components/color-picker-handler.js';
+import { ColorPickerHeader } from './components/color-picker-header.js';
+import { ColorPickerSwatch } from './components/color-picker-swatch.js';
+import { ColorPickerSwatches } from './components/color-picker-swatches.js';
+import Dropdown from '../dropdown/index.js';
+import useColorPicker from './hooks/use_color_picker.js';
+
+// @ts-ignore
+const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel, onSave }) => {
+    var _a;
+    const { color, handleChangeSaturation, handleChangeHue, handleChangeAlpha, handlePickSwatch, handleCancel, handleSave } = useColorPicker({
+        initialColor,
+        onChange,
+        onCancel,
+        onSave
+    });
+    return (React.createElement("div", { className: `${styles[cssColorPicker]}` },
+        React.createElement(Dropdown, null,
+            React.createElement(Dropdown.CustomLabel, null,
+                React.createElement("div", { className: `${styles[cssColorPickerInputContainer]}` },
+                    React.createElement("div", { className: `${styles[cssColorPickerInputColorSwatchContainer]}` },
+                        React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgb })),
+                    React.createElement(Input, { value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, readOnly: true }))),
+            React.createElement(Dropdown.Content, { onClickOutside: handleCancel },
+                React.createElement(ColorPickerHeader, { text: pickerText, onCancel: handleCancel }),
+                React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
+                    React.createElement("div", { className: `${styles[cssColorPickerSaturation]}` },
+                        React.createElement(common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsl, hsv: color === null || color === void 0 ? void 0 : color.hsv, pointer: () => React.createElement(ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
+                    React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanier]}` },
+                        React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierSet]}` },
+                            React.createElement("div", { className: `${styles[cssColorPickerHue]}` },
+                                React.createElement(common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsl, pointer: ColorPickerHandler, onChange: handleChangeHue })),
+                            React.createElement("div", { className: `${styles[cssColorPickerAlpha]}` },
+                                React.createElement(common.Alpha, { rgb: color.rgb, hsl: color === null || color === void 0 ? void 0 : color.hsl, pointer: ColorPickerHandler, onChange: handleChangeAlpha }))),
+                        React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierResult]}` },
+                            React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgb, size: "big" }))),
+                    React.createElement(ColorPickerSwatches, { color: color.hsl, onClick: handlePickSwatch })),
+                React.createElement(ColorPickerFooter, { onCancel: handleCancel, onSave: handleSave, color: color === null || color === void 0 ? void 0 : color.hex })))));
+};
+
+export default ColorPickerNew;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,29 @@
+export interface IColorPickerNewProps {
+    pickerText: string;
+    initialColor?: ColorPickerColorFormats['hex'] | undefined;
+    onChange?: (color: string) => void;
+    onCancel?: () => void;
+    onSave?: (color: string) => void;
+}
+export declare type ColorPickerColorFormats = {
+    hsl: {
+        h: number;
+        s: number;
+        l: number;
+        a?: number;
+    };
+    hsv: {
+        h: number;
+        s: number;
+        v: number;
+        a?: number;
+    };
+    rgb: {
+        r: number;
+        g: number;
+        b: number;
+        a?: number;
+    };
+    hex: string;
+};
+export declare type ColorPickerColorTypes = ColorPickerColorFormats['hsl'] | ColorPickerColorFormats['hsv'] | ColorPickerColorFormats['rgb'] | ColorPickerColorFormats['hex'];

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker_new/types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,19 @@
+import { ColorPickerColorFormats, ColorPickerColorTypes } from './types';
+import tinycolor from 'tinycolor2';
+export declare const getAllColorFormats: (color: ColorPickerColorTypes) => {
+    hsl: tinycolor.ColorFormats.HSLA;
+    hsv: tinycolor.ColorFormats.HSVA;
+    rgb: tinycolor.ColorFormats.RGBA;
+    hex: string;
+};
+export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['hsl']) => {
+    hsl: {
+        h: number;
+        s: number;
+        l: number;
+        a?: number | undefined;
+    };
+    rgb: tinycolor.ColorFormats.RGBA;
+    hex: string;
+};
+export declare const getHexValue: (colorSet: tinycolor.Instance) => string;

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

@@ -0,0 +1,22 @@
+import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
+
+const getAllColorFormats = (color) => {
+    const colorSet = tinycolor(color);
+    return {
+        hsl: colorSet.toHsl(),
+        hsv: colorSet.toHsv(),
+        rgb: colorSet.toRgb(),
+        hex: getHexValue(colorSet)
+    };
+};
+const getColorFormatsWithoutHsv = (hue) => {
+    const colorSet = tinycolor(hue);
+    return { hsl: hue, rgb: colorSet.toRgb(), hex: getHexValue(colorSet) };
+};
+const getHexValue = (colorSet) => {
+    const alphaValue = colorSet.getAlpha();
+    return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+};
+
+export { getAllColorFormats, getColorFormatsWithoutHsv, getHexValue };
+//# sourceMappingURL=utilities.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;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/controls/components/element.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { VERTICAL_POSITION } from '../../../constants/positions.js';
 import classnames from 'classnames';
 import { cssControlsElement, cssControlsElementPrefix, cssControlsElementPostfix, cssControlsElementCheckbox, cssControlsElementRadio, cssControlsElementVerticalAlignTop } from '../css_classes.js';
-import { VERTICAL_POSITION } from '../../../constants/positions.js';
 import cssStyles from '../../../css/controls/main.module.less.js';
 
 const Element = ({ type, prefix, postfix, children, verticalPosition }) => {

package/build/esm/packages/aurora/src/components/controls/hoc/control_cell_selector/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Control from '../../index.js';
-import CellSelector from '../../components/cell_selector.js';
 import Hint from '../../../hint/index.js';
+import CellSelector from '../../components/cell_selector.js';
 
 const ControlCellSelector = ({ label, isRequired, id, name, errors, onChange, cols, initialSelected, rows, withValueOffset, className, hint, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },

package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker/index.js

@@ -4,8 +4,8 @@ import { useColorPicker } from '../../../color_picker/use_color_picker.js';
 import withTranslation from '../../../../utilities/translation/with_translation.js';
 import { PureColorPicker } from '../../../color_picker/index.js';
 import Control from '../../index.js';
-import Dropdown from '../../../dropdown/index.js';
 import Hint from '../../../hint/index.js';
+import Dropdown from '../../../dropdown/index.js';
 import ColorPickerLabel from '../../../color_picker/components/label.js';
 
 /**

package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.d.ts

@@ -0,0 +1,4 @@
+import { IControlColorPickerNew } from "../../types";
+import React from 'react';
+declare const ControlColorPickerNew: React.FC<IControlColorPickerNew>;
+export default ControlColorPickerNew;

package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Control from '../../index.js';
+import Hint from '../../../hint/index.js';
+import ColorPickerNew from '../../../color_picker_new/index.js';
+
+const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, pickerText, initialColor, onChange, onCancel, onSave }) => {
+    return (React.createElement(Control, { errors: errors, name: name, id: id },
+        (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
+            label,
+            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+        React.createElement(Control.Content, null,
+            React.createElement(Control.Element, null,
+                React.createElement(ColorPickerNew, { pickerText: pickerText, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
+        React.createElement(Control.Errors, null)));
+};
+
+export default ControlColorPickerNew;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.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;"}

package/build/esm/packages/aurora/src/components/controls/hoc/control_date_picker/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import withTranslation from '../../../../utilities/translation/with_translation.js';
 import Control from '../../index.js';
-import Dropdown from '../../../dropdown/index.js';
 import Hint from '../../../hint/index.js';
+import Dropdown from '../../../dropdown/index.js';
 import useValueController from '../../../date_picker/hooks/use_value_controller.js';
 import DatepickerContext from '../../../date_picker/context/value_controller_context.js';
 import { RangePicker } from '../../../date_picker/hoc/range_picker.js';

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

@@ -2,6 +2,7 @@ import { HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, Text
 import { IFilePicker, IUseFilePickerOnChange } from "../file_picker/types";
 import { IImagePicker, TImageSize } from "../image_picker/types";
 import { IMultiSelectProps, ISelectProps } from "../dropdown/types";
+import { IColorPickerNewProps } from "../color_picker_new/types";
 import { IColorPickerProps } from "../color_picker/types";
 import { IRange } from "../range/types";
 import { IRequestResponse } from '@dreamcommerce/star_core';
@@ -194,4 +195,13 @@ export interface IControlCellSelector extends ICellSelector, IControlCommonProps
     isRequired?: boolean;
     labelAdditionalInfo?: string | ReactNode;
 }
+export interface IControlColorPickerNew extends IColorPickerNewProps, IControlCommonProps {
+    id: string;
+    name?: string;
+    className?: string;
+    label?: string;
+    isRequired?: boolean;
+    hideChooseCancelButtons?: boolean;
+    labelAdditionalInfo?: string | React.ReactNode;
+}
 export {};