@dreamcommerce/aurora 2.12.1-21 → 2.12.1-22

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/ComparibleColors.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ComparibleColors = ({ openComparibles, }) => {
+    const { tinyColor, handleChange, classes } = context.usePicker();
+    const analogous = tinyColor.analogous();
+    const monochromatic = tinyColor.monochromatic();
+    const triad = tinyColor.triad();
+    const tetrad = tinyColor.tetrad();
+    const handleClick = (tiny) => {
+        const { r, g, b, a } = tiny.toRgb();
+        handleChange(`rgba(${r},${g},${b},${a})`);
+    };
+    return (React__default['default'].createElement("div", { style: {
+            height: openComparibles ? 216 : 0,
+            width: '100%',
+            transition: 'all 120ms linear',
+        } },
+        React__default['default'].createElement("div", { style: {
+                paddingTop: 11,
+                display: openComparibles ? '' : 'none',
+                position: 'relative',
+            } },
+            React__default['default'].createElement("div", { style: {
+                    textAlign: 'center',
+                    fontSize: 13,
+                    fontWeight: 600,
+                    position: 'absolute',
+                    top: 6.5,
+                    left: 2,
+                }, className: classes.rbgcpComparibleLabel }, "Color Guide"),
+            React__default['default'].createElement("div", { style: {
+                    textAlign: 'center',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    marginTop: 3,
+                }, className: classes.rbgcpComparibleLabel }, "Analogous"),
+            React__default['default'].createElement("div", { style: { borderRadius: 5, overflow: 'hidden', display: 'flex' } }, analogous?.map((c, key) => (React__default['default'].createElement("div", { key: key, style: { width: '20%', height: 30, background: c.toHexString() }, onClick: () => handleClick(c) })))),
+            React__default['default'].createElement("div", { style: {
+                    textAlign: 'center',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    marginTop: 3,
+                }, className: classes.rbgcpComparibleLabel }, "Monochromatic"),
+            React__default['default'].createElement("div", { style: {
+                    borderRadius: 5,
+                    overflow: 'hidden',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                } }, monochromatic?.map((c, key) => (React__default['default'].createElement("div", { key: key, style: { width: '20%', height: 30, background: c.toHexString() }, onClick: () => handleClick(c) })))),
+            React__default['default'].createElement("div", { style: {
+                    textAlign: 'center',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    marginTop: 3,
+                }, className: classes.rbgcpComparibleLabel }, "Triad"),
+            React__default['default'].createElement("div", { style: {
+                    borderRadius: 5,
+                    overflow: 'hidden',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                } }, triad?.map((c, key) => (React__default['default'].createElement("div", { key: key, style: {
+                    width: 'calc(100% / 3)',
+                    height: 28,
+                    background: c.toHexString(),
+                }, onClick: () => handleClick(c) })))),
+            React__default['default'].createElement("div", { style: {
+                    textAlign: 'center',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    marginTop: 3,
+                }, className: classes.rbgcpComparibleLabel }, "Tetrad"),
+            React__default['default'].createElement("div", { style: {
+                    borderRadius: 5,
+                    overflow: 'hidden',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                } }, tetrad?.map((c, key) => (React__default['default'].createElement("div", { key: key, style: { width: '25%', height: 28, background: c.toHexString() }, onClick: () => handleClick(c) })))))));
+};
+
+exports.default = ComparibleColors;
+//# sourceMappingURL=ComparibleColors.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/Controls.js

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var constants = require('../constants.js');
+var context = require('../context.js');
+var icon = require('./icon.js');
+var EyeDropper = require('./EyeDropper.js');
+var AdvancedControls = require('./AdvancedControls.js');
+var ComparibleColors = require('./ComparibleColors.js');
+var GradientControls = require('./GradientControls.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var { defaultColor, defaultGradient } = constants.config;
+const Controls = ({ locales, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientControls, hideGradientType, hideGradientAngle, hideGradientStop, }) => {
+    const { onChange, isGradient, handleChange, classes, previous } = context.usePicker();
+    const [openComparibles, setOpenComparibles] = React.useState(false);
+    const [openInputType, setOpenInputType] = React.useState(false);
+    const [openAdvanced, setOpenAdvanced] = React.useState(false);
+    const noTools = hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType;
+    const solidColor = previous?.color || defaultColor;
+    const gradientColor = previous?.gradient || defaultGradient;
+    const setSolid = () => {
+        onChange(solidColor);
+    };
+    const setGradient = () => {
+        onChange(gradientColor);
+    };
+    const allRightControlsHidden = hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType;
+    const allControlsHidden = allRightControlsHidden && hideColorTypeBtns;
+    if (allControlsHidden) {
+        if (isGradient && !hideGradientControls) {
+            return (React__default['default'].createElement(GradientControls['default'], { hideGradientType: hideGradientType, hideGradientAngle: hideGradientAngle, hideGradientStop: hideGradientStop }));
+        }
+        else {
+            return null;
+        }
+    }
+    else {
+        return (React__default['default'].createElement("div", { style: { paddingTop: 12, paddingBottom: 4 } },
+            React__default['default'].createElement("div", { style: { width: '100%' }, className: `${classes.ac} ${classes.jsb}` },
+                React__default['default'].createElement(ColorTypeBtns, { hideColorTypeBtns: hideColorTypeBtns, setGradient: setGradient, isGradient: isGradient, setSolid: setSolid, locales: locales }),
+                !allRightControlsHidden && (React__default['default'].createElement("div", { style: { display: noTools ? 'none' : '' }, className: classes.rbgcpControlBtnWrapper },
+                    !hideEyeDrop && React__default['default'].createElement(EyeDropper['default'], { onSelect: handleChange }),
+                    React__default['default'].createElement("div", { id: "rbgcp-advanced-btn", onClick: () => setOpenAdvanced(!openAdvanced), className: controlBtnStyles(openAdvanced, classes), style: { display: hideAdvancedSliders ? 'none' : 'flex' } },
+                        React__default['default'].createElement(icon.SlidersIcon, { color: openAdvanced ? '#568CF5' : '' })),
+                    React__default['default'].createElement("div", { id: "rbgcp-comparibles-btn", style: { display: hideColorGuide ? 'none' : 'flex' }, onClick: () => setOpenComparibles(!openComparibles), className: controlBtnStyles(openComparibles, classes) },
+                        React__default['default'].createElement(icon.PaletteIcon, { color: openComparibles ? '#568CF5' : '' })),
+                    React__default['default'].createElement("div", { id: "rbgcp-color-model-btn", onClick: () => setOpenInputType(!openInputType), className: controlBtnStyles(openInputType, classes), style: { display: hideInputType ? 'none' : 'flex' } },
+                        React__default['default'].createElement(icon.InputsIcon, { color: openInputType ? '#568CF5' : '' }),
+                        React__default['default'].createElement(InputTypeDropdown, { openInputType: openInputType, setOpenInputType: setOpenInputType }))))),
+            !hideAdvancedSliders && (React__default['default'].createElement(AdvancedControls['default'], { openAdvanced: openAdvanced })),
+            !hideColorGuide && (React__default['default'].createElement(ComparibleColors['default'], { openComparibles: openComparibles })),
+            isGradient && !hideGradientControls && (React__default['default'].createElement(GradientControls['default'], { hideGradientType: hideGradientType, hideGradientAngle: hideGradientAngle, hideGradientStop: hideGradientStop }))));
+    }
+};
+const InputTypeDropdown = ({ openInputType, setOpenInputType, }) => {
+    const { inputType, setInputType, classes } = context.usePicker();
+    const vTrans = openInputType
+        ? 'visibility 0ms linear'
+        : 'visibility 100ms linear 150ms';
+    const zTrans = openInputType
+        ? 'z-index 0ms linear'
+        : 'z-index 100ms linear 150ms';
+    const oTrans = openInputType
+        ? 'opacity 120ms linear'
+        : 'opacity 150ms linear 50ms';
+    const handleInputType = (e, val) => {
+        if (openInputType) {
+            e.stopPropagation();
+            setInputType(val);
+            setOpenInputType(false);
+        }
+    };
+    return (React__default['default'].createElement("div", { style: {
+            visibility: openInputType ? 'visible' : 'hidden',
+            zIndex: openInputType ? '' : -100,
+            opacity: openInputType ? 1 : 0,
+            transition: `${oTrans}, ${vTrans}, ${zTrans}`,
+        }, className: classes.rbgcpColorModelDropdown },
+        React__default['default'].createElement("div", { onClick: (e) => handleInputType(e, 'rgb'), className: modalBtnStyles(inputType === 'rgb', classes) }, "RGB"),
+        React__default['default'].createElement("div", { onClick: (e) => handleInputType(e, 'hsl'), className: modalBtnStyles(inputType === 'hsl', classes) }, "HSL"),
+        React__default['default'].createElement("div", { onClick: (e) => handleInputType(e, 'hsv'), className: modalBtnStyles(inputType === 'hsv', classes) }, "HSV"),
+        React__default['default'].createElement("div", { onClick: (e) => handleInputType(e, 'cmyk'), className: modalBtnStyles(inputType === 'cmyk', classes) }, "CMYK")));
+};
+const ColorTypeBtns = ({ hideColorTypeBtns, isGradient, setSolid, setGradient, locales, }) => {
+    const { classes } = context.usePicker();
+    if (hideColorTypeBtns) {
+        return React__default['default'].createElement("div", { style: { width: 1 } });
+    }
+    else {
+        return (React__default['default'].createElement("div", { className: classes.rbgcpControlBtnWrapper },
+            React__default['default'].createElement("div", { onClick: setSolid, id: "rbgcp-solid-btn", className: colorTypeBtnStyles(!isGradient, classes) }, locales?.CONTROLS?.SOLID),
+            React__default['default'].createElement("div", { onClick: setGradient, id: "rbgcp-gradient-btn", className: colorTypeBtnStyles(isGradient || false, classes) }, locales?.CONTROLS?.GRADIENT)));
+    }
+};
+const colorTypeBtnStyles = (selected, classes) => {
+    if (selected) {
+        return `${classes.rbgcpControlBtn} ${classes.rbgcpControlBtnSelected}`;
+    }
+    else {
+        return classes.rbgcpControlBtn;
+    }
+};
+const controlBtnStyles = (selected, classes) => {
+    if (selected) {
+        return `${classes.rbgcpControlIconBtn} ${classes.rbgcpControlBtnSelected}`;
+    }
+    else {
+        return classes.rbgcpControlIconBtn;
+    }
+};
+const modalBtnStyles = (selected, classes) => {
+    if (selected) {
+        return `${classes.rbgcpControlBtn} ${classes.rbgcpColorModelDropdownBtn} ${classes.rbgcpControlBtnSelected}`;
+    }
+    else {
+        return `${classes.rbgcpControlBtn} ${classes.rbgcpColorModelDropdownBtn}`;
+    }
+};
+
+exports.colorTypeBtnStyles = colorTypeBtnStyles;
+exports.controlBtnStyles = controlBtnStyles;
+exports.default = Controls;
+exports.modalBtnStyles = modalBtnStyles;
+//# sourceMappingURL=Controls.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/Controls.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;"}

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tinycolor = require('../../../external/tinycolor2/tinycolor.js');
+var context = require('../context.js');
+var Portal = require('./Portal.js');
+var html2canvas_esm = require('../../../../html2canvas/dist/html2canvas.esm.js');
+var Controls = require('./Controls.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const DropperIcon = ({ color }) => {
+    const { classes } = context.usePicker();
+    const col = color || '';
+    const style1 = {
+        fill: 'none',
+        stroke: col,
+        strokeWidth: '1.4px',
+    };
+    const style2 = {
+        fill: col,
+        stroke: col,
+        strokeWidth: '1.4px',
+    };
+    return (React__default['default'].createElement("svg", { id: "Layer_1", "data-name": "Layer 1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", style: { width: 16 } },
+        React__default['default'].createElement("path", { style: style1, strokeLinecap: "round", strokeLinejoin: "round", className: classes.rbgcpControlIcon, d: "M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z" }),
+        React__default['default'].createElement("polygon", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", className: classes.rbgcpControlIcon2, points: "15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87" }),
+        React__default['default'].createElement("path", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", className: classes.rbgcpControlIcon2, d: "M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z" })));
+};
+const Dropper = ({ onSelect }) => {
+    const { classes } = context.usePicker();
+    const [pickerCanvas, setPickerCanvas] = React.useState(null);
+    const [coverUp, setCoverUp] = React.useState(false);
+    const takePick = () => {
+        const root = document.getElementById('root');
+        setCoverUp(true);
+        // @ts-expect-error some error with this imported packages types
+        html2canvas_esm['default'](root).then((canvas) => {
+            const blankCanvas = document.createElement('canvas');
+            const ctx = blankCanvas.getContext('2d', { willReadFrequently: true });
+            if (root && ctx) {
+                blankCanvas.width = root.offsetWidth * 2;
+                blankCanvas.height = root.offsetHeight * 2;
+                ctx.drawImage(canvas, 0, 0);
+            }
+            setPickerCanvas(ctx);
+        });
+    };
+    const getColorLegacy = (e) => {
+        e.stopPropagation();
+        if (pickerCanvas) {
+            const { pageX, pageY } = e;
+            const x1 = pageX * 2;
+            const y1 = pageY * 2;
+            const [r, g, b] = pickerCanvas.getImageData(x1, y1, 1, 1).data;
+            onSelect(`rgba(${r}, ${g}, ${b}, 1)`);
+        }
+        setCoverUp(false);
+    };
+    const getEyeDrop = () => {
+        // @ts-expect-error - ts does not evaluate for window.EyeDropper
+        if (!window.EyeDropper) {
+            takePick();
+        }
+        else {
+            // @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 = tinycolor['default'](result.sRGBHex);
+                const { r, g, b } = tinyHex.toRgb();
+                onSelect(`rgba(${r}, ${g}, ${b}, 1)`);
+            })
+                .catch((e) => {
+                console.log(e);
+            });
+        }
+    };
+    return (React__default['default'].createElement("div", null,
+        React__default['default'].createElement("div", { onClick: getEyeDrop, id: "rbgcp-eyedropper-btn", className: `${Controls.controlBtnStyles(coverUp, classes)} ${classes.rbgcpEyedropperBtn}` },
+            React__default['default'].createElement(DropperIcon, { color: coverUp ? 'rgb(86, 140, 245)' : '' })),
+        coverUp && (React__default['default'].createElement(Portal['default'], null,
+            React__default['default'].createElement("div", { onClick: (e) => getColorLegacy(e), className: classes.rbgcpEyedropperCover })))));
+};
+
+exports.default = Dropper;
+//# sourceMappingURL=EyeDropper.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,2CAA+C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientBar.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var formatters = require('../utils/formatters.js');
+var utils = require('../utils/utils.js');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const handleStyle = (isSelected) => {
+    return {
+        boxShadow: isSelected ? '0px 0px 5px 1px rgba(86, 140, 245,.95)' : '',
+        border: isSelected ? '2px solid white' : '2px solid rgba(255,255,255,.75)',
+    };
+};
+const Handle = ({ left, i, setDragging, setInFocus, }) => {
+    const { colors, selectedColor, squareWidth, classes, createGradientStr } = context.usePicker();
+    const isSelected = selectedColor === i;
+    const leftMultiplyer = (squareWidth - 18) / 100;
+    const setSelectedColor = (index) => {
+        const newGradStr = colors?.map((cc, i) => ({
+            ...cc,
+            value: i === index ? formatters.high(cc) : formatters.low(cc),
+        }));
+        createGradientStr(newGradStr);
+    };
+    const handleDown = (e) => {
+        e.stopPropagation();
+        setSelectedColor(i);
+        setDragging(true);
+    };
+    const handleFocus = () => {
+        // setInFocus('gpoint')
+        setSelectedColor(i);
+    };
+    const handleBlur = () => {
+        // setInFocus(null)
+    };
+    return (React__default['default'].createElement("div", { tabIndex: 0, onBlur: handleBlur, onFocus: handleFocus, id: `gradient-handle-${i}`, onMouseDown: (e) => handleDown(e), className: classes.rbgcpGradientHandleWrap, style: { left: (left || 0) * leftMultiplyer } },
+        React__default['default'].createElement("div", { style: handleStyle(isSelected), className: classes.rbgcpGradientHandle }, isSelected && (React__default['default'].createElement("div", { style: {
+                width: 5,
+                height: 5,
+                borderRadius: '50%',
+                background: 'white',
+            } })))));
+};
+const GradientBar = () => {
+    const { currentColor, createGradientStr, colors, value, handleGradient, squareWidth, deletePoint, isGradient, selectedColor, } = context.usePicker();
+    const [dragging, setDragging] = React.useState(false);
+    const [inFocus, setInFocus] = React.useState(null);
+    function force90degLinear(color) {
+        return color.replace(/(radial|linear)-gradient\([^,]+,/, 'linear-gradient(90deg,');
+    }
+    const addPoint = (e) => {
+        const left = utils.getHandleValue(e);
+        const newColors = [
+            ...colors.map((c) => ({ ...c, value: formatters.low(c) })),
+            { value: currentColor, left: left },
+        ]?.sort((a, b) => a.left - b.left);
+        createGradientStr(newColors);
+    };
+    React.useEffect(() => {
+        const selectedEl = window?.document?.getElementById(`gradient-handle-${selectedColor}`);
+        if (selectedEl) {
+            selectedEl.focus();
+        }
+    }, [selectedColor]);
+    const stopDragging = () => {
+        setDragging(false);
+    };
+    const handleDown = (e) => {
+        if (!dragging) {
+            addPoint(e);
+            setDragging(true);
+        }
+    };
+    const handleMove = (e) => {
+        if (dragging) {
+            handleGradient(currentColor, utils.getHandleValue(e));
+        }
+    };
+    const handleKeyboard = (e) => {
+        if (isGradient) {
+            if (e.keyCode === 8) {
+                if (inFocus === 'gpoint') {
+                    deletePoint();
+                }
+            }
+        }
+    };
+    const handleUp = () => {
+        stopDragging();
+    };
+    React.useEffect(() => {
+        window.addEventListener('mouseup', handleUp);
+        window?.addEventListener('keydown', handleKeyboard);
+        return () => {
+            window.removeEventListener('mouseup', handleUp);
+            window?.removeEventListener('keydown', handleKeyboard);
+        };
+    });
+    return (React__default['default'].createElement("div", { style: {
+            width: '100%',
+            marginTop: 17,
+            marginBottom: 4,
+            position: 'relative',
+        }, id: "gradient-bar" },
+        React__default['default'].createElement("div", { style: {
+                width: squareWidth,
+                height: 14,
+                backgroundImage: force90degLinear(value),
+                borderRadius: 10,
+            }, onMouseDown: (e) => handleDown(e), onMouseMove: (e) => handleMove(e) }),
+        colors?.map((c, i) => (React__default['default'].createElement(Handle, { i: i, left: c.left, key: `${i}-${c}`, setInFocus: setInFocus, setDragging: setDragging })))));
+};
+
+exports.Handle = Handle;
+exports.default = GradientBar;
+//# sourceMappingURL=GradientBar.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientBar.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;"}

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var formatters = require('../utils/formatters.js');
+var context = require('../context.js');
+var icon = require('./icon.js');
+var Controls = require('./Controls.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const GradientType = () => {
+    const { gradientType, onChange, value, classes } = context.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__default['default'].createElement("div", { className: classes.rbgcpControlBtnWrapper },
+        React__default['default'].createElement("div", { onClick: handleLinear, id: "rbgcp-linear-btn", className: `${classes.rbgcpControlBtn} ${isLinear && classes.rbgcpControlBtnSelected}` },
+            React__default['default'].createElement(icon.LinearIcon, { color: isLinear ? '#568CF5' : '' })),
+        React__default['default'].createElement("div", { onClick: handleRadial, id: "rbgcp-radial-btn", className: `${classes.rbgcpControlBtn} ${isRadial && classes.rbgcpControlBtnSelected}` },
+            React__default['default'].createElement(icon.RadialIcon, { color: isRadial ? '#568CF5' : '' }))));
+};
+const StopPicker = () => {
+    const { classes, currentLeft, handleGradient, currentColor } = context.usePicker();
+    const handleMove = (newVal) => {
+        handleGradient(currentColor, formatters.formatInputValues(parseInt(newVal), 0, 100));
+    };
+    return (React__default['default'].createElement("div", { className: `${classes.rbgcpControlBtnWrapper} ${classes.rbgcpControlInputWrap} ${classes.rbgcpStopInputWrap}`, style: { paddingLeft: 8 } },
+        React__default['default'].createElement(icon.StopIcon, null),
+        React__default['default'].createElement("input", { value: currentLeft, id: "rbgcp-stop-input", onChange: (e) => handleMove(e.target.value), className: `${classes.rbgcpControlInput} ${classes.rbgcpStopInput}` })));
+};
+const DegreePicker = () => {
+    const { classes, degrees, onChange, value } = context.usePicker();
+    const handleDegrees = (e) => {
+        const newValue = formatters.formatInputValues(e.target.value, 0, 360);
+        const remaining = value.split(/,(.+)/)[1];
+        onChange(`linear-gradient(${newValue || 0}deg, ${remaining}`);
+    };
+    return (React__default['default'].createElement("div", { className: `${classes.rbgcpControlBtnWrapper} ${classes.rbgcpControlInputWrap} ${classes.rbgcpDegreeInputWrap}` },
+        React__default['default'].createElement(icon.DegreesIcon, null),
+        React__default['default'].createElement("input", { value: degrees, id: "rbgcp-degree-input", onChange: (e) => handleDegrees(e), className: `${classes.rbgcpControlInput} ${classes.rbgcpDegreeInput}` }),
+        React__default['default'].createElement("div", { style: {
+                position: 'absolute',
+                right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+                top: 1,
+                fontWeight: 400,
+                fontSize: 13,
+            }, className: classes.rbgcpDegreeIcon }, "\u00B0")));
+};
+const DeleteBtn = () => {
+    const { colors, classes, selectedColor, createGradientStr } = context.usePicker();
+    const deletePoint = () => {
+        if (colors?.length > 2) {
+            const formatted = colors?.map((fc, i) => ({
+                ...fc,
+                value: i === selectedColor - 1 ? formatters.high(fc) : formatters.low(fc),
+            }));
+            const remaining = formatted?.filter((_, i) => i !== selectedColor);
+            createGradientStr(remaining);
+        }
+    };
+    return (React__default['default'].createElement("div", { onClick: deletePoint, style: { width: 28 }, id: "rbgcp-point-delete-btn", className: Controls.controlBtnStyles(false, classes) },
+        React__default['default'].createElement(icon['default'], null)));
+};
+const GradientControls = ({ hideGradientType, hideGradientAngle, hideGradientStop, }) => {
+    const { gradientType, classes } = context.usePicker();
+    return (React__default['default'].createElement("div", { style: {
+            marginTop: 12,
+            marginBottom: -4,
+            justifyContent: 'space-between',
+            paddingLeft: hideGradientType ? 4 : 0,
+        }, id: "rbgcp-gradient-controls-wrap", className: classes.rbgcpControlBtnWrapper },
+        !hideGradientType && React__default['default'].createElement(GradientType, null),
+        React__default['default'].createElement("div", { style: { width: 53 } }, !hideGradientAngle && gradientType === 'linear-gradient' && (React__default['default'].createElement(DegreePicker, null))),
+        !hideGradientStop && React__default['default'].createElement(StopPicker, null),
+        React__default['default'].createElement(DeleteBtn, null)));
+};
+
+exports.default = GradientControls;
+//# sourceMappingURL=GradientControls.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientControls.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;"}

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/Hue.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tinycolor = require('../../../external/tinycolor2/tinycolor.js');
+var utils = require('../utils/utils.js');
+var context = require('../context.js');
+var usePaintHue = require('../hooks/usePaintHue.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Hue = () => {
+    const barRef = React.useRef(null);
+    const { handleChange, squareWidth, hc, setHc } = context.usePicker();
+    const [dragging, setDragging] = React.useState(false);
+    usePaintHue['default'](barRef, squareWidth);
+    const stopDragging = () => {
+        setDragging(false);
+    };
+    const handleDown = () => {
+        setDragging(true);
+    };
+    const handleHue = (e) => {
+        const newHue = utils.getHandleValue(e) * 3.6;
+        const tinyHsv = tinycolor['default']({ 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 });
+    };
+    const handleMove = (e) => {
+        if (dragging) {
+            handleHue(e);
+        }
+    };
+    const handleClick = (e) => {
+        if (!dragging) {
+            handleHue(e);
+        }
+    };
+    React.useEffect(() => {
+        const handleUp = () => {
+            stopDragging();
+        };
+        window.addEventListener('mouseup', handleUp);
+        return () => {
+            window.removeEventListener('mouseup', handleUp);
+        };
+    }, []);
+    return (React__default['default'].createElement("div", { style: {
+            height: 14,
+            marginTop: 17,
+            marginBottom: 4,
+            cursor: 'ew-resize',
+            position: 'relative',
+        }, onMouseMove: (e) => handleMove(e) },
+        React__default['default'].createElement("div", { role: "button", style: {
+                border: '2px solid white',
+                borderRadius: '50%',
+                boxShadow: '0px 0px 3px rgba(0, 0, 0, 0.5)',
+                width: '18px',
+                height: '18px',
+                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__default['default'].createElement("canvas", { ref: barRef, height: "14px", width: `${squareWidth}px`, onClick: (e) => handleClick(e), style: { position: 'relative', borderRadius: 14, verticalAlign: 'top' } })));
+};
+
+exports.default = Hue;
+//# sourceMappingURL=Hue.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/Hue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,2CAA+C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}