@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-skeleton/s-skeleton.js

@@ -1,8 +1,9 @@
-import "react";
-import { jsx as e } from "react/jsx-runtime";
-import { Skeleton as t, useTheme as n } from "@mui/material";
+import { styled as e, useThemeProps as t } from "@mui/material/styles";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/material/Skeleton";
 //#region lib/s-skeleton/s-skeleton.tsx
-var r = {
+var a = {
 	avatar: {
 		height: 40,
 		variant: "circular",
@@ -14,7 +15,6 @@ var r = {
 		width: 100
 	},
 	checkbox: {
-		borderRadius: "sm",
 		height: 20,
 		variant: "rounded",
 		width: 20
@@ -24,43 +24,44 @@ var r = {
 		variant: "rounded",
 		width: 32
 	}
-}, i = ({ fontSize: n = "16px", height: r, presetBorderRadius: i, style: a, variant: o, width: s, ...c }) => {
-	let l = i === void 0 ? a : {
-		...a,
-		borderRadius: i
-	};
-	return o === "text" ? /* @__PURE__ */ e(t, {
-		style: l,
-		sx: { fontSize: n },
-		variant: o,
-		width: s,
-		...c
-	}) : /* @__PURE__ */ e(t, {
-		height: r,
-		style: l,
-		variant: o,
-		width: s,
-		...c
+}, o = e(i, {
+	name: "SSkeleton",
+	slot: "Root"
+})(({ ownerState: e, theme: t }) => ({
+	...e.preset === "checkbox" && { borderRadius: t.radius.sm },
+	...e.variant === "text" && e.fontSize != null && { fontSize: e.fontSize }
+})), s = n.forwardRef(function(e, n) {
+	let i = t({
+		props: e,
+		name: "SSkeleton"
 	});
-}, a = (e) => {
-	let t = n();
-	if (e.preset) {
-		let { preset: n, ...a } = e, { borderRadius: o, ...s } = r[n];
-		return i({
-			...a,
-			...s,
-			presetBorderRadius: o ? t.radius[o] : void 0
+	if (i.preset) {
+		let { preset: e, ...t } = i, s = a[e], c = {
+			animation: t.animation,
+			preset: e,
+			variant: s.variant
+		};
+		return /* @__PURE__ */ r(o, {
+			...t,
+			height: s.height,
+			ownerState: c,
+			ref: n,
+			variant: s.variant,
+			width: s.width
 		});
 	}
-	let { fontSize: a = "16px", height: o = 32, variant: s = "text", width: c = "100%", ...l } = e;
-	return i({
+	let { fontSize: s, variant: c = "text", ...l } = i, u = {
+		animation: l.animation,
+		fontSize: s,
+		variant: c
+	};
+	return /* @__PURE__ */ r(o, {
 		...l,
-		fontSize: a,
-		height: o,
-		variant: s,
-		width: c
+		ownerState: u,
+		ref: n,
+		variant: c
 	});
-};
-a.displayName = "SSkeleton";
+});
+s.displayName = "SSkeleton";
 //#endregion
-export { a as SSkeleton, a as default };
+export { s as SSkeleton, s as default };

package/dist/s-snackbar-message/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SSnackbarMessage, SnackbarMessageProvider, useSnackbarMessage, } from './s-snackbar-message';
-export type { SnackbarMessageContextProps, SnackbarMessageOpenOptions } from './s-snackbar-message';
+export type { SnackbarMessageContextProps, SnackbarMessageOpenOptions, SnackbarMessageProviderProps, SSnackbarMessageOwnerState, SSnackbarMessageProps, SSnackbarMessageSlotProps, SSnackbarMessageSlots, } from './s-snackbar-message';
+export type {} from '../theme/component-augmentation';

package/dist/s-snackbar-message/s-snackbar-message.d.ts

@@ -1,58 +1,47 @@
-import { AlertProps, SnackbarProps } from '@mui/material';
+import { AlertProps } from '@mui/material/Alert';
+import { SnackbarProps } from '@mui/material/Snackbar';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Props interface for SSnackbarMessage component
- */
-export interface SSnackbarMessageProps {
-    /** Message content - can be string or React element */
-    message?: string | React.ReactNode;
-    /** Callback fired when snackbar should close */
-    onClose?: () => void;
-    /** Whether the snackbar is open */
-    open?: boolean;
-    /** Additional props passed to the Snackbar component */
-    snackbarProps?: SnackbarProps;
-    /** Additional props passed to the Alert component */
-    alertProps?: AlertProps;
-}
-export declare const SSnackbarMessage: {
-    ({ message, onClose, open, snackbarProps, alertProps, }: SSnackbarMessageProps): React.JSX.Element;
-    displayName: string;
+export type SSnackbarMessageOwnerState = SSnackbarMessageProps & {
+    open: boolean;
+    severity: NonNullable<AlertProps['severity']>;
 };
-export default SSnackbarMessage;
-/**
- * Options for opening a snackbar message
- */
-export interface SnackbarMessageOpenOptions {
-    /** The message to display */
-    message: string | React.ReactNode;
-}
-/**
- * Parameters for the handleOpen function
- */
-export interface HandleOpenParams {
-    /** Message configuration */
-    snackbarMessageOptions?: SnackbarMessageOpenOptions;
-    /** Optional Snackbar props for customization */
-    snackbarProps?: SnackbarProps;
-    /** Optional Alert props for customization */
-    alertProps?: AlertProps;
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SSnackbarMessageOwnerState>;
+export type SSnackbarMessageSlots = SnackbarProps['slots'] & {
+    /** Component used to render the alert content. */
+    alert?: React.ElementType;
+};
+export type SSnackbarMessageSlotProps = SnackbarProps['slotProps'] & {
+    /** Props or an owner-state callback for the alert slot. */
+    alert?: OwnerStateSlotProps<Omit<AlertProps, 'children' | 'severity'>>;
+};
+/** A MUI Snackbar composed with an Alert content slot. */
+export interface SSnackbarMessageProps extends Omit<SnackbarProps, 'children' | 'message' | 'ref' | 'slots' | 'slotProps'> {
+    /** Alert content. */
+    message: React.ReactNode;
+    /** Alert severity. */
+    severity?: AlertProps['severity'];
+    /** Handles explicit activation of the Alert close button. */
+    onCloseButtonClick?: AlertProps['onClose'];
+    /** Components used for Snackbar and alert slots. */
+    slots?: SSnackbarMessageSlots;
+    /** Props or owner-state callbacks for Snackbar and alert slots. */
+    slotProps?: SSnackbarMessageSlotProps;
 }
-/**
- * Context value interface for SnackbarMessage system
- */
+export declare const SSnackbarMessage: React.ForwardRefExoticComponent<SSnackbarMessageProps & React.RefAttributes<HTMLDivElement>>;
+export default SSnackbarMessage;
+/** Options accepted by the global snackbar provider. */
+export type SnackbarMessageOpenOptions = Omit<SSnackbarMessageProps, 'open'>;
 export interface SnackbarMessageContextProps {
-    /** Function to open a snackbar message with optional customization */
-    handleOpen: ({ snackbarMessageOptions, snackbarProps, alertProps }: HandleOpenParams) => void;
-    /** Function to close the snackbar */
-    handleClose: () => void;
-    /** Current open state of the snackbar */
+    /** Closes the active snackbar. */
+    closeSnackbar: () => void;
+    /** Whether a snackbar is currently visible. */
     open: boolean;
+    /** Opens a snackbar using the same contract as SSnackbarMessage. */
+    showSnackbar: (options: SnackbarMessageOpenOptions) => void;
 }
-export declare const SnackbarMessageProvider: ({ children }: {
+export interface SnackbarMessageProviderProps {
     children: React.ReactNode;
-}) => React.JSX.Element;
-/**
- * Hook to access the snackbar message context.
- */
-export declare const useSnackbarMessage: () => SnackbarMessageContextProps;
+}
+export declare function SnackbarMessageProvider({ children }: SnackbarMessageProviderProps): React.JSX.Element;
+export declare function useSnackbarMessage(): SnackbarMessageContextProps;

package/dist/s-snackbar-message/s-snackbar-message.js

@@ -1,52 +1,89 @@
-import { useDialog as e } from "../hooks/use-dialog.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Alert as i, Snackbar as a } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import * as r from "react";
+import { createElement as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/utils/appendOwnerState";
+import c from "@mui/material/Alert";
+import l from "@mui/material/Snackbar";
 //#region lib/s-snackbar-message/s-snackbar-message.tsx
-var o = ({ message: e, onClose: t = () => {}, open: r = !1, snackbarProps: o, alertProps: s }) => /* @__PURE__ */ n(a, {
-	open: r,
-	autoHideDuration: 1e4,
-	onClose: t,
-	anchorOrigin: {
+var u = t(l, {
+	name: "SSnackbarMessage",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function d(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var f = r.forwardRef(function(t, r) {
+	let i = n({
+		props: t,
+		name: "SSnackbarMessage"
+	}), { anchorOrigin: o = {
 		vertical: "top",
 		horizontal: "center"
-	},
-	...o,
-	children: /* @__PURE__ */ n(i, {
-		onClose: t,
-		severity: "info",
-		sx: {
-			width: "100%",
-			"& .MuiAlert-action": { justifyContent: "center" }
-		},
-		...s,
-		children: e
-	})
+	}, autoHideDuration: l = 1e4, message: f, onClose: p, onCloseButtonClick: m, open: h = !1, severity: g = "info", slotProps: _, slots: v, ...y } = i, b = {
+		...i,
+		open: h,
+		severity: g
+	}, { alert: x, ...S } = v ?? {}, { alert: C, ...w } = _ ?? {}, T = x ?? c, { onClose: E, sx: D, ...O } = d(C, b) ?? {}, k = s(x, O, b), A = (e) => {
+		m?.(e), !e.defaultPrevented && E?.(e);
+	};
+	return /* @__PURE__ */ a(u, {
+		...y,
+		anchorOrigin: o,
+		autoHideDuration: l,
+		onClose: p,
+		open: h,
+		ownerState: b,
+		ref: r,
+		slots: S,
+		slotProps: w,
+		children: /* @__PURE__ */ a(T, {
+			...k,
+			onClose: m || E ? A : void 0,
+			severity: g,
+			sx: [{
+				width: "100%",
+				"& .MuiAlert-action": { justifyContent: "center" }
+			}, ...e(D)],
+			children: f
+		})
+	});
 });
-o.displayName = "SSnackbarMessage";
-var s = t.createContext(null), c = ({ children: i }) => {
-	let a = e(), [c, l] = t.useState({ message: "" }), [u, d] = t.useState({}), [f, p] = t.useState({}), m = t.useMemo(() => ({
-		handleOpen: ({ snackbarMessageOptions: e, snackbarProps: t = {}, alertProps: n = {} }) => {
-			let { message: r } = e || { message: "" };
-			l({ message: r }), d(t), p(n), a.handleOpen();
-		},
-		handleClose: a.handleClose,
-		open: a.open
-	}), [a]);
-	return /* @__PURE__ */ r(s.Provider, {
-		value: m,
-		children: [/* @__PURE__ */ n(o, {
-			open: a.open,
-			message: c.message,
-			onClose: a.handleClose,
-			snackbarProps: u,
-			alertProps: f
-		}), i]
+f.displayName = "SSnackbarMessage";
+var p = r.createContext(null);
+function m({ children: e }) {
+	let [t, n] = r.useState(null), [a, s] = r.useState(0), c = r.useCallback(() => n(null), []), l = r.useCallback((e) => {
+		s((e) => e + 1), n(e);
+	}, []), u = r.useMemo(() => ({
+		closeSnackbar: c,
+		open: t != null,
+		showSnackbar: l
+	}), [
+		c,
+		t,
+		l
+	]), { onClose: d, onCloseButtonClick: m, ...h } = t ?? {}, g = h, _ = r.useCallback((e, t) => {
+		d?.(e, t), e?.defaultPrevented || c();
+	}, [c, d]), v = r.useCallback((e) => {
+		m?.(e), e.defaultPrevented || c();
+	}, [c, m]);
+	return /* @__PURE__ */ o(p.Provider, {
+		value: u,
+		children: [t ? /* @__PURE__ */ i(f, {
+			...g,
+			key: a,
+			open: !0,
+			onClose: _,
+			onCloseButtonClick: v
+		}) : null, e]
 	});
-}, l = () => {
-	let e = t.useContext(s);
+}
+function h() {
+	let e = r.useContext(p);
 	if (!e) throw Error("useSnackbarMessage must be used within a SnackbarMessageProvider");
 	return e;
-};
+}
 //#endregion
-export { o as SSnackbarMessage, o as default, c as SnackbarMessageProvider, l as useSnackbarMessage };
+export { f as SSnackbarMessage, f as default, m as SnackbarMessageProvider, h as useSnackbarMessage };

package/dist/s-spotlight-cursor/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SSpotlightCursor } from './s-spotlight-cursor';
-export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor';
+export type { SSpotlightCursorOwnerState, SSpotlightCursorProps } from './s-spotlight-cursor';
+export type {} from '../theme/component-augmentation';

package/dist/s-spotlight-cursor/s-spotlight-cursor.d.ts

@@ -1,26 +1,29 @@
-import { HTMLAttributes } from 'react';
-/**
- * Configuration interface for spotlight effect appearance and behavior
- */
-export interface SpotlightConfig {
-    /** Radius of the spotlight effect in pixels */
-    radius: number;
-    /** Brightness/opacity of the spotlight effect (0-1) */
+import { SxProps, Theme } from '@mui/material';
+import * as React from 'react';
+export interface SSpotlightCursorProps extends Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'color' | 'height' | 'width'> {
+    /** Spotlight brightness/opacity from 0 to 1 */
+    brightness?: number;
+    /** MUI palette key or CSS color used by the spotlight; defaults to `primary` */
+    color?: string;
+    /** Cursor follow speed from 0.01 (slowest) to 1 (immediate) */
+    followSpeed?: number;
+    /** Spotlight radius in pixels */
+    radius?: number;
+    /** Additional MUI system styles for the root canvas */
+    sx?: SxProps<Theme>;
+}
+export interface SSpotlightCursorOwnerState {
     brightness: number;
-    /** Color of the spotlight effect in hexadecimal format */
     color: string;
-    /** Smoothing factor for cursor movement */
-    smoothing: number;
+    followSpeed: number;
+    radius: number;
+    reducedMotion: boolean;
 }
 /**
- * Props interface for the SSpotlightCursor component
+ * Renders a decorative cursor-following spotlight canvas.
+ *
+ * The parent element must establish a positioning context, usually with
+ * `position: relative`, so the absolute canvas aligns with the parent bounds.
  */
-export interface SSpotlightCursorProps extends HTMLAttributes<HTMLCanvasElement> {
-    /** Configuration object for spotlight appearance and behavior */
-    config?: SpotlightConfig;
-}
-export declare const SSpotlightCursor: {
-    ({ config, className, ...props }: SSpotlightCursorProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SSpotlightCursor: React.ForwardRefExoticComponent<SSpotlightCursorProps & React.RefAttributes<HTMLCanvasElement>>;
 export default SSpotlightCursor;

package/dist/s-spotlight-cursor/s-spotlight-cursor.js

@@ -1,66 +1,91 @@
-import { useEffect as e, useRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { Box as r } from "@mui/material";
+import { isValidCanvasColor as e, resolveCanvasColor as t } from "../utils/canvas-color.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { styled as i, useColorScheme as a, useMediaQuery as o, useTheme as s, useThemeProps as c } from "@mui/material";
+import { useForkRef as l } from "@mui/material/utils";
 //#region lib/s-spotlight-cursor/s-spotlight-cursor.tsx
-var i = (n) => {
-	let r = t(null);
-	return e(() => {
-		let e = r.current;
-		if (!e) return;
-		let t = e.getContext("2d");
-		if (!t) return;
-		let i, a = 0, o = 0, s = -1e3, c = -1e3, l = e.parentElement, u = l ?? e, d = l?.style.position, f = () => {
-			let n = u.getBoundingClientRect(), r = window.devicePixelRatio || 1;
-			a = n.width, o = n.height, e.width = Math.max(1, Math.round(a * r)), e.height = Math.max(1, Math.round(o * r)), t.setTransform(r, 0, 0, r, 0, 0);
-		}, p = (t) => {
-			let n = e.getBoundingClientRect(), r = t.clientX - n.left, i = t.clientY - n.top;
-			if (r < 0 || r > n.width || i < 0 || i > n.height) {
-				s = -1e3, c = -1e3;
+var u = 200, d = .15, f = .1, p = .01, m = ({ brightness: r, color: i, colorScheme: a, followSpeed: o, radius: s, reducedMotion: c, theme: l }) => {
+	let u = n.useRef(null);
+	return n.useEffect(() => {
+		let n = u.current;
+		if (!n) return;
+		let a = n.getContext("2d");
+		if (!a) return;
+		let d = null, f = 0, p = 0, m = null, h = null, g = null, _ = null, v = n.parentElement ?? n, y = (l.vars ?? l).palette.primary.main, b = t(i, n, l), x = t(y, n), S = e(a, b) ? b : e(a, x) ? x : "#000000", C = () => {
+			if (d = null, a.clearRect(0, 0, f, p), m == null || h == null) return;
+			g == null || _ == null || c ? (g = m, _ = h) : (g += (m - g) * o, _ += (h - _) * o);
+			let e = a.createRadialGradient(g, _, 0, g, _, s);
+			e.addColorStop(0, S), e.addColorStop(1, "transparent"), a.save(), a.globalAlpha = r, a.fillStyle = e, a.fillRect(0, 0, f, p), a.restore();
+			let t = Math.abs(m - g), n = Math.abs(h - _);
+			!c && (t > .1 || n > .1) && (d = requestAnimationFrame(C));
+		}, w = () => {
+			d ??= requestAnimationFrame(C);
+		}, T = () => {
+			let e = n.getBoundingClientRect();
+			if (e.width === 0 || e.height === 0) return;
+			let t = window.devicePixelRatio || 1;
+			f = e.width, p = e.height, n.width = Math.max(1, Math.round(f * t)), n.height = Math.max(1, Math.round(p * t)), a.setTransform(t, 0, 0, t, 0, 0), w();
+		}, E = (e) => {
+			let t = n.getBoundingClientRect(), r = e.clientX - t.left, i = e.clientY - t.top;
+			if (r < 0 || r > t.width || i < 0 || i > t.height) {
+				m = null, h = null, g = null, _ = null, w();
 				return;
 			}
-			s = r, c = i;
-		}, m = () => {
-			s = -1e3, c = -1e3;
-		}, h = (e) => {
-			let t = parseInt(e.slice(1), 16);
-			return `${t >> 16 & 255},${t >> 8 & 255},${t & 255}`;
-		}, g = () => {
-			if (t.clearRect(0, 0, a, o), s !== -1e3 && c !== -1e3) {
-				let e = t.createRadialGradient(s, c, 0, s, c, n.radius || 200), r = h(n.color);
-				e.addColorStop(0, `rgba(${r}, ${n.brightness})`), e.addColorStop(1, "rgba(0,0,0,0)"), t.fillStyle = e, t.fillRect(0, 0, a, o);
-			}
-			i = requestAnimationFrame(g);
+			m = r, h = i, g ??= r, _ ??= i, w();
+		}, D = () => {
+			m = null, h = null, g = null, _ = null, w();
 		};
-		l && window.getComputedStyle(l).position === "static" && (l.style.position = "relative"), f();
-		let _ = new ResizeObserver(f);
-		return _.observe(u), window.addEventListener("resize", f), u.addEventListener("mousemove", p), u.addEventListener("mouseleave", m), i = requestAnimationFrame(g), () => {
-			_.disconnect(), window.removeEventListener("resize", f), u.removeEventListener("mousemove", p), u.removeEventListener("mouseleave", m), l && d !== void 0 && (l.style.position = d), cancelAnimationFrame(i);
+		T();
+		let O = new ResizeObserver(T);
+		return O.observe(n), v.addEventListener("pointermove", E, { passive: !0 }), v.addEventListener("pointerleave", D), () => {
+			O.disconnect(), v.removeEventListener("pointermove", E), v.removeEventListener("pointerleave", D), d != null && cancelAnimationFrame(d);
 		};
 	}, [
-		n.radius,
-		n.brightness,
-		n.color
-	]), r;
-}, a = ({ config: e = {
-	radius: 200,
-	brightness: .15,
-	color: "#0000ff",
-	smoothing: .1
-}, className: t, ...a }) => /* @__PURE__ */ n(r, {
-	component: "canvas",
-	ref: i(e),
-	className: t,
-	sx: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		pointerEvents: "none",
-		zIndex: 9999,
-		width: "100%",
-		height: "100%"
-	},
-	...a
+		r,
+		i,
+		a,
+		o,
+		s,
+		c,
+		l
+	]), u;
+}, h = i("canvas", {
+	name: "SSpotlightCursor",
+	slot: "Root"
+})({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	pointerEvents: "none",
+	zIndex: 0,
+	width: "100%",
+	height: "100%"
+}), g = n.forwardRef(function(e, t) {
+	let n = c({
+		props: e,
+		name: "SSpotlightCursor"
+	}), i = s(), { mode: g, systemMode: _ } = a(), { brightness: v = d, color: y = "primary", followSpeed: b = f, radius: x = u, ...S } = n, C = Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : d, w = Number.isFinite(b) ? Math.min(1, Math.max(p, b)) : f, T = Number.isFinite(x) && x > 0 ? x : u, E = o("(prefers-reduced-motion: reduce)", { noSsr: !0 }), D = l(m({
+		brightness: C,
+		color: y,
+		colorScheme: g === "system" ? _ : g,
+		followSpeed: w,
+		radius: T,
+		reducedMotion: E,
+		theme: i
+	}), t), O = {
+		brightness: C,
+		color: y,
+		followSpeed: w,
+		radius: T,
+		reducedMotion: E
+	};
+	return /* @__PURE__ */ r(h, {
+		...S,
+		"aria-hidden": "true",
+		ownerState: O,
+		ref: D
+	});
 });
-a.displayName = "SSpotlightCursor";
+g.displayName = "SSpotlightCursor";
 //#endregion
-export { a as SSpotlightCursor, a as default };
+export { g as SSpotlightCursor, g as default };

package/dist/s-status-illustration/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SStatusIllustration } from './s-status-illustration';
+export type { SStatusIllustrationOwnerState, SStatusIllustrationProps, SStatusIllustrationSlotProps, SStatusIllustrationSlots, SStatusIllustrationVariant, } from './s-status-illustration';
+export type {} from '../theme/component-augmentation';

package/dist/s-status-illustration/index.js

@@ -0,0 +1,2 @@
+import { SStatusIllustration as e } from "./s-status-illustration.js";
+export { e as SStatusIllustration, e as default };

package/dist/s-status-illustration/s-status-illustration.d.ts

@@ -0,0 +1,57 @@
+import { BoxProps, ContainerProps, StackProps, SvgIconProps, TypographyProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export type SStatusIllustrationVariant = 'accessDenied' | 'custom' | 'error' | 'error404' | 'itemNotFound' | 'maintenance' | 'offline' | 'somethingWentWrong';
+export interface SStatusIllustrationSlots {
+    action?: React.ElementType;
+    container?: React.ElementType;
+    content?: React.ElementType;
+    description?: React.ElementType;
+    illustration?: React.ElementType;
+    image?: React.ElementType;
+    imageContainer?: React.ElementType;
+    stack?: React.ElementType;
+    title?: React.ElementType;
+}
+export interface SStatusIllustrationSlotProps {
+    action?: MuiOwnerStateSlotProps<BoxProps, SStatusIllustrationOwnerState>;
+    container?: MuiOwnerStateSlotProps<ContainerProps, SStatusIllustrationOwnerState>;
+    content?: MuiOwnerStateSlotProps<StackProps, SStatusIllustrationOwnerState>;
+    description?: MuiOwnerStateSlotProps<TypographyProps, SStatusIllustrationOwnerState>;
+    illustration?: MuiOwnerStateSlotProps<SvgIconProps, SStatusIllustrationOwnerState>;
+    image?: MuiOwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>, SStatusIllustrationOwnerState>;
+    imageContainer?: MuiOwnerStateSlotProps<BoxProps, SStatusIllustrationOwnerState>;
+    stack?: MuiOwnerStateSlotProps<StackProps, SStatusIllustrationOwnerState>;
+    title?: MuiOwnerStateSlotProps<TypographyProps, SStatusIllustrationOwnerState>;
+}
+export interface SStatusIllustrationProps extends Omit<BoxProps, 'children' | 'component' | 'title'> {
+    /** Action content, typically one or more MUI Buttons. */
+    action?: React.ReactNode;
+    /** Supporting status description. */
+    description: React.ReactNode;
+    /** Alternative text for the optional custom image. */
+    imageAlt?: string;
+    /** Optional image source. When provided, it replaces the preset illustration. */
+    imageSrc?: string;
+    /** Hide the illustration or custom image. */
+    hideIllustration?: boolean;
+    /** SVG content rendered when `variant="custom"`. */
+    children?: React.ReactNode;
+    /** Components used for internal structural slots. */
+    slots?: SStatusIllustrationSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SStatusIllustrationSlotProps;
+    /** Main status heading. */
+    title: React.ReactNode;
+    /** Status artwork to render. @default 'itemNotFound' */
+    variant?: SStatusIllustrationVariant;
+}
+export interface SStatusIllustrationOwnerState {
+    hasAction: boolean;
+    hasImage: boolean;
+    variant: SStatusIllustrationVariant;
+}
+/** Centered status layout with seven artwork presets and custom SVG support. */
+export declare const SStatusIllustration: React.ForwardRefExoticComponent<Omit<SStatusIllustrationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SStatusIllustration;