remoraid 2.43.2 → 2.45.0

package/dist/core/index.cjs

@@ -5466,6 +5466,7 @@ __export(exports_core, {
   useSettingsTableOptions: () => useSettingsTableOptions,
   useRemoraidUserExperience: () => useRemoraidUserExperience,
   useRemoraidTheme: () => useRemoraidTheme,
+  useRemoraidRouter: () => useRemoraidRouter,
   useRemoraidApp: () => useRemoraidApp,
   usePage: () => usePage,
   useLayouts: () => useLayouts,
@@ -5490,6 +5491,7 @@ __export(exports_core, {
   defaultTransitionDurations: () => defaultTransitionDurations,
   defaultSettingsWidgetOptions: () => defaultSettingsWidgetContext,
   defaultSettingsTableOptions: () => defaultSettingsTableOptions,
+  defaultRemoraidButtonSize: () => defaultRemoraidButtonSize,
   defaultNavbarSettingsWidgetId: () => defaultNavbarSettingsWidgetId,
   defaultNavbarPositions: () => defaultNavbarPositions,
   defaultLayoutsContext: () => defaultLayoutsContext,
@@ -5513,6 +5515,7 @@ __export(exports_core, {
   SettingsWidget: () => SettingsWidget_default,
   SettingsTable: () => SettingsTable_default,
   ScrollableChipGroup: () => ScrollableChipGroup,
+  RouterProvider: () => RouterProvider,
   RemoraidProvider: () => RemoraidProvider,
   RemoraidIconSize: () => RemoraidIconSize,
   RemoraidButton: () => RemoraidButton,
@@ -6047,7 +6050,12 @@ function UserExperienceProviderWrapper({
   initialValue
 }) {
   const [cookies, setCookie] = import_react_cookie.useCookies();
-  const initialUserExperience = import_lodash3.merge(defaultUserExperience, initialValue);
+  const initialUserExperience = import_lodash3.mergeWith({}, defaultUserExperience, initialValue, (_objValue, srcValue) => {
+    if (Array.isArray(srcValue)) {
+      return [...srcValue];
+    }
+    return;
+  });
   const [userExperience, setUserExperience] = import_react5.useState(initialUserExperience);
   const [processedCookie, setProcessedCookie] = import_react5.useState(false);
   const updateUserExperience = (p) => {
@@ -6137,29 +6145,69 @@ function LayoutsProvider({
   });
 }
 
-// src/core/components/RemoraidProvider/index.tsx
+// src/core/components/RemoraidProvider/RouterProvider/index.tsx
+var import_react8 = require("react");
 var jsx_runtime7 = require("react/jsx-runtime");
+var defaultRouter = {
+  pathname: "/",
+  push: () => {}
+};
+var routerContext = import_react8.createContext(defaultRouter);
+var useRemoraidRouter = () => {
+  return import_react8.useContext(routerContext);
+};
+var getWindowRouter = () => {
+  if (typeof window === "undefined") {
+    return defaultRouter;
+  }
+  return {
+    pathname: window.location.pathname,
+    push: (href) => {
+      window.location.assign(href);
+    },
+    replace: (href) => {
+      window.location.replace(href);
+    }
+  };
+};
+function RouterProvider({
+  children,
+  router
+}) {
+  return /* @__PURE__ */ jsx_runtime7.jsx(routerContext.Provider, {
+    value: router ?? getWindowRouter(),
+    children
+  });
+}
+
+// src/core/components/RemoraidProvider/index.tsx
+var jsx_runtime8 = require("react/jsx-runtime");
 function RemoraidProvider({
   children,
   theme,
   initialUserExperience,
+  router,
   componentsProps
 }) {
-  return /* @__PURE__ */ jsx_runtime7.jsx(import_react_cookie2.CookiesProvider, {
+  return /* @__PURE__ */ jsx_runtime8.jsx(import_react_cookie2.CookiesProvider, {
     ...componentsProps?.CookiesProvider,
-    children: /* @__PURE__ */ jsx_runtime7.jsx(HydrationStatusProvider, {
-      ...componentsProps?.HydrationStatusProviderProps,
-      children: /* @__PURE__ */ jsx_runtime7.jsx(ThemeProvider, {
-        theme,
-        ...componentsProps?.ThemeProvider,
-        children: /* @__PURE__ */ jsx_runtime7.jsx(CoreUserExperienceProvider, {
-          initialValue: initialUserExperience,
-          ...componentsProps?.CoreUserExperienceProvider,
-          children: /* @__PURE__ */ jsx_runtime7.jsx(WidgetsProvider, {
-            ...componentsProps?.WidgetsProvider,
-            children: /* @__PURE__ */ jsx_runtime7.jsx(LayoutsProvider, {
-              ...componentsProps?.LayoutsProviderProps,
-              children
+    children: /* @__PURE__ */ jsx_runtime8.jsx(RouterProvider, {
+      router,
+      ...componentsProps?.RouterProvider,
+      children: /* @__PURE__ */ jsx_runtime8.jsx(HydrationStatusProvider, {
+        ...componentsProps?.HydrationStatusProviderProps,
+        children: /* @__PURE__ */ jsx_runtime8.jsx(ThemeProvider, {
+          theme,
+          ...componentsProps?.ThemeProvider,
+          children: /* @__PURE__ */ jsx_runtime8.jsx(CoreUserExperienceProvider, {
+            initialValue: initialUserExperience,
+            ...componentsProps?.CoreUserExperienceProvider,
+            children: /* @__PURE__ */ jsx_runtime8.jsx(WidgetsProvider, {
+              ...componentsProps?.WidgetsProvider,
+              children: /* @__PURE__ */ jsx_runtime8.jsx(LayoutsProvider, {
+                ...componentsProps?.LayoutsProviderProps,
+                children
+              })
             })
           })
         })
@@ -6172,9 +6220,9 @@ var import_core13 = require("@mantine/core");
 var import_react18 = require("react");
 
 // src/core/components/AppShell/AppProvider/index.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_lodash4 = __toESM(require_lodash());
-var jsx_runtime8 = require("react/jsx-runtime");
+var jsx_runtime9 = require("react/jsx-runtime");
 var defaultAppContext = {
   name: "Hello, World!",
   nav: [],
@@ -6182,16 +6230,16 @@ var defaultAppContext = {
   footerVariant: "minimal" /* Minimal */,
   navbarMobileVariant: null
 };
-var appContext = import_react8.createContext(defaultAppContext);
+var appContext = import_react9.createContext(defaultAppContext);
 var useRemoraidApp = () => {
-  return import_react8.useContext(appContext);
+  return import_react9.useContext(appContext);
 };
 function AppProvider({
   appContext: appContextProp,
   children
 }) {
   const { logo, ...appContextPropWithoutLogo } = appContextProp;
-  return /* @__PURE__ */ jsx_runtime8.jsx(appContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime9.jsx(appContext.Provider, {
     value: { ...import_lodash4.merge(defaultAppContext, appContextPropWithoutLogo), logo },
     children
   });
@@ -6235,7 +6283,7 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/core/components/Page/PageContainer/index.tsx
-var jsx_runtime9 = require("react/jsx-runtime");
+var jsx_runtime10 = require("react/jsx-runtime");
 function PageContainer({
   children,
   p = 0,
@@ -6243,7 +6291,7 @@ function PageContainer({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_runtime9.jsx(import_core3.Container, {
+  return /* @__PURE__ */ jsx_runtime10.jsx(import_core3.Container, {
     size: theme.containerSize,
     p,
     w: "100%",
@@ -6256,10 +6304,10 @@ function PageContainer({
 
 // src/core/components/FrameLayout/index.tsx
 var import_core5 = require("@mantine/core");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/core/components/FrameLayout/Element/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_core4 = require("@mantine/core");
 
 // src/core/lib/errors.ts
@@ -6272,10 +6320,10 @@ class InvalidComponentUsageError extends Error {
 
 // src/core/components/FrameLayout/Element/index.tsx
 var import_lodash5 = __toESM(require_lodash());
-var jsx_runtime10 = require("react/jsx-runtime");
-var layoutElementContext = import_react9.createContext(null);
+var jsx_runtime11 = require("react/jsx-runtime");
+var layoutElementContext = import_react10.createContext(null);
 var useFrameLayoutElement = () => {
-  return import_react9.useContext(layoutElementContext);
+  return import_react10.useContext(layoutElementContext);
 };
 function Element2({
   section,
@@ -6305,17 +6353,17 @@ function Element2({
   if (section === "left" /* Left */ || section === "right" /* Right */) {
     containerProps.h = "100%";
   }
-  const element = includePageContainer ? /* @__PURE__ */ jsx_runtime10.jsx(PageContainer, {
+  const element = includePageContainer ? /* @__PURE__ */ jsx_runtime11.jsx(PageContainer, {
     p: 0,
     hidden,
     ...componentsProps?.PageContainer,
     children
   }) : children;
-  return /* @__PURE__ */ jsx_runtime10.jsx(import_core4.Portal, {
+  return /* @__PURE__ */ jsx_runtime11.jsx(import_core4.Portal, {
     target: layout.sections[section],
-    children: /* @__PURE__ */ jsx_runtime10.jsx(layoutElementContext.Provider, {
+    children: /* @__PURE__ */ jsx_runtime11.jsx(layoutElementContext.Provider, {
       value: { layoutType: "frame" /* Frame */, section },
-      children: includeContainer ? /* @__PURE__ */ jsx_runtime10.jsx(import_core4.Box, {
+      children: includeContainer ? /* @__PURE__ */ jsx_runtime11.jsx(import_core4.Box, {
         "data-hidden": hidden,
         ...import_lodash5.merge(containerProps, componentsProps?.container),
         className: clsx_default("remoraid-frame-layout-element", containerProps?.className, componentsProps?.container?.className),
@@ -6326,10 +6374,10 @@ function Element2({
 }
 
 // src/core/components/FrameLayout/index.tsx
-var jsx_runtime11 = require("react/jsx-runtime");
-var layoutContext = import_react10.createContext(null);
+var jsx_runtime12 = require("react/jsx-runtime");
+var layoutContext = import_react11.createContext(null);
 var useFrameLayout = () => {
-  return import_react10.useContext(layoutContext);
+  return import_react11.useContext(layoutContext);
 };
 function FrameLayout({
   layoutId,
@@ -6340,14 +6388,14 @@ function FrameLayout({
 }) {
   const { layouts, setLayouts } = useLayouts();
   const layout = layouts[layoutId];
-  const defaultSections = import_react10.useMemo(() => ({
+  const defaultSections = import_react11.useMemo(() => ({
     ["bottom" /* Bottom */]: null,
     ["right" /* Right */]: null,
     ["top" /* Top */]: null,
     ["left" /* Left */]: null,
     ["content" /* Content */]: null
   }), []);
-  const setSections = import_react10.useCallback((value) => {
+  const setSections = import_react11.useCallback((value) => {
     setLayouts((prev) => ({
       ...prev,
       [layoutId]: {
@@ -6356,37 +6404,37 @@ function FrameLayout({
       }
     }));
   }, [layoutId, setLayouts, defaultSections]);
-  const topSectionRef = import_react10.useCallback((n) => {
+  const topSectionRef = import_react11.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["top" /* Top */]: n
     }));
   }, [setSections]);
-  const bottomSectionRef = import_react10.useCallback((n) => {
+  const bottomSectionRef = import_react11.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["bottom" /* Bottom */]: n
     }));
   }, [setSections]);
-  const leftSectionRef = import_react10.useCallback((n) => {
+  const leftSectionRef = import_react11.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["left" /* Left */]: n
     }));
   }, [setSections]);
-  const rightSectionRef = import_react10.useCallback((n) => {
+  const rightSectionRef = import_react11.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["right" /* Right */]: n
     }));
   }, [setSections]);
-  const contentSectionRef = import_react10.useCallback((n) => {
+  const contentSectionRef = import_react11.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["content" /* Content */]: n
     }));
   }, [setSections]);
-  const contentSection = /* @__PURE__ */ jsx_runtime11.jsx(import_core5.Stack, {
+  const contentSection = /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Stack, {
     ref: contentSectionRef,
     h: "100%",
     gap: gutter,
@@ -6395,15 +6443,15 @@ function FrameLayout({
     className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-content-section", componentsProps?.sectionContainers?.["content" /* Content */]?.className),
     children
   });
-  const layoutContextValue = import_react10.useMemo(() => ({
+  const layoutContextValue = import_react11.useMemo(() => ({
     type: "frame" /* Frame */,
     sections: defaultSections,
     ...layout,
     layoutId
   }), [layout?.sections, defaultSections, layoutId]);
-  return /* @__PURE__ */ jsx_runtime11.jsx(layoutContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime12.jsx(layoutContext.Provider, {
     value: layoutContextValue,
-    children: /* @__PURE__ */ jsx_runtime11.jsxs(import_core5.Group, {
+    children: /* @__PURE__ */ jsx_runtime12.jsxs(import_core5.Group, {
       gap: 0,
       h: "100%",
       w: "100%",
@@ -6414,7 +6462,7 @@ function FrameLayout({
       },
       className: clsx_default("remoraid-frame-layout", componentsProps?.horizontalContainer?.className),
       children: [
-        /* @__PURE__ */ jsx_runtime11.jsx(import_core5.Group, {
+        /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Group, {
           ref: leftSectionRef,
           h: "100%",
           wrap: "nowrap",
@@ -6423,26 +6471,26 @@ function FrameLayout({
           ...componentsProps?.sectionContainers?.["left" /* Left */],
           className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-left-section", componentsProps?.sectionContainers?.["left" /* Left */]?.className)
         }),
-        /* @__PURE__ */ jsx_runtime11.jsxs(import_core5.Stack, {
+        /* @__PURE__ */ jsx_runtime12.jsxs(import_core5.Stack, {
           h: "100%",
           flex: 1,
           gap: 0,
           ...componentsProps?.verticalContainer,
           className: clsx_default("remoraid-frame-layout-vertical-container", componentsProps?.verticalContainer?.className),
           children: [
-            /* @__PURE__ */ jsx_runtime11.jsx(import_core5.Stack, {
+            /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Stack, {
               ref: topSectionRef,
               gap: gutter,
               flex: 0,
               ...componentsProps?.sectionContainers?.["top" /* Top */],
               className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-top-section", componentsProps?.sectionContainers?.["top" /* Top */]?.className)
             }),
-            includeScrollArea ? /* @__PURE__ */ jsx_runtime11.jsx(import_core5.ScrollArea, {
+            includeScrollArea ? /* @__PURE__ */ jsx_runtime12.jsx(import_core5.ScrollArea, {
               flex: 1,
               ...componentsProps?.ScrollArea,
               children: contentSection
             }) : contentSection,
-            /* @__PURE__ */ jsx_runtime11.jsx(import_core5.Stack, {
+            /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Stack, {
               ref: bottomSectionRef,
               gap: gutter,
               flex: 0,
@@ -6451,7 +6499,7 @@ function FrameLayout({
             })
           ]
         }),
-        /* @__PURE__ */ jsx_runtime11.jsx(import_core5.Group, {
+        /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Group, {
           ref: rightSectionRef,
           h: "100%",
           gap: gutter,
@@ -6469,7 +6517,7 @@ var FrameLayout_default = Object.assign(FrameLayout, {
 });
 
 // src/core/components/AppShell/Footer/FooterMinimal/index.tsx
-var jsx_runtime12 = require("react/jsx-runtime");
+var jsx_runtime13 = require("react/jsx-runtime");
 function FooterMinimal({
   icon: Icon2 = import_icons_react2.IconPennant,
   componentsProps
@@ -6480,10 +6528,10 @@ function FooterMinimal({
       footer: { position }
     }
   } = useAppShellUserExperience();
-  const content = /* @__PURE__ */ jsx_runtime12.jsx(PageContainer, {
+  const content = /* @__PURE__ */ jsx_runtime13.jsx(PageContainer, {
     ...componentsProps?.container,
-    children: /* @__PURE__ */ jsx_runtime12.jsx(import_core6.Center, {
-      children: /* @__PURE__ */ jsx_runtime12.jsx(Icon2, {
+    children: /* @__PURE__ */ jsx_runtime13.jsx(import_core6.Center, {
+      children: /* @__PURE__ */ jsx_runtime13.jsx(Icon2, {
         color: "var(--mantine-color-default-border)",
         ...theme.componentsProps.icons.huge,
         ...componentsProps?.icon
@@ -6491,7 +6539,7 @@ function FooterMinimal({
     })
   });
   if (position === "bottom" /* Bottom */) {
-    return /* @__PURE__ */ jsx_runtime12.jsx(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx_runtime13.jsx(FrameLayout_default.Element, {
       section: position,
       includeContainer: true,
       ...componentsProps?.layoutElement,
@@ -6506,7 +6554,7 @@ function FooterMinimal({
 }
 
 // src/core/components/AppShell/Footer/index.tsx
-var jsx_runtime13 = require("react/jsx-runtime");
+var jsx_runtime14 = require("react/jsx-runtime");
 var supportedFooterPositions = {
   ["minimal" /* Minimal */]: [
     null,
@@ -6520,7 +6568,7 @@ var defaultFooterPositions = {
 function Footer({ componentsProps }) {
   const { footerVariant } = useRemoraidApp();
   if (footerVariant === "minimal" /* Minimal */) {
-    return /* @__PURE__ */ jsx_runtime13.jsx(FooterMinimal, {
+    return /* @__PURE__ */ jsx_runtime14.jsx(FooterMinimal, {
       ...componentsProps?.FooterMinimal
     });
   }
@@ -6534,16 +6582,13 @@ var Footer_default = Object.assign(Footer, {
 var import_react16 = require("react");
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-var import_react13 = require("react");
 var import_core9 = require("@mantine/core");
-var import_navigation2 = require("next/navigation");
 var import_lodash8 = __toESM(require_lodash());
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/NavigationMenu/index.tsx
 var import_core7 = require("@mantine/core");
-var import_navigation = require("next/navigation");
-var import_react11 = require("react");
-var jsx_runtime14 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var jsx_runtime15 = require("react/jsx-runtime");
 function NavigationMenu({
   target,
   elements,
@@ -6552,13 +6597,13 @@ function NavigationMenu({
 }) {
   const theme = useRemoraidTheme();
   const mantineTheme = import_core7.useMantineTheme();
-  const pathname = import_navigation.usePathname();
-  const router = import_navigation.useRouter();
-  const item = (element) => /* @__PURE__ */ jsx_runtime14.jsx(import_core7.Transition, {
+  const router = useRemoraidRouter();
+  const { pathname } = router;
+  const item = (element) => /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Transition, {
     mounted: element.mounted ?? true,
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime14.jsx(import_core7.Menu.Item, {
-      leftSection: element.icon ? /* @__PURE__ */ jsx_runtime14.jsx(element.icon, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Item, {
+      leftSection: element.icon ? /* @__PURE__ */ jsx_runtime15.jsx(element.icon, {
         ...theme.componentsProps.icons.small
       }) : undefined,
       c: element.type === "anchor" /* Anchor */ && element.href === pathname ? mantineTheme.primaryColor : undefined,
@@ -6574,25 +6619,25 @@ function NavigationMenu({
       children: element.label
     })
   });
-  const targetElement = import_react11.isValidElement(target) ? target : item(target);
+  const targetElement = import_react12.isValidElement(target) ? target : item(target);
   if (elements === undefined || elements.length === 0) {
     return targetElement;
   }
-  return /* @__PURE__ */ jsx_runtime14.jsxs(import_core7.Menu, {
+  return /* @__PURE__ */ jsx_runtime15.jsxs(import_core7.Menu, {
     trigger: "click-hover",
     ...componentsProps?.Menu,
     children: [
-      /* @__PURE__ */ jsx_runtime14.jsx(import_core7.Menu.Target, {
-        children: /* @__PURE__ */ jsx_runtime14.jsx(import_core7.Box, {
+      /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Target, {
+        children: /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Box, {
           children: targetElement
         })
       }),
-      /* @__PURE__ */ jsx_runtime14.jsxs(import_core7.Menu.Dropdown, {
+      /* @__PURE__ */ jsx_runtime15.jsxs(import_core7.Menu.Dropdown, {
         children: [
-          label !== undefined && /* @__PURE__ */ jsx_runtime14.jsx(import_core7.Menu.Label, {
+          label !== undefined && /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Label, {
             children: label
           }),
-          elements.map((element, i) => /* @__PURE__ */ jsx_runtime14.jsx(NavigationMenu, {
+          elements.map((element, i) => /* @__PURE__ */ jsx_runtime15.jsx(NavigationMenu, {
             target: item(element),
             elements: element.children,
             componentsProps
@@ -6609,9 +6654,9 @@ var import_icons_react4 = require("@tabler/icons-react");
 // src/core/components/RemoraidButton/index.tsx
 var import_core8 = require("@mantine/core");
 var import_icons_react3 = require("@tabler/icons-react");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_lodash7 = __toESM(require_lodash());
-var jsx_runtime15 = require("react/jsx-runtime");
+var jsx_runtime16 = require("react/jsx-runtime");
 var defaultRemoraidButtonSize = "sm";
 function RemoraidButton({
   label,
@@ -6635,7 +6680,7 @@ function RemoraidButton({
   const collapsed = collapsedProp ?? false;
   const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
   const Icon3 = iconProp ?? import_icons_react3.IconClick;
-  const iconElement = import_react12.isValidElement(Icon3) ? Icon3 : /* @__PURE__ */ jsx_runtime15.jsx(Icon3, {
+  const iconElement = import_react13.isValidElement(Icon3) ? Icon3 : /* @__PURE__ */ jsx_runtime16.jsx(Icon3, {
     ...import_lodash7.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   });
   const clickTransformationClassNames = {
@@ -6648,18 +6693,18 @@ function RemoraidButton({
     ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
   };
   const clickTransformationClass = clickTransformationClassNames[clickTransformation];
-  return /* @__PURE__ */ jsx_runtime15.jsx(import_core8.Transition, {
+  return /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime15.jsxs(jsx_runtime15.Fragment, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime16.jsxs(jsx_runtime16.Fragment, {
       children: [
-        /* @__PURE__ */ jsx_runtime15.jsx(import_core8.Tooltip, {
+        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Tooltip, {
           label,
           ...componentsProps?.tooltip,
-          children: /* @__PURE__ */ jsx_runtime15.jsx(import_core8.ActionIcon, {
+          children: /* @__PURE__ */ jsx_runtime16.jsx(import_core8.ActionIcon, {
             "aria-label": label,
             variant,
             onClick,
@@ -6675,7 +6720,7 @@ function RemoraidButton({
             children: iconElement
           })
         }),
-        /* @__PURE__ */ jsx_runtime15.jsx(import_core8.Button, {
+        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Button, {
           onClick,
           loading,
           variant,
@@ -6696,8 +6741,7 @@ function RemoraidButton({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-var import_image = __toESM(require("next/image"));
-var jsx_runtime16 = require("react/jsx-runtime");
+var jsx_runtime17 = require("react/jsx-runtime");
 function NavbarMinimalContent({
   orientation,
   maxElements,
@@ -6707,8 +6751,8 @@ function NavbarMinimalContent({
   const theme = useRemoraidTheme();
   const { userExperience: appShellUserExperience } = useAppShellUserExperience();
   const app = useRemoraidApp();
-  const router = import_navigation2.useRouter();
-  const pathname = import_navigation2.usePathname();
+  const router = useRemoraidRouter();
+  const { pathname } = router;
   const layoutElement = useFrameLayoutElement();
   const { colorScheme, setColorScheme } = useHydratedMantineColorScheme();
   const collapseStaticElementsBreakpoint = collapseStaticElementsBreakpointProp ?? theme.breakpoints.navbarStaticElementsCollapse;
@@ -6729,21 +6773,10 @@ function NavbarMinimalContent({
     buttonCollapsed = false;
   }
   const buttonClickTransformation = orientation === "horizontal" /* Horizontal */ ? "tiltRight" /* TiltRight */ : "default" /* Default */;
-  const logoButtonSize = componentsProps?.logoButton?.size ?? componentsProps?.button?.size ?? defaultRemoraidButtonSize;
-  const logoIconSize = getDefaultButtonIconSize(logoButtonSize);
-  const logoButton = app.logo ? /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
+  const logoButton = app.logo ? /* @__PURE__ */ jsx_runtime17.jsx(RemoraidButton, {
     label: app.name,
     variant: "subtle",
-    icon: import_react13.isValidElement(app.logo) || isIcon(app.logo) ? app.logo : /* @__PURE__ */ jsx_runtime16.jsx(import_image.default, {
-      src: app.logo,
-      alt: "App logo",
-      ...componentsProps?.logo,
-      style: {
-        width: theme.componentsProps.icons[logoIconSize].size,
-        height: theme.componentsProps.icons[logoIconSize].size,
-        ...componentsProps?.logo?.style
-      }
-    }),
+    icon: app.logo,
     responsive: buttonResponsive,
     collapsed: buttonCollapsed,
     clickTransformation: buttonClickTransformation,
@@ -6761,9 +6794,9 @@ function NavbarMinimalContent({
       componentsProps?.logoButton?.onClick?.(e);
     }
   }) : undefined;
-  const button = (element, key) => /* @__PURE__ */ jsx_runtime16.jsx(NavigationMenu, {
+  const button = (element, key) => /* @__PURE__ */ jsx_runtime17.jsx(NavigationMenu, {
     label: element.label,
-    target: /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
+    target: /* @__PURE__ */ jsx_runtime17.jsx(RemoraidButton, {
       mounted: element.mounted,
       label: element.label,
       icon: element.icon,
@@ -6806,11 +6839,11 @@ function NavbarMinimalContent({
   const staticElements = elements.filter((element) => element.static);
   const staticButtons = staticElements.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).map((element, i) => button(element, `static-nav-element-${i}`));
   const collapseStaticElements = staticElements.filter((element) => element.mounted ?? true).length > 1;
-  const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Box, {
+  const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Box, {
     hiddenFrom: collapseStaticElementsBreakpoint,
-    children: /* @__PURE__ */ jsx_runtime16.jsx(NavigationMenu, {
+    children: /* @__PURE__ */ jsx_runtime17.jsx(NavigationMenu, {
       elements: staticElements,
-      target: /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
+      target: /* @__PURE__ */ jsx_runtime17.jsx(RemoraidButton, {
         label: "Static elements",
         icon: import_icons_react4.IconDots,
         responsive: orientation === "vertical" /* Vertical */ ? buttonResponsive : false,
@@ -6831,41 +6864,41 @@ function NavbarMinimalContent({
       }, componentsProps?.NavigationMenu?.componentsProps)
     })
   }) : null;
-  return /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Paper, {
+  return /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Paper, {
     bg: theme.transparentBackground,
     h: "100%",
     p: "md",
     shadow: "md",
     ...componentsProps?.container,
-    children: orientation === "vertical" /* Vertical */ ? /* @__PURE__ */ jsx_runtime16.jsxs(import_core9.Stack, {
+    children: orientation === "vertical" /* Vertical */ ? /* @__PURE__ */ jsx_runtime17.jsxs(import_core9.Stack, {
       h: "100%",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx_runtime16.jsx(import_core9.ScrollArea, {
+        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.ScrollArea, {
           flex: 1,
-          children: /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Stack, {
+          children: /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Stack, {
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Stack, {
+        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Stack, {
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
         }),
         staticMenuButton
       ]
-    }) : /* @__PURE__ */ jsx_runtime16.jsxs(import_core9.Group, {
+    }) : /* @__PURE__ */ jsx_runtime17.jsxs(import_core9.Group, {
       wrap: "nowrap",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx_runtime16.jsx(import_core9.ScrollArea, {
+        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.ScrollArea, {
           flex: 1,
           style: { contain: "inline-size" },
-          children: /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Group, {
+          children: /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Group, {
             wrap: "nowrap",
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Group, {
+        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Group, {
           wrap: "nowrap",
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
@@ -6888,7 +6921,7 @@ var import_core12 = require("@mantine/core");
 var import_core10 = require("@mantine/core");
 var import_icons_react5 = require("@tabler/icons-react");
 var import_lodash9 = __toESM(require_lodash());
-var jsx_runtime17 = require("react/jsx-runtime");
+var jsx_runtime18 = require("react/jsx-runtime");
 function ControlButton({
   icon: Icon4 = import_icons_react5.IconClick,
   mounted = true,
@@ -6901,17 +6934,17 @@ function ControlButton({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_runtime17.jsx(import_core10.Transition, {
+  return /* @__PURE__ */ jsx_runtime18.jsx(import_core10.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime17.jsx(import_core10.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime18.jsx(import_core10.Tooltip, {
       label: tooltip,
       disabled: !Boolean(tooltip),
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_runtime17.jsx(import_core10.ActionIcon, {
+      children: /* @__PURE__ */ jsx_runtime18.jsx(import_core10.ActionIcon, {
         "data-control-button": true,
         size,
         color,
@@ -6922,7 +6955,7 @@ function ControlButton({
           order,
           ...import_lodash9.merge(transitionStyle, componentsProps?.button?.style)
         },
-        children: /* @__PURE__ */ jsx_runtime17.jsx(Icon4, {
+        children: /* @__PURE__ */ jsx_runtime18.jsx(Icon4, {
           ...import_lodash9.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
         })
       })
@@ -6935,7 +6968,7 @@ var import_react14 = require("react");
 var import_core11 = require("@mantine/core");
 var import_icons_react6 = require("@tabler/icons-react");
 var import_lodash10 = __toESM(require_lodash());
-var jsx_runtime18 = require("react/jsx-runtime");
+var jsx_runtime19 = require("react/jsx-runtime");
 function Controls({
   groupRef,
   mounted = true,
@@ -6993,14 +7026,14 @@ function Controls({
   const handlePointerUp = (e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   };
-  return /* @__PURE__ */ jsx_runtime18.jsx(import_core11.Transition, {
+  return /* @__PURE__ */ jsx_runtime19.jsx(import_core11.Transition, {
     mounted,
     keepMounted: true,
     transition: "pop",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime18.jsx(import_core11.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime19.jsx(import_core11.Paper, {
       ref: containerRef,
       pos: "absolute",
       p: gutter,
@@ -7016,14 +7049,14 @@ function Controls({
         ...import_lodash10.merge(transitionStyle, componentsProps?.container?.style)
       },
       className: clsx_default("remoraid-controls", componentsProps?.container?.className),
-      children: /* @__PURE__ */ jsx_runtime18.jsxs(import_core11.Group, {
+      children: /* @__PURE__ */ jsx_runtime19.jsxs(import_core11.Group, {
         gap: gutter,
         ref: groupRef,
         wrap: "nowrap",
         ...componentsProps?.group,
         className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
         children: [
-          /* @__PURE__ */ jsx_runtime18.jsx(import_icons_react6.IconGripHorizontal, {
+          /* @__PURE__ */ jsx_runtime19.jsx(import_icons_react6.IconGripHorizontal, {
             ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
           }),
           children,
@@ -7031,7 +7064,7 @@ function Controls({
             if (isValidElementOfType(ControlButton, button)) {
               return button;
             }
-            return /* @__PURE__ */ jsx_runtime18.jsx(ControlButton, {
+            return /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
               ...button
             }, i);
           })
@@ -7042,7 +7075,7 @@ function Controls({
 }
 
 // src/core/components/Pinnable/index.tsx
-var jsx_runtime19 = require("react/jsx-runtime");
+var jsx_runtime20 = require("react/jsx-runtime");
 function Pinnable({
   layoutType: layoutTypeProp,
   section,
@@ -7062,7 +7095,7 @@ function Pinnable({
   if (layout && layout.type !== layoutType) {
     throw new TypeError(`Prop 'layoutId' in '${Pinnable.name}' refers to a layout of type ${layout.type}, expected ${layoutType}. Leave 'layoutId' undefined, if you want to use the layout in '${AppShell_default.name}' as reference layout.`);
   }
-  const controlButton = import_react15.useMemo(() => /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
+  const controlButton = import_react15.useMemo(() => /* @__PURE__ */ jsx_runtime20.jsx(ControlButton, {
     icon: pinned ? import_icons_react7.IconPinnedOff : import_icons_react7.IconPin,
     tooltip: pinned ? "Unpin" : "Pin",
     color: "green",
@@ -7073,7 +7106,7 @@ function Pinnable({
       componentsProps?.button?.onClick?.(e);
     }
   }), [pinned, componentsProps?.button]);
-  const element = /* @__PURE__ */ jsx_runtime19.jsxs(import_core12.Box, {
+  const element = /* @__PURE__ */ jsx_runtime20.jsxs(import_core12.Box, {
     pos: "relative",
     ref: containerRef,
     "data-hidden": hidden,
@@ -7081,11 +7114,11 @@ function Pinnable({
     ...componentsProps?.container,
     className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
     children: [
-      controlsContainer === undefined ? /* @__PURE__ */ jsx_runtime19.jsx(Controls, {
+      controlsContainer === undefined ? /* @__PURE__ */ jsx_runtime20.jsx(Controls, {
         dragContainerRef: containerRef,
         ...componentsProps?.controls,
         children: controlButton
-      }) : controlsContainer !== null && /* @__PURE__ */ jsx_runtime19.jsx(import_core12.Portal, {
+      }) : controlsContainer !== null && /* @__PURE__ */ jsx_runtime20.jsx(import_core12.Portal, {
         target: controlsContainer,
         children: controlButton
       }),
@@ -7099,7 +7132,7 @@ function Pinnable({
     return null;
   }
   if (pinned && layoutType === "frame" /* Frame */) {
-    return /* @__PURE__ */ jsx_runtime19.jsx(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx_runtime20.jsx(FrameLayout_default.Element, {
       layoutId,
       section,
       hidden,
@@ -7111,7 +7144,7 @@ function Pinnable({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-var jsx_runtime20 = require("react/jsx-runtime");
+var jsx_runtime21 = require("react/jsx-runtime");
 function NavbarMinimal({
   pinnable = true,
   componentsProps
@@ -7129,7 +7162,7 @@ function NavbarMinimal({
     setHover(false);
   };
   if (position === "left" /* Left */ || position === "right" /* Right */) {
-    return /* @__PURE__ */ jsx_runtime20.jsx(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx_runtime21.jsx(FrameLayout_default.Element, {
       section: position,
       includeContainer: true,
       ...componentsProps?.layoutElement,
@@ -7140,19 +7173,19 @@ function NavbarMinimal({
           }
         }
       }, componentsProps?.layoutElement?.componentsProps),
-      children: /* @__PURE__ */ jsx_runtime20.jsx(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimalContent, {
         orientation: "vertical" /* Vertical */,
         ...componentsProps?.content
       })
     });
   }
   if (position === "top" /* Top */ || position === "bottom" /* Bottom */) {
-    const content = /* @__PURE__ */ jsx_runtime20.jsx(NavbarMinimalContent, {
+    const content = /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimalContent, {
       orientation: "horizontal" /* Horizontal */,
       ...componentsProps?.content
     });
     if (pinnable) {
-      return /* @__PURE__ */ jsx_runtime20.jsx(PageContainer, {
+      return /* @__PURE__ */ jsx_runtime21.jsx(PageContainer, {
         ...componentsProps?.container,
         componentsProps: {
           ...componentsProps?.container?.componentsProps,
@@ -7161,7 +7194,7 @@ function NavbarMinimal({
             className: clsx_default("hide-if-empty", componentsProps?.container?.componentsProps?.container?.className)
           }
         },
-        children: /* @__PURE__ */ jsx_runtime20.jsx(Pinnable, {
+        children: /* @__PURE__ */ jsx_runtime21.jsx(Pinnable, {
           section: position,
           initialValue: true,
           ...componentsProps?.Pinnable,
@@ -7204,9 +7237,9 @@ function NavbarMinimal({
     return content;
   }
   if (position === "content" /* Content */) {
-    return /* @__PURE__ */ jsx_runtime20.jsx(PageContainer, {
+    return /* @__PURE__ */ jsx_runtime21.jsx(PageContainer, {
       ...componentsProps?.container,
-      children: /* @__PURE__ */ jsx_runtime20.jsx(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimalContent, {
         orientation: "horizontal" /* Horizontal */,
         ...componentsProps?.content
       })
@@ -7217,7 +7250,7 @@ function NavbarMinimal({
 
 // src/core/components/AppShell/Navbar/index.tsx
 var import_icons_react8 = require("@tabler/icons-react");
-var jsx_runtime21 = require("react/jsx-runtime");
+var jsx_runtime22 = require("react/jsx-runtime");
 var supportedNavbarPositions = {
   ["minimal" /* Minimal */]: [
     null,
@@ -7265,21 +7298,21 @@ var getDefaultNavigationElements = ({
     }
   }
 ];
-function Navbar2({ componentsProps }) {
+function Navbar({ componentsProps }) {
   const { navbarVariant } = useRemoraidApp();
   if (navbarVariant === "minimal" /* Minimal */) {
-    return /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimal, {
+    return /* @__PURE__ */ jsx_runtime22.jsx(NavbarMinimal, {
       ...componentsProps?.NavbarMinimal
     });
   }
   return null;
 }
-var Navbar_default = Object.assign(Navbar2, {
+var Navbar_default = Object.assign(Navbar, {
   NavbarMinimal
 });
 
 // src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
-var jsx_runtime22 = require("react/jsx-runtime");
+var jsx_runtime23 = require("react/jsx-runtime");
 var defaultAppShellUserExperience = {
   navbar: {
     position: null,
@@ -7316,7 +7349,7 @@ function AppShellUserExperienceProvider({
     }
     return true;
   };
-  return /* @__PURE__ */ jsx_runtime22.jsx(UserExperienceProviderWrapper, {
+  return /* @__PURE__ */ jsx_runtime23.jsx(UserExperienceProviderWrapper, {
     context: appShellUserExperienceContext,
     isValidUserExperience,
     cookieName: cookieName ?? defaultAppShellUserExperienceCookieName,
@@ -7334,7 +7367,7 @@ function AppShellUserExperienceProvider({
 }
 
 // src/core/components/AppShell/index.tsx
-var jsx_runtime23 = require("react/jsx-runtime");
+var jsx_runtime24 = require("react/jsx-runtime");
 var remoraidAppShellLayoutId = "remoraid-app-shell";
 function AppShell({
   gutter,
@@ -7358,25 +7391,25 @@ function AppShell({
     }
     meta.content = computedBodyColor;
   }, [colorScheme]);
-  return /* @__PURE__ */ jsx_runtime23.jsx(AppProvider, {
+  return /* @__PURE__ */ jsx_runtime24.jsx(AppProvider, {
     appContext: appContext2,
     ...componentsProps?.AppProvider,
-    children: /* @__PURE__ */ jsx_runtime23.jsx(AppShellUserExperienceProvider, {
+    children: /* @__PURE__ */ jsx_runtime24.jsx(AppShellUserExperienceProvider, {
       ...componentsProps?.AppShellUserExperienceProvider,
       initialValue: import_lodash13.merge(initialUserExperience, componentsProps?.AppShellUserExperienceProvider?.initialValue),
-      children: /* @__PURE__ */ jsx_runtime23.jsx(import_core13.Box, {
+      children: /* @__PURE__ */ jsx_runtime24.jsx(import_core13.Box, {
         h: "100dvh",
         ...componentsProps?.container,
-        children: /* @__PURE__ */ jsx_runtime23.jsxs(FrameLayout_default, {
+        children: /* @__PURE__ */ jsx_runtime24.jsxs(FrameLayout_default, {
           layoutId: remoraidAppShellLayoutId,
           gutter: gutter ?? theme.primaryGutter,
           ...componentsProps?.layout,
           children: [
-            /* @__PURE__ */ jsx_runtime23.jsx(Navbar_default, {
+            /* @__PURE__ */ jsx_runtime24.jsx(Navbar_default, {
               ...componentsProps?.navbar
             }),
             children,
-            /* @__PURE__ */ jsx_runtime23.jsx(Footer_default, {
+            /* @__PURE__ */ jsx_runtime24.jsx(Footer_default, {
               ...componentsProps?.footer
             })
           ]
@@ -7395,8 +7428,7 @@ var import_core16 = require("@mantine/core");
 // src/core/components/Page/index.tsx
 var import_core14 = require("@mantine/core");
 var import_react19 = __toESM(require("react"));
-var import_navigation3 = require("next/navigation");
-var jsx_runtime24 = require("react/jsx-runtime");
+var jsx_runtime25 = require("react/jsx-runtime");
 var pageContext = import_react19.default.createContext(null);
 var usePage = () => {
   return import_react19.useContext(pageContext);
@@ -7409,7 +7441,7 @@ function Page({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  const pathname = import_navigation3.usePathname();
+  const { pathname } = useRemoraidRouter();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
   import_react19.useEffect(() => {
@@ -7419,11 +7451,11 @@ function Page({
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx_runtime24.jsx(pageContext.Provider, {
-    value: { name: name ?? pathname, pageId, ...config },
-    children: /* @__PURE__ */ jsx_runtime24.jsx(PageContainer, {
+  return /* @__PURE__ */ jsx_runtime25.jsx(pageContext.Provider, {
+    value: { name: name ?? pageId, pageId, ...config },
+    children: /* @__PURE__ */ jsx_runtime25.jsx(PageContainer, {
       ...componentsProps?.PageContainer,
-      children: /* @__PURE__ */ jsx_runtime24.jsx(import_core14.Stack, {
+      children: /* @__PURE__ */ jsx_runtime25.jsx(import_core14.Stack, {
         gap: gap ?? theme.primaryGutter,
         ...componentsProps?.Stack,
         className: clsx_default("remoraid-page", componentsProps?.Stack?.className),
@@ -7439,7 +7471,7 @@ var import_react20 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core15 = require("@mantine/core");
-var jsx_runtime25 = require("react/jsx-runtime");
+var jsx_runtime26 = require("react/jsx-runtime");
 function ScrollableChipGroup({
   value,
   ref,
@@ -7448,16 +7480,16 @@ function ScrollableChipGroup({
   componentsProps,
   children
 }) {
-  return /* @__PURE__ */ jsx_runtime25.jsx(import_core15.ScrollArea, {
+  return /* @__PURE__ */ jsx_runtime26.jsx(import_core15.ScrollArea, {
     ref,
     ...componentsProps?.ScrollArea,
     style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
-    children: /* @__PURE__ */ jsx_runtime25.jsx(import_core15.Chip.Group, {
+    children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Chip.Group, {
       value,
       onChange,
       ...componentsProps?.chipGroup,
       multiple: true,
-      children: /* @__PURE__ */ jsx_runtime25.jsx(import_core15.Flex, {
+      children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Flex, {
         justify: "flex-start",
         align: "center",
         gap,
@@ -7471,7 +7503,7 @@ function ScrollableChipGroup({
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 var import_lodash14 = __toESM(require_lodash());
-var jsx_runtime26 = require("react/jsx-runtime");
+var jsx_runtime27 = require("react/jsx-runtime");
 function WidgetSelectionHeader({
   title,
   pinnableSection = "top" /* Top */,
@@ -7502,7 +7534,7 @@ function WidgetSelectionHeader({
   const scrollAreaRef = import_react20.useRef(null);
   const widgets = widgetsContext2.widgets[page.pageId] ?? {};
   const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
-  const element = /* @__PURE__ */ jsx_runtime26.jsxs(import_core16.Flex, {
+  const element = /* @__PURE__ */ jsx_runtime27.jsxs(import_core16.Flex, {
     justify: "flex-start",
     align: "center",
     gap: "md",
@@ -7521,15 +7553,16 @@ function WidgetSelectionHeader({
     },
     className: clsx_default(!pinnableSection ? "remoraid-non-widget-segment" : undefined, !pinnableSection ? "remoraid-segment" : undefined, componentsProps?.container?.className),
     children: [
-      /* @__PURE__ */ jsx_runtime26.jsx(import_core16.Text, {
+      /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Text, {
         size: "md",
         ...componentsProps?.title,
         children: title ?? page.name
       }),
-      /* @__PURE__ */ jsx_runtime26.jsx(import_core16.Divider, {
-        orientation: "vertical"
+      /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Divider, {
+        orientation: "vertical",
+        ...componentsProps?.divider
       }),
-      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_runtime26.jsx(ScrollableChipGroup, {
+      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_runtime27.jsx(ScrollableChipGroup, {
         value: selectedWidgets,
         ref: scrollAreaRef,
         ...componentsProps?.ScrollableChipGroup,
@@ -7542,19 +7575,19 @@ function WidgetSelectionHeader({
           if (!widget) {
             return;
           }
-          return /* @__PURE__ */ jsx_runtime26.jsxs(import_core16.Menu, {
+          return /* @__PURE__ */ jsx_runtime27.jsxs(import_core16.Menu, {
             trigger: "hover",
             ...componentsProps?.widgetMenu,
             children: [
-              /* @__PURE__ */ jsx_runtime26.jsx(import_core16.Menu.Target, {
-                children: /* @__PURE__ */ jsx_runtime26.jsx(import_core16.Box, {
-                  children: /* @__PURE__ */ jsx_runtime26.jsx(import_core16.Chip, {
+              /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Menu.Target, {
+                children: /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Box, {
+                  children: /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Chip, {
                     variant: selectedWidgets.includes(widgetId) ? "filled" : "outline",
                     color: activeWidget === widgetId ? mantineTheme.primaryColor : "gray",
                     value: widgetId,
                     size: "sm",
                     disabled: disabledWidgets?.includes(widgetId),
-                    icon: /* @__PURE__ */ jsx_runtime26.jsx(import_icons_react9.IconCheck, {
+                    icon: /* @__PURE__ */ jsx_runtime27.jsx(import_icons_react9.IconCheck, {
                       ...theme.componentsProps.icons.extraSmall
                     }),
                     ...componentsProps?.Chip,
@@ -7568,10 +7601,10 @@ function WidgetSelectionHeader({
                   })
                 })
               }),
-              /* @__PURE__ */ jsx_runtime26.jsxs(import_core16.Menu.Dropdown, {
+              /* @__PURE__ */ jsx_runtime27.jsxs(import_core16.Menu.Dropdown, {
                 children: [
-                  /* @__PURE__ */ jsx_runtime26.jsx(import_core16.Menu.Item, {
-                    leftSection: /* @__PURE__ */ jsx_runtime26.jsx(import_icons_react9.IconNavigation, {
+                  /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Menu.Item, {
+                    leftSection: /* @__PURE__ */ jsx_runtime27.jsx(import_icons_react9.IconNavigation, {
                       ...theme.componentsProps.icons.small
                     }),
                     onClick: () => {
@@ -7581,8 +7614,8 @@ function WidgetSelectionHeader({
                     disabled: !widget.selected,
                     children: "Scroll to widget"
                   }),
-                  /* @__PURE__ */ jsx_runtime26.jsx(import_core16.Menu.Item, {
-                    leftSection: /* @__PURE__ */ jsx_runtime26.jsx(import_icons_react9.IconFocus, {
+                  /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Menu.Item, {
+                    leftSection: /* @__PURE__ */ jsx_runtime27.jsx(import_icons_react9.IconFocus, {
                       ...theme.componentsProps.icons.small
                     }),
                     onClick: () => {
@@ -7620,7 +7653,7 @@ function WidgetSelectionHeader({
     });
   }, [activeWidget]);
   if (pinnableSection) {
-    return /* @__PURE__ */ jsx_runtime26.jsx(Pinnable, {
+    return /* @__PURE__ */ jsx_runtime27.jsx(Pinnable, {
       section: pinnableSection,
       initialValue: initiallyPinned,
       ...componentsProps?.Pinnable,
@@ -7667,7 +7700,7 @@ var import_react21 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
 var import_core17 = require("@mantine/core");
-var jsx_runtime27 = require("react/jsx-runtime");
+var jsx_runtime28 = require("react/jsx-runtime");
 function BadgeMinimal({
   label,
   tooltip,
@@ -7675,17 +7708,17 @@ function BadgeMinimal({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_runtime27.jsx(import_core17.Transition, {
+  return /* @__PURE__ */ jsx_runtime28.jsx(import_core17.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime27.jsx(import_core17.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime28.jsx(import_core17.Tooltip, {
       label: tooltip,
       disabled: !Boolean(tooltip),
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_runtime27.jsx(import_core17.Badge, {
+      children: /* @__PURE__ */ jsx_runtime28.jsx(import_core17.Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -7701,7 +7734,7 @@ function BadgeMinimal({
 
 // src/core/components/BadgeGroup/index.tsx
 var import_lodash15 = __toESM(require_lodash());
-var jsx_runtime28 = require("react/jsx-runtime");
+var jsx_runtime29 = require("react/jsx-runtime");
 var react = require("react");
 function BadgeGroup({
   badges: badgesProp,
@@ -7722,9 +7755,9 @@ function BadgeGroup({
       key: i
     });
   });
-  return /* @__PURE__ */ jsx_runtime28.jsxs(jsx_runtime28.Fragment, {
+  return /* @__PURE__ */ jsx_runtime29.jsxs(jsx_runtime29.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_runtime28.jsx(import_core18.Group, {
+      /* @__PURE__ */ jsx_runtime29.jsx(import_core18.Group, {
         gap,
         wrap: "nowrap",
         visibleFrom: numVisibleBadges > 1 ? breakpoint : undefined,
@@ -7732,17 +7765,17 @@ function BadgeGroup({
         className: clsx_default("hide-if-empty", componentsProps?.container?.className),
         children: badgesElement
       }),
-      /* @__PURE__ */ jsx_runtime28.jsx(import_core18.Transition, {
+      /* @__PURE__ */ jsx_runtime29.jsx(import_core18.Transition, {
         mounted: numVisibleBadges > 1,
         transition: "fade",
         duration: theme.transitionDurations.short,
         timingFunction: "ease",
         ...componentsProps?.cumulativeBadgeTransition,
-        children: (transitionStyle) => /* @__PURE__ */ jsx_runtime28.jsxs(import_core18.HoverCard, {
+        children: (transitionStyle) => /* @__PURE__ */ jsx_runtime29.jsxs(import_core18.HoverCard, {
           ...componentsProps?.HoverCard,
           children: [
-            /* @__PURE__ */ jsx_runtime28.jsx(import_core18.HoverCard.Target, {
-              children: /* @__PURE__ */ jsx_runtime28.jsxs(import_core18.Badge, {
+            /* @__PURE__ */ jsx_runtime29.jsx(import_core18.HoverCard.Target, {
+              children: /* @__PURE__ */ jsx_runtime29.jsxs(import_core18.Badge, {
                 hiddenFrom: breakpoint,
                 variant: "dot",
                 ...componentsProps?.cumulativeBadge,
@@ -7756,9 +7789,9 @@ function BadgeGroup({
                 ]
               })
             }),
-            /* @__PURE__ */ jsx_runtime28.jsx(import_core18.HoverCard.Dropdown, {
+            /* @__PURE__ */ jsx_runtime29.jsx(import_core18.HoverCard.Dropdown, {
               p: gap,
-              children: /* @__PURE__ */ jsx_runtime28.jsx(import_core18.Stack, {
+              children: /* @__PURE__ */ jsx_runtime29.jsx(import_core18.Stack, {
                 gap,
                 ...componentsProps?.hoverContainer,
                 children: badgesElement
@@ -7773,7 +7806,7 @@ function BadgeGroup({
 // src/core/components/AlertMinimal/index.tsx
 var import_core19 = require("@mantine/core");
 var import_lodash16 = __toESM(require_lodash());
-var jsx_runtime29 = require("react/jsx-runtime");
+var jsx_runtime30 = require("react/jsx-runtime");
 function AlertMinimal({
   category,
   children,
@@ -7790,21 +7823,22 @@ function AlertMinimal({
     iconSize = "small" /* Small */,
     componentsProps
   } = import_lodash16.merge({}, theme.componentsProps.alerts[category], props);
-  return /* @__PURE__ */ jsx_runtime29.jsx(import_core19.Transition, {
+  return /* @__PURE__ */ jsx_runtime30.jsx(import_core19.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime29.jsxs(import_core19.Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime30.jsxs(import_core19.Alert, {
       title,
       color,
       variant: "light",
       onClose,
       withCloseButton: onClose !== undefined,
-      icon: Icon4 ? /* @__PURE__ */ jsx_runtime29.jsx(Icon4, {
+      icon: Icon4 ? /* @__PURE__ */ jsx_runtime30.jsx(Icon4, {
         ...import_lodash16.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }) : undefined,
+      ...componentsProps?.alert,
       style: import_lodash16.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
@@ -7818,7 +7852,7 @@ var import_core20 = require("@mantine/core");
 var import_react22 = require("react");
 var import_icons_react10 = require("@tabler/icons-react");
 var import_lodash17 = __toESM(require_lodash());
-var jsx_runtime30 = require("react/jsx-runtime");
+var jsx_runtime31 = require("react/jsx-runtime");
 function WidgetWrapper({
   config,
   mt = 0,
@@ -7857,7 +7891,7 @@ function WidgetWrapper({
     updateActiveWidget(null);
   };
   const mounted = Boolean(widget?.selected);
-  let element = /* @__PURE__ */ jsx_runtime30.jsx(import_core20.Transition, {
+  let element = /* @__PURE__ */ jsx_runtime31.jsx(import_core20.Transition, {
     mounted,
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
@@ -7869,7 +7903,7 @@ function WidgetWrapper({
       }
       componentsProps?.transition?.onExited?.();
     },
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime30.jsxs(import_core20.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime31.jsxs(import_core20.Paper, {
       ref: containerRef,
       p: "md",
       shadow: "md",
@@ -7892,12 +7926,12 @@ function WidgetWrapper({
       className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
-        /* @__PURE__ */ jsx_runtime30.jsx(Controls, {
+        /* @__PURE__ */ jsx_runtime31.jsx(Controls, {
           dragContainerRef: containerRef,
           groupRef: controlsContainerRef,
           mounted: activeWidget === config.widgetId,
           ...componentsProps?.controls,
-          children: /* @__PURE__ */ jsx_runtime30.jsx(ControlButton, {
+          children: /* @__PURE__ */ jsx_runtime31.jsx(ControlButton, {
             mounted: withCloseButton,
             icon: import_icons_react10.IconX,
             tooltip: "Hide widget",
@@ -7926,7 +7960,7 @@ function WidgetWrapper({
     })
   });
   if (pinnableSection !== undefined) {
-    element = /* @__PURE__ */ jsx_runtime30.jsx(Pinnable, {
+    element = /* @__PURE__ */ jsx_runtime31.jsx(Pinnable, {
       section: pinnableSection,
       controlsContainer,
       hidden: Boolean(widget?.hidden),
@@ -7963,7 +7997,7 @@ function WidgetWrapper({
 var import_core21 = require("@mantine/core");
 var import_react23 = require("react");
 var import_lodash18 = __toESM(require_lodash());
-var jsx_runtime31 = require("react/jsx-runtime");
+var jsx_runtime32 = require("react/jsx-runtime");
 var react2 = require("react");
 function Widget({
   id,
@@ -7986,7 +8020,7 @@ function Widget({
   const badgesGap = (typeof gaps === "object" ? gaps.badges : gaps) ?? "xs";
   const buttonsGap = (typeof gaps === "object" ? gaps.buttons : gaps) ?? "xs";
   const alertsGap = (typeof gaps === "object" ? gaps.alerts : gaps) ?? "xs";
-  return /* @__PURE__ */ jsx_runtime31.jsx(WidgetWrapper, {
+  return /* @__PURE__ */ jsx_runtime32.jsx(WidgetWrapper, {
     config: {
       widgetId: id,
       ...config,
@@ -7998,39 +8032,39 @@ function Widget({
     mt,
     ...componentsProps?.wrapper,
     pinnableSection: pinnableSection ?? componentsProps?.wrapper?.pinnableSection,
-    children: /* @__PURE__ */ jsx_runtime31.jsxs(import_core21.Stack, {
+    children: /* @__PURE__ */ jsx_runtime32.jsxs(import_core21.Stack, {
       gap: "md",
       mih: 0,
       ...componentsProps?.contentContainer,
       children: [
-        /* @__PURE__ */ jsx_runtime31.jsxs(import_core21.Group, {
+        /* @__PURE__ */ jsx_runtime32.jsxs(import_core21.Group, {
           justify: "space-between",
           wrap: "nowrap",
           children: [
-            /* @__PURE__ */ jsx_runtime31.jsxs(import_core21.Stack, {
+            /* @__PURE__ */ jsx_runtime32.jsxs(import_core21.Stack, {
               gap: 4,
               children: [
-                /* @__PURE__ */ jsx_runtime31.jsxs(import_core21.Group, {
+                /* @__PURE__ */ jsx_runtime32.jsxs(import_core21.Group, {
                   gap: badgesGap,
                   wrap: "nowrap",
                   children: [
-                    /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Title, {
+                    /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Title, {
                       order: 1,
                       size: "h2",
                       lineClamp: 1,
                       ...componentsProps?.title,
                       children: title ?? id
                     }),
-                    badges !== undefined && /* @__PURE__ */ jsx_runtime31.jsx(BadgeGroup, {
+                    badges !== undefined && /* @__PURE__ */ jsx_runtime32.jsx(BadgeGroup, {
                       badges,
                       gap: badgesGap,
                       ...componentsProps?.badgeGroup
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Transition, {
+                /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Transition, {
                   mounted: Boolean(description),
-                  children: (transitionStyle) => /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Text, {
+                  children: (transitionStyle) => /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Text, {
                     size: "sm",
                     c: "dimmed",
                     ...componentsProps?.description,
@@ -8040,7 +8074,7 @@ function Widget({
                 })
               ]
             }),
-            /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Group, {
+            /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Group, {
               gap: buttonsGap,
               wrap: "nowrap",
               children: buttons !== undefined && buttons.map((button, i) => {
@@ -8055,12 +8089,12 @@ function Widget({
             })
           ]
         }),
-        /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Box, {
-          children: /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Divider, {
+        /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Box, {
+          children: /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Divider, {
             ...componentsProps?.divider
           })
         }),
-        /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Stack, {
+        /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Stack, {
           align: "stretch",
           gap: alertsGap,
           ...componentsProps?.alertsContainer,
@@ -8075,12 +8109,12 @@ function Widget({
             });
           })
         }),
-        (loading || import_react23.Children.toArray(children).length > 0) && /* @__PURE__ */ jsx_runtime31.jsx(import_core21.ScrollArea.Autosize, {
+        (loading || import_react23.Children.toArray(children).length > 0) && /* @__PURE__ */ jsx_runtime32.jsx(import_core21.ScrollArea.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           className: clsx_default("remoraid-widget-children-container", componentsProps?.childrenContainer?.className),
-          children: loading ? /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Center, {
-            children: /* @__PURE__ */ jsx_runtime31.jsx(import_core21.Loader, {
+          children: loading ? /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Center, {
+            children: /* @__PURE__ */ jsx_runtime32.jsx(import_core21.Loader, {
               ...componentsProps?.loader
             })
           }) : children
@@ -8090,19 +8124,18 @@ function Widget({
   });
 }
 // src/core/components/NotFoundPage/index.tsx
-var import_navigation4 = require("next/navigation");
-var jsx_runtime32 = require("react/jsx-runtime");
+var jsx_runtime33 = require("react/jsx-runtime");
 function NotFoundPage({
   children,
   message,
   componentsProps
 }) {
-  const pathname = import_navigation4.usePathname();
-  return /* @__PURE__ */ jsx_runtime32.jsxs(Page, {
+  const { pathname } = useRemoraidRouter();
+  return /* @__PURE__ */ jsx_runtime33.jsxs(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx_runtime32.jsx(AlertMinimal, {
+      /* @__PURE__ */ jsx_runtime33.jsx(AlertMinimal, {
         category: "negative" /* Negative */,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -8112,7 +8145,7 @@ function NotFoundPage({
   });
 }
 // src/core/components/EnvironmentShell/index.tsx
-var jsx_runtime33 = require("react/jsx-runtime");
+var jsx_runtime34 = require("react/jsx-runtime");
 var EnvironmentShellVariant;
 ((EnvironmentShellVariant2) => {
   EnvironmentShellVariant2["Alert"] = "alert";
@@ -8129,7 +8162,7 @@ function EnvironmentShell({
 }) {
   const undefinedKeys = Object.keys(environment).filter((key) => environment[key] === undefined);
   const defaultMessage = `Components could not be rendered because the following environment variable${undefinedKeys.length > 1 ? "s" : ""} are not specified: ${undefinedKeys.join(", ")}.`;
-  const alertElement = /* @__PURE__ */ jsx_runtime33.jsx(AlertMinimal, {
+  const alertElement = /* @__PURE__ */ jsx_runtime34.jsx(AlertMinimal, {
     mounted: undefinedKeys.length > 0,
     title: `Please specify environment variable${undefinedKeys.length > 1 ? "s" : ""}`,
     category: "negative" /* Negative */,
@@ -8141,7 +8174,7 @@ function EnvironmentShell({
   }
   if (variant === "alert" /* Alert */) {
     if (includeAlertContainer) {
-      return /* @__PURE__ */ jsx_runtime33.jsx(PageContainer, {
+      return /* @__PURE__ */ jsx_runtime34.jsx(PageContainer, {
         ...componentsProps?.alertContainer,
         children: alertElement
       });
@@ -8160,14 +8193,14 @@ var import_icons_react12 = require("@tabler/icons-react");
 // src/core/components/SettingsWidget/SaveButton/index.tsx
 var import_icons_react11 = require("@tabler/icons-react");
 var import_core22 = require("@mantine/core");
-var jsx_runtime34 = require("react/jsx-runtime");
+var jsx_runtime35 = require("react/jsx-runtime");
 function SaveButton({
   onSaveChanges,
   insideContainer,
   componentsProps
 }) {
   const settingsWidgetOptions = useSettingsWidgetContext();
-  const button = /* @__PURE__ */ jsx_runtime34.jsx(RemoraidButton, {
+  const button = /* @__PURE__ */ jsx_runtime35.jsx(RemoraidButton, {
     label: "Save Changes",
     icon: import_icons_react11.IconDeviceFloppy,
     onClick: onSaveChanges,
@@ -8182,7 +8215,7 @@ function SaveButton({
     }
   });
   if (insideContainer !== false) {
-    return /* @__PURE__ */ jsx_runtime34.jsx(import_core22.Group, {
+    return /* @__PURE__ */ jsx_runtime35.jsx(import_core22.Group, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -8194,7 +8227,7 @@ function SaveButton({
 }
 
 // src/core/components/SettingsWidget/index.tsx
-var jsx_runtime35 = require("react/jsx-runtime");
+var jsx_runtime36 = require("react/jsx-runtime");
 var defaultSettingsWidgetContext = {};
 var settingsWidgetContext = import_react24.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
@@ -8207,9 +8240,9 @@ function SettingsWidget({
   custom,
   widgetProps
 }) {
-  return /* @__PURE__ */ jsx_runtime35.jsx(settingsWidgetContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime36.jsx(settingsWidgetContext.Provider, {
     value: { custom, unsavedChanges },
-    children: /* @__PURE__ */ jsx_runtime35.jsx(Widget, {
+    children: /* @__PURE__ */ jsx_runtime36.jsx(Widget, {
       title: "Settings",
       id: "settings",
       ...widgetProps,
@@ -8249,22 +8282,22 @@ var import_core24 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
 var import_core23 = require("@mantine/core");
-var jsx_runtime36 = require("react/jsx-runtime");
+var jsx_runtime37 = require("react/jsx-runtime");
 function Row({
   children,
   label
 }) {
   const options = useSettingsTableOptions();
-  return /* @__PURE__ */ jsx_runtime36.jsxs(import_core23.Table.Tr, {
+  return /* @__PURE__ */ jsx_runtime37.jsxs(import_core23.Table.Tr, {
     children: [
-      /* @__PURE__ */ jsx_runtime36.jsx(import_core23.Table.Th, {
+      /* @__PURE__ */ jsx_runtime37.jsx(import_core23.Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsx_runtime36.jsx(import_core23.Text, {
+        children: /* @__PURE__ */ jsx_runtime37.jsx(import_core23.Text, {
           size: "sm",
           children: label
         })
       }),
-      /* @__PURE__ */ jsx_runtime36.jsx(import_core23.Table.Td, {
+      /* @__PURE__ */ jsx_runtime37.jsx(import_core23.Table.Td, {
         py: "xs",
         children
       })
@@ -8273,7 +8306,7 @@ function Row({
 }
 
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var jsx_runtime37 = require("react/jsx-runtime");
+var jsx_runtime38 = require("react/jsx-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
@@ -8287,16 +8320,16 @@ function SettingsTable({
 }) {
   const children = asChildrenOfType(Row, childrenProp, "Check children passed to 'SettingsTable' component.");
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_runtime37.jsx(settingsTableOptionsContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime38.jsx(settingsTableOptionsContext.Provider, {
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsx_runtime37.jsx(import_core24.Table, {
+    children: /* @__PURE__ */ jsx_runtime38.jsx(import_core24.Table, {
       bg: theme.transparentBackground,
       withTableBorder: true,
       variant: "vertical",
       layout: "fixed",
-      children: /* @__PURE__ */ jsx_runtime37.jsx(import_core24.Table.Tbody, {
+      children: /* @__PURE__ */ jsx_runtime38.jsx(import_core24.Table.Tbody, {
         children
       })
     })
@@ -8308,7 +8341,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
 // src/core/components/NavbarSettingsWidget/index.tsx
 var import_lodash19 = __toESM(require_lodash());
 var import_core25 = require("@mantine/core");
-var jsx_runtime38 = require("react/jsx-runtime");
+var jsx_runtime39 = require("react/jsx-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
 function NavbarSettingsWidget({
   additionalRows: additionalRowsProp,
@@ -8330,7 +8363,7 @@ function NavbarSettingsWidget({
     ["right" /* Right */]: "Right",
     ["content" /* Content */]: "Content section"
   };
-  return /* @__PURE__ */ jsx_runtime38.jsx(SettingsWidget_default, {
+  return /* @__PURE__ */ jsx_runtime39.jsx(SettingsWidget_default, {
     widgetProps: {
       id: defaultNavbarSettingsWidgetId,
       title: "Navbar Settings",
@@ -8343,12 +8376,12 @@ function NavbarSettingsWidget({
       }));
     },
     custom: !import_lodash19.isEqual(userExperience.navbar, initialUserExperience.navbar),
-    children: /* @__PURE__ */ jsx_runtime38.jsxs(SettingsTable_default, {
+    children: /* @__PURE__ */ jsx_runtime39.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
-        /* @__PURE__ */ jsx_runtime38.jsx(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx_runtime39.jsx(SettingsTable_default.Row, {
           label: "Select navbar position",
-          children: /* @__PURE__ */ jsx_runtime38.jsx(import_core25.Select, {
+          children: /* @__PURE__ */ jsx_runtime39.jsx(import_core25.Select, {
             value: userExperience.navbar.position ?? "hidden",
             data: app.navbarVariant === null ? [] : supportedNavbarPositions[app.navbarVariant].map((position) => ({
               value: position ?? "hidden",
@@ -8368,9 +8401,9 @@ function NavbarSettingsWidget({
             }
           })
         }, "select-navbar-position"),
-        /* @__PURE__ */ jsx_runtime38.jsx(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx_runtime39.jsx(SettingsTable_default.Row, {
           label: "Select navbar mode",
-          children: /* @__PURE__ */ jsx_runtime38.jsx(import_core25.Select, {
+          children: /* @__PURE__ */ jsx_runtime39.jsx(import_core25.Select, {
             value: userExperience.navbar.mode,
             data: Object.values(NavbarMode).map((mode) => ({
               value: mode,
@@ -8391,7 +8424,7 @@ function NavbarSettingsWidget({
           if (isValidElementOfType(SettingsTable_default.Row, row)) {
             return row;
           }
-          return /* @__PURE__ */ jsx_runtime38.jsx(SettingsTable_default.Row, {
+          return /* @__PURE__ */ jsx_runtime39.jsx(SettingsTable_default.Row, {
             ...row
           }, i);
         })
@@ -8402,7 +8435,7 @@ function NavbarSettingsWidget({
 // src/core/components/FooterSettingsWidget/index.tsx
 var import_lodash20 = __toESM(require_lodash());
 var import_core26 = require("@mantine/core");
-var jsx_runtime39 = require("react/jsx-runtime");
+var jsx_runtime40 = require("react/jsx-runtime");
 var defaultFooterSettingsWidgetId = "footer-settings";
 function FooterSettingsWidget({
   additionalRows: additionalRowsProp,
@@ -8419,7 +8452,7 @@ function FooterSettingsWidget({
     ["right" /* Right */]: "Right",
     ["content" /* Content */]: "Content section"
   };
-  return /* @__PURE__ */ jsx_runtime39.jsx(SettingsWidget_default, {
+  return /* @__PURE__ */ jsx_runtime40.jsx(SettingsWidget_default, {
     widgetProps: {
       id: defaultFooterSettingsWidgetId,
       title: "Footer Settings",
@@ -8432,12 +8465,12 @@ function FooterSettingsWidget({
       }));
     },
     custom: !import_lodash20.isEqual(userExperience.footer, initialUserExperience.footer),
-    children: /* @__PURE__ */ jsx_runtime39.jsxs(SettingsTable_default, {
+    children: /* @__PURE__ */ jsx_runtime40.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
-        /* @__PURE__ */ jsx_runtime39.jsx(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx_runtime40.jsx(SettingsTable_default.Row, {
           label: "Select footer position",
-          children: /* @__PURE__ */ jsx_runtime39.jsx(import_core26.Select, {
+          children: /* @__PURE__ */ jsx_runtime40.jsx(import_core26.Select, {
             value: userExperience.footer.position ?? "hidden",
             data: app.footerVariant === null ? [] : supportedFooterPositions[app.footerVariant].map((position) => ({
               value: position ?? "hidden",
@@ -8461,7 +8494,7 @@ function FooterSettingsWidget({
           if (isValidElementOfType(SettingsTable_default.Row, row)) {
             return row;
           }
-          return /* @__PURE__ */ jsx_runtime39.jsx(SettingsTable_default.Row, {
+          return /* @__PURE__ */ jsx_runtime40.jsx(SettingsTable_default.Row, {
             ...row
           }, i);
         })
@@ -8471,7 +8504,7 @@ function FooterSettingsWidget({
 }
 // src/core/components/ContextClusterProvider/index.tsx
 var import_react26 = __toESM(require("react"));
-var jsx_runtime40 = require("react/jsx-runtime");
+var jsx_runtime41 = require("react/jsx-runtime");
 var createContextCluster = (generalDefaultValue, staticIds) => {
   const isStaticId = (id) => {
     if (staticIds?.find((staticId) => staticId === id)) {
@@ -8481,13 +8514,13 @@ var createContextCluster = (generalDefaultValue, staticIds) => {
   };
   const contexts = {};
   const defaultValues = {};
-  const createContext9 = (id, defaultValue) => {
+  const createContext10 = (id, defaultValue) => {
     const context = import_react26.default.createContext(defaultValue ?? generalDefaultValue);
     contexts[id] = context;
     defaultValues[id] = defaultValue ?? generalDefaultValue;
     return context;
   };
-  const useContext13 = (id) => {
+  const useContext14 = (id) => {
     if (isStaticId(id)) {
       return contexts[id] ? import_react26.default.useContext(contexts[id]) : generalDefaultValue;
     }
@@ -8497,8 +8530,8 @@ var createContextCluster = (generalDefaultValue, staticIds) => {
     contexts,
     defaultValues,
     generalDefaultValue,
-    createContext: createContext9,
-    useContext: useContext13
+    createContext: createContext10,
+    useContext: useContext14
   };
 };
 function ContextClusterProvider({
@@ -8506,7 +8539,7 @@ function ContextClusterProvider({
   values = {},
   children
 }) {
-  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => context ? /* @__PURE__ */ jsx_runtime40.jsx(context.Provider, {
+  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => context ? /* @__PURE__ */ jsx_runtime41.jsx(context.Provider, {
     value: values[id] ?? cluster.defaultValues[id] ?? cluster.generalDefaultValue,
     children: t
   }) : t, children);
@@ -8514,7 +8547,7 @@ function ContextClusterProvider({
 // src/core/components/InputWrapperScrollArea/index.tsx
 var import_core27 = require("@mantine/core");
 var import_react27 = require("react");
-var jsx_runtime41 = require("react/jsx-runtime");
+var jsx_runtime42 = require("react/jsx-runtime");
 function InputWrapperScrollArea({
   children,
   label,
@@ -8526,7 +8559,7 @@ function InputWrapperScrollArea({
 }) {
   const theme = useRemoraidTheme();
   const [isHovering, setIsHovering] = import_react27.useState(false);
-  return /* @__PURE__ */ jsx_runtime41.jsx(import_core27.Input.Wrapper, {
+  return /* @__PURE__ */ jsx_runtime42.jsx(import_core27.Input.Wrapper, {
     label,
     error,
     onMouseEnter: () => setIsHovering(true),
@@ -8534,7 +8567,7 @@ function InputWrapperScrollArea({
     description,
     withAsterisk: required,
     ...componentsProps?.container,
-    children: /* @__PURE__ */ jsx_runtime41.jsx(import_core27.Paper, {
+    children: /* @__PURE__ */ jsx_runtime42.jsx(import_core27.Paper, {
       shadow: "none",
       p: 0,
       mt: Boolean(description) ? 4 : 0,
@@ -8545,12 +8578,12 @@ function InputWrapperScrollArea({
         transition: "border-color .1s",
         borderColor: error ? "var(--mantine-color-error)" : isHovering ? "var(--mantine-primary-color-filled)" : undefined
       },
-      children: /* @__PURE__ */ jsx_runtime41.jsx(import_core27.ScrollArea, {
+      children: /* @__PURE__ */ jsx_runtime42.jsx(import_core27.ScrollArea, {
         mah,
         px: "md",
         flex: 1,
         ...componentsProps?.ScrollArea,
-        children: /* @__PURE__ */ jsx_runtime41.jsx(import_core27.Box, {
+        children: /* @__PURE__ */ jsx_runtime42.jsx(import_core27.Box, {
           ...componentsProps?.childrenContainer,
           children
         })