@embedreach/components 0.1.30 → 0.1.32

package/dist/chunks/index.js

@@ -7984,192 +7984,6 @@ const { Provider: Provider$3 } = createDataContext(
   },
   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, b3) => {
-  r2 /= 255;
-  g2 /= 255;
-  b3 /= 255;
-  const max2 = Math.max(r2, g2, b3);
-  const min2 = Math.min(r2, g2, b3);
-  let h4 = 0, s3 = 0;
-  const l2 = (max2 + min2) / 2;
-  if (max2 !== min2) {
-    const d4 = max2 - min2;
-    s3 = l2 > 0.5 ? d4 / (2 - max2 - min2) : d4 / (max2 + min2);
-    switch (max2) {
-      case r2:
-        h4 = (g2 - b3) / d4 + (g2 < b3 ? 6 : 0);
-        break;
-      case g2:
-        h4 = (b3 - r2) / d4 + 2;
-        break;
-      case b3:
-        h4 = (r2 - g2) / d4 + 4;
-        break;
-    }
-    h4 *= 60;
-  }
-  return `${Math.round(h4)} ${Math.round(s3 * 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, b3] = extractRgb(rgbColor);
-    return rgbToShadcnHsl(r2, g2, b3);
-  } catch (e4) {
-    console.warn(`Failed to convert color to shadcn format: ${color2}`, e4);
-    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 (e4) {
-          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$1(args[0])) args[0] = `react-i18next:: ${args[0]}`;
@@ -8405,6 +8219,359 @@ function I18nextProvider({
     value
   }, children2);
 }
+const H3 = ({ children: children2 }) => {
+  return /* @__PURE__ */ jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children: children2 });
+};
+const SpinLoader = ({
+  size: size2 = 35,
+  color: color2 = "black",
+  speed = 0.9,
+  strokeWidth = 3.5,
+  text,
+  textSpeed = 2e3,
+  // Default 2 seconds per text
+  textColor = "black"
+}) => {
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+  const textArray = Array.isArray(text) ? text : text ? [text] : [];
+  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__ */ jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "loader-container",
+        style: {
+          "--uib-size": `${size2}px`,
+          "--uib-color": color2,
+          "--uib-speed": `${speed}s`,
+          "--uib-stroke": `${strokeWidth}px`
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "line" }),
+          /* @__PURE__ */ jsx("div", { className: "line" }),
+          /* @__PURE__ */ jsx("div", { className: "line" }),
+          /* @__PURE__ */ jsx("div", { className: "line" }),
+          /* @__PURE__ */ jsx("div", { className: "line" }),
+          /* @__PURE__ */ jsx("div", { className: "line" })
+        ]
+      }
+    ),
+    textArray.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `text-center text-sm text-muted-foreground animate-fade-in ${textColor ? `text-${textColor}` : ""}`,
+        children: /* @__PURE__ */ jsx(H3, { children: textArray[currentTextIndex] })
+      },
+      currentTextIndex
+    ),
+    /* @__PURE__ */ 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, b3) => {
+  r2 /= 255;
+  g2 /= 255;
+  b3 /= 255;
+  const max2 = Math.max(r2, g2, b3);
+  const min2 = Math.min(r2, g2, b3);
+  let h4 = 0, s3 = 0;
+  const l2 = (max2 + min2) / 2;
+  if (max2 !== min2) {
+    const d4 = max2 - min2;
+    s3 = l2 > 0.5 ? d4 / (2 - max2 - min2) : d4 / (max2 + min2);
+    switch (max2) {
+      case r2:
+        h4 = (g2 - b3) / d4 + (g2 < b3 ? 6 : 0);
+        break;
+      case g2:
+        h4 = (b3 - r2) / d4 + 2;
+        break;
+      case b3:
+        h4 = (r2 - g2) / d4 + 4;
+        break;
+    }
+    h4 *= 60;
+  }
+  return `${Math.round(h4)} ${Math.round(s3 * 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, b3] = extractRgb(rgbColor);
+    return rgbToShadcnHsl(r2, g2, b3);
+  } catch (e4) {
+    console.warn(`Failed to convert color to shadcn format: ${color2}`, e4);
+    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 (e4) {
+          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 = useContext$1(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: t3 } = useTranslation();
+  const { loading: themeLoading, applyTheme } = useThemeContext();
+  const themeApplied = useRef(false);
+  useEffect(() => {
+    if (!themeApplied.current && theme2) {
+      applyTheme(theme2);
+      themeApplied.current = true;
+    }
+  }, [applyTheme, theme2]);
+  if (themeLoading && theme2) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-screen", children: /* @__PURE__ */ jsx(SpinLoader, { text: [t3("loading")] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: children2 });
+};
+const ThemeProvider = ({
+  children: children2,
+  theme: theme2
+}) => {
+  return /* @__PURE__ */ jsx(Provider$2, { children: /* @__PURE__ */ jsx(InnerThemeProvider, { theme: theme2, children: children2 }) });
+};
 const isString = (obj) => typeof obj === "string";
 const defer = () => {
   let res;
@@ -11877,167 +12044,6 @@ const I18nProvider = ({
   }, [initialLanguage]);
   return /* @__PURE__ */ jsx(I18nextProvider, { i18n: instance, children: children2 });
 };
-const useThemeContext = () => {
-  const context = useContext$1(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__ */ jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children: children2 });
-};
-const SpinLoader = ({
-  size: size2 = 35,
-  color: color2 = "black",
-  speed = 0.9,
-  strokeWidth = 3.5,
-  text,
-  textSpeed = 2e3,
-  // Default 2 seconds per text
-  textColor = "black"
-}) => {
-  const [currentTextIndex, setCurrentTextIndex] = useState(0);
-  const textArray = Array.isArray(text) ? text : text ? [text] : [];
-  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__ */ jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "loader-container",
-        style: {
-          "--uib-size": `${size2}px`,
-          "--uib-color": color2,
-          "--uib-speed": `${speed}s`,
-          "--uib-stroke": `${strokeWidth}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "line" }),
-          /* @__PURE__ */ jsx("div", { className: "line" }),
-          /* @__PURE__ */ jsx("div", { className: "line" }),
-          /* @__PURE__ */ jsx("div", { className: "line" }),
-          /* @__PURE__ */ jsx("div", { className: "line" }),
-          /* @__PURE__ */ jsx("div", { className: "line" })
-        ]
-      }
-    ),
-    textArray.length > 0 && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `text-center text-sm text-muted-foreground animate-fade-in ${textColor ? `text-${textColor}` : ""}`,
-        children: /* @__PURE__ */ jsx(H3, { children: textArray[currentTextIndex] })
-      },
-      currentTextIndex
-    ),
-    /* @__PURE__ */ 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: t3 } = useTranslation();
-  const { loading: themeLoading, applyTheme } = useThemeContext();
-  const themeApplied = useRef(false);
-  useEffect(() => {
-    if (!themeApplied.current && theme2) {
-      applyTheme(theme2);
-      themeApplied.current = true;
-    }
-  }, [applyTheme, theme2]);
-  if (themeLoading && theme2) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-screen", children: /* @__PURE__ */ jsx(SpinLoader, { text: [t3("loading")] }) });
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: children2 });
-};
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1e6;
 let count$2 = 0;
@@ -16583,8 +16589,8 @@ const ReachProvider = ({
           useCamelCaseFlagKeys: false,
           sendEventsOnFlagRead: true
         },
-        children: /* @__PURE__ */ jsx(I18nProvider, { initialLanguage: language, children: /* @__PURE__ */ jsx(Provider$2, { children: /* @__PURE__ */ jsxs(Provider$3, { children: [
-          /* @__PURE__ */ jsx(ReachProviderThemeProvider, { theme: theme2, children: children2 }),
+        children: /* @__PURE__ */ jsx(I18nProvider, { initialLanguage: language, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: theme2, children: /* @__PURE__ */ jsxs(Provider$3, { children: [
+          children2,
           /* @__PURE__ */ jsx(Toaster, {})
         ] }) }) })
       }
@@ -46718,6 +46724,11 @@ const ViewAutomationHeader = ({
     ] })
   ] });
 };
+const useRouterParams = () => {
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+  return { params, searchParams };
+};
 const ViewAutomationModal = ({
   iconDefinitions,
   autoOpenEditPopup,
@@ -46725,9 +46736,8 @@ const ViewAutomationModal = ({
   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);