@solostylist/ui-kit 2.0.0 → 2.0.2

package/dist/s-list-action-item/s-list-action-item.js

@@ -0,0 +1,150 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { t as n } from "../useForkRef-BuNFTXxE.js";
+import { t as r } from "../appendOwnerState-CFQTq3pb.js";
+import { getFocusVisibleStyle as i, reducedMotionMedia as a } from "../theme/components/action-styles.js";
+import { n as o } from "../svgIconClasses-1kWGzgux.js";
+import { t as s } from "../mergeSlotProps-DC8r4QzS.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Box as d, ListItemButton as f, Typography as p, styled as m, useThemeProps as h } from "@mui/material";
+//#region lib/s-list-action-item/s-list-action-item.tsx
+var g = 44, _ = 36, v = m(f, {
+	name: "SListActionItem",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	color: (e.vars ?? e).palette.text.primary,
+	gap: e.spacing(1),
+	minHeight: g,
+	transition: e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter }),
+	width: "100%",
+	[`&&& .${o.root}`]: { color: "inherit" },
+	"&.Mui-focusVisible": {
+		...i(e),
+		outlineOffset: -2
+	},
+	[a]: { transition: "none" },
+	variants: [{
+		props: ({ ownerState: e }) => e.variant === "inset",
+		style: {
+			borderRadius: e.radius.md,
+			marginInline: e.spacing(.75),
+			width: "auto"
+		}
+	}, {
+		props: ({ ownerState: e }) => e.dense,
+		style: {
+			minHeight: _,
+			paddingBlock: e.spacing(.5)
+		}
+	}]
+})), y = m(d, {
+	name: "SListActionItem",
+	slot: "Icon",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	alignItems: "center",
+	color: "inherit",
+	display: "flex",
+	flexShrink: 0,
+	justifyContent: "center",
+	minWidth: 0
+}), b = m(d, {
+	name: "SListActionItem",
+	slot: "Text",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	display: "flex",
+	flex: 1,
+	flexDirection: "column",
+	minWidth: 0,
+	variants: [{
+		props: ({ ownerState: e }) => e.hasDescription,
+		style: { gap: e.spacing(.25) }
+	}]
+})), x = m(p, {
+	name: "SListActionItem",
+	slot: "Label",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "block",
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+}), S = m(p, {
+	name: "SListActionItem",
+	slot: "Description",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	color: (e.vars ?? e).palette.text.secondary,
+	display: "block",
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+})), C = m(d, {
+	name: "SListActionItem",
+	slot: "Trailing",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	color: (e.vars ?? e).palette.text.secondary,
+	display: "flex",
+	flexShrink: 0,
+	marginInlineStart: "auto"
+})), w = c.forwardRef(function(i, a) {
+	let o = h({
+		props: i,
+		name: "SListActionItem"
+	}), { "aria-current": c, component: d, dense: f = !1, description: p, disabled: m = !1, href: g, icon: _, label: w, selected: T = !1, slotProps: E, slots: D, sx: O, trailing: k, variant: A = "plain", ...j } = o, M = {
+		...o,
+		dense: f,
+		disabled: m,
+		hasDescription: p != null,
+		selected: T,
+		variant: A
+	}, N = D?.root ?? v, P = D?.icon ?? y, F = D?.text ?? b, I = D?.label ?? x, L = D?.description ?? S, R = D?.trailing ?? C, z = d ?? (g ? "a" : "button"), B = T ? "page" : void 0, V = "aria-current" in o ? c : B, { ref: H, sx: U, ...W } = r(N, s(t(E?.root, M), {
+		...j,
+		"aria-current": V,
+		dense: f,
+		disabled: m,
+		href: m ? void 0 : g,
+		selected: T
+	}), M), G = n(H, a), K = r(P, s(t(E?.icon, M), { component: "span" }), M), q = r(F, s(t(E?.text, M), { component: "span" }), M), J = r(I, s(t(E?.label, M), {
+		component: "span",
+		variant: "body1"
+	}), M), Y = r(L, s(t(E?.description, M), {
+		component: "span",
+		variant: "body2"
+	}), M), X = r(R, s(t(E?.trailing, M), { component: "span" }), M);
+	return /* @__PURE__ */ u(N, {
+		...W,
+		ref: G,
+		component: z,
+		nativeButton: z === "button",
+		sx: [...e(U), ...e(O)],
+		children: [
+			_ == null ? null : /* @__PURE__ */ l(P, {
+				...K,
+				children: _
+			}),
+			/* @__PURE__ */ u(F, {
+				...q,
+				children: [/* @__PURE__ */ l(I, {
+					...J,
+					children: w
+				}), p == null ? null : /* @__PURE__ */ l(L, {
+					...Y,
+					children: p
+				})]
+			}),
+			k == null ? null : /* @__PURE__ */ l(R, {
+				...X,
+				children: k
+			})
+		]
+	});
+});
+w.displayName = "SListActionItem";
+//#endregion
+export { w as SListActionItem, w as default };

package/dist/s-localization-provider/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-localization-provider-Xw3NO2uP.js";
+import { t as e } from "../s-localization-provider-CeyB_SGz.js";
 export { e as SLocalizationProvider, e as default };

package/dist/s-localization-provider/s-localization-provider.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-localization-provider-Xw3NO2uP.js";
+import { t as e } from "../s-localization-provider-CeyB_SGz.js";
 export { e as SLocalizationProvider, e as default };

package/dist/{s-localization-provider-Xw3NO2uP.js → s-localization-provider-CeyB_SGz.js}

@@ -1,6 +1,6 @@
 import { n as e, t } from "./chunk-C_CI6nMA.js";
-import { n } from "./objectWithoutPropertiesLoose-Cpds-4w8.js";
-import { i as r, n as i, t as a } from "./warning-CNkSZkq6.js";
+import { t as n } from "./extends-DXMyyJCW.js";
+import { i as r, n as i, t as a } from "./warning-D5YhCbje.js";
 import "react";
 import { jsx as o } from "react/jsx-runtime";
 import s from "dayjs";

package/dist/s-mega-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SMegaMenu } from './s-mega-menu';
+export type { SMegaMenuChangeReason, SMegaMenuItem, SMegaMenuItemBase, SMegaMenuItemState, SMegaMenuLayout, SMegaMenuOwnerState, SMegaMenuPanelState, SMegaMenuProps, SMegaMenuResolvedLayout, SMegaMenuSide, SMegaMenuSlotProps, SMegaMenuSlots, SMegaMenuTriggerState, } from './types';
+export type {} from '../theme/component-augmentation';

package/dist/s-mega-menu/index.js

@@ -0,0 +1,2 @@
+import { SMegaMenu as e } from "./s-mega-menu.js";
+export { e as SMegaMenu, e as default };

package/dist/s-mega-menu/mega-menu-panel.d.ts

@@ -0,0 +1,38 @@
+import { SMegaMenuChangeReason, SMegaMenuItem, SMegaMenuItemState, SMegaMenuOwnerState, SMegaMenuSlotProps, SMegaMenuSlots } from './types';
+import * as React from 'react';
+/** Everything the recursive panel renderers need from the owning `SMegaMenu`. */
+export interface MegaMenuRenderContext<T = unknown> {
+    /** Closes the whole menu, optionally returning focus to the open trigger. */
+    closeMenu: (options: {
+        event: Event | React.SyntheticEvent | null;
+        focusTrigger?: boolean;
+        reason: SMegaMenuChangeReason;
+    }) => void;
+    /** Resolves the active state of an entry. */
+    getIsActive: (item: SMegaMenuItem<T>) => boolean;
+    /** Keeps submenu content mounted while closed. */
+    keepMounted: boolean;
+    /** Default element used for entries that have an `href`. */
+    linkComponent?: React.ElementType;
+    /** Owner state shared by every slot. */
+    ownerState: SMegaMenuOwnerState<T>;
+    /** Renders the content of a row. */
+    renderItem?: (item: SMegaMenuItem<T>, state: SMegaMenuItemState<T>) => React.ReactNode;
+    slotProps?: SMegaMenuSlotProps<T>;
+    slots?: SMegaMenuSlots;
+}
+interface PanelContentProps<T> {
+    /** Closes the flyout submenu this panel lives in, if any. */
+    closeParent?: () => void;
+    ctx: MegaMenuRenderContext<T>;
+    depth: number;
+    items: SMegaMenuItem<T>[];
+}
+/**
+ * Panel body for one level of the tree.
+ *
+ * Recursion happens here: a `list` layout renders branch rows that mount another
+ * `MegaMenuPanelContent` inside their flyout submenu.
+ */
+export declare function MegaMenuPanelContent<T>({ closeParent, ctx, depth, items, }: Readonly<PanelContentProps<T>>): React.JSX.Element;
+export {};

package/dist/s-mega-menu/mega-menu-panel.js

@@ -0,0 +1,253 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { t as n } from "../useForkRef-BuNFTXxE.js";
+import { t as r } from "../useEventCallback-DGCsaRIu.js";
+import { t as i } from "../appendOwnerState-CFQTq3pb.js";
+import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
+import { t as o } from "../ChevronRight-DsPfsFKB.js";
+import { LIST_ATTRIBUTE as s, NODE_ATTRIBUTE as c, PANEL_ATTRIBUTE as l, ROW_ATTRIBUTE as u, focusAdjacentList as d, focusRowByOffset as f, getFirstRow as p, getSiblingRows as m, hasNestedChildren as h, resolveLayout as g, resolveSubmenuSide as _ } from "./utils.js";
+import { SMegaMenuColumn as v, SMegaMenuHeading as y, SMegaMenuItemRoot as b, SMegaMenuPanel as x, SMegaMenuSubmenu as S, SMegaMenuSubmenuNode as C } from "./mega-menu-slots.js";
+import * as w from "react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region lib/s-mega-menu/mega-menu-panel.tsx
+function D(e, t, n) {
+	return {
+		...e.ownerState,
+		active: e.getIsActive(t),
+		hasChildren: !!t.children?.length,
+		item: t,
+		...n
+	};
+}
+function O({ closeParent: e, ctx: s, depth: c, item: l, onOpenSubmenu: p, onRowClick: h, open: g = !1, resolvedLayout: _, rowRef: v, side: y = "right", submenuId: x, triggerId: S }) {
+	let C = D(s, l, {
+		depth: c,
+		heading: !1,
+		open: g,
+		resolvedLayout: _,
+		side: y
+	}), w = s.slots?.item ?? b, E = C.hasChildren, O = r((t) => {
+		let n = t.currentTarget;
+		switch (t.key) {
+			case "ArrowDown":
+				t.preventDefault(), f(m(n), n, 1);
+				break;
+			case "ArrowUp":
+				t.preventDefault(), f(m(n), n, -1);
+				break;
+			case "Home":
+				t.preventDefault(), m(n)[0]?.focus();
+				break;
+			case "End": {
+				t.preventDefault();
+				let e = m(n);
+				e[e.length - 1]?.focus();
+				break;
+			}
+			case "ArrowRight":
+				t.preventDefault(), p ? p() : d(n, 1);
+				break;
+			case "ArrowLeft":
+				t.preventDefault(), e ? e() : d(n, -1) || s.closeMenu({
+					event: t,
+					focusTrigger: !0,
+					reason: "triggerKeyDown"
+				});
+				break;
+			case "Escape":
+				t.preventDefault(), s.closeMenu({
+					event: t,
+					focusTrigger: !0,
+					reason: "escapeKeyDown"
+				});
+				break;
+			default: break;
+		}
+	}), k = E ? void 0 : l.component ?? (l.href ? s.linkComponent : void 0), A = E ? void 0 : l.href, { slotProps: j, ...M } = t(s.slotProps?.item, C) ?? {}, { ref: N, ...P } = i(w, a(M, {
+		[u]: "",
+		"aria-controls": E ? x : void 0,
+		"aria-current": C.active && A ? "page" : void 0,
+		"aria-expanded": E ? g : void 0,
+		component: k,
+		description: l.description,
+		disabled: l.disabled,
+		href: A,
+		icon: l.icon,
+		onClick: h,
+		onKeyDown: O,
+		rel: A ? l.rel : void 0,
+		selected: C.active,
+		slotProps: {
+			...j,
+			label: a(j?.label, { variant: c === 0 ? "body1" : "body2" }),
+			trailing: a(j?.trailing, { sx: { color: "inherit" } })
+		},
+		target: A ? l.target : void 0,
+		trailing: E ? /* @__PURE__ */ T(o, { fontSize: "small" }) : void 0,
+		id: S,
+		variant: _ === "columns" ? "plain" : "inset"
+	}), C), F = n(N, v);
+	return /* @__PURE__ */ T(w, {
+		...P,
+		ref: F,
+		label: s.renderItem ? s.renderItem(l, C) : l.label
+	});
+}
+function k({ closeParent: o, ctx: s, depth: l, item: u, onSubmenuOpenChange: d, open: f = !1, resolvedLayout: m }) {
+	let h = w.useRef(null), g = w.useRef(null), v = w.useRef(null), y = w.useRef(void 0), b = w.useRef(!1), [x, k] = w.useState("right"), A = w.useId(), M = `${A}-submenu`, N = `${A}-trigger`, P = u.children ?? [], F = w.useCallback(() => {
+		y.current &&= (clearTimeout(y.current), void 0);
+	}, []);
+	w.useEffect(() => F, [F]);
+	let I = r(() => {
+		k(_(h.current, g.current));
+	});
+	w.useLayoutEffect(() => {
+		f && (I(), b.current && (b.current = !1, p(g.current)?.focus()));
+	}, [f, I]);
+	let L = r(() => {
+		F(), !u.disabled && (I(), d?.(!0));
+	}), R = r(() => {
+		F(), y.current = setTimeout(() => d?.(!1), s.ownerState.closeDelay);
+	}), z = r((e) => {
+		F(), d?.(!1), e && v.current?.focus();
+	}), B = r(() => {
+		if (f) {
+			p(g.current)?.focus();
+			return;
+		}
+		b.current = !0, L();
+	}), V = r(() => {
+		if (!f) {
+			L();
+			return;
+		}
+		z(!1);
+	}), H = D(s, u, {
+		depth: l,
+		heading: !1,
+		open: f,
+		resolvedLayout: m,
+		side: x
+	}), U = s.slots?.submenuNode ?? C, W = s.slots?.submenu ?? S, G = r((e) => {
+		let t = e.relatedTarget;
+		!t || e.currentTarget.contains(t) || z(!1);
+	}), { ref: K, ...q } = i(U, a(t(s.slotProps?.submenuNode, H), {
+		[c]: "",
+		"data-side": x,
+		onBlurCapture: G,
+		onFocus: I,
+		onPointerEnter: (e) => {
+			!u.disabled && e.pointerType !== "touch" && L();
+		},
+		onPointerLeave: (e) => {
+			e.pointerType !== "touch" && R();
+		}
+	}), H), J = n(K, h), { ref: Y, sx: X, ...Z } = i(W, a(t(s.slotProps?.submenu, H), {
+		"aria-hidden": f ? void 0 : !0,
+		"aria-labelledby": N,
+		id: M,
+		role: "region"
+	}), H), Q = n(Y, g);
+	return /* @__PURE__ */ E(U, {
+		...q,
+		ref: J,
+		children: [/* @__PURE__ */ T(O, {
+			closeParent: o,
+			ctx: s,
+			depth: l,
+			item: u,
+			onOpenSubmenu: B,
+			onRowClick: V,
+			open: f,
+			resolvedLayout: m,
+			rowRef: v,
+			side: x,
+			submenuId: M,
+			triggerId: N
+		}), /* @__PURE__ */ T(W, {
+			...Z,
+			ref: Q,
+			sx: [...e(X)],
+			children: f || s.keepMounted ? /* @__PURE__ */ T(j, {
+				closeParent: () => z(!0),
+				ctx: s,
+				depth: l + 1,
+				items: P
+			}) : null
+		})]
+	});
+}
+function A({ closeParent: e, ctx: n, depth: r, item: o }) {
+	let c = D(n, o, {
+		depth: r,
+		heading: !0,
+		open: !1,
+		resolvedLayout: "columns",
+		side: "right"
+	}), l = `${w.useId()}-heading`, u = n.slots?.column ?? v, d = n.slots?.heading ?? y, f = i(u, a(t(n.slotProps?.column, c), {
+		[s]: "",
+		"aria-labelledby": l
+	}), c), p = i(d, a(t(n.slotProps?.heading, c), {
+		component: "h3",
+		id: l
+	}), c);
+	return /* @__PURE__ */ E(u, {
+		...f,
+		children: [/* @__PURE__ */ T(d, {
+			...p,
+			children: n.renderItem ? n.renderItem(o, c) : o.label
+		}), (o.children ?? []).map((t) => /* @__PURE__ */ T(O, {
+			closeParent: e,
+			ctx: n,
+			depth: r + 1,
+			item: t,
+			onRowClick: (e) => n.closeMenu({
+				event: e,
+				reason: "itemClick"
+			}),
+			resolvedLayout: "columns"
+		}, t.id))]
+	});
+}
+function j({ closeParent: n, ctx: r, depth: o, items: c }) {
+	let u = g(c, r.ownerState.layout), [d, f] = w.useState(null), p = u === "columns" || !h(c), m = {
+		...r.ownerState,
+		depth: o,
+		resolvedLayout: u,
+		scrollable: p
+	}, _ = r.slots?.panel ?? x, { sx: v, ...y } = i(_, a(t(r.slotProps?.panel, m), {
+		[l]: "",
+		...u === "list" ? { [s]: "" } : {}
+	}), m);
+	return /* @__PURE__ */ T(_, {
+		...y,
+		sx: [...e(v)],
+		children: u === "columns" ? c.map((e) => /* @__PURE__ */ T(A, {
+			closeParent: n,
+			ctx: r,
+			depth: o,
+			item: e,
+			resolvedLayout: u
+		}, e.id)) : c.map((e) => e.children?.length ? /* @__PURE__ */ T(k, {
+			closeParent: n,
+			ctx: r,
+			depth: o,
+			item: e,
+			onSubmenuOpenChange: (t) => f((n) => t ? e.id : n === e.id ? null : n),
+			open: d === e.id,
+			resolvedLayout: u
+		}, e.id) : /* @__PURE__ */ T(O, {
+			closeParent: n,
+			ctx: r,
+			depth: o,
+			item: e,
+			onRowClick: (e) => r.closeMenu({
+				event: e,
+				reason: "itemClick"
+			}),
+			resolvedLayout: u
+		}, e.id))
+	});
+}
+//#endregion
+export { j as MegaMenuPanelContent };

package/dist/s-mega-menu/mega-menu-slots.d.ts

@@ -0,0 +1,65 @@
+import { SMegaMenuItemState, SMegaMenuOwnerState, SMegaMenuPanelState, SMegaMenuTriggerState } from './types';
+/**
+ * Navigation root. Semantic `nav` markup is fixed by the default slot; consumers
+ * can replace the slot when their application needs a custom navigation root.
+ */
+export declare const SMegaMenuRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuOwnerState;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+/**
+ * Top-level trigger.
+ *
+ * While its panel is open an invisible `::after` bridge extends past the bottom
+ * edge so the pointer never leaves a hoverable element on its way down to the
+ * panel surface. See the close-intent explanation in `s-mega-menu.tsx`.
+ */
+export declare const SMegaMenuTrigger: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonBaseOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, keyof import('@mui/material').ButtonBaseOwnProps> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "children" | "sx" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuTriggerState;
+}, {}, {}>;
+/** Chevron rendered by the default trigger content, rotated while the panel is open. */
+export declare const SMegaMenuTriggerArrow: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuTriggerState;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * Popover hosting the top-level panel.
+ *
+ * `pointerEvents: 'none'` on the popover root plus `pointerEvents: 'auto'` on the
+ * surface keeps the page underneath interactive — the non-modal pattern
+ * documented in the SPopover `hover-preview` example. Without it the modal root
+ * would swallow every pointer event outside the surface.
+ */
+export declare const SMegaMenuPopover: import('@emotion/styled').StyledComponent<Omit<import('../s-popover').SPopoverProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState?: SMegaMenuOwnerState;
+}, {}, {}>;
+/** Content container inside a panel surface. Also used for every flyout submenu. */
+export declare const SMegaMenuPanel: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuPanelState;
+}, {}, {}>;
+/** Column wrapper in the `columns` layout. */
+export declare const SMegaMenuColumn: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/** Non-interactive label of one column group. */
+export declare const SMegaMenuHeading: import('@emotion/styled').StyledComponent<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/** Panel row. */
+export declare const SMegaMenuItemRoot: import('@emotion/styled').StyledComponent<Omit<import('../s-list-action-item').SListActionItemProps, "ref"> & import('react').RefAttributes<HTMLElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/**
+ * Positioned wrapper around a row plus its flyout submenu.
+ *
+ * While open, an invisible `::after` bridge spans the horizontal gap between the
+ * row and the submenu, flipped to the other side when collision detection moved
+ * the submenu left. Because the submenu is a DOM descendant of this wrapper, the
+ * pointer never leaves the wrapper on its way across — `pointerleave` simply
+ * does not fire.
+ */
+export declare const SMegaMenuSubmenuNode: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/** Flyout submenu surface rendered next to a nested row. */
+export declare const SMegaMenuSubmenu: import('@emotion/styled').StyledComponent<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "elevation" | "square" | "sx" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;