themelia-react-ui 2.0.1 → 2.0.2

package/dist/smart-card-DiC5aac3.js

@@ -0,0 +1,604 @@
+"use client";
+import { i as e, m as t, s as n, v as r } from "./ui-provider-C_U0Xma4.js";
+import { useStrings as i } from "./lib/strings.js";
+import { t as a } from "./utils-BRhFDwuU.js";
+import { n as o } from "./buttons-DPZekJFu.js";
+import { c as s, n as c } from "./typography-UTnveOEy.js";
+import { n as l } from "./text.styles-g4He6UIW.js";
+import { t as ee } from "./motion-recipes-ChBg4HBq.js";
+import { i as u, n as te, t as ne } from "./tooltip-yiRJUFjp.js";
+import { n as d } from "./structure.recipes-EPz60cU8.js";
+import { t as f } from "./structure-BmisBK-3.js";
+import { t as p } from "./icon-size-B6PVwjbC.js";
+import { i as m } from "./tone-recipes-BPsRAvhu.js";
+import { a as h } from "./surface-recipes-BKRVW8Os.js";
+import { n as g } from "./action-menu-CllU52Mm.js";
+import { Fragment as _, forwardRef as v, isValidElement as y, useCallback as b, useId as x, useState as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { ChevronDown as re, Info as T } from "lucide-react";
+import { cva as E } from "class-variance-authority";
+//#region src/components/base/feedback/alert.tsx
+var D = E([
+	"alert--component box-border relative grid w-full grid-cols-[0_1fr] items-start gap-y-normal rounded-radius border p-surface text-start",
+	"has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-space-md",
+	"has-[>[data-slot=alert-action]]:sm:grid-cols-[0_minmax(0,1fr)_auto] has-[>svg]:has-[>[data-slot=alert-action]]:sm:grid-cols-[auto_minmax(0,1fr)_auto] has-[>[data-slot=alert-action]]:gap-x-space-md",
+	"[&>svg]:row-span-2 [&>svg]:mt-[calc((1em*1.375-var(--icon))/2)] [&>svg]:shrink-0",
+	p.md
+], {
+	variants: {
+		tone: {
+			neutral: "border-border bg-card text-card-foreground",
+			primary: `${m.primary.edge} ${m.primary.wash} text-card-foreground [&>svg]:text-primary-accent`,
+			secondary: "border-border bg-muted/50 text-card-foreground [&>svg]:text-secondary-foreground",
+			info: `${m.info.edge} ${m.info.wash} text-card-foreground [&>svg]:text-info`,
+			success: `${m.success.edge} ${m.success.wash} text-card-foreground [&>svg]:text-success`,
+			warning: `${m.warning.edge} ${m.warning.wash} text-card-foreground [&>svg]:text-warning-accent`,
+			destructive: `${m.destructive.edge} ${m.destructive.wash} text-card-foreground [&>svg]:text-destructive`
+		},
+		variant: {
+			default: "",
+			inverse: [
+				"border-foreground bg-foreground text-background",
+				"[&>svg]:text-background",
+				"[&_[data-slot=alert-title]_[data-typography=text]]:text-background",
+				"[&_[data-slot=alert-description]_[data-typography=text]]:text-background",
+				"[&_[data-slot=alert-metadata-item]]:bg-background/10",
+				"[&_[data-slot=alert-metadata-item]>svg]:text-background",
+				"[&_[data-slot=alert-metadata-label]_[data-typography=text]]:text-background",
+				"[&_[data-slot=alert-metadata-value]_[data-typography=text]]:text-background"
+			]
+		}
+	},
+	defaultVariants: {
+		tone: "neutral",
+		variant: "default"
+	}
+});
+function O(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+}
+var k = v(function({ className: e, tone: n, variant: r, role: i = "alert", ...o }, s) {
+	let { defaultTextSize: c } = t();
+	return /* @__PURE__ */ C("div", {
+		ref: s,
+		"data-slot": "alert",
+		"data-tone": n ?? "neutral",
+		"data-variant": r ?? "default",
+		role: i,
+		className: a(l({
+			size: c,
+			type: "inherit"
+		}), D({
+			tone: n,
+			variant: r
+		}), e),
+		...o
+	});
+});
+k.displayName = "Alert";
+var ie = v(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ C("div", {
+		ref: r,
+		"data-slot": "alert-title",
+		className: a("alert--title col-start-2 min-h-icon leading-snug", c, e),
+		...n,
+		children: O(t) ? /* @__PURE__ */ C(s, {
+			tag: "span",
+			type: "inherit",
+			weight: "semibold",
+			lineHeight: "snug",
+			children: t
+		}) : t
+	});
+});
+ie.displayName = "AlertTitle";
+var A = v(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ C(f, {
+		ref: r,
+		"data-slot": "alert-description",
+		gap: "xs",
+		align: "start",
+		className: a("alert--description col-start-2 [&_p]:leading-relaxed", c, e),
+		...n,
+		children: O(t) ? /* @__PURE__ */ C(s, {
+			tag: "span",
+			type: "secondary",
+			children: t
+		}) : t
+	});
+});
+A.displayName = "AlertDescription";
+var j = v(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ C("dl", {
+		ref: n,
+		"data-slot": "alert-metadata",
+		className: a("alert-metadata--component alert--metadata col-start-2 m-0 mt-space-xs flex min-w-0 flex-wrap items-center gap-x-space-md gap-y-space-xs", e),
+		...t
+	});
+});
+j.displayName = "AlertMetadata";
+var M = v(function({ className: e, icon: t, label: n, value: r, numeric: i = !1, ...o }, c) {
+	return /* @__PURE__ */ w("div", {
+		ref: c,
+		"data-slot": "alert-metadata-item",
+		className: a("alert-metadata-item--component alert--metadata-item inline-flex max-w-full min-w-0 items-center gap-space-sm rounded-radius-sm bg-foreground/8 px-control-xs py-space-xs", "[&>svg]:size-icon-sm [&>svg]:shrink-0 [&>svg]:text-muted-foreground", e),
+		...o,
+		children: [
+			t,
+			/* @__PURE__ */ C("dt", {
+				"data-slot": "alert-metadata-label",
+				className: "alert--metadata-label shrink-0",
+				children: O(n) ? /* @__PURE__ */ C(s, {
+					tag: "span",
+					size: "xs",
+					type: "secondary",
+					lineHeight: "none",
+					children: n
+				}) : n
+			}),
+			/* @__PURE__ */ C("dd", {
+				"data-slot": "alert-metadata-value",
+				className: "alert--metadata-value m-0 min-w-0",
+				children: O(r) ? /* @__PURE__ */ C(s, {
+					tag: "span",
+					type: "inherit",
+					size: "xs",
+					weight: "semibold",
+					lineHeight: "none",
+					className: a("break-words", i && "tabular-nums"),
+					children: r
+				}) : r
+			})
+		]
+	});
+});
+M.displayName = "AlertMetadataItem";
+var N = v(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ C(f, {
+		ref: n,
+		direction: "horizontal",
+		align: "center",
+		justify: {
+			base: "start",
+			sm: "end"
+		},
+		wrap: !0,
+		gap: "sm",
+		"data-slot": "alert-action",
+		className: a("alert--action max-sm:col-start-2 max-sm:mt-space-md sm:col-start-3 sm:row-start-1 sm:row-span-2 sm:self-start", e),
+		...t
+	});
+});
+N.displayName = "AlertAction";
+//#endregion
+//#region src/components/ui/card.tsx
+function ae({ className: e, size: t = "default", ...n }) {
+	return /* @__PURE__ */ C("div", {
+		"data-slot": "card",
+		"data-size": t,
+		className: a("card--primitive", e),
+		...n
+	});
+}
+function oe({ className: e, ...t }) {
+	return /* @__PURE__ */ C("div", {
+		"data-slot": "card-header",
+		className: a("card-header--primitive", e),
+		...t
+	});
+}
+function se({ className: e, ...t }) {
+	return /* @__PURE__ */ C("div", {
+		"data-slot": "card-title",
+		className: a("card-title--primitive", e),
+		...t
+	});
+}
+function ce({ className: e, ...t }) {
+	return /* @__PURE__ */ C("div", {
+		"data-slot": "card-content",
+		className: a("card-content--primitive", e),
+		...t
+	});
+}
+function P({ className: e, ...t }) {
+	return /* @__PURE__ */ C("div", {
+		"data-slot": "card-footer",
+		className: a("card-footer--primitive", e),
+		...t
+	});
+}
+//#endregion
+//#region src/components/base/cards/card.recipes.ts
+var F = {
+	none: "p-0",
+	sm: "p-surface-xs",
+	md: "p-surface",
+	lg: "p-surface-lg"
+}, I = {
+	root: "flex flex-col w-full font-sans rounded-radius box-border overflow-hidden py-surface gap-space-xl transition-[background-color,border-color,box-shadow] duration-150",
+	shell: "@container/card flex flex-col w-full font-sans rounded-radius box-border overflow-hidden py-surface gap-space-xl transition-[background-color,border-color,box-shadow] duration-150",
+	surfaceCard: `bg-card ${h.frame.shell} shadow-sm text-card-foreground`,
+	surfaceDefault: `bg-card ${h.frame.shell} shadow-sm text-card-foreground`,
+	surfaceFlat: "bg-transparent border-0 shadow-none text-inherit",
+	surfaceFramed: `bg-card ${h.frame.shell} shadow-sm ${h.frame.ring} text-card-foreground`,
+	surfaceRaised: `bg-card ${h.frame.shell} shadow-md text-card-foreground`,
+	surfaceSunken: `bg-muted ${h.frame.shell} text-foreground`,
+	header: "flex flex-col gap-normal px-surface box-border",
+	headerRow: "flex-row flex-wrap items-start justify-between gap-space-lg pb-0",
+	headerRowSingle: "items-center",
+	headerLeading: "min-w-0 max-w-full flex-1 basis-64",
+	headerLeadingSingle: "basis-36",
+	headerTrailing: "flex max-w-full flex-wrap shrink-0 items-center gap-space-md",
+	headerDivider: `${h.frame.header} [&.border-b]:!pb-surface`,
+	title: "min-w-0 leading-tight text-inherit",
+	titleSm: "text-sm",
+	titleMd: "text-base",
+	titleLg: "text-lg",
+	content: "px-surface box-border min-w-0",
+	footer: "flex items-center px-surface box-border",
+	footerDivider: `${h.frame.footer} [&.border-t]:!pt-surface`,
+	alert: "px-surface",
+	alertWithHeader: "-mt-space-xs",
+	expandToggle: "flex justify-center pb-surface -mt-space-md"
+}, L = {
+	root: "card--component",
+	header: "card--header",
+	title: "card--title",
+	description: "card--description",
+	content: "card--content",
+	footer: "card--footer",
+	alert: "card--alert",
+	collapseFade: "card--collapse-fade",
+	expandToggle: "card--expand-toggle",
+	expandToggleButton: "card--expand-toggle-button"
+}, R = {
+	shell: I.shell,
+	headerX: "px-surface",
+	headerDividerY: I.headerDivider,
+	contentX: I.content,
+	contentY: "",
+	footerX: I.footer,
+	footerDividerY: I.footerDivider,
+	alertX: I.alert,
+	expandableBottom: "pb-surface",
+	alertOffsetWithHeader: I.alertWithHeader,
+	alertOffsetStandalone: ""
+}, le = {
+	card: I.surfaceCard,
+	flat: I.surfaceFlat,
+	framed: I.surfaceFramed
+};
+//#endregion
+//#region src/components/base/cards/partials/has-renderable-content.ts
+function z(e) {
+	return e == null || typeof e == "boolean" ? !1 : typeof e == "string" ? e.trim().length > 0 : typeof e == "number" || typeof e == "bigint" ? !0 : Array.isArray(e) ? e.some(z) : !y(e) || e.type !== _ || z(e.props.children);
+}
+//#endregion
+//#region src/components/base/cards/partials/card-primitives.tsx
+var B = {
+	sm: I.titleSm,
+	md: I.titleMd,
+	lg: I.titleLg
+}, V = {
+	sm: "sm",
+	md: "base",
+	lg: "lg"
+};
+function ue({ className: e, ...t }) {
+	return /* @__PURE__ */ C(ae, {
+		className: a(L.root, I.shell, e),
+		...t
+	});
+}
+function de({ className: e, textGap: t = "normal", padding: n, ...r }) {
+	return /* @__PURE__ */ C(oe, {
+		className: a(L.header, I.header, n !== void 0 && F[n], t === "dense" ? "gap-dense" : "gap-normal", e),
+		...r
+	});
+}
+function fe({ className: e, children: t, size: i, ...o }) {
+	let { defaultScale: c } = n(), l = r(i, c);
+	return z(t) ? typeof t != "string" && typeof t != "number" && typeof t != "bigint" ? /* @__PURE__ */ C(se, {
+		className: a(L.title, I.title, "font-medium", B[l], e),
+		...o,
+		children: t
+	}) : /* @__PURE__ */ C(s, {
+		"data-slot": "card-title",
+		tag: "div",
+		size: V[l],
+		weight: "semibold",
+		lineHeight: "tight",
+		className: a(L.title, I.title, e),
+		...o,
+		children: t
+	}) : null;
+}
+function pe({ className: e, children: t, ...n }) {
+	return z(t) ? /* @__PURE__ */ C(s, {
+		"data-slot": "card-description",
+		tag: "div",
+		type: "secondary",
+		className: a(L.description, e),
+		...n,
+		children: t
+	}) : null;
+}
+function me({ className: e, padding: t, ...n }) {
+	return /* @__PURE__ */ C(ce, {
+		className: a(L.content, I.content, t !== void 0 && F[t], e),
+		...n
+	});
+}
+function he({ className: e, padding: t, ...n }) {
+	return /* @__PURE__ */ C(P, {
+		className: a(L.footer, I.footer, t !== void 0 && F[t], e),
+		...n
+	});
+}
+//#endregion
+//#region src/components/base/cards/partials/smart-card-alert.tsx
+function ge({ alert: e, alertTone: t, hasHeader: n, className: r }) {
+	return /* @__PURE__ */ C("div", {
+		className: a(L.alert, R.alertX, r, n ? R.alertOffsetWithHeader : R.alertOffsetStandalone),
+		children: /* @__PURE__ */ C(k, {
+			tone: t,
+			children: /* @__PURE__ */ C(A, { children: e })
+		})
+	});
+}
+//#endregion
+//#region src/components/base/display/surface-title.tsx
+function _e({ title: e, suffix: t, size: n = "base", className: r, suffixClassName: i, dataSlot: o }) {
+	let c = typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+	return /* @__PURE__ */ w(s, {
+		tag: "div",
+		type: "inherit",
+		size: n,
+		weight: c ? "semibold" : "medium",
+		lineHeight: "tight",
+		"data-slot": o,
+		className: a("surface-title--component flex min-w-0 flex-wrap items-center gap-space-md break-words", r),
+		children: [e != null && /* @__PURE__ */ C("span", {
+			className: "min-w-0 max-w-full",
+			...c ? {
+				role: "heading",
+				"aria-level": 2
+			} : {},
+			children: e
+		}), t != null && /* @__PURE__ */ C("div", {
+			className: a("surface-title--suffix inline-flex max-w-full flex-wrap items-center gap-space-md", i),
+			children: t
+		})]
+	});
+}
+//#endregion
+//#region src/components/base/cards/partials/smart-card-actions-menu.tsx
+function ve({ actions: e, actionsLabel: t }) {
+	let n = e.map((e, t) => ({
+		...e,
+		id: e.id ?? `card-action-${t}`
+	}));
+	return /* @__PURE__ */ C(g, {
+		actions: n,
+		srText: t,
+		align: "end",
+		closeOnSelect: !0,
+		buttonProps: { className: "card--actions-trigger" }
+	});
+}
+//#endregion
+//#region src/components/base/cards/partials/smart-card-header-row.tsx
+function ye({ tooltipLabel: e }) {
+	return /* @__PURE__ */ C(u, { render: (t) => {
+		let n = t;
+		return /* @__PURE__ */ C(o, {
+			...n,
+			type: "button",
+			tone: "secondary",
+			buttonStyle: "ghost",
+			size: "sm",
+			iconOnly: !0,
+			className: a("card--tooltip-trigger", "text-muted-foreground", n.className),
+			"aria-label": e,
+			children: /* @__PURE__ */ C(T, { className: "size-icon-md" })
+		});
+	} });
+}
+function be({ icon: e, title: t, titleSuffix: n, description: r, textGap: i = "normal", tooltip: o, tooltipLabel: s, headerStart: c, headerEnd: l, headerAction: ee, actions: u, actionsLabel: d, titleSize: p, className: m }) {
+	let h = Array.isArray(u) ? u : [], g = h.length > 0, _ = z(e), v = z(t), y = z(n), b = z(r), x = z(o), S = z(c), re = z(l), T = z(ee), E = _ || v || y || x, D = re || T || g;
+	return /* @__PURE__ */ w(de, {
+		className: a(I.headerRow, S && (i === "dense" ? "gap-y-dense" : "gap-y-normal"), !b && !S && I.headerRowSingle, R.headerX, m),
+		children: [
+			!!S && /* @__PURE__ */ C("div", {
+				className: "card--header-context min-w-0 max-w-full basis-full",
+				children: c
+			}),
+			/* @__PURE__ */ w(f, {
+				gap: i,
+				className: a("card--header-start", I.headerLeading, !b && !S && I.headerLeadingSingle),
+				children: [!!E && /* @__PURE__ */ w("div", {
+					className: "card--title-row flex min-w-0 items-start gap-space-sm",
+					children: [
+						!!_ && /* @__PURE__ */ C("span", {
+							className: "card--icon flex shrink-0 items-center pt-space-2xs text-muted-foreground [&_svg]:size-icon",
+							children: e
+						}),
+						/* @__PURE__ */ C(_e, {
+							dataSlot: "card-title",
+							title: t,
+							suffix: y ? n : void 0,
+							size: p === "md" ? "base" : p === "lg" ? "lg" : "sm",
+							className: "card--title flex-1",
+							suffixClassName: "card--title-suffix"
+						}),
+						!!x && /* @__PURE__ */ w(ne, { children: [/* @__PURE__ */ C(ye, { tooltipLabel: s }), /* @__PURE__ */ C(te, { children: o })] })
+					]
+				}), !!b && /* @__PURE__ */ C(pe, {
+					className: "text-start",
+					children: r
+				})]
+			}),
+			!!D && /* @__PURE__ */ w("div", {
+				className: a("card--header-end", I.headerTrailing),
+				children: [
+					!!re && l,
+					!!T && ee,
+					!!g && /* @__PURE__ */ C(ve, {
+						actions: h,
+						actionsLabel: d
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/base/cards/smart-card.strings.ts
+var xe = {
+	actionsLabel: "More actions",
+	tooltipLabel: "Card info",
+	expandLabel: "Expand card",
+	collapseLabel: "Collapse card"
+}, H = v(function({ icon: t, title: c, titleSuffix: l, description: u, textGap: te = "normal", tooltip: ne, tooltipAriaLabel: p, footerText: m, alert: g, alertTone: _ = "neutral", surface: v, padding: y = "md", headerPlacement: T = "inside", gap: E, contentGap: D, titleSize: O, actions: k, actionsLabel: ie, headerAction: A, headerStart: j, headerEnd: M, contentTop: N, contentBottom: ae, footerSlot: oe, headerDivider: se, footerDivider: ce, expandable: P = !1, defaultExpanded: F = !1, expanded: I, onExpandedChange: B, children: V, className: de, headerClassName: fe, contentClassName: pe, footerClassName: _e, strings: ve, ...ye }, H) {
+	let { defaultSurface: Se, defaultHeaderDivider: Ce, defaultFooterDivider: we } = e(), { defaultScale: Te } = n(), Ee = r(O, Te), U = {
+		none: "px-0",
+		sm: "px-surface-xs",
+		md: "px-surface",
+		lg: "px-surface-lg"
+	}[y], De = {
+		none: "py-0",
+		sm: "py-surface-xs",
+		md: "py-surface",
+		lg: "py-surface-lg"
+	}[y], W = {
+		...R,
+		headerX: U,
+		contentX: U,
+		footerX: U,
+		headerDividerY: {
+			none: "!pb-0",
+			sm: "!pb-surface-xs",
+			md: "!pb-surface",
+			lg: "!pb-surface-lg"
+		}[y],
+		footerDividerY: {
+			none: "!pt-0",
+			sm: "!pt-surface-xs",
+			md: "!pt-surface",
+			lg: "!pt-surface-lg"
+		}[y]
+	}, G = T === "frame", Oe = Array.isArray(k) ? k : [], K = i(xe, ve), ke = ie ?? K.actionsLabel, q = P !== !1 && P !== void 0, Ae = typeof P == "object" && P?.collapsedMaxHeight !== void 0 ? P.collapsedMaxHeight : "12rem", je = typeof Ae == "number" ? `${Ae}px` : Ae, J = I !== void 0, Me = x(), [Ne, Pe] = S(F), Y = J ? I : Ne, Fe = b(() => {
+		let e = !Y;
+		J || Pe(e), B?.(e);
+	}, [
+		Y,
+		J,
+		B
+	]), Ie = (e) => {
+		if (!q || Y) return;
+		let t = e.currentTarget, n = e.target, r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+		t.scrollTop === 0 && i.top >= r.top && i.bottom <= r.bottom || (J || Pe(!0), B?.(!0), requestAnimationFrame(() => {
+			n.isConnected && n === n.ownerDocument.activeElement && n.scrollIntoView?.({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}));
+	}, Le = z(t) || z(c) || z(u) || Oe.length > 0 || z(A) || z(j) || z(M), Re = z(g), X = z(m), Z = z(oe), ze = z(N), Be = z(ae), Ve = z(V), He = ze || Be || Ve || q, Ue = Re || He || X || Z, We = Le && (X || Z) && !Re && !He && !G, Ge = p && p.trim().length > 0 ? p : K.tooltipLabel, Ke = q ? { maxHeight: Y ? "" : je } : void 0, Q = v ?? Se ?? "framed", qe = Q !== "flat", Je = se ?? (qe && !G && (Ce ?? !0)), Ye = ce ?? (qe && (we ?? !0)), $ = We && (Je || Ye);
+	return /* @__PURE__ */ w(ue, {
+		...ye,
+		"data-header-placement": T,
+		ref: H,
+		"data-surface": Q,
+		className: a(le[Q], W.shell, De, d({ gap: E ?? "xl" }), $ && "gap-0", G && "rounded-radius bg-muted text-foreground p-surface-xs pt-0 gap-0 ring-0", Q === "flat" && !G && "overflow-visible", q && a("relative mb-space-xl !overflow-visible", W.expandableBottom), de),
+		children: [
+			!!Le && /* @__PURE__ */ C(be, {
+				icon: t,
+				title: c,
+				titleSuffix: l,
+				description: u,
+				textGap: te,
+				tooltip: ne,
+				tooltipLabel: Ge,
+				headerStart: j,
+				headerEnd: M,
+				headerAction: A,
+				actions: Oe,
+				actionsLabel: ke,
+				titleSize: Ee,
+				className: a(Je && !$ && a(h.frame.header, W.headerDividerY), $ && W.headerDividerY, W.headerX, G && "flex-row items-center min-h-action px-surface-xs py-space-2xs [&_.card--title-row]:items-center [&_.card--icon]:pt-0", fe)
+			}),
+			Ue && /* @__PURE__ */ w("div", {
+				className: G ? a("card--body-surface flex min-w-0 flex-col rounded-inner bg-card text-card-foreground", d({ gap: E ?? "xl" }), h.frame.shell, De) : "contents",
+				children: [
+					!!Re && /* @__PURE__ */ C(ge, {
+						alert: g,
+						alertTone: _,
+						hasHeader: Le,
+						className: U
+					}),
+					!!He && /* @__PURE__ */ w(me, {
+						id: q ? Me : void 0,
+						onFocusCapture: q ? Ie : void 0,
+						className: a(W.contentX, W.contentY, q && a("relative transition-[max-height] duration-500 ease-in-out motion-reduce:transition-none", Y ? "overflow-visible" : "overflow-hidden"), pe),
+						style: Ke,
+						children: [ze || Be ? /* @__PURE__ */ w(f, {
+							gap: D ?? "lg",
+							children: [
+								!!ze && N,
+								Ve && (D ? /* @__PURE__ */ C(f, {
+									gap: D,
+									children: V
+								}) : /* @__PURE__ */ C("div", {
+									className: "min-w-0",
+									children: V
+								})),
+								!!Be && ae
+							]
+						}) : D ? /* @__PURE__ */ C(f, {
+							gap: D,
+							children: V
+						}) : V, !!q && !Y && /* @__PURE__ */ C("div", {
+							"aria-hidden": "true",
+							className: a(L.collapseFade, "pointer-events-none absolute inset-x-0 bottom-0 h-20 rounded-b-radius bg-linear-to-t to-transparent", Q === "flat" ? "from-background" : "from-card")
+						})]
+					}),
+					(X || Z) && /* @__PURE__ */ w(he, {
+						className: a(W.footerX, Z ? "flex-col items-stretch gap-space-md" : "justify-end", (Ye || $) && a(h.frame.footer, W.footerDividerY), _e),
+						children: [X && (typeof m == "string" || typeof m == "number" || typeof m == "bigint" ? /* @__PURE__ */ C(s, {
+							tag: "span",
+							size: "xs",
+							type: "secondary",
+							children: m
+						}) : m), Z && oe]
+					})
+				]
+			}),
+			!!q && /* @__PURE__ */ C("div", {
+				className: a(L.expandToggle, "absolute bottom-0 left-1/2 z-10 -translate-x-1/2 translate-y-1/2"),
+				children: /* @__PURE__ */ C(o, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "outline",
+					size: "sm",
+					iconOnly: !0,
+					onClick: Fe,
+					"aria-expanded": Y,
+					"aria-controls": Me,
+					"aria-label": Y ? K.collapseLabel : K.expandLabel,
+					className: a(L.expandToggleButton, a(h.frame.shell, "bg-background text-foreground shadow-sm")),
+					children: /* @__PURE__ */ C(re, {
+						"aria-hidden": "true",
+						className: a(`size-icon ${ee.chevron}`, Y && "rotate-180")
+					})
+				})
+			})
+		]
+	});
+});
+H.displayName = "Card";
+var Se = H;
+//#endregion
+export { M as _, me as a, de as c, z as d, le as f, j as g, A as h, _e as i, ue as l, N as m, Se as n, pe as o, k as p, xe as r, he as s, H as t, fe as u, ie as v };
+
+//# sourceMappingURL=smart-card-DiC5aac3.js.map