remoraid 2.26.4 → 2.28.2

package/dist/core/index.js

@@ -5760,13 +5760,14 @@ function HydrationStatusProvider({
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 var import_lodash2 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV3 } from "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" ? rgba(mantineTheme.colors.dark[8], 0.8) : rgba(mantineTheme.white, 0.8) : undefined);
   let spacingPx;
   if (mantineTheme && colorScheme) {
@@ -5821,30 +5822,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
-        }
       }
     }
   };
@@ -6113,7 +6090,6 @@ function NavbarLink({
   href,
   indicator
 }) {
-  const theme = useRemoraidTheme();
   const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = useState5(false);
   const iconProps = {
     size: iconSize,
@@ -6122,7 +6098,6 @@ function NavbarLink({
   const Icon2 = icon ?? IconLink;
   if (!href) {
     return /* @__PURE__ */ jsxDEV9(Tooltip, {
-      ...theme.componentsProps.Tooltip,
       label,
       position: "right",
       children: /* @__PURE__ */ jsxDEV9(UnstyledButton, {
@@ -6150,7 +6125,6 @@ function NavbarLink({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
   return /* @__PURE__ */ jsxDEV9(Tooltip, {
-    ...theme.componentsProps.Tooltip,
     label,
     position: "right",
     children: indicator === undefined ? button : /* @__PURE__ */ jsxDEV9(Indicator, {
@@ -6406,7 +6380,6 @@ function Element2({
 }
 
 // src/core/components/FrameLayout/index.tsx
-var import_lodash5 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
 var layoutContext = createContext5(null);
 var useFrameLayout = () => {
@@ -6419,7 +6392,6 @@ function FrameLayout({
   componentsProps,
   children
 }) {
-  const theme = useRemoraidTheme();
   const { layouts, setLayouts } = useLayouts();
   const layout = layouts[layoutId];
   const defaultSections = useMemo3(() => ({
@@ -6521,7 +6493,7 @@ function FrameLayout({
             }, undefined, false, undefined, this),
             includeScrollArea ? /* @__PURE__ */ jsxDEV13(ScrollArea, {
               flex: 1,
-              ...import_lodash5.merge({}, theme.componentsProps.ScrollArea, componentsProps?.ScrollArea),
+              ...componentsProps?.ScrollArea,
               children: contentSection
             }, undefined, false, undefined, this) : contentSection,
             /* @__PURE__ */ jsxDEV13(Stack2, {
@@ -6551,7 +6523,7 @@ var FrameLayout_default = Object.assign(FrameLayout, {
 });
 
 // src/core/components/AppShell/index.tsx
-var import_lodash6 = __toESM(require_lodash(), 1);
+var import_lodash5 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
 var remoraidAppShellLayoutId = "remoraid-app-shell";
 var defaultAppShellNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
@@ -6604,13 +6576,13 @@ function AppShell({
           navbarPosition !== null && /* @__PURE__ */ jsxDEV14(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__ */ jsxDEV14(FrameLayout_default.Element, {
             section: footerPosition,
-            ...import_lodash6.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
+            ...import_lodash5.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
             children: footer
           }, undefined, false, undefined, this)
         ]
@@ -6687,7 +6659,6 @@ import {
   Flex as Flex2,
   ScrollArea as ScrollArea2
 } from "@mantine/core";
-var import_lodash7 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
 function ScrollableChipGroup({
   value,
@@ -6697,10 +6668,10 @@ function ScrollableChipGroup({
   componentsProps,
   children
 }) {
-  const theme = useRemoraidTheme();
   return /* @__PURE__ */ jsxDEV16(ScrollArea2, {
     ref,
-    ...import_lodash7.merge({}, theme.componentsProps.ScrollArea, { style: { contain: "inline-size" } }, componentsProps?.ScrollArea),
+    ...componentsProps?.ScrollArea,
+    style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
     children: /* @__PURE__ */ jsxDEV16(Chip.Group, {
       value,
       onChange,
@@ -6719,7 +6690,7 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_lodash10 = __toESM(require_lodash(), 1);
+var import_lodash8 = __toESM(require_lodash(), 1);
 
 // src/core/components/Pinnable/index.tsx
 import {
@@ -6737,7 +6708,7 @@ import {
   Transition
 } from "@mantine/core";
 import { IconClick } from "@tabler/icons-react";
-var import_lodash8 = __toESM(require_lodash(), 1);
+var import_lodash6 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
 function ControlButton({
   icon: Icon3 = IconClick,
@@ -6758,7 +6729,9 @@ function ControlButton({
     timingFunction: "ease",
     ...componentsProps?.transition,
     children: (transitionStyle) => /* @__PURE__ */ jsxDEV17(Tooltip2, {
-      ...import_lodash8.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      label: tooltip,
+      disabled: !Boolean(tooltip),
+      ...componentsProps?.tooltip,
       children: /* @__PURE__ */ jsxDEV17(ActionIcon, {
         "data-control-button": true,
         size,
@@ -6768,10 +6741,10 @@ function ControlButton({
         ...componentsProps?.button,
         style: {
           order,
-          ...import_lodash8.merge(transitionStyle, componentsProps?.button?.style)
+          ...import_lodash6.merge(transitionStyle, componentsProps?.button?.style)
         },
         children: /* @__PURE__ */ jsxDEV17(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)
@@ -6786,7 +6759,7 @@ import {
   Transition as Transition2
 } from "@mantine/core";
 import { IconGripHorizontal } from "@tabler/icons-react";
-var import_lodash9 = __toESM(require_lodash(), 1);
+var import_lodash7 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
 function Controls({
   groupRef,
@@ -6865,7 +6838,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__ */ jsxDEV18(Group3, {
@@ -6876,7 +6849,7 @@ function Controls({
         className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
         children: [
           /* @__PURE__ */ jsxDEV18(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) => {
@@ -7025,13 +6998,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__ */ jsxDEV20(Menu, {
-            ...import_lodash10.merge({}, theme.componentsProps.Menu, { trigger: "hover" }, componentsProps?.widgetMenu),
+            trigger: "hover",
+            ...componentsProps?.widgetMenu,
             children: [
               /* @__PURE__ */ jsxDEV20(Menu.Target, {
                 children: /* @__PURE__ */ jsxDEV20(Box4, {
@@ -7045,7 +7019,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)"
                       }
@@ -7164,7 +7138,6 @@ import {
   Tooltip as Tooltip3,
   Transition as Transition3
 } from "@mantine/core";
-var import_lodash11 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV21 } from "react/jsx-dev-runtime";
 function BadgeMinimal({
   label,
@@ -7180,7 +7153,9 @@ function BadgeMinimal({
     timingFunction: "ease",
     ...componentsProps?.transition,
     children: (transitionStyle) => /* @__PURE__ */ jsxDEV21(Tooltip3, {
-      ...import_lodash11.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      label: tooltip,
+      disabled: !Boolean(tooltip),
+      ...componentsProps?.tooltip,
       children: /* @__PURE__ */ jsxDEV21(Badge, {
         variant: "default",
         ...componentsProps?.badge,
@@ -7196,7 +7171,7 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var import_lodash12 = __toESM(require_lodash(), 1);
+var import_lodash9 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV22, Fragment as Fragment2 } from "react/jsx-dev-runtime";
 import { createElement } from "react";
 function BadgeGroup({
@@ -7235,7 +7210,7 @@ function BadgeGroup({
         timingFunction: "ease",
         ...componentsProps?.cumulativeBadgeTransition,
         children: (transitionStyle) => /* @__PURE__ */ jsxDEV22(HoverCard, {
-          ...import_lodash12.merge({}, theme.componentsProps.HoverCard, componentsProps?.HoverCard),
+          ...componentsProps?.HoverCard,
           children: [
             /* @__PURE__ */ jsxDEV22(HoverCard.Target, {
               children: /* @__PURE__ */ jsxDEV22(Badge2, {
@@ -7244,7 +7219,7 @@ function BadgeGroup({
                 ...componentsProps?.cumulativeBadge,
                 style: {
                   cursor: "pointer",
-                  ...import_lodash12.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                  ...import_lodash9.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
                 },
                 children: [
                   numVisibleBadges,
@@ -7268,7 +7243,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 import { Alert, Transition as Transition5 } from "@mantine/core";
-var import_lodash13 = __toESM(require_lodash(), 1);
+var import_lodash10 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV23 } from "react/jsx-dev-runtime";
 function AlertMinimal({
   category,
@@ -7285,7 +7260,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__ */ jsxDEV23(Transition5, {
     mounted,
     transition: "fade",
@@ -7299,9 +7274,9 @@ function AlertMinimal({
       onClose,
       withCloseButton: onClose !== undefined,
       icon: Icon3 ? /* @__PURE__ */ jsxDEV23(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
@@ -7317,7 +7292,7 @@ import {
   Transition as Transition6
 } from "@mantine/core";
 import { IconClick as IconClick2 } from "@tabler/icons-react";
-var import_lodash14 = __toESM(require_lodash(), 1);
+var import_lodash11 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV24, Fragment as Fragment3 } from "react/jsx-dev-runtime";
 function RemoraidButton({
   label,
@@ -7341,7 +7316,7 @@ function RemoraidButton({
   const Icon4 = iconProp ?? IconClick2;
   const theme = useRemoraidTheme();
   const iconElement = /* @__PURE__ */ jsxDEV24(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__ */ jsxDEV24(Transition6, {
     mounted,
@@ -7352,7 +7327,8 @@ function RemoraidButton({
     children: (transitionStyle) => /* @__PURE__ */ jsxDEV24(Fragment3, {
       children: [
         /* @__PURE__ */ jsxDEV24(Tooltip4, {
-          ...import_lodash14.merge({}, theme.componentsProps.Tooltip, { label }, componentsProps?.tooltip),
+          label,
+          ...componentsProps?.tooltip,
           children: /* @__PURE__ */ jsxDEV24(ActionIcon2, {
             "aria-label": label,
             variant,
@@ -7401,7 +7377,7 @@ import {
   useState as useState9
 } from "react";
 import { IconX } from "@tabler/icons-react";
-var import_lodash15 = __toESM(require_lodash(), 1);
+var import_lodash12 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV25 } from "react/jsx-dev-runtime";
 function WidgetWrapper({
   config,
@@ -7472,7 +7448,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: [
@@ -7565,7 +7541,6 @@ import {
   Box as Box5,
   ScrollArea as ScrollArea3
 } from "@mantine/core";
-var import_lodash16 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV26 } from "react/jsx-dev-runtime";
 import { createElement as createElement2 } from "react";
 function Widget({
@@ -7585,7 +7560,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";
@@ -7664,7 +7638,8 @@ function Widget({
           })
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV26(ScrollArea3.Autosize, {
-          ...import_lodash16.merge(theme.componentsProps.ScrollArea, { flex: 1 }, componentsProps?.childrenContainer),
+          flex: 1,
+          ...componentsProps?.childrenContainer,
           children: loading ? /* @__PURE__ */ jsxDEV26(Center, {
             children: /* @__PURE__ */ jsxDEV26(Loader, {
               ...componentsProps?.loader
@@ -7892,7 +7867,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash17 = __toESM(require_lodash(), 1);
+var import_lodash13 = __toESM(require_lodash(), 1);
 import { Chip as Chip3, Group as Group7 } from "@mantine/core";
 import { IconLink as IconLink2 } from "@tabler/icons-react";
 import { jsxDEV as jsxDEV33 } from "react/jsx-dev-runtime";
@@ -7918,7 +7893,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash17.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash13.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsxDEV33(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -8008,6 +7983,53 @@ function ContextClusterProvider({
     children: t
   }, undefined, false, undefined, this) : t, children);
 }
+// src/core/components/InputWrapperScrollArea/index.tsx
+import {
+  Box as Box6,
+  Input,
+  Paper as Paper4,
+  ScrollArea as ScrollArea4
+} from "@mantine/core";
+import { useState as useState10 } from "react";
+import { jsxDEV as jsxDEV35 } from "react/jsx-dev-runtime";
+function InputWrapperScrollArea({
+  children,
+  label,
+  mah,
+  error,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  const [isHovering, setIsHovering] = useState10(false);
+  return /* @__PURE__ */ jsxDEV35(Input.Wrapper, {
+    label,
+    error,
+    onMouseEnter: () => setIsHovering(true),
+    onMouseLeave: () => setIsHovering(false),
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsxDEV35(Paper4, {
+      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__ */ jsxDEV35(ScrollArea4, {
+        mah,
+        px: "md",
+        flex: 1,
+        ...componentsProps?.ScrollArea,
+        children: /* @__PURE__ */ jsxDEV35(Box6, {
+          ...componentsProps?.childrenContainer,
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
 export {
   useWidgets,
   useWidget,
@@ -8030,6 +8052,7 @@ export {
   getCssVars,
   defaultUserExperienceCookieName,
   defaultUserExperience,
+  defaultTransitionDurations,
   defaultSettingsWidgetContext as defaultSettingsWidgetOptions,
   defaultSettingsTableOptions,
   defaultNavbarSettingsWidgetId,
@@ -8063,6 +8086,7 @@ export {
   NavbarVariant,
   NavbarSettingsWidget,
   LayoutType,
+  InputWrapperScrollArea,
   HydrationStatusProvider,
   FrameLayoutSection,
   FrameLayout_default as FrameLayout,