remoraid 2.0.0 → 2.1.7

package/dist/core/index.cjs

@@ -55,6 +55,7 @@ __export(exports_core, {
   Widget: () => Widget,
   ResponsiveButton: () => ResponsiveButton,
   RemoraidProvider: () => RemoraidProvider,
+  PageContainer: () => PageContainer,
   Page: () => Page,
   NotFoundPage: () => NotFoundPage,
   EnvironmentShell: () => EnvironmentShell,
@@ -154,6 +155,7 @@ var createRemoraidTheme = (customTheme, mantineTheme, colorScheme) => {
       medium: defaultMediumIconProps,
       tiny: { size: 14, stroke: 3 }
     },
+    jsonStringifySpace: 2,
     transparentBackground,
     primaryColor,
     spacingPx,
@@ -693,10 +695,28 @@ function AppShell({
 var import_core6 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
-var import_core5 = require("@mantine/core");
 var import_react5 = __toESM(require("react"));
 var import_navigation2 = require("next/navigation");
+
+// src/core/components/Page/PageContainer/index.tsx
+var import_core5 = require("@mantine/core");
 var jsx_dev_runtime8 = require("react/jsx-dev-runtime");
+function PageContainer({
+  children,
+  pt,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(import_core5.Container, {
+    size: theme.containerSize,
+    pt: pt ?? "md",
+    ...componentsProps?.container,
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/Page/index.tsx
+var jsx_dev_runtime9 = require("react/jsx-dev-runtime");
 var pageContext = import_react5.default.createContext(null);
 var usePage = () => {
   return import_react5.useContext(pageContext);
@@ -710,7 +730,6 @@ function Page({
 }) {
   const pathname = import_navigation2.usePathname();
   const { isPageRegistered, registerPage } = useWidgets();
-  const theme = useRemoraidTheme();
   const pageId = config?.pageId ?? pathname;
   import_react5.useEffect(() => {
     if (!isPageRegistered(pageId)) {
@@ -719,12 +738,11 @@ function Page({
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(pageContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(pageContext.Provider, {
     value: { name: name ?? pathname, pageId, ...config },
-    children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(import_core5.Container, {
-      size: theme.containerSize,
-      pt: pt ?? "md",
-      ...componentsProps?.container,
+    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(PageContainer, {
+      pt,
+      componentsProps: { container: componentsProps?.container },
       children
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
@@ -732,7 +750,7 @@ function Page({
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 var import_icons_react4 = require("@tabler/icons-react");
-var jsx_dev_runtime9 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime10 = require("react/jsx-dev-runtime");
 function WidgetSelectionHeader({
   title,
   disabledWidgets,
@@ -745,39 +763,39 @@ function WidgetSelectionHeader({
     console.error("'WidgetSelectionHeader' must be rendered inside of a 'Page' component.");
     return null;
   }
-  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core6.Flex, {
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core6.Flex, {
     justify: "flex-start",
     align: "center",
     gap: "xs",
     mt,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core6.Text, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core6.Text, {
         size: "lg",
         fw: 400,
         children: title ?? page.name
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core6.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core6.Divider, {
         orientation: "vertical"
       }, undefined, false, undefined, this),
-      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core6.ScrollArea, {
+      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core6.ScrollArea, {
         flex: 1,
         ...theme.scrollAreaProps,
-        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core6.Chip.Group, {
+        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core6.Chip.Group, {
           multiple: true,
           value: Object.keys(widgets[page.pageId]).filter((widgetId) => widgets[page.pageId][widgetId].selected),
           onChange: (value) => {
             updateWidgetSelectionBulk(page.pageId, value);
           },
-          children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core6.Flex, {
+          children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core6.Flex, {
             justify: "flex-start",
             align: "center",
             gap: "xs",
             h: "auto",
-            children: Object.keys(widgets[page.pageId]).map((widgetId) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core6.Chip, {
+            children: Object.keys(widgets[page.pageId]).map((widgetId) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core6.Chip, {
               value: widgetId,
               size: "sm",
               disabled: disabledWidgets && disabledWidgets.includes(widgetId),
-              icon: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_icons_react4.IconCheck, {
+              icon: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_icons_react4.IconCheck, {
                 ...theme.iconProps.tiny
               }, undefined, false, undefined, this),
               children: widgets[page.pageId][widgetId].name
@@ -791,17 +809,17 @@ function WidgetSelectionHeader({
 // src/core/components/CloseButton/index.tsx
 var import_core7 = require("@mantine/core");
 var import_icons_react5 = require("@tabler/icons-react");
-var jsx_dev_runtime10 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
 function CloseButton({ widgetId }) {
   const theme = useRemoraidTheme();
   const { activeWidget, updateWidgetSelection } = useWidgets();
   const page = usePage();
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core7.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core7.Transition, {
     mounted: activeWidget === widgetId,
     transition: "pop-top-right",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core7.ActionIcon, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core7.ActionIcon, {
       pos: "absolute",
       size: "xs",
       className: "remoraid-close-button",
@@ -814,7 +832,7 @@ function CloseButton({ widgetId }) {
         updateWidgetSelection(page.pageId, widgetId, false);
       },
       style: transitionStyle,
-      children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_icons_react5.IconX, {
+      children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_icons_react5.IconX, {
         ...theme.iconProps.tiny
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -826,7 +844,7 @@ var import_react6 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
 var import_core8 = require("@mantine/core");
-var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
 var isBadgeMinimalProps = (e) => {
   if (typeof e !== "object") {
     return false;
@@ -839,17 +857,17 @@ var isBadgeMinimalProps = (e) => {
 function BadgeMinimal(props) {
   const { label, tooltip, mounted, componentsProps } = props;
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core8.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core8.Transition, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core8.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core8.Tooltip, {
       disabled: !tooltip,
       label: tooltip,
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core8.Badge, {
+      children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core8.Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -864,7 +882,7 @@ function BadgeMinimal(props) {
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
 var react = require("react");
 function BadgeGroup({
   badges,
@@ -874,9 +892,9 @@ function BadgeGroup({
 }) {
   const theme = useRemoraidTheme();
   const numVisibleBadges = badges.filter((e) => isBadgeMinimalProps(e) ? e.mounted !== false : true).length;
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core9.Group, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core9.Group, {
         gap: gap ?? "xs",
         wrap: "nowrap",
         visibleFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
@@ -890,10 +908,10 @@ function BadgeGroup({
           return e;
         })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core9.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core9.Tooltip, {
         label: `${numVisibleBadges} badge${numVisibleBadges === 1 ? "" : "s"}`,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core9.Badge, {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core9.Badge, {
           hiddenFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
           hidden: numVisibleBadges === 0,
           variant: "light",
@@ -908,7 +926,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 var import_core10 = require("@mantine/core");
-var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
 var isAlertMinimalProps = (e) => {
   if (typeof e !== "object") {
     return false;
@@ -930,13 +948,13 @@ function AlertMinimal({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core10.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core10.Transition, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core10.Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core10.Alert, {
       ...theme.alertProps[category],
       title: title ?? theme.alertProps[category].title,
       withCloseButton: onClose !== undefined,
@@ -958,7 +976,7 @@ function AlertMinimal({
 // src/core/components/ResponsiveButton/index.tsx
 var import_core11 = require("@mantine/core");
 var import_icons_react6 = require("@tabler/icons-react");
-var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
 var isResponsiveButtonProps = (e) => {
   if (typeof e !== "object") {
     return false;
@@ -971,17 +989,17 @@ var isResponsiveButtonProps = (e) => {
 function ResponsiveButton(props) {
   const { onClick, label, loading, variant, componentsProps, breakpoint } = props;
   const theme = useRemoraidTheme();
-  const icon = props.icon ? /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(props.icon, {
+  const icon = props.icon ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(props.icon, {
     ...theme.iconProps.medium
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_icons_react6.IconClick, {
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_icons_react6.IconClick, {
     ...theme.iconProps.medium
   }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(jsx_dev_runtime14.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(jsx_dev_runtime15.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core11.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core11.Tooltip, {
         label,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core11.ActionIcon, {
+        children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core11.ActionIcon, {
           variant: variant || "default",
           onClick,
           loading,
@@ -991,7 +1009,7 @@ function ResponsiveButton(props) {
           children: icon
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core11.Button, {
+      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core11.Button, {
         onClick,
         loading,
         variant: variant || "default",
@@ -1005,7 +1023,7 @@ function ResponsiveButton(props) {
 // src/core/components/Widget/WidgetWrapper/index.tsx
 var import_core12 = require("@mantine/core");
 var import_react7 = require("react");
-var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
   children,
   config,
@@ -1031,12 +1049,12 @@ function WidgetWrapper({
       registerWidget(page.pageId, config);
     }
   }, [pageRegistered]);
-  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core12.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core12.Transition, {
     mounted: page !== null && isWidgetSelected(page.pageId, config.widgetId),
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core12.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core12.Paper, {
       p: "md",
       shadow: "md",
       bg: theme.transparentBackground,
@@ -1052,7 +1070,7 @@ function WidgetWrapper({
         updateActiveWidget(null);
       },
       children: [
-        withCloseButton !== false && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(CloseButton, {
+        withCloseButton !== false && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(CloseButton, {
           widgetId: config.widgetId
         }, undefined, false, undefined, this),
         children
@@ -1062,7 +1080,7 @@ function WidgetWrapper({
 }
 // src/core/components/Widget/index.tsx
 var import_core13 = require("@mantine/core");
-var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
   children,
@@ -1080,7 +1098,7 @@ function Widget({
   const badgesGap = (typeof gaps === "object" ? gaps.badges : gaps) ?? "xs";
   const buttonsGap = (typeof gaps === "object" ? gaps.buttons : gaps) ?? "xs";
   const alertsGap = (typeof gaps === "object" ? gaps.alerts : gaps) ?? "xs";
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(WidgetWrapper, {
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(WidgetWrapper, {
     config: {
       widgetId: id,
       name: title,
@@ -1093,28 +1111,28 @@ function Widget({
     },
     ...componentsProps?.wrapper,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core13.Group, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core13.Group, {
         justify: "space-between",
         wrap: "nowrap",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core13.Group, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core13.Group, {
             gap: badgesGap,
             wrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core13.Title, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core13.Title, {
                 order: 1,
                 size: "h3",
                 lineClamp: 1,
                 children: title
               }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(BadgeGroup, {
+              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(BadgeGroup, {
                 badges,
                 gap: badgesGap,
                 ...componentsProps?.badgeGroup
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core13.Group, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core13.Group, {
             gap: buttonsGap,
             wrap: "nowrap",
             children: buttons !== undefined && buttons.map((e, i) => {
@@ -1129,7 +1147,7 @@ function Widget({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core13.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core13.Divider, {
         my: "md"
       }, undefined, false, undefined, this),
       alerts !== undefined && alerts.map((a, i) => {
@@ -1142,11 +1160,11 @@ function Widget({
         }
         return a;
       }),
-      loading ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core13.Center, {
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core13.Loader, {
+      loading ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core13.Center, {
+        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core13.Loader, {
           ...componentsProps?.loader
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
         children
       }, undefined, false, undefined, this)
     ]
@@ -1155,7 +1173,7 @@ function Widget({
 // src/core/components/Page/NotFoundPage/index.tsx
 var import_core14 = require("@mantine/core");
 var import_navigation3 = require("next/navigation");
-var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
 function NotFoundPage({
   children,
   message,
@@ -1163,11 +1181,11 @@ function NotFoundPage({
 }) {
   const pathname = import_navigation3.usePathname();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Page, {
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core14.Alert, {
+      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core14.Alert, {
         ...theme.alertProps.negative,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -1178,29 +1196,37 @@ function NotFoundPage({
 }
 // src/core/components/EnvironmentShell/index.tsx
 var import_core15 = require("@mantine/core");
-var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
 function EnvironmentShell({
   children,
-  vars,
+  environment,
   message,
   m,
-  mt
+  mt,
+  withContainer,
+  componentsProps
 }) {
   const theme = useRemoraidTheme();
-  const missingVars = vars.filter((v) => !process.env[v]);
-  if (missingVars.length !== 0) {
-    return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core15.Alert, {
-      ...theme.alertProps.neutral,
-      title: `Please Specify Environment Variable${missingVars.length > 1 ? "s" : ""}`,
-      m,
-      mt,
-      children: message ?? `
-        Components could not be rendered because the following environment
-        variables are not specified: ${missingVars.join(", ")}.
-      `
+  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_runtime19.jsxDEV(import_core15.Alert, {
+    ...theme.alertProps.neutral,
+    title: alertTitle,
+    m,
+    mt,
+    children: message ?? alertMessage
+  }, undefined, false, undefined, this);
+  if (undefinedKeys.length === 0) {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
+      children
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(jsx_dev_runtime18.Fragment, {
-    children
-  }, undefined, false, undefined, this);
+  if (withContainer) {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(PageContainer, {
+      componentsProps: { container: componentsProps?.container },
+      children: alert
+    }, undefined, false, undefined, this);
+  }
+  return alert;
 }

package/dist/core/index.d.ts

@@ -35,6 +35,7 @@ interface RemoraidTheme {
 		tiny: IconProps
 		medium: IconProps
 	};
+	jsonStringifySpace: string | number;
 	transparentBackground?: string;
 	primaryColor?: string;
 	spacingPx?: { [S in MantineSize] : number };
@@ -243,7 +244,16 @@ interface PageProps {
 	};
 }
 declare function Page({ children, name, config, pt, componentsProps }: PropsWithChildren9<PageProps>): ReactNode15;
+import { ContainerProps as ContainerProps2, MantineSize as MantineSize8 } from "@mantine/core";
 import { PropsWithChildren as PropsWithChildren10, ReactNode as ReactNode16 } from "react";
+interface PageContainerProps {
+	pt?: MantineSize8 | number;
+	componentsProps?: {
+		container?: ContainerProps2
+	};
+}
+declare function PageContainer({ children, pt, componentsProps }: PropsWithChildren10<PageContainerProps>): ReactNode16;
+import { PropsWithChildren as PropsWithChildren11, ReactNode as ReactNode17 } from "react";
 import { PageProps as PageProps2 } from "..";
 interface NotFoundPageProps {
 	message?: string;
@@ -251,14 +261,18 @@ interface NotFoundPageProps {
 		page?: PageProps2
 	};
 }
-declare function NotFoundPage({ children, message, componentsProps }: PropsWithChildren10<NotFoundPageProps>): ReactNode16;
-import { MantineSize as MantineSize8 } from "@mantine/core";
-import { PropsWithChildren as PropsWithChildren11, ReactNode as ReactNode17 } from "react";
+declare function NotFoundPage({ children, message, componentsProps }: PropsWithChildren11<NotFoundPageProps>): ReactNode17;
+import { ContainerProps as ContainerProps3, MantineSize as MantineSize9 } from "@mantine/core";
+import { PropsWithChildren as PropsWithChildren12, ReactNode as ReactNode18 } from "react";
 interface EnvironmentShellProps {
-	vars: string[];
+	environment: Record<string, string | undefined>;
 	message?: string;
-	m?: MantineSize8 | number;
-	mt?: MantineSize8 | number;
+	m?: MantineSize9 | number;
+	mt?: MantineSize9 | number;
+	withContainer?: boolean;
+	componentsProps?: {
+		container?: ContainerProps3
+	};
 }
-declare function EnvironmentShell({ children, vars, message, m, mt }: PropsWithChildren11<EnvironmentShellProps>): ReactNode17;
-export { userExperienceCookieName, useWidgets, useRemoraidUserExperience, useRemoraidTheme, defaultUserExperience, defaultNavbarSettings, createRemoraidTheme, WidgetWrapper, WidgetSelectionHeader, Widget, ResponsiveButton, RemoraidProvider, Page, NotFoundPage, EnvironmentShell, CloseButton, BadgeMinimal, BadgeGroup, AppShell, AlertMinimal };
+declare function EnvironmentShell({ children, environment, message, m, mt, withContainer, componentsProps }: PropsWithChildren12<EnvironmentShellProps>): ReactNode18;
+export { userExperienceCookieName, useWidgets, useRemoraidUserExperience, useRemoraidTheme, defaultUserExperience, defaultNavbarSettings, createRemoraidTheme, WidgetsProviderProps, WidgetWrapperProps, WidgetWrapper, WidgetSelectionHeaderProps, WidgetSelectionHeader, WidgetProps, WidgetConfiguration, Widget, UserExperienceProviderProps, UserExperience, ThemeProviderProps, ResponsiveButtonProps, ResponsiveButton, RemoraidThemeCallback, RemoraidTheme, RemoraidProviderProps, RemoraidProvider, PartialRemoraidTheme, PageProps, PageContainerProps, PageContainer, PageConfiguration, Page, NotFoundPageProps, NotFoundPage, NavbarVariant, NavbarSettings, NavbarProps, NavbarLink, EnvironmentShellProps, EnvironmentShell, CloseButtonProps, CloseButton, BadgeMinimalProps, BadgeMinimal, BadgeGroupProps, BadgeGroup, AppShellProps, AppShellLogo, AppShell, AlertMinimalProps, AlertMinimal, AlertCategory };