@geoinsight/react-components 1.0.7 → 1.1.0

package/dist/esm/index.css

@@ -842,167 +842,3 @@ h6 {
 .modal__footer {
   padding-bottom: var(--spacing-16);
 }
-
-@import url("mapbox-gl/dist/mapbox-gl.css");
-
-.map {
-  position: relative;
-  height: 100%;
-}
-
-.map__attribution {
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-4);
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-
-.map__attribution a {
-  font-size: var(--font-size-12);
-  padding: 0 var(--spacing-8) 0 0;
-}
-
-.map__attribution a:hover {
-  text-underline-offset: var(--spacing-4);
-}
-
-.map__button.button {
-  padding: var(--spacing-8) !important;
-}
-.map__mapbox-error {
-  color: var(--color-danger);
-}
-
-.map__popup {
-  background-color: var(--color-main-color);
-  border-radius: var(--spacing-8);
-  color: var(--color-main-background);
-  padding: var(--spacing-4);
-  position: absolute;
-}
-
-.map__popup-content {
-  border: 1px solid var(--color-main-background);
-  border-radius: var(--spacing-8);
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-8);
-  padding: var(--spacing-8);
-}
-
-.map__popup-list {
-  border-radius: var(--spacing-8);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
-
-.map__popup-list > h5 {
-  margin: unset;
-}
-
-/* .map__tip {
-  display: flex;
-  align-self: center;
-  border: 10px solid transparent;
-  border-bottom-color: var(--color-main-color) !important;
-  border-top: none;
-  flex-direction: column;
-  height: 0;
-  width: 0;
-  z-index: 1;
-} */
-
-.mapboxgl-popup-tip {
-  border-bottom-color: var(--color-main-color) !important;
-}
-
-.mapboxgl-popup-content {
-  background-color: var(--color-main-color) !important;
-  border: 1px solid var(--color-main-background) !important;
-  border-radius: var(--spacing-8) !important;
-  color: var(--color-main-background) !important;
-  display: flex !important;
-  flex-direction: row !important;
-  gap: var(--spacing-8) !important;
-  padding: var(--spacing-8) !important;
-}
-
-.mapboxgl-popup-close-button {
-  border-radius: var(--spacing-32) !important;
-  background-color: var(--color-primary-dark) !important;
-  top: -16px !important;
-  right: -16px !important;
-}
-
-.mapboxgl-popup-close-button:hover {
-  background-color: var(--color-primary-dark);
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
-}
-
-.control {
-  color: var(--color-main-background);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  position: absolute;
-  /* margin: var(--spacing-4); */
-}
-
-.control--top-left {
-  padding: var(--spacing-8) 0 0 var(--spacing-8);
-  top: 0;
-}
-
-.control--top-right {
-  align-items: end;
-  padding: var(--spacing-8) var(--spacing-8) 0 0;
-  right: 0;
-  top: 0;
-}
-
-.control--bottom-left {
-  bottom: 0;
-  padding: 0 0 var(--spacing-32) var(--spacing-8);
-}
-
-.control--bottom-right {
-  align-items: end;
-  bottom: 0;
-  padding: 0 var(--spacing-8) var(--spacing-32) 0;
-  right: 0;
-}
-
-.control--top-center {
-  left: 40%;
-  padding-top: var(--spacing-8);
-  top: 0;
-}
-
-.control--center-left {
-  left: 0;
-  padding-left: var(--spacing-8);
-  top: 40%;
-}
-
-.control--center {
-  left: 50%;
-  top: 50%;
-}
-
-.control--center-right {
-  padding-right: var(--spacing-8);
-  right: 0;
-  top: 40%;
-}
-
-.control--bottom-center {
-  bottom: 0;
-  left: 40%;
-  padding-bottom: var(--spacing-8);
-  top: auto;
-}

package/dist/esm/index.d.ts

@@ -0,0 +1,15 @@
+import "../src/styles/variables.css";
+export { Menu } from "./components/menu";
+export { Button } from "./components/button";
+export { Form } from "./components/form";
+export { FormInput } from "./components/form/form-input";
+export { FormTextArea } from "./components/form/form-text-area";
+export { FormSelect } from "./components/form/form-select";
+export { Input } from "./components/input";
+export { Loading } from "./components/loading";
+export { Modal } from "./components/modal";
+export { Select } from "./components/select";
+export { TextArea } from "./components/text-area";
+export { LoadingContext, LoadingProvider, useLoading } from "./context/loading";
+export { ModalContext, ModalProvider, useModal } from "./context/modal";
+export { ThemeContext, ThemeProvider, useTheme } from "./context/theme";

package/dist/esm/index.js

@@ -1,25 +1,58 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, Children, isValidElement, cloneElement, createContext, useState, useContext, useRef, useEffect, useReducer } from 'react';
+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, BsFillMoonFill, BsFillSunFill } from 'react-icons/bs';
+import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 import { IoClose } from 'react-icons/io5';
-import DeckGL from '@deck.gl/react/typed';
-import * as Layers from '@deck.gl/layers';
-import { Popup, Map, Source, Layer } from 'react-map-gl';
-import maplibregl from 'maplibre-gl';
-import { FiSun, FiMoon } from 'react-icons/fi';
 
-const ALLOWED_CHILD_COMPONENT$1 = ["MenuItem", "Item"];
+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$1.includes(childComponent.name))
+            if (!ALLOWED_CHILD_COMPONENT.includes(childComponent.name))
                 return;
             return cloneElement(child);
         });
@@ -89,44 +122,6 @@ function MenuButton({ anchor, children, buttonClassName, nested, subnested, drop
         }, buttonClassName), onClick: handleClick, ...props, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] }));
 }
 
-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 generateId = () => {
-    return `id-${Math.random().toString(36).slice(2, 11)}`;
-};
-
-const ALLOWED_CHILD_COMPONENT = ["MenuButton", "MenuContent", "Button", "Content"];
-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.includes(childComponent.name))
-                return;
-            return cloneElement(child, {
-                "data-menu-id": menuId.current,
-            });
-        }) }));
-}
-
 const Menu = {
     Root: MenuRoot,
     Item: MenuItem,
@@ -295,189 +290,6 @@ function Modal({ className, modalref, children, title, subtitle, footer, hasOver
     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 })] })] })] }));
 }
 
-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 MapControl({ children, position = "top-right", ...rest }) {
-    return (jsx("div", { className: `control control--${position}`, ...rest, children: children }));
-}
-
-function MapToc({ items, selected, setSelected }) {
-    return (jsx(Menu.Root, { children: Object.entries(items).map(([parentId, parent], index) => (jsxs(Menu.Item, { children: [jsx(Menu.Button, { dropdown: true, children: parent.title }), jsx(Menu.Content, { children: Object.entries(parent.children).map(([childId, child], index) => (jsx(Menu.Item, { children: jsx(Menu.Button, { isSelected: childId === selected.id, nested: true, handleCallbackClick: () => setSelected({ id: childId, ...child }), children: child.label }) }))) })] }, `first-level-${index}`))) }));
-}
-
-/** Context */
-const MapContext = createContext(undefined);
-function MapProvider({ children }) {
-    const [currentLayer, setCurrentLayer] = useState(undefined);
-    return (jsx(MapContext.Provider, { value: { state: { currentLayer }, setCurrentLayer }, children: children }));
-}
-function useMap({ defaultLayer }) {
-    const context = useContext(MapContext);
-    useEffect(() => {
-        if (context) {
-            context.setCurrentLayer(defaultLayer);
-        }
-    }, []);
-    if (context === undefined) {
-        throw new Error("useMap must be used within a MapProvider");
-    }
-    return context;
-}
-
-const DefaultPopup = ({ popup }) => {
-    const { isDefault, data, render } = popup.model;
-    return isDefault || true ? (jsxs("div", { className: "map__popup-content", children: [jsx("div", { className: "map__popup-list", children: data.fields.map((field) => (jsxs("h5", { children: [field, ":"] }))) }), jsx("div", { className: "map__popup-list", children: data.values.map((value) => (jsx("span", { children: typeof value === "string"
-                        ? new Function("v", `return (${value})(${JSON.stringify(popup.info)})`)()
-                        : value(popup.info) }))) })] })) : (render);
-};
-const MapPopup = ({ popup, framework = "deck.gl", setPopupData, longitude, latitude, }) => {
-    return framework === "deck.gl" ? (jsx("div", { className: "map__popup", style: { left: longitude, top: latitude }, children: jsx(DefaultPopup, { popup: popup }) })) : (jsx(Popup, { anchor: "top", longitude: Number(longitude), latitude: Number(latitude), onClose: () => setPopupData && setPopupData(undefined), children: jsx(DefaultPopup, { popup: popup }) }));
-};
-
-const INITIAL_VIEW_STATE = {
-    longitude: -122.41669,
-    latitude: 37.7853,
-    zoom: 13,
-    pitch: 0,
-    bearing: 0,
-};
-function MapDeckgl({ attribution, basemap, basemapToken, initialViewState, hasSwitchBasemap = true, layers, mapProps, renderControls = {}, toc, }) {
-    // @ts-ignore
-    const { onClick, ...restMapProps } = mapProps;
-    const theme = useTheme();
-    const [lngLat, setLngLat] = useState();
-    const [popupData, setPopupData] = useState();
-    const _layers = layers &&
-        useMemo(() => layers.map(({ type, layer }) => new Layers[type](layer)), []);
-    const { "bottom-left": bottomLeft, "center-left": centerLeft, ..._controls } = renderControls;
-    const mapContext = toc &&
-        useMap({
-            defaultLayer: {
-                id: toc.defaultIds[1],
-                ...toc?.parents[toc.defaultIds[0]].children[toc.defaultIds[1]],
-            },
-        });
-    const handleToggle = () => {
-        theme.switchDataTheme(theme.dataTheme === "dark" ? "light" : "dark");
-    };
-    const handeSelectedLayer = (layer) => {
-        mapContext.setCurrentLayer(layer);
-    };
-    const handleClick = (event) => {
-        if (event.object) {
-            if (event.layer?.props?.popup) {
-                setPopupData({ model: event.layer?.props.popup, info: event.object });
-            }
-            setLngLat([event.pixel[0], event.pixel[1]]);
-        }
-        else {
-            setLngLat(undefined);
-        }
-        if (onClick) {
-            onClick(event);
-        }
-    };
-    return (jsxs("div", { className: "map", children: [jsxs(DeckGL, { initialViewState: initialViewState || INITIAL_VIEW_STATE, controller: true, layers: _layers, onClick: handleClick, ...restMapProps, children: [jsx(Map, { attributionControl: false, mapLib: maplibregl, mapStyle: basemap || theme.dataTheme === "dark"
-                            ? `https://api.maptiler.com/maps/darkmatter/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}`
-                            : `https://api.maptiler.com/maps/positron/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}` }), Object.keys(_controls).map((key) => {
-                        // @ts-ignore
-                        return jsx(MapControl, { position: key, children: _controls[key] });
-                    }), jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsx(MapControl, { position: "bottom-left", children: hasSwitchBasemap ? (jsxs(Fragment, { children: [bottomLeft, jsx(Button, { mode: "icon", size: "small", onClick: handleToggle, children: theme.dataTheme === "dark" ? (jsx(FiSun, { size: "1.25rem" })) : (jsx(FiMoon, { size: "1.25rem", color: "var(--color-black)" })) })] })) : (bottomLeft) }), jsx("div", { className: "map__attribution", children: attribution || (jsxs(Fragment, { children: [jsx(Button, { as: "link", href: "https://www.maptiler.com/copyright/", target: "_blank", children: "\u00A9 MapTiler" }), jsx(Button, { as: "link", href: "https://www.openstreetmap.org/copyright", target: "_blank", children: "\u00A9 OpenStreetMap contributors" })] })) })] }), popupData && lngLat && (jsx(MapPopup, { longitude: lngLat[0], latitude: lngLat[1], 
-                // framework="deck.gl"
-                popup: popupData }))] }));
-}
-
-function MapMapbox({ basemap, mapProps, hasSwitchBasemap, hasSwitchProjection, renderControls, sources, toc, }) {
-    // @ts-ignore
-    const { onClick, ...restMapProps } = mapProps;
-    const { dataTheme, switchDataTheme } = useTheme();
-    const [projection, setProjection] = useState("globe");
-    const { "bottom-left": bottomLeft, "center-left": centerLeft, ..._controls } = renderControls;
-    const [popupData, setPopupData] = useState();
-    const [lngLat, setLngLat] = useState();
-    const mapContext = toc &&
-        useMap({
-            defaultLayer: {
-                id: toc.defaultIds[1],
-                ...toc?.parents[toc.defaultIds[0]].children[toc.defaultIds[1]],
-            },
-        });
-    const handeSelectedLayer = (layer) => {
-        mapContext.setCurrentLayer(layer);
-    };
-    const handleClick = (event) => {
-        const { features, point: { x, y }, lngLat: { lng, lat }, } = event;
-        const hoveredFeature = features && features[0];
-        if (hoveredFeature) {
-            setPopupData({
-                model: hoveredFeature.layer.metadata["mapbox:popup"],
-                info: hoveredFeature,
-            });
-            setLngLat([lng, lat]);
-        }
-        if (onClick) {
-            onClick(event);
-        }
-    };
-    return mapProps?.mapboxAccessToken ? (jsx(Fragment, { children: jsxs(Map, { mapboxAccessToken: mapProps.mapboxAccessToken, projection: projection, mapStyle: basemap ||
-                `mapbox://styles/mapbox/${dataTheme === "dark" ? "light" : "dark"}-v11`, ...((mapProps.interactiveLayerIds && { onClick: handleClick }) ||
-                (onClick && { onClick })), ...restMapProps, children: [sources &&
-                    sources.map(({ id, layers, ...restSource }) => (
-                    // @ts-ignore
-                    jsx(Source, { id: id, ...restSource, children: layers && layers.map((layer) => jsx(Layer, { ...layer })) }))), Object.keys(_controls).map((key) => {
-                    // @ts-ignore
-                    return jsx(MapControl, { position: key, children: _controls[key] });
-                }), jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsxs(MapControl, { position: "bottom-left", children: [bottomLeft, hasSwitchBasemap && (jsx(Button, { className: "map__button", mode: "icon", onClick: () => switchDataTheme(dataTheme === "dark" ? "light" : "dark"), children: dataTheme === "dark" ? jsx(BsFillMoonFill, {}) : jsx(BsFillSunFill, {}) })), hasSwitchProjection && (jsx(Button, { className: "map__button", mode: "icon", onClick: () => setProjection((prev) => prev === "globe" ? "mercator" : "globe"), children: projection === "globe" ? "2D" : "3D" }))] }), popupData && lngLat && (jsx(MapPopup, { longitude: lngLat[0], latitude: lngLat[1], framework: "mapboxgl", setPopupData: setPopupData, popup: popupData }))] }) })) : (jsx(Modal, { hasCloseButton: false, children: jsx("p", { className: "map__mapbox-error", children: "You need to add the mapbox token to the prop mapboxAccessToken." }) }));
-}
-
-function MapComponent({ attribution, basemap, basemapToken, framework = "deck.gl", mapProps, hasSwitchBasemap = true, hasSwitchProjection = true, layers, renderControls = {}, sources, toc, }) {
-    return framework === "deck.gl" ? (jsx(MapDeckgl, { attribution: attribution, basemap: basemap, basemapToken: basemapToken, hasSwitchBasemap: hasSwitchBasemap, layers: layers, mapProps: mapProps, renderControls: renderControls, toc: toc })) : framework === "mapboxgl" ? (jsx(MapMapbox, { basemap: basemap, hasSwitchBasemap: hasSwitchBasemap, hasSwitchProjection: hasSwitchProjection, mapProps: mapProps, renderControls: renderControls, sources: sources, toc: toc })) : (jsx("div", { children: "The component needs a framework" }));
-}
-
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -609,5 +421,51 @@ function useModal({} = {}) {
     return context;
 }
 
-export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, MapComponent, MapControl, MapProvider, Menu, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useMap, useModal, useTheme };
+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;
+}
+
+export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
 //# sourceMappingURL=index.js.map