remoraid 2.28.2 → 2.31.3

package/dist/core/index.cjs

@@ -5525,6 +5525,7 @@ __export(exports_core, {
   Controls: () => Controls,
   ControlButton: () => ControlButton,
   ContextClusterProvider: () => ContextClusterProvider,
+  ClickTransformation: () => ClickTransformation,
   BadgeMinimal: () => BadgeMinimal,
   BadgeGroup: () => BadgeGroup,
   AppShell: () => AppShell_default,
@@ -5745,6 +5746,16 @@ var FrameLayoutSection;
   FrameLayoutSection2["Right"] = "right";
   FrameLayoutSection2["Content"] = "content";
 })(FrameLayoutSection ||= {});
+var ClickTransformation;
+((ClickTransformation2) => {
+  ClickTransformation2["Default"] = "default";
+  ClickTransformation2["None"] = "none";
+  ClickTransformation2["TiltDown"] = "tiltDown";
+  ClickTransformation2["TiltUp"] = "tiltUp";
+  ClickTransformation2["TiltRight"] = "tiltRight";
+  ClickTransformation2["TiltLeft"] = "tiltLeft";
+  ClickTransformation2["Scale"] = "scale";
+})(ClickTransformation ||= {});
 
 // src/core/lib/utils.ts
 var import_react2 = require("react");
@@ -7315,6 +7326,7 @@ function RemoraidButton({
   mounted = true,
   icon: iconProp,
   iconSize: iconSizeProp,
+  clickTransformation = "default" /* Default */,
   componentsProps
 }) {
   const responsive = ResponsiveProp ?? true;
@@ -7326,6 +7338,16 @@ function RemoraidButton({
   const iconElement = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(Icon4, {
     ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   }, undefined, false, undefined, this);
+  const clickTransformationClassNames = {
+    ["default" /* Default */]: null,
+    ["none" /* None */]: "remoraid-button-none",
+    ["scale" /* Scale */]: "remoraid-button-scale",
+    ["tiltDown" /* TiltDown */]: "remoraid-button-tilt-down",
+    ["tiltUp" /* TiltUp */]: "remoraid-button-tilt-up",
+    ["tiltLeft" /* TiltLeft */]: "remoraid-button-tilt-left",
+    ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
+  };
+  const clickTransformationClass = clickTransformationClassNames[clickTransformation];
   return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Transition, {
     mounted,
     transition: "fade",
@@ -7348,10 +7370,8 @@ function RemoraidButton({
             ...componentsProps?.ActionIcon,
             hiddenFrom: !responsive ? undefined : breakpoint,
             display: !responsive && !collapsed ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
-            style: {
-              ...transitionStyle,
-              ...componentsProps?.ActionIcon?.style ?? componentsProps?.button?.style
-            },
+            style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.ActionIcon?.style),
+            className: clsx_default(clickTransformationClass, componentsProps?.ActionIcon?.className, componentsProps?.button?.className),
             children: iconElement
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
@@ -7366,10 +7386,8 @@ function RemoraidButton({
           ...componentsProps?.Button,
           visibleFrom: !responsive ? undefined : breakpoint,
           display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
-          style: {
-            ...transitionStyle,
-            ...componentsProps?.Button?.style ?? componentsProps?.button?.style
-          },
+          style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.Button?.style),
+          className: clsx_default(clickTransformationClass, componentsProps?.Button?.className, componentsProps?.button?.className),
           children: label
         }, undefined, false, undefined, this)
       ]
@@ -7412,7 +7430,11 @@ function WidgetWrapper({
   const handleEnter = () => {
     updateActiveWidget(config.widgetId);
   };
-  const handleLeave = () => {
+  const handleLeave = (e) => {
+    const to = e.relatedTarget;
+    if (to && to.closest?.("[data-control-button]")) {
+      return;
+    }
     updateActiveWidget(null);
   };
   const mounted = Boolean(widget?.selected);
@@ -7440,15 +7462,11 @@ function WidgetWrapper({
       display: "flex",
       ...componentsProps?.container,
       onMouseEnter: (e) => {
-        if (!pinnableSection) {
-          handleEnter();
-        }
+        handleEnter();
         componentsProps?.container?.onMouseEnter?.(e);
       },
       onMouseLeave: (e) => {
-        if (!pinnableSection) {
-          handleLeave();
-        }
+        handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
       style: import_lodash12.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
@@ -7479,7 +7497,7 @@ function WidgetWrapper({
                 return;
               }
               updateWidgetSelection(page.pageId, config.widgetId, false);
-              handleLeave();
+              handleLeave(e);
               componentsProps?.closeButton?.onClick?.(e);
             }
           }, undefined, false, undefined, this)
@@ -7496,21 +7514,10 @@ function WidgetWrapper({
       ...componentsProps?.Pinnable,
       componentsProps: {
         ...componentsProps?.Pinnable?.componentsProps,
-        container: {
-          ...componentsProps?.Pinnable?.componentsProps?.container,
-          onMouseEnter: (e) => {
-            handleEnter();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseEnter?.(e);
-          },
-          onMouseLeave: (e) => {
-            handleLeave();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseLeave?.(e);
-          }
-        },
         button: {
           ...componentsProps?.Pinnable?.componentsProps?.button,
           onClick: (e) => {
-            handleLeave();
+            handleLeave(e);
             componentsProps?.Pinnable?.componentsProps?.button?.onClick?.(e);
           }
         },
@@ -7985,7 +7992,9 @@ function InputWrapperScrollArea({
   children,
   label,
   mah,
+  description,
   error,
+  required = false,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
@@ -7995,10 +8004,13 @@ function InputWrapperScrollArea({
     error,
     onMouseEnter: () => setIsHovering(true),
     onMouseLeave: () => setIsHovering(false),
+    description,
+    withAsterisk: required,
     ...componentsProps?.container,
     children: /* @__PURE__ */ jsx_dev_runtime35.jsxDEV(import_core25.Paper, {
       shadow: "none",
       p: 0,
+      mt: Boolean(description) ? 4 : 0,
       withBorder: true,
       display: "flex",
       bg: theme.transparentBackground,

package/dist/core/index.d.ts

@@ -174,6 +174,15 @@ interface ContextCluster<
 	createContext: (id: string, defaultValue?: Context) => React2.Context<Context>;
 	useContext: <ID extends string>(id: ID) => ID extends StaticID ? Context : Context | null;
 }
+declare enum ClickTransformation {
+	Default = "default",
+	None = "none",
+	TiltDown = "tiltDown",
+	TiltUp = "tiltUp",
+	TiltRight = "tiltRight",
+	TiltLeft = "tiltLeft",
+	Scale = "scale"
+}
 declare const getDefaultWidgetContext: (configuration: WidgetConfiguration) => WidgetContext;
 declare const useWidgets: () => WidgetsContext;
 declare const useWidget: (pageId: string, widgetId: string) => WidgetContext | null;
@@ -545,6 +554,7 @@ interface ExplicitRemoraidButtonProps<Responsive extends boolean> {
 	loading?: boolean;
 	variant?: Extract<ButtonVariant, ActionIconVariant>;
 	mounted?: TransitionProps6["mounted"];
+	clickTransformation?: ClickTransformation;
 	componentsProps?: {
 		tooltip?: Partial<TooltipProps3>
 		icon?: Partial<IconProps6>
@@ -555,7 +565,7 @@ interface ExplicitRemoraidButtonProps<Responsive extends boolean> {
 	};
 }
 type RemoraidButtonProps<Responsive extends boolean = RemoraidButtonDefaultResponsivity> = OptionalIfExtends<ExplicitRemoraidButtonProps<Responsive>, "responsive", true, Responsive>;
-declare function RemoraidButton<Responsive extends boolean = RemoraidButtonDefaultResponsivity>({ label, responsive: ResponsiveProp, breakpoint: breakpointProp, collapsed: collapsedProp, size, color, onClick, loading, variant, mounted, icon: iconProp, iconSize: iconSizeProp, componentsProps }: RemoraidButtonProps<Responsive>): ReactNode24;
+declare function RemoraidButton<Responsive extends boolean = RemoraidButtonDefaultResponsivity>({ label, responsive: ResponsiveProp, breakpoint: breakpointProp, collapsed: collapsedProp, size, color, onClick, loading, variant, mounted, icon: iconProp, iconSize: iconSizeProp, clickTransformation, componentsProps }: RemoraidButtonProps<Responsive>): ReactNode24;
 import { MantineSize as MantineSize9, Paper, TransitionProps as TransitionProps7 } from "@mantine/core";
 import { ComponentProps as ComponentProps6, PropsWithChildren as PropsWithChildren16, ReactNode as ReactNode25 } from "react";
 interface WidgetWrapperProps {
@@ -714,12 +724,14 @@ import { PropsWithChildren as PropsWithChildren24, ReactNode as ReactNode36 } fr
 interface InputWrapperScrollAreaProps {
 	label?: string;
 	mah?: number;
+	description?: string;
 	error?: ReactNode36;
+	required?: boolean;
 	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 };
+declare function InputWrapperScrollArea({ children, label, mah, description, error, required, 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, ClickTransformation, ChildrenOfType, BadgeMinimalProps, BadgeMinimal, BadgeGroupProps, BadgeGroup, AppShellProps, AppShellNavbarVariant, AppShellNavbarPosition, AppShellFooterVariant, AppShellFooterPosition, _default2 as AppShell, AppProviderProps, AppProvider2 as AppProvider, AppLogo, AppContextProps, AlertMinimalProps, AlertMinimal, AlertCategory };

package/dist/core/index.js

@@ -5647,6 +5647,16 @@ var FrameLayoutSection;
   FrameLayoutSection2["Right"] = "right";
   FrameLayoutSection2["Content"] = "content";
 })(FrameLayoutSection ||= {});
+var ClickTransformation;
+((ClickTransformation2) => {
+  ClickTransformation2["Default"] = "default";
+  ClickTransformation2["None"] = "none";
+  ClickTransformation2["TiltDown"] = "tiltDown";
+  ClickTransformation2["TiltUp"] = "tiltUp";
+  ClickTransformation2["TiltRight"] = "tiltRight";
+  ClickTransformation2["TiltLeft"] = "tiltLeft";
+  ClickTransformation2["Scale"] = "scale";
+})(ClickTransformation ||= {});
 
 // src/core/lib/utils.ts
 import {
@@ -7307,6 +7317,7 @@ function RemoraidButton({
   mounted = true,
   icon: iconProp,
   iconSize: iconSizeProp,
+  clickTransformation = "default" /* Default */,
   componentsProps
 }) {
   const responsive = ResponsiveProp ?? true;
@@ -7318,6 +7329,16 @@ function RemoraidButton({
   const iconElement = /* @__PURE__ */ jsxDEV24(Icon4, {
     ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   }, undefined, false, undefined, this);
+  const clickTransformationClassNames = {
+    ["default" /* Default */]: null,
+    ["none" /* None */]: "remoraid-button-none",
+    ["scale" /* Scale */]: "remoraid-button-scale",
+    ["tiltDown" /* TiltDown */]: "remoraid-button-tilt-down",
+    ["tiltUp" /* TiltUp */]: "remoraid-button-tilt-up",
+    ["tiltLeft" /* TiltLeft */]: "remoraid-button-tilt-left",
+    ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
+  };
+  const clickTransformationClass = clickTransformationClassNames[clickTransformation];
   return /* @__PURE__ */ jsxDEV24(Transition6, {
     mounted,
     transition: "fade",
@@ -7340,10 +7361,8 @@ function RemoraidButton({
             ...componentsProps?.ActionIcon,
             hiddenFrom: !responsive ? undefined : breakpoint,
             display: !responsive && !collapsed ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
-            style: {
-              ...transitionStyle,
-              ...componentsProps?.ActionIcon?.style ?? componentsProps?.button?.style
-            },
+            style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.ActionIcon?.style),
+            className: clsx_default(clickTransformationClass, componentsProps?.ActionIcon?.className, componentsProps?.button?.className),
             children: iconElement
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
@@ -7358,10 +7377,8 @@ function RemoraidButton({
           ...componentsProps?.Button,
           visibleFrom: !responsive ? undefined : breakpoint,
           display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
-          style: {
-            ...transitionStyle,
-            ...componentsProps?.Button?.style ?? componentsProps?.button?.style
-          },
+          style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.Button?.style),
+          className: clsx_default(clickTransformationClass, componentsProps?.Button?.className, componentsProps?.button?.className),
           children: label
         }, undefined, false, undefined, this)
       ]
@@ -7409,7 +7426,11 @@ function WidgetWrapper({
   const handleEnter = () => {
     updateActiveWidget(config.widgetId);
   };
-  const handleLeave = () => {
+  const handleLeave = (e) => {
+    const to = e.relatedTarget;
+    if (to && to.closest?.("[data-control-button]")) {
+      return;
+    }
     updateActiveWidget(null);
   };
   const mounted = Boolean(widget?.selected);
@@ -7437,15 +7458,11 @@ function WidgetWrapper({
       display: "flex",
       ...componentsProps?.container,
       onMouseEnter: (e) => {
-        if (!pinnableSection) {
-          handleEnter();
-        }
+        handleEnter();
         componentsProps?.container?.onMouseEnter?.(e);
       },
       onMouseLeave: (e) => {
-        if (!pinnableSection) {
-          handleLeave();
-        }
+        handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
       style: import_lodash12.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
@@ -7476,7 +7493,7 @@ function WidgetWrapper({
                 return;
               }
               updateWidgetSelection(page.pageId, config.widgetId, false);
-              handleLeave();
+              handleLeave(e);
               componentsProps?.closeButton?.onClick?.(e);
             }
           }, undefined, false, undefined, this)
@@ -7493,21 +7510,10 @@ function WidgetWrapper({
       ...componentsProps?.Pinnable,
       componentsProps: {
         ...componentsProps?.Pinnable?.componentsProps,
-        container: {
-          ...componentsProps?.Pinnable?.componentsProps?.container,
-          onMouseEnter: (e) => {
-            handleEnter();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseEnter?.(e);
-          },
-          onMouseLeave: (e) => {
-            handleLeave();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseLeave?.(e);
-          }
-        },
         button: {
           ...componentsProps?.Pinnable?.componentsProps?.button,
           onClick: (e) => {
-            handleLeave();
+            handleLeave(e);
             componentsProps?.Pinnable?.componentsProps?.button?.onClick?.(e);
           }
         },
@@ -7996,7 +8002,9 @@ function InputWrapperScrollArea({
   children,
   label,
   mah,
+  description,
   error,
+  required = false,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
@@ -8006,10 +8014,13 @@ function InputWrapperScrollArea({
     error,
     onMouseEnter: () => setIsHovering(true),
     onMouseLeave: () => setIsHovering(false),
+    description,
+    withAsterisk: required,
     ...componentsProps?.container,
     children: /* @__PURE__ */ jsxDEV35(Paper4, {
       shadow: "none",
       p: 0,
+      mt: Boolean(description) ? 4 : 0,
       withBorder: true,
       display: "flex",
       bg: theme.transparentBackground,
@@ -8096,6 +8107,7 @@ export {
   Controls,
   ControlButton,
   ContextClusterProvider,
+  ClickTransformation,
   BadgeMinimal,
   BadgeGroup,
   AppShell_default as AppShell,

package/dist/core/styles.css

@@ -98,3 +98,33 @@
     display: none;
   }
 }
+.remoraid-button-scale {
+  &:active {
+    transform: scale(0.98);
+  }
+}
+.remoraid-button-tilt-left {
+  &:active {
+    transform: translateX(-1px);
+  }
+}
+.remoraid-button-tilt-right {
+  &:active {
+    transform: translateX(1px);
+  }
+}
+.remoraid-button-tilt-down {
+  &:active {
+    transform: translateY(1px);
+  }
+}
+.remoraid-button-tilt-up {
+  &:active {
+    transform: translateY(-1px);
+  }
+}
+.remoraid-button-none {
+  &:active {
+    transform: none !important;
+  }
+}

package/dist/jsonforms/index.cjs

@@ -6669,6 +6669,7 @@ function RemoraidButton({
   mounted = true,
   icon: iconProp,
   iconSize: iconSizeProp,
+  clickTransformation = "default" /* Default */,
   componentsProps
 }) {
   const responsive = ResponsiveProp ?? true;
@@ -6680,6 +6681,16 @@ function RemoraidButton({
   const iconElement = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Icon4, {
     ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   }, undefined, false, undefined, this);
+  const clickTransformationClassNames = {
+    ["default" /* Default */]: null,
+    ["none" /* None */]: "remoraid-button-none",
+    ["scale" /* Scale */]: "remoraid-button-scale",
+    ["tiltDown" /* TiltDown */]: "remoraid-button-tilt-down",
+    ["tiltUp" /* TiltUp */]: "remoraid-button-tilt-up",
+    ["tiltLeft" /* TiltLeft */]: "remoraid-button-tilt-left",
+    ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
+  };
+  const clickTransformationClass = clickTransformationClassNames[clickTransformation];
   return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core18.Transition, {
     mounted,
     transition: "fade",
@@ -6702,10 +6713,8 @@ function RemoraidButton({
             ...componentsProps?.ActionIcon,
             hiddenFrom: !responsive ? undefined : breakpoint,
             display: !responsive && !collapsed ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
-            style: {
-              ...transitionStyle,
-              ...componentsProps?.ActionIcon?.style ?? componentsProps?.button?.style
-            },
+            style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.ActionIcon?.style),
+            className: clsx_default(clickTransformationClass, componentsProps?.ActionIcon?.className, componentsProps?.button?.className),
             children: iconElement
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
@@ -6720,10 +6729,8 @@ function RemoraidButton({
           ...componentsProps?.Button,
           visibleFrom: !responsive ? undefined : breakpoint,
           display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
-          style: {
-            ...transitionStyle,
-            ...componentsProps?.Button?.style ?? componentsProps?.button?.style
-          },
+          style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.Button?.style),
+          className: clsx_default(clickTransformationClass, componentsProps?.Button?.className, componentsProps?.button?.className),
           children: label
         }, undefined, false, undefined, this)
       ]
@@ -6766,7 +6773,11 @@ function WidgetWrapper({
   const handleEnter = () => {
     updateActiveWidget(config.widgetId);
   };
-  const handleLeave = () => {
+  const handleLeave = (e) => {
+    const to = e.relatedTarget;
+    if (to && to.closest?.("[data-control-button]")) {
+      return;
+    }
     updateActiveWidget(null);
   };
   const mounted = Boolean(widget?.selected);
@@ -6794,15 +6805,11 @@ function WidgetWrapper({
       display: "flex",
       ...componentsProps?.container,
       onMouseEnter: (e) => {
-        if (!pinnableSection) {
-          handleEnter();
-        }
+        handleEnter();
         componentsProps?.container?.onMouseEnter?.(e);
       },
       onMouseLeave: (e) => {
-        if (!pinnableSection) {
-          handleLeave();
-        }
+        handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
       style: import_lodash12.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
@@ -6833,7 +6840,7 @@ function WidgetWrapper({
                 return;
               }
               updateWidgetSelection(page.pageId, config.widgetId, false);
-              handleLeave();
+              handleLeave(e);
               componentsProps?.closeButton?.onClick?.(e);
             }
           }, undefined, false, undefined, this)
@@ -6850,21 +6857,10 @@ function WidgetWrapper({
       ...componentsProps?.Pinnable,
       componentsProps: {
         ...componentsProps?.Pinnable?.componentsProps,
-        container: {
-          ...componentsProps?.Pinnable?.componentsProps?.container,
-          onMouseEnter: (e) => {
-            handleEnter();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseEnter?.(e);
-          },
-          onMouseLeave: (e) => {
-            handleLeave();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseLeave?.(e);
-          }
-        },
         button: {
           ...componentsProps?.Pinnable?.componentsProps?.button,
           onClick: (e) => {
-            handleLeave();
+            handleLeave(e);
             componentsProps?.Pinnable?.componentsProps?.button?.onClick?.(e);
           }
         },
@@ -7168,6 +7164,49 @@ var import_core25 = require("@mantine/core");
 var import_react21 = require("react");
 var import_core26 = require("remoraid/core");
 var jsx_dev_runtime36 = require("react/jsx-dev-runtime");
+function InputWrapperScrollArea({
+  children,
+  label,
+  mah,
+  description,
+  error,
+  required = false,
+  componentsProps
+}) {
+  const theme = import_core26.useRemoraidTheme();
+  const [isHovering, setIsHovering] = import_react21.useState(false);
+  return /* @__PURE__ */ jsx_dev_runtime36.jsxDEV(import_core25.Input.Wrapper, {
+    label,
+    error,
+    onMouseEnter: () => setIsHovering(true),
+    onMouseLeave: () => setIsHovering(false),
+    description,
+    withAsterisk: required,
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsx_dev_runtime36.jsxDEV(import_core25.Paper, {
+      shadow: "none",
+      p: 0,
+      mt: Boolean(description) ? 4 : 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_runtime36.jsxDEV(import_core25.ScrollArea, {
+        mah,
+        px: "md",
+        flex: 1,
+        ...componentsProps?.ScrollArea,
+        children: /* @__PURE__ */ jsx_dev_runtime36.jsxDEV(import_core25.Box, {
+          ...componentsProps?.childrenContainer,
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
 // src/jsonforms/renderers/AnyOfControl.tsx
 var jsx_dev_runtime37 = require("react/jsx-dev-runtime");
 function PlainAnyOfControl(props) {
@@ -7431,24 +7470,34 @@ var NumberControl_default = NumberControl;
 // src/jsonforms/renderers/ObjectControl.tsx
 var import_react26 = require("@jsonforms/react");
 var import_core33 = require("@mantine/core");
+var import_react27 = require("react");
 var jsx_dev_runtime41 = require("react/jsx-dev-runtime");
-function PlainObjectControl(props) {
-  const { label, schema, data, handleChange, path, required } = props;
+function PlainObjectControl({
+  label: labelProp,
+  schema,
+  data,
+  handleChange,
+  path,
+  required
+}) {
   const { formOptions } = useFormOptions();
   const { renderers, cells } = import_react26.useJsonForms();
   const theme = useRemoraidTheme();
-  const mt = formOptions.withDescriptions && schema.description && schema.description.length > 0 ? 4 : 0;
+  const [input, setInput] = import_react27.useState("");
+  const [error, setError] = import_react27.useState(false);
+  const label = labelProp !== "remoraid-array-item" ? labelProp : null;
+  const description = formOptions.withDescriptions ? schema.description : undefined;
   return /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(jsx_dev_runtime41.Fragment, {
-    children: /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(import_core33.Input.Wrapper, {
-      label: label !== "remoraid-array-item" ? label : null,
-      description: formOptions.withDescriptions ? schema.description : undefined,
+    children: schema.properties && Object.keys(schema.properties).length > 0 ? /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(import_core33.Input.Wrapper, {
+      label,
+      description,
       withAsterisk: required,
-      children: schema.properties && Object.keys(schema.properties).length > 0 ? /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(import_core33.Paper, {
+      children: /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(import_core33.Paper, {
         withBorder: true,
         bg: "var(--remoraid-transparent-background)",
         shadow: "0",
         p: formOptions.gutter,
-        mt,
+        mt: Boolean(description) ? 4 : 0,
         children: /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(import_react26.JsonForms, {
           schema: {
             ...schema,
@@ -7462,11 +7511,31 @@ function PlainObjectControl(props) {
           },
           validationMode: "NoValidation"
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(AlertMinimal, {
-        category: "negative" /* Negative */,
-        title: "No properties specified",
-        text: "The JSON schema for this object did not specify any properties.",
-        componentsProps: { alert: { mt } }
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(InputWrapperScrollArea, {
+      label: label ?? undefined,
+      error: error ? "Invalid JSON" : undefined,
+      description,
+      required,
+      mah: 140,
+      children: /* @__PURE__ */ jsx_dev_runtime41.jsxDEV(import_core33.JsonInput, {
+        onChange: (newValue) => {
+          setInput(newValue);
+          try {
+            const parsedValue = JSON.parse(newValue);
+            handleChange(path, parsedValue);
+            setError(false);
+          } catch {
+            setError(true);
+            return;
+          }
+        },
+        value: input,
+        minRows: 4,
+        autosize: true,
+        formatOnBlur: true,
+        variant: "unstyled",
+        styles: { input: { border: "none" } }
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
@@ -7475,7 +7544,7 @@ var ObjectControl = import_react26.withJsonFormsControlProps(PlainObjectControl)
 var ObjectControl_default = ObjectControl;
 
 // src/jsonforms/renderers/StringSelectControl.tsx
-var import_react27 = require("@jsonforms/react");
+var import_react28 = require("@jsonforms/react");
 var import_core35 = require("@mantine/core");
 var jsx_dev_runtime42 = require("react/jsx-dev-runtime");
 function PlainTimestampControl({
@@ -7504,7 +7573,7 @@ function PlainTimestampControl({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-var TimestampControl = import_react27.withJsonFormsControlProps(PlainTimestampControl);
+var TimestampControl = import_react28.withJsonFormsControlProps(PlainTimestampControl);
 var StringSelectControl_default = TimestampControl;
 
 // src/jsonforms/renderers/testers/anyOfTester.ts
@@ -7558,7 +7627,7 @@ var tester9 = import_core44.rankWith(2, import_core44.uiTypeIs("VerticalLayout")
 var verticalLayoutTester_default = tester9;
 
 // src/jsonforms/renderers/TextControl.tsx
-var import_react28 = require("@jsonforms/react");
+var import_react29 = require("@jsonforms/react");
 var import_core45 = require("@mantine/core");
 var jsx_dev_runtime43 = require("react/jsx-dev-runtime");
 function PlainTextControl({
@@ -7586,11 +7655,11 @@ function PlainTextControl({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-var TextControl = import_react28.withJsonFormsControlProps(PlainTextControl);
+var TextControl = import_react29.withJsonFormsControlProps(PlainTextControl);
 var TextControl_default = TextControl;
 
 // src/jsonforms/renderers/TimestampControl.tsx
-var import_react29 = require("@jsonforms/react");
+var import_react30 = require("@jsonforms/react");
 var import_dates = require("@mantine/dates");
 var jsx_dev_runtime44 = require("react/jsx-dev-runtime");
 function PlainTimestampControl2({
@@ -7620,13 +7689,13 @@ function PlainTimestampControl2({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-var TimestampControl2 = import_react29.withJsonFormsControlProps(PlainTimestampControl2);
+var TimestampControl2 = import_react30.withJsonFormsControlProps(PlainTimestampControl2);
 var TimestampControl_default = TimestampControl2;
 
 // src/jsonforms/renderers/VerticalLayout.tsx
-var import_react30 = __toESM(require("react"));
-var import_react31 = require("@jsonforms/react");
+var import_react31 = __toESM(require("react"));
 var import_react32 = require("@jsonforms/react");
+var import_react33 = require("@jsonforms/react");
 var jsx_dev_runtime45 = require("react/jsx-dev-runtime");
 "use client";
 var JsonFormsLayout = ({
@@ -7641,14 +7710,14 @@ var JsonFormsLayout = ({
   }, undefined, false, undefined, this);
 };
 var renderChildren = (layout, schema, className, path, enabled) => {
-  const { renderers, cells } = import_react32.useJsonForms();
+  const { renderers, cells } = import_react33.useJsonForms();
   const { formOptions } = useFormOptions();
   const gutter = typeof formOptions.gutter === "string" ? `var(--mantine-spacing-${formOptions.gutter})` : `${formOptions.gutter}px`;
   return layout.elements.map((child, index) => {
     return /* @__PURE__ */ jsx_dev_runtime45.jsxDEV("div", {
       className,
       style: { marginTop: index === 0 ? 0 : gutter },
-      children: /* @__PURE__ */ jsx_dev_runtime45.jsxDEV(import_react32.JsonFormsDispatch, {
+      children: /* @__PURE__ */ jsx_dev_runtime45.jsxDEV(import_react33.JsonFormsDispatch, {
         renderers,
         cells,
         uischema: child,
@@ -7665,7 +7734,7 @@ var VerticalLayoutRenderer = (props) => {
     ...otherProps
   }, undefined, false, undefined, this);
 };
-var VerticalLayoutRendererComponent = import_react30.default.memo(function VerticalLayoutRendererComponent2({
+var VerticalLayoutRendererComponent = import_react31.default.memo(function VerticalLayoutRendererComponent2({
   schema,
   uischema,
   path,
@@ -7685,7 +7754,7 @@ var VerticalLayoutRendererComponent = import_react30.default.memo(function Verti
     children: renderChildren(verticalLayout, schema, childClassNames, path, enabled)
   }, undefined, false, undefined, this);
 });
-var VerticalLayout = import_react31.withJsonFormsLayoutProps(VerticalLayoutRenderer, false);
+var VerticalLayout = import_react32.withJsonFormsLayoutProps(VerticalLayoutRenderer, false);
 var VerticalLayout_default = VerticalLayout;
 
 // src/jsonforms/renderers/index.ts

package/dist/jsonforms/index.js

@@ -6732,6 +6732,7 @@ function RemoraidButton({
   mounted = true,
   icon: iconProp,
   iconSize: iconSizeProp,
+  clickTransformation = "default" /* Default */,
   componentsProps
 }) {
   const responsive = ResponsiveProp ?? true;
@@ -6743,6 +6744,16 @@ function RemoraidButton({
   const iconElement = /* @__PURE__ */ jsxDEV25(Icon4, {
     ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   }, undefined, false, undefined, this);
+  const clickTransformationClassNames = {
+    ["default" /* Default */]: null,
+    ["none" /* None */]: "remoraid-button-none",
+    ["scale" /* Scale */]: "remoraid-button-scale",
+    ["tiltDown" /* TiltDown */]: "remoraid-button-tilt-down",
+    ["tiltUp" /* TiltUp */]: "remoraid-button-tilt-up",
+    ["tiltLeft" /* TiltLeft */]: "remoraid-button-tilt-left",
+    ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
+  };
+  const clickTransformationClass = clickTransformationClassNames[clickTransformation];
   return /* @__PURE__ */ jsxDEV25(Transition6, {
     mounted,
     transition: "fade",
@@ -6765,10 +6776,8 @@ function RemoraidButton({
             ...componentsProps?.ActionIcon,
             hiddenFrom: !responsive ? undefined : breakpoint,
             display: !responsive && !collapsed ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
-            style: {
-              ...transitionStyle,
-              ...componentsProps?.ActionIcon?.style ?? componentsProps?.button?.style
-            },
+            style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.ActionIcon?.style),
+            className: clsx_default(clickTransformationClass, componentsProps?.ActionIcon?.className, componentsProps?.button?.className),
             children: iconElement
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
@@ -6783,10 +6792,8 @@ function RemoraidButton({
           ...componentsProps?.Button,
           visibleFrom: !responsive ? undefined : breakpoint,
           display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
-          style: {
-            ...transitionStyle,
-            ...componentsProps?.Button?.style ?? componentsProps?.button?.style
-          },
+          style: import_lodash11.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.Button?.style),
+          className: clsx_default(clickTransformationClass, componentsProps?.Button?.className, componentsProps?.button?.className),
           children: label
         }, undefined, false, undefined, this)
       ]
@@ -6834,7 +6841,11 @@ function WidgetWrapper({
   const handleEnter = () => {
     updateActiveWidget(config.widgetId);
   };
-  const handleLeave = () => {
+  const handleLeave = (e) => {
+    const to = e.relatedTarget;
+    if (to && to.closest?.("[data-control-button]")) {
+      return;
+    }
     updateActiveWidget(null);
   };
   const mounted = Boolean(widget?.selected);
@@ -6862,15 +6873,11 @@ function WidgetWrapper({
       display: "flex",
       ...componentsProps?.container,
       onMouseEnter: (e) => {
-        if (!pinnableSection) {
-          handleEnter();
-        }
+        handleEnter();
         componentsProps?.container?.onMouseEnter?.(e);
       },
       onMouseLeave: (e) => {
-        if (!pinnableSection) {
-          handleLeave();
-        }
+        handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
       style: import_lodash12.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
@@ -6901,7 +6908,7 @@ function WidgetWrapper({
                 return;
               }
               updateWidgetSelection(page.pageId, config.widgetId, false);
-              handleLeave();
+              handleLeave(e);
               componentsProps?.closeButton?.onClick?.(e);
             }
           }, undefined, false, undefined, this)
@@ -6918,21 +6925,10 @@ function WidgetWrapper({
       ...componentsProps?.Pinnable,
       componentsProps: {
         ...componentsProps?.Pinnable?.componentsProps,
-        container: {
-          ...componentsProps?.Pinnable?.componentsProps?.container,
-          onMouseEnter: (e) => {
-            handleEnter();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseEnter?.(e);
-          },
-          onMouseLeave: (e) => {
-            handleLeave();
-            componentsProps?.Pinnable?.componentsProps?.container?.onMouseLeave?.(e);
-          }
-        },
         button: {
           ...componentsProps?.Pinnable?.componentsProps?.button,
           onClick: (e) => {
-            handleLeave();
+            handleLeave(e);
             componentsProps?.Pinnable?.componentsProps?.button?.onClick?.(e);
           }
         },
@@ -7250,6 +7246,49 @@ import {
 import { useState as useState11 } from "react";
 import { useRemoraidTheme as useRemoraidTheme2 } from "remoraid/core";
 import { jsxDEV as jsxDEV36 } from "react/jsx-dev-runtime";
+function InputWrapperScrollArea({
+  children,
+  label,
+  mah,
+  description,
+  error,
+  required = false,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme2();
+  const [isHovering, setIsHovering] = useState11(false);
+  return /* @__PURE__ */ jsxDEV36(Input.Wrapper, {
+    label,
+    error,
+    onMouseEnter: () => setIsHovering(true),
+    onMouseLeave: () => setIsHovering(false),
+    description,
+    withAsterisk: required,
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsxDEV36(Paper4, {
+      shadow: "none",
+      p: 0,
+      mt: Boolean(description) ? 4 : 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__ */ jsxDEV36(ScrollArea4, {
+        mah,
+        px: "md",
+        flex: 1,
+        ...componentsProps?.ScrollArea,
+        children: /* @__PURE__ */ jsxDEV36(Box6, {
+          ...componentsProps?.childrenContainer,
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
 // src/jsonforms/renderers/AnyOfControl.tsx
 import { jsxDEV as jsxDEV37, Fragment as Fragment4 } from "react/jsx-dev-runtime";
 function PlainAnyOfControl(props) {
@@ -7525,25 +7564,35 @@ import {
   useJsonForms as useJsonForms3,
   withJsonFormsControlProps as withJsonFormsControlProps5
 } from "@jsonforms/react";
-import { Input as Input4, Paper as Paper7 } from "@mantine/core";
+import { Input as Input4, JsonInput, Paper as Paper7 } from "@mantine/core";
+import { useState as useState12 } from "react";
 import { jsxDEV as jsxDEV41, Fragment as Fragment8 } from "react/jsx-dev-runtime";
-function PlainObjectControl(props) {
-  const { label, schema, data, handleChange, path, required } = props;
+function PlainObjectControl({
+  label: labelProp,
+  schema,
+  data,
+  handleChange,
+  path,
+  required
+}) {
   const { formOptions } = useFormOptions();
   const { renderers, cells } = useJsonForms3();
   const theme = useRemoraidTheme();
-  const mt = formOptions.withDescriptions && schema.description && schema.description.length > 0 ? 4 : 0;
+  const [input, setInput] = useState12("");
+  const [error, setError] = useState12(false);
+  const label = labelProp !== "remoraid-array-item" ? labelProp : null;
+  const description = formOptions.withDescriptions ? schema.description : undefined;
   return /* @__PURE__ */ jsxDEV41(Fragment8, {
-    children: /* @__PURE__ */ jsxDEV41(Input4.Wrapper, {
-      label: label !== "remoraid-array-item" ? label : null,
-      description: formOptions.withDescriptions ? schema.description : undefined,
+    children: schema.properties && Object.keys(schema.properties).length > 0 ? /* @__PURE__ */ jsxDEV41(Input4.Wrapper, {
+      label,
+      description,
       withAsterisk: required,
-      children: schema.properties && Object.keys(schema.properties).length > 0 ? /* @__PURE__ */ jsxDEV41(Paper7, {
+      children: /* @__PURE__ */ jsxDEV41(Paper7, {
         withBorder: true,
         bg: "var(--remoraid-transparent-background)",
         shadow: "0",
         p: formOptions.gutter,
-        mt,
+        mt: Boolean(description) ? 4 : 0,
         children: /* @__PURE__ */ jsxDEV41(JsonForms3, {
           schema: {
             ...schema,
@@ -7557,11 +7606,31 @@ function PlainObjectControl(props) {
           },
           validationMode: "NoValidation"
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV41(AlertMinimal, {
-        category: "negative" /* Negative */,
-        title: "No properties specified",
-        text: "The JSON schema for this object did not specify any properties.",
-        componentsProps: { alert: { mt } }
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV41(InputWrapperScrollArea, {
+      label: label ?? undefined,
+      error: error ? "Invalid JSON" : undefined,
+      description,
+      required,
+      mah: 140,
+      children: /* @__PURE__ */ jsxDEV41(JsonInput, {
+        onChange: (newValue) => {
+          setInput(newValue);
+          try {
+            const parsedValue = JSON.parse(newValue);
+            handleChange(path, parsedValue);
+            setError(false);
+          } catch {
+            setError(true);
+            return;
+          }
+        },
+        value: input,
+        minRows: 4,
+        autosize: true,
+        formatOnBlur: true,
+        variant: "unstyled",
+        styles: { input: { border: "none" } }
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remoraid",
-  "version": "2.28.2",
+  "version": "2.31.3",
   "author": "Konrad Goldammer",
   "repository": {
     "type": "git",