@espressif/dashboard-ui-components 1.10.0 → 1.11.1

package/dist/components/fullscreen-dialog/fullscreen-dialog.js

@@ -0,0 +1,68 @@
+import { cn } from "../../utils/cn.js";
+import { Avatar, AvatarFallback } from "../../core/avatar.js";
+import { ScrollArea } from "../../core/scroll-area.js";
+import { Dialog, DialogContent } from "../../core/animate-ui/components/radix/dialog.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fullscreen-dialog/fullscreen-dialog.tsx
+var iconSizeMap = {
+	sm: {
+		avatar: "h-12 w-12",
+		icon: "size-6 [&_svg]:size-6"
+	},
+	md: {
+		avatar: "h-16 w-16",
+		icon: "size-8 [&_svg]:size-8"
+	},
+	lg: {
+		avatar: "h-20 w-20",
+		icon: "size-10 [&_svg]:size-10"
+	}
+};
+function FullscreenDialog({ icon, iconSize = "lg", heading, secondaryText, children, open, onOpenChange, closeOnEscape = true, noGutters = false }) {
+	const sizeClasses = iconSizeMap[iconSize];
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			className: cn("!w-[100vw] !max-w-[100vw] !h-[100dvh] !max-h-[100dvh] rounded-none flex flex-col gap-0 overflow-hidden", noGutters ? "!p-0" : "p-4"),
+			showCloseButton: true,
+			closeButtonClassName: "[&_svg]:!size-6 cursor-pointer",
+			onEscapeKeyDown: (event) => {
+				if (!closeOnEscape) event.preventDefault();
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col flex-1 min-h-0 w-full mx-auto overflow-hidden", !noGutters && "max-w-7xl"),
+				children: [
+					icon != null && /* @__PURE__ */ jsx(Avatar, {
+						className: cn("shrink-0 rounded-full mx-auto mb-4", sizeClasses.avatar),
+						children: /* @__PURE__ */ jsx(AvatarFallback, {
+							className: "rounded-full bg-accent/80",
+							children: /* @__PURE__ */ jsx("span", {
+								className: sizeClasses.icon,
+								children: icon
+							})
+						})
+					}),
+					heading != null && /* @__PURE__ */ jsx("h1", {
+						className: "text-2xl mb-4 font-normal text-center text-muted-foreground shrink-0",
+						children: heading
+					}),
+					secondaryText != null && /* @__PURE__ */ jsx("div", {
+						className: "flex justify-center",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "mb-4",
+							children: secondaryText
+						})
+					}),
+					/* @__PURE__ */ jsx(ScrollArea, {
+						className: cn("flex-1 min-h-0", noGutters ? "p-0" : "px-6 py-4"),
+						children
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { FullscreenDialog };

package/dist/components/icon-avatar/icon-avatar.js

@@ -0,0 +1,130 @@
+import { cn } from "../../utils/cn.js";
+import { isPresetColor, resolveColor } from "../../utils/color.js";
+import { resolveVariantStyles } from "../../utils/variant.js";
+import { VariantGradientUnderlay } from "../../utils/variant-gradient-underlay.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/icon-avatar/icon-avatar.tsx
+var TINTED_FILL = {
+	primary: "bg-primary/5",
+	secondary: "bg-secondary/5",
+	error: "bg-error/5",
+	info: "bg-info/5",
+	success: "bg-success/5",
+	warning: "bg-warning/5",
+	disabled: "bg-disabled/5",
+	gray: "bg-gray/5",
+	mist: "bg-mist"
+};
+var TINTED_FG = {
+	primary: "text-primary",
+	secondary: "text-secondary",
+	error: "text-error",
+	info: "text-info",
+	success: "text-success",
+	warning: "text-warning",
+	disabled: "text-disabled",
+	gray: "text-gray",
+	mist: "text-mist-foreground"
+};
+var TINTED_BG = Object.fromEntries(Object.keys(TINTED_FILL).map((k) => [k, `${TINTED_FILL[k]} ${TINTED_FG[k]}`]));
+var RING_BORDER = {
+	primary: "ring-primary/30",
+	secondary: "ring-secondary/30",
+	error: "ring-error/30",
+	info: "ring-info/30",
+	success: "ring-success/30",
+	warning: "ring-warning/30",
+	disabled: "ring-disabled/30",
+	gray: "ring-gray/30",
+	mist: "ring-mist-border"
+};
+function resolveTintedBg(color) {
+	if (isPresetColor(color)) return { className: TINTED_BG[color] };
+	return { style: {
+		backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+		color
+	} };
+}
+function resolveTintedFill(color) {
+	if (isPresetColor(color)) return { className: TINTED_FILL[color] };
+	return { style: { backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)` } };
+}
+function resolveTintedFg(color) {
+	if (isPresetColor(color)) return { className: TINTED_FG[color] };
+	return { style: { color } };
+}
+function resolveRingBorder(color) {
+	if (isPresetColor(color)) return { className: RING_BORDER[color] };
+	return { style: { "--tw-ring-color": color } };
+}
+function resolveAvatarVariant(color, variant) {
+	const styles = resolveVariantStyles(variant, color);
+	return {
+		className: styles.container,
+		style: styles.containerStyle,
+		underlay: /* @__PURE__ */ jsx(VariantGradientUnderlay, {
+			layers: styles.gradientHoverLayers,
+			layersInline: styles.gradientHoverLayersInline,
+			silverShine: styles.silverShine,
+			silverBorder: styles.silverBorder
+		})
+	};
+}
+function IconAvatar({ size = 24, color = "primary", variant = "legacy", ring, children, className, discClassName, discStyle }) {
+	const tinted = resolveTintedBg(color);
+	const tintedFill = resolveTintedFill(color);
+	const tintedFg = resolveTintedFg(color);
+	const variantSurface = variant === "legacy" ? void 0 : resolveAvatarVariant(color, variant);
+	const showRing = ring?.show ?? false;
+	const pulsate = showRing && (ring?.pulsate ?? false);
+	const ringColor = ring?.color ?? "primary";
+	const ringBorder = showRing && !pulsate ? resolveRingBorder(ringColor) : void 0;
+	const ringEmit = showRing && pulsate ? resolveColor(ringColor, "text") : void 0;
+	if (pulsate) return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative isolate inline-flex shrink-0 items-center justify-center rounded-full", className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("absolute inset-0 z-0 overflow-hidden rounded-full", variantSurface?.className ?? tintedFill.className, discClassName),
+				style: {
+					...variantSurface?.style ?? tintedFill.style,
+					...discStyle
+				},
+				children: variantSurface?.underlay
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("pointer-events-none absolute inset-0 z-[1] rounded-full animate-avatar-ring", ringEmit?.className),
+				style: ringEmit?.style
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("relative z-10 inline-flex items-center justify-center", variant === "legacy" && tintedFg.className),
+				style: variant === "legacy" ? tintedFg.style : void 0,
+				children
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("relative isolate inline-flex shrink-0 items-center justify-center", className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn("relative z-10 inline-flex items-center justify-center overflow-hidden rounded-full", variantSurface?.className ?? tinted.className, showRing && "ring-1 ring-offset-0.5 ring-offset-transparent", ringBorder?.className, discClassName),
+			style: {
+				width: size,
+				height: size,
+				...variantSurface?.style ?? tinted.style,
+				...ringBorder?.style,
+				...discStyle
+			},
+			children: [variantSurface?.underlay, children]
+		})
+	});
+}
+//#endregion
+export { IconAvatar };

package/dist/components/icon-text-action-card/icon-text-action-card.js

@@ -0,0 +1,190 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
+import { PRESET_RING_CLASSES, renderGradientBackdropLayers, renderLeadingIconRow, renderTitleAndDescriptionBlocks, ringTransitionClass, useSimpleClickableCardSurface } from "../simple-clickable-card/simple-clickable-card-shared.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/components/icon-text-action-card/icon-text-action-card.tsx
+function trailingLeadAndSlot(options) {
+	const { icon, s, iconAvatarColor, iconAvatarRingColor, iconAvatarVariant, iconAvatarDiscStyle, titleBlock, descriptionBlock, variant, fgClass, fgStyle, trailingSlot } = options;
+	const leadingInner = renderLeadingIconRow({
+		icon,
+		s,
+		iconAvatarColor,
+		iconAvatarRingColor,
+		iconAvatarVariant,
+		iconAvatarDiscStyle,
+		titleBlock,
+		descriptionBlock,
+		gradientZStyle: false
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex min-w-0 flex-1 items-center", s.gap, variant === "gradient" && "relative z-10"),
+		children: [leadingInner, trailingSlot]
+	});
+}
+var ACTIONS_ROW_CLASS = "flex-wrap";
+var ACTIONS_LEADING_BASIS_CLASS = {
+	auto: "basis-48",
+	below: "basis-full"
+};
+var ACTIONS_SLOT_CLASS = "relative z-10 ml-auto max-w-full shrink-0";
+function shellPresetRing(color) {
+	const c = color ?? "gray";
+	return isPresetColor(c) ? PRESET_RING_CLASSES[c] : "";
+}
+var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncateTitle = false, truncateDescription = false, onClick, actions, showActionsOnlyOnHover = false, actionsPlacement = "auto", color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, type = "button", disabled, ...rest }, ref) => {
+	const { onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, ...domRest } = rest;
+	const interactive = onClick != null;
+	const showActionsSlot = actions != null;
+	const { s, styles, isArbitraryGradient, surfaceStyleWithoutGradientBg, presetGradientPair, surfaceContainerClass, presetRingClasses, ringAccentStyle, iconAvatarColor: resolvedIconAvatarColor, iconAvatarVariant: resolvedIconAvatarVariant, iconAvatarDiscStyle } = useSimpleClickableCardSurface({
+		variant,
+		color,
+		size
+	});
+	const iconAvatarColor = iconAvatarColorProp ?? resolvedIconAvatarColor;
+	const iconAvatarVariant = iconAvatarVariantProp ?? resolvedIconAvatarVariant;
+	const iconAvatarRingColor = iconAvatarColorProp ?? color;
+	const resolvedDiscStyle = iconAvatarColorProp == null ? iconAvatarDiscStyle : void 0;
+	const fgClass = styles.foreground;
+	const fgStyle = styles.foregroundStyle;
+	const descClass = styles.description;
+	const descStyle = styles.descriptionStyle;
+	const { titleBlock, descriptionBlock } = renderTitleAndDescriptionBlocks({
+		title,
+		description,
+		truncateTitle,
+		truncateDescription,
+		s,
+		fgClass,
+		fgStyle,
+		descClass,
+		descStyle
+	});
+	const gradientLayers = renderGradientBackdropLayers({
+		variant,
+		color,
+		presetGradientPair
+	});
+	const leadingMain = renderLeadingIconRow({
+		icon,
+		s,
+		iconAvatarColor,
+		iconAvatarRingColor,
+		iconAvatarVariant,
+		iconAvatarDiscStyle: resolvedDiscStyle,
+		titleBlock,
+		descriptionBlock,
+		gradientZStyle: false
+	});
+	const surfaceStyleMerged = {
+		...isArbitraryGradient ? surfaceStyleWithoutGradientBg : styles.containerStyle,
+		...ringAccentStyle
+	};
+	const shellRingClass = shellPresetRing(color);
+	const trailingChevron = interactive && !showActionsSlot ? /* @__PURE__ */ jsx(ChevronRight, {
+		"aria-hidden": true,
+		size: s.chevronPx,
+		className: cn("shrink-0", fgClass),
+		style: fgStyle
+	}) : null;
+	const rowInteractiveFull = interactive && !showActionsSlot ? trailingLeadAndSlot({
+		icon,
+		s,
+		iconAvatarColor,
+		iconAvatarRingColor,
+		iconAvatarVariant,
+		iconAvatarDiscStyle: resolvedDiscStyle,
+		titleBlock,
+		descriptionBlock,
+		variant,
+		fgClass,
+		fgStyle,
+		trailingSlot: trailingChevron
+	}) : null;
+	const staticBlock = /* @__PURE__ */ jsx("div", {
+		className: cn("-m-0 inline-flex min-h-0 min-w-0 flex-1 cursor-default select-text items-center rounded-none border-0 bg-transparent text-left outline-none", !showActionsSlot ? s.gap : void 0, variant === "gradient" && "relative z-10", !showActionsSlot && "w-full min-w-0", showActionsSlot && ["min-w-0", ACTIONS_LEADING_BASIS_CLASS[actionsPlacement]]),
+		children: leadingMain
+	});
+	if (!interactive && !showActionsSlot) return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"aria-disabled": disabled === true ? true : void 0,
+			className: cn("relative isolate inline-flex w-full cursor-default items-center overflow-hidden rounded-xl text-left ring-offset-background", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, surfaceContainerClass, className),
+			style: surfaceStyleMerged,
+			...domRest,
+			children: [gradientLayers, staticBlock]
+		})
+	});
+	if (!interactive && showActionsSlot) return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"aria-disabled": disabled === true ? true : void 0,
+			className: cn("relative isolate inline-flex w-full max-w-full cursor-default items-center overflow-hidden rounded-xl text-left ring-offset-background", ACTIONS_ROW_CLASS, showActionsSlot && "group", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
+			style: surfaceStyleMerged,
+			...domRest,
+			children: [
+				gradientLayers,
+				staticBlock,
+				/* @__PURE__ */ jsx("div", {
+					className: cn(ACTIONS_SLOT_CLASS, showActionsOnlyOnHover && "transition-opacity [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"),
+					children: actions
+				})
+			]
+		})
+	});
+	if (interactive && showActionsSlot) return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: cn("relative isolate inline-flex w-full max-w-full items-center overflow-hidden rounded-xl ring-offset-background", ACTIONS_ROW_CLASS, ringTransitionClass, showActionsSlot && "group", variant === "gradient" && "group", "focus-within:outline-none hover:ring-2 hover:ring-offset-2 focus-within:ring-2 focus-within:ring-offset-2", shellRingClass, disabled && "pointer-events-none opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
+			style: surfaceStyleMerged,
+			...domRest,
+			children: [
+				gradientLayers,
+				/* @__PURE__ */ jsx("button", {
+					type,
+					disabled,
+					onClick,
+					onMouseEnter: onMouseEnterProp,
+					onMouseLeave: onMouseLeaveProp,
+					className: cn("-m-0 inline-flex min-h-0 min-w-0 flex-1 cursor-pointer items-center rounded-none border-0 bg-transparent text-left outline-none focus-visible:outline-none", s.gap, variant === "gradient" && "relative z-10", "min-w-0", ACTIONS_LEADING_BASIS_CLASS[actionsPlacement]),
+					children: leadingMain
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn(ACTIONS_SLOT_CLASS, showActionsOnlyOnHover && "transition-opacity [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"),
+					children: actions
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs("button", {
+			ref,
+			type,
+			disabled,
+			onClick,
+			onMouseEnter: onMouseEnterProp,
+			onMouseLeave: onMouseLeaveProp,
+			className: cn("relative isolate inline-flex w-full cursor-pointer items-center overflow-hidden rounded-xl text-left ring-offset-background", ringTransitionClass, variant === "gradient" && "group", "focus-visible:outline-none hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2", presetRingClasses, "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
+			style: {
+				...isArbitraryGradient ? surfaceStyleWithoutGradientBg : styles.containerStyle,
+				...ringAccentStyle
+			},
+			...domRest,
+			children: [gradientLayers, rowInteractiveFull]
+		})
+	});
+});
+IconTextActionCard.displayName = "IconTextActionCard";
+//#endregion
+export { IconTextActionCard };

package/dist/components/illustration/illustration-registry.js

@@ -0,0 +1,37 @@
+import bulb_cloud_drawing_default from "../../assets/illustrations/bulb-cloud-drawing.js";
+import rm_dashboard_update_default from "../../assets/illustrations/rm-dashboard-update.js";
+import rm_data_download_default from "../../assets/illustrations/rm-data-download.js";
+//#region src/components/illustration/illustration-registry.ts
+function parseSvgViewBoxAspectRatio(svg) {
+	const m = svg.match(/viewBox=["']([^"']+)["']/i);
+	if (!m) return void 0;
+	const parts = m[1].trim().split(/[\s,]+/).filter(Boolean);
+	if (parts.length !== 4) return void 0;
+	const w = parseFloat(parts[2]);
+	const h = parseFloat(parts[3]);
+	if (!Number.isFinite(w) || !Number.isFinite(h) || h <= 0) return void 0;
+	return w / h;
+}
+var noSearchResultsAspect = parseSvgViewBoxAspectRatio(bulb_cloud_drawing_default) ?? 814.69 / 352.1;
+var rmDataDownloadAspect = parseSvgViewBoxAspectRatio(rm_data_download_default) ?? 845.67 / 533.92;
+var rmDashboardUpdateAspect = parseSvgViewBoxAspectRatio(rm_dashboard_update_default) ?? 845.67 / 533.92;
+var illustrationRegistry = [
+	{
+		id: "no-search-results",
+		svg: bulb_cloud_drawing_default,
+		aspectRatio: noSearchResultsAspect
+	},
+	{
+		id: "rm-data-download",
+		svg: rm_data_download_default,
+		aspectRatio: rmDataDownloadAspect
+	},
+	{
+		id: "rm-dashboard-update",
+		svg: rm_dashboard_update_default,
+		aspectRatio: rmDashboardUpdateAspect
+	}
+];
+var illustrationsById = Object.fromEntries(illustrationRegistry.map((e) => [e.id, e]));
+//#endregion
+export { illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio };

package/dist/components/illustration/illustration-variants.js

@@ -0,0 +1,21 @@
+//#region src/components/illustration/illustration-variants.ts
+/**
+* An illustration source may carry SMIL animations plus groups tagged
+* `data-variant="static"` or `data-variant="animated"`. This picks one
+* variant: static keeps the base attribute values as the resting frame and
+* drops every animation element; animated drops only the static-only groups.
+*
+* Variant groups must not contain nested `<g>` elements — the group selector
+* stops at the first closing tag.
+*/
+var STATIC_ONLY_GROUP_RE = /<g\s[^>]*data-variant="static"[^>]*>[\s\S]*?<\/g>\s*/g;
+var ANIMATED_ONLY_GROUP_RE = /<g\s[^>]*data-variant="animated"[^>]*>[\s\S]*?<\/g>\s*/g;
+/** `<animateMotion>` wraps an `<mpath>` child, so it needs the paired form. */
+var ANIMATE_MOTION_BLOCK_RE = /<animateMotion\b[^>]*>[\s\S]*?<\/animateMotion>\s*/g;
+var SMIL_ELEMENT_RE = /<(?:animate|animateTransform|animateMotion|set)\b[^>]*\/>\s*/g;
+function selectIllustrationVariant(svg, animated) {
+	if (animated) return svg.replace(STATIC_ONLY_GROUP_RE, "");
+	return svg.replace(ANIMATED_ONLY_GROUP_RE, "").replace(ANIMATE_MOTION_BLOCK_RE, "").replace(SMIL_ELEMENT_RE, "");
+}
+//#endregion
+export { selectIllustrationVariant };

package/dist/components/illustration/illustration.js

@@ -0,0 +1,68 @@
+import { cn } from "../../utils/cn.js";
+import { illustrationsById } from "./illustration-registry.js";
+import { selectIllustrationVariant } from "./illustration-variants.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/illustration/illustration.tsx
+function escapeAttr(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function buildSvgHtml(svgSource, options) {
+	const trimmed = svgSource.replace(/^<\?xml[^?]*\?>\s*/i, "").trim();
+	const style = options.pixelW != null && options.pixelH != null ? ` style="width:${options.pixelW}px;height:${options.pixelH}px"` : "";
+	const a11y = options.decorative ? ` aria-hidden="true" focusable="false"` : ` role="img" aria-label="${escapeAttr(options.alt)}" focusable="false"`;
+	return trimmed.replace(/^<svg\b([^>]*)>/i, `<svg$1 preserveAspectRatio="xMidYMid meet" class="block max-h-full max-w-full min-h-0 min-w-0"${style}${a11y}>`);
+}
+var Illustration = forwardRef(function Illustration({ type, size, alt, animated = false, className, ...rest }, ref) {
+	const entry = type in illustrationsById ? illustrationsById[type] : void 0;
+	const label = alt?.trim();
+	const decorative = !label;
+	let pixelW;
+	let pixelH;
+	if (entry && size != null && entry.aspectRatio != null) {
+		const ar = entry.aspectRatio;
+		if (ar >= 1) {
+			pixelW = size;
+			pixelH = size / ar;
+		} else {
+			pixelH = size;
+			pixelW = size * ar;
+		}
+	}
+	const html = useMemo(() => {
+		if (!entry) return "";
+		return buildSvgHtml(selectIllustrationVariant(entry.svg, animated), {
+			decorative,
+			alt: label,
+			pixelW,
+			pixelH
+		});
+	}, [
+		entry,
+		animated,
+		decorative,
+		label,
+		pixelW,
+		pixelH
+	]);
+	if (!entry) return null;
+	const fixedSquare = size != null;
+	/** Without `size`, % height from `h-full` collapses if the parent has no explicit height. Use full width + aspect-ratio so height is derived from width. */
+	const fillParentWidth = !fixedSquare && entry.aspectRatio != null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex min-w-0 items-center justify-center max-w-full max-h-full", fixedSquare ? "min-h-0 shrink-0" : "w-full max-w-full shrink-0", className),
+		style: fixedSquare ? {
+			width: size,
+			height: size
+		} : fillParentWidth ? { aspectRatio: entry.aspectRatio } : void 0,
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex h-full w-full min-h-0 min-w-0 items-center justify-center overflow-hidden",
+			dangerouslySetInnerHTML: { __html: html }
+		})
+	});
+});
+Illustration.displayName = "Illustration";
+//#endregion
+export { Illustration };

package/dist/components/index.d.ts

@@ -18370,26 +18370,6 @@ declare const illustrationRegistry: readonly [{
     readonly id: "no-search-results";
     readonly svg: string;
     readonly aspectRatio: number;
-}, {
-    readonly id: "add-to-group";
-    readonly svg: string;
-    readonly aspectRatio: number;
-}, {
-    readonly id: "create-new-group";
-    readonly svg: string;
-    readonly aspectRatio: number;
-}, {
-    readonly id: "chip";
-    readonly svg: string;
-    readonly aspectRatio: number;
-}, {
-    readonly id: "new-ota";
-    readonly svg: string;
-    readonly aspectRatio: number;
-}, {
-    readonly id: "secured-key";
-    readonly svg: string;
-    readonly aspectRatio: number;
 }, {
     readonly id: "rm-data-download";
     readonly svg: string;