remoraid 2.18.43 → 2.19.4

package/dist/core/index.cjs

@@ -5872,7 +5872,8 @@ var createRemoraidTheme = (customTheme, dependencies) => {
         stroke: 3,
         ...customTheme?.iconProps?.tiny
       }
-    }
+    },
+    primaryGutter: "md"
   };
 };
 var themeContext = import_react4.default.createContext(createRemoraidTheme());
@@ -6526,7 +6527,7 @@ function AppShell({
   footerVariant: footerVariantProp,
   navbarPosition: navbarPositionProp,
   footerPosition: footerPositionProp,
-  gutter = "md",
+  gutter,
   appContext: appContext2,
   componentsProps,
   children
@@ -6535,6 +6536,7 @@ function AppShell({
   const footerVariant = footerVariantProp ?? null;
   const navbarPosition = navbarPositionProp ?? (navbarVariant === null ? null : defaultAppShellNavbarPositions[navbarVariant]);
   const footerPosition = footerPositionProp ?? (footerVariant === null ? null : defaultAppShellFooterPositions[footerVariant]);
+  const theme = useRemoraidTheme();
   let navbar;
   let footer;
   let navbarLayoutElementProps = {
@@ -6562,7 +6564,7 @@ function AppShell({
       ...componentsProps?.container,
       children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default, {
         layoutId: remoraidAppShellLayoutId,
-        gutter,
+        gutter: gutter ?? theme.primaryGutter,
         ...componentsProps?.layout,
         children: [
           navbarPosition !== null && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default.Element, {
@@ -6587,9 +6589,10 @@ var AppShell_default = Object.assign(AppShell, {
   FooterMinimal
 });
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_core10 = require("@mantine/core");
+var import_core11 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
+var import_core9 = require("@mantine/core");
 var import_react11 = __toESM(require("react"));
 var import_navigation2 = require("next/navigation");
 var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
@@ -6601,9 +6604,10 @@ function Page({
   children,
   name,
   config,
-  p = 0,
+  gap,
   componentsProps
 }) {
+  const theme = useRemoraidTheme();
   const pathname = import_navigation2.usePathname();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
@@ -6617,9 +6621,13 @@ function Page({
   return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(pageContext.Provider, {
     value: { name: name ?? pathname, pageId, ...config },
     children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(PageContainer, {
-      p,
-      componentsProps: { container: componentsProps?.container },
-      children
+      ...componentsProps?.PageContainer,
+      children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.Stack, {
+        gap: gap ?? theme.primaryGutter,
+        ...componentsProps?.Stack,
+        className: clsx_default("remoraid-page", componentsProps?.Stack?.className),
+        children
+      }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
@@ -6628,7 +6636,7 @@ function Page({
 var import_icons_react4 = require("@tabler/icons-react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
-var import_core9 = require("@mantine/core");
+var import_core10 = require("@mantine/core");
 var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 function ScrollableChipGroup({
   value,
@@ -6637,17 +6645,17 @@ function ScrollableChipGroup({
   componentsProps,
   children: childrenProp
 }) {
-  const children = asChildrenOfType(import_core9.Chip, childrenProp, "Check children passed to 'ScrollableChipGroup' component.");
+  const children = asChildrenOfType(import_core10.Chip, childrenProp, "Check children passed to 'ScrollableChipGroup' component.");
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.ScrollArea, {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.ScrollArea, {
     ...theme.scrollAreaProps,
     ...componentsProps?.scrollArea,
-    children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.Chip.Group, {
+    children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Chip.Group, {
       value,
       onChange,
       ...componentsProps?.chipGroup,
       multiple: true,
-      children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.Flex, {
+      children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Flex, {
         justify: "flex-start",
         align: "center",
         gap: gap ?? "xs",
@@ -6673,18 +6681,18 @@ function WidgetSelectionHeader({
     throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
   const widgets = widgetsContext2.widgets[page.pageId] ?? {};
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Flex, {
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Flex, {
     justify: "flex-start",
     align: "center",
     gap: "xs",
     mt,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Text, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Text, {
         size: "lg",
         fw: 400,
         children: title ?? page.name
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Divider, {
         orientation: "vertical"
       }, undefined, false, undefined, this),
       isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(ScrollableChipGroup, {
@@ -6695,7 +6703,7 @@ function WidgetSelectionHeader({
         componentsProps: { scrollArea: { flex: 1 } },
         children: Object.keys(widgets).map((widgetId) => {
           const widget = widgets[widgetId] ?? getDefaultWidgetContext({ widgetId });
-          return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Chip, {
+          return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Chip, {
             value: widgetId,
             size: "sm",
             disabled: disabledWidgets && disabledWidgets.includes(widgetId),
@@ -6710,11 +6718,11 @@ function WidgetSelectionHeader({
   }, undefined, true, undefined, this);
 }
 // src/core/components/BadgeGroup/index.tsx
-var import_core12 = require("@mantine/core");
+var import_core13 = require("@mantine/core");
 var import_react12 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
-var import_core11 = require("@mantine/core");
+var import_core12 = require("@mantine/core");
 var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
 function BadgeMinimal({
   label,
@@ -6723,17 +6731,17 @@ function BadgeMinimal({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Tooltip, {
       disabled: !tooltip,
       label: tooltip,
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.Badge, {
+      children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -6761,7 +6769,7 @@ function BadgeGroup({
   const numVisibleBadges = badges.filter((badge) => isValidElementOfType(BadgeMinimal, badge) ? badge.props.mounted : badge.mounted !== false).length;
   return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Group, {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Group, {
         gap: gap ?? "xs",
         wrap: "nowrap",
         visibleFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
@@ -6777,10 +6785,10 @@ function BadgeGroup({
           });
         })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Tooltip, {
         label: `${numVisibleBadges} badge${numVisibleBadges === 1 ? "" : "s"}`,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Badge, {
+        children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Badge, {
           hiddenFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
           hidden: numVisibleBadges === 0,
           variant: "light",
@@ -6794,7 +6802,7 @@ function BadgeGroup({
   }, undefined, true, undefined, this);
 }
 // src/core/components/AlertMinimal/index.tsx
-var import_core13 = require("@mantine/core");
+var import_core14 = require("@mantine/core");
 var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
 function AlertMinimal({
   title,
@@ -6808,13 +6816,13 @@ function AlertMinimal({
   children
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Transition, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Alert, {
       ...theme.alertProps[category],
       title: title ?? theme.alertProps[category].title,
       withCloseButton: onClose !== undefined,
@@ -6834,7 +6842,7 @@ function AlertMinimal({
   }, undefined, false, undefined, this);
 }
 // src/core/components/RemoraidButton/index.tsx
-var import_core14 = require("@mantine/core");
+var import_core15 = require("@mantine/core");
 var import_icons_react5 = require("@tabler/icons-react");
 var import_react13 = require("react");
 var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
@@ -6860,7 +6868,7 @@ function RemoraidButton({
   const theme = useRemoraidTheme();
   const iconProps = { ...theme.iconProps[iconSize], ...componentsProps?.icon };
   const iconElement = import_react13.createElement(icon, iconProps);
-  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
@@ -6868,10 +6876,10 @@ function RemoraidButton({
     ...componentsProps?.transition,
     children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(jsx_dev_runtime21.Fragment, {
       children: [
-        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Tooltip, {
+        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Tooltip, {
           label,
           ...componentsProps?.tooltip,
-          children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.ActionIcon, {
+          children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.ActionIcon, {
             "aria-label": label,
             variant,
             onClick,
@@ -6889,7 +6897,7 @@ function RemoraidButton({
             children: iconElement
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Button, {
+        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Button, {
           onClick,
           loading,
           variant,
@@ -6911,7 +6919,7 @@ function RemoraidButton({
   }, undefined, false, undefined, this);
 }
 // src/core/components/Controls/ControlButton/index.tsx
-var import_core15 = require("@mantine/core");
+var import_core16 = require("@mantine/core");
 var import_icons_react6 = require("@tabler/icons-react");
 var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
 function ControlButton({
@@ -6926,17 +6934,17 @@ function ControlButton({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Transition, {
     mounted,
     transition: "pop-top-right",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Tooltip, {
       label: tooltip,
       disabled: !Boolean(tooltip),
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.ActionIcon, {
+      children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.ActionIcon, {
         "data-control-button": true,
         size,
         color,
@@ -6959,7 +6967,7 @@ function ControlButton({
 
 // src/core/components/Controls/index.tsx
 var import_react14 = require("react");
-var import_core16 = require("@mantine/core");
+var import_core17 = require("@mantine/core");
 var import_icons_react7 = require("@tabler/icons-react");
 var import_lodash3 = __toESM(require_lodash());
 var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
@@ -7020,14 +7028,14 @@ function Controls({
   const handlePointerUp = (e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   };
-  return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core16.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Transition, {
     mounted,
     keepMounted: true,
     transition: "pop",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core16.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Paper, {
       ref: containerRef,
       pos: "absolute",
       p: gutter,
@@ -7043,7 +7051,7 @@ function Controls({
         ...import_lodash3.merge(transitionStyle, componentsProps?.container?.style)
       },
       className: clsx_default("remoraid-controls", componentsProps?.container?.className),
-      children: /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core16.Group, {
+      children: /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Group, {
         gap: gutter,
         ref: groupRef,
         wrap: "nowrap",
@@ -7070,14 +7078,14 @@ function Controls({
   }, undefined, false, undefined, this);
 }
 // src/core/components/Widget/WidgetWrapper/index.tsx
-var import_core18 = require("@mantine/core");
+var import_core19 = require("@mantine/core");
 var import_react16 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
 
 // src/core/components/Pinnable/index.tsx
 var import_react15 = require("react");
 var import_icons_react8 = require("@tabler/icons-react");
-var import_core17 = require("@mantine/core");
+var import_core18 = require("@mantine/core");
 var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
 function Pinnable({
   layoutType: layoutTypeProp,
@@ -7108,7 +7116,7 @@ function Pinnable({
       componentsProps?.button?.onClick?.(e);
     }
   }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
-  const element = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Box, {
+  const element = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Box, {
     pos: "relative",
     ref: containerRef,
     "data-hidden": hidden,
@@ -7119,7 +7127,7 @@ function Pinnable({
         dragContainerRef: containerRef,
         ...componentsProps?.controls,
         children: controlButton
-      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Portal, {
+      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Portal, {
         target: controlsContainer,
         children: controlButton
       }, undefined, false, undefined, this),
@@ -7177,7 +7185,7 @@ function WidgetWrapper({
   const handleLeave = () => {
     updateActiveWidget(null);
   };
-  let element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core18.Transition, {
+  let element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Transition, {
     mounted,
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
@@ -7187,7 +7195,7 @@ function WidgetWrapper({
       setHidden(true);
       componentsProps?.transition?.onExited?.();
     },
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core18.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Paper, {
       ref: containerRef,
       p: "md",
       shadow: "md",
@@ -7293,7 +7301,7 @@ function WidgetWrapper({
   return element;
 }
 // src/core/components/Widget/index.tsx
-var import_core19 = require("@mantine/core");
+var import_core20 = require("@mantine/core");
 var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
@@ -7329,15 +7337,15 @@ function Widget({
     ...componentsProps?.wrapper,
     pinnableSection: pinnableSection ?? componentsProps?.wrapper?.pinnableSection,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Group, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
         justify: "space-between",
         wrap: "nowrap",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Group, {
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
             gap: badgesGap,
             wrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Title, {
+              /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
                 order: 1,
                 size: "h3",
                 lineClamp: 1,
@@ -7350,7 +7358,7 @@ function Widget({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Group, {
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
             gap: buttonsGap,
             wrap: "nowrap",
             children: buttons !== undefined && buttons.map((button, i) => {
@@ -7365,11 +7373,11 @@ function Widget({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Divider, {
         my: "md",
         ...componentsProps?.divider
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Stack, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
         align: "stretch",
         gap: alertsGap,
         mb: alerts && alerts.length > 0 ? "md" : 0,
@@ -7384,8 +7392,8 @@ function Widget({
           });
         })
       }, undefined, false, undefined, this),
-      loading ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Center, {
-        children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Loader, {
+      loading ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Center, {
+        children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Loader, {
           ...componentsProps?.loader
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
@@ -7395,7 +7403,7 @@ function Widget({
   }, undefined, true, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
-var import_core20 = require("@mantine/core");
+var import_core21 = require("@mantine/core");
 var import_navigation3 = require("next/navigation");
 var jsx_dev_runtime27 = require("react/jsx-dev-runtime");
 function NotFoundPage({
@@ -7409,7 +7417,7 @@ function NotFoundPage({
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Alert, {
+      /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core21.Alert, {
         ...theme.alertProps.negative,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -7419,7 +7427,7 @@ function NotFoundPage({
   }, undefined, true, undefined, this);
 }
 // src/core/components/EnvironmentShell/index.tsx
-var import_core21 = require("@mantine/core");
+var import_core22 = require("@mantine/core");
 var jsx_dev_runtime28 = require("react/jsx-dev-runtime");
 function EnvironmentShell({
   children,
@@ -7434,7 +7442,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_runtime28.jsxDEV(import_core21.Alert, {
+  const alert = /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(import_core22.Alert, {
     ...theme.alertProps.neutral,
     title: alertTitle,
     m,
@@ -7460,7 +7468,7 @@ var import_icons_react11 = require("@tabler/icons-react");
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
 var import_icons_react10 = require("@tabler/icons-react");
-var import_core22 = require("@mantine/core");
+var import_core23 = require("@mantine/core");
 var jsx_dev_runtime29 = require("react/jsx-dev-runtime");
 function SaveButton({
   onSaveChanges,
@@ -7483,7 +7491,7 @@ function SaveButton({
     }
   }, undefined, false, undefined, this);
   if (insideContainer !== false) {
-    return /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core22.Group, {
+    return /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core23.Group, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -7547,26 +7555,26 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
 var import_react18 = require("react");
-var import_core24 = require("@mantine/core");
+var import_core25 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
-var import_core23 = require("@mantine/core");
+var import_core24 = require("@mantine/core");
 var jsx_dev_runtime31 = require("react/jsx-dev-runtime");
 function Row({
   children,
   label
 }) {
   const options = useSettingsTableOptions();
-  return /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Table.Tr, {
+  return /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Table.Tr, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Table.Th, {
+      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Text, {
           size: "sm",
           children: label
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Table.Td, {
+      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Table.Td, {
         py: "xs",
         children
       }, undefined, false, undefined, this)
@@ -7593,12 +7601,12 @@ function SettingsTable({
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core24.Table, {
+    children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core25.Table, {
       bg: theme.transparentBackground,
       withTableBorder: true,
       variant: "vertical",
       layout: "fixed",
-      children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core24.Table.Tbody, {
+      children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core25.Table.Tbody, {
         children
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -7609,7 +7617,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
 var import_lodash5 = __toESM(require_lodash());
-var import_core25 = require("@mantine/core");
+var import_core26 = require("@mantine/core");
 var import_icons_react12 = require("@tabler/icons-react");
 var jsx_dev_runtime33 = require("react/jsx-dev-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
@@ -7640,7 +7648,7 @@ function NavbarSettingsWidget({
       children: [
         /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default.Row, {
           label: "Select which pages you want to display or hide",
-          children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core25.Chip.Group, {
+          children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core26.Chip.Group, {
             multiple: true,
             value: app.navigablePages.filter((p) => !userExperience.navbar.hiddenPages.includes(p.href)).map((p) => p.href),
             onChange: (newValue) => {
@@ -7652,10 +7660,10 @@ function NavbarSettingsWidget({
                 }
               }));
             },
-            children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core25.Group, {
+            children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core26.Group, {
               justify: "flex-start",
               gap: "xs",
-              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? import_icons_react12.IconLink })).map((p, i) => /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core25.Chip, {
+              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? import_icons_react12.IconLink })).map((p, i) => /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core26.Chip, {
                 value: p.href,
                 icon: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(p.icon, {
                   ...theme.iconProps.tiny,

package/dist/core/index.d.ts

@@ -92,6 +92,7 @@ interface RemoraidTheme {
 	transparentBackground?: string;
 	primaryColor?: string;
 	spacingPx?: Record<MantineSize, number>;
+	primaryGutter?: MantineSize | number;
 }
 interface RemoraidThemeDependencies {
 	mantineTheme: MantineTheme;
@@ -556,18 +557,20 @@ interface WidgetProps {
 	};
 }
 declare function Widget({ id, title, config, badges: badgesProp, buttons: buttonsProp, alerts: alertsProp, gaps, loading, mt, pinnableSection, componentsProps, children }: PropsWithChildren16<WidgetProps>): ReactNode25;
-import { ContainerProps as ContainerProps2 } from "@mantine/core";
+import { ContainerProps as ContainerProps2, StackProps as StackProps3 } from "@mantine/core";
 import { PropsWithChildren as PropsWithChildren17, ReactNode as ReactNode26 } from "react";
 declare const usePage: () => PageConfiguration | null;
 interface PageProps {
 	name?: string;
 	config?: Partial<Omit<PageConfiguration, "name">>;
-	p?: PageContainerProps["p"];
+	gap?: StackProps3["gap"];
 	componentsProps?: {
 		container?: ContainerProps2
+		PageContainer: Partial<PageContainerProps>
+		Stack?: Partial<StackProps3>
 	};
 }
-declare function Page({ children, name, config, p, componentsProps }: PropsWithChildren17<PageProps>): ReactNode26;
+declare function Page({ children, name, config, gap, componentsProps }: PropsWithChildren17<PageProps>): ReactNode26;
 import { PropsWithChildren as PropsWithChildren18, ReactNode as ReactNode27 } from "react";
 interface NotFoundPageProps {
 	message?: string;

package/dist/core/index.js

@@ -5799,7 +5799,8 @@ var createRemoraidTheme = (customTheme, dependencies) => {
         stroke: 3,
         ...customTheme?.iconProps?.tiny
       }
-    }
+    },
+    primaryGutter: "md"
   };
 };
 var themeContext = React3.createContext(createRemoraidTheme());
@@ -6485,7 +6486,7 @@ function AppShell({
   footerVariant: footerVariantProp,
   navbarPosition: navbarPositionProp,
   footerPosition: footerPositionProp,
-  gutter = "md",
+  gutter,
   appContext: appContext2,
   componentsProps,
   children
@@ -6494,6 +6495,7 @@ function AppShell({
   const footerVariant = footerVariantProp ?? null;
   const navbarPosition = navbarPositionProp ?? (navbarVariant === null ? null : defaultAppShellNavbarPositions[navbarVariant]);
   const footerPosition = footerPositionProp ?? (footerVariant === null ? null : defaultAppShellFooterPositions[footerVariant]);
+  const theme = useRemoraidTheme();
   let navbar;
   let footer;
   let navbarLayoutElementProps = {
@@ -6521,7 +6523,7 @@ function AppShell({
       ...componentsProps?.container,
       children: /* @__PURE__ */ jsxDEV14(FrameLayout_default, {
         layoutId: remoraidAppShellLayoutId,
-        gutter,
+        gutter: gutter ?? theme.primaryGutter,
         ...componentsProps?.layout,
         children: [
           navbarPosition !== null && /* @__PURE__ */ jsxDEV14(FrameLayout_default.Element, {
@@ -6549,6 +6551,7 @@ var AppShell_default = Object.assign(AppShell, {
 import { Chip as Chip2, Divider as Divider2, Flex as Flex3, Text } from "@mantine/core";
 
 // src/core/components/Page/index.tsx
+import { Stack as Stack3 } from "@mantine/core";
 import React6, {
   useContext as useContext8,
   useEffect as useEffect3
@@ -6563,9 +6566,10 @@ function Page({
   children,
   name,
   config,
-  p = 0,
+  gap,
   componentsProps
 }) {
+  const theme = useRemoraidTheme();
   const pathname = usePathname2();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
@@ -6579,9 +6583,13 @@ function Page({
   return /* @__PURE__ */ jsxDEV15(pageContext.Provider, {
     value: { name: name ?? pathname, pageId, ...config },
     children: /* @__PURE__ */ jsxDEV15(PageContainer, {
-      p,
-      componentsProps: { container: componentsProps?.container },
-      children
+      ...componentsProps?.PageContainer,
+      children: /* @__PURE__ */ jsxDEV15(Stack3, {
+        gap: gap ?? theme.primaryGutter,
+        ...componentsProps?.Stack,
+        className: clsx_default("remoraid-page", componentsProps?.Stack?.className),
+        children
+      }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
@@ -7298,7 +7306,7 @@ import {
   Group as Group5,
   Loader,
   Title,
-  Stack as Stack3
+  Stack as Stack4
 } from "@mantine/core";
 import { jsxDEV as jsxDEV26, Fragment as Fragment4 } from "react/jsx-dev-runtime";
 import { createElement as createElement3 } from "react";
@@ -7375,7 +7383,7 @@ function Widget({
         my: "md",
         ...componentsProps?.divider
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV26(Stack3, {
+      /* @__PURE__ */ jsxDEV26(Stack4, {
         align: "stretch",
         gap: alertsGap,
         mb: alerts && alerts.length > 0 ? "md" : 0,

package/dist/core/styles.css

@@ -66,6 +66,13 @@
     }
   }
 }
+.remoraid-page-container {
+  &:has(> .remoraid-page) {
+    &:not(:has(> .remoraid-page > :not([data-hidden="true"]))) {
+      display: none;
+    }
+  }
+}
 [data-hidden="true"] {
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remoraid",
-  "version": "2.18.43",
+  "version": "2.19.4",
   "author": "Konrad Goldammer",
   "repository": {
     "type": "git",