remoraid 2.7.2 → 2.14.7

package/dist/core/index.cjs

@@ -1001,7 +1001,7 @@ var require_lodash = __commonJS((exports2, module2) => {
       }
       SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
       SetCache.prototype.has = setCacheHas;
-      function Stack2(entries) {
+      function Stack4(entries) {
         var data = this.__data__ = new ListCache(entries);
         this.size = data.size;
       }
@@ -1035,11 +1035,11 @@ var require_lodash = __commonJS((exports2, module2) => {
         this.size = data.size;
         return this;
       }
-      Stack2.prototype.clear = stackClear;
-      Stack2.prototype["delete"] = stackDelete;
-      Stack2.prototype.get = stackGet;
-      Stack2.prototype.has = stackHas;
-      Stack2.prototype.set = stackSet;
+      Stack4.prototype.clear = stackClear;
+      Stack4.prototype["delete"] = stackDelete;
+      Stack4.prototype.get = stackGet;
+      Stack4.prototype.has = stackHas;
+      Stack4.prototype.set = stackSet;
       function arrayLikeKeys(value, inherited) {
         var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result2 = skipIndexes ? baseTimes(value.length, String) : [], length = result2.length;
         for (var key in value) {
@@ -1155,7 +1155,7 @@ var require_lodash = __commonJS((exports2, module2) => {
             result2 = initCloneByTag(value, tag, isDeep);
           }
         }
-        stack || (stack = new Stack2);
+        stack || (stack = new Stack4);
         var stacked = stack.get(value);
         if (stacked) {
           return stacked;
@@ -1424,21 +1424,21 @@ var require_lodash = __commonJS((exports2, module2) => {
           objIsObj = false;
         }
         if (isSameTag && !objIsObj) {
-          stack || (stack = new Stack2);
+          stack || (stack = new Stack4);
           return objIsArr || isTypedArray(object) ? equalArrays(object, other, bitmask, customizer, equalFunc, stack) : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
         }
         if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
           var objIsWrapped = objIsObj && hasOwnProperty.call(object, "__wrapped__"), othIsWrapped = othIsObj && hasOwnProperty.call(other, "__wrapped__");
           if (objIsWrapped || othIsWrapped) {
             var objUnwrapped = objIsWrapped ? object.value() : object, othUnwrapped = othIsWrapped ? other.value() : other;
-            stack || (stack = new Stack2);
+            stack || (stack = new Stack4);
             return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
           }
         }
         if (!isSameTag) {
           return false;
         }
-        stack || (stack = new Stack2);
+        stack || (stack = new Stack4);
         return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
       }
       function baseIsMap(value) {
@@ -1464,7 +1464,7 @@ var require_lodash = __commonJS((exports2, module2) => {
               return false;
             }
           } else {
-            var stack = new Stack2;
+            var stack = new Stack4;
             if (customizer) {
               var result2 = customizer(objValue, srcValue, key, object, source, stack);
             }
@@ -1560,7 +1560,7 @@ var require_lodash = __commonJS((exports2, module2) => {
           return;
         }
         baseFor(source, function(srcValue, key) {
-          stack || (stack = new Stack2);
+          stack || (stack = new Stack4);
           if (isObject(srcValue)) {
             baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
@@ -5467,17 +5467,31 @@ __export(exports_core, {
   useRemoraidTheme: () => useRemoraidTheme,
   useRemoraidApp: () => useRemoraidApp,
   usePage: () => usePage,
+  useLayouts: () => useLayouts,
   useHydrationStatus: () => useHydrationStatus,
   useHydratedMantineColorScheme: () => useHydratedMantineColorScheme,
+  useFrameLayout: () => useFrameLayout,
+  isValidElementOfType: () => isValidElementOfType,
+  isFrameLayout: () => isFrameLayout,
+  getElementTypeName: () => getElementTypeName,
   defaultUserExperienceCookieName: () => defaultUserExperienceCookieName,
   defaultUserExperience: () => defaultUserExperience,
   defaultSettingsWidgetOptions: () => defaultSettingsWidgetContext,
   defaultSettingsTableOptions: () => defaultSettingsTableOptions,
   defaultNavbarSettingsWidgetId: () => defaultNavbarSettingsWidgetId,
-  defaultNavbarSettings: () => defaultNavbarSettings,
+  defaultLayoutsContext: () => defaultLayoutsContext,
+  defaultFrameLayoutContext: () => defaultFrameLayoutContext,
+  defaultAppShellNavbarPositions: () => defaultAppShellNavbarPositions,
+  defaultAppShellLayoutId: () => defaultAppShellLayoutId,
+  defaultAppShellFooterPositions: () => defaultAppShellFooterPositions,
   defaultAppContext: () => defaultAppContext,
   createUserExperienceContext: () => createUserExperienceContext,
   createRemoraidTheme: () => createRemoraidTheme,
+  createContextCluster: () => createContextCluster,
+  co: () => co,
+  asElementOrPropsOfType: () => asElementOrPropsOfType,
+  asElementOfType: () => asElementOfType,
+  asChildrenOfType: () => asChildrenOfType,
   WidgetWrapper: () => WidgetWrapper_default,
   WidgetSelectionHeader: () => WidgetSelectionHeader,
   Widget: () => Widget,
@@ -5495,11 +5509,17 @@ __export(exports_core, {
   NotFoundPage: () => NotFoundPage,
   NavbarVariant: () => NavbarVariant,
   NavbarSettingsWidget: () => NavbarSettingsWidget,
+  LayoutType: () => LayoutType,
   HydrationStatusProvider: () => HydrationStatusProvider,
+  FrameLayoutVariant: () => FrameLayoutVariant,
+  FrameLayoutSection: () => FrameLayoutSection,
+  FrameLayout: () => FrameLayout_default,
+  FooterVariant: () => FooterVariant,
   EnvironmentShell: () => EnvironmentShell,
+  ContextClusterProvider: () => ContextClusterProvider,
   BadgeMinimal: () => BadgeMinimal,
   BadgeGroup: () => BadgeGroup,
-  AppShell: () => AppShell,
+  AppShell: () => AppShell_default,
   AppProvider: () => AppProvider,
   AlertMinimal: () => AlertMinimal,
   AlertCategory: () => AlertCategory
@@ -5643,6 +5663,10 @@ var NavbarVariant;
 ((NavbarVariant2) => {
   NavbarVariant2["Minimal"] = "minimal";
 })(NavbarVariant ||= {});
+var FooterVariant;
+((FooterVariant2) => {
+  FooterVariant2["Minimal"] = "minimal";
+})(FooterVariant ||= {});
 var AlertCategory;
 ((AlertCategory2) => {
   AlertCategory2["Negative"] = "negative";
@@ -5665,18 +5689,69 @@ var RemoraidIconSize;
   RemoraidIconSize2["Tiny"] = "tiny";
   RemoraidIconSize2["Medium"] = "medium";
 })(RemoraidIconSize ||= {});
+var LayoutType;
+((LayoutType2) => {
+  LayoutType2["Frame"] = "frame";
+})(LayoutType ||= {});
+var FrameLayoutSection;
+((FrameLayoutSection2) => {
+  FrameLayoutSection2["Top"] = "top";
+  FrameLayoutSection2["Bottom"] = "bottom";
+  FrameLayoutSection2["Left"] = "left";
+  FrameLayoutSection2["Right"] = "right";
+  FrameLayoutSection2["Content"] = "content";
+})(FrameLayoutSection ||= {});
+var FrameLayoutVariant;
+((FrameLayoutVariant2) => {
+  FrameLayoutVariant2["Plain"] = "plain";
+  FrameLayoutVariant2["Sticky"] = "sticky";
+})(FrameLayoutVariant ||= {});
 
 // src/core/lib/utils.ts
+var import_react2 = require("react");
 var co = (condition, value, fallback) => condition(value) ? value : fallback;
+var isValidElementOfType = (type, value) => {
+  return import_react2.isValidElement(value) && value.type === type;
+};
+var getElementTypeName = (type) => {
+  if (typeof type === "string") {
+    return type;
+  }
+  if (typeof type === "function") {
+    return type.displayName ?? type.name ?? "anonymous component";
+  }
+  return "unknown";
+};
+var asElementOfType = (type, element, additionalErrorMessage) => {
+  if (isValidElementOfType(type, element)) {
+    return element;
+  }
+  throw new TypeError(`Expected React element of type ${getElementTypeName(type)}, but received type: ${getElementTypeName(element.type)}.${additionalErrorMessage !== undefined && additionalErrorMessage.length > 0 ? ` ${additionalErrorMessage}` : ""}`);
+};
+var asChildrenOfType = (type, children, additionalErrorMessage) => {
+  if (children === undefined || children === null) {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    return children.map((child) => asChildrenOfType(type, child, additionalErrorMessage));
+  }
+  return asElementOfType(type, children, additionalErrorMessage);
+};
+var asElementOrPropsOfType = (type, elementOrProps, additionalErrorMessage) => {
+  if (import_react2.isValidElement(elementOrProps)) {
+    return asElementOfType(type, elementOrProps, additionalErrorMessage);
+  }
+  return elementOrProps;
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 var import_core2 = require("@mantine/core");
 var import_icons_react = require("@tabler/icons-react");
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // src/core/components/RemoraidProvider/HydrationStatusProvider/index.tsx
 var import_core = require("@mantine/core");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
 var defaultHydrationStatus = {
   hasHydrated: false,
@@ -5684,9 +5759,9 @@ var defaultHydrationStatus = {
     return;
   }
 };
-var hydrationStatusContext = import_react2.createContext(defaultHydrationStatus);
+var hydrationStatusContext = import_react3.createContext(defaultHydrationStatus);
 var useHydrationStatus = () => {
-  return import_react2.useContext(hydrationStatusContext);
+  return import_react3.useContext(hydrationStatusContext);
 };
 var useHydratedMantineColorScheme = () => {
   const { ensureHydration } = useHydrationStatus();
@@ -5695,12 +5770,12 @@ var useHydratedMantineColorScheme = () => {
 function HydrationStatusProvider({
   children
 }) {
-  const [hasHydrated, setHasHydrated] = import_react2.useState(defaultHydrationStatus.hasHydrated);
-  const hydrationStatus = import_react2.useMemo(() => ({
+  const [hasHydrated, setHasHydrated] = import_react3.useState(defaultHydrationStatus.hasHydrated);
+  const hydrationStatus = import_react3.useMemo(() => ({
     hasHydrated,
     ensureHydration: (v) => hasHydrated ? v : undefined
   }), [hasHydrated]);
-  import_react2.useEffect(() => {
+  import_react3.useEffect(() => {
     setHasHydrated(true);
   }, []);
   return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(hydrationStatusContext.Provider, {
@@ -5800,9 +5875,9 @@ var createRemoraidTheme = (customTheme, dependencies) => {
     }
   };
 };
-var themeContext = import_react3.default.createContext(createRemoraidTheme());
+var themeContext = import_react4.default.createContext(createRemoraidTheme());
 var useRemoraidTheme = () => {
-  return import_react3.useContext(themeContext);
+  return import_react4.useContext(themeContext);
 };
 function ThemeProvider({
   theme,
@@ -5810,7 +5885,7 @@ function ThemeProvider({
 }) {
   const mantineTheme = import_core2.useMantineTheme();
   const { colorScheme } = useHydratedMantineColorScheme();
-  const remoraidTheme = import_react3.useMemo(() => {
+  const remoraidTheme = import_react4.useMemo(() => {
     const dependencies = {
       mantineTheme,
       colorScheme
@@ -5827,85 +5902,232 @@ function ThemeProvider({
 var import_react_cookie2 = require("react-cookie");
 
 // src/core/components/RemoraidProvider/CoreUserExperienceProvider/index.tsx
+var import_react6 = require("react");
+
+// src/core/components/UserExperienceProviderWrapper/index.tsx
+var import_react5 = require("react");
+var import_react_cookie = require("react-cookie");
+var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
+var createUserExperienceContext = (defaultUserExperience) => import_react5.createContext({
+  userExperience: defaultUserExperience,
+  updateUserExperience: () => {},
+  processedCookie: false,
+  initialUserExperience: defaultUserExperience
+});
+function UserExperienceProviderWrapper({
+  children,
+  context,
+  cookieName,
+  defaultUserExperience,
+  isValidUserExperience,
+  initialValue
+}) {
+  const [cookies, setCookie] = import_react_cookie.useCookies();
+  let initialUserExperience = defaultUserExperience;
+  if (typeof initialValue === "object" && typeof initialUserExperience === "object") {
+    initialUserExperience = { ...initialUserExperience, ...initialValue };
+  }
+  const [userExperience, setUserExperience] = import_react5.useState(initialUserExperience);
+  const [processedCookie, setProcessedCookie] = import_react5.useState(false);
+  const updateUserExperience = (p) => {
+    const updatedUserExperience = typeof p === "function" ? p(userExperience) : p;
+    setCookie(cookieName, updatedUserExperience, { path: "/" });
+    setUserExperience(updatedUserExperience);
+  };
+  import_react5.useEffect(() => {
+    const userExperienceCookie = cookies[cookieName];
+    if (userExperienceCookie && isValidUserExperience(userExperienceCookie)) {
+      setUserExperience(userExperienceCookie);
+    }
+    if (cookies && !processedCookie) {
+      setProcessedCookie(true);
+    }
+  }, [cookies]);
+  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(context.Provider, {
+    value: {
+      userExperience,
+      updateUserExperience,
+      processedCookie,
+      initialUserExperience
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/RemoraidProvider/CoreUserExperienceProvider/index.tsx
+var jsx_dev_runtime5 = require("react/jsx-dev-runtime");
+var defaultUserExperience = {
+  showWelcomeMessage: true,
+  navbar: { hiddenPages: [] }
+};
+var defaultUserExperienceCookieName = "remoraid-core-user-experience";
+var coreUserExperienceContext = createUserExperienceContext(defaultUserExperience);
+var useRemoraidUserExperience = () => {
+  return import_react6.useContext(coreUserExperienceContext);
+};
+function CoreUserExperienceProvider({
+  children,
+  initialValue,
+  cookieName
+}) {
+  const isValidUserExperience = (x) => {
+    if (typeof x !== "object") {
+      return false;
+    }
+    if (x === null) {
+      return false;
+    }
+    if (!("showWelcomeMessage" in x)) {
+      return false;
+    }
+    if (!("navbar" in x)) {
+      return false;
+    }
+    return true;
+  };
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(UserExperienceProviderWrapper, {
+    context: coreUserExperienceContext,
+    isValidUserExperience,
+    cookieName: cookieName ?? defaultUserExperienceCookieName,
+    defaultUserExperience,
+    initialValue,
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/RemoraidProvider/LayoutsProvider/index.tsx
 var import_react7 = require("react");
+var jsx_dev_runtime6 = require("react/jsx-dev-runtime");
+var defaultLayoutsContext = {
+  layouts: {},
+  setLayouts: () => {}
+};
+var layoutsContext = import_react7.createContext(defaultLayoutsContext);
+var useLayouts = () => {
+  return import_react7.useContext(layoutsContext);
+};
+function LayoutsProvider({
+  children
+}) {
+  const [layouts, setLayouts] = import_react7.useState({});
+  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(layoutsContext.Provider, {
+    value: { layouts, setLayouts },
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/RemoraidProvider/index.tsx
+var jsx_dev_runtime7 = require("react/jsx-dev-runtime");
+function RemoraidProvider({
+  children,
+  theme,
+  initialUserExperience,
+  componentsProps
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(import_react_cookie2.CookiesProvider, {
+    ...componentsProps?.CookiesProvider,
+    children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(HydrationStatusProvider, {
+      ...componentsProps?.HydrationStatusProviderProps,
+      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: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(LayoutsProvider, {
+              ...componentsProps?.LayoutsProviderProps,
+              children
+            }, undefined, false, undefined, this)
+          }, 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_core7 = require("@mantine/core");
 
 // src/core/components/AppShell/NavbarMinimal/index.tsx
 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_react5 = require("react");
+var import_react9 = require("react");
 
 // src/core/components/AppShell/AppProvider/index.tsx
-var import_react4 = require("react");
-var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
-var defaultAppContext = { navigablePages: [] };
-var appContext = import_react4.createContext(defaultAppContext);
+var import_react8 = require("react");
+var jsx_dev_runtime8 = require("react/jsx-dev-runtime");
+var defaultAppContext = {
+  navigablePages: []
+};
+var appContext = import_react8.createContext(defaultAppContext);
 var useRemoraidApp = () => {
-  return import_react4.useContext(appContext);
+  return import_react8.useContext(appContext);
 };
 function AppProvider({
-  children,
-  navigablePages,
-  user
+  appContext: appContextProps,
+  children
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(appContext.Provider, {
-    value: { navigablePages, user },
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(appContext.Provider, {
+    value: { ...appContextProps },
     children
   }, undefined, false, undefined, this);
 }
 
 // src/core/components/AppShell/NavbarMinimal/index.tsx
-var jsx_dev_runtime5 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime9 = require("react/jsx-dev-runtime");
 function NavbarLink({
   icon,
+  linkSize,
+  iconSize,
   label,
   active,
   onClick,
   href,
-  indicator,
-  settings
+  indicator
 }) {
-  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react5.useState(false);
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react9.useState(false);
   const iconProps = {
-    size: settings.iconSize,
+    size: iconSize,
     stroke: 1.5
   };
   const Icon2 = icon ?? import_icons_react2.IconLink;
   if (!href) {
-    return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Tooltip, {
+    return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Tooltip, {
       label,
       position: "right",
       transitionProps: { duration: 0 },
-      children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.UnstyledButton, {
+      children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.UnstyledButton, {
         onClick,
         className: "remoraid-navbar-minimal-link",
         "data-active": active || undefined,
-        w: settings.linkSize,
-        h: settings.linkSize,
-        children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Icon2, {
+        w: linkSize,
+        h: linkSize,
+        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Icon2, {
           ...iconProps
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  const button = /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.UnstyledButton, {
+  const button = /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.UnstyledButton, {
     onClick,
     className: "remoraid-navbar-minimal-link",
     "data-active": active || undefined,
-    w: settings.linkSize,
-    h: settings.linkSize,
+    w: linkSize,
+    h: linkSize,
     component: import_link.default,
     href,
-    children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Icon2, {
+    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Icon2, {
       ...iconProps
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Tooltip, {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Tooltip, {
     label,
     position: "right",
     transitionProps: { duration: 0 },
-    children: indicator === undefined ? button : /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Indicator, {
+    children: indicator === undefined ? button : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Indicator, {
       withBorder: true,
       size: 13,
       offset: 2,
@@ -5916,98 +6138,94 @@ function NavbarLink({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-var defaultSettings = {
-  hiddenPages: [],
-  linkSize: import_core3.rem("50px"),
-  iconSize: "50%",
-  px: "sm",
-  py: "md"
-};
 function NavbarMinimal({
-  logo,
-  user,
-  settings: settingsProp,
+  linkSize = import_core3.rem("50px"),
+  iconSize = "50%",
   linkIndicator,
   logoIndicator,
-  onLogout
+  componentsProps
 }) {
-  const { userExperience } = useRemoraidUserExperience();
   const pathname = import_navigation.usePathname();
   const theme = useRemoraidTheme();
   const { setColorScheme, colorScheme } = useHydratedMantineColorScheme();
-  const app = useRemoraidApp();
-  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react5.useState(false);
-  const settings = {
-    ...userExperience.navbarSettings,
-    ...settingsProp
+  const { userExperience } = useRemoraidUserExperience();
+  const { navigablePages, logo, auth } = useRemoraidApp();
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react9.useState(false);
+  const linkProps = {
+    linkSize,
+    iconSize,
+    ...componentsProps?.link
   };
-  const links = app.navigablePages.filter((link) => !settings.hiddenPages.includes(link.href)).map((link) => /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
+  const links = navigablePages.filter((link) => !userExperience.navbar.hiddenPages.includes(link.href)).map((link) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(NavbarLink, {
     active: link.href === pathname,
     indicator: linkIndicator,
-    settings,
-    ...link
+    ...link,
+    ...linkProps
   }, link.label, false, undefined, this));
-  const logoImage = logo({
+  const logoProps = {
     style: {
       cursor: "pointer",
-      width: settings.linkSize,
-      height: settings.linkSize
+      width: linkSize,
+      height: linkSize
     }
-  });
-  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Paper, {
+  };
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Paper, {
     h: "100%",
-    py: settings.py,
-    bg: theme.transparentBackground,
-    radius: 0,
+    p: "md",
     shadow: "md",
-    children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Flex, {
+    bg: theme.transparentBackground,
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Flex, {
       direction: "column",
       h: "100%",
       align: "center",
-      px: settings.px,
       children: [
-        logoIndicator === undefined ? logoImage : /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Indicator, {
-          withBorder: true,
-          offset: 2,
-          size: 13,
-          onMouseEnter: () => setIsHoveringRoleIndicator(true),
-          onMouseLeave: () => setIsHoveringRoleIndicator(false),
-          ...logoIndicator(isHoveringRoleIndicator),
-          children: logoImage
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Divider, {
-          my: "md",
-          variant: "dashed",
-          w: "100%"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Stack, {
+        logo !== undefined && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(jsx_dev_runtime9.Fragment, {
+          children: [
+            logoIndicator === undefined ? logo(logoProps) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Indicator, {
+              withBorder: true,
+              offset: 2,
+              size: 13,
+              onMouseEnter: () => setIsHoveringRoleIndicator(true),
+              onMouseLeave: () => setIsHoveringRoleIndicator(false),
+              ...logoIndicator(isHoveringRoleIndicator),
+              children: logo(logoProps)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Divider, {
+              my: "md",
+              variant: "dashed",
+              w: "100%"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Stack, {
           justify: "flex-start",
           gap: 0,
           flex: 1,
           children: links
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(import_core3.Stack, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Stack, {
           justify: "center",
           gap: 0,
           children: [
-            user !== undefined && (user === null ? /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
+            auth !== undefined && (auth.user === null ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(NavbarLink, {
               icon: import_icons_react2.IconLogin,
               label: "Login",
               href: "/login",
               active: pathname === "/login",
-              settings
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
+              ...linkProps
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(NavbarLink, {
               icon: import_icons_react2.IconLogout,
               label: "Logout",
               onClick: () => {
-                if (onLogout) {
-                  onLogout();
+                if (auth.onLogout) {
+                  auth.onLogout();
                 }
               },
               href: "/login",
-              settings
+              ...linkProps
             }, undefined, false, undefined, this)),
-            /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(NavbarLink, {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(NavbarLink, {
               icon: colorScheme === "dark" ? import_icons_react2.IconSun : import_icons_react2.IconMoon,
               onClick: () => {
                 if (!colorScheme || !setColorScheme) {
@@ -6016,7 +6234,7 @@ function NavbarMinimal({
                 setColorScheme(colorScheme === "dark" ? "light" : "dark");
               },
               label: "Toggle Color Scheme",
-              settings
+              ...linkProps
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this)
@@ -6025,259 +6243,323 @@ function NavbarMinimal({
   }, undefined, false, undefined, this);
 }
 
-// src/core/components/UserExperienceProviderWrapper/index.tsx
-var import_react6 = require("react");
-var import_react_cookie = require("react-cookie");
-var jsx_dev_runtime6 = require("react/jsx-dev-runtime");
-var createUserExperienceContext = (defaultUserExperience) => import_react6.createContext({
-  userExperience: defaultUserExperience,
-  updateUserExperience: () => {},
-  processedCookie: false,
-  initialUserExperience: defaultUserExperience
-});
-function UserExperienceProviderWrapper({
-  children,
-  context,
-  cookieName,
-  defaultUserExperience,
-  isValidUserExperience,
-  initialValue
-}) {
-  const [cookies, setCookie] = import_react_cookie.useCookies();
-  const initialUserExperience = {
-    ...defaultUserExperience,
-    ...initialValue
-  };
-  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_react6.useEffect(() => {
-    const userExperienceCookie = cookies[cookieName];
-    if (userExperienceCookie && isValidUserExperience(userExperienceCookie)) {
-      setUserExperience(userExperienceCookie);
-    }
-    if (cookies && !processedCookie) {
-      setProcessedCookie(true);
-    }
-  }, [cookies]);
-  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(context.Provider, {
-    value: {
-      userExperience,
-      updateUserExperience,
-      processedCookie,
-      initialUserExperience
-    },
-    children
-  }, undefined, false, undefined, this);
-}
-
-// src/core/components/RemoraidProvider/CoreUserExperienceProvider/index.tsx
-var jsx_dev_runtime7 = require("react/jsx-dev-runtime");
-var defaultNavbarSettings = {
-  ["minimal" /* Minimal */]: defaultSettings
-};
-var defaultUserExperience = {
-  navbarVariant: "minimal" /* Minimal */,
-  navbarSettings: defaultNavbarSettings["minimal" /* Minimal */],
-  showWelcomeMessage: true
-};
-var defaultUserExperienceCookieName = "remoraid-core-user-experience";
-var coreUserExperienceContext = createUserExperienceContext(defaultUserExperience);
-var useRemoraidUserExperience = () => {
-  return import_react7.useContext(coreUserExperienceContext);
-};
-function CoreUserExperienceProvider({
-  children,
-  initialValue,
-  cookieName
-}) {
-  const isValidUserExperience = (x) => {
-    if (typeof x !== "object") {
-      return false;
-    }
-    if (x === null) {
-      return false;
-    }
-    if (!("showWelcomeMessage" in x)) {
-      return false;
-    }
-    if (!("navbarVariant" in x)) {
-      return false;
-    }
-    if (!("navbarSettings" in x)) {
-      return false;
-    }
-    if (typeof x.navbarSettings !== "object") {
-      return false;
-    }
-    if (x.navbarSettings === null) {
-      return false;
-    }
-    if (!("hiddenPages" in x.navbarSettings)) {
-      return false;
-    }
-    if (!("linkSize" in x.navbarSettings)) {
-      return false;
-    }
-    if (!("px" in x.navbarSettings)) {
-      return false;
-    }
-    if (!("py" in x.navbarSettings)) {
-      return false;
-    }
-    return true;
-  };
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(UserExperienceProviderWrapper, {
-    context: coreUserExperienceContext,
-    isValidUserExperience,
-    cookieName: cookieName ?? defaultUserExperienceCookieName,
-    defaultUserExperience,
-    initialValue,
-    children
-  }, undefined, false, undefined, this);
-}
-
-// src/core/components/RemoraidProvider/index.tsx
-var jsx_dev_runtime8 = require("react/jsx-dev-runtime");
-function RemoraidProvider({
-  children,
-  theme,
-  initialUserExperience,
-  componentsProps
-}) {
-  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(import_react_cookie2.CookiesProvider, {
-    ...componentsProps?.CookiesProvider,
-    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_core5 = require("@mantine/core");
-var import_hooks = require("@mantine/hooks");
-
-// src/core/components/AppShell/Footer/index.tsx
+// src/core/components/AppShell/FooterMinimal/index.tsx
 var import_core4 = require("@mantine/core");
 var import_icons_react3 = require("@tabler/icons-react");
-var jsx_dev_runtime9 = require("react/jsx-dev-runtime");
-function Footer() {
-  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core4.Group, {
+var jsx_dev_runtime10 = require("react/jsx-dev-runtime");
+function FooterMinimal({
+  componentsProps
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core4.Group, {
     justify: "center",
     w: "100%",
     py: "md",
-    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_icons_react3.IconPennant, {
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_icons_react3.IconPennant, {
       size: 50,
-      color: "var(--mantine-color-default-border)"
+      color: "var(--mantine-color-default-border)",
+      ...componentsProps?.icon
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
-// src/core/components/AppShell/index.tsx
-var jsx_dev_runtime10 = require("react/jsx-dev-runtime");
-function AppShell({
-  children,
-  logo,
-  navbar,
-  user,
-  navigablePages
+// src/core/components/FrameLayout/index.tsx
+var import_core6 = require("@mantine/core");
+var import_react10 = require("react");
+
+// src/core/components/FrameLayout/Element/index.tsx
+var import_core5 = require("@mantine/core");
+var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
+function Element({
+  section,
+  includeContainer = true,
+  layoutId,
+  componentsProps,
+  children
+}) {
+  const { layouts } = useLayouts();
+  const closestLayout = useFrameLayout();
+  if (closestLayout.layoutId === null) {
+    return null;
+  }
+  const layout = layouts[layoutId ?? closestLayout.layoutId];
+  if (!isFrameLayout(layout)) {
+    return null;
+  }
+  if (layout.sections[section] === null) {
+    return null;
+  }
+  let containerProps = {};
+  if (section === "left" /* Left */ || section === "right" /* Right */) {
+    containerProps.h = "100%";
+  }
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core5.Portal, {
+    target: layout.sections[section],
+    children: includeContainer ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core5.Box, {
+      ...containerProps,
+      ...componentsProps?.container,
+      children
+    }, undefined, false, undefined, this) : children
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/FrameLayout/index.tsx
+var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
+var isFrameLayout = (layout) => {
+  if (typeof layout !== "object" || layout === null) {
+    return false;
+  }
+  if (!("sections" in layout)) {
+    return false;
+  }
+  if (typeof layout.sections !== "object" || layout.sections === null) {
+    return false;
+  }
+  return true;
+};
+var defaultFrameLayoutVariant = "sticky" /* Sticky */;
+var defaultFrameLayoutContext = {
+  layoutId: null,
+  layout: {
+    sections: {
+      ["top" /* Top */]: null,
+      ["bottom" /* Bottom */]: null,
+      ["left" /* Left */]: null,
+      ["right" /* Right */]: null
+    }
+  },
+  setLayout: () => {}
+};
+var layoutContext = import_react10.createContext(defaultFrameLayoutContext);
+var useFrameLayout = () => {
+  return import_react10.useContext(layoutContext);
+};
+function FrameLayout({
+  variant = defaultFrameLayoutVariant,
+  layoutId,
+  componentsProps,
+  children
 }) {
-  const { userExperience } = useRemoraidUserExperience();
-  const mantineTheme = import_core5.useMantineTheme();
   const theme = useRemoraidTheme();
-  const { colorScheme } = useHydratedMantineColorScheme();
-  const [opened, { toggle }] = import_hooks.useDisclosure();
-  const navbarVariant = navbar && navbar.variant ? navbar.variant : userExperience.navbarVariant;
-  const navbarSettings = {
-    ...userExperience.navbarSettings,
-    ...navbar?.settings
+  const { layouts, setLayouts } = useLayouts();
+  const layout = layouts[layoutId];
+  const setLayout = import_react10.useMemo(() => {
+    return (value) => {
+      setLayouts((prev) => ({
+        ...prev,
+        [layoutId]: typeof value === "function" ? value(prev[layoutId]) : value
+      }));
+    };
+  }, [layoutId, setLayouts]);
+  const topSection = import_react10.useCallback((n) => {
+    setLayout((prev) => ({
+      ...prev,
+      sections: { ...prev?.sections, ["top" /* Top */]: n }
+    }));
+  }, [setLayout]);
+  const bottomSection = import_react10.useCallback((n) => {
+    setLayout((prev) => ({
+      ...prev,
+      sections: { ...prev?.sections, ["bottom" /* Bottom */]: n }
+    }));
+  }, [setLayout]);
+  const leftSection = import_react10.useCallback((n) => {
+    setLayout((prev) => ({
+      ...prev,
+      sections: { ...prev?.sections, ["left" /* Left */]: n }
+    }));
+  }, [setLayout]);
+  const rightSection = import_react10.useCallback((n) => {
+    setLayout((prev) => ({
+      ...prev,
+      sections: { ...prev?.sections, ["right" /* Right */]: n }
+    }));
+  }, [setLayout]);
+  let contentSection = children;
+  const childrenContainerProps = {
+    flex: 1,
+    ...componentsProps?.childrenContainer
   };
-  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_runtime10.jsxDEV(AppProvider, {
-    user,
-    navigablePages,
-    children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell, {
-      header: { height: 0 },
-      navbar: {
-        width: import_core5.rem(`${navbarLinkSizePx + 2 * navbarPaddingPx}px`),
-        breakpoint: "sm",
-        collapsed: { mobile: !opened }
-      },
-      bg: colorScheme === "dark" ? mantineTheme.colors.dark[9] : mantineTheme.colors.gray[0],
+  if (variant === "plain" /* Plain */) {
+    contentSection = /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Box, {
+      ...childrenContainerProps,
+      children: contentSection
+    }, undefined, false, undefined, this);
+  } else if (variant === "sticky" /* Sticky */) {
+    contentSection = /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.ScrollArea, {
+      ...theme.scrollAreaProps,
+      ...childrenContainerProps,
+      children
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(layoutContext.Provider, {
+    value: { layoutId, layout, setLayout },
+    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Group, {
+      gap: 0,
+      h: "100%",
+      w: "100%",
+      wrap: "nowrap",
+      ...componentsProps?.horizontalContainer,
       children: [
-        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell.Header, {
-          withBorder: false,
-          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_runtime10.jsxDEV(import_core5.Burger, {
-              opened,
-              onClick: toggle,
-              h: 20,
-              size: 18
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell.Navbar, {
-          withBorder: false,
-          children: navbarVariant === "minimal" /* Minimal */ && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(NavbarMinimal, {
-            logo,
-            user,
-            ...navbar
-          }, undefined, false, undefined, this)
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Group, {
+          ref: leftSection,
+          h: "100%",
+          gap: 0,
+          wrap: "nowrap",
+          ...componentsProps?.sectionContainers?.["left" /* Left */]
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.AppShell.Main, {
-          children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
-            children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core5.Paper, {
-                radius: 0,
-                my: "md",
-                h: 20,
-                hiddenFrom: "sm"
-              }, undefined, false, undefined, this),
-              children,
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Footer, {}, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Stack, {
+          h: "100%",
+          flex: 1,
+          gap: 0,
+          ...componentsProps?.verticalContainer,
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Stack, {
+              h: "100%",
+              ref: topSection,
+              gap: 0,
+              flex: 0,
+              ...componentsProps?.sectionContainers?.["top" /* Top */]
+            }, undefined, false, undefined, this),
+            contentSection,
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Stack, {
+              h: "100%",
+              ref: bottomSection,
+              gap: 0,
+              flex: 0,
+              ...componentsProps?.sectionContainers?.["bottom" /* Bottom */]
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Group, {
+          gap: 0,
+          ref: rightSection,
+          h: "100%",
+          wrap: "nowrap",
+          ...componentsProps?.sectionContainers?.["right" /* Right */]
         }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
+var FrameLayout_default = Object.assign(FrameLayout, {
+  Element
+});
+
+// src/core/components/AppShell/index.tsx
+var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
+var defaultAppShellLayoutId = "remoraidAppShell";
+var defaultAppShellNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
+var defaultAppShellFooterPositions = { ["minimal" /* Minimal */]: "content" /* Content */ };
+function AppShell(props) {
+  const {
+    children,
+    navbarVariant,
+    footerVariant,
+    appContext: appContext2,
+    componentsProps
+  } = {
+    navbarVariant: null,
+    footerVariant: null,
+    ...props
+  };
+  let { navbarPosition, footerPosition } = props;
+  if (navbarVariant !== null && navbarPosition === undefined) {
+    navbarPosition = defaultAppShellNavbarPositions[navbarVariant];
+  }
+  if (footerVariant !== null && footerPosition === undefined) {
+    footerPosition = defaultAppShellFooterPositions[footerVariant];
+  }
+  let navbar;
+  let footer;
+  let navbarContainerProps = {};
+  let footerContainerProps = {};
+  if (navbarVariant === "minimal" /* Minimal */) {
+    navbar = /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(NavbarMinimal, {
+      ...componentsProps?.navbar
+    }, undefined, false, undefined, this);
+    navbarContainerProps.py = "md";
+    if (navbarPosition === "left" /* Left */) {
+      navbarContainerProps.pl = "md";
+    } else if (navbarPosition === "right" /* Right */) {
+      navbarContainerProps.pr = "md";
+    }
+  }
+  if (footerVariant === "minimal" /* Minimal */) {
+    footer = /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FooterMinimal, {
+      ...componentsProps?.footer
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(AppProvider, {
+    appContext: appContext2,
+    ...componentsProps?.AppProvider,
+    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Box, {
+      h: "100vh",
+      ...componentsProps?.container,
+      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FrameLayout_default, {
+        layoutId: defaultAppShellLayoutId,
+        ...componentsProps?.layout,
+        children: [
+          navbarPosition !== undefined && navbarPosition !== "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FrameLayout_default.Element, {
+            section: navbarPosition,
+            ...componentsProps?.navbarLayoutElement,
+            componentsProps: {
+              ...componentsProps?.navbarLayoutElement?.componentsProps,
+              container: {
+                ...navbarContainerProps,
+                ...componentsProps?.navbarLayoutElement?.componentsProps?.container
+              }
+            },
+            children: navbar
+          }, undefined, false, undefined, this),
+          footerPosition !== undefined && footerPosition !== "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FrameLayout_default.Element, {
+            section: footerPosition,
+            ...componentsProps?.footerLayoutElement,
+            componentsProps: {
+              ...componentsProps?.footerLayoutElement?.componentsProps,
+              container: {
+                ...footerContainerProps,
+                ...componentsProps?.footerLayoutElement?.componentsProps?.container
+              }
+            },
+            children: footer
+          }, undefined, false, undefined, this),
+          navbarPosition !== undefined && navbarPosition === "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
+            children: navbar
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Box, {
+            ...componentsProps?.childrenContainer,
+            children
+          }, undefined, false, undefined, this),
+          footerPosition !== undefined && footerPosition === "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
+            children: footer
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var AppShell_default = Object.assign(AppShell, {
+  NavbarMinimal,
+  FooterMinimal
+});
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_core8 = require("@mantine/core");
+var import_core10 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
-var import_react8 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_navigation2 = require("next/navigation");
 
 // src/core/components/Page/PageContainer/index.tsx
-var import_core6 = require("@mantine/core");
-var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
+var import_core8 = require("@mantine/core");
+var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
 function PageContainer({
   children,
   pt,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core6.Container, {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Container, {
     size: theme.containerSize,
     pt: pt ?? "md",
     ...componentsProps?.container,
@@ -6286,10 +6568,10 @@ function PageContainer({
 }
 
 // src/core/components/Page/index.tsx
-var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
-var pageContext = import_react8.default.createContext(null);
+var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
+var pageContext = import_react11.default.createContext(null);
 var usePage = () => {
-  return import_react8.useContext(pageContext);
+  return import_react11.useContext(pageContext);
 };
 function Page({
   children,
@@ -6301,16 +6583,16 @@ function Page({
   const pathname = import_navigation2.usePathname();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
-  import_react8.useEffect(() => {
+  import_react11.useEffect(() => {
     if (!isPageRegistered(pageId)) {
       if (config?.registerPageDirectly) {
         registerPage(pageId, []);
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(pageContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(pageContext.Provider, {
     value: { name: name ?? pathname, pageId, ...config },
-    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(PageContainer, {
+    children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(PageContainer, {
       pt,
       componentsProps: { container: componentsProps?.container },
       children
@@ -6322,8 +6604,8 @@ function Page({
 var import_icons_react4 = require("@tabler/icons-react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
-var import_core7 = require("@mantine/core");
-var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
+var import_core9 = require("@mantine/core");
+var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 function ScrollableChipGroup({
   value,
   onChange,
@@ -6332,15 +6614,15 @@ function ScrollableChipGroup({
   children
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.ScrollArea, {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.ScrollArea, {
     ...theme.scrollAreaProps,
     ...componentsProps?.scrollArea,
-    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Chip.Group, {
+    children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.Chip.Group, {
       value,
       onChange,
       ...componentsProps?.chipGroup,
       multiple: true,
-      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Flex, {
+      children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.Flex, {
         justify: "flex-start",
         align: "center",
         gap: gap ?? "xs",
@@ -6353,7 +6635,7 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
 function WidgetSelectionHeader({
   title,
   disabledWidgets,
@@ -6366,31 +6648,31 @@ function WidgetSelectionHeader({
     console.error("'WidgetSelectionHeader' must be rendered inside of a 'Page' component.");
     return null;
   }
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Flex, {
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Flex, {
     justify: "flex-start",
     align: "center",
     gap: "xs",
     mt,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Text, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Text, {
         size: "lg",
         fw: 400,
         children: title ?? page.name
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Divider, {
         orientation: "vertical"
       }, undefined, false, undefined, this),
-      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(ScrollableChipGroup, {
+      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime17.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, {
+        children: Object.keys(widgets[page.pageId]).map((widgetId) => /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Chip, {
           value: widgetId,
           size: "sm",
           disabled: disabledWidgets && disabledWidgets.includes(widgetId),
-          icon: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_icons_react4.IconCheck, {
+          icon: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_icons_react4.IconCheck, {
             ...theme.iconProps.tiny
           }, undefined, false, undefined, this),
           children: widgets[page.pageId][widgetId].name
@@ -6400,19 +6682,19 @@ function WidgetSelectionHeader({
   }, undefined, true, undefined, this);
 }
 // src/core/components/Widget/WidgetWrapper/CloseButton/index.tsx
-var import_core9 = require("@mantine/core");
+var import_core11 = require("@mantine/core");
 var import_icons_react5 = require("@tabler/icons-react");
-var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
 function CloseButton({ widgetId }) {
   const theme = useRemoraidTheme();
   const { activeWidget, updateWidgetSelection } = useWidgets();
   const page = usePage();
-  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.Transition, {
     mounted: activeWidget === widgetId,
     transition: "pop-top-right",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.ActionIcon, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.ActionIcon, {
       pos: "absolute",
       size: "xs",
       className: "remoraid-close-button",
@@ -6425,42 +6707,33 @@ function CloseButton({ widgetId }) {
         updateWidgetSelection(page.pageId, widgetId, false);
       },
       style: transitionStyle,
-      children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_icons_react5.IconX, {
+      children: /* @__PURE__ */ jsx_dev_runtime18.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_core11 = require("@mantine/core");
-var import_react9 = __toESM(require("react"));
+var import_core13 = require("@mantine/core");
+var import_react12 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
-var import_core10 = require("@mantine/core");
-var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
-var isBadgeMinimalProps = (e) => {
-  if (typeof e !== "object") {
-    return false;
-  }
-  if (!("label" in e)) {
-    return false;
-  }
-  return true;
-};
+var import_core12 = require("@mantine/core");
+var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
 function BadgeMinimal(props) {
   const { label, tooltip, mounted, componentsProps } = props;
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime19.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.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Tooltip, {
       disabled: !tooltip,
       label: tooltip,
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Badge, {
+      children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -6475,36 +6748,39 @@ function BadgeMinimal(props) {
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
 var react = require("react");
 function BadgeGroup({
-  badges,
+  badges: badgesProp,
   gap,
   breakpoint,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  const numVisibleBadges = badges.filter((e) => isBadgeMinimalProps(e) ? e.mounted !== false : true).length;
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
+  const badges = badgesProp.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check 'badges' property passed to 'BadgeGroup'."));
+  const numVisibleBadges = badges.filter((badge) => isValidElementOfType(BadgeMinimal, badge) ? badge.props.mounted : badge.mounted !== false).length;
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(jsx_dev_runtime20.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Group, {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Group, {
         gap: gap ?? "xs",
         wrap: "nowrap",
         visibleFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
-        children: badges.map((e, i) => {
-          if (isBadgeMinimalProps(e)) {
-            return /* @__PURE__ */ react.createElement(BadgeMinimal, {
-              ...e,
-              key: i
-            });
-          }
-          return e;
+        children: badges.map((badge, i) => {
+          if (isValidElementOfType(BadgeMinimal, badge)) {
+            return badge;
+          } else if (import_react12.isValidElement(badge)) {
+            throw new TypeError(`Expected React element of type ${BadgeMinimal.name}, but received type: ${typeof badge.type === "string" ? badge.type : badge.type?.name ?? "unknown"}. Check the 'badges' property of this widget.`);
+          }
+          return /* @__PURE__ */ react.createElement(BadgeMinimal, {
+            ...badge,
+            key: i
+          });
         })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Tooltip, {
         label: `${numVisibleBadges} badge${numVisibleBadges === 1 ? "" : "s"}`,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Badge, {
+        children: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Badge, {
           hiddenFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
           hidden: numVisibleBadges === 0,
           variant: "light",
@@ -6518,19 +6794,9 @@ function BadgeGroup({
   }, undefined, true, undefined, this);
 }
 // src/core/components/AlertMinimal/index.tsx
-var import_core12 = require("@mantine/core");
-var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
-var isAlertMinimalProps = (e) => {
-  if (typeof e !== "object") {
-    return false;
-  }
-  if (!("category" in e)) {
-    return false;
-  }
-  return true;
-};
+var import_core14 = require("@mantine/core");
+var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
 function AlertMinimal({
-  children,
   title,
   category,
   text,
@@ -6538,16 +6804,17 @@ function AlertMinimal({
   mounted,
   mt,
   mb,
-  componentsProps
+  componentsProps,
+  children
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Transition, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Alert, {
       ...theme.alertProps[category],
       title: title ?? theme.alertProps[category].title,
       withCloseButton: onClose !== undefined,
@@ -6567,18 +6834,9 @@ function AlertMinimal({
   }, undefined, false, undefined, this);
 }
 // src/core/components/RemoraidButton/index.tsx
-var import_core13 = require("@mantine/core");
+var import_core15 = require("@mantine/core");
 var import_icons_react6 = require("@tabler/icons-react");
-var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
-var isRemoraidButtonProps = (e) => {
-  if (typeof e !== "object") {
-    return false;
-  }
-  if (!("label" in e)) {
-    return false;
-  }
-  return true;
-};
+var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
 function RemoraidButton({
   label,
   responsive,
@@ -6594,17 +6852,17 @@ function RemoraidButton({
 }) {
   const theme = useRemoraidTheme();
   const iconProps = { ...theme.iconProps.medium, ...componentsProps?.icon };
-  const icon = props.icon ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(props.icon, {
+  const icon = props.icon ? /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(props.icon, {
     ...iconProps
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_icons_react6.IconClick, {
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_icons_react6.IconClick, {
     ...iconProps
   }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(jsx_dev_runtime22.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.Tooltip, {
         label,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.ActionIcon, {
+        children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.ActionIcon, {
           "aria-label": label,
           variant: variant ?? "default",
           onClick,
@@ -6618,7 +6876,7 @@ function RemoraidButton({
           children: icon
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Button, {
+      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.Button, {
         onClick,
         loading,
         variant: variant ?? "default",
@@ -6635,9 +6893,9 @@ function RemoraidButton({
   }, undefined, true, undefined, this);
 }
 // src/core/components/Widget/WidgetWrapper/index.tsx
-var import_core14 = require("@mantine/core");
-var import_react10 = require("react");
-var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
+var import_core16 = require("@mantine/core");
+var import_react13 = require("react");
+var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
   children,
   config,
@@ -6655,7 +6913,7 @@ function WidgetWrapper({
   const page = usePage();
   const theme = useRemoraidTheme();
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  import_react10.useEffect(() => {
+  import_react13.useEffect(() => {
     if (!page) {
       return;
     }
@@ -6663,12 +6921,12 @@ function WidgetWrapper({
       registerWidget(page.pageId, config);
     }
   }, [pageRegistered]);
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core16.Transition, {
     mounted: page !== null && isWidgetSelected(page.pageId, config.widgetId),
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core16.Paper, {
       p: "md",
       shadow: "md",
       bg: theme.transparentBackground,
@@ -6684,7 +6942,7 @@ function WidgetWrapper({
         updateActiveWidget(null);
       },
       children: [
-        withCloseButton !== false && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(CloseButton, {
+        withCloseButton !== false && /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(CloseButton, {
           widgetId: config.widgetId
         }, undefined, false, undefined, this),
         children
@@ -6696,26 +6954,29 @@ var WidgetWrapper_default = Object.assign(WidgetWrapper, {
   CloseButton
 });
 // src/core/components/Widget/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_runtime24 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
   children,
   id,
   config,
   title,
-  badges,
-  buttons,
-  alerts,
+  badges: badgesProp,
+  buttons: buttonsProp,
+  alerts: alertsProp,
   gaps,
   loading,
   mt,
   componentsProps
 }) {
+  const buttons = buttonsProp?.map((button) => asElementOrPropsOfType(RemoraidButton, button, "Check the 'buttons' property of this widget."));
+  const alerts = alertsProp?.map((alert) => asElementOrPropsOfType(AlertMinimal, alert, "Check the 'alerts' property of this widget."));
+  const badges = badgesProp?.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check the 'badges' property of this 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_runtime21.jsxDEV(WidgetWrapper_default, {
+  return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(WidgetWrapper_default, {
     config: {
       widgetId: id,
       name: title,
@@ -6728,69 +6989,75 @@ function Widget({
     },
     ...componentsProps?.wrapper,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Group, {
+      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Group, {
         justify: "space-between",
         wrap: "nowrap",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Group, {
+          /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Group, {
             gap: badgesGap,
             wrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Title, {
+              /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Title, {
                 order: 1,
                 size: "h3",
                 lineClamp: 1,
                 children: title
               }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(BadgeGroup, {
+              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(BadgeGroup, {
                 badges,
                 gap: badgesGap,
                 ...componentsProps?.badgeGroup
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Group, {
+          /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Group, {
             gap: buttonsGap,
             wrap: "nowrap",
-            children: buttons !== undefined && buttons.map((e, i) => {
-              if (isRemoraidButtonProps(e)) {
-                return /* @__PURE__ */ react2.createElement(RemoraidButton, {
-                  ...e,
-                  key: i
-                });
+            children: buttons !== undefined && buttons.map((button, i) => {
+              if (isValidElementOfType(RemoraidButton, button)) {
+                return button;
               }
-              return e;
+              return /* @__PURE__ */ react2.createElement(RemoraidButton, {
+                ...button,
+                key: i
+              });
             })
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Divider, {
-        my: "md"
+      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Divider, {
+        my: "md",
+        ...componentsProps?.divider
       }, undefined, false, undefined, this),
-      alerts !== undefined && alerts.map((a, i) => {
-        if (isAlertMinimalProps(a)) {
+      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Stack, {
+        align: "stretch",
+        gap: alertsGap,
+        mb: alerts && alerts.length > 0 ? "md" : 0,
+        ...componentsProps?.alertsContainer,
+        children: alerts?.map((alert, i) => {
+          if (isValidElementOfType(AlertMinimal, alert)) {
+            return alert;
+          }
           return /* @__PURE__ */ react2.createElement(AlertMinimal, {
-            ...a,
-            mb: alertsGap,
+            ...alert,
             key: i
           });
-        }
-        return a;
-      }),
-      loading ? /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Center, {
-        children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Loader, {
+        })
+      }, undefined, false, undefined, this),
+      loading ? /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Center, {
+        children: /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Loader, {
           ...componentsProps?.loader
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(jsx_dev_runtime21.Fragment, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(jsx_dev_runtime24.Fragment, {
         children
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
-var import_core16 = require("@mantine/core");
+var import_core18 = require("@mantine/core");
 var import_navigation3 = require("next/navigation");
-var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
 function NotFoundPage({
   children,
   message,
@@ -6798,11 +7065,11 @@ function NotFoundPage({
 }) {
   const pathname = import_navigation3.usePathname();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(Page, {
+  return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Alert, {
+      /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core18.Alert, {
         ...theme.alertProps.negative,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -6812,8 +7079,8 @@ function NotFoundPage({
   }, undefined, true, undefined, this);
 }
 // src/core/components/EnvironmentShell/index.tsx
-var import_core17 = require("@mantine/core");
-var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
+var import_core19 = require("@mantine/core");
+var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 function EnvironmentShell({
   children,
   environment,
@@ -6827,7 +7094,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_runtime23.jsxDEV(import_core17.Alert, {
+  const alert = /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Alert, {
     ...theme.alertProps.neutral,
     title: alertTitle,
     m,
@@ -6835,12 +7102,12 @@ function EnvironmentShell({
     children: message ?? alertMessage
   }, undefined, false, undefined, this);
   if (undefinedKeys.length === 0) {
-    return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(jsx_dev_runtime23.Fragment, {
+    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
       children
     }, undefined, false, undefined, this);
   }
   if (withContainer) {
-    return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(PageContainer, {
+    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(PageContainer, {
       componentsProps: { container: componentsProps?.container },
       children: alert
     }, undefined, false, undefined, this);
@@ -6848,20 +7115,20 @@ function EnvironmentShell({
   return alert;
 }
 // src/core/components/SettingsWidget/index.tsx
-var import_react11 = require("react");
+var import_react14 = 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_core18 = require("@mantine/core");
-var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
+var import_core20 = require("@mantine/core");
+var jsx_dev_runtime27 = require("react/jsx-dev-runtime");
 function SaveButton({
   onSaveChanges,
   insideContainer,
   componentsProps
 }) {
   const settingsWidgetOptions = useSettingsWidgetContext();
-  const button = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(RemoraidButton, {
+  const button = /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(RemoraidButton, {
     label: "Save Changes",
     icon: import_icons_react7.IconDeviceFloppy,
     onClick: onSaveChanges,
@@ -6876,7 +7143,7 @@ function SaveButton({
     }
   }, undefined, false, undefined, this);
   if (insideContainer !== false) {
-    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Group, {
+    return /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Group, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -6888,11 +7155,11 @@ function SaveButton({
 }
 
 // src/core/components/SettingsWidget/index.tsx
-var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime28 = require("react/jsx-dev-runtime");
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = import_react11.createContext(defaultSettingsWidgetContext);
+var settingsWidgetContext = import_react14.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return import_react11.useContext(settingsWidgetContext);
+  return import_react14.useContext(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -6901,9 +7168,9 @@ function SettingsWidget({
   custom,
   widgetProps
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(settingsWidgetContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(settingsWidgetContext.Provider, {
     value: { custom, unsavedChanges },
-    children: /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Widget, {
+    children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(Widget, {
       title: "Settings",
       id: "settings",
       mt: "md",
@@ -6939,27 +7206,27 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var import_react12 = require("react");
-var import_core20 = require("@mantine/core");
+var import_react15 = require("react");
+var import_core22 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
-var import_core19 = require("@mantine/core");
-var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
+var import_core21 = require("@mantine/core");
+var jsx_dev_runtime29 = require("react/jsx-dev-runtime");
 function Row({
   children,
   label
 }) {
   const options = useSettingsTableOptions();
-  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Table.Tr, {
+  return /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Table.Tr, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Table.Th, {
+      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Text, {
           size: "sm",
           children: label
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Table.Td, {
+      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Table.Td, {
         py: "xs",
         children
       }, undefined, false, undefined, this)
@@ -6968,29 +7235,30 @@ function Row({
 }
 
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var jsx_dev_runtime27 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime30 = require("react/jsx-dev-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = import_react12.createContext(defaultSettingsTableOptions);
+var settingsTableOptionsContext = import_react15.createContext(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return import_react12.useContext(settingsTableOptionsContext);
+  return import_react15.useContext(settingsTableOptionsContext);
 };
 function SettingsTable({
-  children,
-  leftColumnWidth
+  leftColumnWidth,
+  children: childrenProp
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(settingsTableOptionsContext.Provider, {
+  const children = asChildrenOfType(Row, childrenProp, "Check children passed to 'SettingsTable' component.");
+  return /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(settingsTableOptionsContext.Provider, {
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Table, {
+    children: /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(import_core22.Table, {
       bg: theme.transparentBackground,
       withTableBorder: true,
       variant: "vertical",
       layout: "fixed",
-      children: /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Table.Tbody, {
+      children: /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(import_core22.Table.Tbody, {
         children
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -7000,11 +7268,10 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_react13 = require("react");
 var import_lodash = __toESM(require_lodash());
-var import_core21 = require("@mantine/core");
+var import_core23 = require("@mantine/core");
 var import_icons_react9 = require("@tabler/icons-react");
-var jsx_dev_runtime28 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime31 = require("react/jsx-dev-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
 function NavbarSettingsWidget({
   additionalRows,
@@ -7014,7 +7281,7 @@ function NavbarSettingsWidget({
   const { userExperience, updateUserExperience, initialUserExperience } = useRemoraidUserExperience();
   const app = useRemoraidApp();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SettingsWidget_default, {
+  return /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsWidget_default, {
     widgetProps: {
       id: defaultNavbarSettingsWidgetId,
       title: "Navbar Settings",
@@ -7023,32 +7290,33 @@ function NavbarSettingsWidget({
     onRestoreDefaultValues: () => {
       updateUserExperience((prev) => ({
         ...prev,
-        navbarSettings: defaultNavbarSettings[userExperience.navbarVariant]
+        navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash.isEqual(userExperience.navbarSettings, initialUserExperience.navbarSettings),
-    children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SettingsTable_default, {
+    custom: !import_lodash.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsTable_default, {
+      ...componentsProps?.table,
       children: [
-        /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsTable_default.Row, {
           label: "Select which pages you want to display or hide",
-          children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(import_core21.Chip.Group, {
+          children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Chip.Group, {
             multiple: true,
-            value: app.navigablePages.filter((p) => !userExperience.navbarSettings.hiddenPages.includes(p.href)).map((p) => p.href),
+            value: app.navigablePages.filter((p) => !userExperience.navbar.hiddenPages.includes(p.href)).map((p) => p.href),
             onChange: (newValue) => {
               updateUserExperience((prev) => ({
                 ...prev,
-                navbarSettings: {
-                  ...prev.navbarSettings,
+                navbar: {
+                  ...prev.navbar,
                   hiddenPages: app.navigablePages.filter((p) => !newValue.includes(p.href)).map((p) => p.href)
                 }
               }));
             },
-            children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(import_core21.Group, {
+            children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.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_runtime28.jsxDEV(import_core21.Chip, {
+              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? import_icons_react9.IconLink })).map((p, i) => /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Chip, {
                 value: p.href,
-                icon: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(p.icon, {
+                icon: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(p.icon, {
                   ...theme.iconProps.tiny,
                   color: theme.primaryColor
                 }, undefined, false, undefined, this),
@@ -7058,9 +7326,57 @@ function NavbarSettingsWidget({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         }, "select-hidden-pages", false, undefined, this),
-        ...(additionalRows ?? []).map((row, i) => row.key ? row : import_react13.cloneElement(row, { key: i }))
-      ],
-      ...componentsProps?.table
-    }, undefined, false, undefined, this)
+        additionalRows && additionalRows.map((row, i) => {
+          if (isValidElementOfType(SettingsTable_default.Row, row)) {
+            return row;
+          }
+          return /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsTable_default.Row, {
+            ...row
+          }, i, false, undefined, this);
+        })
+      ]
+    }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
+// src/core/components/ContextClusterProvider/index.tsx
+var import_react16 = __toESM(require("react"));
+var jsx_dev_runtime32 = require("react/jsx-dev-runtime");
+var createContextCluster = (generalDefaultValue, staticIds) => {
+  const isStaticId = (id) => {
+    if (staticIds?.find((staticId) => staticId === id)) {
+      return true;
+    }
+    return false;
+  };
+  const contexts = {};
+  const defaultValues = {};
+  const createContext8 = (id, defaultValue) => {
+    const context = import_react16.default.createContext(defaultValue ?? generalDefaultValue);
+    contexts[id] = context;
+    defaultValues[id] = defaultValue ?? generalDefaultValue;
+    return context;
+  };
+  const useContext11 = (id) => {
+    if (isStaticId(id)) {
+      return contexts[id] ? import_react16.default.useContext(contexts[id]) : generalDefaultValue;
+    }
+    return contexts[id] ? import_react16.default.useContext(contexts[id]) : null;
+  };
+  return {
+    contexts,
+    defaultValues,
+    generalDefaultValue,
+    createContext: createContext8,
+    useContext: useContext11
+  };
+};
+function ContextClusterProvider({
+  cluster,
+  values = {},
+  children
+}) {
+  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(context.Provider, {
+    value: values[id] ?? cluster.defaultValues[id] ?? cluster.generalDefaultValue,
+    children: t
+  }, undefined, false, undefined, this), children);
+}