@geoinsight/react-components 1.0.4 → 1.0.6

package/dist/esm/index.css

@@ -53,6 +53,9 @@
     cubic-bezier(0.1, 0.2, 0.3, 0.4);
   --transition-box-shadow-cubic-bezier: box-shadow 500ms
     cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-border-cubic-bezier: border 250ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+
 
   --color-dark-base: #2e3440;
   --color-dark-bright: #3b4252;
@@ -323,7 +326,8 @@ h6 {
   background-color: var(--color-primary-darker);
 }
 
-.button {
+.button,
+.link {
   align-items: center;
   border-radius: var(--spacing-32);
   border: none;
@@ -353,19 +357,46 @@ h6 {
     var(--transition-box-shadow-cubic-bezier);
 }
 
-.button__link {
+
+.button__primary {
+  background-color: var(--color-primary-bright);
+  border: 3px solid var(--color-primary-base);
+}
+
+.button__secondary,
+.link__secondary {
+  background-color: var(--color-main-background);
+  border: 3px solid var(--color-primary-base);
+  border-radius: var(--spacing-32);
+  text-decoration: unset;
+}
+
+.button__secondary:hover {
+  box-shadow: unset;
+  border: 3px solid var(--color-primary-base);
+}
+
+.button__icon {
+  background-color: var(--color-primary-bright);
+}
+
+.button__icon:hover {
+  border: unset;
+}
+
+.link__primary {
   background-color: unset !important;
   color: var(--color-primary-base) !important;
   text-decoration: underline 1px var(--color-primary-base);
   text-underline-offset: var(--spacing-4);
 }
 
-[data-theme="light"] .button__link {
+[data-theme="light"] .link__primary {
   color: var(--color-primary-darker) !important;
   text-decoration: underline 1px var(--color-primary-darker);
 }
 
-.button__link:hover {
+.link__primary:hover {
   border: unset;
   box-shadow: unset;
   color: var(--color-primary-dark) !important;
@@ -375,29 +406,48 @@ h6 {
     var(--transition-text-underline-offset-cubic-bezier);
 }
 
-.button__primary {
-  background-color: var(--color-primary-bright);
+.link__secondary:hover {
+  background-color: var(--color-primary-dark);
   border: 3px solid var(--color-primary-base);
+  box-shadow: unset;
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
 }
 
-.button__secondary {
-  background-color: var(--color-main-background);
-  border: 3px solid var(--color-primary-base);
-  border-radius: var(--spacing-32);
-  text-decoration: unset;
+.link__icon {
+  background-color: unset !important;
+  color: var(--color-primary-base) !important;
 }
 
-.button__secondary:hover {
-  box-shadow: unset;
-  border: 3px solid var(--color-primary-base);
+.link > a {
+  text-decoration: inherit;
+  color: inherit;
 }
 
-.button__icon {
-  background-color: var(--color-primary-bright);
+.link__icon svg {
+  border: 2px solid transparent;
+  border-bottom: 2px solid var(--color-primary-base);
+  border-radius: 2px;
+  padding: var(--spacing-4);
 }
 
-.button__icon:hover {
+[data-theme="light"] .link__icon {
+  color: var(--color-primary-darker) !important;
+}
+
+[data-theme="light"] .link__icon svg {
+  border-bottom: 2px solid var(--color-primary-darker);
+}
+
+.link__icon:hover {
   border: unset;
+  box-shadow: unset;
+}
+
+.link__icon:hover svg {
+  color: var(--color-main-color) !important;
+  border: 2px solid var(--color-primary-dark);
+  transition: var(--transition-color-cubic-bezier), var(--transition-border-cubic-bezier);
 }
 
 .button__small {
@@ -412,11 +462,6 @@ h6 {
   padding: var(--spacing-16);
 }
 
-.button__link > a {
-  text-decoration: inherit;
-  color: inherit;
-}
-
 .button__icon.button__medium {
   padding: var(--spacing-8) var(--spacing-12);
 }
@@ -797,165 +842,3 @@ h6 {
 .modal__footer {
   padding-bottom: var(--spacing-16);
 }
-
-.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

@@ -10,9 +10,6 @@ export { Loading } from "./components/loading";
 export { Modal } from "./components/modal";
 export { Select } from "./components/select";
 export { TextArea } from "./components/text-area";
-export { MapComponent } from "./components/map";
-export { MapControl } from "./components/map-control";
 export { LoadingContext, LoadingProvider, useLoading } from "./context/loading";
 export { ModalContext, ModalProvider, useModal } from "./context/modal";
 export { ThemeContext, ThemeProvider, useTheme } from "./context/theme";
-export { MapProvider, useMap } from "./context/map";

package/dist/esm/index.js

@@ -2,16 +2,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, Children, isValidElement, cloneElement, createContext, useState, useContext, useRef, useEffect, 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';
-import 'mapbox-gl/dist/mapbox-gl.css';
 
 const ALLOWED_CHILD_COMPONENT$1 = ["MenuItem"];
 function MenuWrapper({ children }) {
@@ -63,7 +57,7 @@ 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}`, mode === "secondary" ? `button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
+    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 }) {
@@ -296,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) {
@@ -610,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