react-science 0.19.1

package/lib/components/color-picker/react-color/ColorPicker.js

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const react_1 = require("react");
+const palette_1 = require("../palette");
+const common_1 = require("./common");
+const colorHelper = __importStar(require("./helpers/color"));
+const SketchFields_1 = __importDefault(require("./sketch/SketchFields"));
+const SketchPresetColors_1 = __importDefault(require("./sketch/SketchPresetColors"));
+const defaultColor = {
+    h: 250,
+    s: 0.5,
+    l: 0.2,
+    a: 1,
+};
+const styles = {
+    picker: (width) => ({
+        width: typeof width === 'string' ? width : `${width}px`,
+        padding: '10px 10px 0',
+        boxSizing: 'initial',
+        background: '#fff',
+        borderRadius: '4px',
+        boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
+    }),
+    controls: {
+        display: 'flex',
+    },
+    sliders: {
+        padding: '4px 0',
+        flex: '1',
+    },
+    color: (disableAlpha) => ({
+        width: '24px',
+        height: disableAlpha ? '10px' : '24px',
+        position: 'relative',
+        marginTop: '4px',
+        marginLeft: '4px',
+        borderRadius: '3px',
+    }),
+    activeColor: (rgb) => ({
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: '2px',
+        background: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`,
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+    }),
+    saturationContainer: {
+        width: '100%',
+        paddingBottom: '75%',
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    hueContainer: {
+        position: 'relative',
+        height: '10px',
+        overflow: 'hidden',
+    },
+    hueElement: {
+        borderRadius: '2px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+    },
+    alphaContainer: (disableAlpha) => ({
+        position: 'relative',
+        height: '10px',
+        marginTop: '4px',
+        overflow: 'hidden',
+        ...(disableAlpha && { display: 'none' }),
+    }),
+    alphaElement: {
+        borderRadius: '2px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+    },
+};
+function ColorPicker(props) {
+    const { width = 200, onChange, onSwatchHover, disableAlpha = false, presetColors = palette_1.defaultColorPalette, className = '', color = defaultColor, onChangeComplete, style = {}, } = props;
+    const [state, setState] = (0, react_1.useState)(colorHelper.toState(color, 0));
+    const debounce = (0, react_1.useRef)((0, debounce_1.default)((fn, data, event) => {
+        fn(data, event);
+    }, 100)).current;
+    (0, react_1.useEffect)(() => {
+        setState((prevState) => colorHelper.toState(color, prevState.oldHue));
+    }, [color]);
+    const handleChange = (0, react_1.useCallback)((data, event) => {
+        const isValidColor = colorHelper.simpleCheckForValidColor(data);
+        if (isValidColor) {
+            const colors = colorHelper.toState(data, data.h || state.oldHue);
+            setState(colors);
+            if (onChangeComplete) {
+                debounce(onChangeComplete, colors, event);
+            }
+            if (onChange) {
+                onChange(colors, event);
+            }
+        }
+    }, [debounce, onChange, onChangeComplete, state.oldHue]);
+    const handleSwatchHover = (0, react_1.useCallback)((data, event) => {
+        const isValidColor = colorHelper.simpleCheckForValidColor(data);
+        if (isValidColor) {
+            const colors = colorHelper.toState(data, data.h || state.oldHue);
+            if (onSwatchHover) {
+                onSwatchHover(colors, event);
+            }
+        }
+    }, [onSwatchHover, state.oldHue]);
+    const { rgb, hex, hsv, hsl } = state;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { ...styles.picker(width), ...style }, className: className, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.saturationContainer, children: (0, jsx_runtime_1.jsx)(common_1.Saturation, { hsl: hsl, hsv: hsv, onChange: handleChange }) }), (0, jsx_runtime_1.jsxs)("div", { style: styles.controls, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sliders, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.hueContainer, children: (0, jsx_runtime_1.jsx)(common_1.Hue, { style: styles.hueElement, hsl: hsl, onChange: handleChange }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.alphaContainer(disableAlpha), children: (0, jsx_runtime_1.jsx)(common_1.Alpha, { style: styles.alphaElement, rgb: rgb, hsl: hsl, onChange: handleChange }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.color(disableAlpha), children: [(0, jsx_runtime_1.jsx)(common_1.CheckBoard, {}), (0, jsx_runtime_1.jsx)("div", { style: styles.activeColor(rgb) })] })] }), (0, jsx_runtime_1.jsx)(SketchFields_1.default, { hsl: hsl, hex: hex, rgb: rgb, onChange: handleChange, disableAlpha: disableAlpha }), (0, jsx_runtime_1.jsx)(SketchPresetColors_1.default, { colors: presetColors, onClick: (data, e) => handleChange?.(data, e), onSwatchHover: handleSwatchHover })] }));
+}
+exports.ColorPicker = ColorPicker;

package/lib/components/color-picker/react-color/common/Alpha.js

@@ -0,0 +1,110 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const alpha = __importStar(require("../helpers/alpha"));
+const CheckBoard_1 = __importDefault(require("./CheckBoard"));
+const useOnChange_1 = require("./useOnChange");
+const styles = {
+    alpha: (borderRadius) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius,
+    }),
+    checkerboard: (borderRadius) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'hidden',
+        borderRadius,
+    }),
+    gradient: (direction, boxShadow, borderRadius, rgb) => {
+        let gradientDirection = 'right';
+        if (direction === 'vertical') {
+            gradientDirection = 'bottom';
+        }
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            boxShadow,
+            borderRadius,
+            background: `linear-gradient(to ${gradientDirection}, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
+      rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
+        };
+    },
+    container: {
+        position: 'relative',
+        height: '100%',
+        margin: '0 3px',
+    },
+    pointer: (direction, rgb) => {
+        if (direction === 'vertical') {
+            return {
+                position: 'absolute',
+                left: 0,
+                top: `${rgb.a * 100}%`,
+            };
+        }
+        return {
+            position: 'absolute',
+            left: `${rgb.a * 100}%`,
+        };
+    },
+    slider: {
+        width: '4px',
+        borderRadius: '1px',
+        height: '8px',
+        boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+        background: '#fff',
+        marginTop: '1px',
+        transform: 'translateX(-2px)',
+    },
+};
+const Alpha = (props) => {
+    const containerRef = (0, react_1.useRef)();
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const change = alpha.calculateChange(e, props.hsl, props.direction, props.a, containerRef.current);
+        if (change && typeof props.onChange === 'function') {
+            props.onChange(change, e);
+        }
+    }, [props]);
+    const mouseDownHandler = (0, useOnChange_1.useOnChange)(handleChange);
+    const rgb = props.rgb;
+    const { borderRadius, boxShadow, direction } = props.style;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.alpha(borderRadius), children: [(0, jsx_runtime_1.jsx)("div", { style: styles.checkerboard(borderRadius), children: (0, jsx_runtime_1.jsx)(CheckBoard_1.default, { renderers: props.renderers }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.gradient(direction, boxShadow, borderRadius, rgb) }), (0, jsx_runtime_1.jsx)("div", { style: styles.container, ref: containerRef, onMouseDown: mouseDownHandler, onTouchMove: handleChange, onTouchStart: handleChange, children: (0, jsx_runtime_1.jsx)("div", { style: styles.pointer(direction, rgb), children: props.pointer ? ((0, jsx_runtime_1.jsx)(props.pointer, { ...props })) : ((0, jsx_runtime_1.jsx)("div", { style: styles.slider })) }) })] }));
+};
+exports.default = Alpha;

package/lib/components/color-picker/react-color/common/CheckBoard.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const checkBoard = __importStar(require("../helpers/checkBoard"));
+const styles = {
+    grid: (props) => {
+        const { size = 8, white = 'transparent', grey = 'rgba(0,0,0,.08)', renderers = {}, borderRadius, boxShadow, } = props;
+        return {
+            borderRadius,
+            boxShadow,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: `url(${checkBoard.get(white, grey, size, renderers.canvas)}) center left`,
+        };
+    },
+};
+const CheckBoard = (props) => {
+    const { children } = props;
+    if (!(0, react_1.isValidElement)(children)) {
+        return (0, jsx_runtime_1.jsx)("div", { style: styles.grid(props) });
+    }
+    return (0, react_1.cloneElement)(children, {
+        ...children.props,
+        style: { ...children.props.style, ...styles.grid(props) },
+    });
+};
+exports.default = CheckBoard;

package/lib/components/color-picker/react-color/common/EditableInput.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DEFAULT_ARROW_OFFSET = 1;
+const UP_KEY_CODE = 38;
+const DOWN_KEY_CODE = 40;
+const VALID_KEY_CODES = new Set([UP_KEY_CODE, DOWN_KEY_CODE]);
+const isValidKeyCode = (keyCode) => VALID_KEY_CODES.has(keyCode);
+const getNumberValue = (value) => Number(String(value).replace(/%/g, ''));
+let idCounter = 1;
+const styles = {
+    wrap: {
+        position: 'relative',
+    },
+};
+const EditableInput = (props) => {
+    const [state, setState] = (0, react_1.useState)({
+        value: String(props.value).toUpperCase(),
+        blurValue: String(props.value).toUpperCase(),
+    });
+    const inputRef = (0, react_1.useRef)();
+    const valueRef = (0, react_1.useRef)(props.value);
+    const inputId = (0, react_1.useRef)(`rc-editable-input-${idCounter++}`).current;
+    (0, react_1.useEffect)(() => {
+        valueRef.current = props.value;
+        if (inputRef.current === document.activeElement) {
+            setState({ blurValue: String(props.value).toUpperCase() });
+        }
+        else {
+            setState((prevState) => ({
+                value: String(props.value).toUpperCase(),
+                blurValue: !prevState.blurValue && String(props.value).toUpperCase(),
+            }));
+        }
+    }, [props.value]);
+    const getValueObjectWithLabel = (0, react_1.useCallback)((value) => {
+        return {
+            [props.label]: value,
+        };
+    }, [props.label]);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        if (state.blurValue) {
+            setState({ value: state.blurValue, blurValue: null });
+        }
+    }, [state.blurValue]);
+    const setUpdatedValue = (0, react_1.useCallback)((value, e) => {
+        const onChangeValue = props.label
+            ? getValueObjectWithLabel(value)
+            : value;
+        if (props.onChange) {
+            props.onChange(onChangeValue, e);
+        }
+        setState({ value });
+    }, [getValueObjectWithLabel, props]);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        setUpdatedValue(e.target.value, e);
+    }, [setUpdatedValue]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        // In case `e.target.value` is a percentage remove the `%` character
+        // and update accordingly with a percentage
+        // https://github.com/casesandberg/react-color/issues/383
+        const value = getNumberValue(e.target.value);
+        const offset = props.arrowOffset || DEFAULT_ARROW_OFFSET;
+        if (!Number.isNaN(value) && isValidKeyCode(e.keyCode)) {
+            const updatedValue = e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
+            setUpdatedValue(updatedValue, e);
+        }
+    }, [props.arrowOffset, setUpdatedValue]);
+    const handleDrag = (0, react_1.useCallback)((e) => {
+        if (props.dragLabel) {
+            const newValue = Math.round(valueRef.current + e.movementX);
+            if (newValue >= 0 && newValue <= props.dragMax) {
+                valueRef.current = newValue;
+                if (props.onChange) {
+                    props.onChange(getValueObjectWithLabel(newValue), e);
+                }
+            }
+        }
+    }, [props, getValueObjectWithLabel]);
+    const handleMouseDown = (0, react_1.useCallback)((e) => {
+        function mouseUp() {
+            window.removeEventListener('mousemove', handleDrag);
+            window.removeEventListener('mouseup', mouseUp);
+        }
+        if (props.dragLabel) {
+            e.preventDefault();
+            handleDrag(e);
+            window.addEventListener('mousemove', handleDrag);
+            window.addEventListener('mouseup', mouseUp);
+        }
+    }, [handleDrag, props.dragLabel]);
+    const { wrap = {}, input = {}, label = {} } = props.style || {};
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { ...styles.wrap, ...wrap }, children: [(0, jsx_runtime_1.jsx)("input", { id: inputId, style: input, ref: inputRef, value: state.value, onKeyDown: handleKeyDown, onChange: handleChange, onBlur: handleBlur, placeholder: props.placeholder, spellCheck: "false" }), props.label && !props.hideLabel ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, style: {
+                    ...label,
+                    ...(props.dragLabel === 'true' && {
+                        cursor: 'ew-resize',
+                        userSelect: 'none',
+                    }),
+                }, onMouseDown: handleMouseDown, children: props.label })) : null] }));
+};
+exports.default = EditableInput;

package/lib/components/color-picker/react-color/common/Hue.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hue = __importStar(require("../helpers/hue"));
+const useOnChange_1 = require("./useOnChange");
+const styles = {
+    hue: (borderRadius, boxShadow) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius,
+        boxShadow,
+    }),
+    container: (direction, borderRadius) => {
+        let gradientDirection = 'right';
+        if (direction === 'vertical') {
+            gradientDirection = 'bottom';
+        }
+        return {
+            padding: '0 2px',
+            position: 'relative',
+            height: '100%',
+            borderRadius,
+            background: `linear-gradient(to ${gradientDirection}, #f00 0%, #ff0 17%, #0f0
+      33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)`,
+        };
+    },
+    pointer: (direction, hsl) => {
+        if (direction === 'vertical') {
+            return {
+                position: 'absolute',
+                left: 0,
+                top: `${-((hsl.h * 100) / 360) + 100}%`,
+            };
+        }
+        return {
+            position: 'absolute',
+            left: `${(hsl.h * 100) / 360}%`,
+        };
+    },
+    slider: {
+        marginTop: '1px',
+        width: '4px',
+        borderRadius: '1px',
+        height: '8px',
+        boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+        background: '#fff',
+        transform: 'translateX(-2px)',
+    },
+};
+const Hue = (props) => {
+    const containerRef = (0, react_1.useRef)();
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const change = hue.calculateChange(e, props.direction, props.hsl, containerRef.current);
+        if (change && typeof props.onChange === 'function') {
+            props.onChange(change, e);
+        }
+    }, [props]);
+    const handleMouseDown = (0, useOnChange_1.useOnChange)(handleChange);
+    const { direction = 'horizontal', hsl, style, pointer } = props;
+    const { borderRadius, boxShadow } = style;
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles.hue(borderRadius, boxShadow), children: (0, jsx_runtime_1.jsx)("div", { style: styles.container(direction, borderRadius), ref: containerRef, onMouseDown: handleMouseDown, onTouchMove: handleChange, onTouchStart: handleChange, children: (0, jsx_runtime_1.jsx)("div", { style: styles.pointer(direction, hsl), children: pointer ? ((0, jsx_runtime_1.jsx)(props.pointer, { ...props })) : ((0, jsx_runtime_1.jsx)("div", { style: styles.slider })) }) }) }));
+};
+exports.default = Hue;

package/lib/components/color-picker/react-color/common/Saturation.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = require("react");
+const saturation = __importStar(require("../helpers/saturation"));
+const useOnChange_1 = require("./useOnChange");
+const styles = {
+    color: (hsl) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `hsl(${hsl.h},100%, 50%)`,
+        userDraggle: 'none',
+        userSelect: 'none',
+    }),
+    white: () => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(to right, #fff, rgba(255,255,255,0))`,
+    }),
+    black: () => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(to top, #000, rgba(0,0,0,0))`,
+    }),
+    pointer: (hsv) => ({
+        position: 'absolute',
+        top: `${-(hsv.v * 100) + 100}%`,
+        left: `${hsv.s * 100}%`,
+        cursor: 'default',
+    }),
+    circle: {
+        width: '4px',
+        height: '4px',
+        boxShadow: `0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+          0 0 1px 2px rgba(0,0,0,.4)`,
+        borderRadius: '50%',
+        cursor: 'hand',
+        transform: 'translate(-2px, -2px)',
+    },
+};
+const Saturation = (props) => {
+    const { onChange, hsl, hsv, pointer } = props;
+    const throttle = (0, react_1.useRef)((0, throttle_1.default)((fn, data, e) => {
+        fn(data, e);
+    }, 50)).current;
+    const containerRef = (0, react_1.useRef)();
+    const handleChange = (0, react_1.useCallback)((e) => {
+        if (onChange && typeof onChange === 'function') {
+            throttle(onChange, saturation.calculateChange(e, hsl, containerRef.current), e);
+        }
+    }, [hsl, onChange, throttle]);
+    const handleMouseDown = (0, useOnChange_1.useOnChange)(handleChange);
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles.color(hsl), ref: containerRef, onMouseDown: handleMouseDown, onTouchMove: handleChange, onTouchStart: handleChange, children: (0, jsx_runtime_1.jsxs)("div", { style: styles.white(), children: [(0, jsx_runtime_1.jsx)("div", { style: styles.black() }), (0, jsx_runtime_1.jsx)("div", { style: styles.pointer(hsv), children: pointer ? ((0, jsx_runtime_1.jsx)(props.pointer, { ...props })) : ((0, jsx_runtime_1.jsx)("div", { style: styles.circle })) })] }) }));
+};
+exports.default = Saturation;

package/lib/components/color-picker/react-color/common/Swatch.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swatch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CheckBoard_1 = __importDefault(require("./CheckBoard"));
+const interaction_1 = require("./interaction");
+// interface SwatchProps {
+//   color: string;
+//   style: any;
+//   onClick: (color: string, event: MouseEvent<HTMLDivElement>) => void;
+//   onHover?: (color: string, event: Event) => void;
+//   title: string;
+//   focus: boolean;
+//   focusStyle: any;
+//   children: ReactNode;
+// }
+const styles = {
+    height: '100%',
+    width: '100%',
+    cursor: 'pointer',
+    position: 'relative',
+    outline: 'none',
+};
+const Swatch = ({ color, style, onClick, onHover, title = color, children, focus, focusStyle = {}, }) => {
+    const transparent = color === 'transparent';
+    const handleClick = (0, react_1.useCallback)((e) => onClick?.(color, e), [color, onClick]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key.toLowerCase() === 'enter') {
+            onClick?.(color, e);
+        }
+    }, [color, onClick]);
+    const handleHover = (0, react_1.useCallback)((e) => onHover?.(color, e), [color, onHover]);
+    const optionalEvents = {};
+    if (onHover) {
+        optionalEvents.onMouseOver = handleHover;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            ...styles,
+            background: color,
+            ...style,
+            ...(focus ? focusStyle : {}),
+        }, onClick: handleClick, title: title, tabIndex: 0, onKeyDown: handleKeyDown, ...optionalEvents, children: [children, transparent && ((0, jsx_runtime_1.jsx)(CheckBoard_1.default, { borderRadius: style.borderRadius, boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)" }))] }));
+};
+exports.Swatch = Swatch;
+exports.default = (0, interaction_1.handleFocus)(exports.Swatch);

package/lib/components/color-picker/react-color/common/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swatch = exports.Hue = exports.Saturation = exports.EditableInput = exports.CheckBoard = exports.Alpha = void 0;
+var Alpha_1 = require("./Alpha");
+Object.defineProperty(exports, "Alpha", { enumerable: true, get: function () { return __importDefault(Alpha_1).default; } });
+var CheckBoard_1 = require("./CheckBoard");
+Object.defineProperty(exports, "CheckBoard", { enumerable: true, get: function () { return __importDefault(CheckBoard_1).default; } });
+var EditableInput_1 = require("./EditableInput");
+Object.defineProperty(exports, "EditableInput", { enumerable: true, get: function () { return __importDefault(EditableInput_1).default; } });
+var Saturation_1 = require("./Saturation");
+Object.defineProperty(exports, "Saturation", { enumerable: true, get: function () { return __importDefault(Saturation_1).default; } });
+var Hue_1 = require("./Hue");
+Object.defineProperty(exports, "Hue", { enumerable: true, get: function () { return __importDefault(Hue_1).default; } });
+var Swatch_1 = require("./Swatch");
+Object.defineProperty(exports, "Swatch", { enumerable: true, get: function () { return __importDefault(Swatch_1).default; } });

package/lib/components/color-picker/react-color/common/interaction.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleFocus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const handleFocus = (WrappedComponent, Span = 'span') => class Focus extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { focus: false };
+        this.handleFocus = () => this.setState({ focus: true });
+        this.handleBlur = () => this.setState({ focus: false });
+    }
+    render() {
+        return ((0, jsx_runtime_1.jsx)(Span, { onFocus: this.handleFocus, onBlur: this.handleBlur, children: (0, jsx_runtime_1.jsx)(WrappedComponent, { ...this.props, ...this.state }) }));
+    }
+};
+exports.handleFocus = handleFocus;