remoraid 2.5.6 → 2.7.2

package/dist/core/index.cjs

@@ -5466,6 +5466,9 @@ __export(exports_core, {
   useRemoraidUserExperience: () => useRemoraidUserExperience,
   useRemoraidTheme: () => useRemoraidTheme,
   useRemoraidApp: () => useRemoraidApp,
+  usePage: () => usePage,
+  useHydrationStatus: () => useHydrationStatus,
+  useHydratedMantineColorScheme: () => useHydratedMantineColorScheme,
   defaultUserExperienceCookieName: () => defaultUserExperienceCookieName,
   defaultUserExperience: () => defaultUserExperience,
   defaultSettingsWidgetOptions: () => defaultSettingsWidgetContext,
@@ -5482,6 +5485,7 @@ __export(exports_core, {
   TransitionDuration: () => TransitionDuration,
   SettingsWidget: () => SettingsWidget_default,
   SettingsTable: () => SettingsTable_default,
+  ScrollableChipGroup: () => ScrollableChipGroup,
   RemoraidProvider: () => RemoraidProvider,
   RemoraidIconSize: () => RemoraidIconSize,
   RemoraidButton: () => RemoraidButton,
@@ -5491,6 +5495,7 @@ __export(exports_core, {
   NotFoundPage: () => NotFoundPage,
   NavbarVariant: () => NavbarVariant,
   NavbarSettingsWidget: () => NavbarSettingsWidget,
+  HydrationStatusProvider: () => HydrationStatusProvider,
   EnvironmentShell: () => EnvironmentShell,
   BadgeMinimal: () => BadgeMinimal,
   BadgeGroup: () => BadgeGroup,
@@ -5665,120 +5670,154 @@ var RemoraidIconSize;
 var co = (condition, value, fallback) => condition(value) ? value : fallback;
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
-var import_core = require("@mantine/core");
+var import_core2 = require("@mantine/core");
 var import_icons_react = require("@tabler/icons-react");
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
+
+// src/core/components/RemoraidProvider/HydrationStatusProvider/index.tsx
+var import_core = require("@mantine/core");
+var import_react2 = require("react");
 var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
+var defaultHydrationStatus = {
+  hasHydrated: false,
+  ensureHydration: () => {
+    return;
+  }
+};
+var hydrationStatusContext = import_react2.createContext(defaultHydrationStatus);
+var useHydrationStatus = () => {
+  return import_react2.useContext(hydrationStatusContext);
+};
+var useHydratedMantineColorScheme = () => {
+  const { ensureHydration } = useHydrationStatus();
+  return ensureHydration(import_core.useMantineColorScheme()) ?? {};
+};
+function HydrationStatusProvider({
+  children
+}) {
+  const [hasHydrated, setHasHydrated] = import_react2.useState(defaultHydrationStatus.hasHydrated);
+  const hydrationStatus = import_react2.useMemo(() => ({
+    hasHydrated,
+    ensureHydration: (v) => hasHydrated ? v : undefined
+  }), [hasHydrated]);
+  import_react2.useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(hydrationStatusContext.Provider, {
+    value: hydrationStatus,
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/RemoraidProvider/ThemeProvider/index.tsx
+var jsx_dev_runtime3 = require("react/jsx-dev-runtime");
 var isMantinePrimaryShade = (primaryShade) => {
   if (isNaN(Number(primaryShade))) {
     return true;
   }
   return false;
 };
-var createRemoraidTheme = (customTheme, mantineTheme, colorScheme) => {
+var createRemoraidTheme = (customTheme, dependencies) => {
+  const { mantineTheme, colorScheme } = dependencies ?? {};
   const defaultMediumIconProps = { size: "1.125em" };
   let transparentBackground;
   let primaryColor;
   let spacingPx;
   if (mantineTheme && colorScheme) {
-    transparentBackground = colorScheme === "dark" ? import_core.rgba(mantineTheme.colors.dark[8], 0.8) : import_core.rgba(mantineTheme.white, 0.8);
+    transparentBackground = colorScheme === "dark" ? import_core2.rgba(mantineTheme.colors.dark[8], 0.8) : import_core2.rgba(mantineTheme.white, 0.8);
     primaryColor = mantineTheme.colors[mantineTheme.primaryColor][isMantinePrimaryShade(mantineTheme.primaryShade) ? mantineTheme.primaryShade[colorScheme === "auto" ? "light" : colorScheme] : mantineTheme.primaryShade];
     spacingPx = {
-      xs: Number(co((v) => !Number.isNaN(v), Number(import_core.px(mantineTheme.spacing.xs)), 0)),
-      sm: Number(co((v) => !Number.isNaN(v), Number(import_core.px(mantineTheme.spacing.sm)), 0)),
-      md: Number(co((v) => !Number.isNaN(v), Number(import_core.px(mantineTheme.spacing.md)), 0)),
-      lg: Number(co((v) => !Number.isNaN(v), Number(import_core.px(mantineTheme.spacing.lg)), 0)),
-      xl: Number(co((v) => !Number.isNaN(v), Number(import_core.px(mantineTheme.spacing.xl)), 0))
+      xs: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.xs)), 0)),
+      sm: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.sm)), 0)),
+      md: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.md)), 0)),
+      lg: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.lg)), 0)),
+      xl: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.xl)), 0))
     };
   }
   return {
-    complete: true,
+    containerSize: 1300,
+    jsonStringifySpace: 2,
+    transparentBackground,
+    primaryColor,
+    spacingPx,
+    ...customTheme,
     transitionDurations: {
       ["short" /* Short */]: 200,
       ["medium" /* Medium */]: 350,
-      ["long" /* Long */]: 500
+      ["long" /* Long */]: 500,
+      ...customTheme?.transitionDurations
     },
     breakpoints: {
       ["buttonCollapse" /* ButtonCollapse */]: "md",
-      ["badgeGroupCollapse" /* BadgeGroupCollapse */]: "md"
+      ["badgeGroupCollapse" /* BadgeGroupCollapse */]: "md",
+      ...customTheme?.breakpoints
     },
     scrollAreaProps: {
       scrollbarSize: 8,
       scrollHideDelay: 20,
-      type: "hover"
+      type: "hover",
+      ...customTheme?.scrollAreaProps
     },
-    containerSize: 1300,
     alertProps: {
       ["negative" /* Negative */]: {
-        icon: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(import_icons_react.IconAlertCircle, {
+        icon: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_icons_react.IconAlertCircle, {
           ...defaultMediumIconProps
         }, undefined, false, undefined, this),
         variant: "light",
         color: "red",
-        title: "Attention!"
+        title: "Attention!",
+        ...customTheme?.alertProps?.negative
       },
       ["neutral" /* Neutral */]: {
-        icon: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(import_icons_react.IconInfoCircle, {
+        icon: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_icons_react.IconInfoCircle, {
           ...defaultMediumIconProps
         }, undefined, false, undefined, this),
         variant: "light",
         color: mantineTheme?.primaryColor,
-        title: "Information"
+        title: "Information",
+        ...customTheme?.alertProps?.neutral
       },
       ["positive" /* Positive */]: {
-        icon: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(import_icons_react.IconCircleCheck, {
+        icon: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_icons_react.IconCircleCheck, {
           ...defaultMediumIconProps
         }, undefined, false, undefined, this),
         variant: "light",
         color: "green",
-        title: "Success"
+        title: "Success",
+        ...customTheme?.alertProps?.positive
       }
     },
     iconProps: {
-      ["medium" /* Medium */]: defaultMediumIconProps,
-      ["tiny" /* Tiny */]: { size: 14, stroke: 3 }
-    },
-    jsonStringifySpace: 2,
-    transparentBackground,
-    primaryColor,
-    spacingPx,
-    ...customTheme
+      ["medium" /* Medium */]: {
+        ...defaultMediumIconProps,
+        ...customTheme?.iconProps?.medium
+      },
+      ["tiny" /* Tiny */]: {
+        size: 14,
+        stroke: 3,
+        ...customTheme?.iconProps?.tiny
+      }
+    }
   };
 };
-var isRemoraidTheme = (x) => {
-  if (!x) {
-    return false;
-  }
-  if (typeof x !== "object") {
-    return false;
-  }
-  if (!("complete" in x)) {
-    return false;
-  }
-  return true;
-};
-var themeContext = import_react2.default.createContext(createRemoraidTheme());
+var themeContext = import_react3.default.createContext(createRemoraidTheme());
 var useRemoraidTheme = () => {
-  return import_react2.useContext(themeContext);
+  return import_react3.useContext(themeContext);
 };
 function ThemeProvider({
-  children,
-  theme
+  theme,
+  children
 }) {
-  const mantineTheme = import_core.useMantineTheme();
-  const { colorScheme } = import_core.useMantineColorScheme();
-  const remoraidTheme = import_react2.useMemo(() => {
-    let value;
-    if (isRemoraidTheme(theme)) {
-      value = theme;
-    } else if (typeof theme === "function") {
-      value = theme(mantineTheme, colorScheme);
-    } else {
-      value = createRemoraidTheme(theme, mantineTheme, colorScheme);
-    }
-    return value;
-  }, [colorScheme]);
-  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(themeContext.Provider, {
+  const mantineTheme = import_core2.useMantineTheme();
+  const { colorScheme } = useHydratedMantineColorScheme();
+  const remoraidTheme = import_react3.useMemo(() => {
+    const dependencies = {
+      mantineTheme,
+      colorScheme
+    };
+    return createRemoraidTheme(typeof theme === "function" ? theme(dependencies) : theme, dependencies);
+  }, [colorScheme, theme]);
+  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(themeContext.Provider, {
     value: remoraidTheme,
     children
   }, undefined, false, undefined, this);
@@ -5788,36 +5827,36 @@ function ThemeProvider({
 var import_react_cookie2 = require("react-cookie");
 
 // src/core/components/RemoraidProvider/CoreUserExperienceProvider/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/core/components/AppShell/NavbarMinimal/index.tsx
-var import_core2 = require("@mantine/core");
+var import_core3 = require("@mantine/core");
 var import_icons_react2 = require("@tabler/icons-react");
 var import_link = __toESM(require("next/link"));
 var import_navigation = require("next/navigation");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/core/components/AppShell/AppProvider/index.tsx
-var import_react3 = require("react");
-var jsx_dev_runtime3 = require("react/jsx-dev-runtime");
+var import_react4 = require("react");
+var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
 var defaultAppContext = { navigablePages: [] };
-var appContext = import_react3.createContext(defaultAppContext);
+var appContext = import_react4.createContext(defaultAppContext);
 var useRemoraidApp = () => {
-  return import_react3.useContext(appContext);
+  return import_react4.useContext(appContext);
 };
 function AppProvider({
   children,
   navigablePages,
   user
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(appContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(appContext.Provider, {
     value: { navigablePages, user },
     children
   }, undefined, false, undefined, this);
 }
 
 // src/core/components/AppShell/NavbarMinimal/index.tsx
-var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime5 = require("react/jsx-dev-runtime");
 function NavbarLink({
   icon,
   label,
@@ -5827,30 +5866,30 @@ function NavbarLink({
   indicator,
   settings
 }) {
-  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react4.useState(false);
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react5.useState(false);
   const iconProps = {
     size: settings.iconSize,
     stroke: 1.5
   };
   const Icon2 = icon ?? import_icons_react2.IconLink;
   if (!href) {
-    return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Tooltip, {
+    return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Tooltip, {
       label,
       position: "right",
       transitionProps: { duration: 0 },
-      children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.UnstyledButton, {
+      children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.UnstyledButton, {
         onClick,
         className: "remoraid-navbar-minimal-link",
         "data-active": active || undefined,
         w: settings.linkSize,
         h: settings.linkSize,
-        children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Icon2, {
+        children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Icon2, {
           ...iconProps
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  const button = /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.UnstyledButton, {
+  const button = /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.UnstyledButton, {
     onClick,
     className: "remoraid-navbar-minimal-link",
     "data-active": active || undefined,
@@ -5858,15 +5897,15 @@ function NavbarLink({
     h: settings.linkSize,
     component: import_link.default,
     href,
-    children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Icon2, {
+    children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Icon2, {
       ...iconProps
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Tooltip, {
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Tooltip, {
     label,
     position: "right",
     transitionProps: { duration: 0 },
-    children: indicator === undefined ? button : /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Indicator, {
+    children: indicator === undefined ? button : /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Indicator, {
       withBorder: true,
       size: 13,
       offset: 2,
@@ -5879,7 +5918,7 @@ function NavbarLink({
 }
 var defaultSettings = {
   hiddenPages: [],
-  linkSize: import_core2.rem("50px"),
+  linkSize: import_core3.rem("50px"),
   iconSize: "50%",
   px: "sm",
   py: "md"
@@ -5895,14 +5934,14 @@ function NavbarMinimal({
   const { userExperience } = useRemoraidUserExperience();
   const pathname = import_navigation.usePathname();
   const theme = useRemoraidTheme();
-  const { setColorScheme, colorScheme } = import_core2.useMantineColorScheme();
+  const { setColorScheme, colorScheme } = useHydratedMantineColorScheme();
   const app = useRemoraidApp();
-  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react4.useState(false);
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react5.useState(false);
   const settings = {
     ...userExperience.navbarSettings,
     ...settingsProp
   };
-  const links = app.navigablePages.filter((link) => !settings.hiddenPages.includes(link.href)).map((link) => /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(NavbarLink, {
+  const links = app.navigablePages.filter((link) => !settings.hiddenPages.includes(link.href)).map((link) => /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
     active: link.href === pathname,
     indicator: linkIndicator,
     settings,
@@ -5915,19 +5954,19 @@ function NavbarMinimal({
       height: settings.linkSize
     }
   });
-  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Paper, {
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Paper, {
     h: "100%",
     py: settings.py,
     bg: theme.transparentBackground,
     radius: 0,
     shadow: "md",
-    children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Flex, {
+    children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Flex, {
       direction: "column",
       h: "100%",
       align: "center",
       px: settings.px,
       children: [
-        logoIndicator === undefined ? logoImage : /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Indicator, {
+        logoIndicator === undefined ? logoImage : /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Indicator, {
           withBorder: true,
           offset: 2,
           size: 13,
@@ -5936,28 +5975,28 @@ function NavbarMinimal({
           ...logoIndicator(isHoveringRoleIndicator),
           children: logoImage
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Divider, {
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Divider, {
           my: "md",
           variant: "dashed",
           w: "100%"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Stack, {
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Stack, {
           justify: "flex-start",
           gap: 0,
           flex: 1,
           children: links
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core2.Stack, {
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Stack, {
           justify: "center",
           gap: 0,
           children: [
-            user !== undefined && (user === null ? /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(NavbarLink, {
+            user !== undefined && (user === null ? /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
               icon: import_icons_react2.IconLogin,
               label: "Login",
               href: "/login",
               active: pathname === "/login",
               settings
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(NavbarLink, {
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
               icon: import_icons_react2.IconLogout,
               label: "Logout",
               onClick: () => {
@@ -5968,14 +6007,13 @@ function NavbarMinimal({
               href: "/login",
               settings
             }, undefined, false, undefined, this)),
-            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(NavbarLink, {
+            /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
               icon: colorScheme === "dark" ? import_icons_react2.IconSun : import_icons_react2.IconMoon,
               onClick: () => {
-                if (colorScheme === "dark") {
-                  setColorScheme("light");
-                } else {
-                  setColorScheme("dark");
+                if (!colorScheme || !setColorScheme) {
+                  return;
                 }
+                setColorScheme(colorScheme === "dark" ? "light" : "dark");
               },
               label: "Toggle Color Scheme",
               settings
@@ -5988,10 +6026,10 @@ function NavbarMinimal({
 }
 
 // src/core/components/UserExperienceProviderWrapper/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_cookie = require("react-cookie");
-var jsx_dev_runtime5 = require("react/jsx-dev-runtime");
-var createUserExperienceContext = (defaultUserExperience) => import_react5.createContext({
+var jsx_dev_runtime6 = require("react/jsx-dev-runtime");
+var createUserExperienceContext = (defaultUserExperience) => import_react6.createContext({
   userExperience: defaultUserExperience,
   updateUserExperience: () => {},
   processedCookie: false,
@@ -6010,14 +6048,14 @@ function UserExperienceProviderWrapper({
     ...defaultUserExperience,
     ...initialValue
   };
-  const [userExperience, setUserExperience] = import_react5.useState(initialUserExperience);
-  const [processedCookie, setProcessedCookie] = import_react5.useState(false);
+  const [userExperience, setUserExperience] = import_react6.useState(initialUserExperience);
+  const [processedCookie, setProcessedCookie] = import_react6.useState(false);
   const updateUserExperience = (p) => {
     const updatedUserExperience = typeof p === "function" ? p(userExperience) : p;
     setCookie(cookieName, updatedUserExperience, { path: "/" });
     setUserExperience(updatedUserExperience);
   };
-  import_react5.useEffect(() => {
+  import_react6.useEffect(() => {
     const userExperienceCookie = cookies[cookieName];
     if (userExperienceCookie && isValidUserExperience(userExperienceCookie)) {
       setUserExperience(userExperienceCookie);
@@ -6026,7 +6064,7 @@ function UserExperienceProviderWrapper({
       setProcessedCookie(true);
     }
   }, [cookies]);
-  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(context.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(context.Provider, {
     value: {
       userExperience,
       updateUserExperience,
@@ -6038,7 +6076,7 @@ function UserExperienceProviderWrapper({
 }
 
 // src/core/components/RemoraidProvider/CoreUserExperienceProvider/index.tsx
-var jsx_dev_runtime6 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime7 = require("react/jsx-dev-runtime");
 var defaultNavbarSettings = {
   ["minimal" /* Minimal */]: defaultSettings
 };
@@ -6050,7 +6088,7 @@ var defaultUserExperience = {
 var defaultUserExperienceCookieName = "remoraid-core-user-experience";
 var coreUserExperienceContext = createUserExperienceContext(defaultUserExperience);
 var useRemoraidUserExperience = () => {
-  return import_react6.useContext(coreUserExperienceContext);
+  return import_react7.useContext(coreUserExperienceContext);
 };
 function CoreUserExperienceProvider({
   children,
@@ -6093,7 +6131,7 @@ function CoreUserExperienceProvider({
     }
     return true;
   };
-  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(UserExperienceProviderWrapper, {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(UserExperienceProviderWrapper, {
     context: coreUserExperienceContext,
     isValidUserExperience,
     cookieName: cookieName ?? defaultUserExperienceCookieName,
@@ -6104,53 +6142,54 @@ function CoreUserExperienceProvider({
 }
 
 // src/core/components/RemoraidProvider/index.tsx
-var jsx_dev_runtime7 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime8 = require("react/jsx-dev-runtime");
 function RemoraidProvider({
   children,
   theme,
   initialUserExperience,
   componentsProps
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(import_react_cookie2.CookiesProvider, {
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(import_react_cookie2.CookiesProvider, {
     ...componentsProps?.CookiesProvider,
-    children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(ThemeProvider, {
-      theme,
-      ...componentsProps?.ThemeProvider,
-      children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(CoreUserExperienceProvider, {
-        initialValue: initialUserExperience,
-        ...componentsProps?.CoreUserExperienceProvider,
-        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(WidgetsProvider, {
-          ...componentsProps?.WidgetsProvider,
-          children
+    children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(HydrationStatusProvider, {
+      ...componentsProps?.HydrationStatusProviderProps,
+      children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(ThemeProvider, {
+        theme,
+        ...componentsProps?.ThemeProvider,
+        children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(CoreUserExperienceProvider, {
+          initialValue: initialUserExperience,
+          ...componentsProps?.CoreUserExperienceProvider,
+          children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(WidgetsProvider, {
+            ...componentsProps?.WidgetsProvider,
+            children
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 // src/core/components/AppShell/index.tsx
-var import_core4 = require("@mantine/core");
+var import_core5 = require("@mantine/core");
 var import_hooks = require("@mantine/hooks");
 
 // src/core/components/AppShell/Footer/index.tsx
-var import_core3 = require("@mantine/core");
+var import_core4 = require("@mantine/core");
 var import_icons_react3 = require("@tabler/icons-react");
-var jsx_dev_runtime8 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime9 = require("react/jsx-dev-runtime");
 function Footer() {
-  const theme = import_core3.useMantineTheme();
-  const { colorScheme } = import_core3.useMantineColorScheme();
-  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(import_core3.Group, {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.Group, {
     justify: "center",
     w: "100%",
     py: "md",
-    children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(import_icons_react3.IconPennant, {
+    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_icons_react3.IconPennant, {
       size: 50,
-      color: colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]
+      color: "var(--mantine-color-default-border)"
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
 // src/core/components/AppShell/index.tsx
-var jsx_dev_runtime9 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime10 = require("react/jsx-dev-runtime");
 function AppShell({
   children,
   logo,
@@ -6159,33 +6198,36 @@ function AppShell({
   navigablePages
 }) {
   const { userExperience } = useRemoraidUserExperience();
-  const mantineTheme = import_core4.useMantineTheme();
+  const mantineTheme = import_core5.useMantineTheme();
   const theme = useRemoraidTheme();
-  const { colorScheme } = import_core4.useMantineColorScheme();
+  const { colorScheme } = useHydratedMantineColorScheme();
   const [opened, { toggle }] = import_hooks.useDisclosure();
   const navbarVariant = navbar && navbar.variant ? navbar.variant : userExperience.navbarVariant;
-  const navbarSettings = navbar && navbar.settings ? navbar.settings : userExperience.navbarSettings;
-  const navbarLinkSizePx = co((v) => !Number.isNaN(v), Number(import_core4.px(navbarSettings.linkSize)), 0);
+  const navbarSettings = {
+    ...userExperience.navbarSettings,
+    ...navbar?.settings
+  };
+  const navbarLinkSizePx = co((v) => !Number.isNaN(v), Number(import_core5.px(navbarSettings.linkSize)), 0);
   const navbarPaddingPx = typeof navbarSettings.px === "number" ? navbarSettings.px : theme.spacingPx ? theme.spacingPx[navbarSettings.px] : 0;
-  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(AppProvider, {
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(AppProvider, {
     user,
     navigablePages,
-    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.AppShell, {
+    children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell, {
       header: { height: 0 },
       navbar: {
-        width: import_core4.rem(`${navbarLinkSizePx + 2 * navbarPaddingPx}px`),
+        width: import_core5.rem(`${navbarLinkSizePx + 2 * navbarPaddingPx}px`),
         breakpoint: "sm",
         collapsed: { mobile: !opened }
       },
       bg: colorScheme === "dark" ? mantineTheme.colors.dark[9] : mantineTheme.colors.gray[0],
       children: [
-        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.AppShell.Header, {
+        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell.Header, {
           withBorder: false,
-          children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.Group, {
+          children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.Group, {
             p: "md",
             bg: colorScheme === "dark" ? mantineTheme.colors.dark[8] : mantineTheme.colors.gray[3],
             hiddenFrom: "sm",
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.Burger, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.Burger, {
               opened,
               onClick: toggle,
               h: 20,
@@ -6193,25 +6235,25 @@ function AppShell({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.AppShell.Navbar, {
+        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell.Navbar, {
           withBorder: false,
-          children: navbarVariant === "minimal" /* Minimal */ && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(NavbarMinimal, {
+          children: navbarVariant === "minimal" /* Minimal */ && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(NavbarMinimal, {
             logo,
             user,
             ...navbar
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.AppShell.Main, {
-          children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(jsx_dev_runtime9.Fragment, {
+        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell.Main, {
+          children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.Paper, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.Paper, {
                 radius: 0,
                 my: "md",
                 h: 20,
                 hiddenFrom: "sm"
               }, undefined, false, undefined, this),
               children,
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Footer, {}, undefined, false, undefined, this)
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Footer, {}, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this)
         }, undefined, false, undefined, this)
@@ -6220,22 +6262,22 @@ function AppShell({
   }, undefined, false, undefined, this);
 }
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_core6 = require("@mantine/core");
+var import_core8 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_navigation2 = require("next/navigation");
 
 // src/core/components/Page/PageContainer/index.tsx
-var import_core5 = require("@mantine/core");
-var jsx_dev_runtime10 = require("react/jsx-dev-runtime");
+var import_core6 = require("@mantine/core");
+var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
 function PageContainer({
   children,
   pt,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.Container, {
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core6.Container, {
     size: theme.containerSize,
     pt: pt ?? "md",
     ...componentsProps?.container,
@@ -6244,10 +6286,10 @@ function PageContainer({
 }
 
 // src/core/components/Page/index.tsx
-var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
-var pageContext = import_react7.default.createContext(null);
+var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
+var pageContext = import_react8.default.createContext(null);
 var usePage = () => {
-  return import_react7.useContext(pageContext);
+  return import_react8.useContext(pageContext);
 };
 function Page({
   children,
@@ -6259,16 +6301,16 @@ function Page({
   const pathname = import_navigation2.usePathname();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
-  import_react7.useEffect(() => {
+  import_react8.useEffect(() => {
     if (!isPageRegistered(pageId)) {
       if (config?.registerPageDirectly) {
         registerPage(pageId, []);
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(pageContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(pageContext.Provider, {
     value: { name: name ?? pathname, pageId, ...config },
-    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(PageContainer, {
+    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(PageContainer, {
       pt,
       componentsProps: { container: componentsProps?.container },
       children
@@ -6278,7 +6320,40 @@ function Page({
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 var import_icons_react4 = require("@tabler/icons-react");
-var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
+
+// src/core/components/ScrollableChipGroup/index.tsx
+var import_core7 = require("@mantine/core");
+var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
+function ScrollableChipGroup({
+  value,
+  onChange,
+  gap,
+  componentsProps,
+  children
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.ScrollArea, {
+    ...theme.scrollAreaProps,
+    ...componentsProps?.scrollArea,
+    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Chip.Group, {
+      value,
+      onChange,
+      ...componentsProps?.chipGroup,
+      multiple: true,
+      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Flex, {
+        justify: "flex-start",
+        align: "center",
+        gap: gap ?? "xs",
+        h: "auto",
+        ...componentsProps?.container,
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/WidgetSelectionHeader/index.tsx
+var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
 function WidgetSelectionHeader({
   title,
   disabledWidgets,
@@ -6291,63 +6366,53 @@ function WidgetSelectionHeader({
     console.error("'WidgetSelectionHeader' must be rendered inside of a 'Page' component.");
     return null;
   }
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Flex, {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Flex, {
     justify: "flex-start",
     align: "center",
     gap: "xs",
     mt,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Text, {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Text, {
         size: "lg",
         fw: 400,
         children: title ?? page.name
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Divider, {
         orientation: "vertical"
       }, undefined, false, undefined, this),
-      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.ScrollArea, {
-        flex: 1,
-        ...theme.scrollAreaProps,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Chip.Group, {
-          multiple: true,
-          value: Object.keys(widgets[page.pageId]).filter((widgetId) => widgets[page.pageId][widgetId].selected),
-          onChange: (value) => {
-            updateWidgetSelectionBulk(page.pageId, value);
-          },
-          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Flex, {
-            justify: "flex-start",
-            align: "center",
-            gap: "xs",
-            h: "auto",
-            children: Object.keys(widgets[page.pageId]).map((widgetId) => /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Chip, {
-              value: widgetId,
-              size: "sm",
-              disabled: disabledWidgets && disabledWidgets.includes(widgetId),
-              icon: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_icons_react4.IconCheck, {
-                ...theme.iconProps.tiny
-              }, undefined, false, undefined, this),
-              children: widgets[page.pageId][widgetId].name
-            }, widgetId, false, undefined, this))
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
+      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(ScrollableChipGroup, {
+        value: Object.keys(widgets[page.pageId]).filter((widgetId) => widgets[page.pageId][widgetId].selected),
+        onChange: (value) => {
+          updateWidgetSelectionBulk(page.pageId, value);
+        },
+        componentsProps: { scrollArea: { flex: 1 } },
+        children: Object.keys(widgets[page.pageId]).map((widgetId) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Chip, {
+          value: widgetId,
+          size: "sm",
+          disabled: disabledWidgets && disabledWidgets.includes(widgetId),
+          icon: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_icons_react4.IconCheck, {
+            ...theme.iconProps.tiny
+          }, undefined, false, undefined, this),
+          children: widgets[page.pageId][widgetId].name
+        }, widgetId, false, undefined, this))
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 // src/core/components/Widget/WidgetWrapper/CloseButton/index.tsx
-var import_core7 = require("@mantine/core");
+var import_core9 = require("@mantine/core");
 var import_icons_react5 = require("@tabler/icons-react");
-var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
 function CloseButton({ widgetId }) {
   const theme = useRemoraidTheme();
   const { activeWidget, updateWidgetSelection } = useWidgets();
   const page = usePage();
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.Transition, {
     mounted: activeWidget === widgetId,
     transition: "pop-top-right",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.ActionIcon, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.ActionIcon, {
       pos: "absolute",
       size: "xs",
       className: "remoraid-close-button",
@@ -6360,19 +6425,19 @@ function CloseButton({ widgetId }) {
         updateWidgetSelection(page.pageId, widgetId, false);
       },
       style: transitionStyle,
-      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_icons_react5.IconX, {
+      children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_icons_react5.IconX, {
         ...theme.iconProps.tiny
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 // src/core/components/BadgeGroup/index.tsx
-var import_core9 = require("@mantine/core");
-var import_react8 = __toESM(require("react"));
+var import_core11 = require("@mantine/core");
+var import_react9 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
-var import_core8 = require("@mantine/core");
-var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
+var import_core10 = require("@mantine/core");
+var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 var isBadgeMinimalProps = (e) => {
   if (typeof e !== "object") {
     return false;
@@ -6385,17 +6450,17 @@ var isBadgeMinimalProps = (e) => {
 function BadgeMinimal(props) {
   const { label, tooltip, mounted, componentsProps } = props;
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Transition, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Tooltip, {
       disabled: !tooltip,
       label: tooltip,
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Badge, {
+      children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -6410,7 +6475,7 @@ function BadgeMinimal(props) {
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
 var react = require("react");
 function BadgeGroup({
   badges,
@@ -6420,9 +6485,9 @@ function BadgeGroup({
 }) {
   const theme = useRemoraidTheme();
   const numVisibleBadges = badges.filter((e) => isBadgeMinimalProps(e) ? e.mounted !== false : true).length;
-  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(jsx_dev_runtime15.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.Group, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Group, {
         gap: gap ?? "xs",
         wrap: "nowrap",
         visibleFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
@@ -6436,10 +6501,10 @@ function BadgeGroup({
           return e;
         })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Tooltip, {
         label: `${numVisibleBadges} badge${numVisibleBadges === 1 ? "" : "s"}`,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.Badge, {
+        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Badge, {
           hiddenFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
           hidden: numVisibleBadges === 0,
           variant: "light",
@@ -6453,8 +6518,8 @@ function BadgeGroup({
   }, undefined, true, undefined, this);
 }
 // src/core/components/AlertMinimal/index.tsx
-var import_core10 = require("@mantine/core");
-var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
+var import_core12 = require("@mantine/core");
+var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
 var isAlertMinimalProps = (e) => {
   if (typeof e !== "object") {
     return false;
@@ -6476,13 +6541,13 @@ function AlertMinimal({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Transition, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Alert, {
       ...theme.alertProps[category],
       title: title ?? theme.alertProps[category].title,
       withCloseButton: onClose !== undefined,
@@ -6502,9 +6567,9 @@ function AlertMinimal({
   }, undefined, false, undefined, this);
 }
 // src/core/components/RemoraidButton/index.tsx
-var import_core11 = require("@mantine/core");
+var import_core13 = require("@mantine/core");
 var import_icons_react6 = require("@tabler/icons-react");
-var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
 var isRemoraidButtonProps = (e) => {
   if (typeof e !== "object") {
     return false;
@@ -6529,17 +6594,17 @@ function RemoraidButton({
 }) {
   const theme = useRemoraidTheme();
   const iconProps = { ...theme.iconProps.medium, ...componentsProps?.icon };
-  const icon = props.icon ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(props.icon, {
+  const icon = props.icon ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(props.icon, {
     ...iconProps
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_icons_react6.IconClick, {
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_icons_react6.IconClick, {
     ...iconProps
   }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Tooltip, {
         label,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.ActionIcon, {
+        children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.ActionIcon, {
           "aria-label": label,
           variant: variant ?? "default",
           onClick,
@@ -6553,7 +6618,7 @@ function RemoraidButton({
           children: icon
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Button, {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Button, {
         onClick,
         loading,
         variant: variant ?? "default",
@@ -6570,9 +6635,9 @@ function RemoraidButton({
   }, undefined, true, undefined, this);
 }
 // src/core/components/Widget/WidgetWrapper/index.tsx
-var import_core12 = require("@mantine/core");
-var import_react9 = require("react");
-var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
+var import_core14 = require("@mantine/core");
+var import_react10 = require("react");
+var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
   children,
   config,
@@ -6590,7 +6655,7 @@ function WidgetWrapper({
   const page = usePage();
   const theme = useRemoraidTheme();
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  import_react9.useEffect(() => {
+  import_react10.useEffect(() => {
     if (!page) {
       return;
     }
@@ -6598,12 +6663,12 @@ function WidgetWrapper({
       registerWidget(page.pageId, config);
     }
   }, [pageRegistered]);
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Transition, {
     mounted: page !== null && isWidgetSelected(page.pageId, config.widgetId),
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Paper, {
       p: "md",
       shadow: "md",
       bg: theme.transparentBackground,
@@ -6619,7 +6684,7 @@ function WidgetWrapper({
         updateActiveWidget(null);
       },
       children: [
-        withCloseButton !== false && /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(CloseButton, {
+        withCloseButton !== false && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(CloseButton, {
           widgetId: config.widgetId
         }, undefined, false, undefined, this),
         children
@@ -6631,8 +6696,8 @@ var WidgetWrapper_default = Object.assign(WidgetWrapper, {
   CloseButton
 });
 // src/core/components/Widget/index.tsx
-var import_core13 = require("@mantine/core");
-var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
+var import_core15 = require("@mantine/core");
+var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
   children,
@@ -6650,7 +6715,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_dev_runtime19.jsxDEV(WidgetWrapper_default, {
+  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(WidgetWrapper_default, {
     config: {
       widgetId: id,
       name: title,
@@ -6663,28 +6728,28 @@ function Widget({
     },
     ...componentsProps?.wrapper,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Group, {
+      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Group, {
         justify: "space-between",
         wrap: "nowrap",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Group, {
+          /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Group, {
             gap: badgesGap,
             wrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Title, {
+              /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Title, {
                 order: 1,
                 size: "h3",
                 lineClamp: 1,
                 children: title
               }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(BadgeGroup, {
+              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(BadgeGroup, {
                 badges,
                 gap: badgesGap,
                 ...componentsProps?.badgeGroup
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Group, {
+          /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Group, {
             gap: buttonsGap,
             wrap: "nowrap",
             children: buttons !== undefined && buttons.map((e, i) => {
@@ -6699,7 +6764,7 @@ function Widget({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Divider, {
         my: "md"
       }, undefined, false, undefined, this),
       alerts !== undefined && alerts.map((a, i) => {
@@ -6712,20 +6777,20 @@ function Widget({
         }
         return a;
       }),
-      loading ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Center, {
-        children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Loader, {
+      loading ? /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Center, {
+        children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Loader, {
           ...componentsProps?.loader
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(jsx_dev_runtime21.Fragment, {
         children
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
-var import_core14 = require("@mantine/core");
+var import_core16 = require("@mantine/core");
 var import_navigation3 = require("next/navigation");
-var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
 function NotFoundPage({
   children,
   message,
@@ -6733,11 +6798,11 @@ function NotFoundPage({
 }) {
   const pathname = import_navigation3.usePathname();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Page, {
+  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Alert, {
+      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Alert, {
         ...theme.alertProps.negative,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -6747,8 +6812,8 @@ function NotFoundPage({
   }, undefined, true, undefined, this);
 }
 // src/core/components/EnvironmentShell/index.tsx
-var import_core15 = require("@mantine/core");
-var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
+var import_core17 = require("@mantine/core");
+var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
 function EnvironmentShell({
   children,
   environment,
@@ -6762,7 +6827,7 @@ function EnvironmentShell({
   const undefinedKeys = Object.keys(environment).filter((key) => environment[key] === undefined);
   const alertTitle = `Please Specify Environment Variable${undefinedKeys.length > 1 ? "s" : ""}`;
   const alertMessage = `Components could not be rendered because the following environment variables are not specified: ${undefinedKeys.join(", ")}.`;
-  const alert = /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Alert, {
+  const alert = /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Alert, {
     ...theme.alertProps.neutral,
     title: alertTitle,
     m,
@@ -6770,12 +6835,12 @@ function EnvironmentShell({
     children: message ?? alertMessage
   }, undefined, false, undefined, this);
   if (undefinedKeys.length === 0) {
-    return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(jsx_dev_runtime21.Fragment, {
+    return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(jsx_dev_runtime23.Fragment, {
       children
     }, undefined, false, undefined, this);
   }
   if (withContainer) {
-    return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(PageContainer, {
+    return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(PageContainer, {
       componentsProps: { container: componentsProps?.container },
       children: alert
     }, undefined, false, undefined, this);
@@ -6783,26 +6848,27 @@ function EnvironmentShell({
   return alert;
 }
 // src/core/components/SettingsWidget/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_icons_react8 = require("@tabler/icons-react");
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
 var import_icons_react7 = require("@tabler/icons-react");
-var import_core16 = require("@mantine/core");
-var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
+var import_core18 = require("@mantine/core");
+var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
 function SaveButton({
   onSaveChanges,
   insideContainer,
   componentsProps
 }) {
   const settingsWidgetOptions = useSettingsWidgetContext();
-  const button = /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(RemoraidButton, {
+  const button = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(RemoraidButton, {
     label: "Save Changes",
     icon: import_icons_react7.IconDeviceFloppy,
     onClick: onSaveChanges,
     responsive: false,
     ...componentsProps?.button,
     componentsProps: {
+      ...componentsProps?.button?.componentsProps,
       button: {
         disabled: settingsWidgetOptions.unsavedChanges === false,
         ...componentsProps?.button?.componentsProps?.button
@@ -6810,7 +6876,7 @@ function SaveButton({
     }
   }, undefined, false, undefined, this);
   if (insideContainer !== false) {
-    return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Group, {
+    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Group, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -6822,11 +6888,11 @@ function SaveButton({
 }
 
 // src/core/components/SettingsWidget/index.tsx
-var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = import_react10.createContext(defaultSettingsWidgetContext);
+var settingsWidgetContext = import_react11.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return import_react10.useContext(settingsWidgetContext);
+  return import_react11.useContext(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -6835,9 +6901,9 @@ function SettingsWidget({
   custom,
   widgetProps
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(settingsWidgetContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(settingsWidgetContext.Provider, {
     value: { custom, unsavedChanges },
-    children: /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(Widget, {
+    children: /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Widget, {
       title: "Settings",
       id: "settings",
       mt: "md",
@@ -6847,7 +6913,8 @@ function SettingsWidget({
           {
             label: "Restore Default Values",
             icon: import_icons_react8.IconRestore,
-            onClick: onRestoreDefaultValues
+            onClick: onRestoreDefaultValues,
+            componentsProps: { button: { disabled: custom === false } }
           }
         ] : [],
         ...widgetProps?.buttons ?? []
@@ -6872,27 +6939,27 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var import_react11 = require("react");
-var import_core18 = require("@mantine/core");
+var import_react12 = require("react");
+var import_core20 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
-var import_core17 = require("@mantine/core");
-var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
+var import_core19 = require("@mantine/core");
+var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 function Row({
   children,
   label
 }) {
   const options = useSettingsTableOptions();
-  return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Table.Tr, {
+  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Table.Tr, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Table.Th, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Text, {
           size: "sm",
           children: label
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Table.Td, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Table.Td, {
         py: "xs",
         children
       }, undefined, false, undefined, this)
@@ -6901,29 +6968,29 @@ function Row({
 }
 
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime27 = require("react/jsx-dev-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = import_react11.createContext(defaultSettingsTableOptions);
+var settingsTableOptionsContext = import_react12.createContext(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return import_react11.useContext(settingsTableOptionsContext);
+  return import_react12.useContext(settingsTableOptionsContext);
 };
 function SettingsTable({
   children,
   leftColumnWidth
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(settingsTableOptionsContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(settingsTableOptionsContext.Provider, {
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core18.Table, {
+    children: /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Table, {
       bg: theme.transparentBackground,
       withTableBorder: true,
       variant: "vertical",
       layout: "fixed",
-      children: /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core18.Table.Tbody, {
+      children: /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Table.Tbody, {
         children
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -6933,11 +7000,11 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_lodash = __toESM(require_lodash());
-var import_core19 = require("@mantine/core");
+var import_core21 = require("@mantine/core");
 var import_icons_react9 = require("@tabler/icons-react");
-var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime28 = require("react/jsx-dev-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
 function NavbarSettingsWidget({
   additionalRows,
@@ -6947,7 +7014,7 @@ function NavbarSettingsWidget({
   const { userExperience, updateUserExperience, initialUserExperience } = useRemoraidUserExperience();
   const app = useRemoraidApp();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SettingsWidget_default, {
+  return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SettingsWidget_default, {
     widgetProps: {
       id: defaultNavbarSettingsWidgetId,
       title: "Navbar Settings",
@@ -6960,11 +7027,11 @@ function NavbarSettingsWidget({
       }));
     },
     custom: !import_lodash.isEqual(userExperience.navbarSettings, initialUserExperience.navbarSettings),
-    children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SettingsTable_default, {
+    children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SettingsTable_default, {
       children: [
-        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SettingsTable_default.Row, {
           label: "Select which pages you want to display or hide",
-          children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Chip.Group, {
+          children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(import_core21.Chip.Group, {
             multiple: true,
             value: app.navigablePages.filter((p) => !userExperience.navbarSettings.hiddenPages.includes(p.href)).map((p) => p.href),
             onChange: (newValue) => {
@@ -6976,12 +7043,12 @@ function NavbarSettingsWidget({
                 }
               }));
             },
-            children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Group, {
+            children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(import_core21.Group, {
               justify: "flex-start",
               gap: "xs",
-              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? import_icons_react9.IconLink })).map((p, i) => /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Chip, {
+              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? import_icons_react9.IconLink })).map((p, i) => /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(import_core21.Chip, {
                 value: p.href,
-                icon: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(p.icon, {
+                icon: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(p.icon, {
                   ...theme.iconProps.tiny,
                   color: theme.primaryColor
                 }, undefined, false, undefined, this),
@@ -6991,7 +7058,7 @@ function NavbarSettingsWidget({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         }, "select-hidden-pages", false, undefined, this),
-        ...(additionalRows ?? []).map((row, i) => row.key ? row : import_react12.cloneElement(row, { key: i }))
+        ...(additionalRows ?? []).map((row, i) => row.key ? row : import_react13.cloneElement(row, { key: i }))
       ],
       ...componentsProps?.table
     }, undefined, false, undefined, this)