remoraid 2.18.43 → 2.20.2

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 Stack(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;
+      Stack.prototype.clear = stackClear;
+      Stack.prototype["delete"] = stackDelete;
+      Stack.prototype.get = stackGet;
+      Stack.prototype.has = stackHas;
+      Stack.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 Stack);
         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 Stack);
           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 Stack);
             return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
           }
         }
         if (!isSameTag) {
           return false;
         }
-        stack || (stack = new Stack2);
+        stack || (stack = new Stack);
         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 Stack;
             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 Stack);
           if (isObject(srcValue)) {
             baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
@@ -5476,6 +5476,7 @@ __export(exports_core, {
   isValidElementOfType: () => isValidElementOfType,
   getElementTypeName: () => getElementTypeName,
   getDefaultWidgetContext: () => getDefaultWidgetContext,
+  getDefaultButtonIconSize: () => getDefaultButtonIconSize,
   defaultUserExperienceCookieName: () => defaultUserExperienceCookieName,
   defaultUserExperience: () => defaultUserExperience,
   defaultSettingsWidgetOptions: () => defaultSettingsWidgetContext,
@@ -5515,6 +5516,7 @@ __export(exports_core, {
   FrameLayoutSection: () => FrameLayoutSection,
   FrameLayout: () => FrameLayout_default,
   FooterVariant: () => FooterVariant,
+  EnvironmentShellVariant: () => EnvironmentShellVariant,
   EnvironmentShell: () => EnvironmentShell,
   Controls: () => Controls,
   ControlButton: () => ControlButton,
@@ -5529,13 +5531,10 @@ __export(exports_core, {
 module.exports = __toCommonJS(exports_core);
 
 // src/core/components/RemoraidProvider/WidgetsProvider/index.tsx
+var import_lodash = __toESM(require_lodash());
 var import_react = __toESM(require("react"));
 var jsx_dev_runtime = require("react/jsx-dev-runtime");
-var getDefaultWidgetContext = (configuration) => ({
-  name: configuration.widgetId,
-  selected: true,
-  ...configuration.initialValues
-});
+var getDefaultWidgetContext = (configuration) => import_lodash.merge({ name: configuration.widgetId, selected: true }, configuration.initialValues);
 var widgetsContext = import_react.default.createContext({
   widgets: {},
   activeWidget: null,
@@ -5692,6 +5691,7 @@ var RemoraidBreakpoint;
 var RemoraidIconSize;
 ((RemoraidIconSize2) => {
   RemoraidIconSize2["Tiny"] = "tiny";
+  RemoraidIconSize2["Small"] = "small";
   RemoraidIconSize2["Medium"] = "medium";
 })(RemoraidIconSize ||= {});
 var LayoutType;
@@ -5743,6 +5743,12 @@ var asElementOrPropsOfType = (type, elementOrProps, additionalErrorMessage) => {
   }
   return elementOrProps;
 };
+var getDefaultButtonIconSize = (buttonSize) => {
+  if (buttonSize === "xs") {
+    return "small" /* Small */;
+  }
+  return "medium" /* Medium */;
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 var import_core2 = require("@mantine/core");
@@ -5785,22 +5791,18 @@ function HydrationStatusProvider({
 }
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
+var import_lodash2 = __toESM(require_lodash());
 var jsx_dev_runtime3 = require("react/jsx-dev-runtime");
-var isMantinePrimaryShade = (primaryShade) => {
-  if (isNaN(Number(primaryShade))) {
-    return true;
-  }
-  return false;
-};
 var createRemoraidTheme = (customTheme, dependencies) => {
   const { mantineTheme, colorScheme } = dependencies ?? {};
-  const defaultMediumIconProps = { size: "1.125em" };
-  let transparentBackground;
-  let primaryColor;
+  const transitionDurations = import_lodash2.merge({
+    ["short" /* Short */]: 200,
+    ["medium" /* Medium */]: 350,
+    ["long" /* Long */]: 500
+  }, customTheme?.transitionDurations);
+  const transparentBackground = customTheme?.transparentBackground ?? (mantineTheme && colorScheme ? colorScheme === "dark" ? import_core2.rgba(mantineTheme.colors.dark[8], 0.8) : import_core2.rgba(mantineTheme.white, 0.8) : undefined);
   let spacingPx;
   if (mantineTheme && colorScheme) {
-    transparentBackground = colorScheme === "dark" ? import_core2.rgba(mantineTheme.colors.dark[8], 0.8) : import_core2.rgba(mantineTheme.white, 0.8);
-    primaryColor = mantineTheme.colors[mantineTheme.primaryColor][isMantinePrimaryShade(mantineTheme.primaryShade) ? mantineTheme.primaryShade[colorScheme === "auto" ? "light" : colorScheme] : mantineTheme.primaryShade];
     spacingPx = {
       xs: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.xs)), 0)),
       sm: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.sm)), 0)),
@@ -5809,71 +5811,72 @@ var createRemoraidTheme = (customTheme, dependencies) => {
       xl: Number(co((v) => !Number.isNaN(v), Number(import_core2.px(mantineTheme.spacing.xl)), 0))
     };
   }
-  return {
+  const defaultTheme = {
     containerSize: 1300,
     jsonStringifySpace: 2,
     transparentBackground,
-    primaryColor,
     spacingPx,
-    ...customTheme,
-    transitionDurations: {
-      ["short" /* Short */]: 200,
-      ["medium" /* Medium */]: 350,
-      ["long" /* Long */]: 500,
-      ...customTheme?.transitionDurations
-    },
+    transitionDurations,
     breakpoints: {
       ["buttonCollapse" /* ButtonCollapse */]: "md",
-      ["badgeGroupCollapse" /* BadgeGroupCollapse */]: "md",
-      ...customTheme?.breakpoints
-    },
-    scrollAreaProps: {
-      scrollbarSize: 8,
-      scrollHideDelay: 20,
-      type: "hover",
-      ...customTheme?.scrollAreaProps
+      ["badgeGroupCollapse" /* BadgeGroupCollapse */]: "md"
     },
-    alertProps: {
-      ["negative" /* Negative */]: {
-        icon: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_icons_react.IconAlertCircle, {
-          ...defaultMediumIconProps
-        }, undefined, false, undefined, this),
-        variant: "light",
-        color: "red",
-        title: "Attention!",
-        ...customTheme?.alertProps?.negative
+    primaryGutter: "md",
+    componentsProps: {
+      alerts: {
+        ["negative" /* Negative */]: {
+          icon: import_icons_react.IconAlertCircle,
+          color: "red",
+          title: "Attention!"
+        },
+        ["neutral" /* Neutral */]: {
+          icon: import_icons_react.IconInfoCircle,
+          color: mantineTheme?.primaryColor,
+          title: "Information"
+        },
+        ["positive" /* Positive */]: {
+          icon: import_icons_react.IconCircleCheck,
+          color: "green",
+          title: "Success"
+        }
       },
-      ["neutral" /* Neutral */]: {
-        icon: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_icons_react.IconInfoCircle, {
-          ...defaultMediumIconProps
-        }, undefined, false, undefined, this),
-        variant: "light",
-        color: mantineTheme?.primaryColor,
-        title: "Information",
-        ...customTheme?.alertProps?.neutral
+      icons: {
+        ["medium" /* Medium */]: {
+          size: 20,
+          stroke: 2
+        },
+        ["small" /* Small */]: {
+          size: 16,
+          stroke: 2.3
+        },
+        ["tiny" /* Tiny */]: {
+          size: 12,
+          stroke: 2.6
+        }
       },
-      ["positive" /* Positive */]: {
-        icon: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_icons_react.IconCircleCheck, {
-          ...defaultMediumIconProps
-        }, undefined, false, undefined, this),
-        variant: "light",
-        color: "green",
-        title: "Success",
-        ...customTheme?.alertProps?.positive
-      }
-    },
-    iconProps: {
-      ["medium" /* Medium */]: {
-        ...defaultMediumIconProps,
-        ...customTheme?.iconProps?.medium
+      ScrollArea: {
+        scrollbarSize: 8,
+        scrollHideDelay: 20,
+        type: "hover"
       },
-      ["tiny" /* Tiny */]: {
-        size: 14,
-        stroke: 3,
-        ...customTheme?.iconProps?.tiny
+      HoverCard: {
+        shadow: "md",
+        withArrow: true,
+        transitionProps: {
+          transition: "pop",
+          duration: transitionDurations.short
+        },
+        styles: {
+          dropdown: { border: "none", background: transparentBackground },
+          arrow: { border: "none" }
+        }
+      },
+      Tooltip: {
+        withArrow: true
       }
     }
   };
+  return import_lodash2.merge(defaultTheme, customTheme);
 };
 var themeContext = import_react4.default.createContext(createRemoraidTheme());
 var useRemoraidTheme = () => {
@@ -5905,6 +5908,7 @@ var import_react_cookie2 = require("react-cookie");
 var import_react6 = require("react");
 
 // src/core/components/UserExperienceProviderWrapper/index.tsx
+var import_lodash3 = __toESM(require_lodash());
 var import_react5 = require("react");
 var import_react_cookie = require("react-cookie");
 var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
@@ -5923,10 +5927,7 @@ function UserExperienceProviderWrapper({
   initialValue
 }) {
   const [cookies, setCookie] = import_react_cookie.useCookies();
-  let initialUserExperience = defaultUserExperience;
-  if (typeof initialValue === "object" && typeof initialUserExperience === "object") {
-    initialUserExperience = { ...initialUserExperience, ...initialValue };
-  }
+  const initialUserExperience = import_lodash3.merge(defaultUserExperience, initialValue);
   const [userExperience, setUserExperience] = import_react5.useState(initialUserExperience);
   const [processedCookie, setProcessedCookie] = import_react5.useState(false);
   const updateUserExperience = (p) => {
@@ -6088,6 +6089,7 @@ function NavbarLink({
   href,
   indicator
 }) {
+  const theme = useRemoraidTheme();
   const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react9.useState(false);
   const iconProps = {
     size: iconSize,
@@ -6096,9 +6098,9 @@ function NavbarLink({
   const Icon2 = icon ?? import_icons_react2.IconLink;
   if (!href) {
     return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Tooltip, {
+      ...theme.componentsProps.Tooltip,
       label,
       position: "right",
-      transitionProps: { duration: 0 },
       children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.UnstyledButton, {
         onClick,
         className: "remoraid-navbar-minimal-link",
@@ -6124,9 +6126,9 @@ function NavbarLink({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
   return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Tooltip, {
+    ...theme.componentsProps.Tooltip,
     label,
     position: "right",
-    transitionProps: { duration: 0 },
     children: indicator === undefined ? button : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Indicator, {
       withBorder: true,
       size: 13,
@@ -6323,7 +6325,7 @@ function PageContainer({
 }
 
 // src/core/components/FrameLayout/Element/index.tsx
-var import_lodash = __toESM(require_lodash());
+var import_lodash4 = __toESM(require_lodash());
 var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
 function Element2({
   section,
@@ -6363,7 +6365,7 @@ function Element2({
     target: layout.sections[section],
     children: includeContainer ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Box, {
       "data-hidden": hidden,
-      ...import_lodash.merge(containerProps, componentsProps?.container),
+      ...import_lodash4.merge(containerProps, componentsProps?.container),
       className: clsx_default("remoraid-frame-layout-element", containerProps?.className, componentsProps?.container?.className),
       children: element
     }, undefined, false, undefined, this) : element
@@ -6371,6 +6373,7 @@ function Element2({
 }
 
 // src/core/components/FrameLayout/index.tsx
+var import_lodash5 = __toESM(require_lodash());
 var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
 var layoutContext = import_react10.createContext(null);
 var useFrameLayout = () => {
@@ -6485,8 +6488,7 @@ function FrameLayout({
             }, undefined, false, undefined, this),
             includeScrollArea ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.ScrollArea, {
               flex: 1,
-              ...theme.scrollAreaProps,
-              ...componentsProps?.ScrollArea,
+              ...import_lodash5.merge({}, theme.componentsProps.ScrollArea, componentsProps?.ScrollArea),
               children: contentSection
             }, undefined, false, undefined, this) : contentSection,
             /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Stack, {
@@ -6516,7 +6518,7 @@ var FrameLayout_default = Object.assign(FrameLayout, {
 });
 
 // src/core/components/AppShell/index.tsx
-var import_lodash2 = __toESM(require_lodash());
+var import_lodash6 = __toESM(require_lodash());
 var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
 var remoraidAppShellLayoutId = "remoraid-app-shell";
 var defaultAppShellNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
@@ -6526,7 +6528,7 @@ function AppShell({
   footerVariant: footerVariantProp,
   navbarPosition: navbarPositionProp,
   footerPosition: footerPositionProp,
-  gutter = "md",
+  gutter,
   appContext: appContext2,
   componentsProps,
   children
@@ -6535,6 +6537,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,19 +6565,19 @@ 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, {
             section: navbarPosition,
             includeContainer: false,
-            ...import_lodash2.merge(navbarLayoutElementProps, componentsProps?.navbarLayoutElement),
+            ...import_lodash6.merge(navbarLayoutElementProps, componentsProps?.navbarLayoutElement),
             children: navbar
           }, undefined, false, undefined, this),
           children,
           footerPosition !== null && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default.Element, {
             section: footerPosition,
-            ...import_lodash2.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
+            ...import_lodash6.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
             children: footer
           }, undefined, false, undefined, this)
         ]
@@ -6587,9 +6590,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 +6605,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 +6622,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 +6637,8 @@ 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 import_lodash7 = __toESM(require_lodash());
 var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 function ScrollableChipGroup({
   value,
@@ -6637,17 +6647,16 @@ 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, {
-    ...theme.scrollAreaProps,
-    ...componentsProps?.scrollArea,
-    children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.Chip.Group, {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.ScrollArea, {
+    ...import_lodash7.merge({}, theme.componentsProps.ScrollArea, componentsProps?.ScrollArea),
+    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 +6682,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, {
@@ -6692,15 +6701,15 @@ function WidgetSelectionHeader({
         onChange: (value) => {
           updateWidgetSelectionBulk(page.pageId, value);
         },
-        componentsProps: { scrollArea: { flex: 1 } },
+        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),
             icon: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_icons_react4.IconCheck, {
-              ...theme.iconProps.tiny
+              ...theme.componentsProps.icons.small
             }, undefined, false, undefined, this),
             children: widget.name
           }, widgetId, false, undefined, this);
@@ -6710,11 +6719,12 @@ 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 import_lodash8 = __toESM(require_lodash());
 var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
 function BadgeMinimal({
   label,
@@ -6723,17 +6733,15 @@ 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, {
-      disabled: !tooltip,
-      label: tooltip,
-      ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.Badge, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Tooltip, {
+      ...import_lodash8.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -6748,84 +6756,112 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
+var import_lodash9 = __toESM(require_lodash());
 var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
 var react = require("react");
 function BadgeGroup({
   badges: badgesProp,
-  gap,
-  breakpoint,
+  gap = "xs",
+  breakpoint: breakpointProp,
   componentsProps
 }) {
-  const theme = useRemoraidTheme();
   const badges = badgesProp.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check 'badges' property passed to 'BadgeGroup'."));
+  const theme = useRemoraidTheme();
+  const breakpoint = breakpointProp ?? theme.breakpoints.badgeGroupCollapse;
   const numVisibleBadges = badges.filter((badge) => isValidElementOfType(BadgeMinimal, badge) ? badge.props.mounted : badge.mounted !== false).length;
+  const badgesElement = badges.map((badge, i) => {
+    if (isValidElementOfType(BadgeMinimal, badge)) {
+      return badge;
+    }
+    return /* @__PURE__ */ react.createElement(BadgeMinimal, {
+      ...badge,
+      key: i
+    });
+  });
   return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Group, {
-        gap: gap ?? "xs",
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Group, {
+        gap,
         wrap: "nowrap",
-        visibleFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
-        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
-          });
-        })
+        visibleFrom: numVisibleBadges > 1 ? breakpoint : undefined,
+        ...componentsProps?.container,
+        className: clsx_default("remoraid-badge-group", componentsProps?.container?.className),
+        children: badgesElement
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Tooltip, {
-        label: `${numVisibleBadges} badge${numVisibleBadges === 1 ? "" : "s"}`,
-        ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Badge, {
-          hiddenFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
-          hidden: numVisibleBadges === 0,
-          variant: "light",
-          circle: true,
-          style: { cursor: "pointer" },
-          ...componentsProps?.cumulativeBadge,
-          children: numVisibleBadges
-        }, undefined, false, undefined, this)
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Transition, {
+        mounted: numVisibleBadges > 1,
+        transition: "fade",
+        duration: theme.transitionDurations.short,
+        timingFunction: "ease",
+        ...componentsProps?.cumulativeBadgeTransition,
+        children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.HoverCard, {
+          ...import_lodash9.merge({}, theme.componentsProps.HoverCard, componentsProps?.HoverCard),
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.HoverCard.Target, {
+              children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Badge, {
+                hiddenFrom: breakpoint,
+                variant: "dot",
+                ...componentsProps?.cumulativeBadge,
+                style: {
+                  cursor: "pointer",
+                  ...import_lodash9.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                },
+                children: [
+                  numVisibleBadges,
+                  " badges"
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.HoverCard.Dropdown, {
+              p: gap,
+              children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Stack, {
+                gap,
+                ...componentsProps?.hoverContainer,
+                children: badgesElement
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 // src/core/components/AlertMinimal/index.tsx
-var import_core13 = require("@mantine/core");
+var import_core14 = require("@mantine/core");
+var import_lodash10 = __toESM(require_lodash());
 var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
 function AlertMinimal({
-  title,
   category,
-  text,
-  onClose,
-  mounted = true,
-  mt,
-  mb,
-  componentsProps,
-  children
+  children,
+  ...props
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Transition, {
-    mounted: mounted !== false,
+  const {
+    title,
+    text,
+    color,
+    onClose,
+    mounted = true,
+    icon: Icon2,
+    iconSize = "medium" /* Medium */,
+    componentsProps
+  } = import_lodash10.merge({}, theme.componentsProps.alerts[category], props);
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Transition, {
+    mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Alert, {
-      ...theme.alertProps[category],
-      title: title ?? theme.alertProps[category].title,
-      withCloseButton: onClose !== undefined,
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Alert, {
+      title,
+      color,
+      variant: "light",
       onClose,
-      mt,
-      mb,
-      ...componentsProps?.alert,
-      style: {
-        ...transitionStyle,
-        ...componentsProps?.alert?.style ?? theme.alertProps[category].style
-      },
+      withCloseButton: onClose !== undefined,
+      icon: Icon2 ? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Icon2, {
+        ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+      }, undefined, false, undefined, this) : undefined,
+      style: import_lodash10.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
         children
@@ -6834,33 +6870,35 @@ 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 import_lodash11 = __toESM(require_lodash());
 var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
 function RemoraidButton({
   label,
   responsive: ResponsiveProp,
   breakpoint: breakpointProp,
   collapsed: collapsedProp,
-  size,
+  size = "sm",
   color,
   onClick,
   loading,
   variant = "default",
   mounted = true,
   icon: iconProp,
-  iconSize = "medium" /* Medium */,
+  iconSize: iconSizeProp,
   componentsProps
 }) {
   const responsive = ResponsiveProp ?? true;
   const breakpoint = breakpointProp ?? "md";
   const collapsed = collapsedProp ?? false;
-  const icon = iconProp ?? import_icons_react5.IconClick;
+  const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
+  const Icon3 = iconProp ?? import_icons_react5.IconClick;
   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, {
+  const iconElement = /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Icon3, {
+    ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
@@ -6868,10 +6906,9 @@ function RemoraidButton({
     ...componentsProps?.transition,
     children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(jsx_dev_runtime21.Fragment, {
       children: [
-        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Tooltip, {
-          label,
-          ...componentsProps?.tooltip,
-          children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.ActionIcon, {
+        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Tooltip, {
+          ...import_lodash11.merge({}, theme.componentsProps.Tooltip, { label }, componentsProps?.tooltip),
+          children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.ActionIcon, {
             "aria-label": label,
             variant,
             onClick,
@@ -6889,7 +6926,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,8 +6948,9 @@ 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 import_lodash12 = __toESM(require_lodash());
 var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
 function ControlButton({
   icon: Icon4 = import_icons_react6.IconClick,
@@ -6926,17 +6964,15 @@ 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",
+    transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.Tooltip, {
-      label: tooltip,
-      disabled: !Boolean(tooltip),
-      ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.ActionIcon, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Tooltip, {
+      ...import_lodash12.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.ActionIcon, {
         "data-control-button": true,
         size,
         color,
@@ -6944,13 +6980,11 @@ function ControlButton({
         radius: "xl",
         ...componentsProps?.button,
         style: {
-          ...transitionStyle,
           order,
-          ...componentsProps?.button?.style
+          ...import_lodash12.merge(transitionStyle, componentsProps?.button?.style)
         },
         children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(Icon4, {
-          ...theme.iconProps[iconSize],
-          ...componentsProps?.icon
+          ...import_lodash12.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -6958,10 +6992,10 @@ function ControlButton({
 }
 
 // src/core/components/Controls/index.tsx
-var import_react14 = require("react");
-var import_core16 = require("@mantine/core");
+var import_react13 = require("react");
+var import_core17 = require("@mantine/core");
 var import_icons_react7 = require("@tabler/icons-react");
-var import_lodash3 = __toESM(require_lodash());
+var import_lodash13 = __toESM(require_lodash());
 var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
 function Controls({
   groupRef,
@@ -6976,12 +7010,12 @@ function Controls({
   const additionalButtons = additionalButtonsProp?.map((additionalButton) => asElementOrPropsOfType(ControlButton, additionalButton, "Check the 'additionalButtons' property of 'Controls'."));
   const children = asChildrenOfType(ControlButton, childrenProp, "Check children passed to 'Controls' component.");
   const theme = useRemoraidTheme();
-  const [pos, setPos] = import_react14.useState({
+  const [pos, setPos] = import_react13.useState({
     x: 0,
     y: 0
   });
-  const offsetRef = import_react14.useRef({ x: 0, y: 0 });
-  const containerRef = import_react14.useRef(null);
+  const offsetRef = import_react13.useRef({ x: 0, y: 0 });
+  const containerRef = import_react13.useRef(null);
   const clamp = (v, min, max) => {
     return Math.min(Math.max(v, min), max);
   };
@@ -7020,14 +7054,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,
@@ -7040,10 +7074,10 @@ function Controls({
       style: {
         right: pos.x,
         top: pos.y,
-        ...import_lodash3.merge(transitionStyle, componentsProps?.container?.style)
+        ...import_lodash13.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",
@@ -7051,9 +7085,7 @@ function Controls({
         className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
         children: [
           /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_icons_react7.IconGripHorizontal, {
-            order: -100,
-            color: "var(--mantine-color-default-border)",
-            ...import_lodash3.merge(theme.iconProps[iconSize], componentsProps?.gripIcon)
+            ...import_lodash13.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
           }, undefined, false, undefined, this),
           children,
           additionalButtons && additionalButtons.map((button, i) => {
@@ -7070,14 +7102,14 @@ function Controls({
   }, undefined, false, undefined, this);
 }
 // src/core/components/Widget/WidgetWrapper/index.tsx
-var import_core18 = require("@mantine/core");
-var import_react16 = require("react");
+var import_core19 = require("@mantine/core");
+var import_react15 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
 
 // src/core/components/Pinnable/index.tsx
-var import_react15 = require("react");
+var import_react14 = 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,
@@ -7091,13 +7123,13 @@ function Pinnable({
 }) {
   const layoutType = layoutTypeProp ?? "frame" /* Frame */;
   const { layouts } = useLayouts();
-  const [pinned, setPinned] = import_react15.useState(initialValue);
-  const containerRef = import_react15.useRef(null);
+  const [pinned, setPinned] = import_react14.useState(initialValue);
+  const containerRef = import_react14.useRef(null);
   const layout = layouts[layoutId ?? remoraidAppShellLayoutId];
   if (layout && layout.type !== layoutType) {
     throw new TypeError(`Prop 'layoutId' in '${Pinnable.name}' refers to a layout of type ${layout.type}, expected ${layoutType}. Leave 'layoutId' undefined, if you want to use the layout in '${AppShell_default.name}' as reference layout.`);
   }
-  const controlButton = import_react15.useMemo(() => /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(ControlButton, {
+  const controlButton = import_react14.useMemo(() => /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(ControlButton, {
     icon: pinned ? import_icons_react8.IconPinnedOff : import_icons_react8.IconPin,
     tooltip: pinned ? "Unpin" : "Pin",
     color: "green",
@@ -7108,7 +7140,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 +7151,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),
@@ -7142,7 +7174,7 @@ function Pinnable({
 }
 
 // src/core/components/Widget/WidgetWrapper/index.tsx
-var import_lodash4 = __toESM(require_lodash());
+var import_lodash14 = __toESM(require_lodash());
 var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
   config,
@@ -7164,11 +7196,11 @@ function WidgetWrapper({
   const page = usePage();
   const theme = useRemoraidTheme();
   const mounted = page !== null && isWidgetSelected(page.pageId, config.widgetId);
-  const [controlsContainer, setControlsContainer] = import_react16.useState(null);
-  const [hidden, setHidden] = import_react16.useState(!mounted);
+  const [controlsContainer, setControlsContainer] = import_react15.useState(null);
+  const [hidden, setHidden] = import_react15.useState(!mounted);
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  const containerRef = import_react16.useRef(null);
-  const controlsContainerRef = import_react16.useCallback((n) => {
+  const containerRef = import_react15.useRef(null);
+  const controlsContainerRef = import_react15.useCallback((n) => {
     setControlsContainer(n);
   }, [setControlsContainer]);
   const handleEnter = () => {
@@ -7177,7 +7209,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 +7219,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",
@@ -7208,7 +7240,7 @@ function WidgetWrapper({
         }
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash4.merge(transitionStyle, componentsProps?.container?.style),
+      style: import_lodash14.merge(transitionStyle, componentsProps?.container?.style),
       id: config.widgetId,
       children: [
         /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Controls, {
@@ -7272,7 +7304,7 @@ function WidgetWrapper({
       children: element
     }, undefined, false, undefined, this);
   }
-  import_react16.useEffect(() => {
+  import_react15.useEffect(() => {
     if (!page) {
       return;
     }
@@ -7280,7 +7312,7 @@ function WidgetWrapper({
       registerWidget(page.pageId, config);
     }
   }, [pageRegistered]);
-  import_react16.useEffect(() => {
+  import_react15.useEffect(() => {
     if (mounted) {
       const id = requestAnimationFrame(() => {
         setHidden(false);
@@ -7293,7 +7325,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,18 +7361,19 @@ 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",
+                size: "h2",
                 lineClamp: 1,
+                ...componentsProps?.title,
                 children: title ?? id
               }, undefined, false, undefined, this),
               badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
@@ -7350,7 +7383,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 +7398,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 +7417,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 +7428,6 @@ function Widget({
   }, undefined, true, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
-var import_core20 = require("@mantine/core");
 var import_navigation3 = require("next/navigation");
 var jsx_dev_runtime27 = require("react/jsx-dev-runtime");
 function NotFoundPage({
@@ -7404,13 +7436,12 @@ function NotFoundPage({
   componentsProps
 }) {
   const pathname = import_navigation3.usePathname();
-  const theme = useRemoraidTheme();
   return /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Alert, {
-        ...theme.alertProps.negative,
+      /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(AlertMinimal, {
+        category: "negative" /* Negative */,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
       }, undefined, false, undefined, this),
@@ -7419,48 +7450,54 @@ function NotFoundPage({
   }, undefined, true, undefined, this);
 }
 // src/core/components/EnvironmentShell/index.tsx
-var import_core21 = require("@mantine/core");
 var jsx_dev_runtime28 = require("react/jsx-dev-runtime");
+var EnvironmentShellVariant;
+((EnvironmentShellVariant2) => {
+  EnvironmentShellVariant2["Alert"] = "alert";
+  EnvironmentShellVariant2["Error"] = "error";
+  EnvironmentShellVariant2["Silent"] = "silent";
+})(EnvironmentShellVariant ||= {});
 function EnvironmentShell({
-  children,
   environment,
+  variant = "alert" /* Alert */,
   message,
-  m,
-  mt,
-  withContainer,
-  componentsProps
+  includeAlertContainer = false,
+  componentsProps,
+  children
 }) {
-  const theme = useRemoraidTheme();
   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, {
-    ...theme.alertProps.neutral,
-    title: alertTitle,
-    m,
-    mt,
-    children: message ?? alertMessage
+  const defaultMessage = `Components could not be rendered because the following environment variable${undefinedKeys.length > 1 ? "s" : ""} are not specified: ${undefinedKeys.join(", ")}.`;
+  const alertElement = /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(AlertMinimal, {
+    mounted: undefinedKeys.length > 0,
+    title: `Please specify environment variable${undefinedKeys.length > 1 ? "s" : ""}`,
+    category: "negative" /* Negative */,
+    text: message ?? defaultMessage,
+    ...componentsProps?.alert
   }, undefined, false, undefined, this);
   if (undefinedKeys.length === 0) {
-    return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(jsx_dev_runtime28.Fragment, {
-      children
-    }, undefined, false, undefined, this);
+    return children;
   }
-  if (withContainer) {
-    return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(PageContainer, {
-      componentsProps: { container: componentsProps?.container },
-      children: alert
-    }, undefined, false, undefined, this);
+  if (variant === "alert" /* Alert */) {
+    if (includeAlertContainer) {
+      return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(PageContainer, {
+        ...componentsProps?.alertContainer,
+        children: alertElement
+      }, undefined, false, undefined, this);
+    }
+    return alertElement;
+  }
+  if (variant === "error" /* Error */) {
+    throw new ReferenceError(message ?? defaultMessage);
   }
-  return alert;
+  return null;
 }
 // src/core/components/SettingsWidget/index.tsx
-var import_react17 = require("react");
+var import_react16 = require("react");
 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_core21 = require("@mantine/core");
 var jsx_dev_runtime29 = require("react/jsx-dev-runtime");
 function SaveButton({
   onSaveChanges,
@@ -7483,7 +7520,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_core21.Group, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -7497,9 +7534,9 @@ function SaveButton({
 // src/core/components/SettingsWidget/index.tsx
 var jsx_dev_runtime30 = require("react/jsx-dev-runtime");
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = import_react17.createContext(defaultSettingsWidgetContext);
+var settingsWidgetContext = import_react16.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return import_react17.useContext(settingsWidgetContext);
+  return import_react16.useContext(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -7513,7 +7550,6 @@ function SettingsWidget({
     children: /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(Widget, {
       title: "Settings",
       id: "settings",
-      mt: "md",
       ...widgetProps,
       buttons: [
         ...onRestoreDefaultValues ? [
@@ -7546,27 +7582,27 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var import_react18 = require("react");
-var import_core24 = require("@mantine/core");
+var import_react17 = require("react");
+var import_core23 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
-var import_core23 = require("@mantine/core");
+var import_core22 = 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_core22.Table.Tr, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Table.Th, {
+      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core22.Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core22.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_core22.Table.Td, {
         py: "xs",
         children
       }, undefined, false, undefined, this)
@@ -7579,9 +7615,9 @@ var jsx_dev_runtime32 = require("react/jsx-dev-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = import_react18.createContext(defaultSettingsTableOptions);
+var settingsTableOptionsContext = import_react17.createContext(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return import_react18.useContext(settingsTableOptionsContext);
+  return import_react17.useContext(settingsTableOptionsContext);
 };
 function SettingsTable({
   leftColumnWidth,
@@ -7593,12 +7629,12 @@ function SettingsTable({
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core24.Table, {
+    children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core23.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_core23.Table.Tbody, {
         children
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -7608,8 +7644,8 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash5 = __toESM(require_lodash());
-var import_core25 = require("@mantine/core");
+var import_lodash15 = __toESM(require_lodash());
+var import_core24 = require("@mantine/core");
 var import_icons_react12 = require("@tabler/icons-react");
 var jsx_dev_runtime33 = require("react/jsx-dev-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
@@ -7634,13 +7670,13 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash5.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash15.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default, {
       ...componentsProps?.table,
       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_core24.Chip.Group, {
             multiple: true,
             value: app.navigablePages.filter((p) => !userExperience.navbar.hiddenPages.includes(p.href)).map((p) => p.href),
             onChange: (newValue) => {
@@ -7652,18 +7688,20 @@ function NavbarSettingsWidget({
                 }
               }));
             },
-            children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core25.Group, {
+            children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core24.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, {
-                value: p.href,
-                icon: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(p.icon, {
-                  ...theme.iconProps.tiny,
-                  color: theme.primaryColor
-                }, undefined, false, undefined, this),
-                variant: "outline",
-                children: p.label
-              }, i, false, undefined, this))
+              children: app.navigablePages.map(({ label, href, icon: Icon4 = import_icons_react12.IconLink }, i) => {
+                return /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core24.Chip, {
+                  value: href,
+                  icon: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(Icon4, {
+                    ...theme.componentsProps.icons.small,
+                    color: "var(--mantine-primary-color-filled)"
+                  }, undefined, false, undefined, this),
+                  variant: "outline",
+                  children: label
+                }, i, false, undefined, this);
+              })
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         }, "select-hidden-pages", false, undefined, this),
@@ -7680,7 +7718,7 @@ function NavbarSettingsWidget({
   }, undefined, false, undefined, this);
 }
 // src/core/components/ContextClusterProvider/index.tsx
-var import_react19 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var jsx_dev_runtime34 = require("react/jsx-dev-runtime");
 var createContextCluster = (generalDefaultValue, staticIds) => {
   const isStaticId = (id) => {
@@ -7692,16 +7730,16 @@ var createContextCluster = (generalDefaultValue, staticIds) => {
   const contexts = {};
   const defaultValues = {};
   const createContext8 = (id, defaultValue) => {
-    const context = import_react19.default.createContext(defaultValue ?? generalDefaultValue);
+    const context = import_react18.default.createContext(defaultValue ?? generalDefaultValue);
     contexts[id] = context;
     defaultValues[id] = defaultValue ?? generalDefaultValue;
     return context;
   };
   const useContext11 = (id) => {
     if (isStaticId(id)) {
-      return contexts[id] ? import_react19.default.useContext(contexts[id]) : generalDefaultValue;
+      return contexts[id] ? import_react18.default.useContext(contexts[id]) : generalDefaultValue;
     }
-    return contexts[id] ? import_react19.default.useContext(contexts[id]) : null;
+    return contexts[id] ? import_react18.default.useContext(contexts[id]) : null;
   };
   return {
     contexts,