analytica-frontend-lib 1.1.49 → 1.1.50

package/dist/hooks/useTheme/index.js

@@ -25,25 +25,87 @@ __export(useTheme_exports, {
 module.exports = __toCommonJS(useTheme_exports);
 var import_react = require("react");
 var useTheme = () => {
-  (0, import_react.useEffect)(() => {
+  const [themeMode, setThemeMode] = (0, import_react.useState)("system");
+  const [isDark, setIsDark] = (0, import_react.useState)(false);
+  const themeModeRef = (0, import_react.useRef)("system");
+  const applyTheme = (0, import_react.useCallback)((mode) => {
     const htmlElement = document.documentElement;
-    const currentTheme = htmlElement.getAttribute("data-theme");
-    if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
-      htmlElement.setAttribute("data-original-theme", currentTheme);
-    }
-    const applyTheme = () => {
-      const isDarkMode = window.matchMedia(
+    const originalTheme = htmlElement.getAttribute("data-original-theme");
+    if (mode === "dark") {
+      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;
-      const originalTheme = htmlElement.getAttribute("data-original-theme");
-      if (isDarkMode) {
+      if (isSystemDark) {
         htmlElement.setAttribute("data-theme", "dark");
+        setIsDark(true);
       } else if (originalTheme) {
         htmlElement.setAttribute("data-theme", originalTheme);
+        setIsDark(false);
       }
-    };
-    applyTheme();
+    }
   }, []);
+  const toggleTheme = (0, import_react.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_react.useCallback)(
+    (mode) => {
+      setThemeMode(mode);
+      themeModeRef.current = mode;
+      applyTheme(mode);
+      localStorage.setItem("theme-mode", mode);
+    },
+    [applyTheme]
+  );
+  (0, import_react.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);
+    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]);
+  return {
+    themeMode,
+    isDark,
+    toggleTheme,
+    setTheme
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/hooks/useTheme/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Hook para detectar preferências do sistema e aplicar dark mode automaticamente\n * Este hook aplica o theme baseado nas preferências do sistema (prefers-color-scheme)\n * na inicialização do componente.\n */\nexport const useTheme = () => {\n  useEffect(() => {\n    const htmlElement = document.documentElement;\n\n    // Salva o theme original do white label na primeira execução\n    const currentTheme = htmlElement.getAttribute('data-theme');\n    if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n      htmlElement.setAttribute('data-original-theme', currentTheme);\n    }\n\n    // Função para aplicar o theme baseado nas preferências do sistema\n    const applyTheme = () => {\n      const isDarkMode = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches;\n      const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n      if (isDarkMode) {\n        // Aplica o theme dark\n        htmlElement.setAttribute('data-theme', 'dark');\n      } else if (originalTheme) {\n        // Restaura o theme light do white label\n        htmlElement.setAttribute('data-theme', originalTheme);\n      }\n    };\n\n    // Aplica o theme inicial\n    applyTheme();\n  }, []);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAOnB,IAAM,WAAW,MAAM;AAC5B,8BAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAG7B,UAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,QAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,kBAAY,aAAa,uBAAuB,YAAY;AAAA,IAC9D;AAGA,UAAM,aAAa,MAAM;AACvB,YAAM,aAAa,OAAO;AAAA,QACxB;AAAA,MACF,EAAE;AACF,YAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,UAAI,YAAY;AAEd,oBAAY,aAAa,cAAc,MAAM;AAAA,MAC/C,WAAW,eAAe;AAExB,oBAAY,aAAa,cAAc,aAAa;AAAA,MACtD;AAAA,IACF;AAGA,eAAW;AAAA,EACb,GAAG,CAAC,CAAC;AACP;","names":[]}
+{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react';\n\ntype ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n */\nexport const useTheme = () => {\n  const [themeMode, setThemeMode] = useState<ThemeMode>('system');\n  const [isDark, setIsDark] = useState(false);\n\n  // Ref para manter o estado atual do tema de forma síncrona\n  const themeModeRef = useRef<ThemeMode>('system');\n\n  // Função para aplicar o tema baseado no modo selecionado\n  const applyTheme = useCallback((mode: ThemeMode) => {\n    const htmlElement = document.documentElement;\n    const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n    if (mode === 'dark') {\n      htmlElement.setAttribute('data-theme', 'dark');\n      setIsDark(true);\n    } else if (mode === 'light') {\n      if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n      }\n      setIsDark(false);\n    } else if (mode === 'system') {\n      const isSystemDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches;\n      if (isSystemDark) {\n        htmlElement.setAttribute('data-theme', 'dark');\n        setIsDark(true);\n      } else if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n        setIsDark(false);\n      }\n    }\n  }, []);\n\n  // Função para alternar entre os temas\n  const toggleTheme = useCallback(() => {\n    let newMode: ThemeMode;\n    if (themeMode === 'light') {\n      newMode = 'dark';\n    } else if (themeMode === 'dark') {\n      newMode = 'light';\n    } else {\n      // Se estiver em 'system', vai para 'dark'\n      newMode = 'dark';\n    }\n    setThemeMode(newMode);\n    themeModeRef.current = newMode;\n    applyTheme(newMode);\n    localStorage.setItem('theme-mode', newMode);\n  }, [themeMode, applyTheme]);\n\n  // Função para definir um tema específico\n  const setTheme = useCallback(\n    (mode: ThemeMode) => {\n      setThemeMode(mode);\n      themeModeRef.current = mode;\n      applyTheme(mode);\n      localStorage.setItem('theme-mode', mode);\n    },\n    [applyTheme]\n  );\n\n  useEffect(() => {\n    const htmlElement = document.documentElement;\n\n    // Salva o theme original do white label na primeira execução\n    const currentTheme = htmlElement.getAttribute('data-theme');\n    if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n      htmlElement.setAttribute('data-original-theme', currentTheme);\n    }\n\n    // Carrega o tema salvo no localStorage ou usa 'system' como padrão\n    const savedThemeMode = localStorage.getItem('theme-mode') as ThemeMode;\n    const initialMode = savedThemeMode || 'system';\n\n    // Se não há tema salvo, persiste 'system' como padrão\n    if (!savedThemeMode) {\n      localStorage.setItem('theme-mode', 'system');\n    }\n\n    setThemeMode(initialMode);\n    themeModeRef.current = initialMode;\n    applyTheme(initialMode);\n\n    // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleSystemThemeChange = () => {\n      // Usa o ref para ter acesso ao estado atual de forma síncrona\n      if (themeModeRef.current === 'system') {\n        applyTheme('system');\n      }\n    };\n\n    mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleSystemThemeChange);\n    };\n  }, [applyTheme]);\n\n  return {\n    themeMode,\n    isDark,\n    toggleTheme,\n    setTheme,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyD;AAQlD,IAAM,WAAW,MAAM;AAC5B,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAoB,QAAQ;AAC9D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAG1C,QAAM,mBAAe,qBAAkB,QAAQ;AAG/C,QAAM,iBAAa,0BAAY,CAAC,SAAoB;AAClD,UAAM,cAAc,SAAS;AAC7B,UAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,QAAI,SAAS,QAAQ;AACnB,kBAAY,aAAa,cAAc,MAAM;AAC7C,gBAAU,IAAI;AAAA,IAChB,WAAW,SAAS,SAAS;AAC3B,UAAI,eAAe;AACjB,oBAAY,aAAa,cAAc,aAAa;AAAA,MACtD;AACA,gBAAU,KAAK;AAAA,IACjB,WAAW,SAAS,UAAU;AAC5B,YAAM,eAAe,OAAO;AAAA,QAC1B;AAAA,MACF,EAAE;AACF,UAAI,cAAc;AAChB,oBAAY,aAAa,cAAc,MAAM;AAC7C,kBAAU,IAAI;AAAA,MAChB,WAAW,eAAe;AACxB,oBAAY,aAAa,cAAc,aAAa;AACpD,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI;AACJ,QAAI,cAAc,SAAS;AACzB,gBAAU;AAAA,IACZ,WAAW,cAAc,QAAQ;AAC/B,gBAAU;AAAA,IACZ,OAAO;AAEL,gBAAU;AAAA,IACZ;AACA,iBAAa,OAAO;AACpB,iBAAa,UAAU;AACvB,eAAW,OAAO;AAClB,iBAAa,QAAQ,cAAc,OAAO;AAAA,EAC5C,GAAG,CAAC,WAAW,UAAU,CAAC;AAG1B,QAAM,eAAW;AAAA,IACf,CAAC,SAAoB;AACnB,mBAAa,IAAI;AACjB,mBAAa,UAAU;AACvB,iBAAW,IAAI;AACf,mBAAa,QAAQ,cAAc,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,8BAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAG7B,UAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,QAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,kBAAY,aAAa,uBAAuB,YAAY;AAAA,IAC9D;AAGA,UAAM,iBAAiB,aAAa,QAAQ,YAAY;AACxD,UAAM,cAAc,kBAAkB;AAGtC,QAAI,CAAC,gBAAgB;AACnB,mBAAa,QAAQ,cAAc,QAAQ;AAAA,IAC7C;AAEA,iBAAa,WAAW;AACxB,iBAAa,UAAU;AACvB,eAAW,WAAW;AAGtB,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,0BAA0B,MAAM;AAEpC,UAAI,aAAa,YAAY,UAAU;AACrC,mBAAW,QAAQ;AAAA,MACrB;AAAA,IACF;AAEA,eAAW,iBAAiB,UAAU,uBAAuB;AAE7D,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,uBAAuB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/hooks/useTheme/index.mjs

@@ -1,25 +1,87 @@
 // src/hooks/useTheme.ts
-import { useEffect } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 var useTheme = () => {
-  useEffect(() => {
+  const [themeMode, setThemeMode] = useState("system");
+  const [isDark, setIsDark] = useState(false);
+  const themeModeRef = useRef("system");
+  const applyTheme = useCallback((mode) => {
     const htmlElement = document.documentElement;
-    const currentTheme = htmlElement.getAttribute("data-theme");
-    if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
-      htmlElement.setAttribute("data-original-theme", currentTheme);
-    }
-    const applyTheme = () => {
-      const isDarkMode = window.matchMedia(
+    const originalTheme = htmlElement.getAttribute("data-original-theme");
+    if (mode === "dark") {
+      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;
-      const originalTheme = htmlElement.getAttribute("data-original-theme");
-      if (isDarkMode) {
+      if (isSystemDark) {
         htmlElement.setAttribute("data-theme", "dark");
+        setIsDark(true);
       } else if (originalTheme) {
         htmlElement.setAttribute("data-theme", originalTheme);
+        setIsDark(false);
       }
-    };
-    applyTheme();
+    }
   }, []);
+  const toggleTheme = 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 = useCallback(
+    (mode) => {
+      setThemeMode(mode);
+      themeModeRef.current = mode;
+      applyTheme(mode);
+      localStorage.setItem("theme-mode", mode);
+    },
+    [applyTheme]
+  );
+  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);
+    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]);
+  return {
+    themeMode,
+    isDark,
+    toggleTheme,
+    setTheme
+  };
 };
 export {
   useTheme

package/dist/hooks/useTheme/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Hook para detectar preferências do sistema e aplicar dark mode automaticamente\n * Este hook aplica o theme baseado nas preferências do sistema (prefers-color-scheme)\n * na inicialização do componente.\n */\nexport const useTheme = () => {\n  useEffect(() => {\n    const htmlElement = document.documentElement;\n\n    // Salva o theme original do white label na primeira execução\n    const currentTheme = htmlElement.getAttribute('data-theme');\n    if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n      htmlElement.setAttribute('data-original-theme', currentTheme);\n    }\n\n    // Função para aplicar o theme baseado nas preferências do sistema\n    const applyTheme = () => {\n      const isDarkMode = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches;\n      const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n      if (isDarkMode) {\n        // Aplica o theme dark\n        htmlElement.setAttribute('data-theme', 'dark');\n      } else if (originalTheme) {\n        // Restaura o theme light do white label\n        htmlElement.setAttribute('data-theme', originalTheme);\n      }\n    };\n\n    // Aplica o theme inicial\n    applyTheme();\n  }, []);\n};\n"],"mappings":";AAAA,SAAS,iBAAiB;AAOnB,IAAM,WAAW,MAAM;AAC5B,YAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAG7B,UAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,QAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,kBAAY,aAAa,uBAAuB,YAAY;AAAA,IAC9D;AAGA,UAAM,aAAa,MAAM;AACvB,YAAM,aAAa,OAAO;AAAA,QACxB;AAAA,MACF,EAAE;AACF,YAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,UAAI,YAAY;AAEd,oBAAY,aAAa,cAAc,MAAM;AAAA,MAC/C,WAAW,eAAe;AAExB,oBAAY,aAAa,cAAc,aAAa;AAAA,MACtD;AAAA,IACF;AAGA,eAAW;AAAA,EACb,GAAG,CAAC,CAAC;AACP;","names":[]}
+{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react';\n\ntype ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n */\nexport const useTheme = () => {\n  const [themeMode, setThemeMode] = useState<ThemeMode>('system');\n  const [isDark, setIsDark] = useState(false);\n\n  // Ref para manter o estado atual do tema de forma síncrona\n  const themeModeRef = useRef<ThemeMode>('system');\n\n  // Função para aplicar o tema baseado no modo selecionado\n  const applyTheme = useCallback((mode: ThemeMode) => {\n    const htmlElement = document.documentElement;\n    const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n    if (mode === 'dark') {\n      htmlElement.setAttribute('data-theme', 'dark');\n      setIsDark(true);\n    } else if (mode === 'light') {\n      if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n      }\n      setIsDark(false);\n    } else if (mode === 'system') {\n      const isSystemDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches;\n      if (isSystemDark) {\n        htmlElement.setAttribute('data-theme', 'dark');\n        setIsDark(true);\n      } else if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n        setIsDark(false);\n      }\n    }\n  }, []);\n\n  // Função para alternar entre os temas\n  const toggleTheme = useCallback(() => {\n    let newMode: ThemeMode;\n    if (themeMode === 'light') {\n      newMode = 'dark';\n    } else if (themeMode === 'dark') {\n      newMode = 'light';\n    } else {\n      // Se estiver em 'system', vai para 'dark'\n      newMode = 'dark';\n    }\n    setThemeMode(newMode);\n    themeModeRef.current = newMode;\n    applyTheme(newMode);\n    localStorage.setItem('theme-mode', newMode);\n  }, [themeMode, applyTheme]);\n\n  // Função para definir um tema específico\n  const setTheme = useCallback(\n    (mode: ThemeMode) => {\n      setThemeMode(mode);\n      themeModeRef.current = mode;\n      applyTheme(mode);\n      localStorage.setItem('theme-mode', mode);\n    },\n    [applyTheme]\n  );\n\n  useEffect(() => {\n    const htmlElement = document.documentElement;\n\n    // Salva o theme original do white label na primeira execução\n    const currentTheme = htmlElement.getAttribute('data-theme');\n    if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n      htmlElement.setAttribute('data-original-theme', currentTheme);\n    }\n\n    // Carrega o tema salvo no localStorage ou usa 'system' como padrão\n    const savedThemeMode = localStorage.getItem('theme-mode') as ThemeMode;\n    const initialMode = savedThemeMode || 'system';\n\n    // Se não há tema salvo, persiste 'system' como padrão\n    if (!savedThemeMode) {\n      localStorage.setItem('theme-mode', 'system');\n    }\n\n    setThemeMode(initialMode);\n    themeModeRef.current = initialMode;\n    applyTheme(initialMode);\n\n    // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleSystemThemeChange = () => {\n      // Usa o ref para ter acesso ao estado atual de forma síncrona\n      if (themeModeRef.current === 'system') {\n        applyTheme('system');\n      }\n    };\n\n    mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleSystemThemeChange);\n    };\n  }, [applyTheme]);\n\n  return {\n    themeMode,\n    isDark,\n    toggleTheme,\n    setTheme,\n  };\n};\n"],"mappings":";AAAA,SAAS,WAAW,UAAU,aAAa,cAAc;AAQlD,IAAM,WAAW,MAAM;AAC5B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB,QAAQ;AAC9D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAG1C,QAAM,eAAe,OAAkB,QAAQ;AAG/C,QAAM,aAAa,YAAY,CAAC,SAAoB;AAClD,UAAM,cAAc,SAAS;AAC7B,UAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,QAAI,SAAS,QAAQ;AACnB,kBAAY,aAAa,cAAc,MAAM;AAC7C,gBAAU,IAAI;AAAA,IAChB,WAAW,SAAS,SAAS;AAC3B,UAAI,eAAe;AACjB,oBAAY,aAAa,cAAc,aAAa;AAAA,MACtD;AACA,gBAAU,KAAK;AAAA,IACjB,WAAW,SAAS,UAAU;AAC5B,YAAM,eAAe,OAAO;AAAA,QAC1B;AAAA,MACF,EAAE;AACF,UAAI,cAAc;AAChB,oBAAY,aAAa,cAAc,MAAM;AAC7C,kBAAU,IAAI;AAAA,MAChB,WAAW,eAAe;AACxB,oBAAY,aAAa,cAAc,aAAa;AACpD,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AACJ,QAAI,cAAc,SAAS;AACzB,gBAAU;AAAA,IACZ,WAAW,cAAc,QAAQ;AAC/B,gBAAU;AAAA,IACZ,OAAO;AAEL,gBAAU;AAAA,IACZ;AACA,iBAAa,OAAO;AACpB,iBAAa,UAAU;AACvB,eAAW,OAAO;AAClB,iBAAa,QAAQ,cAAc,OAAO;AAAA,EAC5C,GAAG,CAAC,WAAW,UAAU,CAAC;AAG1B,QAAM,WAAW;AAAA,IACf,CAAC,SAAoB;AACnB,mBAAa,IAAI;AACjB,mBAAa,UAAU;AACvB,iBAAW,IAAI;AACf,mBAAa,QAAQ,cAAc,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAG7B,UAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,QAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,kBAAY,aAAa,uBAAuB,YAAY;AAAA,IAC9D;AAGA,UAAM,iBAAiB,aAAa,QAAQ,YAAY;AACxD,UAAM,cAAc,kBAAkB;AAGtC,QAAI,CAAC,gBAAgB;AACnB,mBAAa,QAAQ,cAAc,QAAQ;AAAA,IAC7C;AAEA,iBAAa,WAAW;AACxB,iBAAa,UAAU;AACvB,eAAW,WAAW;AAGtB,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,0BAA0B,MAAM;AAEpC,UAAI,aAAa,YAAY,UAAU;AACrC,mBAAW,QAAQ;AAAA,MACrB;AAAA,IACF;AAEA,eAAW,iBAAiB,UAAU,uBAAuB;AAE7D,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,uBAAuB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/index.css

@@ -2767,6 +2767,9 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -4916,6 +4919,13 @@
       }
     }
   }
+  .hover\:bg-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-300);
+      }
+    }
+  }
   .hover\:bg-green-600 {
     &:hover {
       @media (hover: hover) {
@@ -8117,6 +8127,11 @@
       --tw-ring-color: var(--color-indicator-info);
     }
   }
+  .focus-visible\:ring-primary-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-primary-500);
+    }
+  }
   .focus-visible\:ring-primary-600 {
     &:focus-visible {
       --tw-ring-color: var(--color-primary-600);
@@ -18253,6 +18268,30 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .dark\:border-gray-600 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-gray-600);
+    }
+  }
+  .dark\:bg-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-700);
+    }
+  }
+  .dark\:text-gray-300 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-300);
+    }
+  }
+  .dark\:hover\:bg-gray-600 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-600);
+        }
+      }
+    }
+  }
   .\[\&_tr\:first-child\]\:border-0 {
     & tr:first-child {
       border-style: var(--tw-border-style);