@geoinsight/react-components 1.1.1 → 1.1.3

package/dist/esm/index.js

@@ -1,660 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, useMemo, useRef, useEffect, Children, isValidElement, cloneElement, createContext, useState, useReducer } from 'react';
-import clsx from 'clsx';
-import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
-import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
-import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
-import { TbArrowsDiagonal2 } from 'react-icons/tb';
-import { IoClose, IoPause, IoPlay, IoStop } from 'react-icons/io5';
-import { RiMapPinTimeFill, RiMapPinTimeLine } from 'react-icons/ri';
-
-const generateId = () => {
-    return `id-${Math.random().toString(36).slice(2, 11)}`;
-};
-
-function MenuContent({ children, ...props }) {
-    const { items } = useContext(useMenu());
-    const menuId = useMemo(() => props["data-menu-id"], [props]);
-    const isExpanded = useMemo(() => {
-        return items[menuId]?.isExpanded;
-    }, [items, menuId]);
-    if (!isExpanded)
-        return;
-    return jsx("div", { ...props, children: children });
-}
-
-const ALLOWED_CHILD_COMPONENT$1 = [MenuButton.name, MenuContent.name];
-function MenuItem({ children, ...props }) {
-    const { addItem } = useContext(useMenu());
-    const menuId = useRef("");
-    useEffect(() => {
-        menuId.current = generateId();
-        addItem({
-            id: menuId.current,
-            isExpanded: true,
-        });
-    }, []);
-    return (jsx("div", { "data-menu-id": menuId.current, ...props, children: Children.map(children, (child) => {
-            if (!isValidElement(child))
-                return;
-            const childComponent = child.type;
-            if (!ALLOWED_CHILD_COMPONENT$1.includes(childComponent.name))
-                return;
-            return cloneElement(child, {
-                "data-menu-id": menuId.current,
-            });
-        }) }));
-}
-
-const ALLOWED_CHILD_COMPONENT = [MenuItem.name];
-function MenuWrapper({ children }) {
-    const menuItemComponents = useMemo(() => {
-        return Children.map(children, (child) => {
-            if (!isValidElement(child))
-                return;
-            const childComponent = child.type;
-            if (!ALLOWED_CHILD_COMPONENT.includes(childComponent.name))
-                return;
-            return cloneElement(child);
-        });
-    }, [children]);
-    return jsx("div", { className: "menu", children: menuItemComponents });
-}
-
-/** Context */
-const MenuContext = createContext({});
-function MenuRoot({ children, isOpenByDefault }) {
-    const [items, setItems] = useState({});
-    const addItem = (item) => {
-        setItems((state) => ({
-            ...state,
-            [item.id]: {
-                ...item,
-                isExpanded: isOpenByDefault || false,
-            },
-        }));
-    };
-    const toggle = (id) => {
-        setItems((state) => ({
-            ...state,
-            [id]: {
-                ...items[id],
-                isExpanded: !items[id].isExpanded || false,
-            },
-        }));
-    };
-    return (jsx(MenuContext.Provider, { value: { items, addItem, toggle }, children: jsx(MenuWrapper, { children: children }) }));
-}
-function useMenu() {
-    if (MenuContext === undefined) {
-        throw new Error("useMenu must be used within a MenuContext Provider");
-    }
-    return MenuContext;
-}
-
-const Anchor = ({ Custom, children, ...rest }) => {
-    return Custom ? (jsx(Custom, { ...rest, children: children })) : (jsx("a", { ...rest, children: children }));
-};
-function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
-    return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, `link__${mode}`, `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
-}
-
-function MenuButton({ anchor, children, buttonClassName, nested, subnested, dropdown, isLink, isSelected, handleCallbackClick, ...props }) {
-    const { toggle } = useContext(useMenu());
-    const [isToggled, setIsToggled] = useState(false);
-    const menuId = useMemo(() => props["data-menu-id"], [props]);
-    const handleClick = () => {
-        toggle(menuId);
-        setIsToggled(!isToggled);
-        handleCallbackClick && handleCallbackClick();
-    };
-    return anchor ? (jsxs(Anchor, { className: clsx("menu-button", {
-            "menu-button-dropdown": dropdown,
-            "menu-button-nested": nested,
-            "menu-button-subnested": subnested,
-            "menu-button-is-link": isLink,
-            "menu-button-is-selected": isSelected,
-        }, buttonClassName), ...anchor, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] })) : (jsxs("div", { role: "button", className: clsx("menu-button", {
-            "menu-button-dropdown": dropdown,
-            "menu-button-nested": nested,
-            "menu-button-subnested": subnested,
-            "menu-button-is-link": isLink,
-            "menu-button-is-selected": isSelected,
-        }, buttonClassName), onClick: handleClick, ...props, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] }));
-}
-
-const Menu = {
-    Root: MenuRoot,
-    Item: MenuItem,
-    Button: MenuButton,
-    Content: MenuContent,
-};
-
-// how do I solve reseting the form outside the form
-function Form({ children, onSubmit, submitButton = {
-    label: "Submit",
-}, initialState, backgroundColor, ...rest }) {
-    const methods = useForm(initialState);
-    const { formState: { isValid }, } = methods;
-    const [result, setResult] = useState({
-        message: "",
-        isSuccess: false,
-    });
-    return (jsx(FormProvider, { ...methods, children: jsxs("form", { className: "form", style: { backgroundColor: backgroundColor }, onSubmit: methods.handleSubmit((data) => {
-                return onSubmit(data, methods, setResult);
-            }), ...rest, children: [children, result.message && (jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsx(BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsx(BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
-}
-
-function Input({ inputClassName = "", classNameGroup = "", error = {
-    is: false,
-    message: "",
-}, inputRef, styleGroup, placeholder = "Insert value", label, labelClassName, icon, isRequired, backgroundColor, ...rest }) {
-    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsxs("div", { className: "input__header", children: [label && jsx("label", { className: labelClassName, children: label }), error && error.is && (jsx("span", { className: "input__header--error", children: error.message }))] }), jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsx("input", { ref: inputRef, required: isRequired, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsx("div", { className: clsx("input__icon", "input__icon--right", 
-                        // `input__icon--${icon.position || "right"}`,
-                        icon.className), children: icon.element }))] })] }));
-}
-
-function FormInput({ name, isRequired, error, defaultValue, ...rest }) {
-    const { control } = useFormContext();
-    return (jsx(Controller, { name: name, control: control, rules: {
-            ...(isRequired
-                ? {
-                    required: error?.message || "Field is required",
-                }
-                : {}),
-        }, render: ({ field, fieldState: { error } }) => {
-            return (jsx(Input, { isRequired: true, error: {
-                    is: !!error,
-                    message: error?.message,
-                }, defaultValue: defaultValue, ...field, ...rest }));
-        } }));
-}
-
-function TextArea({ buttonDisabled = false, className = "", disabled = true, error = {
-    is: false,
-    message: "",
-}, hasToggleButton = true, hideHeight = "5rem", label, labelClassName, isRequired, placeholder = "Insert value", showHeight = "10rem", backgroundColor, style = {}, textareaClassName = "", ...rest }) {
-    const ref = useRef();
-    const [isShow, setIsShow] = useState(false);
-    const handleClickToggle = () => {
-        if (ref && ref.current) {
-            if (isShow) {
-                ref.current.style.height = hideHeight;
-            }
-            else {
-                ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
-            }
-            setIsShow((prev) => !prev);
-        }
-    };
-    return (jsxs("div", { className: clsx("textarea", className), style: { backgroundColor: backgroundColor, ...style }, children: [jsxs("div", { className: "textarea__header", children: [label && jsx("label", { className: labelClassName, children: label }), error && error.is && (jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
-                    height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, required: isRequired, ...rest }), hasToggleButton && (jsx(Button, { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: buttonDisabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
-}
-
-function FormTextArea({ name, isRequired, error, ...rest }) {
-    const { control } = useFormContext();
-    return (jsx(Controller, { name: name, control: control, rules: {
-            ...(isRequired
-                ? {
-                    required: error?.message || "Field is required",
-                }
-                : {}),
-        }, render: ({ field, fieldState: { error } }) => {
-            return (jsx(TextArea, { isRequired: true, error: {
-                    is: !!error,
-                    message: error?.message,
-                }, ...field, ...rest }));
-        } }));
-}
-
-function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, setFormSelected, clearError, resetForm, onFormBlur, handleSelect, label, labelClassName, error, backgroundColor, isRequired, ...rest }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [value, setValue] = useState(defaultValue || (options && options[0]));
-    const [filteredOptions, setFilteredOptions] = useState(options);
-    const { name } = rest;
-    const handleOpen = () => {
-        setIsOpen(true);
-    };
-    const handleClose = () => {
-        setIsOpen(false);
-    };
-    const handleInputClose = () => {
-        if (onFormBlur) {
-            onFormBlur();
-        }
-        setIsOpen(false);
-    };
-    const handleToggle = () => {
-        setIsOpen((prev) => !prev);
-    };
-    const handleValueChange = (e) => {
-        const { value } = e.target;
-        setValue(value);
-    };
-    const handleSelectChange = (e) => {
-        const { name: value } = e.target;
-        if (setFormSelected) {
-            setFormSelected(name, value);
-            if (clearError) {
-                clearError(name);
-            }
-            if (resetForm) {
-                resetForm();
-            }
-        }
-        else {
-            setValue(value);
-        }
-        if (handleSelect) {
-            handleSelect(value);
-        }
-        handleClose();
-    };
-    return (jsxs("div", { className: clsx("select-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsx(Input, { inputClassName: clsx("select", {
-                    "select--focus": isOpen,
-                }, inputClassName), value: value, error: error, required: isRequired, placeholder: "Select a value", icon: {
-                    className: "select__arrow",
-                    element: (jsx(Button, { type: "button", size: "large", mode: "icon", className: clsx("select__arrow-button", {
-                            "select__arrow-button--open": isOpen
-                        }), onClick: handleToggle, onBlur: handleClose, children: jsx(TfiAngleDown, { size: 24 }) })),
-                }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", label: label, labelClassName: labelClassName, ...rest }), isOpen && (jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
-}
-
-function FormSelect({ name, isRequired, error, fieldsToReset, label, ...rest }) {
-    const { control, setValue, clearErrors, unregister, resetField } = useFormContext();
-    return (jsx(Controller, { name: name, control: control, rules: {
-            ...(isRequired
-                ? {
-                    required: error?.message || "Field is required",
-                }
-                : {}),
-        }, render: ({ field: { onBlur, ...restField }, fieldState: { error } }) => {
-            return (jsx(Select, { isRequired: true, label: label, error: {
-                    is: !!error,
-                    message: error?.message || "",
-                }, setFormSelected: setValue, resetForm: () => fieldsToReset &&
-                    fieldsToReset.map((field) => {
-                        setValue(field, undefined);
-                        unregister(field);
-                    }), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
-        } }));
-}
-
-var img = "data:image/gif;base64,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";
-
-function Loading({ img: img$1, children }) {
-    return (jsxs("div", { className: "loading", children: [jsx("img", { src: img$1 ?? img }), jsx("div", { className: "loading-message", children: children })] }));
-}
-
-function Modal({ className, modalref, children, title, subtitle, footer, hasOverlay = true, hasCloseButton = true, handleClose, ...rest }) {
-    return (jsxs(Fragment, { children: [hasOverlay && jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: clsx("modal", className), ...rest, children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
-}
-
-function usePositions(panelRef) {
-    const [allPositions, setAllPositions] = useState(undefined);
-    const [pixelPosition, setPixelPosition] = useState(undefined);
-    const [thumbPosition, setThumbPosition] = useState(undefined);
-    // find positions of all values
-    useEffect(() => {
-        if (panelRef?.current) {
-            const current = panelRef.current;
-            if (current) {
-                const valuesRef = Array.from(current.getElementsByClassName("range__content"));
-                const parentBounds = current.getBoundingClientRect();
-                setAllPositions(valuesRef.map((values) => {
-                    const childBounds = values.getBoundingClientRect();
-                    return childBounds.right - parentBounds.x;
-                }));
-            }
-        }
-    }, []);
-    // initial position
-    useEffect(() => {
-        if (allPositions) {
-            setPixelPosition(`${allPositions[0]}px`);
-            setThumbPosition(`${allPositions[0] / 2 - getThumbBounds().width / 2}px`);
-        }
-    }, [allPositions]);
-    return {
-        panelRef,
-        allPositions,
-        setAllPositions,
-        pixelPosition,
-        setPixelPosition,
-        thumbPosition,
-        setThumbPosition,
-    };
-}
-function getThumbBounds() {
-    const thumb = document.getElementsByClassName("range__thumb")[0];
-    return thumb.getBoundingClientRect();
-}
-function useTimer({ allPositions, indexPosition, handlePosition, handleOverContent, values, }) {
-    const timeoutRef = useRef(null);
-    const [isPlay, setIsPlay] = useState(false);
-    // timer
-    useEffect(() => {
-        resetTimeout();
-        if (isPlay) {
-            if (allPositions) {
-                timeoutRef.current = setTimeout(() => {
-                    const newThumbPosition = allPositions[indexPosition] +
-                        allPositions[0] / 2 -
-                        getThumbBounds().width / 2;
-                    handlePosition(allPositions[indexPosition + 1], newThumbPosition, indexPosition + 1, true);
-                    handleOverContent(values[indexPosition + 1]);
-                }, 500);
-                if (indexPosition === allPositions.length - 1) {
-                    setIsPlay(false);
-                }
-            }
-        }
-        return () => {
-            resetTimeout();
-        };
-    }, [isPlay, indexPosition]);
-    const resetTimeout = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-    };
-    const handlePlay = () => {
-        setIsPlay(!isPlay);
-    };
-    const handleStop = () => {
-        if (allPositions) {
-            handlePosition(allPositions[0], allPositions[0] / 2 - getThumbBounds().width / 2, 0, false);
-            setIsPlay(false);
-        }
-    };
-    return { isPlay, setIsPlay, handlePlay, handleStop };
-}
-function useThumb({ allPositions, panelRef, handlePosition, handleOverContent, values, }) {
-    // Add drag
-    const startDragging = (event) => {
-        if (allPositions && panelRef?.current) {
-            const current = panelRef.current;
-            const panelBounds = current?.getBoundingClientRect();
-            const x = event.pageX - panelBounds.left;
-            const absX = Math.abs(x);
-            if (x >= 0 && x <= allPositions[allPositions.length - 1]) {
-                const desiredPosition = allPositions.reduce((prev, curr) => Math.abs(prev - absX) < Math.abs(curr - absX) ? prev : curr);
-                const index = allPositions.indexOf(desiredPosition);
-                const newThumbPosition = index === 0
-                    ? allPositions[index] -
-                        allPositions[0] / 2 -
-                        getThumbBounds().width / 2
-                    : allPositions[index - 1] +
-                        allPositions[0] / 2 -
-                        getThumbBounds().width / 2;
-                handlePosition(desiredPosition, newThumbPosition, index, true);
-                handleOverContent(values[index]);
-            }
-        }
-    };
-    const stopDragging = () => {
-        window.removeEventListener("mousemove", startDragging, false);
-        window.removeEventListener("mouseup", stopDragging, false);
-    };
-    const handleDownThumb = () => {
-        window.addEventListener("mousemove", startDragging, false);
-        window.addEventListener("mouseup", stopDragging, false);
-    };
-    return { handleDownThumb };
-}
-
-const ThemeContext = createContext(undefined);
-function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
-    const [dataTheme, setDataTheme] = useState();
-    const [dataPalette, setDataPalette] = useState();
-    useEffect(() => {
-        if (dataPaletteProp) {
-            switchDataPalette(dataPaletteProp);
-        }
-    }, [dataPaletteProp]);
-    useEffect(() => {
-        if (dataThemeProp) {
-            switchDataTheme(dataThemeProp);
-        }
-    }, [dataThemeProp]);
-    useEffect(() => {
-        if (window.matchMedia) {
-            if (localStorage.getItem("data-theme")) {
-                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
-                setDataTheme(localStorage.getItem("data-theme"));
-            }
-            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-                document.documentElement.setAttribute("data-theme", "dark");
-                setDataTheme("dark");
-            }
-        }
-    }, []);
-    const switchDataTheme = (mode) => {
-        document.documentElement.setAttribute("data-theme", mode);
-        setDataTheme(mode);
-        localStorage.setItem("data-theme", mode);
-    };
-    const switchDataPalette = (mode) => {
-        document.documentElement.setAttribute("data-palette", mode);
-        setDataPalette(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
-}
-function useTheme() {
-    const context = useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
-function RangeThumb({ thumbPosition, handleOverContent, handleDownThumb }) {
-    const { dataTheme } = useTheme();
-    return (jsx(Button, { mode: "icon", className: "range__thumb", size: "small", style: {
-            left: `${thumbPosition}`,
-        }, onMouseOver: () => handleOverContent(thumbPosition), onMouseDown: handleDownThumb, children: dataTheme === "dark" ? (jsx(RiMapPinTimeFill, { size: "1.5rem" })) : (jsx(RiMapPinTimeLine, { size: "1.5rem" })) }));
-}
-
-function RangeContent({ period, values, allPositions, handlePosition, handleOverContent, handleOutContent, over, }) {
-    const handleClickRange = (index) => {
-        if (allPositions) {
-            const newThumbPosition = index === 0
-                ? allPositions[index] -
-                    allPositions[0] / 2 -
-                    getThumbBounds().width / 2
-                : allPositions[index - 1] +
-                    allPositions[0] / 2 -
-                    getThumbBounds().width / 2;
-            handlePosition(allPositions[index], newThumbPosition, index, true);
-        }
-    };
-    return period
-        ? values.map((value, index) => (jsx("div", { className: "range__content range__content__period", onClick: () => handleClickRange(index), onMouseOver: () => handleOverContent(value), onMouseOut: () => handleOutContent(), children: index % period === 0 ? (jsxs(Fragment, { children: [jsx("div", { className: "range__tick range__tick__large" }), jsx("div", { className: clsx("range__value", "range__value__period", {
-                            "range__value--over": value === over,
-                        }), children: value })] })) : (jsxs(Fragment, { children: [jsx("div", { className: "range__tick range__tick__small" }), value === over && (jsx("div", { className: clsx("range__value", "range__value__period", {
-                            "range__value--over": value === over,
-                        }), children: value }))] })) })))
-        : values.map((value, index) => (jsxs("div", { className: "range__content", onClick: () => handleClickRange(index), children: [jsx("div", { className: "range__tick range__tick__large" }), jsx("div", { className: "range__value", children: value })] })));
-}
-
-function RangeControls({ indexPosition, isPlay, handlePlay, handleStop, }) {
-    return (jsxs(Fragment, { children: [jsx(Button, { mode: "icon", size: "small", className: "range__play", onClick: handlePlay, children: isPlay ? (jsx(IoPause, { color: "var(--color-primary-base)", size: "2rem" })) : (jsx(IoPlay, { color: "var(--color-primary-base)", size: "2rem" })) }), jsx(Button, { mode: "icon", size: "small", className: "range__play", disabled: !isPlay && indexPosition === 0, onClick: handleStop, children: jsx(IoStop, { color: "var(--color-primary-base)", size: "2rem" }) })] }));
-}
-
-function Range({ period, values, handleSelected }) {
-    const panelRef = useRef(null);
-    const [indexPosition, setIndexPosition] = useState(0);
-    const [over, setOver] = useState(undefined);
-    const { allPositions, pixelPosition, setPixelPosition, thumbPosition, setThumbPosition, } = usePositions(panelRef);
-    const handlePosition = (pixelPosition, thumbPosition, index, isHandleSelected = false) => {
-        setPixelPosition(`${pixelPosition}px`);
-        setThumbPosition(`${thumbPosition}px`);
-        setIndexPosition(index);
-        if (isHandleSelected && handleSelected) {
-            handleSelected({
-                value: values[index],
-                index,
-                position: pixelPosition,
-            });
-        }
-    };
-    const handleOverContent = (value) => {
-        setOver(value);
-    };
-    const handleOutContent = () => {
-        setOver(undefined);
-    };
-    const { isPlay, handlePlay, handleStop } = useTimer({
-        allPositions,
-        indexPosition,
-        handlePosition,
-        handleOverContent,
-        values,
-    });
-    const { handleDownThumb } = useThumb({
-        allPositions,
-        panelRef,
-        handlePosition,
-        handleOverContent,
-        values,
-    });
-    return (jsxs("div", { className: "range", children: [jsxs("div", { ref: panelRef, className: "range__panel", children: [jsx(RangeContent, { period: period, values: values, allPositions: allPositions, handlePosition: handlePosition, handleOverContent: handleOverContent, handleOutContent: handleOutContent, over: over }), jsx("div", { className: "range__track", style: {
-                            width: `${pixelPosition}`,
-                        } }), jsx(RangeThumb, { thumbPosition: thumbPosition, handleOverContent: handleOverContent, handleDownThumb: handleDownThumb })] }), jsx(RangeControls, { indexPosition: indexPosition, isPlay: isPlay, handlePlay: handlePlay, handleStop: handleStop })] }));
-}
-
-const LoadingContext = createContext(undefined);
-function loadingReducer(state, action) {
-    switch (action.type) {
-        case "set_ref": {
-            return { ...state, ref: action.ref };
-        }
-        case "start_loading": {
-            return { ...state, isLoading: true };
-        }
-        case "stop_loading": {
-            return { ...state, isLoading: false };
-        }
-        case "set_message": {
-            return { ...state, message: action.message };
-        }
-        default: {
-            throw new Error(`Unhandled action type: ${action.type}`);
-        }
-    }
-}
-function LoadingProvider({ children }) {
-    const [{ isLoading, message, ref }, dispatch] = useReducer(loadingReducer, {
-        isLoading: false,
-        message: "Loading",
-        ref: undefined,
-    });
-    const setRef = (ref) => {
-        dispatch({ type: "set_ref", ref });
-    };
-    const setMessage = (message) => {
-        dispatch({ type: "set_message", message });
-    };
-    const startLoading = () => {
-        dispatch({ type: "start_loading" });
-    };
-    const stopLoading = () => {
-        dispatch({ type: "stop_loading" });
-    };
-    return (jsxs(LoadingContext.Provider, { value: {
-            state: { ref, message, isLoading },
-            setMessage,
-            setRef,
-            startLoading,
-            stopLoading,
-        }, children: [!ref && jsx(Loading, { children: message }), children] }));
-}
-function useLoading({ ref, message } = {}) {
-    const context = useContext(LoadingContext);
-    // only happens if there is an initial mode value.
-    useEffect(() => {
-        ref && context?.setRef(ref);
-        message && context?.setMessage(message);
-    }, []);
-    if (context === undefined) {
-        throw new Error("useLoading must be used within a LoadingProvider");
-    }
-    return context;
-}
-
-const ModalContext = createContext(undefined);
-function modalReducer(state, action) {
-    switch (action.type) {
-        case "open_modal": {
-            return { ...state, ...action.modal, isModal: true };
-        }
-        case "close_modal": {
-            return { ...state, isModal: false };
-        }
-        default: {
-            throw new Error(`Unhandled action type: ${action.type}`);
-        }
-    }
-}
-const defaultState = {
-    subtitle: undefined,
-    title: undefined,
-    content: undefined,
-    hasCloseButton: true,
-    hasOverlay: true,
-    footer: undefined,
-    isCustom: false,
-    customRef: undefined,
-    hasWindowClose: true
-};
-function ModalProvider({ children }) {
-    const ref = useRef(null);
-    const [state, dispatch] = useReducer(modalReducer, {
-        isModal: false,
-        ...defaultState,
-    });
-    const openModal = (modal) => {
-        dispatch({ type: "open_modal", modal });
-    };
-    const closeModal = () => {
-        dispatch({ type: "close_modal" });
-    };
-    useEffect(() => {
-        if (state.isModal && state.hasWindowClose) {
-            const listener = (e) => {
-                if (state.isModal &&
-                    ref.current &&
-                    !ref.current.contains(e.target)) {
-                    closeModal();
-                }
-                if (state.isModal &&
-                    state.customRef &&
-                    state.customRef.current &&
-                    !state.customRef.current.contains(e.target)) {
-                    closeModal();
-                }
-            };
-            document.addEventListener("mousedown", listener);
-            return () => {
-                document.removeEventListener("mousedown", listener);
-            };
-        }
-    }, [closeModal]);
-    return (jsxs(ModalContext.Provider, { value: {
-            state,
-            openModal,
-            closeModal,
-        }, children: [children, state.isModal && !state.isCustom && (jsx(Modal, { modalref: ref, title: state.title, footer: state.footer, handleClose: closeModal, subtitle: state.subtitle, hasCloseButton: state.hasCloseButton, hasOverlay: state.hasOverlay, children: state.content }))] }));
-}
-function useModal({} = {}) {
-    const context = useContext(ModalContext);
-    if (context === undefined) {
-        throw new Error("useModal must be used within a ModalProvider");
-    }
-    return context;
-}
-
-export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Range, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
-//# sourceMappingURL=index.js.map