remoraid 2.45.0 → 3.3.2

package/README.md

@@ -1,12 +1,31 @@
 # Usage
 
-`RemoraidProvider` must be rendered at the root of your application and should be used only once.
+Import Mantine and Remoraid styles once at the root of your application.
+Some subpackages require additional Mantine stylesheets:
+
+- `@mantine/dates/styles.css` when using `remoraid/jsonforms`
+- `@mantine/charts/styles.css` when using `remoraid/data-visualization`
 
 ```typescript
-import { RemoraidProvider } from "remoraid";
+import "@mantine/core/styles.css";
+import "@mantine/dates/styles.css";
+import "@mantine/charts/styles.css";
+import "remoraid/core/styles.css";
+```
+
+`RemoraidProvider` must be rendered inside `MantineProvider` at the root of
+your application and should be used only once.
+
+```tsx
+import { MantineProvider } from "@mantine/core";
+import { RemoraidProvider } from "remoraid/core";
 
 function Demo() {
-  return <RemoraidProvider>{/_ Your app here _/}</RemoraidProvider>;
+  return (
+    <MantineProvider>
+      <RemoraidProvider>{/* Your app here */}</RemoraidProvider>
+    </MantineProvider>
+  );
 }
 ```
 

package/dist/core/index.cjs

@@ -5967,6 +5967,18 @@ var createRemoraidTheme = (customTheme, dependencies) => {
         ["medium" /* Medium */]: { size: 24, stroke: 1.7 },
         ["large" /* Large */]: { size: 28, stroke: 1.7 },
         ["huge" /* Huge */]: { size: 44, stroke: 1.7 }
+      },
+      Scroller: {
+        edgeGradientColor: "transparent",
+        className: "remoraid-masked-scroller",
+        startControlIcon: /* @__PURE__ */ jsx_runtime3.jsx(import_icons_react.IconArrowLeft, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        }),
+        endControlIcon: /* @__PURE__ */ jsx_runtime3.jsx(import_icons_react.IconArrowRight, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        })
       }
     }
   };
@@ -5978,7 +5990,8 @@ var getCssVars = (theme) => {
     transitionDurations,
     primaryGutter,
     containerSize,
-    transparentBackground
+    transparentBackground,
+    componentsProps: { icons }
   } = theme;
   return {
     "--mantine-color-body": bodyColor,
@@ -5990,6 +6003,11 @@ var getCssVars = (theme) => {
     ...Object.entries(transitionDurations).reduce((t, [key, value]) => ({
       ...t,
       [`--remoraid-transition-duration-${key}`]: `${value}ms`
+    }), {}),
+    ...Object.entries(icons).reduce((t, [key, { size, stroke }]) => ({
+      ...t,
+      [`--remoraid-icon-size-${key}`]: typeof size === "number" ? `${size}px` : size,
+      [`--remoraid-icon-stroke-${key}`]: `${stroke}`
     }), {})
   };
 };
@@ -6532,7 +6550,7 @@ function FooterMinimal({
     ...componentsProps?.container,
     children: /* @__PURE__ */ jsx_runtime13.jsx(import_core6.Center, {
       children: /* @__PURE__ */ jsx_runtime13.jsx(Icon2, {
-        color: "var(--mantine-color-default-border)",
+        color: "var(--mantine-color-disabled)",
         ...theme.componentsProps.icons.huge,
         ...componentsProps?.icon
       })
@@ -6599,10 +6617,10 @@ function NavigationMenu({
   const mantineTheme = import_core7.useMantineTheme();
   const router = useRemoraidRouter();
   const { pathname } = router;
-  const item = (element) => /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Transition, {
-    mounted: element.mounted ?? true,
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Item, {
+  const item = (element, style) => {
+    const isLeaf2 = element.children === undefined || element.children.length === 0;
+    const Menu2 = isLeaf2 ? import_core7.Menu : import_core7.Menu.Sub;
+    return /* @__PURE__ */ jsx_runtime15.jsx(Menu2.Item, {
       leftSection: element.icon ? /* @__PURE__ */ jsx_runtime15.jsx(element.icon, {
         ...theme.componentsProps.icons.small
       }) : undefined,
@@ -6615,36 +6633,48 @@ function NavigationMenu({
           element.onClick(e);
         }
       },
-      style: transitionStyle,
+      style,
       children: element.label
-    })
-  });
-  const targetElement = import_react12.isValidElement(target) ? target : item(target);
-  if (elements === undefined || elements.length === 0) {
-    return targetElement;
-  }
-  return /* @__PURE__ */ jsx_runtime15.jsxs(import_core7.Menu, {
-    trigger: "click-hover",
-    ...componentsProps?.Menu,
-    children: [
-      /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Target, {
-        children: /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Box, {
-          children: targetElement
-        })
-      }),
-      /* @__PURE__ */ jsx_runtime15.jsxs(import_core7.Menu.Dropdown, {
+    });
+  };
+  const isRoot = import_react12.isValidElement(target);
+  const isLeaf = elements === undefined || elements.length === 0;
+  const Menu = isRoot ? import_core7.Menu : import_core7.Menu.Sub;
+  const menuProps = isRoot ? { trigger: "click-hover", ...componentsProps?.Menu } : { ...componentsProps?.MenuSub };
+  return /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Transition, {
+    mounted: isRoot ? true : target.mounted ?? true,
+    ...componentsProps?.transition,
+    children: (transitionStyle) => {
+      if (isLeaf) {
+        if (isRoot) {
+          return target;
+        }
+        return item(target, transitionStyle);
+      }
+      return /* @__PURE__ */ jsx_runtime15.jsxs(Menu, {
+        ...menuProps,
         children: [
-          label !== undefined && /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Label, {
-            children: label
+          /* @__PURE__ */ jsx_runtime15.jsx(Menu.Target, {
+            children: isRoot ? /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Box, {
+              ...componentsProps?.rootTargetContainer,
+              children: target
+            }) : item(target, transitionStyle)
           }),
-          elements.map((element, i) => /* @__PURE__ */ jsx_runtime15.jsx(NavigationMenu, {
-            target: item(element),
-            elements: element.children,
-            componentsProps
-          }, `navigation-menu-${i}`))
+          /* @__PURE__ */ jsx_runtime15.jsxs(Menu.Dropdown, {
+            children: [
+              label !== undefined && /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Label, {
+                children: label
+              }),
+              elements.map((element, i) => /* @__PURE__ */ jsx_runtime15.jsx(NavigationMenu, {
+                target: element,
+                elements: element.children,
+                componentsProps
+              }, `navigation-menu-${i}`))
+            ]
+          })
         ]
-      })
-    ]
+      });
+    }
   });
 }
 
@@ -7471,23 +7501,28 @@ var import_react20 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core15 = require("@mantine/core");
+var import_lodash14 = __toESM(require_lodash());
 var jsx_runtime26 = require("react/jsx-runtime");
 function ScrollableChipGroup({
   value,
-  ref,
   onChange,
   gap = "xs",
   componentsProps,
   children
 }) {
-  return /* @__PURE__ */ jsx_runtime26.jsx(import_core15.ScrollArea, {
-    ref,
-    ...componentsProps?.ScrollArea,
-    style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Scroller, {
+    ...theme.componentsProps?.Scroller,
+    ...componentsProps?.Scroller,
+    className: clsx_default("remoraid-masked-scroller", theme.componentsProps?.Scroller?.className, componentsProps?.Scroller?.className),
+    style: import_lodash14.merge({ contain: "inline-size" }, theme.componentsProps?.Scroller?.style, componentsProps?.Scroller?.style),
+    attributes: import_lodash14.merge({
+      container: { "data-remoraid-scroller-container": true }
+    }, theme.componentsProps?.Scroller?.attributes, componentsProps?.Scroller?.attributes),
     children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Chip.Group, {
       value,
       onChange,
-      ...componentsProps?.chipGroup,
+      ...componentsProps?.ChipGroup,
       multiple: true,
       children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Flex, {
         justify: "flex-start",
@@ -7502,12 +7537,12 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_lodash14 = __toESM(require_lodash());
+var import_lodash15 = __toESM(require_lodash());
 var jsx_runtime27 = require("react/jsx-runtime");
 function WidgetSelectionHeader({
   title,
   pinnableSection = "top" /* Top */,
-  initiallyPinned = true,
+  initiallyPinned: initiallyPinnedProp,
   disabledWidgets,
   componentsProps
 }) {
@@ -7523,6 +7558,7 @@ function WidgetSelectionHeader({
   if (!page) {
     throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
+  const initiallyPinned = pinnableSection ? initiallyPinnedProp ?? true : false;
   const [hover, setHover] = import_react20.useState(false);
   const [isPinned, setIsPinned] = import_react20.useState(initiallyPinned);
   const handleEnter = () => {
@@ -7531,7 +7567,7 @@ function WidgetSelectionHeader({
   const handleLeave = () => {
     setHover(false);
   };
-  const scrollAreaRef = import_react20.useRef(null);
+  const containerRef = import_react20.useRef(null);
   const widgets = widgetsContext2.widgets[page.pageId] ?? {};
   const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
   const element = /* @__PURE__ */ jsx_runtime27.jsxs(import_core16.Flex, {
@@ -7539,6 +7575,7 @@ function WidgetSelectionHeader({
     align: "center",
     gap: "md",
     ...componentsProps?.container,
+    ref: containerRef,
     onMouseEnter: (e) => {
       if (!pinnableSection) {
         handleEnter();
@@ -7549,13 +7586,14 @@ function WidgetSelectionHeader({
       if (!pinnableSection) {
         handleLeave();
       }
-      componentsProps?.container?.onMouseEnter?.(e);
+      componentsProps?.container?.onMouseLeave?.(e);
     },
     className: clsx_default(!pinnableSection ? "remoraid-non-widget-segment" : undefined, !pinnableSection ? "remoraid-segment" : undefined, componentsProps?.container?.className),
     children: [
       /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Text, {
         size: "md",
         ...componentsProps?.title,
+        style: { whiteSpace: "nowrap", ...componentsProps?.title?.style },
         children: title ?? page.name
       }),
       /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Divider, {
@@ -7564,13 +7602,17 @@ function WidgetSelectionHeader({
       }),
       isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_runtime27.jsx(ScrollableChipGroup, {
         value: selectedWidgets,
-        ref: scrollAreaRef,
         ...componentsProps?.ScrollableChipGroup,
         onChange: (value) => {
           updateWidgetSelectionBulk(page.pageId, value);
           componentsProps?.ScrollableChipGroup?.onChange?.(value);
         },
-        componentsProps: import_lodash14.merge({ ScrollArea: { flex: 1 } }, componentsProps?.ScrollableChipGroup?.componentsProps),
+        componentsProps: import_lodash15.merge({
+          Scroller: {
+            flex: 1,
+            miw: 0
+          }
+        }, componentsProps?.ScrollableChipGroup?.componentsProps),
         children: Object.entries(widgets).map(([widgetId, widget]) => {
           if (!widget) {
             return;
@@ -7591,12 +7633,15 @@ function WidgetSelectionHeader({
                       ...theme.componentsProps.icons.extraSmall
                     }),
                     ...componentsProps?.Chip,
-                    styles: import_lodash14.merge({
+                    styles: import_lodash15.merge({
                       label: {
                         transition: "background-color var(--remoraid-transition-duration-short)"
                       }
                     }, componentsProps?.Chip?.styles),
-                    id: `remoraid-widget-selection-header-chip-${widgetId}`,
+                    wrapperProps: {
+                      ...componentsProps?.Chip?.wrapperProps,
+                      id: `remoraid-widget-selection-header-chip-${widgetId}`
+                    },
                     children: widget.name
                   })
                 })
@@ -7637,19 +7682,20 @@ function WidgetSelectionHeader({
     if (!activeWidget) {
       return;
     }
-    if (!isPinned) {
+    if (!containerRef?.current) {
       return;
     }
-    if (!scrollAreaRef?.current) {
+    const activeWidgetChipElement = containerRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
+    if (!activeWidgetChipElement) {
       return;
     }
-    const activeWidgetChipElement = scrollAreaRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
-    if (!activeWidgetChipElement) {
+    const scrollContainerElement = activeWidgetChipElement.closest("[data-remoraid-scroller-container]");
+    if (!scrollContainerElement) {
       return;
     }
-    activeWidgetChipElement.scrollIntoView({
-      behavior: "smooth",
-      inline: "center"
+    scrollContainerElement.scrollTo({
+      left: activeWidgetChipElement.offsetLeft - scrollContainerElement.clientWidth / 2 + activeWidgetChipElement.clientWidth / 2,
+      behavior: "smooth"
     });
   }, [activeWidget]);
   if (pinnableSection) {
@@ -7733,7 +7779,7 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var import_lodash15 = __toESM(require_lodash());
+var import_lodash16 = __toESM(require_lodash());
 var jsx_runtime29 = require("react/jsx-runtime");
 var react = require("react");
 function BadgeGroup({
@@ -7781,7 +7827,7 @@ function BadgeGroup({
                 ...componentsProps?.cumulativeBadge,
                 style: {
                   cursor: "pointer",
-                  ...import_lodash15.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                  ...import_lodash16.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
                 },
                 children: [
                   numVisibleBadges,
@@ -7805,7 +7851,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 var import_core19 = require("@mantine/core");
-var import_lodash16 = __toESM(require_lodash());
+var import_lodash17 = __toESM(require_lodash());
 var jsx_runtime30 = require("react/jsx-runtime");
 function AlertMinimal({
   category,
@@ -7822,7 +7868,7 @@ function AlertMinimal({
     icon: Icon4,
     iconSize = "small" /* Small */,
     componentsProps
-  } = import_lodash16.merge({}, theme.componentsProps.alerts[category], props);
+  } = import_lodash17.merge({}, theme.componentsProps.alerts[category], props);
   return /* @__PURE__ */ jsx_runtime30.jsx(import_core19.Transition, {
     mounted,
     transition: "fade",
@@ -7836,10 +7882,10 @@ function AlertMinimal({
       onClose,
       withCloseButton: onClose !== undefined,
       icon: Icon4 ? /* @__PURE__ */ jsx_runtime30.jsx(Icon4, {
-        ...import_lodash16.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+        ...import_lodash17.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }) : undefined,
       ...componentsProps?.alert,
-      style: import_lodash16.merge(transitionStyle, componentsProps?.alert?.style),
+      style: import_lodash17.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
         children
@@ -7851,7 +7897,7 @@ function AlertMinimal({
 var import_core20 = require("@mantine/core");
 var import_react22 = require("react");
 var import_icons_react10 = require("@tabler/icons-react");
-var import_lodash17 = __toESM(require_lodash());
+var import_lodash18 = __toESM(require_lodash());
 var jsx_runtime31 = require("react/jsx-runtime");
 function WidgetWrapper({
   config,
@@ -7922,7 +7968,7 @@ function WidgetWrapper({
         handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash17.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
+      style: import_lodash18.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
       className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
@@ -7996,7 +8042,7 @@ function WidgetWrapper({
 // src/core/components/Widget/index.tsx
 var import_core21 = require("@mantine/core");
 var import_react23 = require("react");
-var import_lodash18 = __toESM(require_lodash());
+var import_lodash19 = __toESM(require_lodash());
 var jsx_runtime32 = require("react/jsx-runtime");
 var react2 = require("react");
 function Widget({
@@ -8068,7 +8114,7 @@ function Widget({
                     size: "sm",
                     c: "dimmed",
                     ...componentsProps?.description,
-                    style: import_lodash18.merge(transitionStyle, componentsProps?.description?.style),
+                    style: import_lodash19.merge(transitionStyle, componentsProps?.description?.style),
                     children: description
                   })
                 })
@@ -8339,7 +8385,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash19 = __toESM(require_lodash());
+var import_lodash20 = __toESM(require_lodash());
 var import_core25 = require("@mantine/core");
 var jsx_runtime39 = require("react/jsx-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
@@ -8375,7 +8421,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash19.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash20.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_runtime39.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -8433,7 +8479,7 @@ function NavbarSettingsWidget({
   });
 }
 // src/core/components/FooterSettingsWidget/index.tsx
-var import_lodash20 = __toESM(require_lodash());
+var import_lodash21 = __toESM(require_lodash());
 var import_core26 = require("@mantine/core");
 var jsx_runtime40 = require("react/jsx-runtime");
 var defaultFooterSettingsWidgetId = "footer-settings";
@@ -8464,7 +8510,7 @@ function FooterSettingsWidget({
         footer: initialUserExperience.footer
       }));
     },
-    custom: !import_lodash20.isEqual(userExperience.footer, initialUserExperience.footer),
+    custom: !import_lodash21.isEqual(userExperience.footer, initialUserExperience.footer),
     children: /* @__PURE__ */ jsx_runtime40.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren as PropsWithChildren7, ReactNode as ReactNode7 } from "react";
-import { MantineBreakpoint, MantineColorScheme, MantineSize, MantineTheme } from "@mantine/core";
+import { MantineBreakpoint, MantineColorScheme, MantineSize, MantineTheme, ScrollerProps } from "@mantine/core";
 import { Icon as Icon2, IconProps as IconProps2 } from "@tabler/icons-react";
 import React2, { Dispatch, MouseEventHandler, ReactElement, SetStateAction } from "react";
 import { PartialDeep } from "type-fest";
@@ -168,8 +168,9 @@ interface RemoraidTheme {
 	transparentBackground?: string;
 	spacingPx?: Record<MantineSize, number>;
 	componentsProps: {
-		icons: Record<RemoraidIconSize, Partial<IconProps2>>
+		icons: Record<RemoraidIconSize, Partial<IconProps2> & Required<Pick<IconProps2, "size" | "stroke">>>
 		alerts: Record<AlertCategory, Omit<Partial<AlertMinimalProps>, "category">>
+		Scroller: Partial<ScrollerProps>
 	};
 }
 interface RemoraidThemeDependencies {
@@ -294,7 +295,7 @@ interface RemoraidProviderProps {
 	};
 }
 declare function RemoraidProvider({ children, theme, initialUserExperience, router, componentsProps }: PropsWithChildren7<RemoraidProviderProps>): ReactNode7;
-import { BoxProps as BoxProps2 } from "@mantine/core";
+import { BoxProps as BoxProps3 } from "@mantine/core";
 import { ComponentProps as ComponentProps7, PropsWithChildren as PropsWithChildren13, ReactNode as ReactNode22 } from "react";
 import { PropsWithChildren as PropsWithChildren8, ReactNode as ReactNode8 } from "react";
 import { SetOptional } from "type-fest";
@@ -307,7 +308,7 @@ declare function AppProvider2<V extends CustomAppVariables>({ appContext: appCon
 import { ComponentProps as ComponentProps4, ReactNode as ReactNode18 } from "react";
 import { ReactNode as ReactNode17 } from "react";
 import { MantineBreakpoint as MantineBreakpoint3, PaperProps } from "@mantine/core";
-import { MenuProps, TransitionProps as TransitionProps2 } from "@mantine/core";
+import { BoxProps, MenuProps, MenuSubProps, TransitionProps as TransitionProps2 } from "@mantine/core";
 import { ReactElement as ReactElement2 } from "react";
 interface NavigationMenuProps {
 	target: ReactElement2 | NavigationElement;
@@ -315,7 +316,9 @@ interface NavigationMenuProps {
 	label?: string;
 	componentsProps?: {
 		transition?: Partial<TransitionProps2>
+		rootTargetContainer?: Partial<BoxProps>
 		Menu?: Partial<MenuProps>
+		MenuSub?: Partial<MenuSubProps>
 	};
 }
 import { ActionIconProps, ActionIconVariant, ButtonProps, ButtonVariant, MantineBreakpoint as MantineBreakpoint2, MantineColor, MantineSize as MantineSize3, TooltipProps, TransitionProps as TransitionProps3 } from "@mantine/core";
@@ -414,7 +417,7 @@ interface PageContainerProps {
 }
 declare function PageContainer2({ children, p, hidden, componentsProps }: PropsWithChildren9<PageContainerProps>): ReactNode12;
 import { PropsWithChildren as PropsWithChildren10, ReactNode as ReactNode13 } from "react";
-import { BoxProps } from "@mantine/core";
+import { BoxProps as BoxProps2 } from "@mantine/core";
 declare const useFrameLayoutElement: () => LayoutElementContext<LayoutType.Frame> | null;
 interface FrameLayoutElementProps {
 	section: FrameLayoutSection;
@@ -423,7 +426,7 @@ interface FrameLayoutElementProps {
 	layoutId?: string;
 	hidden?: boolean;
 	componentsProps?: {
-		container?: Partial<BoxProps>
+		container?: Partial<BoxProps2>
 		PageContainer?: Partial<PageContainerProps>
 	};
 }
@@ -564,7 +567,7 @@ interface AppShellProps<V extends CustomAppVariables> {
 	initialUserExperience?: UserExperienceProviderProps<AppShellUserExperience>["initialValue"];
 	gutter?: FrameLayoutProps["gutter"];
 	componentsProps?: {
-		container?: Partial<BoxProps2>
+		container?: Partial<BoxProps3>
 		layout?: Partial<FrameLayoutProps>
 		navbar?: Partial<NavbarProps>
 		footer?: Partial<FooterProps>
@@ -598,20 +601,19 @@ declare const defaultUserExperienceCookieName = "remoraid-core-user-experience";
 declare const useRemoraidUserExperience: () => UserExperienceContext<CoreUserExperience>;
 import { ChipProps, DividerProps, FlexProps as FlexProps2, MenuProps as MenuProps2, TextProps } from "@mantine/core";
 import { ReactNode as ReactNode27 } from "react";
-import { ChipGroupProps, FlexProps, MantineSize as MantineSize7, ScrollAreaProps as ScrollAreaProps2 } from "@mantine/core";
-import { PropsWithChildren as PropsWithChildren17, ReactNode as ReactNode26, RefObject as RefObject2 } from "react";
+import { ChipGroupProps, FlexProps, MantineSize as MantineSize7, ScrollerProps as ScrollerProps2 } from "@mantine/core";
+import { PropsWithChildren as PropsWithChildren17, ReactNode as ReactNode26 } from "react";
 interface ScrollableChipGroupProps {
 	value: string[];
-	ref?: RefObject2<HTMLDivElement | null>;
 	onChange?: (value: string[]) => void;
 	gap?: MantineSize7 | number;
 	componentsProps?: {
-		chipGroup?: Partial<ChipGroupProps<true>>
 		container?: Partial<FlexProps>
-		ScrollArea?: Partial<ScrollAreaProps2>
+		ChipGroup?: Partial<ChipGroupProps<true>>
+		Scroller?: Partial<ScrollerProps2>
 	};
 }
-declare function ScrollableChipGroup2({ value, ref, onChange, gap, componentsProps, children }: PropsWithChildren17<ScrollableChipGroupProps>): ReactNode26;
+declare function ScrollableChipGroup2({ value, onChange, gap, componentsProps, children }: PropsWithChildren17<ScrollableChipGroupProps>): ReactNode26;
 interface WidgetSelectionHeaderProps {
 	title?: string;
 	pinnableSection?: FrameLayoutSection.Top | FrameLayoutSection.Bottom | null;
@@ -627,7 +629,7 @@ interface WidgetSelectionHeaderProps {
 		Pinnable?: Partial<PinnableProps>
 	};
 }
-declare function WidgetSelectionHeader({ title, pinnableSection, initiallyPinned, disabledWidgets, componentsProps }: WidgetSelectionHeaderProps): ReactNode27;
+declare function WidgetSelectionHeader({ title, pinnableSection, initiallyPinned: initiallyPinnedProp, disabledWidgets, componentsProps }: WidgetSelectionHeaderProps): ReactNode27;
 import { BadgeProps as BadgeProps2, GroupProps as GroupProps3, HoverCardProps, MantineBreakpoint as MantineBreakpoint4, MantineSize as MantineSize8, StackProps as StackProps2, TransitionProps as TransitionProps7 } from "@mantine/core";
 import { ReactNode as ReactNode29 } from "react";
 import { BadgeProps, TooltipProps as TooltipProps3, TransitionProps as TransitionProps6 } from "@mantine/core";
@@ -821,7 +823,7 @@ declare function ContextClusterProvider<
 	Context,
 	StaticID extends string = never
 >({ cluster, values, children }: PropsWithChildren25<ContextClusterProviderProps<Context, StaticID>>): ReactNode41;
-import { BoxProps as BoxProps3, InputWrapperProps, ScrollAreaProps as ScrollAreaProps3 } from "@mantine/core";
+import { BoxProps as BoxProps4, InputWrapperProps, ScrollAreaProps as ScrollAreaProps2 } from "@mantine/core";
 import { PropsWithChildren as PropsWithChildren26, ReactNode as ReactNode42 } from "react";
 interface InputWrapperScrollAreaProps {
 	label?: string;
@@ -831,8 +833,8 @@ interface InputWrapperScrollAreaProps {
 	required?: boolean;
 	componentsProps?: {
 		container?: Partial<InputWrapperProps>
-		ScrollArea?: Partial<ScrollAreaProps3>
-		childrenContainer?: Partial<BoxProps3>
+		ScrollArea?: Partial<ScrollAreaProps2>
+		childrenContainer?: Partial<BoxProps4>
 	};
 }
 declare function InputWrapperScrollArea({ children, label, mah, description, error, required, componentsProps }: PropsWithChildren26<InputWrapperScrollAreaProps>): ReactNode42;