@jfrader/ui 0.7.0 → 0.7.1

package/README.md

@@ -24,6 +24,7 @@ React components styled with Emotion and themed through the CSS custom propertie
 | `@jfrader/ui/divider` | `Divider` |
 | `@jfrader/ui/emblem` | `Emblem` |
 | `@jfrader/ui/flex` | `Flex` |
+| `@jfrader/ui/flip-game-card` | `FlipGameCard` |
 | `@jfrader/ui/game-card` | `GameCard` |
 | `@jfrader/ui/kbd` | `Kbd` |
 | `@jfrader/ui/menu` | `Menu` |

package/dist/avatar-BuM1zB_f.js

@@ -0,0 +1,164 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./initials-DEdwNe9_.js";
+import { useState as o } from "react";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+var u = 2, d = t({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: s.radius.full,
+	backgroundColor: s.color.surfaceHover,
+	color: s.color.text,
+	fontWeight: s.fontWeight.medium,
+	lineHeight: 1,
+	userSelect: "none",
+	verticalAlign: "middle",
+	[n]: { outline: "1px solid CanvasText" }
+}), f = {
+	sm: t({
+		inlineSize: s.space[6],
+		blockSize: s.space[6],
+		fontSize: s.textSize.xs
+	}),
+	md: t({
+		inlineSize: s.space[8],
+		blockSize: s.space[8],
+		fontSize: s.textSize.sm
+	}),
+	lg: t({
+		inlineSize: s.space[10],
+		blockSize: s.space[10],
+		fontSize: s.textSize.md
+	})
+}, p = t({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	borderRadius: s.radius.full,
+	objectFit: "cover"
+}), m = t({
+	position: "absolute",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	inlineSize: "25%",
+	blockSize: "25%",
+	pointerEvents: "none",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		boxSizing: "border-box",
+		borderRadius: s.radius.full,
+		boxShadow: `0 0 0 2px ${s.color.bg}`
+	}
+}), h = {
+	online: t({ "&::before": { backgroundColor: s.color.success } }),
+	away: t({ "&::before": {
+		border: `2px solid ${s.color.warning}`,
+		backgroundColor: "transparent"
+	} }),
+	busy: t({ "&::before": {
+		backgroundColor: s.color.danger,
+		blockSize: "30%",
+		insetBlockStart: "35%"
+	} }),
+	offline: t({ "&::before": {
+		backgroundColor: s.color.textSubtle,
+		inlineSize: "60%",
+		blockSize: "60%",
+		insetBlockStart: "20%",
+		insetInlineStart: "20%"
+	} })
+}, g = t({ [n]: {
+	"&::before": {
+		forcedColorAdjust: "none",
+		backgroundColor: "CanvasText",
+		outline: "2px solid Canvas"
+	},
+	"&[data-status=\"away\"]::before": {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+} }), _ = e({
+	from: {
+		transform: "scale(.8)",
+		opacity: 1
+	},
+	to: {
+		transform: "scale(2.4)",
+		opacity: 0
+	}
+}), v = { "&[data-status=\"online\"][data-pulse]::after": {
+	content: "none",
+	display: "none",
+	animation: "none"
+} }, y = t({
+	"&[data-status=\"online\"][data-pulse]::after": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		borderRadius: s.radius.full,
+		color: s.color.success,
+		border: "1px solid currentColor",
+		animation: `${_} ${s.motion.duration.presence} infinite ${s.motion.easePresence}`
+	},
+	[r]: v,
+	[n]: v
+});
+function b({ ref: e, name: t, src: n, size: r = "md", status: s, pulse: _ = !1, statusLabel: v, slotProps: b, className: x, sx: S, ...C }) {
+	let [w, T] = o(), E = n !== void 0 && n !== "" && n !== w, D = s === void 0 ? t : `${t}, ${v ?? s}`;
+	return /* @__PURE__ */ c(i, {
+		className: x,
+		styles: [d, f[r]],
+		sx: S,
+		children: (r) => /* @__PURE__ */ l("span", {
+			...C,
+			ref: e,
+			"data-ui": "avatar",
+			role: "img",
+			"aria-label": D,
+			className: r,
+			children: [E ? /* @__PURE__ */ c("img", {
+				src: n,
+				alt: "",
+				onError: () => T(n),
+				className: b?.image?.className,
+				css: [p, b?.image?.css]
+			}) : /* @__PURE__ */ c("span", {
+				"aria-hidden": "true",
+				className: b?.fallback?.className,
+				css: b?.fallback?.css,
+				children: a(t, u)
+			}), s !== void 0 && /* @__PURE__ */ c("span", {
+				"aria-hidden": "true",
+				"data-status": s,
+				"data-pulse": _ && s === "online" ? "" : void 0,
+				className: b?.status?.className,
+				css: [
+					m,
+					h[s],
+					g,
+					y,
+					b?.status?.css
+				]
+			})]
+		})
+	});
+}
+b.displayName = "Avatar";
+//#endregion
+export { b as t };

package/dist/{avatar-group-BlMLNw4J.js → avatar-group-D1UEihvh.js}

@@ -3,7 +3,7 @@ import { i as e } from "./css-BYJhdGh-.js";
 import { n as t } from "./media-8yrN85VT.js";
 import { t as n } from "./sx-BJXJ2xJK.js";
 import { t as r } from "./visually-hidden-DgVO3NaB.js";
-import { t as i } from "./avatar-sPxDqFiZ.js";
+import { t as i } from "./avatar-BuM1zB_f.js";
 import { useId as a } from "react";
 import { vars as o } from "@jfrader/tokens/vars";
 import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";

package/dist/avatar-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as AvatarGroup } from "./avatar-group-BlMLNw4J.js";
+export { t as AvatarGroup } from "./avatar-group-D1UEihvh.js";

package/dist/avatar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Avatar } from "./avatar-sPxDqFiZ.js";
+export { t as Avatar } from "./avatar-BuM1zB_f.js";

package/dist/card-frame-CcLa6NQ4.js

@@ -0,0 +1,13 @@
+'use client';
+//#region src/components/game-card/card-frame.ts
+var e = {
+	ratio: 1.48,
+	cornerDivisor: 13
+}, t = {
+	markWidthRatio: .35,
+	watermarkInsetPercent: 3,
+	watermarkOpacity: .15,
+	contentPaddingPercent: 4
+};
+//#endregion
+export { e as n, t };

package/dist/{chat-thread-DkB-WMWJ.js → chat-thread-CMhwxhoA.js}

@@ -8,7 +8,7 @@ import { t as s } from "./visually-hidden-DgVO3NaB.js";
 import { t as c } from "./button-C6OV0C7J.js";
 import { t as ee } from "./part-id-D0zksy32.js";
 import { t as te } from "./card-C008OQCp.js";
-import { c as l, d as ne, g as re, h as u, i as ie, m as ae, n as d, p as oe, r as se, t as f } from "./thread-parts-Cpktor6D.js";
+import { c as l, d as ne, g as re, h as u, i as ie, m as ae, n as d, p as oe, r as se, t as f } from "./thread-parts-DbKhuwVU.js";
 import { useEffect as ce, useId as le, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
 import { vars as _ } from "@jfrader/tokens/vars";
 import { Fragment as v, jsx as y, jsxs as b } from "@emotion/react/jsx-runtime";

package/dist/chat-thread.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ChatThread } from "./chat-thread-DkB-WMWJ.js";
+export { t as ChatThread } from "./chat-thread-CMhwxhoA.js";

package/dist/{comment-thread-DXfqgRNI.js → comment-thread-DbOzYr0q.js}

@@ -8,7 +8,7 @@ import { t as ee } from "./renderable-DzcIj1Lo.js";
 import { t as s } from "./button-C6OV0C7J.js";
 import { t as c } from "./part-id-D0zksy32.js";
 import { t as l } from "./card-C008OQCp.js";
-import { a as u, c as d, d as f, f as te, g as p, h as m, i as ne, l as re, n as ie, o as ae, p as oe, r as se, s as ce, t as le, u as ue } from "./thread-parts-Cpktor6D.js";
+import { a as u, c as d, d as f, f as te, g as p, h as m, i as ne, l as re, n as ie, o as ae, p as oe, r as se, s as ce, t as le, u as ue } from "./thread-parts-DbKhuwVU.js";
 import { useEffect as de, useId as fe, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
 import { vars as y } from "@jfrader/tokens/vars";
 import { Fragment as pe, jsx as b, jsxs as x } from "@emotion/react/jsx-runtime";

package/dist/comment-thread.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CommentThread } from "./comment-thread-DXfqgRNI.js";
+export { t as CommentThread } from "./comment-thread-DbOzYr0q.js";

package/dist/flip-game-card-xmcR_QSq.js

@@ -0,0 +1,100 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { r as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { n as r } from "./card-frame-CcLa6NQ4.js";
+import { useEffect as i, useState as a } from "react";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
+import { MotionConfig as l, useReducedMotion as u } from "motion/react";
+//#region src/components/flip-game-card/flip-game-card.tsx
+var d = e({
+	label: "flip-game-card",
+	position: "relative",
+	flexShrink: 0,
+	inlineSize: "var(--flip-game-card-width)",
+	blockSize: `calc(var(--flip-game-card-width) * ${r.ratio})`,
+	perspective: o.size.gameCardPerspective
+}), f = {
+	sm: e({ "--flip-game-card-width": o.size.gameCardSm }),
+	md: e({ "--flip-game-card-width": o.size.gameCardMd }),
+	lg: e({ "--flip-game-card-width": o.size.gameCardLg })
+}, p = e({ "& > [data-ui=\"flip-game-card-rotator\"]": {
+	transform: "none",
+	transition: "none",
+	"& > [data-ui=\"flip-game-card-back\"]": { transform: "none" }
+} }), m = e({
+	"&[data-reduced-motion=\"true\"]": p,
+	[t]: p
+}), h = e({
+	position: "relative",
+	inlineSize: "100%",
+	blockSize: "100%",
+	transformStyle: "preserve-3d",
+	transform: "rotateY(0deg)",
+	transition: `transform ${o.motion.duration.slow} ${o.motion.easeStandard}`,
+	"&[data-state=\"back\"]": { transform: "rotateY(180deg)" }
+}), g = e({
+	position: "absolute",
+	inset: 0,
+	backfaceVisibility: "hidden",
+	"&[aria-hidden=\"true\"]": { visibility: "hidden" },
+	"& > [data-ui=\"game-card\"]": {
+		inlineSize: "100%",
+		blockSize: "100%"
+	}
+}), _ = e({ transform: "rotateY(180deg)" });
+function v({ ref: e, flipped: t, front: r, back: o, size: p = "md", slotProps: v, className: y, sx: b, ...x }) {
+	let S = u(), [C, w] = a(!1);
+	i(() => w(!0), []);
+	let T = t ? "back" : "front";
+	return /* @__PURE__ */ s(l, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ s(n, {
+			className: y,
+			styles: [
+				d,
+				f[p],
+				m
+			],
+			sx: b,
+			children: (n) => /* @__PURE__ */ s("div", {
+				...x,
+				ref: e,
+				className: n,
+				"data-ui": "flip-game-card",
+				"data-state": T,
+				"data-size": p,
+				"data-reduced-motion": C && S || void 0,
+				children: /* @__PURE__ */ c("div", {
+					"data-ui": "flip-game-card-rotator",
+					"data-state": T,
+					className: v?.rotator?.className,
+					css: [h, v?.rotator?.css],
+					children: [/* @__PURE__ */ s("div", {
+						"data-ui": "flip-game-card-front",
+						inert: t,
+						"aria-hidden": t || void 0,
+						className: v?.front?.className,
+						css: [g, v?.front?.css],
+						children: r
+					}), /* @__PURE__ */ s("div", {
+						"data-ui": "flip-game-card-back",
+						inert: !t,
+						"aria-hidden": !t || void 0,
+						className: v?.back?.className,
+						css: [
+							g,
+							_,
+							v?.back?.css
+						],
+						children: o
+					})]
+				})
+			})
+		})
+	});
+}
+v.displayName = "FlipGameCard";
+//#endregion
+export { v as t };

package/dist/flip-game-card.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as FlipGameCard } from "./flip-game-card-xmcR_QSq.js";

package/dist/{game-card-Oeu74giK.js → game-card-Bnhpz78f.js}

@@ -2,18 +2,11 @@
 import { i as e } from "./css-BYJhdGh-.js";
 import { t } from "./sx-BJXJ2xJK.js";
 import { t as n } from "./renderable-DzcIj1Lo.js";
-import { vars as r } from "@jfrader/tokens/vars";
-import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
-//#region src/components/game-card/card-frame.ts
-var o = {
-	ratio: 1.48,
-	cornerDivisor: 13
-}, s = {
-	markWidthRatio: .35,
-	watermarkInsetPercent: 3,
-	watermarkOpacity: .15,
-	contentPaddingPercent: 4
-}, c = {
+import { n as r, t as i } from "./card-frame-CcLa6NQ4.js";
+import { vars as a } from "@jfrader/tokens/vars";
+import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
+//#region src/components/game-card/decks.ts
+var c = {
 	oros: "💰",
 	copas: "🍷",
 	espadas: "🗡️",
@@ -45,31 +38,31 @@ var o = {
 	Q: "Q",
 	K: "K"
 }, d = e({
-	"--game-card-width": r.size.gameCardMd,
+	"--game-card-width": a.size.gameCardMd,
 	position: "relative",
 	display: "block",
 	flexShrink: 0,
 	boxSizing: "border-box",
 	inlineSize: "var(--game-card-width)",
-	blockSize: `calc(var(--game-card-width) * ${o.ratio})`,
-	borderRadius: `calc(var(--game-card-width) / ${o.cornerDivisor})`,
+	blockSize: `calc(var(--game-card-width) * ${r.ratio})`,
+	borderRadius: `calc(var(--game-card-width) / ${r.cornerDivisor})`,
 	overflow: "hidden",
 	containerType: "inline-size",
 	userSelect: "none",
 	verticalAlign: "middle"
 }), f = e({
-	backgroundColor: r.color.cardFace,
-	color: r.color.cardInk,
-	border: `1px solid ${r.color.cardInk}`
+	backgroundColor: a.color.cardFace,
+	color: a.color.cardInk,
+	border: `1px solid ${a.color.cardInk}`
 }), p = e({ opacity: .55 }), m = e({
 	position: "absolute",
 	inset: 0
 }), h = e({
 	display: "grid",
 	placeItems: "center",
-	paddingInline: `${s.contentPaddingPercent}%`,
-	fontSize: `${s.markWidthRatio * 100}cqw`,
-	fontWeight: r.fontWeight.semibold,
+	paddingInline: `${i.contentPaddingPercent}%`,
+	fontSize: `${i.markWidthRatio * 100}cqw`,
+	fontWeight: a.fontWeight.semibold,
 	lineHeight: 1,
 	whiteSpace: "nowrap"
 }), g = e({
@@ -87,36 +80,36 @@ var o = {
 	gap: "0.1em"
 }), v = e({
 	position: "absolute",
-	fontSize: `${s.markWidthRatio * 100}cqw`,
+	fontSize: `${i.markWidthRatio * 100}cqw`,
 	lineHeight: 1,
-	opacity: s.watermarkOpacity
+	opacity: i.watermarkOpacity
 }), y = e({
-	insetBlockStart: `${s.watermarkInsetPercent}%`,
+	insetBlockStart: `${i.watermarkInsetPercent}%`,
 	insetInlineEnd: 0
 }), b = e({
-	insetBlockEnd: `${s.watermarkInsetPercent}%`,
+	insetBlockEnd: `${i.watermarkInsetPercent}%`,
 	insetInlineStart: 0
 }), x = {
-	red: e({ color: r.color.cardRed }),
-	ink: e({ color: r.color.cardInk })
+	red: e({ color: a.color.cardRed }),
+	ink: e({ color: a.color.cardInk })
 }, S = e({
-	backgroundColor: r.color.surfaceRaised,
-	backgroundImage: `repeating-linear-gradient(45deg, ${r.color.surfaceHover} 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, ${r.color.surfaceHover} 0 2px, transparent 2px 6px)`,
+	backgroundColor: a.color.surfaceRaised,
+	backgroundImage: `repeating-linear-gradient(45deg, ${a.color.surfaceHover} 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, ${a.color.surfaceHover} 0 2px, transparent 2px 6px)`,
 	"&::after": {
 		content: "\"\"",
 		position: "absolute",
 		inset: "8%",
-		border: `1px solid ${r.color.borderControl}`,
+		border: `1px solid ${a.color.borderControl}`,
 		borderRadius: "inherit"
 	}
 }), C = {
-	sm: e({ "--game-card-width": r.size.gameCardSm }),
-	md: e({ "--game-card-width": r.size.gameCardMd }),
-	lg: e({ "--game-card-width": r.size.gameCardLg })
+	sm: e({ "--game-card-width": a.size.gameCardSm }),
+	md: e({ "--game-card-width": a.size.gameCardMd }),
+	lg: e({ "--game-card-width": a.size.gameCardLg })
 };
-function w({ ref: e, label: r, value: a, face: o, size: s = "md", rankLabel: c, dimmed: l = !1, children: u, slotProps: h, className: _, sx: v, ...y }) {
-	let b = o ?? (a === void 0 ? "back" : "emoji"), x = b === "back" || a === void 0;
-	return /* @__PURE__ */ i(t, {
+function w({ ref: e, label: r, value: i, face: a, size: s = "md", rankLabel: c, dimmed: l = !1, children: u, slotProps: h, className: _, sx: v, ...y }) {
+	let b = a ?? (i === void 0 ? "back" : "emoji"), x = b === "back" || i === void 0;
+	return /* @__PURE__ */ o(t, {
 		className: _,
 		styles: [
 			d,
@@ -125,16 +118,16 @@ function w({ ref: e, label: r, value: a, face: o, size: s = "md", rankLabel: c,
 			l && p
 		],
 		sx: v,
-		children: (t) => /* @__PURE__ */ i("div", {
+		children: (t) => /* @__PURE__ */ o("div", {
 			...y,
 			ref: e,
 			role: "img",
 			"aria-label": r,
 			"data-ui": "game-card",
 			"data-face": b,
-			"data-deck": x ? void 0 : a.deck,
+			"data-deck": x ? void 0 : i.deck,
 			className: t,
-			children: x ? /* @__PURE__ */ i("span", {
+			children: x ? /* @__PURE__ */ o("span", {
 				"data-ui": "game-card-back",
 				"aria-hidden": "true",
 				className: h?.back?.className,
@@ -143,7 +136,7 @@ function w({ ref: e, label: r, value: a, face: o, size: s = "md", rankLabel: c,
 					S,
 					h?.back?.css
 				]
-			}) : n(u) ? /* @__PURE__ */ i("span", {
+			}) : n(u) ? /* @__PURE__ */ o("span", {
 				"data-ui": "game-card-art",
 				"aria-hidden": "true",
 				className: h?.face?.className,
@@ -153,8 +146,8 @@ function w({ ref: e, label: r, value: a, face: o, size: s = "md", rankLabel: c,
 					h?.face?.css
 				],
 				children: u
-			}) : /* @__PURE__ */ i(T, {
-				value: a,
+			}) : /* @__PURE__ */ o(T, {
+				value: i,
 				rankLabel: c,
 				slotProps: h
 			})
@@ -163,27 +156,27 @@ function w({ ref: e, label: r, value: a, face: o, size: s = "md", rankLabel: c,
 }
 w.displayName = "GameCard";
 function T({ value: e, rankLabel: t, slotProps: n }) {
-	let r = c[e.suit], o = t ?? u[e.rank], s = l[e.suit];
-	return /* @__PURE__ */ a("span", {
+	let r = c[e.suit], i = t ?? u[e.rank], a = l[e.suit];
+	return /* @__PURE__ */ s("span", {
 		"data-ui": "game-card-print",
 		"aria-hidden": "true",
 		className: n?.face?.className,
 		css: [
 			m,
 			h,
-			s !== void 0 && x[s],
+			a !== void 0 && x[a],
 			n?.face?.css
 		],
 		children: [
-			/* @__PURE__ */ i("span", {
+			/* @__PURE__ */ o("span", {
 				css: [v, y],
 				children: r
 			}),
-			/* @__PURE__ */ a("span", {
+			/* @__PURE__ */ s("span", {
 				css: _,
-				children: [/* @__PURE__ */ i("span", { children: o }), /* @__PURE__ */ i("span", { children: r })]
+				children: [/* @__PURE__ */ o("span", { children: i }), /* @__PURE__ */ o("span", { children: r })]
 			}),
-			/* @__PURE__ */ i("span", {
+			/* @__PURE__ */ o("span", {
 				css: [v, b],
 				children: r
 			})

package/dist/game-card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as GameCard, n as RANK_MARKS, r as SUIT_GLYPHS, i as SUIT_INK } from "./game-card-Oeu74giK.js";
+export { t as GameCard, n as RANK_MARKS, r as SUIT_GLYPHS, i as SUIT_INK } from "./game-card-Bnhpz78f.js";

package/dist/{hover-card-Dgu2CwMD.js → hover-card--ijYr1cd.js}

@@ -4,7 +4,7 @@ import { r as n } from "./media-8yrN85VT.js";
 import { t as r } from "./sx-BJXJ2xJK.js";
 import { t as i } from "./use-controlled-state-DpeVQZNR.js";
 import { t as a } from "./renderable-DzcIj1Lo.js";
-import { t as o } from "./avatar-sPxDqFiZ.js";
+import { t as o } from "./avatar-BuM1zB_f.js";
 import { n as s } from "./surface-C69kwSuk.js";
 import { t as c } from "./trigger-style-CtOrdPk4.js";
 import { a as l, i as u } from "./overlay-layer-qEbpEtb8.js";

package/dist/hover-card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as HoverCard } from "./hover-card-Dgu2CwMD.js";
+export { t as HoverCard } from "./hover-card--ijYr1cd.js";

package/dist/index.js

@@ -5,8 +5,8 @@ import { t as n } from "./alert-Bhj-qSMs.js";
 import { t as r } from "./button-C6OV0C7J.js";
 import { t as i } from "./countdown-EcpV6rXy.js";
 import { t as a } from "./announcement-bar-B5J33QUh.js";
-import { t as o } from "./avatar-sPxDqFiZ.js";
-import { t as s } from "./avatar-group-BlMLNw4J.js";
+import { t as o } from "./avatar-BuM1zB_f.js";
+import { t as s } from "./avatar-group-D1UEihvh.js";
 import { t as c } from "./badge-CfhTcA-Z.js";
 import { t as l } from "./segmented-control-DCh-4ca-.js";
 import { t as u } from "./billing-toggle-CgC7yxxo.js";
@@ -19,7 +19,7 @@ import { t as g } from "./calendar-Bg6D2sul.js";
 import { t as _ } from "./card-C008OQCp.js";
 import { t as v } from "./carousel-lTH4Foke.js";
 import { t as y } from "./textarea-D1YwEPmn.js";
-import { t as b } from "./chat-thread-DkB-WMWJ.js";
+import { t as b } from "./chat-thread-CMhwxhoA.js";
 import { t as x } from "./checkbox-CClE61GV.js";
 import { t as S } from "./chip-group-BZUX9KPF.js";
 import { t as C } from "./copy-button-C0p_qrgf.js";
@@ -27,7 +27,7 @@ import { t as w } from "./code-block-CYP89_6h.js";
 import { t as T } from "./command-palette-BrT1n9bb.js";
 import { t as E } from "./text-field-D0VP7b4P.js";
 import { t as D } from "./combobox-D2Oc-co7.js";
-import { t as O } from "./comment-thread-DXfqgRNI.js";
+import { t as O } from "./comment-thread-DbOzYr0q.js";
 import { t as k } from "./container-BxtwJSSD.js";
 import { t as A } from "./context-menu-I4i0LRpm.js";
 import { t as j } from "./date-picker-D-bn-iHs.js";
@@ -44,61 +44,62 @@ import { t as V } from "./progress-Bcuz3Ob4.js";
 import { t as H } from "./file-dropzone-Bi5ikRIz.js";
 import { t as U } from "./filter-toolbar-QRnC4S_H.js";
 import { t as W } from "./flex-CS7eMRcK.js";
-import { i as G, n as K, r as q, t as J } from "./game-card-Oeu74giK.js";
-import { t as Y } from "./hold-to-confirm-CVBA0wNT.js";
-import { t as X } from "./image-compare-Ln2UUqTU.js";
-import { t as Z } from "./in-view-title-BUZCMqge.js";
-import { t as Q } from "./inline-edit-D-pR2RPC.js";
-import { t as $ } from "./hover-card-Dgu2CwMD.js";
-import { t as ee } from "./json-viewer-Dro3WrjS.js";
-import { t as te } from "./kbd-BI_9qzYr.js";
-import { t as ne } from "./keycap-keyboard-Cdx-OAS1.js";
-import { t as re } from "./lightbox-gallery-D0YaSTut.js";
-import { t as ie } from "./link-unfurl-CReyIjyy.js";
-import { t as ae } from "./locale-switcher-DTkySKsM.js";
-import { n as oe, r as se, t as ce } from "./mention-input-BjjAbJCf.js";
-import { t as le } from "./pill-Dd7pog19.js";
-import { t as ue } from "./metric-card-BnFssTXj.js";
-import { t as de } from "./multi-select-B3puEVo0.js";
-import { t as fe } from "./navigation-C_JD43gA.js";
-import { t as pe } from "./slider-DjAnGmlC.js";
-import { n as me, t as he } from "./now-playing-DjVm1Phm.js";
-import { t as ge } from "./pagination-Dkh4bJQh.js";
-import { t as _e } from "./password-field-Da58GP1g.js";
-import { t as ve } from "./photo-grid-Dtl17D74.js";
-import { t as ye } from "./popover-CUMOcMtj.js";
-import { t as be } from "./radio-cards-FkAhESb5.js";
-import { t as xe } from "./radio-group-DItMf2YM.js";
-import { t as Se } from "./resizable-panels-61h9hA3B.js";
-import { t as Ce } from "./scroll-area-B8KkCPOM.js";
-import { t as we } from "./select-SrcQqZjo.js";
-import { n as Te, t as Ee } from "./sheet-stack-DYX1SGSB.js";
-import { a as De, i as Oe, n as ke, o as Ae, r as je, s as Me, t as Ne } from "./shortcut-recorder-VgTQdjjn.js";
-import { i as Pe, n as Fe, r as Ie, t as Le } from "./signature-pad-khL2yhQI.js";
-import { t as Re } from "./skeleton-LJsQsveI.js";
-import { t as ze } from "./sortable-data-table-Bpitup_d.js";
-import { t as Be } from "./spinner-CvzajSg9.js";
-import { t as Ve } from "./split-button-Bu41f2AY.js";
-import { t as He } from "./stack-Bac4sJeI.js";
-import { t as Ue } from "./stepper-C8Ncavbr.js";
-import { t as We } from "./stretch-refresh-OrnTEj7P.js";
-import { t as Ge } from "./swipe-actions-1H5UOZKE.js";
-import { t as Ke } from "./switch-79-hkQqg.js";
-import { t as qe } from "./tabs-Bb5-noYE.js";
-import { t as Je } from "./tag-input-BQaueKEb.js";
-import { n as Ye, r as Xe, t as Ze } from "./theme-provider-BvcY-iJu.js";
-import { n as Qe, r as $e, t as et } from "./theme-root-BrYVcTzt.js";
-import { t as tt } from "./theme-switch-CP42mVDb.js";
-import { t as nt } from "./time-picker-Tnd-JBLC.js";
-import { t as rt } from "./timeline-BcF46lG9.js";
-import { a as it, n as at } from "./toast-CSAbl5yK.js";
+import { t as G } from "./flip-game-card-xmcR_QSq.js";
+import { i as K, n as q, r as J, t as Y } from "./game-card-Bnhpz78f.js";
+import { t as X } from "./hold-to-confirm-CVBA0wNT.js";
+import { t as Z } from "./image-compare-Ln2UUqTU.js";
+import { t as Q } from "./in-view-title-BUZCMqge.js";
+import { t as $ } from "./inline-edit-D-pR2RPC.js";
+import { t as ee } from "./hover-card--ijYr1cd.js";
+import { t as te } from "./json-viewer-Dro3WrjS.js";
+import { t as ne } from "./kbd-BI_9qzYr.js";
+import { t as re } from "./keycap-keyboard-Cdx-OAS1.js";
+import { t as ie } from "./lightbox-gallery-D0YaSTut.js";
+import { t as ae } from "./link-unfurl-CReyIjyy.js";
+import { t as oe } from "./locale-switcher-DTkySKsM.js";
+import { n as se, r as ce, t as le } from "./mention-input-BjjAbJCf.js";
+import { t as ue } from "./pill-Dd7pog19.js";
+import { t as de } from "./metric-card-BnFssTXj.js";
+import { t as fe } from "./multi-select-B3puEVo0.js";
+import { t as pe } from "./navigation-C_JD43gA.js";
+import { t as me } from "./slider-DjAnGmlC.js";
+import { n as he, t as ge } from "./now-playing-DjVm1Phm.js";
+import { t as _e } from "./pagination-Dkh4bJQh.js";
+import { t as ve } from "./password-field-Da58GP1g.js";
+import { t as ye } from "./photo-grid-Dtl17D74.js";
+import { t as be } from "./popover-CUMOcMtj.js";
+import { t as xe } from "./radio-cards-FkAhESb5.js";
+import { t as Se } from "./radio-group-DItMf2YM.js";
+import { t as Ce } from "./resizable-panels-61h9hA3B.js";
+import { t as we } from "./scroll-area-B8KkCPOM.js";
+import { t as Te } from "./select-SrcQqZjo.js";
+import { n as Ee, t as De } from "./sheet-stack-DYX1SGSB.js";
+import { a as Oe, i as ke, n as Ae, o as je, r as Me, s as Ne, t as Pe } from "./shortcut-recorder-VgTQdjjn.js";
+import { i as Fe, n as Ie, r as Le, t as Re } from "./signature-pad-khL2yhQI.js";
+import { t as ze } from "./skeleton-LJsQsveI.js";
+import { t as Be } from "./sortable-data-table-Bpitup_d.js";
+import { t as Ve } from "./spinner-CvzajSg9.js";
+import { t as He } from "./split-button-Bu41f2AY.js";
+import { t as Ue } from "./stack-Bac4sJeI.js";
+import { t as We } from "./stepper-C8Ncavbr.js";
+import { t as Ge } from "./stretch-refresh-OrnTEj7P.js";
+import { t as Ke } from "./swipe-actions-1H5UOZKE.js";
+import { t as qe } from "./switch-79-hkQqg.js";
+import { t as Je } from "./tabs-Bb5-noYE.js";
+import { t as Ye } from "./tag-input-BQaueKEb.js";
+import { n as Xe, r as Ze, t as Qe } from "./theme-provider-BvcY-iJu.js";
+import { n as $e, r as et, t as tt } from "./theme-root-BrYVcTzt.js";
+import { t as nt } from "./theme-switch-CP42mVDb.js";
+import { t as rt } from "./time-picker-Tnd-JBLC.js";
+import { t as it } from "./timeline-BPKY94mT.js";
+import { a as at, n as ot } from "./toast-CSAbl5yK.js";
 import "./toast.js";
-import { t as ot } from "./toast-stack-BCR4Cu7V.js";
-import { t as st } from "./toggle-group-C7ye1v4s.js";
+import { t as st } from "./toast-stack-BCR4Cu7V.js";
+import { t as ct } from "./toggle-group-C7ye1v4s.js";
 import "./tooltip.js";
-import { t as ct } from "./tree-view-CoW4oJIZ.js";
-import { t as lt } from "./typewriter-terminal-BUEsMzo3.js";
-import { t as ut } from "./usage-meter-CYvlB6l3.js";
-import { t as dt } from "./user-menu-MctRu_Lh.js";
-import ft from "@emotion/styled";
-export { e as Accordion, t as ActivityRings, n as Alert, a as AnnouncementBar, o as Avatar, s as AvatarGroup, c as Badge, u as BillingToggle, d as BottomSheet, f as Breadcrumbs, r as Button, h as ButtonGroup, g as Calendar, _ as Card, v as Carousel, b as ChatThread, x as Checkbox, S as ChipGroup, w as CodeBlock, D as Combobox, T as CommandPalette, O as CommentThread, k as Container, A as ContextMenu, C as CopyButton, i as Countdown, j as DatePicker, M as DateRangePicker, N as Dialog, P as Divider, F as Drawer, I as Emblem, L as EmptyState, R as ExpandableCard, B as ExpandingSearch, H as FileDropzone, U as FilterToolbar, W as Flex, J as GameCard, Y as HoldToConfirm, $ as HoverCard, X as ImageCompare, Z as InViewTitle, Q as InlineEdit, ee as JsonViewer, te as Kbd, ne as KeycapKeyboard, re as LightboxGallery, ie as LinkUnfurl, ae as LocaleSwitcher, ce as MentionInput, p as Menu, ue as MetricCard, de as MultiSelect, fe as Navigation, he as NowPlaying, me as NowPlayingLevels, ge as Pagination, _e as PasswordField, ve as PhotoGrid, le as Pill, ye as Popover, V as Progress, K as RANK_MARKS, be as RadioCards, xe as RadioGroup, Se as ResizablePanels, q as SUIT_GLYPHS, G as SUIT_INK, Ce as ScrollArea, z as SearchField, l as SegmentedControl, we as Select, Ee as SheetStack, Ne as ShortcutRecorder, Le as SignatureExportError, Fe as SignaturePad, Re as Skeleton, pe as Slider, ze as SortableDataTable, Be as Spinner, Ve as SplitButton, He as Stack, Ue as Stepper, We as StretchRefresh, Ge as SwipeActions, Ke as Switch, qe as Tabs, Je as TagInput, E as TextField, y as Textarea, Ze as ThemeProvider, et as ThemeRoot, tt as ThemeSwitch, nt as TimePicker, rt as Timeline, at as Toast, ot as ToastStack, st as ToggleGroup, m as Tooltip, ct as TreeView, lt as TypewriterTerminal, ut as UsageMeter, dt as UserMenu, Qe as createTheme, ke as defaultShortcutMessages, je as formatShortcut, Oe as matchesShortcut, oe as mentionText, De as normalizeShortcut, se as serializeMentions, Ie as signatureToPng, Pe as signatureToSvg, ft as styled, Xe as theme, $e as themeTokenStyle, Ae as usePressedShortcutKeys, Te as useSheetStack, Me as useShortcutPlatform, Ye as useTheme, it as useToast };
+import { t as lt } from "./tree-view-CoW4oJIZ.js";
+import { t as ut } from "./typewriter-terminal-BUEsMzo3.js";
+import { t as dt } from "./usage-meter-CYvlB6l3.js";
+import { t as ft } from "./user-menu-Czrrk93A.js";
+import pt from "@emotion/styled";
+export { e as Accordion, t as ActivityRings, n as Alert, a as AnnouncementBar, o as Avatar, s as AvatarGroup, c as Badge, u as BillingToggle, d as BottomSheet, f as Breadcrumbs, r as Button, h as ButtonGroup, g as Calendar, _ as Card, v as Carousel, b as ChatThread, x as Checkbox, S as ChipGroup, w as CodeBlock, D as Combobox, T as CommandPalette, O as CommentThread, k as Container, A as ContextMenu, C as CopyButton, i as Countdown, j as DatePicker, M as DateRangePicker, N as Dialog, P as Divider, F as Drawer, I as Emblem, L as EmptyState, R as ExpandableCard, B as ExpandingSearch, H as FileDropzone, U as FilterToolbar, W as Flex, G as FlipGameCard, Y as GameCard, X as HoldToConfirm, ee as HoverCard, Z as ImageCompare, Q as InViewTitle, $ as InlineEdit, te as JsonViewer, ne as Kbd, re as KeycapKeyboard, ie as LightboxGallery, ae as LinkUnfurl, oe as LocaleSwitcher, le as MentionInput, p as Menu, de as MetricCard, fe as MultiSelect, pe as Navigation, ge as NowPlaying, he as NowPlayingLevels, _e as Pagination, ve as PasswordField, ye as PhotoGrid, ue as Pill, be as Popover, V as Progress, q as RANK_MARKS, xe as RadioCards, Se as RadioGroup, Ce as ResizablePanels, J as SUIT_GLYPHS, K as SUIT_INK, we as ScrollArea, z as SearchField, l as SegmentedControl, Te as Select, De as SheetStack, Pe as ShortcutRecorder, Re as SignatureExportError, Ie as SignaturePad, ze as Skeleton, me as Slider, Be as SortableDataTable, Ve as Spinner, He as SplitButton, Ue as Stack, We as Stepper, Ge as StretchRefresh, Ke as SwipeActions, qe as Switch, Je as Tabs, Ye as TagInput, E as TextField, y as Textarea, Qe as ThemeProvider, tt as ThemeRoot, nt as ThemeSwitch, rt as TimePicker, it as Timeline, ot as Toast, st as ToastStack, ct as ToggleGroup, m as Tooltip, lt as TreeView, ut as TypewriterTerminal, dt as UsageMeter, ft as UserMenu, $e as createTheme, Ae as defaultShortcutMessages, Me as formatShortcut, ke as matchesShortcut, se as mentionText, Oe as normalizeShortcut, ce as serializeMentions, Le as signatureToPng, Fe as signatureToSvg, pt as styled, Ze as theme, et as themeTokenStyle, je as usePressedShortcutKeys, Ee as useSheetStack, Ne as useShortcutPlatform, Xe as useTheme, at as useToast };

package/dist/{thread-parts-Cpktor6D.js → thread-parts-DbKhuwVU.js}

@@ -4,7 +4,7 @@ import { n as t } from "./media-8yrN85VT.js";
 import { n } from "./roving-focus-CYlo_Kf8.js";
 import { t as r } from "./visually-hidden-DgVO3NaB.js";
 import { t as i } from "./button-C6OV0C7J.js";
-import { t as a } from "./avatar-sPxDqFiZ.js";
+import { t as a } from "./avatar-BuM1zB_f.js";
 import { n as o, o as s, s as c, t as l } from "./listbox-style-DNOxAulu.js";
 import { t as u } from "./overlay-portal-C9igMHnC.js";
 import { t as d } from "./part-id-D0zksy32.js";

package/dist/{timeline-BcF46lG9.js → timeline-BPKY94mT.js}

@@ -9,7 +9,7 @@ import { t as c } from "./use-controlled-state-DpeVQZNR.js";
 import { t as l } from "./visually-hidden-DgVO3NaB.js";
 import { t as u } from "./renderable-DzcIj1Lo.js";
 import { t as d } from "./icon-wrapper-C-zMD0uL.js";
-import { t as f } from "./avatar-sPxDqFiZ.js";
+import { t as f } from "./avatar-BuM1zB_f.js";
 import { t as p } from "./part-id-D0zksy32.js";
 import { useEffect as ee, useId as te, useLayoutEffect as ne, useMemo as m, useRef as h, useState as re } from "react";
 import { vars as g } from "@jfrader/tokens/vars";

package/dist/timeline.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Timeline } from "./timeline-BcF46lG9.js";
+export { t as Timeline } from "./timeline-BPKY94mT.js";

package/dist/types/components/avatar/avatar.d.ts

@@ -13,6 +13,8 @@ export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'childr
     src?: string;
     size?: AvatarSize;
     status?: AvatarStatus;
+    /** Pulse the presence ring only when `status="online"`. Defaults to `false`. */
+    pulse?: boolean;
     /** Spoken status word; defaults to the `status` value. Pass a translated word for other locales. */
     statusLabel?: string;
     slotProps?: {
@@ -21,7 +23,7 @@ export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'childr
         status?: AvatarPartProps;
     };
 }
-export declare function Avatar({ ref, name, src, size, status, statusLabel, slotProps, className, sx, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Avatar({ ref, name, src, size, status, pulse, statusLabel, slotProps, className, sx, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Avatar {
     var displayName: string;
 }

package/dist/types/components/flip-game-card/flip-game-card.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+import type { GameCardPartProps, GameCardSize } from '../game-card';
+export interface FlipGameCardProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    /** Shows `back` when true and `front` when false. No interaction changes this prop. */
+    flipped: boolean;
+    /** Content shown when `flipped` is false. */
+    front: ReactNode;
+    /** Content shown when `flipped` is true. Both faces stay mounted. */
+    back: ReactNode;
+    /** Card width, using the GameCard scale. Defaults to `md`. */
+    size?: GameCardSize;
+    slotProps?: {
+        rotator?: GameCardPartProps;
+        front?: GameCardPartProps;
+        back?: GameCardPartProps;
+    };
+}
+export declare function FlipGameCard({ ref, flipped, front, back, size, slotProps, className, sx, ...rest }: FlipGameCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace FlipGameCard {
+    var displayName: string;
+}

package/dist/types/components/flip-game-card/index.d.ts

@@ -0,0 +1,2 @@
+export { FlipGameCard } from './flip-game-card';
+export type { FlipGameCardProps } from './flip-game-card';

package/dist/types/index.d.ts

@@ -36,6 +36,7 @@ export * from './components/expanding-search';
 export * from './components/file-dropzone';
 export * from './components/filter-toolbar';
 export * from './components/flex';
+export * from './components/flip-game-card';
 export * from './components/game-card';
 export * from './components/hold-to-confirm';
 export * from './components/image-compare';

package/dist/types/styling/theme.d.ts

@@ -102,8 +102,10 @@ export declare const theme: {
             readonly fast: "var(--ui-motion-duration-fast)";
             readonly base: "var(--ui-motion-duration-base)";
             readonly slow: "var(--ui-motion-duration-slow)";
+            readonly presence: "var(--ui-motion-duration-presence)";
         };
         readonly easeStandard: "var(--ui-motion-ease-standard)";
+        readonly easePresence: "var(--ui-motion-ease-presence)";
     };
     readonly size: {
         readonly emblemSm: "var(--ui-size-emblem-sm)";
@@ -113,6 +115,7 @@ export declare const theme: {
         readonly gameCardSm: "var(--ui-size-game-card-sm)";
         readonly gameCardMd: "var(--ui-size-game-card-md)";
         readonly gameCardLg: "var(--ui-size-game-card-lg)";
+        readonly gameCardPerspective: "var(--ui-size-game-card-perspective)";
         readonly sheetStackBreakpoint: "var(--ui-size-sheet-stack-breakpoint)";
         readonly sheetStackSheetPeek: "var(--ui-size-sheet-stack-sheet-peek)";
         readonly sheetStackDialogPeek: "var(--ui-size-sheet-stack-dialog-peek)";

package/dist/{user-menu-MctRu_Lh.js → user-menu-Czrrk93A.js}

@@ -8,7 +8,7 @@ import { t as c } from "./use-controlled-state-DpeVQZNR.js";
 import { t as l } from "./visually-hidden-DgVO3NaB.js";
 import { t as u } from "./renderable-DzcIj1Lo.js";
 import { t as d } from "./icon-wrapper-C-zMD0uL.js";
-import { t as f } from "./avatar-sPxDqFiZ.js";
+import { t as f } from "./avatar-BuM1zB_f.js";
 import { t as p } from "./use-scroll-lock-40gXwwAy.js";
 import { s as m } from "./listbox-style-DNOxAulu.js";
 import { t as h } from "./overlay-portal-C9igMHnC.js";

package/dist/user-menu.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as UserMenu } from "./user-menu-MctRu_Lh.js";
+export { t as UserMenu } from "./user-menu-Czrrk93A.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -182,6 +182,10 @@
       "types": "./dist/types/components/flex/index.d.ts",
       "import": "./dist/flex.js"
     },
+    "./flip-game-card": {
+      "types": "./dist/types/components/flip-game-card/index.d.ts",
+      "import": "./dist/flip-game-card.js"
+    },
     "./game-card": {
       "types": "./dist/types/components/game-card/index.d.ts",
       "import": "./dist/game-card.js"
@@ -435,7 +439,7 @@
     "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
     "motion": "^14.1.0",
-    "@jfrader/tokens": "0.7.0"
+    "@jfrader/tokens": "0.7.1"
   },
   "peerDependencies": {
     "@emotion/cache": "^11.14.0",

package/dist/avatar-sPxDqFiZ.js

@@ -1,133 +0,0 @@
-'use client';
-import { i as e } from "./css-BYJhdGh-.js";
-import { n as t } from "./media-8yrN85VT.js";
-import { t as n } from "./sx-BJXJ2xJK.js";
-import { t as r } from "./initials-DEdwNe9_.js";
-import { useState as i } from "react";
-import { vars as a } from "@jfrader/tokens/vars";
-import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
-//#region src/components/avatar/avatar.tsx
-var c = 2, l = e({
-	position: "relative",
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	flexShrink: 0,
-	boxSizing: "border-box",
-	borderRadius: a.radius.full,
-	backgroundColor: a.color.surfaceHover,
-	color: a.color.text,
-	fontWeight: a.fontWeight.medium,
-	lineHeight: 1,
-	userSelect: "none",
-	verticalAlign: "middle",
-	[t]: { outline: "1px solid CanvasText" }
-}), u = {
-	sm: e({
-		inlineSize: a.space[6],
-		blockSize: a.space[6],
-		fontSize: a.textSize.xs
-	}),
-	md: e({
-		inlineSize: a.space[8],
-		blockSize: a.space[8],
-		fontSize: a.textSize.sm
-	}),
-	lg: e({
-		inlineSize: a.space[10],
-		blockSize: a.space[10],
-		fontSize: a.textSize.md
-	})
-}, d = e({
-	display: "block",
-	inlineSize: "100%",
-	blockSize: "100%",
-	borderRadius: a.radius.full,
-	objectFit: "cover"
-}), f = e({
-	position: "absolute",
-	insetBlockEnd: 0,
-	insetInlineEnd: 0,
-	inlineSize: "25%",
-	blockSize: "25%",
-	"&::before": {
-		content: "\"\"",
-		position: "absolute",
-		insetBlockStart: 0,
-		insetInlineStart: 0,
-		inlineSize: "100%",
-		blockSize: "100%",
-		boxSizing: "border-box",
-		borderRadius: a.radius.full,
-		boxShadow: `0 0 0 2px ${a.color.bg}`
-	}
-}), p = {
-	online: e({ "&::before": { backgroundColor: a.color.success } }),
-	away: e({ "&::before": {
-		border: `2px solid ${a.color.warning}`,
-		backgroundColor: "transparent"
-	} }),
-	busy: e({ "&::before": {
-		backgroundColor: a.color.danger,
-		blockSize: "30%",
-		insetBlockStart: "35%"
-	} }),
-	offline: e({ "&::before": {
-		backgroundColor: a.color.textSubtle,
-		inlineSize: "60%",
-		blockSize: "60%",
-		insetBlockStart: "20%",
-		insetInlineStart: "20%"
-	} })
-}, m = e({ [t]: {
-	"&::before": {
-		forcedColorAdjust: "none",
-		backgroundColor: "CanvasText",
-		outline: "2px solid Canvas"
-	},
-	"&[data-status=\"away\"]::before": {
-		borderColor: "CanvasText",
-		backgroundColor: "Canvas"
-	}
-} });
-function h({ ref: e, name: t, src: a, size: h = "md", status: g, statusLabel: _, slotProps: v, className: y, sx: b, ...x }) {
-	let [S, C] = i(), w = a !== void 0 && a !== "" && a !== S, T = g === void 0 ? t : `${t}, ${_ ?? g}`;
-	return /* @__PURE__ */ o(n, {
-		className: y,
-		styles: [l, u[h]],
-		sx: b,
-		children: (n) => /* @__PURE__ */ s("span", {
-			...x,
-			ref: e,
-			"data-ui": "avatar",
-			role: "img",
-			"aria-label": T,
-			className: n,
-			children: [w ? /* @__PURE__ */ o("img", {
-				src: a,
-				alt: "",
-				onError: () => C(a),
-				className: v?.image?.className,
-				css: [d, v?.image?.css]
-			}) : /* @__PURE__ */ o("span", {
-				"aria-hidden": "true",
-				className: v?.fallback?.className,
-				css: v?.fallback?.css,
-				children: r(t, c)
-			}), g !== void 0 && /* @__PURE__ */ o("span", {
-				"aria-hidden": "true",
-				"data-status": g,
-				className: v?.status?.className,
-				css: [
-					f,
-					p[g],
-					m,
-					v?.status?.css
-				]
-			})]
-		})
-	});
-}
-h.displayName = "Avatar";
-//#endregion
-export { h as t };