remoraid 2.26.4 → 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,
@@ -5840,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) {
@@ -5901,30 +5904,6 @@ var createRemoraidTheme = (customTheme, dependencies) => {
           size: 12,
           stroke: 2.6
         }
-      },
-      ScrollArea: {
-        scrollbarSize: 8,
-        scrollHideDelay: 20,
-        type: "hover",
-        styles: { thumb: { zIndex: 5 } }
-      },
-      HoverCard: {
-        withArrow: true,
-        transitionProps: {
-          duration: transitionDurations.short
-        }
-      },
-      Tooltip: {
-        withArrow: true,
-        transitionProps: {
-          duration: transitionDurations.short
-        }
-      },
-      Menu: {
-        withArrow: true,
-        transitionProps: {
-          duration: transitionDurations.short
-        }
       }
     }
   };
@@ -6170,7 +6149,6 @@ function NavbarLink({
   href,
   indicator
 }) {
-  const theme = useRemoraidTheme();
   const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react9.useState(false);
   const iconProps = {
     size: iconSize,
@@ -6179,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, {
@@ -6207,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, {
@@ -6454,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 = () => {
@@ -6467,7 +6442,6 @@ function FrameLayout({
   componentsProps,
   children
 }) {
-  const theme = useRemoraidTheme();
   const { layouts, setLayouts } = useLayouts();
   const layout = layouts[layoutId];
   const defaultSections = import_react10.useMemo(() => ({
@@ -6569,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, {
@@ -6599,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 */ };
@@ -6652,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)
         ]
@@ -6720,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,
@@ -6730,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,
@@ -6752,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");
@@ -6762,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,
@@ -6783,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,
@@ -6793,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)
@@ -6807,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,
@@ -6886,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, {
@@ -6897,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) => {
@@ -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)"
                       }
@@ -7175,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,
@@ -7191,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,
@@ -7207,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({
@@ -7246,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, {
@@ -7255,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,
@@ -7279,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,
@@ -7296,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",
@@ -7310,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
@@ -7323,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,
@@ -7347,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,
@@ -7358,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,
@@ -7402,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,
@@ -7473,7 +7451,7 @@ function WidgetWrapper({
         }
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash15.merge(transitionStyle, { flexDirection: "column" }, 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: [
@@ -7557,7 +7535,6 @@ function WidgetWrapper({
 }
 // src/core/components/Widget/index.tsx
 var import_core20 = require("@mantine/core");
-var import_lodash16 = __toESM(require_lodash());
 var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
@@ -7577,7 +7554,6 @@ function Widget({
   const buttons = buttonsProp?.map((button) => asElementOrPropsOfType(RemoraidButton, button, "Check the 'buttons' property of this widget."));
   const alerts = alertsProp?.map((alert) => asElementOrPropsOfType(AlertMinimal, alert, "Check the 'alerts' property of this widget."));
   const badges = badgesProp?.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check the 'badges' property of this widget."));
-  const theme = useRemoraidTheme();
   const badgesGap = (typeof gaps === "object" ? gaps.badges : gaps) ?? "xs";
   const buttonsGap = (typeof gaps === "object" ? gaps.buttons : gaps) ?? "xs";
   const alertsGap = (typeof gaps === "object" ? gaps.alerts : gaps) ?? "xs";
@@ -7656,7 +7632,8 @@ function Widget({
           })
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.ScrollArea.Autosize, {
-          ...import_lodash16.merge(theme.componentsProps.ScrollArea, { flex: 1 }, componentsProps?.childrenContainer),
+          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
@@ -7884,7 +7861,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash17 = __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");
@@ -7910,7 +7887,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash17.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash13.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -8000,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);
+}

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren as PropsWithChildren6, ReactNode as ReactNode7 } from "react";
-import { HoverCardProps, MantineBreakpoint, MantineColorScheme, MantineSize, MantineTheme, MenuProps, ScrollAreaProps, TooltipProps } from "@mantine/core";
+import { MantineBreakpoint, MantineColorScheme, MantineSize, MantineTheme } from "@mantine/core";
 import { Icon as Icon2, IconProps as IconProps2 } from "@tabler/icons-react";
 import { ImageProps } from "next/image";
 import React2, { Dispatch, ReactNode as ReactNode2, SetStateAction } from "react";
@@ -116,10 +116,6 @@ interface RemoraidTheme {
 	componentsProps: {
 		icons: Record<RemoraidIconSize, Partial<IconProps2>>
 		alerts: Record<AlertCategory, Omit<Partial<AlertMinimalProps>, "category">>
-		ScrollArea: Partial<ScrollAreaProps>
-		HoverCard: Partial<HoverCardProps>
-		Tooltip: Partial<TooltipProps>
-		Menu: Partial<MenuProps>
 	};
 }
 interface RemoraidThemeDependencies {
@@ -183,6 +179,7 @@ declare const useWidgets: () => WidgetsContext;
 declare const useWidget: (pageId: string, widgetId: string) => WidgetContext | null;
 interface WidgetsProviderProps {}
 import { PartialDeep as PartialDeep2 } from "type-fest";
+declare const defaultTransitionDurations: RemoraidTheme["transitionDurations"];
 declare const createRemoraidTheme: (customTheme?: PartialDeep2<RemoraidTheme>, dependencies?: Partial<RemoraidThemeDependencies>) => RemoraidTheme;
 declare const getCssVars: (theme: RemoraidTheme) => Record<string, string>;
 declare const useRemoraidTheme: () => RemoraidTheme;
@@ -302,7 +299,7 @@ declare const asElementOrPropsOfType: <
 >(type: T, elementOrProps: ReactElement | P, additionalErrorMessage?: string) => ElementOrPropsOfType<T, P>;
 declare const getDefaultButtonIconSize: (buttonSize: MantineSize2) => RemoraidIconSize;
 declare const scrollToWidget: (widgetId: string) => void;
-import { GroupProps as GroupProps2, MantineSize as MantineSize4, ScrollAreaProps as ScrollAreaProps2, StackProps } from "@mantine/core";
+import { GroupProps as GroupProps2, MantineSize as MantineSize4, ScrollAreaProps, StackProps } from "@mantine/core";
 import { ComponentProps as ComponentProps2, PropsWithChildren as PropsWithChildren10, ReactNode as ReactNode13 } from "react";
 import { PropsWithChildren as PropsWithChildren9, ReactNode as ReactNode12 } from "react";
 import { BoxProps } from "@mantine/core";
@@ -343,7 +340,7 @@ interface FrameLayoutProps {
 			[FrameLayoutSection.Bottom]?: Partial<StackProps>
 			[FrameLayoutSection.Content]?: Partial<StackProps>
 		}
-		ScrollArea?: Partial<ScrollAreaProps2>
+		ScrollArea?: Partial<ScrollAreaProps>
 	};
 }
 declare function FrameLayout({ layoutId, includeScrollArea, gutter, componentsProps, children }: PropsWithChildren10<FrameLayoutProps>): ReactNode13;
@@ -415,9 +412,9 @@ declare function UserExperienceProviderWrapper<T extends UserExperience>({ child
 declare const defaultUserExperience: CoreUserExperience;
 declare const defaultUserExperienceCookieName = "remoraid-core-user-experience";
 declare const useRemoraidUserExperience: () => UserExperienceContext<CoreUserExperience>;
-import { ChipProps, FlexProps as FlexProps2, MenuProps as MenuProps2, TextProps } from "@mantine/core";
+import { ChipProps, FlexProps as FlexProps2, MenuProps, TextProps } from "@mantine/core";
 import { ReactNode as ReactNode21 } from "react";
-import { ChipGroupProps, FlexProps, MantineSize as MantineSize5, ScrollAreaProps as ScrollAreaProps3 } from "@mantine/core";
+import { ChipGroupProps, FlexProps, MantineSize as MantineSize5, ScrollAreaProps as ScrollAreaProps2 } from "@mantine/core";
 import { PropsWithChildren as PropsWithChildren14, ReactNode as ReactNode17, RefObject } from "react";
 interface ScrollableChipGroupProps {
 	value: string[];
@@ -427,13 +424,13 @@ interface ScrollableChipGroupProps {
 	componentsProps?: {
 		chipGroup?: Partial<ChipGroupProps<true>>
 		container?: Partial<FlexProps>
-		ScrollArea?: Partial<ScrollAreaProps3>
+		ScrollArea?: Partial<ScrollAreaProps2>
 	};
 }
 declare function ScrollableChipGroup2({ value, ref, onChange, gap, componentsProps, children }: PropsWithChildren14<ScrollableChipGroupProps>): ReactNode17;
 import { ComponentProps as ComponentProps5, PropsWithChildren as PropsWithChildren15, ReactNode as ReactNode20 } from "react";
 import { Box } from "@mantine/core";
-import { ActionIcon as ActionIcon2, ActionIconProps, TooltipProps as TooltipProps2, TransitionProps as TransitionProps2 } from "@mantine/core";
+import { ActionIcon as ActionIcon2, ActionIconProps, TooltipProps, TransitionProps as TransitionProps2 } from "@mantine/core";
 import { Icon as Icon4, IconProps as IconProps4 } from "@tabler/icons-react";
 import { ComponentProps as ComponentProps4, ReactNode as ReactNode18 } from "react";
 interface ControlButtonProps {
@@ -447,7 +444,7 @@ interface ControlButtonProps {
 	order?: number;
 	componentsProps?: {
 		transition?: Partial<TransitionProps2>
-		tooltip?: Partial<TooltipProps2>
+		tooltip?: Partial<TooltipProps>
 		button?: Partial<ActionIconProps>
 		icon?: Partial<IconProps4>
 	};
@@ -495,7 +492,7 @@ interface WidgetSelectionHeaderProps {
 	disabledWidgets?: string[];
 	componentsProps?: {
 		container?: Partial<FlexProps2>
-		widgetMenu?: Partial<MenuProps2>
+		widgetMenu?: Partial<MenuProps>
 		title?: Partial<TextProps>
 		ScrollableChipGroup?: Partial<ScrollableChipGroupProps>
 		Chip?: Partial<ChipProps>
@@ -503,9 +500,9 @@ interface WidgetSelectionHeaderProps {
 	};
 }
 declare function WidgetSelectionHeader({ title, pinnableSection, initiallyPinned, disabledWidgets, componentsProps }: WidgetSelectionHeaderProps): ReactNode21;
-import { BadgeProps as BadgeProps2, GroupProps as GroupProps4, HoverCardProps as HoverCardProps2, MantineBreakpoint as MantineBreakpoint2, MantineSize as MantineSize7, StackProps as StackProps2, TransitionProps as TransitionProps5 } from "@mantine/core";
+import { BadgeProps as BadgeProps2, GroupProps as GroupProps4, HoverCardProps, MantineBreakpoint as MantineBreakpoint2, MantineSize as MantineSize7, StackProps as StackProps2, TransitionProps as TransitionProps5 } from "@mantine/core";
 import { ReactNode as ReactNode23 } from "react";
-import { BadgeProps, TooltipProps as TooltipProps3, TransitionProps as TransitionProps4 } from "@mantine/core";
+import { BadgeProps, TooltipProps as TooltipProps2, TransitionProps as TransitionProps4 } from "@mantine/core";
 import { ReactNode as ReactNode22 } from "react";
 interface BadgeMinimalProps {
 	label: string;
@@ -514,7 +511,7 @@ interface BadgeMinimalProps {
 	componentsProps?: {
 		badge?: BadgeProps
 		transition?: Partial<Omit<TransitionProps4, "mounted">>
-		tooltip?: TooltipProps3
+		tooltip?: TooltipProps2
 	};
 }
 declare function BadgeMinimal({ label, tooltip, mounted, componentsProps }: BadgeMinimalProps): ReactNode22;
@@ -524,14 +521,14 @@ interface BadgeGroupProps {
 	breakpoint?: MantineBreakpoint2;
 	componentsProps?: {
 		container?: Partial<Omit<GroupProps4, "visibleFrom">>
-		HoverCard?: Partial<HoverCardProps2>
+		HoverCard?: Partial<HoverCardProps>
 		hoverContainer?: Partial<StackProps2>
 		cumulativeBadge?: Partial<Omit<BadgeProps2, "hiddenFrom">>
 		cumulativeBadgeTransition?: Partial<TransitionProps5>
 	};
 }
 declare function BadgeGroup({ badges: badgesProp, gap, breakpoint: breakpointProp, componentsProps }: BadgeGroupProps): ReactNode23;
-import { ActionIconProps as ActionIconProps2, ActionIconVariant, ButtonProps, ButtonVariant, MantineBreakpoint as MantineBreakpoint3, MantineColor, MantineSize as MantineSize8, TooltipProps as TooltipProps4, TransitionProps as TransitionProps6 } from "@mantine/core";
+import { ActionIconProps as ActionIconProps2, ActionIconVariant, ButtonProps, ButtonVariant, MantineBreakpoint as MantineBreakpoint3, MantineColor, MantineSize as MantineSize8, TooltipProps as TooltipProps3, TransitionProps as TransitionProps6 } from "@mantine/core";
 import { Icon as Icon5, IconProps as IconProps6 } from "@tabler/icons-react";
 import { ReactNode as ReactNode24 } from "react";
 type RemoraidButtonDefaultResponsivity = true;
@@ -549,7 +546,7 @@ interface ExplicitRemoraidButtonProps<Responsive extends boolean> {
 	variant?: Extract<ButtonVariant, ActionIconVariant>;
 	mounted?: TransitionProps6["mounted"];
 	componentsProps?: {
-		tooltip?: Partial<TooltipProps4>
+		tooltip?: Partial<TooltipProps3>
 		icon?: Partial<IconProps6>
 		button?: Omit<Partial<Common<ButtonProps, ActionIconProps2>>, "variant" | "onClick" | "size" | "color" | "loading">
 		transition?: Partial<Omit<TransitionProps6, "mounted">>
@@ -712,4 +709,17 @@ declare function ContextClusterProvider<
 	Context,
 	StaticID extends string = never
 >({ cluster, values, children }: PropsWithChildren23<ContextClusterProviderProps<Context, StaticID>>): ReactNode35;
-export { useWidgets, useWidget, useSettingsWidgetContext as useSettingsWidgetOptions, useSettingsTableOptions, useRemoraidUserExperience, useRemoraidTheme, useRemoraidApp, usePage, useLayouts, useHydrationStatus, useHydratedMantineColorScheme, useFrameLayout, scrollToWidget, remoraidAppShellLayoutId, isValidElementOfType, getElementTypeName, getDefaultWidgetContext, getDefaultButtonIconSize, getCssVars, defaultUserExperienceCookieName, defaultUserExperience, defaultSettingsWidgetContext as defaultSettingsWidgetOptions, defaultSettingsTableOptions, defaultNavbarSettingsWidgetId, defaultLayoutsContext, defaultAppShellNavbarPositions, defaultAppShellFooterPositions, defaultAppContext, createUserExperienceContext, createRemoraidTheme, createContextCluster, co, asElementOrPropsOfType, asElementOfType, asChildrenOfType, WidgetsProviderProps, WidgetsContext, WidgetWrapperProps, WidgetWrapper, WidgetSelectionHeaderProps, WidgetSelectionHeader, WidgetProps, WidgetContext, WidgetConfiguration, Widget, UserExperienceProviderWrapperProps, UserExperienceProviderWrapper, UserExperienceProviderProps, UserExperienceContext, UserExperience, TransitionDuration, ThemeProviderProps, StaticRemoraidAppContext, SettingsWidgetSaveButtonProps, SettingsWidgetProps, SettingsWidgetContext, _default3 as SettingsWidget, SettingsTableRowProps, SettingsTableOptions, _default4 as SettingsTable, ScrollableChipGroupProps as ScrollbleChipGroupProps, ScrollableChipGroup2 as ScrollableChipGroup, RemoraidUser, RemoraidThemeDependencies, RemoraidThemeCallback, RemoraidTheme, RemoraidProviderProps, RemoraidProvider, RemoraidIconSize, RemoraidButtonProps, RemoraidButtonDefaultResponsivity, RemoraidButton, RemoraidBreakpoint, RemoraidAuthContext, RemoraidAppContext, PropsWithChildrenOfType, PrimitiveUserExperience, PinnableProps, PinnableDefaultLayoutType, Pinnable2 as Pinnable, PageProps, PageContainerProps, PageContainer2 as PageContainer, PageConfiguration, Page, OptionalIfExtends, Optional, NotFoundPageProps, NotFoundPage, NavbarVariant, NavbarSettingsWidgetProps, NavbarSettingsWidget, NavbarMinimalProps, LayoutsProviderProps, LayoutsContext, LayoutType, LayoutSection, LayoutContext, HydrationStatusProviderProps, HydrationStatusProvider, HydrationStatus, FrameLayoutSection, FrameLayoutProps, FrameLayoutElementProps, _default as FrameLayout, FooterVariant, FooterMinimalProps, EnvironmentShellVariant, EnvironmentShellProps, EnvironmentShell, ElementOrPropsOfType, ElementOfType, DefaultNavbarVariant, DefaultFooterVariant, CustomAppVariables, CoreUserExperience, ControlsProps, Controls, ControlButtonProps, ControlButton, ContextClusterProviderProps, ContextClusterProvider, ContextCluster, Common, ChildrenOfType, BadgeMinimalProps, BadgeMinimal, BadgeGroupProps, BadgeGroup, AppShellProps, AppShellNavbarVariant, AppShellNavbarPosition, AppShellFooterVariant, AppShellFooterPosition, _default2 as AppShell, AppProviderProps, AppProvider2 as AppProvider, AppLogo, AppContextProps, AlertMinimalProps, AlertMinimal, AlertCategory };
+import { BoxProps as BoxProps3, InputWrapperProps, ScrollAreaProps as ScrollAreaProps3 } from "@mantine/core";
+import { PropsWithChildren as PropsWithChildren24, ReactNode as ReactNode36 } from "react";
+interface InputWrapperScrollAreaProps {
+	label?: string;
+	mah?: number;
+	error?: ReactNode36;
+	componentsProps?: {
+		container?: Partial<InputWrapperProps>
+		ScrollArea?: Partial<ScrollAreaProps3>
+		childrenContainer?: Partial<BoxProps3>
+	};
+}
+declare function InputWrapperScrollArea({ children, label, mah, error, componentsProps }: PropsWithChildren24<InputWrapperScrollAreaProps>): ReactNode36;
+export { useWidgets, useWidget, useSettingsWidgetContext as useSettingsWidgetOptions, useSettingsTableOptions, useRemoraidUserExperience, useRemoraidTheme, useRemoraidApp, usePage, useLayouts, useHydrationStatus, useHydratedMantineColorScheme, useFrameLayout, scrollToWidget, remoraidAppShellLayoutId, isValidElementOfType, getElementTypeName, getDefaultWidgetContext, getDefaultButtonIconSize, getCssVars, defaultUserExperienceCookieName, defaultUserExperience, defaultTransitionDurations, defaultSettingsWidgetContext as defaultSettingsWidgetOptions, defaultSettingsTableOptions, defaultNavbarSettingsWidgetId, defaultLayoutsContext, defaultAppShellNavbarPositions, defaultAppShellFooterPositions, defaultAppContext, createUserExperienceContext, createRemoraidTheme, createContextCluster, co, asElementOrPropsOfType, asElementOfType, asChildrenOfType, WidgetsProviderProps, WidgetsContext, WidgetWrapperProps, WidgetWrapper, WidgetSelectionHeaderProps, WidgetSelectionHeader, WidgetProps, WidgetContext, WidgetConfiguration, Widget, UserExperienceProviderWrapperProps, UserExperienceProviderWrapper, UserExperienceProviderProps, UserExperienceContext, UserExperience, TransitionDuration, ThemeProviderProps, StaticRemoraidAppContext, SettingsWidgetSaveButtonProps, SettingsWidgetProps, SettingsWidgetContext, _default3 as SettingsWidget, SettingsTableRowProps, SettingsTableOptions, _default4 as SettingsTable, ScrollableChipGroupProps, ScrollableChipGroup2 as ScrollableChipGroup, RemoraidUser, RemoraidThemeDependencies, RemoraidThemeCallback, RemoraidTheme, RemoraidProviderProps, RemoraidProvider, RemoraidIconSize, RemoraidButtonProps, RemoraidButtonDefaultResponsivity, RemoraidButton, RemoraidBreakpoint, RemoraidAuthContext, RemoraidAppContext, PropsWithChildrenOfType, PrimitiveUserExperience, PinnableProps, PinnableDefaultLayoutType, Pinnable2 as Pinnable, PageProps, PageContainerProps, PageContainer2 as PageContainer, PageConfiguration, Page, OptionalIfExtends, Optional, NotFoundPageProps, NotFoundPage, NavbarVariant, NavbarSettingsWidgetProps, NavbarSettingsWidget, NavbarMinimalProps, LayoutsProviderProps, LayoutsContext, LayoutType, LayoutSection, LayoutContext, InputWrapperScrollAreaProps, InputWrapperScrollArea, HydrationStatusProviderProps, HydrationStatusProvider, HydrationStatus, FrameLayoutSection, FrameLayoutProps, FrameLayoutElementProps, _default as FrameLayout, FooterVariant, FooterMinimalProps, EnvironmentShellVariant, EnvironmentShellProps, EnvironmentShell, ElementOrPropsOfType, ElementOfType, DefaultNavbarVariant, DefaultFooterVariant, CustomAppVariables, CoreUserExperience, ControlsProps, Controls, ControlButtonProps, ControlButton, ContextClusterProviderProps, ContextClusterProvider, ContextCluster, Common, ChildrenOfType, BadgeMinimalProps, BadgeMinimal, BadgeGroupProps, BadgeGroup, AppShellProps, AppShellNavbarVariant, AppShellNavbarPosition, AppShellFooterVariant, AppShellFooterPosition, _default2 as AppShell, AppProviderProps, AppProvider2 as AppProvider, AppLogo, AppContextProps, AlertMinimalProps, AlertMinimal, AlertCategory };