remoraid 2.23.10 → 2.28.2

package/dist/core/index.cjs

@@ -5481,6 +5481,7 @@ __export(exports_core, {
   getCssVars: () => getCssVars,
   defaultUserExperienceCookieName: () => defaultUserExperienceCookieName,
   defaultUserExperience: () => defaultUserExperience,
+  defaultTransitionDurations: () => defaultTransitionDurations,
   defaultSettingsWidgetOptions: () => defaultSettingsWidgetContext,
   defaultSettingsTableOptions: () => defaultSettingsTableOptions,
   defaultNavbarSettingsWidgetId: () => defaultNavbarSettingsWidgetId,
@@ -5514,6 +5515,7 @@ __export(exports_core, {
   NavbarVariant: () => NavbarVariant,
   NavbarSettingsWidget: () => NavbarSettingsWidget,
   LayoutType: () => LayoutType,
+  InputWrapperScrollArea: () => InputWrapperScrollArea,
   HydrationStatusProvider: () => HydrationStatusProvider,
   FrameLayoutSection: () => FrameLayoutSection,
   FrameLayout: () => FrameLayout_default,
@@ -5603,9 +5605,15 @@ function WidgetsProvider({
         if (!widget) {
           continue;
         }
+        const selected = selectedWidgetIds.includes(widgetId);
+        const selectionChanged = widget.selected !== selected;
+        if (!selectionChanged) {
+          updatedPage[widgetId] = widget;
+          continue;
+        }
         updatedPage[widgetId] = {
           ...widget,
-          selected: selectedWidgetIds.includes(widgetId),
+          selected,
           hidden: false
         };
       }
@@ -5834,13 +5842,14 @@ 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 defaultTransitionDurations = {
+  ["short" /* Short */]: 200,
+  ["medium" /* Medium */]: 350,
+  ["long" /* Long */]: 500
+};
 var createRemoraidTheme = (customTheme, dependencies) => {
   const { mantineTheme, colorScheme } = dependencies ?? {};
-  const transitionDurations = import_lodash2.merge({
-    ["short" /* Short */]: 200,
-    ["medium" /* Medium */]: 350,
-    ["long" /* Long */]: 500
-  }, customTheme?.transitionDurations);
+  const transitionDurations = import_lodash2.merge(defaultTransitionDurations, 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) {
@@ -5895,38 +5904,6 @@ var createRemoraidTheme = (customTheme, dependencies) => {
           size: 12,
           stroke: 2.6
         }
-      },
-      ScrollArea: {
-        scrollbarSize: 8,
-        scrollHideDelay: 20,
-        type: "hover"
-      },
-      HoverCard: {
-        shadow: "md",
-        withArrow: true,
-        transitionProps: {
-          transition: "pop",
-          duration: transitionDurations.short
-        },
-        styles: {
-          dropdown: { border: "none", background: transparentBackground },
-          arrow: { border: "none" }
-        }
-      },
-      Tooltip: {
-        withArrow: true
-      },
-      Menu: {
-        shadow: "md",
-        withArrow: true,
-        transitionProps: {
-          transition: "pop",
-          duration: transitionDurations.short
-        },
-        styles: {
-          dropdown: { border: "none", background: transparentBackground },
-          arrow: { border: "none" }
-        }
       }
     }
   };
@@ -6172,7 +6149,6 @@ function NavbarLink({
   href,
   indicator
 }) {
-  const theme = useRemoraidTheme();
   const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react9.useState(false);
   const iconProps = {
     size: iconSize,
@@ -6181,7 +6157,6 @@ 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",
       children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.UnstyledButton, {
@@ -6209,7 +6184,6 @@ 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",
     children: indicator === undefined ? button : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(import_core3.Indicator, {
@@ -6456,7 +6430,6 @@ 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 = () => {
@@ -6469,7 +6442,6 @@ function FrameLayout({
   componentsProps,
   children
 }) {
-  const theme = useRemoraidTheme();
   const { layouts, setLayouts } = useLayouts();
   const layout = layouts[layoutId];
   const defaultSections = import_react10.useMemo(() => ({
@@ -6571,7 +6543,7 @@ function FrameLayout({
             }, undefined, false, undefined, this),
             includeScrollArea ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.ScrollArea, {
               flex: 1,
-              ...import_lodash5.merge({}, theme.componentsProps.ScrollArea, componentsProps?.ScrollArea),
+              ...componentsProps?.ScrollArea,
               children: contentSection
             }, undefined, false, undefined, this) : contentSection,
             /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Stack, {
@@ -6601,7 +6573,7 @@ var FrameLayout_default = Object.assign(FrameLayout, {
 });
 
 // src/core/components/AppShell/index.tsx
-var import_lodash6 = __toESM(require_lodash());
+var import_lodash5 = __toESM(require_lodash());
 var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
 var remoraidAppShellLayoutId = "remoraid-app-shell";
 var defaultAppShellNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
@@ -6654,13 +6626,13 @@ function AppShell({
           navbarPosition !== null && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default.Element, {
             section: navbarPosition,
             includeContainer: false,
-            ...import_lodash6.merge(navbarLayoutElementProps, componentsProps?.navbarLayoutElement),
+            ...import_lodash5.merge(navbarLayoutElementProps, componentsProps?.navbarLayoutElement),
             children: navbar
           }, undefined, false, undefined, this),
           children,
           footerPosition !== null && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default.Element, {
             section: footerPosition,
-            ...import_lodash6.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
+            ...import_lodash5.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
             children: footer
           }, undefined, false, undefined, this)
         ]
@@ -6722,7 +6694,6 @@ var import_react14 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core10 = require("@mantine/core");
-var import_lodash7 = __toESM(require_lodash());
 var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 function ScrollableChipGroup({
   value,
@@ -6732,10 +6703,10 @@ function ScrollableChipGroup({
   componentsProps,
   children
 }) {
-  const theme = useRemoraidTheme();
   return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.ScrollArea, {
     ref,
-    ...import_lodash7.merge({}, theme.componentsProps.ScrollArea, { style: { contain: "inline-size" } }, componentsProps?.ScrollArea),
+    ...componentsProps?.ScrollArea,
+    style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
     children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Chip.Group, {
       value,
       onChange,
@@ -6754,7 +6725,7 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_lodash10 = __toESM(require_lodash());
+var import_lodash8 = __toESM(require_lodash());
 
 // src/core/components/Pinnable/index.tsx
 var import_react13 = require("react");
@@ -6764,7 +6735,7 @@ var import_core13 = require("@mantine/core");
 // src/core/components/Controls/ControlButton/index.tsx
 var import_core11 = require("@mantine/core");
 var import_icons_react4 = require("@tabler/icons-react");
-var import_lodash8 = __toESM(require_lodash());
+var import_lodash6 = __toESM(require_lodash());
 var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
 function ControlButton({
   icon: Icon3 = import_icons_react4.IconClick,
@@ -6785,7 +6756,9 @@ function ControlButton({
     timingFunction: "ease",
     ...componentsProps?.transition,
     children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Tooltip, {
-      ...import_lodash8.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      label: tooltip,
+      disabled: !Boolean(tooltip),
+      ...componentsProps?.tooltip,
       children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.ActionIcon, {
         "data-control-button": true,
         size,
@@ -6795,10 +6768,10 @@ function ControlButton({
         ...componentsProps?.button,
         style: {
           order,
-          ...import_lodash8.merge(transitionStyle, componentsProps?.button?.style)
+          ...import_lodash6.merge(transitionStyle, componentsProps?.button?.style)
         },
         children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Icon3, {
-          ...import_lodash8.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+          ...import_lodash6.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -6809,7 +6782,7 @@ function ControlButton({
 var import_react12 = require("react");
 var import_core12 = require("@mantine/core");
 var import_icons_react5 = require("@tabler/icons-react");
-var import_lodash9 = __toESM(require_lodash());
+var import_lodash7 = __toESM(require_lodash());
 var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
 function Controls({
   groupRef,
@@ -6888,7 +6861,7 @@ function Controls({
       style: {
         right: pos.x,
         top: pos.y,
-        ...import_lodash9.merge(transitionStyle, componentsProps?.container?.style)
+        ...import_lodash7.merge(transitionStyle, componentsProps?.container?.style)
       },
       className: clsx_default("remoraid-controls", componentsProps?.container?.className),
       children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Group, {
@@ -6899,7 +6872,7 @@ function Controls({
         className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
         children: [
           /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_icons_react5.IconGripHorizontal, {
-            ...import_lodash9.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
+            ...import_lodash7.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) => {
@@ -6951,6 +6924,7 @@ function Pinnable({
     pos: "relative",
     ref: containerRef,
     "data-hidden": hidden,
+    h: "100%",
     ...componentsProps?.container,
     className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
     children: [
@@ -7002,6 +6976,7 @@ function WidgetSelectionHeader({
     throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
   const [hover, setHover] = import_react14.useState(false);
+  const [isPinned, setIsPinned] = import_react14.useState(initiallyPinned);
   const handleEnter = () => {
     setHover(true);
   };
@@ -7046,13 +7021,14 @@ function WidgetSelectionHeader({
           updateWidgetSelectionBulk(page.pageId, value);
           componentsProps?.ScrollableChipGroup?.onChange?.(value);
         },
-        componentsProps: import_lodash10.merge({ ScrollArea: { flex: 1 } }, componentsProps?.ScrollableChipGroup?.componentsProps),
+        componentsProps: import_lodash8.merge({ ScrollArea: { flex: 1 } }, componentsProps?.ScrollableChipGroup?.componentsProps),
         children: Object.entries(widgets).map(([widgetId, widget]) => {
           if (!widget) {
             return;
           }
           return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu, {
-            ...import_lodash10.merge({}, theme.componentsProps.Menu, { trigger: "hover" }, componentsProps?.widgetMenu),
+            trigger: "hover",
+            ...componentsProps?.widgetMenu,
             children: [
               /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Target, {
                 children: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Box, {
@@ -7066,7 +7042,7 @@ function WidgetSelectionHeader({
                       ...theme.componentsProps.icons.small
                     }, undefined, false, undefined, this),
                     ...componentsProps?.Chip,
-                    styles: import_lodash10.merge({
+                    styles: import_lodash8.merge({
                       label: {
                         transition: "background-color var(--remoraid-transition-duration-short)"
                       }
@@ -7078,9 +7054,6 @@ function WidgetSelectionHeader({
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Dropdown, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Label, {
-                    children: "Widget menu"
-                  }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Item, {
                     leftSection: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_icons_react7.IconNavigation, {
                       ...theme.componentsProps.icons.small
@@ -7115,7 +7088,13 @@ function WidgetSelectionHeader({
     if (!activeWidget) {
       return;
     }
-    const activeWidgetChipElement = scrollAreaRef?.current?.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
+    if (!isPinned) {
+      return;
+    }
+    if (!scrollAreaRef?.current) {
+      return;
+    }
+    const activeWidgetChipElement = scrollAreaRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
     if (!activeWidgetChipElement) {
       return;
     }
@@ -7146,6 +7125,7 @@ function WidgetSelectionHeader({
         button: {
           ...componentsProps?.Pinnable?.componentsProps?.button,
           onClick: (e) => {
+            setIsPinned(!isPinned);
             handleLeave();
             componentsProps?.Pinnable?.componentsProps?.button?.onClick?.(e);
           }
@@ -7171,7 +7151,6 @@ var import_react15 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
 var import_core15 = require("@mantine/core");
-var import_lodash11 = __toESM(require_lodash());
 var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
 function BadgeMinimal({
   label,
@@ -7187,7 +7166,9 @@ function BadgeMinimal({
     timingFunction: "ease",
     ...componentsProps?.transition,
     children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Tooltip, {
-      ...import_lodash11.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      label: tooltip,
+      disabled: !Boolean(tooltip),
+      ...componentsProps?.tooltip,
       children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Badge, {
         variant: "default",
         ...componentsProps?.badge,
@@ -7203,7 +7184,7 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var import_lodash12 = __toESM(require_lodash());
+var import_lodash9 = __toESM(require_lodash());
 var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
 var react = require("react");
 function BadgeGroup({
@@ -7242,7 +7223,7 @@ function BadgeGroup({
         timingFunction: "ease",
         ...componentsProps?.cumulativeBadgeTransition,
         children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.HoverCard, {
-          ...import_lodash12.merge({}, theme.componentsProps.HoverCard, componentsProps?.HoverCard),
+          ...componentsProps?.HoverCard,
           children: [
             /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.HoverCard.Target, {
               children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Badge, {
@@ -7251,7 +7232,7 @@ function BadgeGroup({
                 ...componentsProps?.cumulativeBadge,
                 style: {
                   cursor: "pointer",
-                  ...import_lodash12.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                  ...import_lodash9.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
                 },
                 children: [
                   numVisibleBadges,
@@ -7275,7 +7256,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 var import_core17 = require("@mantine/core");
-var import_lodash13 = __toESM(require_lodash());
+var import_lodash10 = __toESM(require_lodash());
 var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
 function AlertMinimal({
   category,
@@ -7292,7 +7273,7 @@ function AlertMinimal({
     icon: Icon3,
     iconSize = "medium" /* Medium */,
     componentsProps
-  } = import_lodash13.merge({}, theme.componentsProps.alerts[category], props);
+  } = import_lodash10.merge({}, theme.componentsProps.alerts[category], props);
   return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Transition, {
     mounted,
     transition: "fade",
@@ -7306,9 +7287,9 @@ function AlertMinimal({
       onClose,
       withCloseButton: onClose !== undefined,
       icon: Icon3 ? /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(Icon3, {
-        ...import_lodash13.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+        ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }, undefined, false, undefined, this) : undefined,
-      style: import_lodash13.merge(transitionStyle, componentsProps?.alert?.style),
+      style: import_lodash10.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
         children
@@ -7319,7 +7300,7 @@ function AlertMinimal({
 // src/core/components/RemoraidButton/index.tsx
 var import_core18 = require("@mantine/core");
 var import_icons_react8 = require("@tabler/icons-react");
-var import_lodash14 = __toESM(require_lodash());
+var import_lodash11 = __toESM(require_lodash());
 var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
 function RemoraidButton({
   label,
@@ -7343,7 +7324,7 @@ function RemoraidButton({
   const Icon4 = iconProp ?? import_icons_react8.IconClick;
   const theme = useRemoraidTheme();
   const iconElement = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(Icon4, {
-    ...import_lodash14.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+    ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   }, undefined, false, undefined, this);
   return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Transition, {
     mounted,
@@ -7354,7 +7335,8 @@ function RemoraidButton({
     children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(jsx_dev_runtime24.Fragment, {
       children: [
         /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Tooltip, {
-          ...import_lodash14.merge({}, theme.componentsProps.Tooltip, { label }, componentsProps?.tooltip),
+          label,
+          ...componentsProps?.tooltip,
           children: /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.ActionIcon, {
             "aria-label": label,
             variant,
@@ -7398,7 +7380,7 @@ function RemoraidButton({
 var import_core19 = require("@mantine/core");
 var import_react16 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
-var import_lodash15 = __toESM(require_lodash());
+var import_lodash12 = __toESM(require_lodash());
 var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
   config,
@@ -7433,8 +7415,9 @@ function WidgetWrapper({
   const handleLeave = () => {
     updateActiveWidget(null);
   };
+  const mounted = Boolean(widget?.selected);
   let element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Transition, {
-    mounted: Boolean(widget?.selected),
+    mounted,
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
     timingFunction: "ease",
@@ -7453,6 +7436,8 @@ function WidgetWrapper({
       mt,
       pos: "relative",
       h: "fit-content",
+      mah: "100%",
+      display: "flex",
       ...componentsProps?.container,
       onMouseEnter: (e) => {
         if (!pinnableSection) {
@@ -7466,7 +7451,7 @@ function WidgetWrapper({
         }
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash15.merge(transitionStyle, componentsProps?.container?.style),
+      style: import_lodash12.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
       className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
@@ -7482,6 +7467,13 @@ function WidgetWrapper({
             color: "red",
             order: 200,
             ...componentsProps?.closeButton,
+            componentsProps: {
+              ...componentsProps?.closeButton?.componentsProps,
+              tooltip: {
+                disabled: !mounted,
+                ...componentsProps?.closeButton?.componentsProps?.tooltip
+              }
+            },
             onClick: (e) => {
               if (!page) {
                 return;
@@ -7577,72 +7569,80 @@ function Widget({
     mt,
     ...componentsProps?.wrapper,
     pinnableSection: pinnableSection ?? componentsProps?.wrapper?.pinnableSection,
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-        justify: "space-between",
-        wrap: "nowrap",
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-            gap: badgesGap,
-            wrap: "nowrap",
-            children: [
-              /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
-                order: 1,
-                size: "h2",
-                lineClamp: 1,
-                ...componentsProps?.title,
-                children: title ?? id
-              }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
-                badges,
-                gap: badgesGap,
-                ...componentsProps?.badgeGroup
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-            gap: buttonsGap,
-            wrap: "nowrap",
-            children: buttons !== undefined && buttons.map((button, i) => {
-              if (isValidElementOfType(RemoraidButton, button)) {
-                return button;
-              }
-              return /* @__PURE__ */ react2.createElement(RemoraidButton, {
-                ...button,
-                key: i
-              });
-            })
+    children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
+      gap: "md",
+      mih: 0,
+      ...componentsProps?.contentContainer,
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
+          justify: "space-between",
+          wrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
+              gap: badgesGap,
+              wrap: "nowrap",
+              children: [
+                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
+                  order: 1,
+                  size: "h2",
+                  lineClamp: 1,
+                  ...componentsProps?.title,
+                  children: title ?? id
+                }, undefined, false, undefined, this),
+                badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
+                  badges,
+                  gap: badgesGap,
+                  ...componentsProps?.badgeGroup
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
+              gap: buttonsGap,
+              wrap: "nowrap",
+              children: buttons !== undefined && buttons.map((button, i) => {
+                if (isValidElementOfType(RemoraidButton, button)) {
+                  return button;
+                }
+                return /* @__PURE__ */ react2.createElement(RemoraidButton, {
+                  ...button,
+                  key: i
+                });
+              })
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Box, {
+          children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Divider, {
+            ...componentsProps?.divider
           }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Divider, {
-        my: "md",
-        ...componentsProps?.divider
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
-        align: "stretch",
-        gap: alertsGap,
-        mb: alerts && alerts.length > 0 ? "md" : 0,
-        ...componentsProps?.alertsContainer,
-        children: alerts?.map((alert, i) => {
-          if (isValidElementOfType(AlertMinimal, alert)) {
-            return alert;
-          }
-          return /* @__PURE__ */ react2.createElement(AlertMinimal, {
-            ...alert,
-            key: i
-          });
-        })
-      }, undefined, false, undefined, this),
-      loading ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Center, {
-        children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Loader, {
-          ...componentsProps?.loader
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
+          align: "stretch",
+          gap: alertsGap,
+          ...componentsProps?.alertsContainer,
+          className: clsx_default("remoraid-widget-alerts-container", componentsProps?.alertsContainer?.className),
+          children: alerts?.map((alert, i) => {
+            if (isValidElementOfType(AlertMinimal, alert)) {
+              return alert;
+            }
+            return /* @__PURE__ */ react2.createElement(AlertMinimal, {
+              ...alert,
+              key: i
+            });
+          })
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.ScrollArea.Autosize, {
+          flex: 1,
+          ...componentsProps?.childrenContainer,
+          children: 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) : children
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
-        children
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
 var import_navigation3 = require("next/navigation");
@@ -7861,7 +7861,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash16 = __toESM(require_lodash());
+var import_lodash13 = __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");
@@ -7887,7 +7887,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash16.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash13.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -7916,6 +7916,7 @@ function NavbarSettingsWidget({
                     color: "var(--mantine-primary-color-filled)"
                   }, undefined, false, undefined, this),
                   variant: "outline",
+                  size: "sm",
                   children: label
                 }, i, false, undefined, this);
               })
@@ -7976,3 +7977,45 @@ function ContextClusterProvider({
     children: t
   }, undefined, false, undefined, this) : t, children);
 }
+// src/core/components/InputWrapperScrollArea/index.tsx
+var import_core25 = require("@mantine/core");
+var import_react20 = require("react");
+var jsx_dev_runtime35 = require("react/jsx-dev-runtime");
+function InputWrapperScrollArea({
+  children,
+  label,
+  mah,
+  error,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  const [isHovering, setIsHovering] = import_react20.useState(false);
+  return /* @__PURE__ */ jsx_dev_runtime35.jsxDEV(import_core25.Input.Wrapper, {
+    label,
+    error,
+    onMouseEnter: () => setIsHovering(true),
+    onMouseLeave: () => setIsHovering(false),
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsx_dev_runtime35.jsxDEV(import_core25.Paper, {
+      shadow: "none",
+      p: 0,
+      withBorder: true,
+      display: "flex",
+      bg: theme.transparentBackground,
+      style: {
+        transition: "border-color .1s",
+        borderColor: error ? "var(--mantine-color-error)" : isHovering ? "var(--mantine-primary-color-filled)" : undefined
+      },
+      children: /* @__PURE__ */ jsx_dev_runtime35.jsxDEV(import_core25.ScrollArea, {
+        mah,
+        px: "md",
+        flex: 1,
+        ...componentsProps?.ScrollArea,
+        children: /* @__PURE__ */ jsx_dev_runtime35.jsxDEV(import_core25.Box, {
+          ...componentsProps?.childrenContainer,
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}