@stealthscale/component-surfaces 0.0.1 → 0.1.2

package/dist/pages/card/card.js

@@ -0,0 +1,1337 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { t as recipe } from "../../recipes-DG4wIA5R.js";
+import { a as Overlay, c as Header, d as Content, f as Aside, i as Root, l as Footer, n as Title, o as Media, r as Section, s as Indicator, u as Description } from "../../shared-qwSz4fS5.js";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { c } from "react/compiler-runtime";
+import { Badge, Stat } from "@stealthscale/component-data";
+import { Link } from "@stealthscale/component-navigation";
+import { Heading, List, Text } from "@stealthscale/component-typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, CheckIcon, ChevronDownIcon, EllipsisIcon, ReceiptTextIcon, ShoppingBagIcon } from "lucide-react";
+import { Collapsible } from "@stealthscale/component-disclosure";
+import { Button, IconButton } from "@stealthscale/component-actions";
+import { Skeleton, SkeletonText } from "@stealthscale/component-feedback";
+import { Switch } from "@stealthscale/component-forms";
+//#region src/card/examples/dunes.webp
+var dunes_default = "data:image/webp;base64,UklGRhIOAABXRUJQVlA4IAYOAABQmgCdASrAAxwCPpVKok2lpCMiIAgAsBKJaW7gJOzZ7ybhnpz+M9P/tEI/3Pm5A8/4eagX//XQsE/719t45PL/2AKDHTkPfbJyHvxYQfiHV37DeLlngRz2h+LCDBS3mX09dz5qve58UB5f6i/jvM4oXBJzx+RdzeJdyRN7R/bZ6lN0kUCf6LCfKE98Gx65G4fy6B1IOFIaz1Ma6Se7Y0sNdNafmoC5Ug78snFFJTaRCdFT956iw8Zda+oltDUWDghfoBf2xUf73jd8FR7FD0N1lGs+CKqRDqvQ+xV4f8oFnSar4IuKpoa7CooXbT3XStOJl8nl8jMQ6qctuw3rNnAAgCQzJeEySF+W9n666oY3YllgN76STHJwFf+uLR/bMVs4agIxU/j40AAZNVoyHjNkZ8MK0hJqFnL0juO8aaj0T+Hyt9SLzzRkNeeoqfqg99T+4krJR5QKtSkaIPSfwsMvRm8nkWQ8KOHrwof7tOP8eCMXlGlSoFwqH0R7qxVgP0Z+H/KePYXkSykgBIghDKnohcEpW8VeP8uKoF+eu+pxZnwiTyY2gKtGz/qyLimWoBwJ7uXVRKCgjWu/GS8nb+/nKElRTM0acNo+6+8slbVFRX9hJDbhy2SH/nP4upeIZ9OOF5kUJFFJFQg67zgFT9zCWsdQfhjUNG2zb7vaP0R1eATS0frWOpOKRDNXgssmKJgqAdloi/8vQZx5nH3ty/LespU6mRdWB7+IYWD3HezNggrz96HrRctLfWmcIul/jUaPyu1lmSpJ1dD5zs7wGlEUFrHreESxUQIywqEi5yLgni8OONG+g/onvUpecAqfu+dLlLw5fi6l4hn9jh1LmtSPk9XeCIqfvPSWpzPXM9tj/HFuKn5znVak+XnVW9jnYvBnBmne2wFWWZum/Odamp9U///4e5nXQjjGjxDrGtmW9u62O3vExHl4FtqCOMzVxejXQ6KPR2PLl4hKdpJ73Y4fHh1B8UW8XqZpqVqxpU8OeoiuHCSNHU2WgEXJg6dqgI622c/eA0qZQLUMhkYc6sZDxDmiRpceXGB/zvk0NXf/peuJ///Cq+CLihXwH8dO8jM0f1Gj39LHA0JafR7ZNapM8ZKnwPTkLRbip+8z5tJlFTeX/PFbAGi89RVaU5XE5IdeNyso2TbkNMoYV3PdTP96x6Oarl1bsVni5PE721/r3Qy7fTP/eeoqfvPF+9p/xDof96S2y6esifNz306E61frHiHTvXmgs7PUVP3nVKfWJ/RA+iWt0UK9dyp4Xw6DVomiOne2wFWLyNfkvJ07T5F2+1kxKRZF5vowqh9fIiB7Njo6KZmneJP9jT/nqKeB90ey+xHmo0TRORjnqKn7wPMcbZOW+yyI64bxghlCeQJP6sUHWDOAd+CHM8CUxh7WCD9A8JIpensbJ3CHyPw9ps9MeIZ4BHr2hOrFyz/sqTLNOt94SybZdQUTKm3dg+nUFg/wne2v7/dQ6oIelilceKOdIYgRn3XO5PLUGCuKLSxAt4w0td4CfuV8CWtaLSpz70Z+hdOfjP3TmInyfqxWqvaGUojcVn3PtY6lZX/qXyFN2J/Cdo09JBjTzbhKxmg6lge/+eHV1Zy83mXrVFLb/1peparTaz3evcFloSKIhB4PatMQOgUR9vSEO3eAAP7yRb/8Rfub/dnv555zIxPqkNGHa8lYoK+XURBr3w/WkEDWuw+d+5Eex21oEPX+6q4c4J9HBYiLveHA5q/q1aPSSpNVi1iOsBOu/rq5AuEBhwxKx4k/V15v9g09uISbPDoVsblRnt8BJu0HCL7iG53yfVgD2JrIzgtDAMRP40boGDlG5iixyBiGDHLHSGQnVD0US+y9fm9XfGPPI4MsjgDDPO+ie/340nB1kEbRxzm7bOy+LKil4eDbLafAexF4JItuL1v833DvfWdXMXZiw6D3NJvuBNKMf/SbXKm30O/XWksj24s7ubtqi22n55dWopS8QqbkXGsdqf0Q0xmsIQk+VU2FLveg+wHgu2+mIBz0Tt8mP4bZJY39YUtKzpendQSuc6eUlcnEzM7DfChBTg2SaioOZZSJi1u5fE0KMH4jZ3nGr0pbuiam5aGorz8sBiRBDYpOgSU9VNAY/akU3d52hHjm1msYRxTaYUc42z2Uz/UMhUxd8MXEpG2182SzGouc5BKyRWSBERfodJItiY/9bxRMdQoQq1OhCEEGVmycjvps4mSuB5o/PGVw6/ed0EpAUSyO/EGyFcCVCOhtjgB5rlVDK7ZYoZvDVXsR3FgU4cc8BkVzhFXcTz4WEEbqiiReuAoIK1/iQZo8TqnJb1Ki2Mp7PynXjxh5LXnk9e4U/voBBeOIaW5qNgzQgqW7soZtnfTgKgGBUP3NCjmLxv7Ws1WNlumTegl4re84LydXZnWErE6zubq1OhkRV5iLyqS75lCZZ/kmUDYrDudJtE8E3CYQ5MOqUTWvJ3yeWA63teQnSiIsCdvwEdZlASdANCThVpZtmjJzJu/8qzLPM852VoFS2OoE4QfqeP4SvdQ45ytmtOM0hB7beXjStQpS9DzNaZeSLlqPOfB7IwQkAlpibexGParWnxEwFsEJ5dMNYu55Sy7PlSDcUWCYKzmz1+bwcArxYlQighEWD1WsfpywsY3rY5iCHJDXu58YEyu9esXgcADvasJmeDPGY0tZozw9XLY/qQQLMBiFfvf6KZ7OeU0EdA0BpCnOvgxH3H2Era0M6xqSVRH20htMcXiMkfZhM3AifSv6P65O8PvdF9b1hxn9zlDpOocDG6d1m2goYlNc3AaR9xOTdEuCazWq9DLNh/OMP1xEWVY1ik4MDiQGFgYRyk0abu0Dkhrj1HKEd5GSqD2MGXSooTe50DTII6Z9ULbLSpkBqqQQ7mgfN9wFAlsrMlg0GdLDCMaNlNMGqbgeiymPizr8oLePI0s7aA3FRMWF3Sq1A2SNui+E5GfHwhM34EhH21WajyiGnkl94zCWpn94eWHKWa0ZUEMLs/zi2luyimkis4P9i69qMMUeiQOOfnZwgI3eIRCYaHtaUlKfMkMwH2rFbdkS7Wb8miNza35l18Ma6g/C1sEw9Hne5+51sv6xTbxqDtzF/kaKQPC34jMDiir/PbUIVC0/wEjZ5s7D6T8JczKmuuUBF4/YLjg3eaO8EEiciQqbPn+bw/J51kdqCdvJR9arWY4mrP0CxWHVU8LV8T+RNdSQ05TMHf+c9U0LPdTjmHM3fZD5a0bfCc9LghIStLWmwq6X475qGu/CLBYAQlHfGKOTVKsyBPTrWn+n+iBKzTc9lxiijZkWPFTaHQrJalcCy5MVo3IRc6t6qY3NNSZOr12D0T8ugKuflniR9+eiVgY21nrGzDCZn+hDxlG4WLbrQk2L2W0KNS/OXsv2UJBLJ5LJms2jSIEsm+KS8JirBG/8nJNvEXXDdH+fjfrJ0YikKWiju+F7CKPM2aobBR1D3mPop69xNxdn6V7x6QnNcBgIr2+wrMVdWi+H5NhXKYT4FmZHY8ievLXYZcVbkUULfvgbaI29c0uyDCwTYWrgeHvdgNCc2+P5juWKarsZexQ0raw6tOc//YSrCOb6Qu8JVwwcaj57a8F9FmnXQlsXJaHHX2VphOzd8DWwQhGNP9K6mLrTO2kw7Ui6fhwfLxgXyLFQXrSg4SbWaNqukKJSjP7gsjYVdGGoLbemSWYlrQbZtPO6C+QE+Wxtxxn7qvYl9EnWd6iuE7e7ZF9Yzx/wVSmQbdSERX+h0nwyX82vHyC6wumF6sjtNzsUoWSZ0rqK8aCM5U8mstPj9ojZFG7bZFx/4rVWs/Bi6d2a2Pkf98tpbCx2Z3pnuTdZmJjm5UBvoJtni/URt0/Y76wcaA9IVdr4wkVw7UxxYqRQF9LfuDZwYKMyfHnLRC7MFlYoct93YOyZgmvXLaTd+idWntnczY3n+q5BwfuEeAwV6DsFMt/nmKZh2YWhPeES3rwdcM2QkMMhdXJYkUtCtpWULbjKtUT/qxfUFw2zhEME2/TK9+ORiWjbt3KL2tcx/J7aTtFsrYb45w2eGinnkqn6NTj/uAASDCoXN0jRmXWDDDb/nwd5pTdp2AAmDHxH/PU2MooMt7AuUlhIdPW+dxaKDGQrQa7As2fZ2bsc364zmTYB4jsl7wqH9xU27ZJJHmvO2kqAmP6rHjNQUdi03tnSIzZTGBll28PazBTNVe5LGmC3iL0mizi7VM3ecHlfDRot2PwU6t4cbcBeAbxKWoHWqLb0iO3hNCbyIm2atwKeM4f5N+1/QBFk+PDzFx1V9BQn8wbdTEoY3Awyc7xvEn8V5FNAfv3G3ZvlORyjjTDhpGuOhY4UY1AP7/4XjIs09fYwkmxJCRPmoucUvn8ajFp9TLRNstZb34kBY8M/uo3P5QZj6oj1nkXhlZDEFBfDl5A4oQLyfOSczUZu32s4+lz5ycW6HM1INmm/eth5KG2q2/WAemJ3eYelcJoJpxWHFTeouZXwWMcUL3zWyEVqmAkQBVzB3cQaXhMXeJZMCB3Cv0lQ09kLqFOmW9gjEcTP2oPpLhk8HAvs4mIhQEarK59DCU7kAj+hceM045JKo4aVXCWZAjLthVNtS7GJbon6e7ZI2Ji7RJz3NOJyQAlO715mLclWkRmzd+UUlc/TLhjVNYiVpvmCbPO3p0rOZf9b2iTiApU62470lpx4soSyPmPLHq+N2DwAMaaqc8tXKahz7DnE1saTPe2i3ee9srbmpv2f5t3T/Crz2p8raBl4XyLEqOmcL4liVO7StqmzR4UMcZGAAA==";
+//#endregion
+//#region src/card/examples/article.example.tsx
+var article_example_exports = /* @__PURE__ */ __exportAll({
+	Article: () => Article,
+	source: () => source$9
+});
+function Article(props) {
+	const $ = c(35);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("article.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: dunes_default
+		});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("article.topic");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Badge, {
+			variant: "solid",
+			children: t2
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("article.read");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Media, { children: [t1, /* @__PURE__ */ jsxs(Overlay, { children: [t3, t5] })] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("article.title");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Title, { children: /* @__PURE__ */ jsx(Link, {
+			href: "#settlement",
+			inherit: true,
+			children: t7
+		}) });
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("article.date");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Description, { children: t9 });
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10 || $[23] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Header, { children: [t8, t10] });
+		$[22] = t10;
+		$[23] = t8;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== t) {
+		t12 = t("article.summary");
+		$[25] = t;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Content, { children: t12 });
+		$[27] = t12;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== props || $[30] !== t0 || $[31] !== t11 || $[32] !== t13 || $[33] !== t6) {
+		t14 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			interactive: true,
+			scrim: true,
+			...props,
+			children: [
+				t6,
+				t11,
+				t13
+			]
+		});
+		$[29] = props;
+		$[30] = t0;
+		$[31] = t11;
+		$[32] = t13;
+		$[33] = t6;
+		$[34] = t14;
+	} else t14 = $[34];
+	return t14;
+}
+const source$9 = "import { type ReactElement } from \"react\";\n\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Link } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nimport dunes from \"./dunes.webp\";\n\nexport function Article(props: Card.RootProps): ReactElement {\n  const { t } = useWords(\"card\");\n\n  return (\n    <Card.Root aria-label={t(\"article.title\")} interactive scrim {...props}>\n      <Card.Media>\n        <img alt=\"\" src={dunes} />\n        <Card.Overlay>\n          <Badge variant=\"solid\">{t(\"article.topic\")}</Badge>\n          <Text size=\"sm\">{t(\"article.read\")}</Text>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Header>\n        <Card.Title>\n          <Link href=\"#settlement\" inherit>\n            {t(\"article.title\")}\n          </Link>\n        </Card.Title>\n        <Card.Description>{t(\"article.date\")}</Card.Description>\n      </Card.Header>\n      <Card.Content>{t(\"article.summary\")}</Card.Content>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/balance.example.tsx
+var balance_example_exports = /* @__PURE__ */ __exportAll({
+	Balance: () => Balance,
+	source: () => source$8
+});
+function Balance(props) {
+	const $ = c(23);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("balance.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("balance.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Stat.Label, { children: t1 });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("balance.value");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t3 });
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Stat.Indicator, { children: /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": true }) });
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("balance.help");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Stat.HelpText, { children: [t5, t6] });
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t2 || $[16] !== t4 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t2,
+			t4,
+			t7
+		] }) });
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== props || $[20] !== t0 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			variant: "subtle",
+			...props,
+			children: t8
+		});
+		$[19] = props;
+		$[20] = t0;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+const source$8 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon } from \"lucide-react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nexport function Balance(props: Card.RootProps): ReactElement {\n  const { t } = useWords(\"card\");\n\n  return (\n    <Card.Root aria-label={t(\"balance.label\")} variant=\"subtle\" {...props}>\n      <Card.Content>\n        <Stat.Root>\n          <Stat.Label>{t(\"balance.label\")}</Stat.Label>\n          <Stat.ValueText>{t(\"balance.value\")}</Stat.ValueText>\n          <Stat.HelpText>\n            <Stat.Indicator>\n              <ArrowUpIcon aria-hidden />\n            </Stat.Indicator>\n            {t(\"balance.help\")}\n          </Stat.HelpText>\n        </Stat.Root>\n      </Card.Content>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/expandable.example.tsx
+var expandable_example_exports = /* @__PURE__ */ __exportAll({
+	Expandable: () => Expandable,
+	source: () => source$7
+});
+function Expandable() {
+	const $ = c(28);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [
+			"first",
+			"second",
+			"third"
+		];
+		$[0] = t0;
+	} else t0 = $[0];
+	const transfers = t0;
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("expandable.title");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("expandable.title");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("expandable.amount");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: t4 });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("expandable.show");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Collapsible.Indicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": true }) });
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [t7, t8] });
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(List.Root, {
+			gap: "xs",
+			variant: "plain",
+			children: transfers.map((transfer) => /* @__PURE__ */ jsx(List.Item, { children: t(`expandable.transfers.${transfer}`) }, transfer))
+		}) });
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Collapsible.Root, {
+			size: "sm",
+			variant: "subtle",
+			children: [t9, t10]
+		}) });
+		$[21] = t10;
+		$[22] = t9;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t1 || $[25] !== t11 || $[26] !== t6) {
+		t12 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t1,
+			children: [t6, t11]
+		});
+		$[24] = t1;
+		$[25] = t11;
+		$[26] = t6;
+		$[27] = t12;
+	} else t12 = $[27];
+	return t12;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Collapsible } from \"@stealthscale/component-disclosure\";\nimport { List } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nexport function Expandable(): ReactElement {\n  const { t } = useWords(\"card\");\n  const transfers = [\"first\", \"second\", \"third\"];\n\n  return (\n    <Card.Root aria-label={t(\"expandable.title\")}>\n      <Card.Header>\n        <Card.Title>{t(\"expandable.title\")}</Card.Title>\n        <Card.Description>{t(\"expandable.amount\")}</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Collapsible.Root size=\"sm\" variant=\"subtle\">\n          <Collapsible.Trigger>\n            {t(\"expandable.show\")}\n            <Collapsible.Indicator>\n              <ChevronDownIcon aria-hidden />\n            </Collapsible.Indicator>\n          </Collapsible.Trigger>\n          <Collapsible.Content>\n            <List.Root gap=\"xs\" variant=\"plain\">\n              {transfers.map((transfer) => (\n                <List.Item key={transfer}>{t(`expandable.transfers.${transfer}`)}</List.Item>\n              ))}\n            </List.Root>\n          </Collapsible.Content>\n        </Collapsible.Root>\n      </Card.Content>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/invoice.example.tsx
+var invoice_example_exports = /* @__PURE__ */ __exportAll({
+	Invoice: () => Invoice,
+	source: () => source$6
+});
+function Invoice(props) {
+	const $ = c(41);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("invoice.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ReceiptTextIcon, { "aria-hidden": true }) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("invoice.title");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("invoice.issued");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: t4 });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("invoice.more");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(EllipsisIcon, { "aria-hidden": true });
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Aside, { children: /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t6,
+			size: "sm",
+			variant: "ghost",
+			children: t7
+		}) });
+		$[14] = t6;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t3 || $[17] !== t5 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Header, { children: [
+			t1,
+			t3,
+			t5,
+			t8
+		] });
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = t("invoice.lines");
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Content, { children: t10 });
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t) {
+		t12 = t("invoice.remind");
+		$[24] = t;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "subtle",
+			children: t12
+		});
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t) {
+		t14 = t("invoice.send");
+		$[28] = t;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t14
+		});
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t13 || $[33] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Footer, { children: [t13, t15] });
+		$[32] = t13;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== props || $[36] !== t0 || $[37] !== t11 || $[38] !== t16 || $[39] !== t9) {
+		t17 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			...props,
+			children: [
+				t9,
+				t11,
+				t16
+			]
+		});
+		$[35] = props;
+		$[36] = t0;
+		$[37] = t11;
+		$[38] = t16;
+		$[39] = t9;
+		$[40] = t17;
+	} else t17 = $[40];
+	return t17;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { EllipsisIcon, ReceiptTextIcon } from \"lucide-react\";\n\nimport { Button, IconButton } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nexport function Invoice(props: Card.RootProps): ReactElement {\n  const { t } = useWords(\"card\");\n\n  return (\n    <Card.Root aria-label={t(\"invoice.title\")} {...props}>\n      <Card.Header>\n        <Card.Indicator>\n          <ReceiptTextIcon aria-hidden />\n        </Card.Indicator>\n        <Card.Title>{t(\"invoice.title\")}</Card.Title>\n        <Card.Description>{t(\"invoice.issued\")}</Card.Description>\n        <Card.Aside>\n          <IconButton aria-label={t(\"invoice.more\")} size=\"sm\" variant=\"ghost\">\n            <EllipsisIcon aria-hidden />\n          </IconButton>\n        </Card.Aside>\n      </Card.Header>\n      <Card.Content>{t(\"invoice.lines\")}</Card.Content>\n      <Card.Footer>\n        <Button size=\"sm\" variant=\"subtle\">\n          {t(\"invoice.remind\")}\n        </Button>\n        <Button size=\"sm\">{t(\"invoice.send\")}</Button>\n      </Card.Footer>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/linked.example.tsx
+var linked_example_exports = /* @__PURE__ */ __exportAll({
+	Linked: () => Linked,
+	source: () => source$5
+});
+function Linked(props) {
+	const $ = c(28);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("invoice.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ReceiptTextIcon, { "aria-hidden": true }) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("invoice.title");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, { children: /* @__PURE__ */ jsx(Link, {
+			href: "#invoice-4821",
+			inherit: true,
+			children: t2
+		}) });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("invoice.issued");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: t4 });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("invoice.lines");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Content, { children: t7 });
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("invoice.remind");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "subtle",
+			children: t9
+		}) });
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== props || $[23] !== t0 || $[24] !== t10 || $[25] !== t6 || $[26] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			...props,
+			children: [
+				t6,
+				t8,
+				t10
+			]
+		});
+		$[22] = props;
+		$[23] = t0;
+		$[24] = t10;
+		$[25] = t6;
+		$[26] = t8;
+		$[27] = t11;
+	} else t11 = $[27];
+	return t11;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { ReceiptTextIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Link } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nexport function Linked(props: Card.RootProps): ReactElement {\n  const { t } = useWords(\"card\");\n\n  return (\n    <Card.Root aria-label={t(\"invoice.title\")} {...props}>\n      <Card.Header>\n        <Card.Indicator>\n          <ReceiptTextIcon aria-hidden />\n        </Card.Indicator>\n        <Card.Title>\n          <Link href=\"#invoice-4821\" inherit>\n            {t(\"invoice.title\")}\n          </Link>\n        </Card.Title>\n        <Card.Description>{t(\"invoice.issued\")}</Card.Description>\n      </Card.Header>\n      <Card.Content>{t(\"invoice.lines\")}</Card.Content>\n      <Card.Footer>\n        <Button size=\"sm\" variant=\"subtle\">\n          {t(\"invoice.remind\")}\n        </Button>\n      </Card.Footer>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/portrait.webp
+var portrait_default = "data:image/webp;base64,UklGRiICAABXRUJQVlA4IBYCAACQEgCdASrAAMAAPolEm0wlI6IiIEjIoBEJZ27gQephfMlraP7UA/VNHwC6/y/IH0AW54YF3Ia9o3Agu8If+7/rav7ORcT9voayHzf/8YaVp/l2XaZ2ZlX////9iJEAirPjtXXpKo/0/1ygg/xepph/4c6Wv1mVL/vlv72yKyRO3hBenSJw8ZapY/kyF39/IfaLDGaKtyXJ0ik2oIGAAP7joeOv/8TF+7T9MV8H/F/y4sH9mRjFFKDMsVmz9ZGFi449i2YzmJDlUgxNtc8XArkmqYfZmsy0p11qS5LqChP9b1NHZfjx5lWWPDn0H0V6TalJSIkzGkXc1k4UPXY6WOmGdx7lor7pYyVzERXOMHhZ0VAZnKbaQebSxF8bVUT6zqRZocjdL533+V8EyIIdTQIpXnOAx8a9Q3yccycMf8RKzuWcy7c0qzYYMhAef32iU1B4dWLxRnEH498HQ58b/YZW+hdpGV7YUhynYgOVZMXq9NmpX68vDKY5S9MFvYPnhoiEXhECGClRpps5symtaNAuWkuMZMtG+yoa5m2OQhORVaLzPiOUAZPOR4YxEZDB1UabXFBsRQFdZ+32VLuvRhTt28IHo28doUQEv0k+dKnHdEHbYPT7JWaV7Y2hwXSasmhv/TwRWSCBp/CM7wU+OlzN+4hQ6K/gPgT8Ux5tIkCNm8Nr52TPhHiPE9ukoc/bDjZYtmFgAAA=";
+//#endregion
+//#region src/card/examples/loading.example.tsx
+var loading_example_exports = /* @__PURE__ */ __exportAll({
+	Loading: () => Loading,
+	source: () => source$4
+});
+function Loading() {
+	const $ = c(18);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("loading.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Skeleton, {
+			radius: "full",
+			children: /* @__PURE__ */ jsx("img", {
+				alt: "",
+				src: portrait_default
+			})
+		}) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("profile.name");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, {
+			as: "p",
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				as: "span",
+				children: /* @__PURE__ */ jsx("span", { children: t2 })
+			})
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("profile.role");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(Skeleton, {
+			as: "span",
+			children: /* @__PURE__ */ jsx("span", { children: t4 })
+		}) });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(SkeletonText, {}) });
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t0 || $[16] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			"aria-busy": true,
+			"aria-label": t0,
+			children: [t6, t7]
+		});
+		$[15] = t0;
+		$[16] = t6;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { Skeleton, SkeletonText } from \"@stealthscale/component-feedback\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nimport portrait from \"./portrait.webp\";\n\nexport function Loading(): ReactElement {\n  const { t } = useWords(\"card\");\n\n  return (\n    <Card.Root aria-busy aria-label={t(\"loading.label\")}>\n      <Card.Header>\n        <Card.Indicator>\n          <Skeleton radius=\"full\">\n            <img alt=\"\" src={portrait} />\n          </Skeleton>\n        </Card.Indicator>\n        <Card.Title as=\"p\">\n          <Skeleton as=\"span\">\n            <span>{t(\"profile.name\")}</span>\n          </Skeleton>\n        </Card.Title>\n        <Card.Description>\n          <Skeleton as=\"span\">\n            <span>{t(\"profile.role\")}</span>\n          </Skeleton>\n        </Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <SkeletonText />\n      </Card.Content>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/plan.example.tsx
+var plan_example_exports = /* @__PURE__ */ __exportAll({
+	Plan: () => Plan,
+	source: () => source$3
+});
+function Plan() {
+	const $ = c(42);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [
+			"reconcile",
+			"payouts",
+			"exports",
+			"support"
+		];
+		$[0] = t0;
+	} else t0 = $[0];
+	const features = t0;
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("plan.name");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("plan.name");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("plan.for");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: t4 });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("plan.popular");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Aside, { children: /* @__PURE__ */ jsx(Badge, {
+			palette: "primary",
+			children: t6
+		}) });
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t3 || $[16] !== t5 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Header, { children: [
+			t3,
+			t5,
+			t7
+		] });
+		$[15] = t3;
+		$[16] = t5;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = t("plan.price");
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Heading, {
+			as: "p",
+			size: "2xl",
+			children: t9
+		});
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t) {
+		t11 = t("plan.per");
+		$[23] = t;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t11
+		});
+		$[25] = t11;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t10 || $[28] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Content, { children: [t10, t12] });
+		$[27] = t10;
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsx(List.Root, {
+			gap: "sm",
+			variant: "plain",
+			children: features.map((feature) => /* @__PURE__ */ jsxs(List.Item, { children: [/* @__PURE__ */ jsx(List.Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true }) }), t(`plan.features.${feature}`)] }, feature))
+		}) });
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t) {
+		t15 = t("plan.start");
+		$[32] = t;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Button, { children: t15 }) });
+		$[34] = t15;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t1 || $[37] !== t13 || $[38] !== t14 || $[39] !== t16 || $[40] !== t8) {
+		t17 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t1,
+			palette: "primary",
+			variant: "outline",
+			children: [
+				t8,
+				t13,
+				t14,
+				t16
+			]
+		});
+		$[36] = t1;
+		$[37] = t13;
+		$[38] = t14;
+		$[39] = t16;
+		$[40] = t8;
+		$[41] = t17;
+	} else t17 = $[41];
+	return t17;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Heading, List, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nexport function Plan(): ReactElement {\n  const { t } = useWords(\"card\");\n  const features = [\"reconcile\", \"payouts\", \"exports\", \"support\"];\n\n  return (\n    <Card.Root aria-label={t(\"plan.name\")} palette=\"primary\" variant=\"outline\">\n      <Card.Header>\n        <Card.Title>{t(\"plan.name\")}</Card.Title>\n        <Card.Description>{t(\"plan.for\")}</Card.Description>\n        <Card.Aside>\n          <Badge palette=\"primary\">{t(\"plan.popular\")}</Badge>\n        </Card.Aside>\n      </Card.Header>\n      <Card.Content>\n        <Heading as=\"p\" size=\"2xl\">\n          {t(\"plan.price\")}\n        </Heading>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"plan.per\")}\n        </Text>\n      </Card.Content>\n      <Card.Section>\n        <List.Root gap=\"sm\" variant=\"plain\">\n          {features.map((feature) => (\n            <List.Item key={feature}>\n              <List.Indicator>\n                <CheckIcon aria-hidden />\n              </List.Indicator>\n              {t(`plan.features.${feature}`)}\n            </List.Item>\n          ))}\n        </List.Root>\n      </Card.Section>\n      <Card.Footer>\n        <Button>{t(\"plan.start\")}</Button>\n      </Card.Footer>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/studio.webp
+var studio_default = "data:image/webp;base64,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";
+//#endregion
+//#region src/card/examples/product.example.tsx
+var product_example_exports = /* @__PURE__ */ __exportAll({
+	Product: () => Product,
+	source: () => source$2
+});
+function Product() {
+	const $ = c(33);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("product.name");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: studio_default
+		});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("product.new");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Media, { children: [t1, /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(Badge, {
+			palette: "success",
+			variant: "solid",
+			children: t2
+		}) })] });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("product.name");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Title, { children: t4 });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("product.detail");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Description, { children: t6 });
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t5 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Header, { children: [t5, t7] });
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("product.price");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Heading, {
+			as: "p",
+			size: "lg",
+			children: t9
+		}) });
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ShoppingBagIcon, { "aria-hidden": true });
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("product.add");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsxs(Button, { children: [t11, t12] }) });
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t0 || $[28] !== t10 || $[29] !== t13 || $[30] !== t3 || $[31] !== t8) {
+		t14 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			children: [
+				t3,
+				t8,
+				t10,
+				t13
+			]
+		});
+		$[27] = t0;
+		$[28] = t10;
+		$[29] = t13;
+		$[30] = t3;
+		$[31] = t8;
+		$[32] = t14;
+	} else t14 = $[32];
+	return t14;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { ShoppingBagIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Heading } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nimport studio from \"./studio.webp\";\n\nexport function Product(): ReactElement {\n  const { t } = useWords(\"card\");\n\n  return (\n    <Card.Root aria-label={t(\"product.name\")}>\n      <Card.Media>\n        <img alt=\"\" src={studio} />\n        <Card.Overlay>\n          <Badge palette=\"success\" variant=\"solid\">\n            {t(\"product.new\")}\n          </Badge>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Header>\n        <Card.Title>{t(\"product.name\")}</Card.Title>\n        <Card.Description>{t(\"product.detail\")}</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Heading as=\"p\" size=\"lg\">\n          {t(\"product.price\")}\n        </Heading>\n      </Card.Content>\n      <Card.Footer>\n        <Button>\n          <ShoppingBagIcon aria-hidden />\n          {t(\"product.add\")}\n        </Button>\n      </Card.Footer>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/harbour.webp
+var harbour_default = "data:image/webp;base64,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";
+//#endregion
+//#region src/card/examples/profile.example.tsx
+var profile_example_exports = /* @__PURE__ */ __exportAll({
+	Profile: () => Profile,
+	source: () => source$1
+});
+function Profile() {
+	const $ = c(45);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("profile.name");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Media, { children: /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: harbour_default
+		}) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: portrait_default
+		}) });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("profile.name");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Title, { children: t3 });
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("profile.role");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Description, { children: t5 });
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("profile.message");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Aside, { children: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "outline",
+			children: t7
+		}) });
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t4 || $[17] !== t6 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Header, { children: [
+			t2,
+			t4,
+			t6,
+			t8
+		] });
+		$[16] = t4;
+		$[17] = t6;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = t("profile.bio");
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Content, { children: t10 });
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t) {
+		t12 = t("profile.payouts");
+		$[24] = t;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Badge, { children: t12 });
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t) {
+		t14 = t("profile.close");
+		$[28] = t;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Badge, { children: t14 });
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t) {
+		t16 = t("profile.treasury");
+		$[32] = t;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Badge, { children: t16 });
+		$[34] = t16;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] !== t13 || $[37] !== t15 || $[38] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Footer, { children: [
+			t13,
+			t15,
+			t17
+		] });
+		$[36] = t13;
+		$[37] = t15;
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t0 || $[41] !== t11 || $[42] !== t18 || $[43] !== t9) {
+		t19 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			justify: "start",
+			children: [
+				t1,
+				t9,
+				t11,
+				t18
+			]
+		});
+		$[40] = t0;
+		$[41] = t11;
+		$[42] = t18;
+		$[43] = t9;
+		$[44] = t19;
+	} else t19 = $[44];
+	return t19;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Badge } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nimport harbour from \"./harbour.webp\";\nimport portrait from \"./portrait.webp\";\n\nexport function Profile(): ReactElement {\n  const { t } = useWords(\"card\");\n\n  return (\n    <Card.Root aria-label={t(\"profile.name\")} justify=\"start\">\n      <Card.Media>\n        <img alt=\"\" src={harbour} />\n      </Card.Media>\n      <Card.Header>\n        <Card.Indicator>\n          <img alt=\"\" src={portrait} />\n        </Card.Indicator>\n        <Card.Title>{t(\"profile.name\")}</Card.Title>\n        <Card.Description>{t(\"profile.role\")}</Card.Description>\n        <Card.Aside>\n          <Button size=\"sm\" variant=\"outline\">\n            {t(\"profile.message\")}\n          </Button>\n        </Card.Aside>\n      </Card.Header>\n      <Card.Content>{t(\"profile.bio\")}</Card.Content>\n      <Card.Footer>\n        <Badge>{t(\"profile.payouts\")}</Badge>\n        <Badge>{t(\"profile.close\")}</Badge>\n        <Badge>{t(\"profile.treasury\")}</Badge>\n      </Card.Footer>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/examples/settings.example.tsx
+var settings_example_exports = /* @__PURE__ */ __exportAll({
+	Settings: () => Settings,
+	source: () => source
+});
+function Settings() {
+	const $ = c(20);
+	const { t } = useWords("card");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [
+			{
+				checked: true,
+				name: "payouts"
+			},
+			{
+				checked: true,
+				name: "overdue"
+			},
+			{
+				checked: false,
+				name: "digest"
+			}
+		];
+		$[0] = t0;
+	} else t0 = $[0];
+	const alerts = t0;
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("settings.title");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("settings.title");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("settings.about");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: t4 });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = alerts.map((alert) => /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsxs(Switch.Root, {
+			defaultChecked: alert.checked,
+			spread: true,
+			children: [/* @__PURE__ */ jsx(Switch.Label, { children: t(`settings.${alert.name}`) }), /* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) })]
+		}) }, alert.name));
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t1 || $[17] !== t6 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t1,
+			children: [t6, t7]
+		});
+		$[16] = t1;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Switch } from \"@stealthscale/component-forms\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\n\nexport function Settings(): ReactElement {\n  const { t } = useWords(\"card\");\n  const alerts = [\n    { checked: true, name: \"payouts\" },\n    { checked: true, name: \"overdue\" },\n    { checked: false, name: \"digest\" },\n  ];\n\n  return (\n    <Card.Root aria-label={t(\"settings.title\")}>\n      <Card.Header>\n        <Card.Title>{t(\"settings.title\")}</Card.Title>\n        <Card.Description>{t(\"settings.about\")}</Card.Description>\n      </Card.Header>\n      {alerts.map((alert) => (\n        <Card.Section key={alert.name}>\n          <Switch.Root defaultChecked={alert.checked} spread>\n            <Switch.Label>{t(`settings.${alert.name}`)}</Switch.Label>\n            <Switch.Control>\n              <Switch.Thumb />\n            </Switch.Control>\n          </Switch.Root>\n        </Card.Section>\n      ))}\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/card/card.specimen.tsx
+/**
+* Builds a hand-written scene that renders one example in a room of a sidebar's width.
+*
+* @param name - Key of the scene under `card.scenes`.
+* @param example - Example module, whose source the scene shows.
+* @param Example - Component the example module exports.
+* @returns The scene.
+*/
+function roomed(name, example, Example) {
+	return {
+		about: `card.scenes.${name}.about`,
+		draw: () => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Example, {})
+		}),
+		example,
+		title: `card.scenes.${name}.title`
+	};
+}
+/**
+* Hand-written scenes, one per example file that shows the card in use.
+*/
+const shown = [
+	roomed("profile", profile_example_exports, Profile),
+	roomed("product", product_example_exports, Product),
+	roomed("article", article_example_exports, () => /* @__PURE__ */ jsx(Article, {})),
+	roomed("balance", balance_example_exports, () => /* @__PURE__ */ jsx(Balance, {})),
+	roomed("plan", plan_example_exports, Plan),
+	roomed("settings", settings_example_exports, Settings),
+	roomed("loading", loading_example_exports, Loading),
+	roomed("expandable", expandable_example_exports, Expandable)
+];
+var card_specimen_default = specimen({
+	about: "card.about",
+	id: "components/surfaces/card",
+	imports: "import { Card } from \"@stealthscale/component-surfaces\";",
+	scenes: [...shown, ...scenesOf(recipe, {
+		axes: {
+			disabled: {
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "xs",
+					children: /* @__PURE__ */ jsx(Linked, { ...props })
+				}),
+				example: linked_example_exports,
+				with: { interactive: true }
+			},
+			effect: { with: { palette: "info" } },
+			interactive: {
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "xs",
+					children: /* @__PURE__ */ jsx(Linked, { ...props })
+				}),
+				example: linked_example_exports
+			},
+			orientation: {
+				direction: "column",
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "md",
+					children: /* @__PURE__ */ jsx(Article, { ...props })
+				}),
+				example: article_example_exports
+			},
+			palette: {
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "xs",
+					children: /* @__PURE__ */ jsx(Balance, { ...props })
+				}),
+				example: balance_example_exports
+			},
+			scrim: {
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "xs",
+					children: /* @__PURE__ */ jsx(Article, { ...props })
+				}),
+				example: article_example_exports
+			}
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Invoice, { ...props })
+		}),
+		example: invoice_example_exports,
+		namespace: "card",
+		order: [
+			"variant",
+			"palette",
+			"size",
+			"radius",
+			"orientation",
+			"scrim",
+			"divided",
+			"justify",
+			"interactive",
+			"disabled",
+			"effect",
+			"motion"
+		]
+	})],
+	title: "card.title"
+});
+//#endregion
+export { card_specimen_default as default, shown };