@dreamcommerce/aurora 3.0.0-246 → 3.0.0-248

package/build/esm/packages/aurora/src/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: "1", align: "center", className: "aurora-pt-2" },
+        React.createElement("div", { className: "aurora-flex aurora-items-center" },
+            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 aurora-h-6" }, inputs())),
+        React.createElement(CurrentColorPreview, null)));
+};
+//# sourceMappingURL=color_picker_inputs.js.map

package/build/esm/packages/aurora/src/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,EAAC,SAAS,EAAC,aAAa;QACrD,6BAAK,SAAS,EAAC,iCAAiC;YAC5C,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,mHAAmH,IAC7H,MAAM,EAAE,CACP,CACJ;QAEN,oBAAC,mBAAmB,OAAG,CACnB,CACX,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,34 @@
+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-full aurora-px-2 aurora-text-xs", type: "text", maxLength: 8, value: value.toUpperCase(), onChange: handleOnChange, onBlur: hexBlur, onFocus: hexFocus }),
+        React.createElement("div", { className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center" },
+            React.createElement("input", { className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters }),
+            React.createElement("div", { className: "aurora-text-xs aurora-pl-0.5" }, "%"))));
+};
+//# sourceMappingURL=color_picker_inputs_hex.js.map

package/build/esm/packages/aurora/src/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,0CAA0C,EACpD,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,6BAAK,SAAS,EAAC,iHAAiH;YAC5H,+BACI,SAAS,EAAC,gHAAgH,EAC1H,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,mBAAmB,EAC7B,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;YACF,6BAAK,SAAS,EAAC,8BAA8B,QAAQ,CACnD,CACP,CACN,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,15 @@
+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-full aurora-px-1.5 aurora-text-xs", type: "text", value: rgbaArr[0], onChange: (e) => setR(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { className: "aurora-h-full aurora-px-1.5 aurora-text-xs", type: "text", value: rgbaArr[1], onChange: (e) => setG(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement(Input, { className: "aurora-h-full aurora-px-1.5 aurora-text-xs", type: "text", value: rgbaArr[2], onChange: (e) => setB(Number(e.target.value)), onKeyPress: InputUtils.preventTypingLetters }),
+        React.createElement("div", { className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center" },
+            React.createElement("input", { className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters }),
+            React.createElement("div", { className: "aurora-text-xs aurora-pl-0.5" }, "%"))));
+};
+//# sourceMappingURL=color_picker_inputs_rgba.js.map

package/build/esm/packages/aurora/src/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,4CAA4C,EACtD,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,4CAA4C,EACtD,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,4CAA4C,EACtD,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,6BAAK,SAAS,EAAC,iHAAiH;YAC5H,+BACI,SAAS,EAAC,gHAAgH,EAC1H,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,mBAAmB,EAC7B,UAAU,EAAE,UAAU,CAAC,oBAAoB,GAC7C;YACF,6BAAK,SAAS,EAAC,8BAA8B,QAAQ,CACnD,CACP,CACN,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,37 @@
+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';
+import { CSS_TEXT_COLOR_TOKENS } from '@auroraConstants/css_tokens/css_text_color_tokens';
+import { cn } from '@auroraUtilities/cn';
+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 hover:aurora-border-2';
+    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: cn('aurora-bg-neutral-700', commonClassNames, !isCurrentValueGradient && activeClassNames) })),
+                React.createElement(TooltipContent, { variant: "dark" },
+                    React.createElement(Typography, { size: "xs", weight: "medium", color: CSS_TEXT_COLOR_TOKENS.inverse }, `${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: cn('color-picker-mode-toggler__button_gradient_linear', commonClassNames, gradientType === 'linear-gradient' && activeClassNames) })),
+                React.createElement(TooltipContent, { variant: "dark" },
+                    React.createElement(Typography, { size: "xs", weight: "medium", color: CSS_TEXT_COLOR_TOKENS.inverse }, `${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: cn('color-picker-mode-toggler__button_gradient_radial', commonClassNames, gradientType === 'radial-gradient' && activeClassNames) })),
+                React.createElement(TooltipContent, { variant: "dark" },
+                    React.createElement(Typography, { size: "xs", weight: "medium", color: CSS_TEXT_COLOR_TOKENS.inverse }, `${t('Radial gradient')}`))))));
+};
+//# sourceMappingURL=color_picker_mode_toggler.js.map

package/build/esm/packages/aurora/src/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":"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"}

package/build/esm/packages/aurora/src/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import tc from 'tinycolor2';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import { controlBtnStyles } from 'react-best-gradient-color-picker/dist/esm/styles/styles';
+import { DropperFillIcon } from '@auroraAssets/icons/dropper_fill_icon';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke
+ * - Usunieto caly kod zwiazany z html2canvas
+ */
+export const EyeDropper = ({ onSelect }) => {
+    const { defaultStyles } = usePicker();
+    const getEyeDrop = () => {
+        // @ts-expect-error - ts does not evaluate for window.EyeDropper
+        if (!window.EyeDropper) {
+            return;
+        }
+        // @ts-expect-error - ts does not evaluate for window.EyeDropper
+        const eyeDropper = new window.EyeDropper();
+        const abortController = new window.AbortController();
+        eyeDropper
+            .open({ signal: abortController.signal })
+            .then((result) => {
+            const tinyHex = tc(result.sRGBHex);
+            const { r, g, b } = tinyHex.toRgb();
+            onSelect(`rgba(${r}, ${g}, ${b}, 1)`);
+        })
+            .catch((e) => {
+            console.log(e);
+        });
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", { onClick: getEyeDrop, id: "rbgcp-eyedropper-btn", style: {
+                ...defaultStyles.rbgcpEyedropperBtn,
+                ...controlBtnStyles(false, defaultStyles),
+                background: '#F5F6FA'
+            } },
+            React.createElement(DropperFillIcon, { className: "aurora-w-4 aurora-h-4 aurora-stroke-0" }))));
+};
+//# sourceMappingURL=color_picker_eye_dropper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_eye_dropper.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yDAAyD,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAwC,EAAE,EAAE;IAC7E,MAAM,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAAC;IAEtC,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,gEAAgE;QAChE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YACpB,OAAO;SACV;QAED,gEAAgE;QAChE,MAAM,UAAU,GAAG,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;QAC3C,MAAM,eAAe,GAAG,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;QAErD,UAAU;aACL,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,CAAC;aACxC,IAAI,CAAC,CAAC,MAAW,EAAE,EAAE;YAClB,MAAM,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACnC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;YACpC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC1C,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAM,EAAE,EAAE;YACd,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,OAAO,CACH;QACI,6BACI,OAAO,EAAE,UAAU,EACnB,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAE;gBACH,GAAG,aAAa,CAAC,kBAAkB;gBACnC,GAAG,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC;gBACzC,UAAU,EAAE,SAAS;aACxB;YAED,oBAAC,eAAe,IAAC,SAAS,EAAC,uCAAuC,GAAG,CACnE,CACJ,CACT,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/src/components/color_picker/components/color_picker_overrides/color_picker_gradient_bar.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef } from 'react';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import { high, low } from 'react-best-gradient-color-picker/dist/esm/utils/formatters';
+import { getHandleValue } from 'react-best-gradient-color-picker/dist/esm/utils/utils';
+import 'react-best-gradient-color-picker';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Dodano e.preventDefault() do handleDown
+ * - Wysokosc i szerokosc Handle
+ */
+export const Handle = ({ left, i, setDragging }) => {
+    const { colors, selectedColor, squareWidth, defaultStyles, createGradientStr } = usePicker();
+    const isSelected = selectedColor === i;
+    const leftMultiplyer = (squareWidth - 18) / 100;
+    const setSelectedColor = (index) => {
+        const newGradStr = colors?.map((cc, i) => ({
+            ...cc,
+            value: i === index ? high(cc) : low(cc)
+        }));
+        createGradientStr(newGradStr);
+    };
+    const handleDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setSelectedColor(i);
+        setDragging(true);
+    };
+    return (React.createElement("div", { id: `gradient-handle-${i}`, onMouseDown: (e) => handleDown(e), style: {
+            ...defaultStyles.rbgcpGradientHandleWrap,
+            left: (left || 0) * leftMultiplyer,
+            top: -3
+        } },
+        React.createElement("div", { style: {
+                ...defaultStyles.rbgcpGradientHandle,
+                ...(isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {}),
+                width: 16,
+                height: 16
+            } }, isSelected && (React.createElement("div", { style: {
+                width: 4,
+                height: 4,
+                borderRadius: '100%',
+                background: 'white'
+            } })))));
+};
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy GradientBar
+ */
+export const GradientBar = () => {
+    const { currentColor, createGradientStr, colors, value, handleGradient, squareWidth } = usePicker();
+    const barRef = useRef(null);
+    const draggingRef = useRef(false);
+    function force90degLinear(color) {
+        return color.replace(/(radial|linear)-gradient\([^,]+,/, 'linear-gradient(90deg,');
+    }
+    const setDragging = (val) => {
+        draggingRef.current = val;
+    };
+    const addPoint = (e) => {
+        const left = getHandleValue(e);
+        const newColors = [...colors.map((c) => ({ ...c, value: low(c) })), { value: currentColor, left: left }]?.sort((a, b) => a.left - b.left);
+        createGradientStr(newColors);
+    };
+    const handleDown = (e) => {
+        if (draggingRef.current)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        addPoint(e);
+        setDragging(true);
+    };
+    useEffect(() => {
+        const handleUp = () => {
+            setDragging(false);
+        };
+        const handleMove = (e) => {
+            if (!draggingRef.current || !barRef.current)
+                return;
+            const newEvent = { target: barRef.current, clientX: e.clientX };
+            handleGradient(currentColor, getHandleValue(newEvent));
+        };
+        window.addEventListener('mouseup', handleUp);
+        window.addEventListener('mousemove', handleMove);
+        return () => {
+            window.removeEventListener('mouseup', handleUp);
+            window.removeEventListener('mousemove', handleMove);
+        };
+    }, [currentColor, handleGradient]);
+    return (React.createElement("div", { className: "aurora-my-[1px]", style: {
+            width: '100%',
+            position: 'relative'
+        }, id: "gradient-bar" },
+        React.createElement("div", { ref: barRef, style: {
+                height: 10,
+                borderRadius: 10,
+                width: squareWidth,
+                backgroundImage: force90degLinear(value)
+            }, onMouseDown: (e) => handleDown(e) }),
+        colors?.map((c, i) => (React.createElement(Handle, { i: i, left: c.left, key: `${i}-${c}`, setDragging: setDragging })))));
+};
+//# sourceMappingURL=color_picker_gradient_bar.js.map

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

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

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import { formatInputValues, low, high } from 'react-best-gradient-color-picker/dist/esm/utils/formatters';
+import { controlBtnStyles } from 'react-best-gradient-color-picker/dist/esm/styles/styles';
+import { LinearIcon, RadialIcon, DegreesIcon, StopIcon } from 'react-best-gradient-color-picker/dist/esm/components/icon';
+import { DeleteBinLineIcon } from '@auroraAssets/icons/delete_bin_icon';
+const GradientType = () => {
+    const { gradientType, onChange, value, defaultStyles } = usePicker();
+    const isLinear = gradientType === 'linear-gradient';
+    const isRadial = gradientType === 'radial-gradient';
+    const handleLinear = () => {
+        const remaining = value.split(/,(.+)/)[1];
+        onChange(`linear-gradient(90deg, ${remaining}`);
+    };
+    const handleRadial = () => {
+        const remaining = value.split(/,(.+)/)[1];
+        onChange(`radial-gradient(circle, ${remaining}`);
+    };
+    return (React.createElement("div", { style: defaultStyles.rbgcpControlBtnWrapper },
+        React.createElement("div", { onClick: handleLinear, id: "rbgcp-linear-btn", style: { ...defaultStyles.rbgcpControlBtn, ...(isLinear && defaultStyles.rbgcpControlBtnSelected) }, tabIndex: 0, role: "button", onKeyDown: () => {
+                return;
+            } },
+            React.createElement(LinearIcon, { color: isLinear ? '#568CF5' : '' })),
+        React.createElement("div", { onClick: handleRadial, id: "rbgcp-radial-btn", style: { ...defaultStyles.rbgcpControlBtn, ...(isRadial && defaultStyles.rbgcpControlBtnSelected) }, tabIndex: 0, role: "button", onKeyDown: () => {
+                return;
+            } },
+            React.createElement(RadialIcon, { color: isRadial ? '#568CF5' : '' }))));
+};
+const StopPicker = () => {
+    const { currentLeft, handleGradient, currentColor, defaultStyles } = usePicker();
+    const handleMove = (newVal) => {
+        handleGradient(currentColor, formatInputValues(parseInt(newVal), 0, 100));
+    };
+    return (React.createElement("div", { style: {
+            ...defaultStyles.rbgcpControlBtnWrapper,
+            ...defaultStyles.rbgcpControlInputWrap,
+            ...defaultStyles.rbgcpStopInputWrap,
+            paddingLeft: 8
+        } },
+        React.createElement(StopIcon, null),
+        React.createElement("input", { value: currentLeft, id: "rbgcp-stop-input", onChange: (e) => handleMove(e.target.value), style: { ...defaultStyles.rbgcpControlInput, ...defaultStyles.rbgcpStopInput } })));
+};
+const DegreePicker = () => {
+    const { degrees, onChange, value, defaultStyles } = 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", { style: {
+            ...defaultStyles.rbgcpControlBtnWrapper,
+            ...defaultStyles.rbgcpControlInputWrap,
+            ...defaultStyles.rbgcpDegreeInputWrap
+        } },
+        React.createElement(DegreesIcon, null),
+        React.createElement("input", { value: degrees, id: "rbgcp-degree-input", onChange: (e) => handleDegrees(e), style: {
+                ...defaultStyles.rbgcpControlInput,
+                ...defaultStyles.rbgcpDegreeInput
+            } }),
+        React.createElement("div", { style: {
+                ...defaultStyles.rbgcpDegreeIcon,
+                position: 'absolute',
+                right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+                top: 1,
+                fontWeight: 400,
+                fontSize: 13
+            } }, "\u00B0")));
+};
+const DeleteBtn = () => {
+    const { colors, selectedColor, createGradientStr, defaultStyles } = usePicker();
+    const deletePoint = () => {
+        if (colors?.length > 2) {
+            const formatted = colors?.map((fc, i) => ({
+                ...fc,
+                value: i === selectedColor - 1 ? high(fc) : low(fc)
+            }));
+            const remaining = formatted?.filter((_, i) => i !== selectedColor);
+            createGradientStr(remaining);
+        }
+    };
+    return (React.createElement("div", { onClick: deletePoint, style: { ...controlBtnStyles(false, defaultStyles), width: 28, background: '#F5F6FA' }, id: "rbgcp-point-delete-btn", tabIndex: 0, role: "button", onKeyDown: () => {
+            return;
+        } },
+        React.createElement(DeleteBinLineIcon, { className: "aurora-w-4 aurora-h-4 aurora-stroke-0" })));
+};
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke smietnika
+ */
+export const GradientControls = ({ hideGradientType, hideGradientAngle, hideGradientStop }) => {
+    const { gradientType, defaultStyles } = usePicker();
+    return (React.createElement("div", { style: {
+            ...defaultStyles.rbgcpControlBtnWrapper,
+            marginTop: 12,
+            marginBottom: -4,
+            justifyContent: 'space-between',
+            paddingLeft: hideGradientType ? 4 : 0
+        }, id: "rbgcp-gradient-controls-wrap" },
+        !hideGradientType && React.createElement(GradientType, null),
+        React.createElement("div", { style: { width: 53 } }, !hideGradientAngle && gradientType === 'linear-gradient' && React.createElement(DegreePicker, null)),
+        !hideGradientStop && React.createElement(StopPicker, null),
+        React.createElement(DeleteBtn, null)));
+};
+//# sourceMappingURL=color_picker_gradient_controls.js.map

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

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

package/build/esm/packages/aurora/src/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js

@@ -0,0 +1,75 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import { getHandleValue } from 'react-best-gradient-color-picker/dist/esm/utils/utils';
+import tinycolor from 'tinycolor2';
+import usePaintHue from 'react-best-gradient-color-picker/dist/esm/hooks/usePaintHue';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy
+ * - Zmiana onClick na onMouseDown
+ */
+export const Hue = () => {
+    const barRef = useRef(null);
+    const { handleChange, squareWidth, hc, setHc } = usePicker();
+    usePaintHue(barRef, squareWidth);
+    const containerRef = useRef(null);
+    const draggingRef = useRef(false);
+    const stopDragging = () => {
+        draggingRef.current = false;
+    };
+    const handleDown = () => {
+        draggingRef.current = true;
+    };
+    const handleHue = useCallback((e) => {
+        const newHue = getHandleValue(e) * 3.6;
+        const tinyHsv = tinycolor({ h: newHue, s: hc?.s, v: hc?.v });
+        const { r, g, b } = tinyHsv.toRgb();
+        handleChange(`rgba(${r}, ${g}, ${b}, ${hc.a})`);
+        setHc({ ...hc, h: newHue });
+    }, [handleChange, hc, setHc]);
+    const handleBarMouseDown = (e) => {
+        if (draggingRef.current)
+            return;
+        handleHue(e);
+        draggingRef.current = true;
+    };
+    useEffect(() => {
+        const handleUp = () => {
+            stopDragging();
+        };
+        const handleMove = (e) => {
+            if (!draggingRef.current)
+                return;
+            const newEvent = { target: containerRef.current, clientX: e.clientX };
+            handleHue(newEvent);
+        };
+        window.addEventListener('mouseup', handleUp);
+        window.addEventListener('mousemove', handleMove);
+        return () => {
+            window.removeEventListener('mouseup', handleUp);
+            window.removeEventListener('mousemove', handleMove);
+        };
+    }, [handleHue]);
+    return (React.createElement("div", { ref: containerRef, style: {
+            height: 12,
+            cursor: 'ew-resize',
+            position: 'relative'
+        } },
+        React.createElement("div", { tabIndex: 0, role: "button", style: {
+                border: '2px solid white',
+                borderRadius: '50%',
+                boxShadow: '0px 0px 3px rgba(0, 0, 0, 0.5)',
+                width: '16px',
+                height: '16px',
+                zIndex: 1000,
+                transition: 'all 10ms linear',
+                position: 'absolute',
+                left: hc?.h * ((squareWidth - 18) / 360),
+                top: -2,
+                cursor: 'ew-resize',
+                boxSizing: 'border-box'
+            }, onMouseDown: handleDown }),
+        React.createElement("canvas", { ref: barRef, height: "12px", width: `${squareWidth}px`, onMouseDown: (e) => handleBarMouseDown(e), style: { position: 'relative', borderRadius: 14, verticalAlign: 'top' } })));
+};
+//# sourceMappingURL=color_picker_hue.js.map

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

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

package/build/esm/packages/aurora/src/src/components/color_picker/components/color_picker_overrides/color_picker_opacity.js

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { usePicker } from 'react-best-gradient-color-picker/dist/esm/context';
+import { getHandleValue } from 'react-best-gradient-color-picker/dist/esm/utils/utils';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy
+ * - Zmiana onClick na onMouseDown
+ */
+export const Opacity = () => {
+    const { handleChange, hc = {}, squareWidth, defaultStyles } = usePicker();
+    const { r, g, b } = hc;
+    const bg = `linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(${r},${g},${b},.5) 100%)`;
+    const containerRef = useRef(null);
+    const draggingRef = useRef(false);
+    const stopDragging = () => {
+        draggingRef.current = false;
+    };
+    const handleDown = () => {
+        draggingRef.current = true;
+    };
+    const handleOpacity = useCallback((e) => {
+        const newO = getHandleValue(e) / 100;
+        const newColor = `rgba(${r}, ${g}, ${b}, ${newO})`;
+        handleChange(newColor);
+    }, [b, g, handleChange, r]);
+    const handleMouseDown = (e) => {
+        if (draggingRef.current)
+            return;
+        handleOpacity(e);
+        draggingRef.current = true;
+    };
+    const left = squareWidth - 18;
+    useEffect(() => {
+        const handleUp = () => {
+            stopDragging();
+        };
+        const handleMove = (e) => {
+            if (!draggingRef.current)
+                return;
+            const newEvent = { target: containerRef.current, clientX: e.clientX };
+            handleOpacity(newEvent);
+        };
+        window.addEventListener('mouseup', handleUp);
+        window.addEventListener('mousemove', handleMove);
+        return () => {
+            window.removeEventListener('mouseup', handleUp);
+            window.removeEventListener('mousemove', handleMove);
+        };
+    }, [handleOpacity]);
+    return (React.createElement("div", { ref: containerRef, onMouseDown: handleDown, style: {
+            height: 12,
+            cursor: 'ew-resize',
+            position: 'relative'
+        } },
+        React.createElement("div", { style: {
+                ...defaultStyles.rbgcpCheckered,
+                width: '100%',
+                height: 12
+            } }),
+        React.createElement("div", { style: { ...defaultStyles.rbgcpHandle, left: left * hc?.a, top: -2, width: 16, height: 16 } }),
+        React.createElement("div", { style: { ...defaultStyles.rbgcpOpacityOverlay, background: bg }, onMouseDown: (e) => handleMouseDown(e) })));
+};
+//# sourceMappingURL=color_picker_opacity.js.map

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

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