remoraid 2.43.2 → 2.45.0

package/dist/core/index.js

@@ -5953,7 +5953,12 @@ function UserExperienceProviderWrapper({
   initialValue
 }) {
   const [cookies, setCookie] = 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] = useState3(initialUserExperience);
   const [processedCookie, setProcessedCookie] = useState3(false);
   const updateUserExperience = (p) => {
@@ -6047,29 +6052,72 @@ function LayoutsProvider({
   });
 }
 
-// src/core/components/RemoraidProvider/index.tsx
+// src/core/components/RemoraidProvider/RouterProvider/index.tsx
+import {
+  createContext as createContext4,
+  useContext as useContext6
+} from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
+var defaultRouter = {
+  pathname: "/",
+  push: () => {}
+};
+var routerContext = createContext4(defaultRouter);
+var useRemoraidRouter = () => {
+  return useContext6(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__ */ jsx7(routerContext.Provider, {
+    value: router ?? getWindowRouter(),
+    children
+  });
+}
+
+// src/core/components/RemoraidProvider/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
 function RemoraidProvider({
   children,
   theme,
   initialUserExperience,
+  router,
   componentsProps
 }) {
-  return /* @__PURE__ */ jsx7(CookiesProvider, {
+  return /* @__PURE__ */ jsx8(CookiesProvider, {
     ...componentsProps?.CookiesProvider,
-    children: /* @__PURE__ */ jsx7(HydrationStatusProvider, {
-      ...componentsProps?.HydrationStatusProviderProps,
-      children: /* @__PURE__ */ jsx7(ThemeProvider, {
-        theme,
-        ...componentsProps?.ThemeProvider,
-        children: /* @__PURE__ */ jsx7(CoreUserExperienceProvider, {
-          initialValue: initialUserExperience,
-          ...componentsProps?.CoreUserExperienceProvider,
-          children: /* @__PURE__ */ jsx7(WidgetsProvider, {
-            ...componentsProps?.WidgetsProvider,
-            children: /* @__PURE__ */ jsx7(LayoutsProvider, {
-              ...componentsProps?.LayoutsProviderProps,
-              children
+    children: /* @__PURE__ */ jsx8(RouterProvider, {
+      router,
+      ...componentsProps?.RouterProvider,
+      children: /* @__PURE__ */ jsx8(HydrationStatusProvider, {
+        ...componentsProps?.HydrationStatusProviderProps,
+        children: /* @__PURE__ */ jsx8(ThemeProvider, {
+          theme,
+          ...componentsProps?.ThemeProvider,
+          children: /* @__PURE__ */ jsx8(CoreUserExperienceProvider, {
+            initialValue: initialUserExperience,
+            ...componentsProps?.CoreUserExperienceProvider,
+            children: /* @__PURE__ */ jsx8(WidgetsProvider, {
+              ...componentsProps?.WidgetsProvider,
+              children: /* @__PURE__ */ jsx8(LayoutsProvider, {
+                ...componentsProps?.LayoutsProviderProps,
+                children
+              })
             })
           })
         })
@@ -6083,8 +6131,8 @@ import { useEffect as useEffect4 } from "react";
 
 // src/core/components/AppShell/AppProvider/index.tsx
 var import_lodash4 = __toESM(require_lodash(), 1);
-import { createContext as createContext4, useContext as useContext6 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { createContext as createContext5, useContext as useContext7 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var defaultAppContext = {
   name: "Hello, World!",
   nav: [],
@@ -6092,16 +6140,16 @@ var defaultAppContext = {
   footerVariant: "minimal" /* Minimal */,
   navbarMobileVariant: null
 };
-var appContext = createContext4(defaultAppContext);
+var appContext = createContext5(defaultAppContext);
 var useRemoraidApp = () => {
-  return useContext6(appContext);
+  return useContext7(appContext);
 };
 function AppProvider({
   appContext: appContextProp,
   children
 }) {
   const { logo, ...appContextPropWithoutLogo } = appContextProp;
-  return /* @__PURE__ */ jsx8(appContext.Provider, {
+  return /* @__PURE__ */ jsx9(appContext.Provider, {
     value: { ...import_lodash4.merge(defaultAppContext, appContextPropWithoutLogo), logo },
     children
   });
@@ -6112,7 +6160,7 @@ var import_lodash13 = __toESM(require_lodash(), 1);
 
 // src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
 var import_lodash12 = __toESM(require_lodash(), 1);
-import { useContext as useContext9 } from "react";
+import { useContext as useContext10 } from "react";
 
 // src/core/components/AppShell/Footer/FooterMinimal/index.tsx
 import { Center } from "@mantine/core";
@@ -6145,7 +6193,7 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/core/components/Page/PageContainer/index.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function PageContainer({
   children,
   p = 0,
@@ -6153,7 +6201,7 @@ function PageContainer({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx9(Container, {
+  return /* @__PURE__ */ jsx10(Container, {
     size: theme.containerSize,
     p,
     w: "100%",
@@ -6171,14 +6219,14 @@ import {
   Stack
 } from "@mantine/core";
 import {
-  createContext as createContext6,
+  createContext as createContext7,
   useCallback,
-  useContext as useContext8,
+  useContext as useContext9,
   useMemo as useMemo3
 } from "react";
 
 // src/core/components/FrameLayout/Element/index.tsx
-import { createContext as createContext5, useContext as useContext7 } from "react";
+import { createContext as createContext6, useContext as useContext8 } from "react";
 import { Box, Portal } from "@mantine/core";
 
 // src/core/lib/errors.ts
@@ -6191,10 +6239,10 @@ class InvalidComponentUsageError extends Error {
 
 // src/core/components/FrameLayout/Element/index.tsx
 var import_lodash5 = __toESM(require_lodash(), 1);
-import { jsx as jsx10 } from "react/jsx-runtime";
-var layoutElementContext = createContext5(null);
+import { jsx as jsx11 } from "react/jsx-runtime";
+var layoutElementContext = createContext6(null);
 var useFrameLayoutElement = () => {
-  return useContext7(layoutElementContext);
+  return useContext8(layoutElementContext);
 };
 function Element2({
   section,
@@ -6224,17 +6272,17 @@ function Element2({
   if (section === "left" /* Left */ || section === "right" /* Right */) {
     containerProps.h = "100%";
   }
-  const element = includePageContainer ? /* @__PURE__ */ jsx10(PageContainer, {
+  const element = includePageContainer ? /* @__PURE__ */ jsx11(PageContainer, {
     p: 0,
     hidden,
     ...componentsProps?.PageContainer,
     children
   }) : children;
-  return /* @__PURE__ */ jsx10(Portal, {
+  return /* @__PURE__ */ jsx11(Portal, {
     target: layout.sections[section],
-    children: /* @__PURE__ */ jsx10(layoutElementContext.Provider, {
+    children: /* @__PURE__ */ jsx11(layoutElementContext.Provider, {
       value: { layoutType: "frame" /* Frame */, section },
-      children: includeContainer ? /* @__PURE__ */ jsx10(Box, {
+      children: includeContainer ? /* @__PURE__ */ jsx11(Box, {
         "data-hidden": hidden,
         ...import_lodash5.merge(containerProps, componentsProps?.container),
         className: clsx_default("remoraid-frame-layout-element", containerProps?.className, componentsProps?.container?.className),
@@ -6245,10 +6293,10 @@ function Element2({
 }
 
 // src/core/components/FrameLayout/index.tsx
-import { jsx as jsx11, jsxs } from "react/jsx-runtime";
-var layoutContext = createContext6(null);
+import { jsx as jsx12, jsxs } from "react/jsx-runtime";
+var layoutContext = createContext7(null);
 var useFrameLayout = () => {
-  return useContext8(layoutContext);
+  return useContext9(layoutContext);
 };
 function FrameLayout({
   layoutId,
@@ -6305,7 +6353,7 @@ function FrameLayout({
       ["content" /* Content */]: n
     }));
   }, [setSections]);
-  const contentSection = /* @__PURE__ */ jsx11(Stack, {
+  const contentSection = /* @__PURE__ */ jsx12(Stack, {
     ref: contentSectionRef,
     h: "100%",
     gap: gutter,
@@ -6320,7 +6368,7 @@ function FrameLayout({
     ...layout,
     layoutId
   }), [layout?.sections, defaultSections, layoutId]);
-  return /* @__PURE__ */ jsx11(layoutContext.Provider, {
+  return /* @__PURE__ */ jsx12(layoutContext.Provider, {
     value: layoutContextValue,
     children: /* @__PURE__ */ jsxs(Group, {
       gap: 0,
@@ -6333,7 +6381,7 @@ function FrameLayout({
       },
       className: clsx_default("remoraid-frame-layout", componentsProps?.horizontalContainer?.className),
       children: [
-        /* @__PURE__ */ jsx11(Group, {
+        /* @__PURE__ */ jsx12(Group, {
           ref: leftSectionRef,
           h: "100%",
           wrap: "nowrap",
@@ -6349,19 +6397,19 @@ function FrameLayout({
           ...componentsProps?.verticalContainer,
           className: clsx_default("remoraid-frame-layout-vertical-container", componentsProps?.verticalContainer?.className),
           children: [
-            /* @__PURE__ */ jsx11(Stack, {
+            /* @__PURE__ */ jsx12(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__ */ jsx11(ScrollArea, {
+            includeScrollArea ? /* @__PURE__ */ jsx12(ScrollArea, {
               flex: 1,
               ...componentsProps?.ScrollArea,
               children: contentSection
             }) : contentSection,
-            /* @__PURE__ */ jsx11(Stack, {
+            /* @__PURE__ */ jsx12(Stack, {
               ref: bottomSectionRef,
               gap: gutter,
               flex: 0,
@@ -6370,7 +6418,7 @@ function FrameLayout({
             })
           ]
         }),
-        /* @__PURE__ */ jsx11(Group, {
+        /* @__PURE__ */ jsx12(Group, {
           ref: rightSectionRef,
           h: "100%",
           gap: gutter,
@@ -6388,7 +6436,7 @@ var FrameLayout_default = Object.assign(FrameLayout, {
 });
 
 // src/core/components/AppShell/Footer/FooterMinimal/index.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function FooterMinimal({
   icon: Icon2 = IconPennant,
   componentsProps
@@ -6399,10 +6447,10 @@ function FooterMinimal({
       footer: { position }
     }
   } = useAppShellUserExperience();
-  const content = /* @__PURE__ */ jsx12(PageContainer, {
+  const content = /* @__PURE__ */ jsx13(PageContainer, {
     ...componentsProps?.container,
-    children: /* @__PURE__ */ jsx12(Center, {
-      children: /* @__PURE__ */ jsx12(Icon2, {
+    children: /* @__PURE__ */ jsx13(Center, {
+      children: /* @__PURE__ */ jsx13(Icon2, {
         color: "var(--mantine-color-default-border)",
         ...theme.componentsProps.icons.huge,
         ...componentsProps?.icon
@@ -6410,7 +6458,7 @@ function FooterMinimal({
     })
   });
   if (position === "bottom" /* Bottom */) {
-    return /* @__PURE__ */ jsx12(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx13(FrameLayout_default.Element, {
       section: position,
       includeContainer: true,
       ...componentsProps?.layoutElement,
@@ -6425,7 +6473,7 @@ function FooterMinimal({
 }
 
 // src/core/components/AppShell/Footer/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var supportedFooterPositions = {
   ["minimal" /* Minimal */]: [
     null,
@@ -6439,7 +6487,7 @@ var defaultFooterPositions = {
 function Footer({ componentsProps }) {
   const { footerVariant } = useRemoraidApp();
   if (footerVariant === "minimal" /* Minimal */) {
-    return /* @__PURE__ */ jsx13(FooterMinimal, {
+    return /* @__PURE__ */ jsx14(FooterMinimal, {
       ...componentsProps?.FooterMinimal
     });
   }
@@ -6453,7 +6501,6 @@ var Footer_default = Object.assign(Footer, {
 import { useState as useState7 } from "react";
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-import { isValidElement as isValidElement4 } from "react";
 import {
   Box as Box3,
   Group as Group2,
@@ -6461,7 +6508,6 @@ import {
   ScrollArea as ScrollArea2,
   Stack as Stack2
 } from "@mantine/core";
-import { usePathname as usePathname2, useRouter as useRouter2 } from "next/navigation";
 var import_lodash8 = __toESM(require_lodash(), 1);
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/NavigationMenu/index.tsx
@@ -6471,9 +6517,8 @@ import {
   Transition,
   useMantineTheme as useMantineTheme2
 } from "@mantine/core";
-import { usePathname, useRouter } from "next/navigation";
 import { isValidElement as isValidElement2 } from "react";
-import { jsx as jsx14, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
 function NavigationMenu({
   target,
   elements,
@@ -6482,13 +6527,13 @@ function NavigationMenu({
 }) {
   const theme = useRemoraidTheme();
   const mantineTheme = useMantineTheme2();
-  const pathname = usePathname();
-  const router = useRouter();
-  const item = (element) => /* @__PURE__ */ jsx14(Transition, {
+  const router = useRemoraidRouter();
+  const { pathname } = router;
+  const item = (element) => /* @__PURE__ */ jsx15(Transition, {
     mounted: element.mounted ?? true,
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx14(Menu.Item, {
-      leftSection: element.icon ? /* @__PURE__ */ jsx14(element.icon, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx15(Menu.Item, {
+      leftSection: element.icon ? /* @__PURE__ */ jsx15(element.icon, {
         ...theme.componentsProps.icons.small
       }) : undefined,
       c: element.type === "anchor" /* Anchor */ && element.href === pathname ? mantineTheme.primaryColor : undefined,
@@ -6512,17 +6557,17 @@ function NavigationMenu({
     trigger: "click-hover",
     ...componentsProps?.Menu,
     children: [
-      /* @__PURE__ */ jsx14(Menu.Target, {
-        children: /* @__PURE__ */ jsx14(Box2, {
+      /* @__PURE__ */ jsx15(Menu.Target, {
+        children: /* @__PURE__ */ jsx15(Box2, {
           children: targetElement
         })
       }),
       /* @__PURE__ */ jsxs2(Menu.Dropdown, {
         children: [
-          label !== undefined && /* @__PURE__ */ jsx14(Menu.Label, {
+          label !== undefined && /* @__PURE__ */ jsx15(Menu.Label, {
             children: label
           }),
-          elements.map((element, i) => /* @__PURE__ */ jsx14(NavigationMenu, {
+          elements.map((element, i) => /* @__PURE__ */ jsx15(NavigationMenu, {
             target: item(element),
             elements: element.children,
             componentsProps
@@ -6548,7 +6593,7 @@ import { IconClick } from "@tabler/icons-react";
 import {
   isValidElement as isValidElement3
 } from "react";
-import { jsx as jsx15, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 var defaultRemoraidButtonSize = "sm";
 function RemoraidButton({
   label,
@@ -6572,7 +6617,7 @@ function RemoraidButton({
   const collapsed = collapsedProp ?? false;
   const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
   const Icon3 = iconProp ?? IconClick;
-  const iconElement = isValidElement3(Icon3) ? Icon3 : /* @__PURE__ */ jsx15(Icon3, {
+  const iconElement = isValidElement3(Icon3) ? Icon3 : /* @__PURE__ */ jsx16(Icon3, {
     ...import_lodash7.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   });
   const clickTransformationClassNames = {
@@ -6585,7 +6630,7 @@ function RemoraidButton({
     ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
   };
   const clickTransformationClass = clickTransformationClassNames[clickTransformation];
-  return /* @__PURE__ */ jsx15(Transition2, {
+  return /* @__PURE__ */ jsx16(Transition2, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
@@ -6593,10 +6638,10 @@ function RemoraidButton({
     ...componentsProps?.transition,
     children: (transitionStyle) => /* @__PURE__ */ jsxs3(Fragment, {
       children: [
-        /* @__PURE__ */ jsx15(Tooltip, {
+        /* @__PURE__ */ jsx16(Tooltip, {
           label,
           ...componentsProps?.tooltip,
-          children: /* @__PURE__ */ jsx15(ActionIcon, {
+          children: /* @__PURE__ */ jsx16(ActionIcon, {
             "aria-label": label,
             variant,
             onClick,
@@ -6612,7 +6657,7 @@ function RemoraidButton({
             children: iconElement
           })
         }),
-        /* @__PURE__ */ jsx15(Button, {
+        /* @__PURE__ */ jsx16(Button, {
           onClick,
           loading,
           variant,
@@ -6633,8 +6678,7 @@ function RemoraidButton({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-import Image from "next/image";
-import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
 function NavbarMinimalContent({
   orientation,
   maxElements,
@@ -6644,8 +6688,8 @@ function NavbarMinimalContent({
   const theme = useRemoraidTheme();
   const { userExperience: appShellUserExperience } = useAppShellUserExperience();
   const app = useRemoraidApp();
-  const router = useRouter2();
-  const pathname = usePathname2();
+  const router = useRemoraidRouter();
+  const { pathname } = router;
   const layoutElement = useFrameLayoutElement();
   const { colorScheme, setColorScheme } = useHydratedMantineColorScheme();
   const collapseStaticElementsBreakpoint = collapseStaticElementsBreakpointProp ?? theme.breakpoints.navbarStaticElementsCollapse;
@@ -6666,21 +6710,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__ */ jsx16(RemoraidButton, {
+  const logoButton = app.logo ? /* @__PURE__ */ jsx17(RemoraidButton, {
     label: app.name,
     variant: "subtle",
-    icon: isValidElement4(app.logo) || isIcon(app.logo) ? app.logo : /* @__PURE__ */ jsx16(Image, {
-      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,
@@ -6698,9 +6731,9 @@ function NavbarMinimalContent({
       componentsProps?.logoButton?.onClick?.(e);
     }
   }) : undefined;
-  const button = (element, key) => /* @__PURE__ */ jsx16(NavigationMenu, {
+  const button = (element, key) => /* @__PURE__ */ jsx17(NavigationMenu, {
     label: element.label,
-    target: /* @__PURE__ */ jsx16(RemoraidButton, {
+    target: /* @__PURE__ */ jsx17(RemoraidButton, {
       mounted: element.mounted,
       label: element.label,
       icon: element.icon,
@@ -6743,11 +6776,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__ */ jsx16(Box3, {
+  const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx17(Box3, {
     hiddenFrom: collapseStaticElementsBreakpoint,
-    children: /* @__PURE__ */ jsx16(NavigationMenu, {
+    children: /* @__PURE__ */ jsx17(NavigationMenu, {
       elements: staticElements,
-      target: /* @__PURE__ */ jsx16(RemoraidButton, {
+      target: /* @__PURE__ */ jsx17(RemoraidButton, {
         label: "Static elements",
         icon: IconDots,
         responsive: orientation === "vertical" /* Vertical */ ? buttonResponsive : false,
@@ -6768,7 +6801,7 @@ function NavbarMinimalContent({
       }, componentsProps?.NavigationMenu?.componentsProps)
     })
   }) : null;
-  return /* @__PURE__ */ jsx16(Paper, {
+  return /* @__PURE__ */ jsx17(Paper, {
     bg: theme.transparentBackground,
     h: "100%",
     p: "md",
@@ -6778,13 +6811,13 @@ function NavbarMinimalContent({
       h: "100%",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx16(ScrollArea2, {
+        /* @__PURE__ */ jsx17(ScrollArea2, {
           flex: 1,
-          children: /* @__PURE__ */ jsx16(Stack2, {
+          children: /* @__PURE__ */ jsx17(Stack2, {
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx16(Stack2, {
+        /* @__PURE__ */ jsx17(Stack2, {
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
         }),
@@ -6794,15 +6827,15 @@ function NavbarMinimalContent({
       wrap: "nowrap",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx16(ScrollArea2, {
+        /* @__PURE__ */ jsx17(ScrollArea2, {
           flex: 1,
           style: { contain: "inline-size" },
-          children: /* @__PURE__ */ jsx16(Group2, {
+          children: /* @__PURE__ */ jsx17(Group2, {
             wrap: "nowrap",
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx16(Group2, {
+        /* @__PURE__ */ jsx17(Group2, {
           wrap: "nowrap",
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
@@ -6834,7 +6867,7 @@ import {
 } from "@mantine/core";
 import { IconClick as IconClick2 } from "@tabler/icons-react";
 var import_lodash9 = __toESM(require_lodash(), 1);
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ControlButton({
   icon: Icon4 = IconClick2,
   mounted = true,
@@ -6847,17 +6880,17 @@ function ControlButton({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx17(Transition3, {
+  return /* @__PURE__ */ jsx18(Transition3, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx17(Tooltip2, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx18(Tooltip2, {
       label: tooltip,
       disabled: !Boolean(tooltip),
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx17(ActionIcon2, {
+      children: /* @__PURE__ */ jsx18(ActionIcon2, {
         "data-control-button": true,
         size,
         color,
@@ -6868,7 +6901,7 @@ function ControlButton({
           order,
           ...import_lodash9.merge(transitionStyle, componentsProps?.button?.style)
         },
-        children: /* @__PURE__ */ jsx17(Icon4, {
+        children: /* @__PURE__ */ jsx18(Icon4, {
           ...import_lodash9.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
         })
       })
@@ -6885,7 +6918,7 @@ import {
 } from "@mantine/core";
 import { IconGripHorizontal } from "@tabler/icons-react";
 var import_lodash10 = __toESM(require_lodash(), 1);
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
 function Controls({
   groupRef,
   mounted = true,
@@ -6943,14 +6976,14 @@ function Controls({
   const handlePointerUp = (e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   };
-  return /* @__PURE__ */ jsx18(Transition4, {
+  return /* @__PURE__ */ jsx19(Transition4, {
     mounted,
     keepMounted: true,
     transition: "pop",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx18(Paper2, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx19(Paper2, {
       ref: containerRef,
       pos: "absolute",
       p: gutter,
@@ -6973,7 +7006,7 @@ function Controls({
         ...componentsProps?.group,
         className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
         children: [
-          /* @__PURE__ */ jsx18(IconGripHorizontal, {
+          /* @__PURE__ */ jsx19(IconGripHorizontal, {
             ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
           }),
           children,
@@ -6981,7 +7014,7 @@ function Controls({
             if (isValidElementOfType(ControlButton, button)) {
               return button;
             }
-            return /* @__PURE__ */ jsx18(ControlButton, {
+            return /* @__PURE__ */ jsx19(ControlButton, {
               ...button
             }, i);
           })
@@ -6992,7 +7025,7 @@ function Controls({
 }
 
 // src/core/components/Pinnable/index.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 function Pinnable({
   layoutType: layoutTypeProp,
   section,
@@ -7012,7 +7045,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 = useMemo4(() => /* @__PURE__ */ jsx19(ControlButton, {
+  const controlButton = useMemo4(() => /* @__PURE__ */ jsx20(ControlButton, {
     icon: pinned ? IconPinnedOff : IconPin,
     tooltip: pinned ? "Unpin" : "Pin",
     color: "green",
@@ -7031,11 +7064,11 @@ function Pinnable({
     ...componentsProps?.container,
     className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
     children: [
-      controlsContainer === undefined ? /* @__PURE__ */ jsx19(Controls, {
+      controlsContainer === undefined ? /* @__PURE__ */ jsx20(Controls, {
         dragContainerRef: containerRef,
         ...componentsProps?.controls,
         children: controlButton
-      }) : controlsContainer !== null && /* @__PURE__ */ jsx19(Portal2, {
+      }) : controlsContainer !== null && /* @__PURE__ */ jsx20(Portal2, {
         target: controlsContainer,
         children: controlButton
       }),
@@ -7049,7 +7082,7 @@ function Pinnable({
     return null;
   }
   if (pinned && layoutType === "frame" /* Frame */) {
-    return /* @__PURE__ */ jsx19(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx20(FrameLayout_default.Element, {
       layoutId,
       section,
       hidden,
@@ -7061,7 +7094,7 @@ function Pinnable({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function NavbarMinimal({
   pinnable = true,
   componentsProps
@@ -7079,7 +7112,7 @@ function NavbarMinimal({
     setHover(false);
   };
   if (position === "left" /* Left */ || position === "right" /* Right */) {
-    return /* @__PURE__ */ jsx20(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx21(FrameLayout_default.Element, {
       section: position,
       includeContainer: true,
       ...componentsProps?.layoutElement,
@@ -7090,19 +7123,19 @@ function NavbarMinimal({
           }
         }
       }, componentsProps?.layoutElement?.componentsProps),
-      children: /* @__PURE__ */ jsx20(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx21(NavbarMinimalContent, {
         orientation: "vertical" /* Vertical */,
         ...componentsProps?.content
       })
     });
   }
   if (position === "top" /* Top */ || position === "bottom" /* Bottom */) {
-    const content = /* @__PURE__ */ jsx20(NavbarMinimalContent, {
+    const content = /* @__PURE__ */ jsx21(NavbarMinimalContent, {
       orientation: "horizontal" /* Horizontal */,
       ...componentsProps?.content
     });
     if (pinnable) {
-      return /* @__PURE__ */ jsx20(PageContainer, {
+      return /* @__PURE__ */ jsx21(PageContainer, {
         ...componentsProps?.container,
         componentsProps: {
           ...componentsProps?.container?.componentsProps,
@@ -7111,7 +7144,7 @@ function NavbarMinimal({
             className: clsx_default("hide-if-empty", componentsProps?.container?.componentsProps?.container?.className)
           }
         },
-        children: /* @__PURE__ */ jsx20(Pinnable, {
+        children: /* @__PURE__ */ jsx21(Pinnable, {
           section: position,
           initialValue: true,
           ...componentsProps?.Pinnable,
@@ -7154,9 +7187,9 @@ function NavbarMinimal({
     return content;
   }
   if (position === "content" /* Content */) {
-    return /* @__PURE__ */ jsx20(PageContainer, {
+    return /* @__PURE__ */ jsx21(PageContainer, {
       ...componentsProps?.container,
-      children: /* @__PURE__ */ jsx20(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx21(NavbarMinimalContent, {
         orientation: "horizontal" /* Horizontal */,
         ...componentsProps?.content
       })
@@ -7167,7 +7200,7 @@ function NavbarMinimal({
 
 // src/core/components/AppShell/Navbar/index.tsx
 import { IconLogin, IconLogout, IconMoon, IconSun } from "@tabler/icons-react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var supportedNavbarPositions = {
   ["minimal" /* Minimal */]: [
     null,
@@ -7215,21 +7248,21 @@ var getDefaultNavigationElements = ({
     }
   }
 ];
-function Navbar2({ componentsProps }) {
+function Navbar({ componentsProps }) {
   const { navbarVariant } = useRemoraidApp();
   if (navbarVariant === "minimal" /* Minimal */) {
-    return /* @__PURE__ */ jsx21(NavbarMinimal, {
+    return /* @__PURE__ */ jsx22(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
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var defaultAppShellUserExperience = {
   navbar: {
     position: null,
@@ -7243,7 +7276,7 @@ var defaultAppShellUserExperience = {
 var defaultAppShellUserExperienceCookieName = "remoraid-app-shell-user-experience";
 var appShellUserExperienceContext = createUserExperienceContext(defaultAppShellUserExperience);
 var useAppShellUserExperience = () => {
-  return useContext9(appShellUserExperienceContext);
+  return useContext10(appShellUserExperienceContext);
 };
 function AppShellUserExperienceProvider({
   children,
@@ -7266,7 +7299,7 @@ function AppShellUserExperienceProvider({
     }
     return true;
   };
-  return /* @__PURE__ */ jsx22(UserExperienceProviderWrapper, {
+  return /* @__PURE__ */ jsx23(UserExperienceProviderWrapper, {
     context: appShellUserExperienceContext,
     isValidUserExperience,
     cookieName: cookieName ?? defaultAppShellUserExperienceCookieName,
@@ -7284,7 +7317,7 @@ function AppShellUserExperienceProvider({
 }
 
 // src/core/components/AppShell/index.tsx
-import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var remoraidAppShellLayoutId = "remoraid-app-shell";
 function AppShell({
   gutter,
@@ -7308,13 +7341,13 @@ function AppShell({
     }
     meta.content = computedBodyColor;
   }, [colorScheme]);
-  return /* @__PURE__ */ jsx23(AppProvider, {
+  return /* @__PURE__ */ jsx24(AppProvider, {
     appContext: appContext2,
     ...componentsProps?.AppProvider,
-    children: /* @__PURE__ */ jsx23(AppShellUserExperienceProvider, {
+    children: /* @__PURE__ */ jsx24(AppShellUserExperienceProvider, {
       ...componentsProps?.AppShellUserExperienceProvider,
       initialValue: import_lodash13.merge(initialUserExperience, componentsProps?.AppShellUserExperienceProvider?.initialValue),
-      children: /* @__PURE__ */ jsx23(Box5, {
+      children: /* @__PURE__ */ jsx24(Box5, {
         h: "100dvh",
         ...componentsProps?.container,
         children: /* @__PURE__ */ jsxs7(FrameLayout_default, {
@@ -7322,11 +7355,11 @@ function AppShell({
           gutter: gutter ?? theme.primaryGutter,
           ...componentsProps?.layout,
           children: [
-            /* @__PURE__ */ jsx23(Navbar_default, {
+            /* @__PURE__ */ jsx24(Navbar_default, {
               ...componentsProps?.navbar
             }),
             children,
-            /* @__PURE__ */ jsx23(Footer_default, {
+            /* @__PURE__ */ jsx24(Footer_default, {
               ...componentsProps?.footer
             })
           ]
@@ -7352,15 +7385,14 @@ import {
 
 // src/core/components/Page/index.tsx
 import { Stack as Stack3 } from "@mantine/core";
-import React7, {
-  useContext as useContext10,
+import React8, {
+  useContext as useContext11,
   useEffect as useEffect5
 } from "react";
-import { usePathname as usePathname3 } from "next/navigation";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var pageContext = React7.createContext(null);
+import { jsx as jsx25 } from "react/jsx-runtime";
+var pageContext = React8.createContext(null);
 var usePage = () => {
-  return useContext10(pageContext);
+  return useContext11(pageContext);
 };
 function Page({
   children,
@@ -7370,7 +7402,7 @@ function Page({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  const pathname = usePathname3();
+  const { pathname } = useRemoraidRouter();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
   useEffect5(() => {
@@ -7380,11 +7412,11 @@ function Page({
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx24(pageContext.Provider, {
-    value: { name: name ?? pathname, pageId, ...config },
-    children: /* @__PURE__ */ jsx24(PageContainer, {
+  return /* @__PURE__ */ jsx25(pageContext.Provider, {
+    value: { name: name ?? pageId, pageId, ...config },
+    children: /* @__PURE__ */ jsx25(PageContainer, {
       ...componentsProps?.PageContainer,
-      children: /* @__PURE__ */ jsx24(Stack3, {
+      children: /* @__PURE__ */ jsx25(Stack3, {
         gap: gap ?? theme.primaryGutter,
         ...componentsProps?.Stack,
         className: clsx_default("remoraid-page", componentsProps?.Stack?.className),
@@ -7404,7 +7436,7 @@ import {
   Flex,
   ScrollArea as ScrollArea3
 } from "@mantine/core";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function ScrollableChipGroup({
   value,
   ref,
@@ -7413,16 +7445,16 @@ function ScrollableChipGroup({
   componentsProps,
   children
 }) {
-  return /* @__PURE__ */ jsx25(ScrollArea3, {
+  return /* @__PURE__ */ jsx26(ScrollArea3, {
     ref,
     ...componentsProps?.ScrollArea,
     style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
-    children: /* @__PURE__ */ jsx25(Chip.Group, {
+    children: /* @__PURE__ */ jsx26(Chip.Group, {
       value,
       onChange,
       ...componentsProps?.chipGroup,
       multiple: true,
-      children: /* @__PURE__ */ jsx25(Flex, {
+      children: /* @__PURE__ */ jsx26(Flex, {
         justify: "flex-start",
         align: "center",
         gap,
@@ -7436,7 +7468,7 @@ function ScrollableChipGroup({
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 var import_lodash14 = __toESM(require_lodash(), 1);
-import { jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
 function WidgetSelectionHeader({
   title,
   pinnableSection = "top" /* Top */,
@@ -7486,15 +7518,16 @@ function WidgetSelectionHeader({
     },
     className: clsx_default(!pinnableSection ? "remoraid-non-widget-segment" : undefined, !pinnableSection ? "remoraid-segment" : undefined, componentsProps?.container?.className),
     children: [
-      /* @__PURE__ */ jsx26(Text, {
+      /* @__PURE__ */ jsx27(Text, {
         size: "md",
         ...componentsProps?.title,
         children: title ?? page.name
       }),
-      /* @__PURE__ */ jsx26(Divider, {
-        orientation: "vertical"
+      /* @__PURE__ */ jsx27(Divider, {
+        orientation: "vertical",
+        ...componentsProps?.divider
       }),
-      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx26(ScrollableChipGroup, {
+      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx27(ScrollableChipGroup, {
         value: selectedWidgets,
         ref: scrollAreaRef,
         ...componentsProps?.ScrollableChipGroup,
@@ -7511,15 +7544,15 @@ function WidgetSelectionHeader({
             trigger: "hover",
             ...componentsProps?.widgetMenu,
             children: [
-              /* @__PURE__ */ jsx26(Menu2.Target, {
-                children: /* @__PURE__ */ jsx26(Box6, {
-                  children: /* @__PURE__ */ jsx26(Chip2, {
+              /* @__PURE__ */ jsx27(Menu2.Target, {
+                children: /* @__PURE__ */ jsx27(Box6, {
+                  children: /* @__PURE__ */ jsx27(Chip2, {
                     variant: selectedWidgets.includes(widgetId) ? "filled" : "outline",
                     color: activeWidget === widgetId ? mantineTheme.primaryColor : "gray",
                     value: widgetId,
                     size: "sm",
                     disabled: disabledWidgets?.includes(widgetId),
-                    icon: /* @__PURE__ */ jsx26(IconCheck, {
+                    icon: /* @__PURE__ */ jsx27(IconCheck, {
                       ...theme.componentsProps.icons.extraSmall
                     }),
                     ...componentsProps?.Chip,
@@ -7535,8 +7568,8 @@ function WidgetSelectionHeader({
               }),
               /* @__PURE__ */ jsxs8(Menu2.Dropdown, {
                 children: [
-                  /* @__PURE__ */ jsx26(Menu2.Item, {
-                    leftSection: /* @__PURE__ */ jsx26(IconNavigation, {
+                  /* @__PURE__ */ jsx27(Menu2.Item, {
+                    leftSection: /* @__PURE__ */ jsx27(IconNavigation, {
                       ...theme.componentsProps.icons.small
                     }),
                     onClick: () => {
@@ -7546,8 +7579,8 @@ function WidgetSelectionHeader({
                     disabled: !widget.selected,
                     children: "Scroll to widget"
                   }),
-                  /* @__PURE__ */ jsx26(Menu2.Item, {
-                    leftSection: /* @__PURE__ */ jsx26(IconFocus, {
+                  /* @__PURE__ */ jsx27(Menu2.Item, {
+                    leftSection: /* @__PURE__ */ jsx27(IconFocus, {
                       ...theme.componentsProps.icons.small
                     }),
                     onClick: () => {
@@ -7585,7 +7618,7 @@ function WidgetSelectionHeader({
     });
   }, [activeWidget]);
   if (pinnableSection) {
-    return /* @__PURE__ */ jsx26(Pinnable, {
+    return /* @__PURE__ */ jsx27(Pinnable, {
       section: pinnableSection,
       initialValue: initiallyPinned,
       ...componentsProps?.Pinnable,
@@ -7634,7 +7667,7 @@ import {
   Stack as Stack4,
   Transition as Transition6
 } from "@mantine/core";
-import React8 from "react";
+import React9 from "react";
 
 // src/core/components/BadgeMinimal/index.tsx
 import {
@@ -7642,7 +7675,7 @@ import {
   Tooltip as Tooltip3,
   Transition as Transition5
 } from "@mantine/core";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function BadgeMinimal({
   label,
   tooltip,
@@ -7650,17 +7683,17 @@ function BadgeMinimal({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx27(Transition5, {
+  return /* @__PURE__ */ jsx28(Transition5, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx27(Tooltip3, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx28(Tooltip3, {
       label: tooltip,
       disabled: !Boolean(tooltip),
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx27(Badge, {
+      children: /* @__PURE__ */ jsx28(Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -7676,7 +7709,7 @@ function BadgeMinimal({
 
 // src/core/components/BadgeGroup/index.tsx
 var import_lodash15 = __toESM(require_lodash(), 1);
-import { jsx as jsx28, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
 import { createElement } from "react";
 function BadgeGroup({
   badges: badgesProp,
@@ -7699,7 +7732,7 @@ function BadgeGroup({
   });
   return /* @__PURE__ */ jsxs9(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx28(Group4, {
+      /* @__PURE__ */ jsx29(Group4, {
         gap,
         wrap: "nowrap",
         visibleFrom: numVisibleBadges > 1 ? breakpoint : undefined,
@@ -7707,7 +7740,7 @@ function BadgeGroup({
         className: clsx_default("hide-if-empty", componentsProps?.container?.className),
         children: badgesElement
       }),
-      /* @__PURE__ */ jsx28(Transition6, {
+      /* @__PURE__ */ jsx29(Transition6, {
         mounted: numVisibleBadges > 1,
         transition: "fade",
         duration: theme.transitionDurations.short,
@@ -7716,7 +7749,7 @@ function BadgeGroup({
         children: (transitionStyle) => /* @__PURE__ */ jsxs9(HoverCard, {
           ...componentsProps?.HoverCard,
           children: [
-            /* @__PURE__ */ jsx28(HoverCard.Target, {
+            /* @__PURE__ */ jsx29(HoverCard.Target, {
               children: /* @__PURE__ */ jsxs9(Badge2, {
                 hiddenFrom: breakpoint,
                 variant: "dot",
@@ -7731,9 +7764,9 @@ function BadgeGroup({
                 ]
               })
             }),
-            /* @__PURE__ */ jsx28(HoverCard.Dropdown, {
+            /* @__PURE__ */ jsx29(HoverCard.Dropdown, {
               p: gap,
-              children: /* @__PURE__ */ jsx28(Stack4, {
+              children: /* @__PURE__ */ jsx29(Stack4, {
                 gap,
                 ...componentsProps?.hoverContainer,
                 children: badgesElement
@@ -7748,7 +7781,7 @@ function BadgeGroup({
 // src/core/components/AlertMinimal/index.tsx
 import { Alert, Transition as Transition7 } from "@mantine/core";
 var import_lodash16 = __toESM(require_lodash(), 1);
-import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
 function AlertMinimal({
   category,
   children,
@@ -7765,7 +7798,7 @@ function AlertMinimal({
     iconSize = "small" /* Small */,
     componentsProps
   } = import_lodash16.merge({}, theme.componentsProps.alerts[category], props);
-  return /* @__PURE__ */ jsx29(Transition7, {
+  return /* @__PURE__ */ jsx30(Transition7, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
@@ -7777,9 +7810,10 @@ function AlertMinimal({
       variant: "light",
       onClose,
       withCloseButton: onClose !== undefined,
-      icon: Icon4 ? /* @__PURE__ */ jsx29(Icon4, {
+      icon: Icon4 ? /* @__PURE__ */ jsx30(Icon4, {
         ...import_lodash16.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }) : undefined,
+      ...componentsProps?.alert,
       style: import_lodash16.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
@@ -7798,7 +7832,7 @@ import {
 } from "react";
 import { IconX } from "@tabler/icons-react";
 var import_lodash17 = __toESM(require_lodash(), 1);
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 function WidgetWrapper({
   config,
   mt = 0,
@@ -7837,7 +7871,7 @@ function WidgetWrapper({
     updateActiveWidget(null);
   };
   const mounted = Boolean(widget?.selected);
-  let element = /* @__PURE__ */ jsx30(Transition8, {
+  let element = /* @__PURE__ */ jsx31(Transition8, {
     mounted,
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
@@ -7872,12 +7906,12 @@ function WidgetWrapper({
       className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
-        /* @__PURE__ */ jsx30(Controls, {
+        /* @__PURE__ */ jsx31(Controls, {
           dragContainerRef: containerRef,
           groupRef: controlsContainerRef,
           mounted: activeWidget === config.widgetId,
           ...componentsProps?.controls,
-          children: /* @__PURE__ */ jsx30(ControlButton, {
+          children: /* @__PURE__ */ jsx31(ControlButton, {
             mounted: withCloseButton,
             icon: IconX,
             tooltip: "Hide widget",
@@ -7906,7 +7940,7 @@ function WidgetWrapper({
     })
   });
   if (pinnableSection !== undefined) {
-    element = /* @__PURE__ */ jsx30(Pinnable, {
+    element = /* @__PURE__ */ jsx31(Pinnable, {
       section: pinnableSection,
       controlsContainer,
       hidden: Boolean(widget?.hidden),
@@ -7954,7 +7988,7 @@ import {
 } from "@mantine/core";
 import { Children } from "react";
 var import_lodash18 = __toESM(require_lodash(), 1);
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 function Widget({
   id,
@@ -7977,7 +8011,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__ */ jsx31(WidgetWrapper, {
+  return /* @__PURE__ */ jsx32(WidgetWrapper, {
     config: {
       widgetId: id,
       ...config,
@@ -8005,23 +8039,23 @@ function Widget({
                   gap: badgesGap,
                   wrap: "nowrap",
                   children: [
-                    /* @__PURE__ */ jsx31(Title, {
+                    /* @__PURE__ */ jsx32(Title, {
                       order: 1,
                       size: "h2",
                       lineClamp: 1,
                       ...componentsProps?.title,
                       children: title ?? id
                     }),
-                    badges !== undefined && /* @__PURE__ */ jsx31(BadgeGroup, {
+                    badges !== undefined && /* @__PURE__ */ jsx32(BadgeGroup, {
                       badges,
                       gap: badgesGap,
                       ...componentsProps?.badgeGroup
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx31(Transition9, {
+                /* @__PURE__ */ jsx32(Transition9, {
                   mounted: Boolean(description),
-                  children: (transitionStyle) => /* @__PURE__ */ jsx31(Text2, {
+                  children: (transitionStyle) => /* @__PURE__ */ jsx32(Text2, {
                     size: "sm",
                     c: "dimmed",
                     ...componentsProps?.description,
@@ -8031,7 +8065,7 @@ function Widget({
                 })
               ]
             }),
-            /* @__PURE__ */ jsx31(Group5, {
+            /* @__PURE__ */ jsx32(Group5, {
               gap: buttonsGap,
               wrap: "nowrap",
               children: buttons !== undefined && buttons.map((button, i) => {
@@ -8046,12 +8080,12 @@ function Widget({
             })
           ]
         }),
-        /* @__PURE__ */ jsx31(Box7, {
-          children: /* @__PURE__ */ jsx31(Divider2, {
+        /* @__PURE__ */ jsx32(Box7, {
+          children: /* @__PURE__ */ jsx32(Divider2, {
             ...componentsProps?.divider
           })
         }),
-        /* @__PURE__ */ jsx31(Stack5, {
+        /* @__PURE__ */ jsx32(Stack5, {
           align: "stretch",
           gap: alertsGap,
           ...componentsProps?.alertsContainer,
@@ -8066,12 +8100,12 @@ function Widget({
             });
           })
         }),
-        (loading || Children.toArray(children).length > 0) && /* @__PURE__ */ jsx31(ScrollArea4.Autosize, {
+        (loading || Children.toArray(children).length > 0) && /* @__PURE__ */ jsx32(ScrollArea4.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           className: clsx_default("remoraid-widget-children-container", componentsProps?.childrenContainer?.className),
-          children: loading ? /* @__PURE__ */ jsx31(Center2, {
-            children: /* @__PURE__ */ jsx31(Loader, {
+          children: loading ? /* @__PURE__ */ jsx32(Center2, {
+            children: /* @__PURE__ */ jsx32(Loader, {
               ...componentsProps?.loader
             })
           }) : children
@@ -8081,19 +8115,18 @@ function Widget({
   });
 }
 // src/core/components/NotFoundPage/index.tsx
-import { usePathname as usePathname4 } from "next/navigation";
-import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 function NotFoundPage({
   children,
   message,
   componentsProps
 }) {
-  const pathname = usePathname4();
+  const { pathname } = useRemoraidRouter();
   return /* @__PURE__ */ jsxs13(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx32(AlertMinimal, {
+      /* @__PURE__ */ jsx33(AlertMinimal, {
         category: "negative" /* Negative */,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -8103,7 +8136,7 @@ function NotFoundPage({
   });
 }
 // src/core/components/EnvironmentShell/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var EnvironmentShellVariant;
 ((EnvironmentShellVariant2) => {
   EnvironmentShellVariant2["Alert"] = "alert";
@@ -8120,7 +8153,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__ */ jsx33(AlertMinimal, {
+  const alertElement = /* @__PURE__ */ jsx34(AlertMinimal, {
     mounted: undefinedKeys.length > 0,
     title: `Please specify environment variable${undefinedKeys.length > 1 ? "s" : ""}`,
     category: "negative" /* Negative */,
@@ -8132,7 +8165,7 @@ function EnvironmentShell({
   }
   if (variant === "alert" /* Alert */) {
     if (includeAlertContainer) {
-      return /* @__PURE__ */ jsx33(PageContainer, {
+      return /* @__PURE__ */ jsx34(PageContainer, {
         ...componentsProps?.alertContainer,
         children: alertElement
       });
@@ -8145,20 +8178,20 @@ function EnvironmentShell({
   return null;
 }
 // src/core/components/SettingsWidget/index.tsx
-import { createContext as createContext7, useContext as useContext11 } from "react";
+import { createContext as createContext8, useContext as useContext12 } from "react";
 import { IconRestore } from "@tabler/icons-react";
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
 import { IconDeviceFloppy } from "@tabler/icons-react";
 import { Group as Group6 } from "@mantine/core";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function SaveButton({
   onSaveChanges,
   insideContainer,
   componentsProps
 }) {
   const settingsWidgetOptions = useSettingsWidgetContext();
-  const button = /* @__PURE__ */ jsx34(RemoraidButton, {
+  const button = /* @__PURE__ */ jsx35(RemoraidButton, {
     label: "Save Changes",
     icon: IconDeviceFloppy,
     onClick: onSaveChanges,
@@ -8173,7 +8206,7 @@ function SaveButton({
     }
   });
   if (insideContainer !== false) {
-    return /* @__PURE__ */ jsx34(Group6, {
+    return /* @__PURE__ */ jsx35(Group6, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -8185,11 +8218,11 @@ function SaveButton({
 }
 
 // src/core/components/SettingsWidget/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = createContext7(defaultSettingsWidgetContext);
+var settingsWidgetContext = createContext8(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return useContext11(settingsWidgetContext);
+  return useContext12(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -8198,9 +8231,9 @@ function SettingsWidget({
   custom,
   widgetProps
 }) {
-  return /* @__PURE__ */ jsx35(settingsWidgetContext.Provider, {
+  return /* @__PURE__ */ jsx36(settingsWidgetContext.Provider, {
     value: { custom, unsavedChanges },
-    children: /* @__PURE__ */ jsx35(Widget, {
+    children: /* @__PURE__ */ jsx36(Widget, {
       title: "Settings",
       id: "settings",
       ...widgetProps,
@@ -8235,12 +8268,12 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-import { createContext as createContext8, useContext as useContext12 } from "react";
+import { createContext as createContext9, useContext as useContext13 } from "react";
 import { Table as Table2 } from "@mantine/core";
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
 import { Table, Text as Text3 } from "@mantine/core";
-import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
 function Row({
   children,
   label
@@ -8248,14 +8281,14 @@ function Row({
   const options = useSettingsTableOptions();
   return /* @__PURE__ */ jsxs14(Table.Tr, {
     children: [
-      /* @__PURE__ */ jsx36(Table.Th, {
+      /* @__PURE__ */ jsx37(Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsx36(Text3, {
+        children: /* @__PURE__ */ jsx37(Text3, {
           size: "sm",
           children: label
         })
       }),
-      /* @__PURE__ */ jsx36(Table.Td, {
+      /* @__PURE__ */ jsx37(Table.Td, {
         py: "xs",
         children
       })
@@ -8264,13 +8297,13 @@ function Row({
 }
 
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = createContext8(defaultSettingsTableOptions);
+var settingsTableOptionsContext = createContext9(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return useContext12(settingsTableOptionsContext);
+  return useContext13(settingsTableOptionsContext);
 };
 function SettingsTable({
   leftColumnWidth,
@@ -8278,16 +8311,16 @@ function SettingsTable({
 }) {
   const children = asChildrenOfType(Row, childrenProp, "Check children passed to 'SettingsTable' component.");
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx37(settingsTableOptionsContext.Provider, {
+  return /* @__PURE__ */ jsx38(settingsTableOptionsContext.Provider, {
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsx37(Table2, {
+    children: /* @__PURE__ */ jsx38(Table2, {
       bg: theme.transparentBackground,
       withTableBorder: true,
       variant: "vertical",
       layout: "fixed",
-      children: /* @__PURE__ */ jsx37(Table2.Tbody, {
+      children: /* @__PURE__ */ jsx38(Table2.Tbody, {
         children
       })
     })
@@ -8299,7 +8332,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
 // src/core/components/NavbarSettingsWidget/index.tsx
 var import_lodash19 = __toESM(require_lodash(), 1);
 import { Select } from "@mantine/core";
-import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultNavbarSettingsWidgetId = "navbar-settings";
 function NavbarSettingsWidget({
   additionalRows: additionalRowsProp,
@@ -8321,7 +8354,7 @@ function NavbarSettingsWidget({
     ["right" /* Right */]: "Right",
     ["content" /* Content */]: "Content section"
   };
-  return /* @__PURE__ */ jsx38(SettingsWidget_default, {
+  return /* @__PURE__ */ jsx39(SettingsWidget_default, {
     widgetProps: {
       id: defaultNavbarSettingsWidgetId,
       title: "Navbar Settings",
@@ -8337,9 +8370,9 @@ function NavbarSettingsWidget({
     children: /* @__PURE__ */ jsxs15(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
-        /* @__PURE__ */ jsx38(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx39(SettingsTable_default.Row, {
           label: "Select navbar position",
-          children: /* @__PURE__ */ jsx38(Select, {
+          children: /* @__PURE__ */ jsx39(Select, {
             value: userExperience.navbar.position ?? "hidden",
             data: app.navbarVariant === null ? [] : supportedNavbarPositions[app.navbarVariant].map((position) => ({
               value: position ?? "hidden",
@@ -8359,9 +8392,9 @@ function NavbarSettingsWidget({
             }
           })
         }, "select-navbar-position"),
-        /* @__PURE__ */ jsx38(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx39(SettingsTable_default.Row, {
           label: "Select navbar mode",
-          children: /* @__PURE__ */ jsx38(Select, {
+          children: /* @__PURE__ */ jsx39(Select, {
             value: userExperience.navbar.mode,
             data: Object.values(NavbarMode).map((mode) => ({
               value: mode,
@@ -8382,7 +8415,7 @@ function NavbarSettingsWidget({
           if (isValidElementOfType(SettingsTable_default.Row, row)) {
             return row;
           }
-          return /* @__PURE__ */ jsx38(SettingsTable_default.Row, {
+          return /* @__PURE__ */ jsx39(SettingsTable_default.Row, {
             ...row
           }, i);
         })
@@ -8393,7 +8426,7 @@ function NavbarSettingsWidget({
 // src/core/components/FooterSettingsWidget/index.tsx
 var import_lodash20 = __toESM(require_lodash(), 1);
 import { Select as Select2 } from "@mantine/core";
-import { jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultFooterSettingsWidgetId = "footer-settings";
 function FooterSettingsWidget({
   additionalRows: additionalRowsProp,
@@ -8410,7 +8443,7 @@ function FooterSettingsWidget({
     ["right" /* Right */]: "Right",
     ["content" /* Content */]: "Content section"
   };
-  return /* @__PURE__ */ jsx39(SettingsWidget_default, {
+  return /* @__PURE__ */ jsx40(SettingsWidget_default, {
     widgetProps: {
       id: defaultFooterSettingsWidgetId,
       title: "Footer Settings",
@@ -8426,9 +8459,9 @@ function FooterSettingsWidget({
     children: /* @__PURE__ */ jsxs16(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
-        /* @__PURE__ */ jsx39(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx40(SettingsTable_default.Row, {
           label: "Select footer position",
-          children: /* @__PURE__ */ jsx39(Select2, {
+          children: /* @__PURE__ */ jsx40(Select2, {
             value: userExperience.footer.position ?? "hidden",
             data: app.footerVariant === null ? [] : supportedFooterPositions[app.footerVariant].map((position) => ({
               value: position ?? "hidden",
@@ -8452,7 +8485,7 @@ function FooterSettingsWidget({
           if (isValidElementOfType(SettingsTable_default.Row, row)) {
             return row;
           }
-          return /* @__PURE__ */ jsx39(SettingsTable_default.Row, {
+          return /* @__PURE__ */ jsx40(SettingsTable_default.Row, {
             ...row
           }, i);
         })
@@ -8461,8 +8494,8 @@ function FooterSettingsWidget({
   });
 }
 // src/core/components/ContextClusterProvider/index.tsx
-import React9 from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import React10 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var createContextCluster = (generalDefaultValue, staticIds) => {
   const isStaticId = (id) => {
     if (staticIds?.find((staticId) => staticId === id)) {
@@ -8472,24 +8505,24 @@ var createContextCluster = (generalDefaultValue, staticIds) => {
   };
   const contexts = {};
   const defaultValues = {};
-  const createContext9 = (id, defaultValue) => {
-    const context = React9.createContext(defaultValue ?? generalDefaultValue);
+  const createContext10 = (id, defaultValue) => {
+    const context = React10.createContext(defaultValue ?? generalDefaultValue);
     contexts[id] = context;
     defaultValues[id] = defaultValue ?? generalDefaultValue;
     return context;
   };
-  const useContext13 = (id) => {
+  const useContext14 = (id) => {
     if (isStaticId(id)) {
-      return contexts[id] ? React9.useContext(contexts[id]) : generalDefaultValue;
+      return contexts[id] ? React10.useContext(contexts[id]) : generalDefaultValue;
     }
-    return contexts[id] ? React9.useContext(contexts[id]) : null;
+    return contexts[id] ? React10.useContext(contexts[id]) : null;
   };
   return {
     contexts,
     defaultValues,
     generalDefaultValue,
-    createContext: createContext9,
-    useContext: useContext13
+    createContext: createContext10,
+    useContext: useContext14
   };
 };
 function ContextClusterProvider({
@@ -8497,7 +8530,7 @@ function ContextClusterProvider({
   values = {},
   children
 }) {
-  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => context ? /* @__PURE__ */ jsx40(context.Provider, {
+  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => context ? /* @__PURE__ */ jsx41(context.Provider, {
     value: values[id] ?? cluster.defaultValues[id] ?? cluster.generalDefaultValue,
     children: t
   }) : t, children);
@@ -8510,7 +8543,7 @@ import {
   ScrollArea as ScrollArea5
 } from "@mantine/core";
 import { useState as useState10 } from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function InputWrapperScrollArea({
   children,
   label,
@@ -8522,7 +8555,7 @@ function InputWrapperScrollArea({
 }) {
   const theme = useRemoraidTheme();
   const [isHovering, setIsHovering] = useState10(false);
-  return /* @__PURE__ */ jsx41(Input.Wrapper, {
+  return /* @__PURE__ */ jsx42(Input.Wrapper, {
     label,
     error,
     onMouseEnter: () => setIsHovering(true),
@@ -8530,7 +8563,7 @@ function InputWrapperScrollArea({
     description,
     withAsterisk: required,
     ...componentsProps?.container,
-    children: /* @__PURE__ */ jsx41(Paper4, {
+    children: /* @__PURE__ */ jsx42(Paper4, {
       shadow: "none",
       p: 0,
       mt: Boolean(description) ? 4 : 0,
@@ -8541,12 +8574,12 @@ function InputWrapperScrollArea({
         transition: "border-color .1s",
         borderColor: error ? "var(--mantine-color-error)" : isHovering ? "var(--mantine-primary-color-filled)" : undefined
       },
-      children: /* @__PURE__ */ jsx41(ScrollArea5, {
+      children: /* @__PURE__ */ jsx42(ScrollArea5, {
         mah,
         px: "md",
         flex: 1,
         ...componentsProps?.ScrollArea,
-        children: /* @__PURE__ */ jsx41(Box8, {
+        children: /* @__PURE__ */ jsx42(Box8, {
           ...componentsProps?.childrenContainer,
           children
         })
@@ -8561,6 +8594,7 @@ export {
   useSettingsTableOptions,
   useRemoraidUserExperience,
   useRemoraidTheme,
+  useRemoraidRouter,
   useRemoraidApp,
   usePage,
   useLayouts,
@@ -8585,6 +8619,7 @@ export {
   defaultTransitionDurations,
   defaultSettingsWidgetContext as defaultSettingsWidgetOptions,
   defaultSettingsTableOptions,
+  defaultRemoraidButtonSize,
   defaultNavbarSettingsWidgetId,
   defaultNavbarPositions,
   defaultLayoutsContext,
@@ -8608,6 +8643,7 @@ export {
   SettingsWidget_default as SettingsWidget,
   SettingsTable_default as SettingsTable,
   ScrollableChipGroup,
+  RouterProvider,
   RemoraidProvider,
   RemoraidIconSize,
   RemoraidButton,