@embedreach/components 0.1.30 → 0.1.32

package/dist/index.umd.js

@@ -8001,192 +8001,6 @@
     },
     authListeners
   );
-  const normalizeColor = (color2) => {
-    const div = document.createElement("div");
-    div.style.color = color2;
-    document.body.appendChild(div);
-    const computed = window.getComputedStyle(div).color;
-    document.body.removeChild(div);
-    return computed;
-  };
-  const isValidColor = (color2) => {
-    if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
-      return true;
-    }
-    const div = document.createElement("div");
-    const prevColor = div.style.color;
-    div.style.color = color2;
-    return div.style.color !== prevColor;
-  };
-  const rgbToShadcnHsl = (r2, g2, b2) => {
-    r2 /= 255;
-    g2 /= 255;
-    b2 /= 255;
-    const max2 = Math.max(r2, g2, b2);
-    const min2 = Math.min(r2, g2, b2);
-    let h2 = 0, s2 = 0;
-    const l2 = (max2 + min2) / 2;
-    if (max2 !== min2) {
-      const d2 = max2 - min2;
-      s2 = l2 > 0.5 ? d2 / (2 - max2 - min2) : d2 / (max2 + min2);
-      switch (max2) {
-        case r2:
-          h2 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
-          break;
-        case g2:
-          h2 = (b2 - r2) / d2 + 2;
-          break;
-        case b2:
-          h2 = (r2 - g2) / d2 + 4;
-          break;
-      }
-      h2 *= 60;
-    }
-    return `${Math.round(h2)} ${Math.round(s2 * 100)}% ${Math.round(l2 * 100)}%`;
-  };
-  const extractRgb = (rgbColor) => {
-    const matches = rgbColor.match(/\d+/g);
-    if (!matches || matches.length < 3) {
-      throw new Error(`Invalid RGB color format: ${rgbColor}`);
-    }
-    return [
-      parseInt(matches[0], 10),
-      parseInt(matches[1], 10),
-      parseInt(matches[2], 10)
-    ];
-  };
-  const toShadcnFormat = (color2) => {
-    if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
-      return color2.trim();
-    }
-    try {
-      const rgbColor = normalizeColor(color2);
-      const [r2, g2, b2] = extractRgb(rgbColor);
-      return rgbToShadcnHsl(r2, g2, b2);
-    } catch (e2) {
-      console.warn(`Failed to convert color to shadcn format: ${color2}`, e2);
-      return color2;
-    }
-  };
-  const DEFAULT_THEME_STYLES = {
-    primary: "hsl(222.2 47.4% 11.2%)",
-    background: "hsl(0 0% 100%)",
-    foreground: "hsl(222.2 47.4% 11.2%)",
-    "primary-foreground": "hsl(210 40% 98%)",
-    secondary: "hsl(210 40% 96.1%)",
-    "secondary-foreground": "hsl(222.2 47.4% 11.2%)",
-    muted: "hsl(210 40% 96.1%)",
-    "muted-foreground": "hsl(215.4 16.3% 46.9%)",
-    accent: "hsl(210 40% 96.1%)",
-    "accent-foreground": "hsl(222.2 47.4% 11.2%)",
-    border: "hsl(214.3 31.8% 91.4%)",
-    input: "hsl(214.3 31.8% 91.4%)",
-    ring: "hsl(222.2 84% 4.9%)",
-    destructive: "hsl(0 84.2% 60.2%)",
-    "destructive-foreground": "hsl(210 40% 98%)",
-    card: "hsl(0 0% 100%)",
-    "card-foreground": "hsl(222.2 47.4% 11.2%)",
-    popover: "hsl(0 0% 100%)",
-    "popover-foreground": "hsl(222.2 47.4% 11.2%)",
-    "font-body": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    "font-heading": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-  };
-  const applyThemeStyles = (styles2) => {
-    const existingStyles = document.getElementById("reach-theme-styles");
-    if (existingStyles) {
-      existingStyles.remove();
-    }
-    const styleElement = document.createElement("style");
-    styleElement.id = "reach-theme-styles";
-    const cssText = `
-    [data-reach-root] {
-      ${Object.entries(DEFAULT_THEME_STYLES).map(([key, defaultValue]) => {
-      const userValue = styles2[key];
-      let finalValue = defaultValue;
-      if (userValue !== void 0) {
-        if (key === "radius" || key === "font-body" || key === "font-heading") {
-          finalValue = userValue;
-        } else if (isValidColor(userValue)) {
-          try {
-            finalValue = toShadcnFormat(userValue);
-          } catch (e2) {
-            console.warn(
-              `Failed to convert color for ${key}, using default`
-            );
-          }
-        }
-      }
-      return `--reach-${key}: ${finalValue};`;
-    }).join("\n")}
-    }
-
-    /* Apply font families directly */
-    [data-reach-root] {
-      font-family: var(--reach-font-body);
-    }
-    
-    [data-reach-root] h1,
-    [data-reach-root] h2,
-    [data-reach-root] h3,
-    [data-reach-root] h4,
-    [data-reach-root] h5,
-    [data-reach-root] h6 {
-      font-family: var(--reach-font-heading);
-    }
-  `;
-    styleElement.textContent = cssText;
-    document.head.appendChild(styleElement);
-  };
-  const mergeThemeStyles = (themeConfig, overrides) => {
-    return {
-      ...DEFAULT_THEME_STYLES,
-      ...themeConfig?.styles || {},
-      ...{}
-    };
-  };
-  const themeReducer = (state, action) => {
-    switch (action.type) {
-      case "set_theme":
-        if (action.payload && !state.theme) {
-          applyThemeStyles(action.payload.styles);
-        }
-        return {
-          ...state,
-          loading: false,
-          error: null,
-          theme: action.payload
-        };
-      case "set_loading":
-        return {
-          ...state,
-          loading: action.payload
-        };
-      case "set_error":
-        return {
-          ...state,
-          loading: false,
-          error: action.payload
-        };
-      default:
-        return state;
-    }
-  };
-  const setTheme = (dispatch2) => (theme2) => dispatch2({ type: "set_theme", payload: theme2 });
-  const setLoading = (dispatch2) => (loading2) => dispatch2({ type: "set_loading", payload: loading2 });
-  const setError = (dispatch2) => (error2) => dispatch2({ type: "set_error", payload: error2 });
-  const { Context, Provider: Provider$2 } = createDataContext(
-    themeReducer,
-    {
-      setTheme,
-      setLoading,
-      setError
-    },
-    {
-      theme: null,
-      loading: true,
-      error: null
-    }
-  );
   const warn = (...args) => {
     if (console?.warn) {
       if (isString$2(args[0])) args[0] = `react-i18next:: ${args[0]}`;
@@ -8422,6 +8236,359 @@
       value
     }, children2);
   }
+  const H3 = ({ children: children2 }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children: children2 });
+  };
+  const SpinLoader = ({
+    size: size3 = 35,
+    color: color2 = "black",
+    speed = 0.9,
+    strokeWidth = 3.5,
+    text,
+    textSpeed = 2e3,
+    // Default 2 seconds per text
+    textColor = "black"
+  }) => {
+    const [currentTextIndex, setCurrentTextIndex] = React.useState(0);
+    const textArray = Array.isArray(text) ? text : text ? [text] : [];
+    React.useEffect(() => {
+      if (textArray.length <= 1) return;
+      if (currentTextIndex >= textArray.length - 1) return;
+      const interval = setInterval(() => {
+        setCurrentTextIndex(
+          (current) => current < textArray.length - 1 ? current + 1 : current
+        );
+      }, textSpeed);
+      return () => clearInterval(interval);
+    }, [textArray.length, textSpeed, currentTextIndex]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "loader-container",
+          style: {
+            "--uib-size": `${size3}px`,
+            "--uib-color": color2,
+            "--uib-speed": `${speed}s`,
+            "--uib-stroke": `${strokeWidth}px`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" })
+          ]
+        }
+      ),
+      textArray.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `text-center text-sm text-muted-foreground animate-fade-in ${textColor ? `text-${textColor}` : ""}`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(H3, { children: textArray[currentTextIndex] })
+        },
+        currentTextIndex
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          .loader-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: var(--uib-size);
+            width: var(--uib-size);
+          }
+          .line {
+            position: absolute;
+            top: calc(50% - var(--uib-stroke) / 2);
+            left: 0;
+            height: var(--uib-stroke);
+            width: 100%;
+            border-radius: calc(var(--uib-stroke) / 2);
+            background-color: var(--uib-color);
+            animation: rotate var(--uib-speed) ease-in-out infinite;
+            transition: background-color 0.3s ease;
+          }
+          .line:nth-child(1) {
+            animation-delay: calc(var(--uib-speed) * -0.375);
+          }
+          .line:nth-child(2) {
+            animation-delay: calc(var(--uib-speed) * -0.375);
+            opacity: 0.8;
+          }
+          .line:nth-child(3) {
+            animation-delay: calc(var(--uib-speed) * -0.3);
+            opacity: 0.6;
+          }
+          .line:nth-child(4) {
+            animation-delay: calc(var(--uib-speed) * -0.225);
+            opacity: 0.4;
+          }
+          .line:nth-child(5) {
+            animation-delay: calc(var(--uib-speed) * -0.15);
+            opacity: 0.2;
+          }
+          .line:nth-child(6) {
+            animation-delay: calc(var(--uib-speed) * -0.075);
+            opacity: 0.1;
+          }
+          @keyframes rotate {
+            0% {
+              transform: rotate(0deg);
+            }
+            100% {
+              transform: rotate(180deg);
+            }
+          }
+          .animate-fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+          }
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+              transform: translateY(5px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+        ` })
+    ] }) });
+  };
+  const normalizeColor = (color2) => {
+    const div = document.createElement("div");
+    div.style.color = color2;
+    document.body.appendChild(div);
+    const computed = window.getComputedStyle(div).color;
+    document.body.removeChild(div);
+    return computed;
+  };
+  const isValidColor = (color2) => {
+    if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
+      return true;
+    }
+    const div = document.createElement("div");
+    const prevColor = div.style.color;
+    div.style.color = color2;
+    return div.style.color !== prevColor;
+  };
+  const rgbToShadcnHsl = (r2, g2, b2) => {
+    r2 /= 255;
+    g2 /= 255;
+    b2 /= 255;
+    const max2 = Math.max(r2, g2, b2);
+    const min2 = Math.min(r2, g2, b2);
+    let h2 = 0, s2 = 0;
+    const l2 = (max2 + min2) / 2;
+    if (max2 !== min2) {
+      const d2 = max2 - min2;
+      s2 = l2 > 0.5 ? d2 / (2 - max2 - min2) : d2 / (max2 + min2);
+      switch (max2) {
+        case r2:
+          h2 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
+          break;
+        case g2:
+          h2 = (b2 - r2) / d2 + 2;
+          break;
+        case b2:
+          h2 = (r2 - g2) / d2 + 4;
+          break;
+      }
+      h2 *= 60;
+    }
+    return `${Math.round(h2)} ${Math.round(s2 * 100)}% ${Math.round(l2 * 100)}%`;
+  };
+  const extractRgb = (rgbColor) => {
+    const matches = rgbColor.match(/\d+/g);
+    if (!matches || matches.length < 3) {
+      throw new Error(`Invalid RGB color format: ${rgbColor}`);
+    }
+    return [
+      parseInt(matches[0], 10),
+      parseInt(matches[1], 10),
+      parseInt(matches[2], 10)
+    ];
+  };
+  const toShadcnFormat = (color2) => {
+    if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
+      return color2.trim();
+    }
+    try {
+      const rgbColor = normalizeColor(color2);
+      const [r2, g2, b2] = extractRgb(rgbColor);
+      return rgbToShadcnHsl(r2, g2, b2);
+    } catch (e2) {
+      console.warn(`Failed to convert color to shadcn format: ${color2}`, e2);
+      return color2;
+    }
+  };
+  const DEFAULT_THEME_STYLES = {
+    primary: "hsl(222.2 47.4% 11.2%)",
+    background: "hsl(0 0% 100%)",
+    foreground: "hsl(222.2 47.4% 11.2%)",
+    "primary-foreground": "hsl(210 40% 98%)",
+    secondary: "hsl(210 40% 96.1%)",
+    "secondary-foreground": "hsl(222.2 47.4% 11.2%)",
+    muted: "hsl(210 40% 96.1%)",
+    "muted-foreground": "hsl(215.4 16.3% 46.9%)",
+    accent: "hsl(210 40% 96.1%)",
+    "accent-foreground": "hsl(222.2 47.4% 11.2%)",
+    border: "hsl(214.3 31.8% 91.4%)",
+    input: "hsl(214.3 31.8% 91.4%)",
+    ring: "hsl(222.2 84% 4.9%)",
+    destructive: "hsl(0 84.2% 60.2%)",
+    "destructive-foreground": "hsl(210 40% 98%)",
+    card: "hsl(0 0% 100%)",
+    "card-foreground": "hsl(222.2 47.4% 11.2%)",
+    popover: "hsl(0 0% 100%)",
+    "popover-foreground": "hsl(222.2 47.4% 11.2%)",
+    "font-body": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    "font-heading": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  };
+  const applyThemeStyles = (styles2) => {
+    const existingStyles = document.getElementById("reach-theme-styles");
+    if (existingStyles) {
+      existingStyles.remove();
+    }
+    const styleElement = document.createElement("style");
+    styleElement.id = "reach-theme-styles";
+    const cssText = `
+    [data-reach-root] {
+      ${Object.entries(DEFAULT_THEME_STYLES).map(([key, defaultValue]) => {
+      const userValue = styles2[key];
+      let finalValue = defaultValue;
+      if (userValue !== void 0) {
+        if (key === "radius" || key === "font-body" || key === "font-heading") {
+          finalValue = userValue;
+        } else if (isValidColor(userValue)) {
+          try {
+            finalValue = toShadcnFormat(userValue);
+          } catch (e2) {
+            console.warn(
+              `Failed to convert color for ${key}, using default`
+            );
+          }
+        }
+      }
+      return `--reach-${key}: ${finalValue};`;
+    }).join("\n")}
+    }
+
+    /* Apply font families directly */
+    [data-reach-root] {
+      font-family: var(--reach-font-body);
+    }
+    
+    [data-reach-root] h1,
+    [data-reach-root] h2,
+    [data-reach-root] h3,
+    [data-reach-root] h4,
+    [data-reach-root] h5,
+    [data-reach-root] h6 {
+      font-family: var(--reach-font-heading);
+    }
+  `;
+    styleElement.textContent = cssText;
+    document.head.appendChild(styleElement);
+  };
+  const mergeThemeStyles = (themeConfig, overrides) => {
+    return {
+      ...DEFAULT_THEME_STYLES,
+      ...themeConfig?.styles || {},
+      ...{}
+    };
+  };
+  const themeReducer = (state, action) => {
+    switch (action.type) {
+      case "set_theme":
+        if (action.payload && !state.theme) {
+          applyThemeStyles(action.payload.styles);
+        }
+        return {
+          ...state,
+          loading: false,
+          error: null,
+          theme: action.payload
+        };
+      case "set_loading":
+        return {
+          ...state,
+          loading: action.payload
+        };
+      case "set_error":
+        return {
+          ...state,
+          loading: false,
+          error: action.payload
+        };
+      default:
+        return state;
+    }
+  };
+  const setTheme = (dispatch2) => (theme2) => dispatch2({ type: "set_theme", payload: theme2 });
+  const setLoading = (dispatch2) => (loading2) => dispatch2({ type: "set_loading", payload: loading2 });
+  const setError = (dispatch2) => (error2) => dispatch2({ type: "set_error", payload: error2 });
+  const { Context, Provider: Provider$2 } = createDataContext(
+    themeReducer,
+    {
+      setTheme,
+      setLoading,
+      setError
+    },
+    {
+      theme: null,
+      loading: true,
+      error: null
+    }
+  );
+  const useThemeContext = () => {
+    const context = React.useContext(Context);
+    if (context === void 0) {
+      throw new Error("useThemeContext must be used within a ThemeProvider");
+    }
+    const applyTheme = (themeConfig) => {
+      if (!themeConfig) return;
+      const mergedStyles = mergeThemeStyles(themeConfig);
+      const finalTheme = {
+        styles: mergedStyles
+      };
+      context.setTheme(finalTheme);
+    };
+    return {
+      ...context.state,
+      setTheme: context.setTheme,
+      setLoading: context.setLoading,
+      setError: context.setError,
+      // Add the helper function
+      applyTheme
+    };
+  };
+  const InnerThemeProvider = ({
+    children: children2,
+    theme: theme2
+  }) => {
+    const { t: t2 } = useTranslation();
+    const { loading: themeLoading, applyTheme } = useThemeContext();
+    const themeApplied = React.useRef(false);
+    React.useEffect(() => {
+      if (!themeApplied.current && theme2) {
+        applyTheme(theme2);
+        themeApplied.current = true;
+      }
+    }, [applyTheme, theme2]);
+    if (themeLoading && theme2) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-center items-center h-screen", children: /* @__PURE__ */ jsxRuntime.jsx(SpinLoader, { text: [t2("loading")] }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children2 });
+  };
+  const ThemeProvider = ({
+    children: children2,
+    theme: theme2
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Provider$2, { children: /* @__PURE__ */ jsxRuntime.jsx(InnerThemeProvider, { theme: theme2, children: children2 }) });
+  };
   const isString$1 = (obj) => typeof obj === "string";
   const defer = () => {
     let res;
@@ -11894,167 +12061,6 @@
     }, [initialLanguage]);
     return /* @__PURE__ */ jsxRuntime.jsx(I18nextProvider, { i18n: instance, children: children2 });
   };
-  const useThemeContext = () => {
-    const context = React.useContext(Context);
-    if (context === void 0) {
-      throw new Error("useThemeContext must be used within a ThemeProvider");
-    }
-    const applyTheme = (themeConfig) => {
-      if (!themeConfig) return;
-      const mergedStyles = mergeThemeStyles(themeConfig);
-      const finalTheme = {
-        styles: mergedStyles
-      };
-      context.setTheme(finalTheme);
-    };
-    return {
-      ...context.state,
-      setTheme: context.setTheme,
-      setLoading: context.setLoading,
-      setError: context.setError,
-      // Add the helper function
-      applyTheme
-    };
-  };
-  const H3 = ({ children: children2 }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children: children2 });
-  };
-  const SpinLoader = ({
-    size: size3 = 35,
-    color: color2 = "black",
-    speed = 0.9,
-    strokeWidth = 3.5,
-    text,
-    textSpeed = 2e3,
-    // Default 2 seconds per text
-    textColor = "black"
-  }) => {
-    const [currentTextIndex, setCurrentTextIndex] = React.useState(0);
-    const textArray = Array.isArray(text) ? text : text ? [text] : [];
-    React.useEffect(() => {
-      if (textArray.length <= 1) return;
-      if (currentTextIndex >= textArray.length - 1) return;
-      const interval = setInterval(() => {
-        setCurrentTextIndex(
-          (current) => current < textArray.length - 1 ? current + 1 : current
-        );
-      }, textSpeed);
-      return () => clearInterval(interval);
-    }, [textArray.length, textSpeed, currentTextIndex]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "loader-container",
-          style: {
-            "--uib-size": `${size3}px`,
-            "--uib-color": color2,
-            "--uib-speed": `${speed}s`,
-            "--uib-stroke": `${strokeWidth}px`
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line" })
-          ]
-        }
-      ),
-      textArray.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `text-center text-sm text-muted-foreground animate-fade-in ${textColor ? `text-${textColor}` : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(H3, { children: textArray[currentTextIndex] })
-        },
-        currentTextIndex
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-          .loader-container {
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: var(--uib-size);
-            width: var(--uib-size);
-          }
-          .line {
-            position: absolute;
-            top: calc(50% - var(--uib-stroke) / 2);
-            left: 0;
-            height: var(--uib-stroke);
-            width: 100%;
-            border-radius: calc(var(--uib-stroke) / 2);
-            background-color: var(--uib-color);
-            animation: rotate var(--uib-speed) ease-in-out infinite;
-            transition: background-color 0.3s ease;
-          }
-          .line:nth-child(1) {
-            animation-delay: calc(var(--uib-speed) * -0.375);
-          }
-          .line:nth-child(2) {
-            animation-delay: calc(var(--uib-speed) * -0.375);
-            opacity: 0.8;
-          }
-          .line:nth-child(3) {
-            animation-delay: calc(var(--uib-speed) * -0.3);
-            opacity: 0.6;
-          }
-          .line:nth-child(4) {
-            animation-delay: calc(var(--uib-speed) * -0.225);
-            opacity: 0.4;
-          }
-          .line:nth-child(5) {
-            animation-delay: calc(var(--uib-speed) * -0.15);
-            opacity: 0.2;
-          }
-          .line:nth-child(6) {
-            animation-delay: calc(var(--uib-speed) * -0.075);
-            opacity: 0.1;
-          }
-          @keyframes rotate {
-            0% {
-              transform: rotate(0deg);
-            }
-            100% {
-              transform: rotate(180deg);
-            }
-          }
-          .animate-fade-in {
-            animation: fadeIn 0.5s ease-in-out;
-          }
-          @keyframes fadeIn {
-            from {
-              opacity: 0;
-              transform: translateY(5px);
-            }
-            to {
-              opacity: 1;
-              transform: translateY(0);
-            }
-          }
-        ` })
-    ] }) });
-  };
-  const ReachProviderThemeProvider = ({
-    children: children2,
-    theme: theme2
-  }) => {
-    const { t: t2 } = useTranslation();
-    const { loading: themeLoading, applyTheme } = useThemeContext();
-    const themeApplied = React.useRef(false);
-    React.useEffect(() => {
-      if (!themeApplied.current && theme2) {
-        applyTheme(theme2);
-        themeApplied.current = true;
-      }
-    }, [applyTheme, theme2]);
-    if (themeLoading && theme2) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-center items-center h-screen", children: /* @__PURE__ */ jsxRuntime.jsx(SpinLoader, { text: [t2("loading")] }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children2 });
-  };
   const TOAST_LIMIT = 1;
   const TOAST_REMOVE_DELAY = 1e6;
   let count$2 = 0;
@@ -16600,8 +16606,8 @@
             useCamelCaseFlagKeys: false,
             sendEventsOnFlagRead: true
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(I18nProvider, { initialLanguage: language, children: /* @__PURE__ */ jsxRuntime.jsx(Provider$2, { children: /* @__PURE__ */ jsxRuntime.jsxs(Provider$3, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ReachProviderThemeProvider, { theme: theme2, children: children2 }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(I18nProvider, { initialLanguage: language, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme: theme2, children: /* @__PURE__ */ jsxRuntime.jsxs(Provider$3, { children: [
+            children2,
             /* @__PURE__ */ jsxRuntime.jsx(Toaster, {})
           ] }) }) })
         }
@@ -46735,6 +46741,11 @@ ${message2 ?? ""}`);
       ] })
     ] });
   };
+  const useRouterParams = () => {
+    const params = useParams();
+    const [searchParams] = useSearchParams();
+    return { params, searchParams };
+  };
   const ViewAutomationModal = ({
     iconDefinitions,
     autoOpenEditPopup,
@@ -46742,9 +46753,8 @@ ${message2 ?? ""}`);
     showBackButton = false,
     logoUrl
   }) => {
-    const params = useParams();
-    const [searchParams] = useSearchParams();
-    const FINAL_AUTOMATION_ID = automationId || params.automationId || searchParams.get("automationId");
+    const { params, searchParams } = useRouterParams();
+    const FINAL_AUTOMATION_ID = automationId || params?.automationId || searchParams.get("automationId");
     const AUTO_OPEN_EDIT_POPUP = autoOpenEditPopup || searchParams.get("autoOpenEditPopup");
     const FINAL_SHOW_BACK_BUTTON = searchParams.get("showBackButton") === "true" || showBackButton;
     const mergedIconDefinitions = mergeIconDefinitions(iconDefinitions);