@dreamcommerce/aurora 3.0.0-9 → 3.0.0-91

package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.d.ts

@@ -0,0 +1,18 @@
+import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, TGradientColoPickerLibGradientObject, TGradientObject } from './color_picker_types';
+import tinycolor from 'tinycolor2';
+export declare class ColorPickerUtils {
+    static getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
+    static isGradient(color: string): boolean;
+    static getColorPickerValue: (color: string | ColorPickerVariable | undefined) => ColorPickerVariable;
+    static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
+    static getHexValue: (colorSet: tinycolor.Instance) => string;
+    static getHexValueString: (colorSet: tinycolor.Instance) => string;
+    static isHexChar: (value: string) => boolean;
+    static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
+    static getVariableShades: ({ color, name }: {
+        color: ColorPickerColors;
+        name: string;
+    }) => ColorPickerVariable[];
+    private static convertVariableShadesToHex;
+    static getColorPickerGradientValue(gradient: TGradientColoPickerLibGradientObject): TGradientObject;
+}

package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js

@@ -0,0 +1,106 @@
+import { COLOR_PICKER_INITIAL_STATE, GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from '@auroraComponents/color_picker/color_picker_constants';
+import './color_picker_types';
+import tinycolor from 'tinycolor2';
+export class ColorPickerUtils {
+    static getTinyColorInstance = (color) => {
+        return tinycolor(color);
+    };
+    static isGradient(color) {
+        return color.includes('linear-gradient') || color.includes('radial-gradient');
+    }
+    static getColorPickerValue = (color) => {
+        const initialColorValue = typeof color === 'string' ? color : color?.value;
+        if (!initialColorValue)
+            return {
+                value: COLOR_PICKER_INITIAL_STATE,
+                name: ''
+            };
+        let parsedColorValue = initialColorValue
+            ? ColorPickerUtils.getTinyColorInstance(initialColorValue).toHex8()
+            : COLOR_PICKER_INITIAL_STATE;
+        if (ColorPickerUtils.isGradient(initialColorValue)) {
+            parsedColorValue = initialColorValue;
+        }
+        return {
+            value: parsedColorValue,
+            name: typeof color === 'string' ? '' : color?.name ?? ''
+        };
+    };
+    static getRgbaValue = (colorSet) => {
+        return colorSet.toRgb();
+    };
+    static getHexValue = (colorSet) => {
+        const alphaValue = colorSet.getAlpha();
+        return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+    };
+    static getHexValueString = (colorSet) => {
+        return `#${this.getHexValue(colorSet)}`;
+    };
+    static isHexChar = (value) => {
+        const hexRegEx = /^$|[0-9a-fA-F]+$/;
+        return hexRegEx.test(value);
+    };
+    static getAllColorTypes = (color) => {
+        const tinyColor = typeof color === 'string' ? this.getTinyColorInstance(color) : this.getTinyColorInstance(color.value);
+        const rgba = this.getRgbaValue(tinyColor);
+        const hex = this.getHexValue(tinyColor);
+        const hexString = this.getHexValueString(tinyColor);
+        const allColorTypes = {
+            rgba: {
+                r: rgba.r,
+                g: rgba.g,
+                b: rgba.b,
+                a: rgba.a
+            },
+            hex: hex,
+            hexString: hexString
+        };
+        const variableName = { variable: color.name ? `@${color.name}` : '' };
+        return {
+            ...allColorTypes,
+            ...(variableName && variableName)
+        };
+    };
+    static getVariableShades = ({ color, name }) => {
+        const colorTiny = this.getTinyColorInstance(color);
+        const colorHsl = colorTiny.toHsl();
+        const isNeutral = name.includes('neutral');
+        const blackShade = [{ h: colorHsl.h, s: colorHsl.s, l: 100, name: `${name}s0` }];
+        const whiteShade = [{ h: colorHsl.h, s: colorHsl.s, l: 0, name: `${name}s1000` }];
+        const shades = [
+            { h: colorHsl.h, s: colorHsl.s, l: 99, name: `${name}s10` },
+            { h: colorHsl.h, s: colorHsl.s, l: 98, name: `${name}s20` },
+            { h: colorHsl.h, s: colorHsl.s, l: 95, name: `${name}s50` },
+            { h: colorHsl.h, s: colorHsl.s, l: 90, name: `${name}s100` },
+            { h: colorHsl.h, s: colorHsl.s, l: 80, name: `${name}s200` },
+            { h: colorHsl.h, s: colorHsl.s, l: 70, name: `${name}s300` },
+            { h: colorHsl.h, s: colorHsl.s, l: 60, name: `${name}s400` },
+            { h: colorHsl.h, s: colorHsl.s, l: 50, name: `${name}s500` },
+            { h: colorHsl.h, s: colorHsl.s, l: 40, name: `${name}s600` },
+            { h: colorHsl.h, s: colorHsl.s, l: 30, name: `${name}s700` },
+            { h: colorHsl.h, s: colorHsl.s, l: 20, name: `${name}s800` },
+            { h: colorHsl.h, s: colorHsl.s, l: 10, name: `${name}s900` }
+        ];
+        const result = [...(isNeutral ? blackShade : []), ...shades, ...(isNeutral ? whiteShade : [])];
+        return this.convertVariableShadesToHex(result);
+    };
+    static convertVariableShadesToHex = (variables) => {
+        return variables.map((variable) => {
+            const colorTiny = this.getTinyColorInstance({ h: variable.h, s: variable.s, l: variable.l });
+            const colorHex = colorTiny.toHexString();
+            return { name: variable.name, value: colorHex };
+        });
+    };
+    static getColorPickerGradientValue(gradient) {
+        return {
+            gradientType: gradient.gradientType,
+            angle: gradient.gradientType === GRADIENT_TYPES.radial ? undefined : parseFloat(gradient.degrees ?? '90deg'),
+            radialShape: gradient.gradientType === GRADIENT_TYPES.radial ? GRADIENT_RADIAL_SHAPES.circle : undefined,
+            colors: gradient.colors.map(({ left, value }) => ({
+                stop: left,
+                value: `#${ColorPickerUtils.getTinyColorInstance(value).toHex8()}`
+            }))
+        };
+    }
+}
+//# sourceMappingURL=color_picker_utils.js.map

package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_utils.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/color_picker_utils.ts"],"names":[],"mappings":"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"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IColorLabelInputProps {
+    id: string;
+    name?: string;
+    errors?: string | string[];
+}
+export declare const ColorPickerInput: React.FC<IColorLabelInputProps>;
+export {};

package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js

@@ -0,0 +1,14 @@
+import { GRADIENT_TYPES } from '@auroraComponents/color_picker/color_picker_constants';
+import { Input } from '@auroraComponents/input/input';
+import React from 'react';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+import { useTranslation } from 'react-i18next';
+export const ColorPickerInput = ({ id, name, errors }) => {
+    const { hex, color, isCurrentValueGradient, gradientType } = useColorPicker();
+    const [t] = useTranslation();
+    let colorName = color.name ? `${t(color.name)}` : `# ${hex?.toUpperCase()}`;
+    if (isCurrentValueGradient)
+        colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
+    return React.createElement(Input, { type: "text", id: id, name: name, value: colorName, errors: errors, readOnly: true });
+};
+//# sourceMappingURL=color_label_input.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_label_input.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/color_label_input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAQ/C,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,sBAAsB,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAC9E,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAE7B,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,WAAW,EAAE,EAAE,CAAC;IAE5E,IAAI,sBAAsB;QAAE,SAAS,GAAG,YAAY,KAAK,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAE7H,OAAO,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAG,CAAC;AAChG,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.d.ts

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js

@@ -0,0 +1,18 @@
+import { COLOR_PICKER_HEIGHT, COLOR_PICKER_WIDTH } from '@auroraComponents/color_picker/color_picker_constants';
+import { ColorPickerFooter } from '@auroraComponents/color_picker/components/color_picker_footer';
+import { ColorPickerHeader } from '@auroraComponents/color_picker/components/color_picker_header';
+import { ColorPickerImpl } from '@auroraComponents/color_picker/components/color_picker_impl/color_picker_impl';
+import { ColorPickerVariables } from '@auroraComponents/color_picker/components/color_picker_variables';
+import React from 'react';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+export const ColorPickerContent = () => {
+    const { color, setColor, colorVariables, isCurrentValueGradient } = useColorPicker();
+    const colorValue = typeof color === 'string' ? color : color.value;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ColorPickerHeader, null),
+        React.createElement("div", { className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x" },
+            React.createElement(ColorPickerImpl, { value: colorValue, onChange: setColor, width: COLOR_PICKER_WIDTH, height: COLOR_PICKER_HEIGHT }),
+            colorVariables?.isVisible && !isCurrentValueGradient ? React.createElement(ColorPickerVariables, { variables: colorVariables.variables }) : null),
+        React.createElement(ColorPickerFooter, null)));
+};
+//# sourceMappingURL=color_picker_content.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_content.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/color_picker_content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAC;AAEhH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+DAA+D,CAAC;AAClG,OAAO,EAAE,iBAAiB,EAAE,MAAM,+DAA+D,CAAC;AAClG,OAAO,EAAE,eAAe,EAAE,MAAM,+EAA+E,CAAC;AAChH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kEAAkE,CAAC;AACxG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AAEvF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,sBAAsB,EAAE,GAAG,cAAc,EAAE,CAAC;IACrF,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAEnE,OAAO,CACH;QACI,oBAAC,iBAAiB,OAAG;QAErB,6BAAK,SAAS,EAAC,qFAAqF;YAChG,oBAAC,eAAe,IAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,mBAAmB,GAAI;YAEjH,cAAc,EAAE,SAAS,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,oBAAC,oBAAoB,IAAC,SAAS,EAAE,cAAc,CAAC,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI,CAC1H;QAEN,oBAAC,iBAAiB,OAAG,CACtB,CACN,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.d.ts

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.js

@@ -0,0 +1,44 @@
+import { ColorPickerGradientAngle } from '@auroraComponents/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle';
+import { ColorPickerModeToggler } from '@auroraComponents/color_picker/components/color_picker_mode_toggler';
+import EyeDropper from 'react-best-gradient-color-picker/dist/esm/components/EyeDropper';
+import { GRADIENT_TYPES } from '@auroraComponents/color_picker/color_picker_constants';
+import GradientBar from 'react-best-gradient-color-picker/dist/esm/components/GradientBar';
+import GradientControls from 'react-best-gradient-color-picker/dist/esm/components/GradientControls';
+import React from 'react';
+import { Stack } from '@auroraComponents/stack/stack';
+import { Tooltip } from '@auroraComponents/tooltip/tooltip';
+import { TooltipContent } from '@auroraComponents/tooltip/components/tooltip_content';
+import { TooltipProvider } from '@auroraComponents/tooltip/context/tooltip_provider';
+import { TooltipTrigger } from '@auroraComponents/tooltip/components/tooltip_trigger';
+import { Typography } from '@auroraComponents/typography/typography';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import { useTranslation } from 'react-i18next';
+export const ColorPickerControls = () => {
+    const { handleChange } = usePicker();
+    const { t } = useTranslation();
+    const { withGradient, gradientType, isCurrentValueGradient } = useColorPicker();
+    const isLinearGradient = gradientType === GRADIENT_TYPES.linear;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { justify: withGradient ? 'between' : 'end' },
+            withGradient ? (React.createElement(Stack, { spacing: "8" },
+                React.createElement(ColorPickerModeToggler, null))) : null,
+            React.createElement(TooltipProvider, null,
+                React.createElement(Tooltip, null,
+                    React.createElement(TooltipTrigger, null,
+                        React.createElement(EyeDropper, { onSelect: handleChange })),
+                    React.createElement(TooltipContent, { variant: "dark" },
+                        React.createElement(Typography, { size: "xs", weight: "medium" }, `${t('Sample color')}`))))),
+        withGradient && isCurrentValueGradient ? (React.createElement(Stack, { justify: isLinearGradient ? 'between' : 'end' },
+            React.createElement(React.Fragment, null,
+                isLinearGradient ? React.createElement(ColorPickerGradientAngle, null) : null,
+                React.createElement(GradientControls, { hideGradientType: true, hideGradientAngle: true, hideGradientStop: true })))) : null,
+        withGradient && isCurrentValueGradient ? (React.createElement(Stack, null,
+            React.createElement(TooltipProvider, null,
+                React.createElement(Tooltip, null,
+                    React.createElement(TooltipTrigger, null,
+                        React.createElement(GradientBar, null)),
+                    React.createElement(TooltipContent, { variant: "dark" },
+                        React.createElement(Typography, { size: "xs", weight: "medium" }, `${t('Add color')}`)))))) : null));
+};
+//# sourceMappingURL=color_picker_controls.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_controls.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/color_picker_controls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,sGAAsG,CAAC;AAChJ,OAAO,EAAE,sBAAsB,EAAE,MAAM,qEAAqE,CAAC;AAC7G,OAAO,UAAU,MAAM,iEAAiE,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,WAAW,MAAM,kEAAkE,CAAC;AAC3F,OAAO,gBAAgB,MAAM,uEAAuE,CAAC;AACrG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACpC,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC;IACrC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,GAAG,cAAc,EAAE,CAAC;IAChF,MAAM,gBAAgB,GAAG,YAAY,KAAK,cAAc,CAAC,MAAM,CAAC;IAEhE,OAAO,CACH;QACI,oBAAC,KAAK,IAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;YAC3C,YAAY,CAAC,CAAC,CAAC,CACZ,oBAAC,KAAK,IAAC,OAAO,EAAC,GAAG;gBACd,oBAAC,sBAAsB,OAAG,CACtB,CACX,CAAC,CAAC,CAAC,IAAI;YAER,oBAAC,eAAe;gBACZ,oBAAC,OAAO;oBACJ,oBAAC,cAAc;wBACX,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,GAAI,CACzB;oBAEjB,oBAAC,cAAc,IAAC,OAAO,EAAC,MAAM;wBAC1B,oBAAC,UAAU,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,IAAE,GAAG,CAAC,CAAC,cAAc,CAAC,EAAE,CAAc,CAC9D,CACX,CACI,CACd;QAEP,YAAY,IAAI,sBAAsB,CAAC,CAAC,CAAC,CACtC,oBAAC,KAAK,IAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;YAChD;gBACK,gBAAgB,CAAC,CAAC,CAAC,oBAAC,wBAAwB,OAAG,CAAC,CAAC,CAAC,IAAI;gBACvD,oBAAC,gBAAgB,IAAC,gBAAgB,QAAC,iBAAiB,QAAC,gBAAgB,SAAG,CACzE,CACC,CACX,CAAC,CAAC,CAAC,IAAI;QAEP,YAAY,IAAI,sBAAsB,CAAC,CAAC,CAAC,CACtC,oBAAC,KAAK;YACF,oBAAC,eAAe;gBACZ,oBAAC,OAAO;oBACJ,oBAAC,cAAc;wBACX,oBAAC,WAAW,OAAG,CACF;oBAEjB,oBAAC,cAAc,IAAC,OAAO,EAAC,MAAM;wBAC1B,oBAAC,UAAU,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,IAAE,GAAG,CAAC,CAAC,WAAW,CAAC,EAAE,CAAc,CAC3D,CACX,CACI,CACd,CACX,CAAC,CAAC,CAAC,IAAI,CACT,CACN,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.d.ts

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { Button } from '@auroraComponents/button/button';
+import { ColorPickerContext } from '../color_picker_context';
+import { ColorPickerUtils } from '../color_picker_utils';
+import '../color_picker_types';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+import { useTranslation } from 'react-i18next';
+export const ColorPickerFooter = () => {
+    const { setIsColorPickerOpened } = useContext(ColorPickerContext);
+    const { color, handleCancel, handleSave } = useColorPicker();
+    const [t] = useTranslation();
+    const handleCancelButton = () => {
+        setIsColorPickerOpened(false);
+        handleCancel?.();
+    };
+    const handleSaveButton = () => {
+        setIsColorPickerOpened(false);
+        handleSave(ColorPickerUtils.getAllColorTypes(color));
+    };
+    return (React.createElement("div", { className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-rounded-b-16" },
+        React.createElement(Button, { className: "aurora-capitalize aurora-flex-1", variant: "secondary", size: "s", type: "button", onClick: handleCancelButton }, `${t('cancel')}`),
+        React.createElement(Button, { className: "aurora-capitalize aurora-flex-1", type: "button", size: "s", onClick: handleSaveButton }, `${t('choose')}`)));
+};
+//# sourceMappingURL=color_picker_footer.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_footer.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/color_picker_footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAoC,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,EAAE,sBAAsB,EAAE,GAAwB,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACvF,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAC7D,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,YAAY,EAAE,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC1B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAC,2IAA2I;QACtJ,oBAAC,MAAM,IAAC,SAAS,EAAC,iCAAiC,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,kBAAkB,IACrH,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CACZ;QAET,oBAAC,MAAM,IAAC,SAAS,EAAC,iCAAiC,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,gBAAgB,IAC/F,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CACZ,CACP,CACT,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/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/components/color_picker_gradient_controls/color_picker_gradient_angle.js

@@ -0,0 +1,25 @@
+import { DegreesIcon } from 'react-best-gradient-color-picker/dist/esm/components/icon';
+import { Input } from '@auroraComponents/input/input';
+import React from 'react';
+import { formatInputValues } from 'react-best-gradient-color-picker/dist/esm/utils/formatters';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+export const ColorPickerGradientAngle = () => {
+    const { degrees, onChange, value } = usePicker();
+    const handleDegrees = (e) => {
+        const newValue = formatInputValues(e.target.value, 0, 360);
+        const remaining = value.split(/,(.+)/)[1];
+        onChange(`linear-gradient(${newValue || 0}deg, ${remaining}`);
+    };
+    return (React.createElement("div", { className: 'aurora-relative aurora-p-0 aurora-flex aurora-justify-between aurora-gap-1.5 aurora-h-6 aurora-border-2 aurora-border-solid aurora-rounded-4 aurora-bg-active' },
+        React.createElement(DegreesIcon, { color: "#5c657e" }),
+        React.createElement("div", null,
+            React.createElement(Input, { value: degrees, onChange: (e) => handleDegrees(e), className: '!aurora-h-5 !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center' }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+                    top: 1,
+                    fontWeight: 400,
+                    fontSize: 13
+                } }, "\u00B0"))));
+};
+//# sourceMappingURL=color_picker_gradient_angle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_gradient_angle.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2DAA2D,CAAC;AACxF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAE9E,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,CAAC;IAEjD,MAAM,aAAa,GAAG,CAAC,CAAM,EAAE,EAAE;QAC7B,MAAM,QAAQ,GAAG,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,QAAQ,CAAC,mBAAmB,QAAQ,IAAI,CAAC,QAAQ,SAAS,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC;IAEF,OAAO,CACH,6BACI,SAAS,EACL,+JAA+J;QAGnK,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,GAAG;QAE/B;YACI,oBAAC,KAAK,IACF,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,2FAA2F,GACxG;YAEF,6BACI,KAAK,EAAE;oBACH,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC9C,GAAG,EAAE,CAAC;oBACN,UAAU,EAAE,GAAG;oBACf,QAAQ,EAAE,EAAE;iBACf,aAGC,CACJ,CACJ,CACT,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_header.d.ts

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_header.js

@@ -0,0 +1,30 @@
+import React, { useContext, useEffect } from 'react';
+import { CloseLineIcon } from '@auroraAssets/icons/close_icon';
+import { ColorPickerContext } from '../color_picker_context';
+import '../color_picker_types';
+import { Typography } from '@auroraComponents/typography/typography';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+import { useTranslation } from 'react-i18next';
+export const ColorPickerHeader = () => {
+    const { handleCancel } = useColorPicker();
+    const [t] = useTranslation();
+    const { isColorPickerOpened, setIsColorPickerOpened } = useContext(ColorPickerContext);
+    const handleCancelButton = () => {
+        closePicker();
+    };
+    const closePicker = () => {
+        setIsColorPickerOpened(false);
+        handleCancel?.();
+    };
+    useEffect(() => {
+        if (!isColorPickerOpened)
+            return;
+        document.addEventListener('visibilitychange', closePicker);
+        return () => document.removeEventListener('visibilitychange', closePicker);
+    }, [isColorPickerOpened]);
+    return (React.createElement("div", { className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16" },
+        React.createElement(Typography, { size: "s", weight: "semibold" }, `${t('Select color')}`),
+        React.createElement("button", { onClick: handleCancelButton, className: "color-picker__close-icon aurora-flex aurora-bg-transparent aurora-cursor-pointer" },
+            React.createElement(CloseLineIcon, { className: "aurora-w-4 aurora-h-4" }))));
+};
+//# sourceMappingURL=color_picker_header.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_header.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/color_picker_header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAoC,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,GAAwB,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE5G,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,WAAW,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,YAAY,EAAE,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,6BAAK,SAAS,EAAC,kHAAkH;QAC7H,oBAAC,UAAU,IAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,UAAU,IAAE,GAAG,CAAC,CAAC,cAAc,CAAC,EAAE,CAAc;QAE5E,gCAAQ,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAC,kFAAkF;YAC7H,oBAAC,aAAa,IAAC,SAAS,EAAC,uBAAuB,GAAG,CAC9C,CACP,CACT,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/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/components/color_picker_impl/color_picker_impl.js

@@ -0,0 +1,14 @@
+import React, { useRef } from 'react';
+import PickerContextWrapper from 'react-best-gradient-color-picker/dist/esm/context';
+import { PickerImpl } from '@auroraComponents/color_picker/components/color_picker_impl/picker_impl';
+import { getStyles } from 'react-best-gradient-color-picker/dist/esm/styles/styles';
+import { objectToString } from 'react-best-gradient-color-picker/dist/esm/utils/utils';
+export const ColorPickerImpl = ({ value = 'rgba(175, 51, 242, 1)', onChange, width = 294, height = 294, style = {}, className }) => {
+    const safeValue = objectToString(value);
+    const contRef = useRef(null);
+    const defaultStyles = getStyles(true);
+    return (React.createElement("div", { ref: contRef, className: className, style: { ...defaultStyles.body, ...style, width: width } },
+        React.createElement(PickerContextWrapper, { value: safeValue, defaultStyles: defaultStyles, onChange: onChange, squareWidth: width, squareHeight: height, hideOpacity: false },
+            React.createElement(PickerImpl, null))));
+};
+//# sourceMappingURL=color_picker_impl.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_impl/color_picker_impl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_impl.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker/components/color_picker_impl/color_picker_impl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,oBAAoB,MAAM,mDAAmD,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,yEAAyE,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,yDAAyD,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AAEvF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,GAAG,uBAAuB,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,EAAO,EAAE,EAAE;IACpI,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,CACH,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,IAAI,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7F,oBAAC,oBAAoB,IACjB,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,KAAK;YAElB,oBAAC,UAAU,OAAG,CACK,CACrB,CACT,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/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/components/color_picker_impl/picker_impl.js

@@ -0,0 +1,26 @@
+import { ColorPickerControls } from '@auroraComponents/color_picker/components/color_picker_controls';
+import { ColorPickerInputs } from '@auroraComponents/color_picker/components/color_picker_inputs/color_picker_inputs';
+import { ColorPickerShades } from '@auroraComponents/color_picker/components/color_picker_shades';
+import Hue from 'react-best-gradient-color-picker/dist/esm/components/Hue';
+import Opacity from 'react-best-gradient-color-picker/dist/esm/components/Opacity';
+import React from 'react';
+import Square from 'react-best-gradient-color-picker/dist/esm/components/Square';
+import { Stack } from '@auroraComponents/stack/stack';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+export const PickerImpl = () => {
+    const { isCurrentValueGradient } = useColorPicker();
+    return (React.createElement("div", { className: "aurora-flex aurora-flex-col aurora-gap-2" },
+        React.createElement(ColorPickerControls, null),
+        React.createElement(Stack, { spacing: "2.5", direction: "column", onMouseDown: (ev) => 
+            // Prevents whole page from being selected when dragging
+            ev.preventDefault() },
+            React.createElement("div", { className: "color-picker__square" },
+                React.createElement(Square, null)),
+            React.createElement("div", { className: "color-picker__hue" },
+                React.createElement(Hue, null)),
+            React.createElement("div", { className: "color-picker__opacity" },
+                React.createElement(Opacity, null))),
+        React.createElement(ColorPickerInputs, null),
+        !isCurrentValueGradient ? React.createElement(ColorPickerShades, null) : null));
+};
+//# sourceMappingURL=picker_impl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker_impl.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker/components/color_picker_impl/picker_impl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iEAAiE,CAAC;AACtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,mFAAmF,CAAC;AACtH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+DAA+D,CAAC;AAClG,OAAO,GAAG,MAAM,0DAA0D,CAAC;AAC3E,OAAO,OAAO,MAAM,8DAA8D,CAAC;AACnF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,6DAA6D,CAAC;AACjF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AAEvF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC3B,MAAM,EAAE,sBAAsB,EAAE,GAAG,cAAc,EAAE,CAAC;IAEpD,OAAO,CACH,6BAAK,SAAS,EAAC,0CAA0C;QACrD,oBAAC,mBAAmB,OAAG;QAEvB,oBAAC,KAAK,IACF,OAAO,EAAC,KAAK,EACb,SAAS,EAAC,QAAQ,EAClB,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE;YAChB,wDAAwD;YACxD,EAAE,CAAC,cAAc,EAAE;YAGvB,6BAAK,SAAS,EAAC,sBAAsB;gBACjC,oBAAC,MAAM,OAAG,CACR;YAEN,6BAAK,SAAS,EAAC,mBAAmB;gBAC9B,oBAAC,GAAG,OAAG,CACL;YAEN,6BAAK,SAAS,EAAC,uBAAuB;gBAClC,oBAAC,OAAO,OAAG,CACT,CACF;QAER,oBAAC,iBAAiB,OAAG;QACpB,CAAC,sBAAsB,CAAC,CAAC,CAAC,oBAAC,iBAAiB,OAAG,CAAC,CAAC,CAAC,IAAI,CACrD,CACT,CAAC;AACN,CAAC,CAAC"}

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

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { COLOR_PICKER_TYPES } from '../../color_picker_constants';
+import { ColorPickerInputsHex } from '@auroraComponents/color_picker/components/color_picker_inputs/color_picker_inputs_hex';
+import { ColorPickerInputsRgba } from '@auroraComponents/color_picker/components/color_picker_inputs/color_picker_inputs_rgba';
+import { CurrentColorPreview } from '@auroraComponents/color_picker/components/current_color_preview';
+import { Stack } from '@auroraComponents/stack/stack';
+export const ColorPickerInputs = () => {
+    const [type, setType] = useState(COLOR_PICKER_TYPES.HEX);
+    const handleSelectType = (e) => {
+        setType(e.target.value);
+    };
+    const inputs = () => {
+        switch (type) {
+            case COLOR_PICKER_TYPES.HEX:
+                return React.createElement(ColorPickerInputsHex, null);
+            case COLOR_PICKER_TYPES.RGB:
+                return React.createElement(ColorPickerInputsRgba, null);
+            default:
+                return false;
+        }
+    };
+    return (React.createElement(Stack, { spacing: "2", align: "center" },
+        React.createElement("div", null,
+            React.createElement("select", { value: type, onChange: handleSelectType, className: "color-picker__inputs-select aurora-text-xs aurora-text-info-strong aurora-uppercase aurora-pr-2.5 aurora-appearance-none" },
+                React.createElement("option", { value: COLOR_PICKER_TYPES.HEX }, COLOR_PICKER_TYPES.HEX),
+                React.createElement("option", { value: COLOR_PICKER_TYPES.RGB }, COLOR_PICKER_TYPES.RGB))),
+        React.createElement("div", { className: "aurora-flex-1" },
+            React.createElement("div", { className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden" }, inputs())),
+        React.createElement(CurrentColorPreview, null)));
+};
+//# sourceMappingURL=color_picker_inputs.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_inputs.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker/components/color_picker_inputs/color_picker_inputs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uFAAuF,CAAC;AAC7H,OAAO,EAAE,qBAAqB,EAAE,MAAM,wFAAwF,CAAC;AAC/H,OAAO,EAAE,mBAAmB,EAAE,MAAM,iEAAiE,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA6D,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAErH,MAAM,gBAAgB,GAAG,CAAC,CAAuC,EAAE,EAAE;QACjE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAmE,CAAC,CAAC;IAC1F,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,GAAG,EAAE;QAChB,QAAQ,IAAI,EAAE;YACV,KAAK,kBAAkB,CAAC,GAAG;gBACvB,OAAO,oBAAC,oBAAoB,OAAG,CAAC;YACpC,KAAK,kBAAkB,CAAC,GAAG;gBACvB,OAAO,oBAAC,qBAAqB,OAAG,CAAC;YACrC;gBACI,OAAO,KAAK,CAAC;SACpB;IACL,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,KAAK,IAAC,OAAO,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ;QAC7B;YACI,gCACI,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,0HAA0H;gBAEpI,gCAAQ,KAAK,EAAE,kBAAkB,CAAC,GAAG,IAAG,kBAAkB,CAAC,GAAG,CAAU;gBACxE,gCAAQ,KAAK,EAAE,kBAAkB,CAAC,GAAG,IAAG,kBAAkB,CAAC,GAAG,CAAU,CACnE,CACP;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC1B,6BAAK,SAAS,EAAC,wGAAwG,IAClH,MAAM,EAAE,CACP,CACJ;QAEN,oBAAC,mBAAmB,OAAG,CACnB,CACX,CAAC;AACN,CAAC,CAAC"}

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

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import { ColorPickerUtils } from '@auroraComponents/color_picker/color_picker_utils';
+import { Input } from '@auroraComponents/input/input';
+import { InputUtils } from '@dreamcommerce/utilities';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+export const ColorPickerInputsHex = () => {
+    const { setColor, hex, handleOnChangeAlpha, alphaValue } = useColorPicker();
+    const [value, setValue] = useState(hex);
+    const [disable, setDisable] = useState(false);
+    const handleOnChange = (event) => {
+        const inputValue = event.target.value.replace('%', '');
+        if (ColorPickerUtils.isHexChar(inputValue)) {
+            setValue(inputValue);
+            setColor(inputValue);
+        }
+    };
+    const hexFocus = () => {
+        setDisable(true);
+    };
+    const hexBlur = () => {
+        setDisable(false);
+    };
+    useEffect(() => {
+        if (!disable) {
+            setValue(hex);
+        }
+    }, [hex, disable]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { className: "!aurora-h-6 !aurora-px-2 aurora-text-xs", type: "text", maxLength: 8, value: value.toUpperCase(), onChange: handleOnChange, onBlur: hexBlur, onFocus: hexFocus }),
+        React.createElement(Input, { className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters })));
+};
+//# sourceMappingURL=color_picker_inputs_hex.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_inputs_hex.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mDAAmD,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AAEvF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,mBAAmB,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAE5E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAEvD,IAAI,gBAAgB,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE;YACxC,QAAQ,CAAC,UAAU,CAAC,CAAC;YACrB,QAAQ,CAAC,UAAU,CAAC,CAAC;SACxB;IACL,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,UAAU,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,UAAU,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,OAAO,EAAE;YACV,QAAQ,CAAC,GAAG,CAAC,CAAC;SACjB;IACL,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH;QACI,oBAAC,KAAK,IACF,SAAS,EAAC,yCAAyC,EACnD,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,EAC1B,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,QAAQ,GACnB;QACF,oBAAC,KAAK,IACF,SAAS,EAAC,2CAA2C,EACrD,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,mBAAmB,EAC7B,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C,CACH,CACN,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.d.ts

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js

@@ -0,0 +1,13 @@
+import { Input } from '@auroraComponents/input/input';
+import { InputUtils } from '@dreamcommerce/utilities';
+import React from 'react';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+export const ColorPickerInputsRgba = () => {
+    const { setR, setG, setB, handleOnChangeAlpha, alphaValue, rgbaArr } = useColorPicker();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { className: "!aurora-h-6 !aurora-px-2 aurora-text-xs", type: "text", value: rgbaArr[0], onChange: (e) => setR(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { className: "!aurora-h-6 !aurora-px-2 aurora-text-xs", type: "text", value: rgbaArr[1], onChange: (e) => setG(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { className: "!aurora-h-6 !aurora-px-2 aurora-text-xs", type: "text", value: rgbaArr[2], onChange: (e) => setB(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { className: "!aurora-h-6 !aurora-px-2 aurora-text-xs", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters })));
+};
+//# sourceMappingURL=color_picker_inputs_rgba.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_inputs_rgba.js","sourceRoot":"","sources":["../../../../../../../../../src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACtC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IAExF,OAAO,CACH;QACI,oBAAC,KAAK,IACF,SAAS,EAAC,yCAAyC,EACnD,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;QACF,oBAAC,KAAK,IACF,SAAS,EAAC,yCAAyC,EACnD,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;QACF,oBAAC,KAAK,IACF,SAAS,EAAC,yCAAyC,EACnD,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;QACF,oBAAC,KAAK,IACF,SAAS,EAAC,yCAAyC,EACnD,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,mBAAmB,EAC7B,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C,CACH,CACN,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/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/components/color_picker_mode_toggler.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Stack } from '@auroraComponents/stack/stack';
+import { Tooltip } from '@auroraComponents/tooltip/tooltip';
+import { TooltipContent } from '@auroraComponents/tooltip/components/tooltip_content';
+import { TooltipProvider } from '@auroraComponents/tooltip/context/tooltip_provider';
+import { TooltipTrigger } from '@auroraComponents/tooltip/components/tooltip_trigger';
+import { Typography } from '@auroraComponents/typography/typography';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+import { useTranslation } from 'react-i18next';
+export const ColorPickerModeToggler = () => {
+    const { t } = useTranslation();
+    const { gradientType, isCurrentValueGradient, setSolid, setRadial, setLinear, previousSolidColor, previousGradientColor } = useColorPicker();
+    const commonClassNames = 'aurora-block aurora-w-6 aurora-h-6 aurora-border aurora-border-solid aurora-rounded-4 aurora-cursor-pointer hover:aurora-border-strong';
+    const activeClassNames = 'aurora-border-2 aurora-border-solid aurora-border-active';
+    return (React.createElement(Stack, { spacing: "1", className: "aurora-flex aurora-list-none" },
+        React.createElement(TooltipProvider, null,
+            React.createElement(Tooltip, null,
+                React.createElement(TooltipTrigger, null,
+                    React.createElement("button", { type: "button", onClick: () => setSolid(previousSolidColor), "aria-label": "Color picker solid mode", className: `aurora-bg-info-active ${commonClassNames} ${!isCurrentValueGradient && activeClassNames}` })),
+                React.createElement(TooltipContent, { variant: "dark" },
+                    React.createElement(Typography, { size: "xs", weight: "medium" }, `${t('Solid')}`)))),
+        React.createElement(TooltipProvider, null,
+            React.createElement(Tooltip, null,
+                React.createElement(TooltipTrigger, null,
+                    React.createElement("button", { type: "button", onClick: () => setLinear(previousGradientColor), "aria-label": "Color picker linear gradient mode", className: `color-picker-mode-toggler__button_gradient_linear ${commonClassNames} ${gradientType === 'linear-gradient' && activeClassNames}` })),
+                React.createElement(TooltipContent, { variant: "dark" },
+                    React.createElement(Typography, { size: "xs", weight: "medium" }, `${t('Linear gradient')}`)))),
+        React.createElement(TooltipProvider, null,
+            React.createElement(Tooltip, null,
+                React.createElement(TooltipTrigger, null,
+                    React.createElement("button", { type: "button", onClick: () => setRadial(previousGradientColor), "aria-label": "Color picker radial gradient mode", className: `color-picker-mode-toggler__button_gradient_radial ${commonClassNames} ${gradientType === 'radial-gradient' && activeClassNames}` })),
+                React.createElement(TooltipContent, { variant: "dark" },
+                    React.createElement(Typography, { size: "xs", weight: "medium" }, `${t('Radial gradient')}`))))));
+};
+//# sourceMappingURL=color_picker_mode_toggler.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_mode_toggler.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/color_picker_mode_toggler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACvC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,YAAY,EAAE,sBAAsB,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,GAAG,cAAc,EAAE,CAAC;IAE7I,MAAM,gBAAgB,GAClB,wIAAwI,CAAC;IAC7I,MAAM,gBAAgB,GAAG,0DAA0D,CAAC;IAEpF,OAAO,CACH,oBAAC,KAAK,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,8BAA8B;QACvD,oBAAC,eAAe;YACZ,oBAAC,OAAO;gBACJ,oBAAC,cAAc;oBACX,gCACI,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,kBAAkB,CAAC,gBAChC,yBAAyB,EACpC,SAAS,EAAE,yBAAyB,gBAAgB,IAAI,CAAC,sBAAsB,IAAI,gBAAgB,EAAE,GAC/F,CACG;gBAEjB,oBAAC,cAAc,IAAC,OAAO,EAAC,MAAM;oBAC1B,oBAAC,UAAU,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,IAAE,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,CAAc,CACvD,CACX,CACI;QAElB,oBAAC,eAAe;YACZ,oBAAC,OAAO;gBACJ,oBAAC,cAAc;oBACX,gCACI,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,qBAAqB,CAAC,gBACpC,mCAAmC,EAC9C,SAAS,EAAE,qDAAqD,gBAAgB,IAC5E,YAAY,KAAK,iBAAiB,IAAI,gBAC1C,EAAE,GACI,CACG;gBAEjB,oBAAC,cAAc,IAAC,OAAO,EAAC,MAAM;oBAC1B,oBAAC,UAAU,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,IAAE,GAAG,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAc,CACjE,CACX,CACI;QAElB,oBAAC,eAAe;YACZ,oBAAC,OAAO;gBACJ,oBAAC,cAAc;oBACX,gCACI,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,qBAAqB,CAAC,gBACpC,mCAAmC,EAC9C,SAAS,EAAE,qDAAqD,gBAAgB,IAC5E,YAAY,KAAK,iBAAiB,IAAI,gBAC1C,EAAE,GACI,CACG;gBAEjB,oBAAC,cAAc,IAAC,OAAO,EAAC,MAAM;oBAC1B,oBAAC,UAAU,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,IAAE,GAAG,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAc,CACjE,CACX,CACI,CACd,CACX,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_shades.d.ts

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