remoraid 2.41.3 → 2.42.1

package/dist/core/index.cjs

@@ -5479,6 +5479,7 @@ __export(exports_core, {
   scrollToWidget: () => scrollToWidget,
   remoraidAppShellLayoutId: () => remoraidAppShellLayoutId,
   isValidElementOfType: () => isValidElementOfType,
+  isIcon: () => isIcon,
   getElementTypeName: () => getElementTypeName,
   getDefaultWidgetContext: () => getDefaultWidgetContext,
   getDefaultNavigationElements: () => getDefaultNavigationElements,
@@ -5855,6 +5856,13 @@ var scrollToWidget = (widgetId) => {
     block: "start"
   });
 };
+var isIcon = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return "render" in candidate && typeof candidate.render === "function";
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 var import_core2 = require("@mantine/core");
@@ -6181,8 +6189,9 @@ function AppProvider({
   appContext: appContextProp,
   children
 }) {
+  const { logo, ...appContextPropWithoutLogo } = appContextProp;
   return /* @__PURE__ */ jsx_runtime8.jsx(appContext.Provider, {
-    value: import_lodash4.merge(defaultAppContext, appContextProp),
+    value: { ...import_lodash4.merge(defaultAppContext, appContextPropWithoutLogo), logo },
     children
   });
 }
@@ -6191,7 +6200,7 @@ function AppProvider({
 var import_lodash13 = __toESM(require_lodash());
 
 // src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_lodash12 = __toESM(require_lodash());
 
 // src/core/components/AppShell/Footer/FooterMinimal/index.tsx
@@ -6521,9 +6530,10 @@ var Footer_default = Object.assign(Footer, {
 });
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+var import_react13 = require("react");
 var import_core9 = require("@mantine/core");
 var import_navigation2 = require("next/navigation");
 var import_lodash8 = __toESM(require_lodash());
@@ -6685,6 +6695,7 @@ function RemoraidButton({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+var import_image = __toESM(require("next/image"));
 var jsx_runtime16 = require("react/jsx-runtime");
 function NavbarMinimalContent({
   orientation,
@@ -6722,10 +6733,14 @@ function NavbarMinimalContent({
   const logoButton = app.logo ? /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
     label: app.name,
     variant: "subtle",
-    icon: app.logo({
+    icon: import_react13.isValidElement(app.logo) || isIcon(app.logo) ? app.logo : /* @__PURE__ */ jsx_runtime16.jsx(import_image.default, {
+      src: app.logo,
+      alt: "App logo",
+      ...componentsProps?.logo,
       style: {
         width: theme.componentsProps.icons[logoIconSize].size,
-        height: theme.componentsProps.icons[logoIconSize].size
+        height: theme.componentsProps.icons[logoIconSize].size,
+        ...componentsProps?.logo?.style
       }
     }),
     responsive: buttonResponsive,
@@ -6789,7 +6804,7 @@ function NavbarMinimalContent({
   const buttons = elements.filter((element) => !element.static).sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).slice(0, maxElements).map((element, i) => button(element, `nav-element-${i}`));
   const staticElements = elements.filter((element) => element.static);
   const staticButtons = staticElements.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).map((element, i) => button(element, `static-nav-element-${i}`));
-  const collapseStaticElements = staticElements.length > 1;
+  const collapseStaticElements = staticElements.filter((element) => element.mounted ?? true).length > 1;
   const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Box, {
     hiddenFrom: collapseStaticElementsBreakpoint,
     children: /* @__PURE__ */ jsx_runtime16.jsx(NavigationMenu, {
@@ -6864,7 +6879,7 @@ function NavbarMinimalContent({
 var import_lodash11 = __toESM(require_lodash());
 
 // src/core/components/Pinnable/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_icons_react7 = require("@tabler/icons-react");
 var import_core12 = require("@mantine/core");
 
@@ -6915,7 +6930,7 @@ function ControlButton({
 }
 
 // src/core/components/Controls/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_core11 = require("@mantine/core");
 var import_icons_react6 = require("@tabler/icons-react");
 var import_lodash10 = __toESM(require_lodash());
@@ -6933,12 +6948,12 @@ function Controls({
   const additionalButtons = additionalButtonsProp?.map((additionalButton) => asElementOrPropsOfType(ControlButton, additionalButton, "Check the 'additionalButtons' property of 'Controls'."));
   const children = asChildrenOfType(ControlButton, childrenProp, "Check children passed to 'Controls' component.");
   const theme = useRemoraidTheme();
-  const [pos, setPos] = import_react13.useState({
+  const [pos, setPos] = import_react14.useState({
     x: 0,
     y: 0
   });
-  const offsetRef = import_react13.useRef({ x: 0, y: 0 });
-  const containerRef = import_react13.useRef(null);
+  const offsetRef = import_react14.useRef({ x: 0, y: 0 });
+  const containerRef = import_react14.useRef(null);
   const clamp = (v, min, max) => {
     return Math.min(Math.max(v, min), max);
   };
@@ -7040,13 +7055,13 @@ function Pinnable({
 }) {
   const layoutType = layoutTypeProp ?? "frame" /* Frame */;
   const { layouts } = useLayouts();
-  const [pinned, setPinned] = import_react14.useState(initialValue);
-  const containerRef = import_react14.useRef(null);
+  const [pinned, setPinned] = import_react15.useState(initialValue);
+  const containerRef = import_react15.useRef(null);
   const layout = layouts[layoutId ?? remoraidAppShellLayoutId];
   if (layout && layout.type !== layoutType) {
     throw new TypeError(`Prop 'layoutId' in '${Pinnable.name}' refers to a layout of type ${layout.type}, expected ${layoutType}. Leave 'layoutId' undefined, if you want to use the layout in '${AppShell_default.name}' as reference layout.`);
   }
-  const controlButton = import_react14.useMemo(() => /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
+  const controlButton = import_react15.useMemo(() => /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
     icon: pinned ? import_icons_react7.IconPinnedOff : import_icons_react7.IconPin,
     tooltip: pinned ? "Unpin" : "Pin",
     color: "green",
@@ -7076,7 +7091,7 @@ function Pinnable({
       children
     ]
   });
-  import_react14.useEffect(() => {
+  import_react15.useEffect(() => {
     onPinnedValueChange?.(pinned);
   }, [pinned]);
   if (!layout) {
@@ -7105,7 +7120,7 @@ function NavbarMinimal({
       navbar: { position }
     }
   } = useAppShellUserExperience();
-  const [hover, setHover] = import_react15.useState(false);
+  const [hover, setHover] = import_react16.useState(false);
   const handleEnter = () => {
     setHover(true);
   };
@@ -7277,7 +7292,7 @@ var defaultAppShellUserExperience = {
 var defaultAppShellUserExperienceCookieName = "remoraid-app-shell-user-experience";
 var appShellUserExperienceContext = createUserExperienceContext(defaultAppShellUserExperience);
 var useAppShellUserExperience = () => {
-  return import_react16.useContext(appShellUserExperienceContext);
+  return import_react17.useContext(appShellUserExperienceContext);
 };
 function AppShellUserExperienceProvider({
   children,
@@ -7364,12 +7379,12 @@ var import_core16 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
 var import_core14 = require("@mantine/core");
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_navigation3 = require("next/navigation");
 var jsx_runtime24 = require("react/jsx-runtime");
-var pageContext = import_react17.default.createContext(null);
+var pageContext = import_react18.default.createContext(null);
 var usePage = () => {
-  return import_react17.useContext(pageContext);
+  return import_react18.useContext(pageContext);
 };
 function Page({
   children,
@@ -7382,7 +7397,7 @@ function Page({
   const pathname = import_navigation3.usePathname();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
-  import_react17.useEffect(() => {
+  import_react18.useEffect(() => {
     if (!isPageRegistered(pageId)) {
       if (config?.registerPageDirectly) {
         registerPage(pageId, []);
@@ -7405,7 +7420,7 @@ function Page({
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 var import_icons_react9 = require("@tabler/icons-react");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core15 = require("@mantine/core");
@@ -7461,15 +7476,15 @@ function WidgetSelectionHeader({
   if (!page) {
     throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
-  const [hover, setHover] = import_react18.useState(false);
-  const [isPinned, setIsPinned] = import_react18.useState(initiallyPinned);
+  const [hover, setHover] = import_react19.useState(false);
+  const [isPinned, setIsPinned] = import_react19.useState(initiallyPinned);
   const handleEnter = () => {
     setHover(true);
   };
   const handleLeave = () => {
     setHover(false);
   };
-  const scrollAreaRef = import_react18.useRef(null);
+  const scrollAreaRef = import_react19.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_runtime26.jsxs(import_core16.Flex, {
@@ -7485,7 +7500,7 @@ function WidgetSelectionHeader({
     },
     onMouseLeave: (e) => {
       if (!pinnableSection) {
-        handleEnter();
+        handleLeave();
       }
       componentsProps?.container?.onMouseEnter?.(e);
     },
@@ -7570,7 +7585,7 @@ function WidgetSelectionHeader({
       })
     ]
   });
-  import_react18.useEffect(() => {
+  import_react19.useEffect(() => {
     if (!activeWidget) {
       return;
     }
@@ -7633,7 +7648,7 @@ function WidgetSelectionHeader({
 }
 // src/core/components/BadgeGroup/index.tsx
 var import_core18 = require("@mantine/core");
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
 var import_core17 = require("@mantine/core");
@@ -7785,7 +7800,7 @@ function AlertMinimal({
 }
 // src/core/components/Widget/WidgetWrapper/index.tsx
 var import_core20 = require("@mantine/core");
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_icons_react10 = require("@tabler/icons-react");
 var import_lodash17 = __toESM(require_lodash());
 var jsx_runtime30 = require("react/jsx-runtime");
@@ -7809,11 +7824,11 @@ function WidgetWrapper({
   } = useWidgets();
   const page = usePage();
   const theme = useRemoraidTheme();
-  const [controlsContainer, setControlsContainer] = import_react20.useState(null);
+  const [controlsContainer, setControlsContainer] = import_react21.useState(null);
   const widget = page ? widgets[page.pageId]?.[config.widgetId] : undefined;
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  const containerRef = import_react20.useRef(null);
-  const controlsContainerRef = import_react20.useCallback((n) => {
+  const containerRef = import_react21.useRef(null);
+  const controlsContainerRef = import_react21.useCallback((n) => {
     setControlsContainer(n);
   }, [setControlsContainer]);
   const handleEnter = () => {
@@ -7919,7 +7934,7 @@ function WidgetWrapper({
       children: element
     });
   }
-  import_react20.useEffect(() => {
+  import_react21.useEffect(() => {
     if (!page) {
       return;
     }
@@ -7931,7 +7946,7 @@ function WidgetWrapper({
 }
 // src/core/components/Widget/index.tsx
 var import_core21 = require("@mantine/core");
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_lodash18 = __toESM(require_lodash());
 var jsx_runtime31 = require("react/jsx-runtime");
 var react2 = require("react");
@@ -8045,7 +8060,7 @@ function Widget({
             });
           })
         }),
-        (loading || import_react21.Children.toArray(children).length > 0) && /* @__PURE__ */ jsx_runtime31.jsx(import_core21.ScrollArea.Autosize, {
+        (loading || import_react22.Children.toArray(children).length > 0) && /* @__PURE__ */ jsx_runtime31.jsx(import_core21.ScrollArea.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           className: clsx_default("remoraid-widget-children-container", componentsProps?.childrenContainer?.className),
@@ -8124,7 +8139,7 @@ function EnvironmentShell({
   return null;
 }
 // src/core/components/SettingsWidget/index.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_icons_react12 = require("@tabler/icons-react");
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
@@ -8166,9 +8181,9 @@ function SaveButton({
 // src/core/components/SettingsWidget/index.tsx
 var jsx_runtime35 = require("react/jsx-runtime");
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = import_react22.createContext(defaultSettingsWidgetContext);
+var settingsWidgetContext = import_react23.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return import_react22.useContext(settingsWidgetContext);
+  return import_react23.useContext(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -8214,7 +8229,7 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_core24 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
@@ -8247,9 +8262,9 @@ var jsx_runtime37 = require("react/jsx-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = import_react23.createContext(defaultSettingsTableOptions);
+var settingsTableOptionsContext = import_react24.createContext(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return import_react23.useContext(settingsTableOptionsContext);
+  return import_react24.useContext(settingsTableOptionsContext);
 };
 function SettingsTable({
   leftColumnWidth,
@@ -8440,7 +8455,7 @@ function FooterSettingsWidget({
   });
 }
 // src/core/components/ContextClusterProvider/index.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var jsx_runtime40 = require("react/jsx-runtime");
 var createContextCluster = (generalDefaultValue, staticIds) => {
   const isStaticId = (id) => {
@@ -8452,16 +8467,16 @@ var createContextCluster = (generalDefaultValue, staticIds) => {
   const contexts = {};
   const defaultValues = {};
   const createContext9 = (id, defaultValue) => {
-    const context = import_react24.default.createContext(defaultValue ?? generalDefaultValue);
+    const context = import_react25.default.createContext(defaultValue ?? generalDefaultValue);
     contexts[id] = context;
     defaultValues[id] = defaultValue ?? generalDefaultValue;
     return context;
   };
   const useContext13 = (id) => {
     if (isStaticId(id)) {
-      return contexts[id] ? import_react24.default.useContext(contexts[id]) : generalDefaultValue;
+      return contexts[id] ? import_react25.default.useContext(contexts[id]) : generalDefaultValue;
     }
-    return contexts[id] ? import_react24.default.useContext(contexts[id]) : null;
+    return contexts[id] ? import_react25.default.useContext(contexts[id]) : null;
   };
   return {
     contexts,
@@ -8483,7 +8498,7 @@ function ContextClusterProvider({
 }
 // src/core/components/InputWrapperScrollArea/index.tsx
 var import_core27 = require("@mantine/core");
-var import_react25 = require("react");
+var import_react26 = require("react");
 var jsx_runtime41 = require("react/jsx-runtime");
 function InputWrapperScrollArea({
   children,
@@ -8495,7 +8510,7 @@ function InputWrapperScrollArea({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  const [isHovering, setIsHovering] = import_react25.useState(false);
+  const [isHovering, setIsHovering] = import_react26.useState(false);
   return /* @__PURE__ */ jsx_runtime41.jsx(import_core27.Input.Wrapper, {
     label,
     error,

package/dist/core/index.d.ts

@@ -73,7 +73,7 @@ interface StaticRemoraidAppContext {
 	navbarVariant: AppShellNavbarVariant;
 	navbarMobileVariant: AppShellNavbarMobileVariant;
 	footerVariant: AppShellFooterVariant;
-	logo?: AppLogo;
+	logo?: Icon2 | ImageProps["src"] | ReactElement;
 	auth?: RemoraidAuthContext;
 }
 type CustomAppVariables = { [K in Exclude<string, keyof StaticRemoraidAppContext>] : any };
@@ -286,11 +286,11 @@ declare function RemoraidProvider({ children, theme, initialUserExperience, comp
 import { BoxProps as BoxProps2 } from "@mantine/core";
 import { ComponentProps as ComponentProps7, PropsWithChildren as PropsWithChildren12, ReactNode as ReactNode21 } from "react";
 import { PropsWithChildren as PropsWithChildren7, ReactNode as ReactNode7 } from "react";
-import { SetRequired } from "type-fest";
+import { SetOptional } from "type-fest";
 declare const defaultAppContext: RemoraidAppContext<CustomAppVariables>;
 declare const useRemoraidApp: () => RemoraidAppContext<CustomAppVariables>;
 interface AppProviderProps<V extends CustomAppVariables> {
-	appContext: SetRequired<Partial<RemoraidAppContext<V>>, "name" | "nav">;
+	appContext: SetOptional<RemoraidAppContext<V>, "navbarVariant" | "footerVariant" | "navbarMobileVariant">;
 }
 declare function AppProvider2<V extends CustomAppVariables>({ appContext: appContextProp, children }: PropsWithChildren7<AppProviderProps<V>>): ReactNode7;
 import { ComponentProps as ComponentProps4, ReactNode as ReactNode17 } from "react";
@@ -308,10 +308,11 @@ interface NavigationMenuProps {
 	};
 }
 import { ActionIconProps, ActionIconVariant, ButtonProps, ButtonVariant, MantineBreakpoint as MantineBreakpoint2, MantineColor, MantineSize as MantineSize3, TooltipProps, TransitionProps as TransitionProps3 } from "@mantine/core";
-import { Icon as Icon3, IconProps as IconProps3 } from "@tabler/icons-react";
+import { Icon as Icon4, IconProps as IconProps3 } from "@tabler/icons-react";
 import { MouseEventHandler as MouseEventHandler2, ReactElement as ReactElement4, ReactNode as ReactNode9 } from "react";
 import { MantineSize as MantineSize2 } from "@mantine/core";
 import { ComponentProps, ElementType, ReactElement as ReactElement3 } from "react";
+import { Icon as Icon3 } from "@tabler/icons-react";
 declare const co: <T>(condition: (value: T) => boolean, value: T, fallback: T) => T;
 type Common<
 	A,
@@ -352,6 +353,7 @@ declare const asElementOrPropsOfType: <
 >(type: T, elementOrProps: ReactElement3 | P, additionalErrorMessage?: string) => ElementOrPropsOfType<T, P>;
 declare const getDefaultButtonIconSize: (buttonSize: MantineSize2) => RemoraidIconSize;
 declare const scrollToWidget: (widgetId: string) => void;
+declare const isIcon: (value: unknown) => value is Icon3;
 type RemoraidButtonDefaultResponsivity = true;
 interface ExplicitRemoraidButtonProps<Responsive extends boolean> {
 	responsive: Responsive;
@@ -360,7 +362,7 @@ interface ExplicitRemoraidButtonProps<Responsive extends boolean> {
 	color?: MantineColor;
 	breakpoint?: true extends Responsive ? MantineBreakpoint2 : never;
 	collapsed?: false extends Responsive ? boolean : never;
-	icon?: Icon3 | ReactElement4;
+	icon?: Icon4 | ReactElement4;
 	iconSize?: RemoraidIconSize;
 	onClick?: MouseEventHandler2;
 	loading?: boolean;
@@ -378,6 +380,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, clickTransformation, componentsProps }: RemoraidButtonProps<Responsive>): ReactNode9;
+import { ImageProps as ImageProps2 } from "next/image";
 interface NavbarMinimalContentProps {
 	orientation: NavbarOrientation;
 	maxElements?: number;
@@ -386,6 +389,7 @@ interface NavbarMinimalContentProps {
 		container?: Partial<PaperProps>
 		button?: Partial<RemoraidButtonProps<true>> | Partial<RemoraidButtonProps<false>>
 		logoButton?: Partial<RemoraidButtonProps<true>> | Partial<RemoraidButtonProps<false>>
+		logo?: Partial<ImageProps2>
 		NavigationMenu?: Partial<NavigationMenuProps>
 	};
 }
@@ -417,10 +421,10 @@ declare function Element2({ section, includeContainer, includePageContainer, lay
 import { ComponentProps as ComponentProps3, PropsWithChildren as PropsWithChildren10, ReactNode as ReactNode15 } from "react";
 import { Box } from "@mantine/core";
 import { ActionIcon as ActionIcon2, ActionIconProps as ActionIconProps2, TooltipProps as TooltipProps2, TransitionProps as TransitionProps4 } from "@mantine/core";
-import { Icon as Icon4, IconProps as IconProps4 } from "@tabler/icons-react";
+import { Icon as Icon5, IconProps as IconProps4 } from "@tabler/icons-react";
 import { ComponentProps as ComponentProps2, ReactNode as ReactNode13 } from "react";
 interface ControlButtonProps {
-	icon: Icon4;
+	icon: Icon5;
 	mounted?: boolean;
 	tooltip?: string;
 	size?: ActionIconProps2["size"];
@@ -435,7 +439,7 @@ interface ControlButtonProps {
 		icon?: Partial<IconProps4>
 	};
 }
-declare function ControlButton({ icon: Icon4, mounted, size, iconSize, onClick, order, color, tooltip, componentsProps }: ControlButtonProps): ReactNode13;
+declare function ControlButton({ icon: Icon5, mounted, size, iconSize, onClick, order, color, tooltip, componentsProps }: ControlButtonProps): ReactNode13;
 import { ReactNode as ReactNode14, Ref, RefObject } from "react";
 import { GroupProps, MantineSize as MantineSize5, PaperProps as PaperProps2, TransitionProps as TransitionProps5 } from "@mantine/core";
 import { IconProps as IconProps5 } from "@tabler/icons-react";
@@ -496,17 +500,17 @@ interface Navbar extends React.FC<ComponentProps4<typeof Navbar>> {
 }
 declare const _default: Navbar;
 import { ComponentProps as ComponentProps5, ReactNode as ReactNode19 } from "react";
-import { Icon as Icon5, IconProps as IconProps6 } from "@tabler/icons-react";
+import { Icon as Icon6, IconProps as IconProps6 } from "@tabler/icons-react";
 import { ReactNode as ReactNode18 } from "react";
 interface FooterMinimalProps {
-	icon?: Icon5;
+	icon?: Icon6;
 	componentsProps?: {
 		layoutElement?: Partial<FrameLayoutElementProps>
 		container?: Partial<PageContainerProps>
 		icon?: Partial<IconProps6>
 	};
 }
-declare function FooterMinimal({ icon: Icon5, componentsProps }: FooterMinimalProps): ReactNode18;
+declare function FooterMinimal({ icon: Icon6, componentsProps }: FooterMinimalProps): ReactNode18;
 declare const supportedFooterPositions: Record<Exclude<AppShellFooterVariant, null>, FooterPosition[]>;
 declare const defaultFooterPositions: Record<Exclude<AppShellFooterVariant, null>, FooterPosition>;
 interface FooterProps {
@@ -821,4 +825,4 @@ interface InputWrapperScrollAreaProps {
 	};
 }
 declare function InputWrapperScrollArea({ children, label, mah, description, error, required, componentsProps }: PropsWithChildren25<InputWrapperScrollAreaProps>): ReactNode41;
-export { useWidgets, useWidget, useSettingsWidgetContext as useSettingsWidgetOptions, useSettingsTableOptions, useRemoraidUserExperience, useRemoraidTheme, useRemoraidApp, usePage, useLayouts, useHydrationStatus, useHydratedMantineColorScheme, useFrameLayoutElement, useFrameLayout, useAppShellUserExperience, supportedNavbarPositions, supportedFooterPositions, scrollToWidget, remoraidAppShellLayoutId, isValidElementOfType, getElementTypeName, getDefaultWidgetContext, getDefaultNavigationElements, getDefaultButtonIconSize, getCssVars, defaultUserExperienceCookieName, defaultUserExperience, defaultTransitionDurations, defaultSettingsWidgetContext as defaultSettingsWidgetOptions, defaultSettingsTableOptions, defaultNavbarSettingsWidgetId, defaultNavbarPositions, defaultLayoutsContext, defaultFooterSettingsWidgetId, defaultFooterPositions, defaultAppShellUserExperienceCookieName, defaultAppShellUserExperience, 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, _default5 as SettingsWidget, SettingsTableRowProps, SettingsTableOptions, _default6 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, NavigationMenuProps, NavigationElementType, NavigationElementButton, NavigationElementBase, NavigationElementAnchor, NavigationElement, NavbarVariant, NavbarSettingsWidgetProps, NavbarSettingsWidget, NavbarProps, NavbarPosition, NavbarOrientation, NavbarMode, NavbarMobileVariant, NavbarMobilePosition, NavbarMinimalProps, NavbarMinimalContentProps, _default as Navbar, LayoutsProviderProps, LayoutsContext, LayoutType, LayoutSection, LayoutElementContext, LayoutContext, InputWrapperScrollAreaProps, InputWrapperScrollArea, HydrationStatusProviderProps, HydrationStatusProvider, HydrationStatus, FrameLayoutSection, FrameLayoutProps, FrameLayoutElementProps, _default3 as FrameLayout, FooterVariant, FooterSettingsWidgetProps, FooterSettingsWidget, FooterProps, FooterPosition, FooterMinimalProps, _default2 as Footer, EnvironmentShellVariant, EnvironmentShellProps, EnvironmentShell, ElementOrPropsOfType, ElementOfType, DefaultNavigationElementsDependencies, CustomAppVariables, CoreUserExperience, ControlsProps, Controls, ControlButtonProps, ControlButton, ContextClusterProviderProps, ContextClusterProvider, ContextCluster, Common, ClickTransformation, ChildrenOfType, BadgeMinimalProps, BadgeMinimal, BadgeGroupProps, BadgeGroup, AppShellUserExperience, AppShellProps, AppShellNavbarVariant, AppShellNavbarMobileVariant, AppShellFooterVariant, _default4 as AppShell, AppProviderProps, AppProvider2 as AppProvider, AppLogo, AlertMinimalProps, AlertMinimal, AlertCategory };
+export { useWidgets, useWidget, useSettingsWidgetContext as useSettingsWidgetOptions, useSettingsTableOptions, useRemoraidUserExperience, useRemoraidTheme, useRemoraidApp, usePage, useLayouts, useHydrationStatus, useHydratedMantineColorScheme, useFrameLayoutElement, useFrameLayout, useAppShellUserExperience, supportedNavbarPositions, supportedFooterPositions, scrollToWidget, remoraidAppShellLayoutId, isValidElementOfType, isIcon, getElementTypeName, getDefaultWidgetContext, getDefaultNavigationElements, getDefaultButtonIconSize, getCssVars, defaultUserExperienceCookieName, defaultUserExperience, defaultTransitionDurations, defaultSettingsWidgetContext as defaultSettingsWidgetOptions, defaultSettingsTableOptions, defaultNavbarSettingsWidgetId, defaultNavbarPositions, defaultLayoutsContext, defaultFooterSettingsWidgetId, defaultFooterPositions, defaultAppShellUserExperienceCookieName, defaultAppShellUserExperience, 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, _default5 as SettingsWidget, SettingsTableRowProps, SettingsTableOptions, _default6 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, NavigationMenuProps, NavigationElementType, NavigationElementButton, NavigationElementBase, NavigationElementAnchor, NavigationElement, NavbarVariant, NavbarSettingsWidgetProps, NavbarSettingsWidget, NavbarProps, NavbarPosition, NavbarOrientation, NavbarMode, NavbarMobileVariant, NavbarMobilePosition, NavbarMinimalProps, NavbarMinimalContentProps, _default as Navbar, LayoutsProviderProps, LayoutsContext, LayoutType, LayoutSection, LayoutElementContext, LayoutContext, InputWrapperScrollAreaProps, InputWrapperScrollArea, HydrationStatusProviderProps, HydrationStatusProvider, HydrationStatus, FrameLayoutSection, FrameLayoutProps, FrameLayoutElementProps, _default3 as FrameLayout, FooterVariant, FooterSettingsWidgetProps, FooterSettingsWidget, FooterProps, FooterPosition, FooterMinimalProps, _default2 as Footer, EnvironmentShellVariant, EnvironmentShellProps, EnvironmentShell, ElementOrPropsOfType, ElementOfType, DefaultNavigationElementsDependencies, CustomAppVariables, CoreUserExperience, ControlsProps, Controls, ControlButtonProps, ControlButton, ContextClusterProviderProps, ContextClusterProvider, ContextCluster, Common, ClickTransformation, ChildrenOfType, BadgeMinimalProps, BadgeMinimal, BadgeGroupProps, BadgeGroup, AppShellUserExperience, AppShellProps, AppShellNavbarVariant, AppShellNavbarMobileVariant, AppShellFooterVariant, _default4 as AppShell, AppProviderProps, AppProvider2 as AppProvider, AppLogo, AlertMinimalProps, AlertMinimal, AlertCategory };

package/dist/core/index.js

@@ -5744,6 +5744,13 @@ var scrollToWidget = (widgetId) => {
     block: "start"
   });
 };
+var isIcon = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return "render" in candidate && typeof candidate.render === "function";
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 import { px, rgba, useMantineTheme } from "@mantine/core";
@@ -6092,8 +6099,9 @@ function AppProvider({
   appContext: appContextProp,
   children
 }) {
+  const { logo, ...appContextPropWithoutLogo } = appContextProp;
   return /* @__PURE__ */ jsx8(appContext.Provider, {
-    value: import_lodash4.merge(defaultAppContext, appContextProp),
+    value: { ...import_lodash4.merge(defaultAppContext, appContextPropWithoutLogo), logo },
     children
   });
 }
@@ -6444,6 +6452,7 @@ var Footer_default = Object.assign(Footer, {
 import { useState as useState7 } from "react";
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+import { isValidElement as isValidElement4 } from "react";
 import {
   Box as Box3,
   Group as Group2,
@@ -6623,6 +6632,7 @@ function RemoraidButton({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+import Image from "next/image";
 import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 function NavbarMinimalContent({
   orientation,
@@ -6660,10 +6670,14 @@ function NavbarMinimalContent({
   const logoButton = app.logo ? /* @__PURE__ */ jsx16(RemoraidButton, {
     label: app.name,
     variant: "subtle",
-    icon: app.logo({
+    icon: isValidElement4(app.logo) || isIcon(app.logo) ? app.logo : /* @__PURE__ */ jsx16(Image, {
+      src: app.logo,
+      alt: "App logo",
+      ...componentsProps?.logo,
       style: {
         width: theme.componentsProps.icons[logoIconSize].size,
-        height: theme.componentsProps.icons[logoIconSize].size
+        height: theme.componentsProps.icons[logoIconSize].size,
+        ...componentsProps?.logo?.style
       }
     }),
     responsive: buttonResponsive,
@@ -6727,7 +6741,7 @@ function NavbarMinimalContent({
   const buttons = elements.filter((element) => !element.static).sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).slice(0, maxElements).map((element, i) => button(element, `nav-element-${i}`));
   const staticElements = elements.filter((element) => element.static);
   const staticButtons = staticElements.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).map((element, i) => button(element, `static-nav-element-${i}`));
-  const collapseStaticElements = staticElements.length > 1;
+  const collapseStaticElements = staticElements.filter((element) => element.mounted ?? true).length > 1;
   const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx16(Box3, {
     hiddenFrom: collapseStaticElementsBreakpoint,
     children: /* @__PURE__ */ jsx16(NavigationMenu, {
@@ -7451,7 +7465,7 @@ function WidgetSelectionHeader({
     },
     onMouseLeave: (e) => {
       if (!pinnableSection) {
-        handleEnter();
+        handleLeave();
       }
       componentsProps?.container?.onMouseEnter?.(e);
     },
@@ -8545,6 +8559,7 @@ export {
   scrollToWidget,
   remoraidAppShellLayoutId,
   isValidElementOfType,
+  isIcon,
   getElementTypeName,
   getDefaultWidgetContext,
   getDefaultNavigationElements,

package/dist/jsonforms/index.cjs

@@ -5543,6 +5543,13 @@ var getDefaultButtonIconSize = (buttonSize) => {
   }
   return "large" /* Large */;
 };
+var isIcon = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return "render" in candidate && typeof candidate.render === "function";
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 var import_core2 = require("@mantine/core");
@@ -5736,8 +5743,9 @@ function AppProvider({
   appContext: appContextProp,
   children
 }) {
+  const { logo, ...appContextPropWithoutLogo } = appContextProp;
   return /* @__PURE__ */ jsx_runtime8.jsx(appContext.Provider, {
-    value: import_lodash4.merge(defaultAppContext, appContextProp),
+    value: { ...import_lodash4.merge(defaultAppContext, appContextPropWithoutLogo), logo },
     children
   });
 }
@@ -5746,7 +5754,7 @@ function AppProvider({
 var import_lodash13 = __toESM(require_lodash());
 
 // src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_lodash12 = __toESM(require_lodash());
 
 // src/core/components/AppShell/Footer/FooterMinimal/index.tsx
@@ -6076,9 +6084,10 @@ var Footer_default = Object.assign(Footer, {
 });
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+var import_react13 = require("react");
 var import_core9 = require("@mantine/core");
 var import_navigation2 = require("next/navigation");
 var import_lodash8 = __toESM(require_lodash());
@@ -6240,6 +6249,7 @@ function RemoraidButton({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+var import_image = __toESM(require("next/image"));
 var jsx_runtime16 = require("react/jsx-runtime");
 function NavbarMinimalContent({
   orientation,
@@ -6277,10 +6287,14 @@ function NavbarMinimalContent({
   const logoButton = app.logo ? /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
     label: app.name,
     variant: "subtle",
-    icon: app.logo({
+    icon: import_react13.isValidElement(app.logo) || isIcon(app.logo) ? app.logo : /* @__PURE__ */ jsx_runtime16.jsx(import_image.default, {
+      src: app.logo,
+      alt: "App logo",
+      ...componentsProps?.logo,
       style: {
         width: theme.componentsProps.icons[logoIconSize].size,
-        height: theme.componentsProps.icons[logoIconSize].size
+        height: theme.componentsProps.icons[logoIconSize].size,
+        ...componentsProps?.logo?.style
       }
     }),
     responsive: buttonResponsive,
@@ -6344,7 +6358,7 @@ function NavbarMinimalContent({
   const buttons = elements.filter((element) => !element.static).sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).slice(0, maxElements).map((element, i) => button(element, `nav-element-${i}`));
   const staticElements = elements.filter((element) => element.static);
   const staticButtons = staticElements.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).map((element, i) => button(element, `static-nav-element-${i}`));
-  const collapseStaticElements = staticElements.length > 1;
+  const collapseStaticElements = staticElements.filter((element) => element.mounted ?? true).length > 1;
   const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx_runtime16.jsx(import_core9.Box, {
     hiddenFrom: collapseStaticElementsBreakpoint,
     children: /* @__PURE__ */ jsx_runtime16.jsx(NavigationMenu, {
@@ -6419,7 +6433,7 @@ function NavbarMinimalContent({
 var import_lodash11 = __toESM(require_lodash());
 
 // src/core/components/Pinnable/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_icons_react7 = require("@tabler/icons-react");
 var import_core12 = require("@mantine/core");
 
@@ -6470,7 +6484,7 @@ function ControlButton({
 }
 
 // src/core/components/Controls/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_core11 = require("@mantine/core");
 var import_icons_react6 = require("@tabler/icons-react");
 var import_lodash10 = __toESM(require_lodash());
@@ -6488,12 +6502,12 @@ function Controls({
   const additionalButtons = additionalButtonsProp?.map((additionalButton) => asElementOrPropsOfType(ControlButton, additionalButton, "Check the 'additionalButtons' property of 'Controls'."));
   const children = asChildrenOfType(ControlButton, childrenProp, "Check children passed to 'Controls' component.");
   const theme = useRemoraidTheme();
-  const [pos, setPos] = import_react13.useState({
+  const [pos, setPos] = import_react14.useState({
     x: 0,
     y: 0
   });
-  const offsetRef = import_react13.useRef({ x: 0, y: 0 });
-  const containerRef = import_react13.useRef(null);
+  const offsetRef = import_react14.useRef({ x: 0, y: 0 });
+  const containerRef = import_react14.useRef(null);
   const clamp = (v, min, max) => {
     return Math.min(Math.max(v, min), max);
   };
@@ -6595,13 +6609,13 @@ function Pinnable({
 }) {
   const layoutType = layoutTypeProp ?? "frame" /* Frame */;
   const { layouts } = useLayouts();
-  const [pinned, setPinned] = import_react14.useState(initialValue);
-  const containerRef = import_react14.useRef(null);
+  const [pinned, setPinned] = import_react15.useState(initialValue);
+  const containerRef = import_react15.useRef(null);
   const layout = layouts[layoutId ?? remoraidAppShellLayoutId];
   if (layout && layout.type !== layoutType) {
     throw new TypeError(`Prop 'layoutId' in '${Pinnable.name}' refers to a layout of type ${layout.type}, expected ${layoutType}. Leave 'layoutId' undefined, if you want to use the layout in '${AppShell_default.name}' as reference layout.`);
   }
-  const controlButton = import_react14.useMemo(() => /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
+  const controlButton = import_react15.useMemo(() => /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
     icon: pinned ? import_icons_react7.IconPinnedOff : import_icons_react7.IconPin,
     tooltip: pinned ? "Unpin" : "Pin",
     color: "green",
@@ -6631,7 +6645,7 @@ function Pinnable({
       children
     ]
   });
-  import_react14.useEffect(() => {
+  import_react15.useEffect(() => {
     onPinnedValueChange?.(pinned);
   }, [pinned]);
   if (!layout) {
@@ -6660,7 +6674,7 @@ function NavbarMinimal({
       navbar: { position }
     }
   } = useAppShellUserExperience();
-  const [hover, setHover] = import_react15.useState(false);
+  const [hover, setHover] = import_react16.useState(false);
   const handleEnter = () => {
     setHover(true);
   };
@@ -6832,7 +6846,7 @@ var defaultAppShellUserExperience = {
 var defaultAppShellUserExperienceCookieName = "remoraid-app-shell-user-experience";
 var appShellUserExperienceContext = createUserExperienceContext(defaultAppShellUserExperience);
 var useAppShellUserExperience = () => {
-  return import_react16.useContext(appShellUserExperienceContext);
+  return import_react17.useContext(appShellUserExperienceContext);
 };
 function AppShellUserExperienceProvider({
   children,
@@ -6919,17 +6933,17 @@ var import_core16 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
 var import_core14 = require("@mantine/core");
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_navigation3 = require("next/navigation");
 var jsx_runtime24 = require("react/jsx-runtime");
-var pageContext = import_react17.default.createContext(null);
+var pageContext = import_react18.default.createContext(null);
 var usePage = () => {
-  return import_react17.useContext(pageContext);
+  return import_react18.useContext(pageContext);
 };
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 var import_icons_react9 = require("@tabler/icons-react");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core15 = require("@mantine/core");
@@ -6940,7 +6954,7 @@ var import_lodash14 = __toESM(require_lodash());
 var jsx_runtime26 = require("react/jsx-runtime");
 // src/core/components/BadgeGroup/index.tsx
 var import_core18 = require("@mantine/core");
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
 var import_core17 = require("@mantine/core");
@@ -7092,7 +7106,7 @@ function AlertMinimal({
 }
 // src/core/components/Widget/WidgetWrapper/index.tsx
 var import_core20 = require("@mantine/core");
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_icons_react10 = require("@tabler/icons-react");
 var import_lodash17 = __toESM(require_lodash());
 var jsx_runtime30 = require("react/jsx-runtime");
@@ -7116,11 +7130,11 @@ function WidgetWrapper({
   } = useWidgets();
   const page = usePage();
   const theme = useRemoraidTheme();
-  const [controlsContainer, setControlsContainer] = import_react20.useState(null);
+  const [controlsContainer, setControlsContainer] = import_react21.useState(null);
   const widget = page ? widgets[page.pageId]?.[config.widgetId] : undefined;
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  const containerRef = import_react20.useRef(null);
-  const controlsContainerRef = import_react20.useCallback((n) => {
+  const containerRef = import_react21.useRef(null);
+  const controlsContainerRef = import_react21.useCallback((n) => {
     setControlsContainer(n);
   }, [setControlsContainer]);
   const handleEnter = () => {
@@ -7226,7 +7240,7 @@ function WidgetWrapper({
       children: element
     });
   }
-  import_react20.useEffect(() => {
+  import_react21.useEffect(() => {
     if (!page) {
       return;
     }
@@ -7238,7 +7252,7 @@ function WidgetWrapper({
 }
 // src/core/components/Widget/index.tsx
 var import_core21 = require("@mantine/core");
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_lodash18 = __toESM(require_lodash());
 var jsx_runtime31 = require("react/jsx-runtime");
 var react2 = require("react");
@@ -7352,7 +7366,7 @@ function Widget({
             });
           })
         }),
-        (loading || import_react21.Children.toArray(children).length > 0) && /* @__PURE__ */ jsx_runtime31.jsx(import_core21.ScrollArea.Autosize, {
+        (loading || import_react22.Children.toArray(children).length > 0) && /* @__PURE__ */ jsx_runtime31.jsx(import_core21.ScrollArea.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           className: clsx_default("remoraid-widget-children-container", componentsProps?.childrenContainer?.className),
@@ -7372,7 +7386,7 @@ var jsx_runtime32 = require("react/jsx-runtime");
 // src/core/components/EnvironmentShell/index.tsx
 var jsx_runtime33 = require("react/jsx-runtime");
 // src/core/components/SettingsWidget/index.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_icons_react12 = require("@tabler/icons-react");
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
@@ -7414,9 +7428,9 @@ function SaveButton({
 // src/core/components/SettingsWidget/index.tsx
 var jsx_runtime35 = require("react/jsx-runtime");
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = import_react22.createContext(defaultSettingsWidgetContext);
+var settingsWidgetContext = import_react23.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return import_react22.useContext(settingsWidgetContext);
+  return import_react23.useContext(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -7462,7 +7476,7 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_core24 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
@@ -7495,9 +7509,9 @@ var jsx_runtime37 = require("react/jsx-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = import_react23.createContext(defaultSettingsTableOptions);
+var settingsTableOptionsContext = import_react24.createContext(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return import_react23.useContext(settingsTableOptionsContext);
+  return import_react24.useContext(settingsTableOptionsContext);
 };
 function SettingsTable({
   leftColumnWidth,
@@ -7532,11 +7546,11 @@ var import_lodash20 = __toESM(require_lodash());
 var import_core26 = require("@mantine/core");
 var jsx_runtime39 = require("react/jsx-runtime");
 // src/core/components/ContextClusterProvider/index.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var jsx_runtime40 = require("react/jsx-runtime");
 // src/core/components/InputWrapperScrollArea/index.tsx
 var import_core27 = require("@mantine/core");
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_core28 = require("remoraid/core");
 var jsx_runtime41 = require("react/jsx-runtime");
 function InputWrapperScrollArea({
@@ -7549,7 +7563,7 @@ function InputWrapperScrollArea({
   componentsProps
 }) {
   const theme = import_core28.useRemoraidTheme();
-  const [isHovering, setIsHovering] = import_react25.useState(false);
+  const [isHovering, setIsHovering] = import_react26.useState(false);
   return /* @__PURE__ */ jsx_runtime41.jsx(import_core27.Input.Wrapper, {
     label,
     error,
@@ -7583,27 +7597,27 @@ function InputWrapperScrollArea({
   });
 }
 // src/jsonforms/renderers/AnyControl.tsx
-var import_react27 = require("@jsonforms/react");
+var import_react28 = require("@jsonforms/react");
 var import_core30 = require("@mantine/core");
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/jsonforms/components/FormOptionsProvider/index.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var jsx_runtime42 = require("react/jsx-runtime");
 var defaultFormOptions = {
   withDescriptions: false,
   gutter: "md"
 };
-var formOptionsContext = import_react26.default.createContext({
+var formOptionsContext = import_react27.default.createContext({
   formOptions: defaultFormOptions,
   updateFormOptions: () => {}
 });
-var useFormOptions = () => import_react26.useContext(formOptionsContext);
+var useFormOptions = () => import_react27.useContext(formOptionsContext);
 function FormOptionsProvider({
   children,
   initialValue
 }) {
-  const [formOptions, setFormOptions] = import_react26.useState({
+  const [formOptions, setFormOptions] = import_react27.useState({
     ...defaultFormOptions,
     ...initialValue
   });
@@ -7630,8 +7644,8 @@ function PlainAnyControl({
   const {
     formOptions: { withDescriptions }
   } = useFormOptions();
-  const [input, setInput] = import_react28.useState(JSON.stringify(data, null, theme.jsonStringifySpace));
-  const [error, setError] = import_react28.useState(false);
+  const [input, setInput] = import_react29.useState(JSON.stringify(data, null, theme.jsonStringifySpace));
+  const [error, setError] = import_react29.useState(false);
   const label = labelProp !== "remoraid-array-item" ? labelProp : null;
   const description = withDescriptions ? schema.description : undefined;
   return /* @__PURE__ */ jsx_runtime43.jsx(InputWrapperScrollArea, {
@@ -7661,14 +7675,14 @@ function PlainAnyControl({
     })
   });
 }
-var AnyControl = import_react27.withJsonFormsControlProps(PlainAnyControl);
+var AnyControl = import_react28.withJsonFormsControlProps(PlainAnyControl);
 var AnyControl_default = AnyControl;
 
 // src/jsonforms/renderers/AnyOfControl.tsx
-var import_react29 = require("@jsonforms/react");
+var import_react30 = require("@jsonforms/react");
 var import_core31 = require("@jsonforms/core");
 var import_core32 = require("@mantine/core");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var jsx_runtime44 = require("react/jsx-runtime");
 function PlainAnyOfControl({
   data,
@@ -7680,7 +7694,7 @@ function PlainAnyOfControl({
   rootSchema
 }) {
   const { formOptions } = useFormOptions();
-  const { core, renderers, cells } = import_react29.useJsonForms();
+  const { core, renderers, cells } = import_react30.useJsonForms();
   const inferType = (schema2) => {
     if (!schema2) {
       return;
@@ -7700,7 +7714,7 @@ function PlainAnyOfControl({
     }
     return;
   };
-  const options = import_react30.useMemo(() => {
+  const options = import_react31.useMemo(() => {
     const anyOf = schema.anyOf ?? [];
     return anyOf.map((opt, idx) => {
       const resolved = opt.$ref ? import_core31.Resolve.schema(rootSchema, opt.$ref, rootSchema) : opt;
@@ -7710,7 +7724,7 @@ function PlainAnyOfControl({
       return { original: opt, resolved, label: label2 };
     });
   }, [schema.anyOf, rootSchema]);
-  const isValidOptionIndex = import_react30.useMemo(() => {
+  const isValidOptionIndex = import_react31.useMemo(() => {
     return (optionIndex) => {
       if (!core?.ajv || data === undefined) {
         return false;
@@ -7719,7 +7733,7 @@ function PlainAnyOfControl({
       return validate(data);
     };
   }, [core?.ajv, data, options]);
-  const validOptionIndex = import_react30.useMemo(() => {
+  const validOptionIndex = import_react31.useMemo(() => {
     for (let i = 0;i < options.length; i++) {
       if (isValidOptionIndex(i)) {
         return i;
@@ -7727,7 +7741,7 @@ function PlainAnyOfControl({
     }
     return -1;
   }, [options, isValidOptionIndex]);
-  const [selectedOption, setSelectedOption] = import_react30.useState(validOptionIndex >= 0 ? String(validOptionIndex) : null);
+  const [selectedOption, setSelectedOption] = import_react31.useState(validOptionIndex >= 0 ? String(validOptionIndex) : null);
   const schemaDefaultValue = (opt) => {
     const t = opt.type ?? (opt.properties ? "object" : opt.items ? "array" : undefined);
     switch (t) {
@@ -7786,7 +7800,7 @@ function PlainAnyOfControl({
             variant: "default",
             mb: selectedOption !== null && inferType(selectedSchema) !== "null" ? formOptions.gutter : undefined
           }),
-          selectedOption !== null && /* @__PURE__ */ jsx_runtime44.jsx(import_react29.JsonForms, {
+          selectedOption !== null && /* @__PURE__ */ jsx_runtime44.jsx(import_react30.JsonForms, {
             schema: {
               ...selectedSchema,
               $schema: undefined
@@ -7804,11 +7818,11 @@ function PlainAnyOfControl({
     })
   });
 }
-var AnyOfControl = import_react29.withJsonFormsControlProps(PlainAnyOfControl);
+var AnyOfControl = import_react30.withJsonFormsControlProps(PlainAnyOfControl);
 var AnyOfControl_default = AnyOfControl;
 
 // src/jsonforms/renderers/ArrayControl.tsx
-var import_react31 = require("@jsonforms/react");
+var import_react32 = require("@jsonforms/react");
 var import_core33 = require("@mantine/core");
 var import_icons_react13 = require("@tabler/icons-react");
 var import_core34 = require("remoraid/core");
@@ -7818,7 +7832,7 @@ function PlainArrayControl(props) {
   const theme = import_core34.useRemoraidTheme();
   const { label, schema, data, handleChange, path, required } = props;
   const { formOptions } = useFormOptions();
-  const { renderers, cells } = import_react31.useJsonForms();
+  const { renderers, cells } = import_react32.useJsonForms();
   let schemaItems;
   if (schema.items && !Array.isArray(schema.items)) {
     schemaItems = {
@@ -7864,7 +7878,7 @@ function PlainArrayControl(props) {
                 children: [
                   /* @__PURE__ */ jsx_runtime45.jsx(import_core33.Box, {
                     flex: 1,
-                    children: /* @__PURE__ */ jsx_runtime45.jsx(import_react31.JsonForms, {
+                    children: /* @__PURE__ */ jsx_runtime45.jsx(import_react32.JsonForms, {
                       schema: schemaItems,
                       data: { item },
                       renderers: renderers ?? [],
@@ -7919,11 +7933,11 @@ function PlainArrayControl(props) {
     })
   });
 }
-var ArrayControl = import_react31.withJsonFormsControlProps(PlainArrayControl);
+var ArrayControl = import_react32.withJsonFormsControlProps(PlainArrayControl);
 var ArrayControl_default = ArrayControl;
 
 // src/jsonforms/renderers/CheckboxControl.tsx
-var import_react32 = require("@jsonforms/react");
+var import_react33 = require("@jsonforms/react");
 var import_core35 = require("@mantine/core");
 var jsx_runtime46 = require("react/jsx-runtime");
 function PlainCheckboxControl({
@@ -7949,11 +7963,11 @@ function PlainCheckboxControl({
     })
   });
 }
-var CheckboxControl = import_react32.withJsonFormsControlProps(PlainCheckboxControl);
+var CheckboxControl = import_react33.withJsonFormsControlProps(PlainCheckboxControl);
 var CheckboxControl_default = CheckboxControl;
 
 // src/jsonforms/renderers/NumberControl.tsx
-var import_react33 = require("@jsonforms/react");
+var import_react34 = require("@jsonforms/react");
 var import_core36 = require("@mantine/core");
 var jsx_runtime47 = require("react/jsx-runtime");
 function PlainNumberControl({
@@ -7983,14 +7997,14 @@ function PlainNumberControl({
     })
   });
 }
-var NumberControl = import_react33.withJsonFormsControlProps(PlainNumberControl);
+var NumberControl = import_react34.withJsonFormsControlProps(PlainNumberControl);
 var NumberControl_default = NumberControl;
 
 // src/jsonforms/renderers/ObjectControl.tsx
-var import_react34 = require("@jsonforms/react");
+var import_react35 = require("@jsonforms/react");
 var import_core37 = require("@mantine/core");
 var import_core38 = require("@jsonforms/core");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_icons_react14 = require("@tabler/icons-react");
 var jsx_runtime48 = require("react/jsx-runtime");
 function PlainObjectControl({
@@ -8002,8 +8016,8 @@ function PlainObjectControl({
   required
 }) {
   const { formOptions } = useFormOptions();
-  const { renderers, cells } = import_react34.useJsonForms();
-  const [newKey, setNewKey] = import_react35.useState("");
+  const { renderers, cells } = import_react35.useJsonForms();
+  const [newKey, setNewKey] = import_react36.useState("");
   const hasProperties = schema.properties && Object.keys(schema.properties).length > 0;
   const hasAdditionalProperties = schema.additionalProperties === true || schema.additionalProperties !== undefined && Object.keys(schema.additionalProperties).length > 0;
   const label = labelProp !== "remoraid-array-item" ? labelProp : null;
@@ -8026,7 +8040,7 @@ function PlainObjectControl({
         justify: "flex-start",
         gap: formOptions.gutter,
         children: [
-          hasProperties && /* @__PURE__ */ jsx_runtime48.jsx(import_react34.JsonForms, {
+          hasProperties && /* @__PURE__ */ jsx_runtime48.jsx(import_react35.JsonForms, {
             schema: {
               ...schema,
               $schema: undefined
@@ -8054,7 +8068,7 @@ function PlainObjectControl({
                   children: [
                     /* @__PURE__ */ jsx_runtime48.jsx(import_core37.Box, {
                       flex: 1,
-                      children: /* @__PURE__ */ jsx_runtime48.jsx(import_react34.JsonForms, {
+                      children: /* @__PURE__ */ jsx_runtime48.jsx(import_react35.JsonForms, {
                         schema: {
                           ...schema.additionalProperties === true ? {} : schema.additionalProperties,
                           title: key,
@@ -8141,11 +8155,11 @@ function PlainObjectControl({
     })
   });
 }
-var ObjectControl = import_react34.withJsonFormsControlProps(PlainObjectControl);
+var ObjectControl = import_react35.withJsonFormsControlProps(PlainObjectControl);
 var ObjectControl_default = ObjectControl;
 
 // src/jsonforms/renderers/StringSelectControl.tsx
-var import_react36 = require("@jsonforms/react");
+var import_react37 = require("@jsonforms/react");
 var import_core40 = require("@mantine/core");
 var jsx_runtime49 = require("react/jsx-runtime");
 function PlainTimestampControl({
@@ -8174,7 +8188,7 @@ function PlainTimestampControl({
     })
   });
 }
-var TimestampControl = import_react36.withJsonFormsControlProps(PlainTimestampControl);
+var TimestampControl = import_react37.withJsonFormsControlProps(PlainTimestampControl);
 var StringSelectControl_default = TimestampControl;
 
 // src/jsonforms/renderers/testers/anyControlTesters.ts
@@ -8244,7 +8258,7 @@ var tester9 = import_core50.rankWith(2, import_core50.uiTypeIs("VerticalLayout")
 var verticalLayoutTester_default = tester9;
 
 // src/jsonforms/renderers/TextControl.tsx
-var import_react37 = require("@jsonforms/react");
+var import_react38 = require("@jsonforms/react");
 var import_core51 = require("@mantine/core");
 var jsx_runtime50 = require("react/jsx-runtime");
 function PlainTextControl({
@@ -8272,11 +8286,11 @@ function PlainTextControl({
     })
   });
 }
-var TextControl = import_react37.withJsonFormsControlProps(PlainTextControl);
+var TextControl = import_react38.withJsonFormsControlProps(PlainTextControl);
 var TextControl_default = TextControl;
 
 // src/jsonforms/renderers/TimestampControl.tsx
-var import_react38 = require("@jsonforms/react");
+var import_react39 = require("@jsonforms/react");
 var import_dates = require("@mantine/dates");
 var jsx_runtime51 = require("react/jsx-runtime");
 function PlainTimestampControl2({
@@ -8306,13 +8320,13 @@ function PlainTimestampControl2({
     })
   });
 }
-var TimestampControl2 = import_react38.withJsonFormsControlProps(PlainTimestampControl2);
+var TimestampControl2 = import_react39.withJsonFormsControlProps(PlainTimestampControl2);
 var TimestampControl_default = TimestampControl2;
 
 // src/jsonforms/renderers/VerticalLayout.tsx
-var import_react39 = __toESM(require("react"));
-var import_react40 = require("@jsonforms/react");
+var import_react40 = __toESM(require("react"));
 var import_react41 = require("@jsonforms/react");
+var import_react42 = require("@jsonforms/react");
 var jsx_runtime52 = require("react/jsx-runtime");
 "use client";
 var JsonFormsLayout = ({
@@ -8327,14 +8341,14 @@ var JsonFormsLayout = ({
   });
 };
 var renderChildren = (layout, schema, className, path, enabled) => {
-  const { renderers, cells } = import_react41.useJsonForms();
+  const { renderers, cells } = import_react42.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_runtime52.jsx("div", {
       className,
       style: { marginTop: index === 0 ? 0 : gutter },
-      children: /* @__PURE__ */ jsx_runtime52.jsx(import_react41.JsonFormsDispatch, {
+      children: /* @__PURE__ */ jsx_runtime52.jsx(import_react42.JsonFormsDispatch, {
         renderers,
         cells,
         uischema: child,
@@ -8351,7 +8365,7 @@ var VerticalLayoutRenderer = (props) => {
     ...otherProps
   });
 };
-var VerticalLayoutRendererComponent = import_react39.default.memo(function VerticalLayoutRendererComponent2({
+var VerticalLayoutRendererComponent = import_react40.default.memo(function VerticalLayoutRendererComponent2({
   schema,
   uischema,
   path,
@@ -8371,7 +8385,7 @@ var VerticalLayoutRendererComponent = import_react39.default.memo(function Verti
     children: renderChildren(verticalLayout, schema, childClassNames, path, enabled)
   });
 });
-var VerticalLayout = import_react40.withJsonFormsLayoutProps(VerticalLayoutRenderer, false);
+var VerticalLayout = import_react41.withJsonFormsLayoutProps(VerticalLayoutRenderer, false);
 var VerticalLayout_default = VerticalLayout;
 
 // src/jsonforms/renderers/index.ts

package/dist/jsonforms/index.js

@@ -5510,6 +5510,13 @@ var getDefaultButtonIconSize = (buttonSize) => {
   }
   return "large" /* Large */;
 };
+var isIcon = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return "render" in candidate && typeof candidate.render === "function";
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 import { px, rgba, useMantineTheme } from "@mantine/core";
@@ -5725,8 +5732,9 @@ function AppProvider({
   appContext: appContextProp,
   children
 }) {
+  const { logo, ...appContextPropWithoutLogo } = appContextProp;
   return /* @__PURE__ */ jsx8(appContext.Provider, {
-    value: import_lodash4.merge(defaultAppContext, appContextProp),
+    value: { ...import_lodash4.merge(defaultAppContext, appContextPropWithoutLogo), logo },
     children
   });
 }
@@ -6077,6 +6085,7 @@ var Footer_default = Object.assign(Footer, {
 import { useState as useState7 } from "react";
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+import { isValidElement as isValidElement4 } from "react";
 import {
   Box as Box3,
   Group as Group2,
@@ -6256,6 +6265,7 @@ function RemoraidButton({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+import Image from "next/image";
 import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 function NavbarMinimalContent({
   orientation,
@@ -6293,10 +6303,14 @@ function NavbarMinimalContent({
   const logoButton = app.logo ? /* @__PURE__ */ jsx16(RemoraidButton, {
     label: app.name,
     variant: "subtle",
-    icon: app.logo({
+    icon: isValidElement4(app.logo) || isIcon(app.logo) ? app.logo : /* @__PURE__ */ jsx16(Image, {
+      src: app.logo,
+      alt: "App logo",
+      ...componentsProps?.logo,
       style: {
         width: theme.componentsProps.icons[logoIconSize].size,
-        height: theme.componentsProps.icons[logoIconSize].size
+        height: theme.componentsProps.icons[logoIconSize].size,
+        ...componentsProps?.logo?.style
       }
     }),
     responsive: buttonResponsive,
@@ -6360,7 +6374,7 @@ function NavbarMinimalContent({
   const buttons = elements.filter((element) => !element.static).sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).slice(0, maxElements).map((element, i) => button(element, `nav-element-${i}`));
   const staticElements = elements.filter((element) => element.static);
   const staticButtons = staticElements.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).map((element, i) => button(element, `static-nav-element-${i}`));
-  const collapseStaticElements = staticElements.length > 1;
+  const collapseStaticElements = staticElements.filter((element) => element.mounted ?? true).length > 1;
   const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx16(Box3, {
     hiddenFrom: collapseStaticElementsBreakpoint,
     children: /* @__PURE__ */ jsx16(NavigationMenu, {

package/package.json

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