analytica-frontend-lib 1.1.68 → 1.1.70

package/dist/index.d.mts

@@ -33,7 +33,7 @@ export { MultipleChoiceList } from './MultipleChoice/index.mjs';
 export { default as IconRender } from './IconRender/index.mjs';
 export { d as SubjectData, e as SubjectEnum, I as SubjectIconProps, S as SubjectInfo, b as getSubjectColorClass, a as getSubjectIcon, g as getSubjectInfo, c as getSubjectName } from './SubjectInfo-Dvt0OodP.mjs';
 export { DeviceType, getDeviceType, useMobile } from './hooks/useMobile/index.mjs';
-export { ThemeMode, useTheme } from './hooks/useTheme/index.mjs';
+export { useTheme } from './hooks/useTheme/index.mjs';
 export { cn } from './utils/index.mjs';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger, ProfileToggleTheme } from './DropdownMenu/index.mjs';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.mjs';
@@ -55,6 +55,8 @@ export { default as LoadingModal } from './LoadingModal/index.mjs';
 import { N as NotificationApiClient, a as Notification, F as FetchNotificationsParams, b as NotificationGroup, c as NotificationEntityType, d as NotificationType } from './NotificationCard-DMdkuVEr.mjs';
 export { B as BackendNotification, g as BackendNotificationsResponse, e as NotificationCard, f as NotificationItem, h as NotificationsResponse, s as syncNotificationState } from './NotificationCard-DMdkuVEr.mjs';
 export { ThemeToggle } from './ThemeToggle/index.mjs';
+export { c as ThemeActions, T as ThemeMode, b as ThemeState, a as ThemeStore, u as useThemeStore } from './themeStore-P2X64zC-.mjs';
+import 'zustand/middleware';
 import 'clsx';
 
 /**

package/dist/index.d.ts

@@ -33,7 +33,7 @@ export { MultipleChoiceList } from './MultipleChoice/index.js';
 export { default as IconRender } from './IconRender/index.js';
 export { d as SubjectData, e as SubjectEnum, I as SubjectIconProps, S as SubjectInfo, b as getSubjectColorClass, a as getSubjectIcon, g as getSubjectInfo, c as getSubjectName } from './SubjectInfo-Dvt0OodP.js';
 export { DeviceType, getDeviceType, useMobile } from './hooks/useMobile/index.js';
-export { ThemeMode, useTheme } from './hooks/useTheme/index.js';
+export { useTheme } from './hooks/useTheme/index.js';
 export { cn } from './utils/index.js';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger, ProfileToggleTheme } from './DropdownMenu/index.js';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
@@ -55,6 +55,8 @@ export { default as LoadingModal } from './LoadingModal/index.js';
 import { N as NotificationApiClient, a as Notification, F as FetchNotificationsParams, b as NotificationGroup, c as NotificationEntityType, d as NotificationType } from './NotificationCard-DMdkuVEr.js';
 export { B as BackendNotification, g as BackendNotificationsResponse, e as NotificationCard, f as NotificationItem, h as NotificationsResponse, s as syncNotificationState } from './NotificationCard-DMdkuVEr.js';
 export { ThemeToggle } from './ThemeToggle/index.js';
+export { c as ThemeActions, T as ThemeMode, b as ThemeState, a as ThemeStore, u as useThemeStore } from './themeStore-P2X64zC-.js';
+import 'zustand/middleware';
 import 'clsx';
 
 /**

package/dist/index.js

@@ -159,6 +159,7 @@ __export(src_exports, {
   useQuizStore: () => useQuizStore,
   useRouteAuth: () => useRouteAuth,
   useTheme: () => useTheme,
+  useThemeStore: () => useThemeStore,
   useToastStore: () => ToastStore_default,
   useUrlAuthentication: () => useUrlAuthentication,
   withAuth: () => withAuth
@@ -1929,7 +1930,7 @@ var import_react14 = require("react");
 // src/components/DropdownMenu/DropdownMenu.tsx
 var import_phosphor_react9 = require("phosphor-react");
 var import_react13 = require("react");
-var import_zustand4 = require("zustand");
+var import_zustand5 = require("zustand");
 
 // src/components/Modal/Modal.tsx
 var import_react10 = require("react");
@@ -2160,82 +2161,117 @@ var import_react12 = require("react");
 
 // src/hooks/useTheme.ts
 var import_react11 = require("react");
-var useTheme = () => {
-  const [themeMode, setThemeMode] = (0, import_react11.useState)("system");
-  const [isDark, setIsDark] = (0, import_react11.useState)(false);
-  const themeModeRef = (0, import_react11.useRef)("system");
-  const applyTheme = (0, import_react11.useCallback)((mode) => {
-    const htmlElement = document.documentElement;
-    const originalTheme = htmlElement.getAttribute("data-original-theme");
-    if (mode === "dark") {
+
+// src/store/themeStore.ts
+var import_zustand4 = require("zustand");
+var import_middleware = require("zustand/middleware");
+var applyThemeToDOM = (mode) => {
+  const htmlElement = document.documentElement;
+  const originalTheme = htmlElement.getAttribute("data-original-theme");
+  if (mode === "dark") {
+    htmlElement.setAttribute("data-theme", "dark");
+    return true;
+  } else if (mode === "light") {
+    if (originalTheme) {
+      htmlElement.setAttribute("data-theme", originalTheme);
+    }
+    return false;
+  } else if (mode === "system") {
+    const isSystemDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    if (isSystemDark) {
       htmlElement.setAttribute("data-theme", "dark");
-      setIsDark(true);
-    } else if (mode === "light") {
-      if (originalTheme) {
-        htmlElement.setAttribute("data-theme", originalTheme);
-      }
-      setIsDark(false);
-    } else if (mode === "system") {
-      const isSystemDark = window.matchMedia(
-        "(prefers-color-scheme: dark)"
-      ).matches;
-      if (isSystemDark) {
-        htmlElement.setAttribute("data-theme", "dark");
-        setIsDark(true);
-      } else if (originalTheme) {
-        htmlElement.setAttribute("data-theme", originalTheme);
-        setIsDark(false);
+      return true;
+    } else if (originalTheme) {
+      htmlElement.setAttribute("data-theme", originalTheme);
+      return false;
+    }
+  }
+  return false;
+};
+var saveOriginalTheme = () => {
+  const htmlElement = document.documentElement;
+  const currentTheme = htmlElement.getAttribute("data-theme");
+  if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
+    htmlElement.setAttribute("data-original-theme", currentTheme);
+  }
+};
+var useThemeStore = (0, import_zustand4.create)()(
+  (0, import_middleware.devtools)(
+    (0, import_middleware.persist)(
+      (set, get) => ({
+        // Initial state
+        themeMode: "system",
+        isDark: false,
+        // Actions
+        applyTheme: (mode) => {
+          const isDark = applyThemeToDOM(mode);
+          set({ isDark });
+        },
+        toggleTheme: () => {
+          const { themeMode, applyTheme } = get();
+          let newMode;
+          if (themeMode === "light") {
+            newMode = "dark";
+          } else if (themeMode === "dark") {
+            newMode = "light";
+          } else {
+            newMode = "dark";
+          }
+          set({ themeMode: newMode });
+          applyTheme(newMode);
+        },
+        setTheme: (mode) => {
+          const { applyTheme } = get();
+          set({ themeMode: mode });
+          applyTheme(mode);
+        },
+        initializeTheme: () => {
+          const { themeMode, applyTheme } = get();
+          saveOriginalTheme();
+          applyTheme(themeMode);
+        },
+        handleSystemThemeChange: () => {
+          const { themeMode, applyTheme } = get();
+          if (themeMode === "system") {
+            applyTheme("system");
+          }
+        }
+      }),
+      {
+        name: "theme-store",
+        // Nome da chave no localStorage
+        partialize: (state) => ({
+          themeMode: state.themeMode
+        })
+        // Só persiste o themeMode, não o isDark
       }
+    ),
+    {
+      name: "theme-store"
     }
-  }, []);
-  const toggleTheme = (0, import_react11.useCallback)(() => {
-    let newMode;
-    if (themeMode === "light") {
-      newMode = "dark";
-    } else if (themeMode === "dark") {
-      newMode = "light";
-    } else {
-      newMode = "dark";
-    }
-    setThemeMode(newMode);
-    themeModeRef.current = newMode;
-    applyTheme(newMode);
-    localStorage.setItem("theme-mode", newMode);
-  }, [themeMode, applyTheme]);
-  const setTheme = (0, import_react11.useCallback)(
-    (mode) => {
-      setThemeMode(mode);
-      themeModeRef.current = mode;
-      applyTheme(mode);
-      localStorage.setItem("theme-mode", mode);
-    },
-    [applyTheme]
-  );
+  )
+);
+
+// src/hooks/useTheme.ts
+var useTheme = () => {
+  const {
+    themeMode,
+    isDark,
+    toggleTheme,
+    setTheme,
+    initializeTheme,
+    handleSystemThemeChange
+  } = useThemeStore();
   (0, import_react11.useEffect)(() => {
-    const htmlElement = document.documentElement;
-    const currentTheme = htmlElement.getAttribute("data-theme");
-    if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
-      htmlElement.setAttribute("data-original-theme", currentTheme);
-    }
-    const savedThemeMode = localStorage.getItem("theme-mode");
-    const initialMode = savedThemeMode || "system";
-    if (!savedThemeMode) {
-      localStorage.setItem("theme-mode", "system");
-    }
-    setThemeMode(initialMode);
-    themeModeRef.current = initialMode;
-    applyTheme(initialMode);
+    initializeTheme();
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleSystemThemeChange = () => {
-      if (themeModeRef.current === "system") {
-        applyTheme("system");
-      }
-    };
     mediaQuery.addEventListener("change", handleSystemThemeChange);
     return () => {
       mediaQuery.removeEventListener("change", handleSystemThemeChange);
     };
-  }, [applyTheme]);
+  }, [initializeTheme, handleSystemThemeChange]);
   return {
     themeMode,
     isDark,
@@ -2315,7 +2351,7 @@ var ThemeToggle = ({
 // src/components/DropdownMenu/DropdownMenu.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function createDropdownStore() {
-  return (0, import_zustand4.create)((set) => ({
+  return (0, import_zustand5.create)((set) => ({
     open: false,
     setOpen: (open) => set({ open })
   }));
@@ -2351,7 +2387,7 @@ var DropdownMenu = ({
   const storeRef = (0, import_react13.useRef)(null);
   storeRef.current ??= createDropdownStore();
   const store = storeRef.current;
-  const { open, setOpen: storeSetOpen } = (0, import_zustand4.useStore)(store, (s) => s);
+  const { open, setOpen: storeSetOpen } = (0, import_zustand5.useStore)(store, (s) => s);
   const setOpen = (newOpen) => {
     storeSetOpen(newOpen);
   };
@@ -2418,7 +2454,7 @@ var DropdownMenuTrigger = ({
   ...props
 }) => {
   const store = useDropdownStore(externalStore);
-  const open = (0, import_zustand4.useStore)(store, (s) => s.open);
+  const open = (0, import_zustand5.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "button",
@@ -2478,7 +2514,7 @@ var DropdownMenuContent = (0, import_react13.forwardRef)(
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
-    const open = (0, import_zustand4.useStore)(store, (s) => s.open);
+    const open = (0, import_zustand5.useStore)(store, (s) => s.open);
     const [isVisible, setIsVisible] = (0, import_react13.useState)(open);
     (0, import_react13.useEffect)(() => {
       if (open) {
@@ -2534,7 +2570,7 @@ var DropdownMenuItem = (0, import_react13.forwardRef)(
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
-    const setOpen = (0, import_zustand4.useStore)(store, (s) => s.setOpen);
+    const setOpen = (0, import_zustand5.useStore)(store, (s) => s.setOpen);
     const sizeClasses = ITEM_SIZE_CLASSES[size];
     const handleClick = (e) => {
       if (disabled) {
@@ -2595,7 +2631,7 @@ var DropdownMenuSeparator = (0, import_react13.forwardRef)(({ className, store:
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var ProfileMenuTrigger = (0, import_react13.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
-  const open = (0, import_zustand4.useStore)(store, (s) => s.open);
+  const open = (0, import_zustand5.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "button",
@@ -2728,7 +2764,7 @@ var ProfileMenuFooter = ({
   ...props
 }) => {
   const store = useDropdownStore(externalStore);
-  const setOpen = (0, import_zustand4.useStore)(store, (s) => s.setOpen);
+  const setOpen = (0, import_zustand5.useStore)(store, (s) => s.setOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     Button_default,
     {
@@ -3962,7 +3998,7 @@ var MonthYearPicker = ({
   "div",
   {
     ref: monthPickerRef,
-    className: "absolute top-full left-0 z-50 mt-1 bg-white rounded-lg shadow-lg border border-border-200 p-4 min-w-[280px]",
+    className: "absolute top-full left-0 z-50 mt-1 bg-background rounded-lg shadow-lg border border-border-200 p-4 min-w-[280px]",
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar Ano" }),
@@ -4648,8 +4684,8 @@ var ACTION_CARD_CLASSES = {
 };
 var ACTION_ICON_CLASSES = {
   warning: "bg-warning-300 text-text",
-  success: "bg-yellow-300 text-text-950",
-  error: "bg-error-500 text-text",
+  success: "bg-indicator-positive text-text-950",
+  error: "bg-indicator-negative text-text",
   info: "bg-info-500 text-text"
 };
 var ACTION_SUBTITLE_CLASSES = {
@@ -5789,7 +5825,7 @@ var CardSimulationHistory = (0, import_react17.forwardRef)(({ data, onSimulation
           "div",
           {
             className: cn(
-              "flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-white",
+              "flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-background",
               sectionIndex === 0 ? "rounded-t-3xl" : ""
             ),
             children: [
@@ -6705,7 +6741,7 @@ var useMobile = () => {
 };
 
 // src/components/Select/Select.tsx
-var import_zustand5 = require("zustand");
+var import_zustand6 = require("zustand");
 var import_react23 = require("react");
 var import_phosphor_react18 = require("phosphor-react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -6744,7 +6780,7 @@ var ALIGN_CLASSES2 = {
   end: "right-0"
 };
 function createSelectStore(onValueChange) {
-  return (0, import_zustand5.create)((set) => ({
+  return (0, import_zustand6.create)((set) => ({
     open: false,
     setOpen: (open) => set({ open }),
     value: "",
@@ -6810,7 +6846,7 @@ var Select = ({
   storeRef.current ??= createSelectStore(onValueChange);
   const store = storeRef.current;
   const selectRef = (0, import_react23.useRef)(null);
-  const { open, setOpen, setValue, selectedLabel } = (0, import_zustand5.useStore)(store, (s) => s);
+  const { open, setOpen, setValue, selectedLabel } = (0, import_zustand6.useStore)(store, (s) => s);
   const generatedId = (0, import_react23.useId)();
   const selectId = id ?? `select-${generatedId}`;
   const findLabelForValue = (children2, targetValue) => {
@@ -6904,8 +6940,8 @@ var SelectValue = ({
   store: externalStore
 }) => {
   const store = useSelectStore(externalStore);
-  const selectedLabel = (0, import_zustand5.useStore)(store, (s) => s.selectedLabel);
-  const value = (0, import_zustand5.useStore)(store, (s) => s.value);
+  const selectedLabel = (0, import_zustand6.useStore)(store, (s) => s.selectedLabel);
+  const value = (0, import_zustand6.useStore)(store, (s) => s.value);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-inherit flex gap-2 items-center", children: selectedLabel || placeholder || value });
 };
 var SelectTrigger = (0, import_react23.forwardRef)(
@@ -6920,7 +6956,7 @@ var SelectTrigger = (0, import_react23.forwardRef)(
     ...props
   }, ref) => {
     const store = useSelectStore(externalStore);
-    const open = (0, import_zustand5.useStore)(store, (s) => s.open);
+    const open = (0, import_zustand6.useStore)(store, (s) => s.open);
     const toggleOpen = () => store.setState({ open: !open });
     const variantClasses = VARIANT_CLASSES4[variant];
     const heightClasses = HEIGHT_CLASSES[size];
@@ -6972,7 +7008,7 @@ var SelectContent = (0, import_react23.forwardRef)(
     ...props
   }, ref) => {
     const store = useSelectStore(externalStore);
-    const open = (0, import_zustand5.useStore)(store, (s) => s.open);
+    const open = (0, import_zustand6.useStore)(store, (s) => s.open);
     if (!open) return null;
     const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -7008,7 +7044,7 @@ var SelectItem = (0, import_react23.forwardRef)(
       setOpen,
       setSelectedLabel,
       onValueChange
-    } = (0, import_zustand5.useStore)(store, (s) => s);
+    } = (0, import_zustand6.useStore)(store, (s) => s);
     const handleClick = (e) => {
       const labelNode = getLabelAsNode(children);
       if (!disabled) {
@@ -7050,11 +7086,11 @@ SelectItem.displayName = "SelectItem";
 var Select_default = Select;
 
 // src/components/Menu/Menu.tsx
-var import_zustand6 = require("zustand");
+var import_zustand7 = require("zustand");
 var import_react24 = require("react");
 var import_phosphor_react19 = require("phosphor-react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var createMenuStore = (onValueChange) => (0, import_zustand6.create)((set) => ({
+var createMenuStore = (onValueChange) => (0, import_zustand7.create)((set) => ({
   value: "",
   setValue: (value) => {
     set({ value });
@@ -7085,7 +7121,7 @@ var Menu = (0, import_react24.forwardRef)(
     const storeRef = (0, import_react24.useRef)(null);
     storeRef.current ??= createMenuStore(onValueChange);
     const store = storeRef.current;
-    const { setValue } = (0, import_zustand6.useStore)(store, (s) => s);
+    const { setValue } = (0, import_zustand7.useStore)(store, (s) => s);
     (0, import_react24.useEffect)(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
@@ -7141,7 +7177,7 @@ var MenuItem = (0, import_react24.forwardRef)(
     ...props
   }, ref) => {
     const store = useMenuStore(externalStore);
-    const { value: selectedValue, setValue } = (0, import_zustand6.useStore)(store, (s) => s);
+    const { value: selectedValue, setValue } = (0, import_zustand7.useStore)(store, (s) => s);
     const handleClick = (e) => {
       if (!disabled) {
         setValue(value);
@@ -8358,7 +8394,7 @@ var Whiteboard = ({
       "div",
       {
         className: cn(
-          "flex items-center justify-center p-8 bg-white border border-gray-100 rounded-xl",
+          "flex items-center justify-center p-8 bg-background border border-gray-100 rounded-xl",
           className
         ),
         ...rest,
@@ -8782,8 +8818,8 @@ var import_phosphor_react23 = require("phosphor-react");
 var import_react32 = require("react");
 
 // src/components/Quiz/useQuizStore.ts
-var import_zustand7 = require("zustand");
-var import_middleware = require("zustand/middleware");
+var import_zustand8 = require("zustand");
+var import_middleware2 = require("zustand/middleware");
 var QUESTION_DIFFICULTY = /* @__PURE__ */ ((QUESTION_DIFFICULTY2) => {
   QUESTION_DIFFICULTY2["FACIL"] = "FACIL";
   QUESTION_DIFFICULTY2["MEDIO"] = "MEDIO";
@@ -8830,8 +8866,8 @@ var SUBTYPE_ENUM = /* @__PURE__ */ ((SUBTYPE_ENUM2) => {
   return SUBTYPE_ENUM2;
 })(SUBTYPE_ENUM || {});
 var MINUTE_INTERVAL_MS = 6e4;
-var useQuizStore = (0, import_zustand7.create)()(
-  (0, import_middleware.devtools)(
+var useQuizStore = (0, import_zustand8.create)()(
+  (0, import_middleware2.devtools)(
     (set, get) => {
       let timerInterval = null;
       let minuteCallbackInterval = null;
@@ -9893,7 +9929,7 @@ var QuizFill = ({ paddingBottom }) => {
         onValueChange: (value) => handleSelectChange(selectId, value),
         className: "inline-flex mb-2.5",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectTrigger, { className: "inline-flex w-auto min-w-[140px] h-8 mx-1 bg-white border-gray-300", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectTrigger, { className: "inline-flex w-auto min-w-[140px] h-8 mx-1 bg-background border-gray-300", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectContent, { children: availableOptionsForThisSelect.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectItem, { value: option, children: option }, `${option}-${index}`)) })
         ]
       },
@@ -11112,8 +11148,8 @@ var import_phosphor_react25 = require("phosphor-react");
 var import_react35 = require("react");
 
 // src/store/notificationStore.ts
-var import_zustand8 = require("zustand");
-var import_middleware2 = require("zustand/middleware");
+var import_zustand9 = require("zustand");
+var import_middleware3 = require("zustand/middleware");
 
 // src/types/notifications.ts
 var NotificationEntityType = /* @__PURE__ */ ((NotificationEntityType2) => {
@@ -11221,8 +11257,8 @@ var formatTimeAgo = (date) => {
   return new Date(date).toLocaleDateString("pt-BR");
 };
 var createNotificationStore = (apiClient) => {
-  return (0, import_zustand8.create)()(
-    (0, import_middleware2.devtools)(
+  return (0, import_zustand9.create)()(
+    (0, import_middleware3.devtools)(
       (set, get) => ({
         // Initial state
         notifications: [],
@@ -12098,6 +12134,7 @@ var createNotificationsHook = (apiClient) => {
   useQuizStore,
   useRouteAuth,
   useTheme,
+  useThemeStore,
   useToastStore,
   useUrlAuthentication,
   withAuth