@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/skeleton/skeleton.module.js

@@ -0,0 +1,9 @@
+import './skeleton.css';// src/components/skeleton/skeleton.module.scss
+var skeleton = "_skeleton_1vc0q_8";
+var loadingPulse = "_loading-pulse_1vc0q_1";
+var skeleton_module_default = {
+	skeleton,
+	"loading-pulse": "_loading-pulse_1vc0q_1",
+	loadingPulse
+};
+export { skeleton_module_default as default, loadingPulse, skeleton };

package/dist/components/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./spinner.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

package/dist/components/spinner/spinner.css

@@ -0,0 +1,7 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._spinner_1old1_3 {
+    display: inline-block;
+    color: var(--spinner-color, currentcolor);
+  }
+}

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export type SpinnerProps = Readonly<{
+    /** Size relative to the current font size (in `em`). @default 1.5 */
+    size?: number;
+    className?: string;
+}>;
+/**
+ * Minor inline loading indicator for small, in-place waits: a button, a field,
+ * a widget. Hidden from assistive tech, so the region it sits in carries the
+ * busy state.
+ *
+ * @example
+ * {isPending ? <Spinner size={1} /> : <List items={data} />}
+ */
+export declare const Spinner: ({ size, className, }: SpinnerProps) => ReactNode;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,yBAGjB,YAAY,KAAG,SAMjB,CAAC"}

package/dist/components/spinner/spinner.js

@@ -0,0 +1,50 @@
+import SvgSpinner from "../../assets/spinner.js";
+import spinner_module_default from "./spinner.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/spinner/spinner.tsx
+/**
+* Minor inline loading indicator for small, in-place waits: a button, a field,
+* a widget. Hidden from assistive tech, so the region it sits in carries the
+* busy state.
+*
+* @example
+* {isPending ? <Spinner size={1} /> : <List items={data} />}
+*/
+var Spinner = (t0) => {
+	const $ = c(8);
+	const { size: t1, className } = t0;
+	const size = t1 === void 0 ? 1.5 : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = clsx(spinner_module_default.spinner, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = `${size}em`;
+	const t4 = `${size}em`;
+	let t5;
+	if ($[2] !== t3 || $[3] !== t4) {
+		t5 = {
+			width: t3,
+			height: t4
+		};
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== t2 || $[6] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SvgSpinner, {
+			className: t2,
+			style: t5,
+			"aria-hidden": "true"
+		});
+		$[5] = t2;
+		$[6] = t5;
+		$[7] = t6;
+	} else t6 = $[7];
+	return t6;
+};
+export { Spinner };

package/dist/components/spinner/spinner.module.js

@@ -0,0 +1,4 @@
+import './spinner.css';// src/components/spinner/spinner.module.scss
+var spinner = "_spinner_1old1_3";
+var spinner_module_default = { spinner };
+export { spinner_module_default as default, spinner };

package/dist/components/stale/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./stale.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stale/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stale/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/stale/index.js

@@ -0,0 +1 @@
+export { Stale } from "./stale.js";

package/dist/components/stale/stale.css

@@ -0,0 +1,60 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1tgdq_3 {
+    position: relative;
+  }
+  @media not (prefers-reduced-motion) {
+    ._content_1tgdq_7 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._content_1tgdq_7[data-busy] {
+    opacity: var(--stale-busy-opacity, 0.55);
+    pointer-events: none;
+  }
+  ._overlay_1tgdq_15 {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--stale-gap, var(--sys-unit-8));
+    padding: var(--stale-pad, var(--sys-unit-16));
+    background-color: color-mix(in oklab, var(--stale-scrim, var(--sys-color-surface)), transparent 25%);
+    backdrop-filter: blur(8px);
+    color: var(--sys-color-text);
+    text-align: center;
+  }
+  @media not (prefers-reduced-motion) {
+    ._overlay_1tgdq_15 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard), backdrop-filter var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._overlay_1tgdq_15[data-starting-style], ._overlay_1tgdq_15[data-ending-style] {
+    backdrop-filter: blur(0);
+    opacity: 0;
+  }
+  ._message_1tgdq_38 {
+    display: grid;
+    justify-items: center;
+    gap: var(--stale-gap, var(--sys-unit-8));
+    max-inline-size: 40ch;
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-medium);
+  }
+  ._illustration_1tgdq_46 {
+    display: grid;
+    place-items: center;
+    color: var(--stale-illustration-fg, var(--sys-color-primary));
+  }
+  @media not (prefers-reduced-motion) {
+    ._retry_1tgdq_52 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard), translate var(--sys-motion-short) var(--sys-motion-emphasized);
+    }
+  }
+  ._retry_1tgdq_52[data-starting-style], ._retry_1tgdq_52[data-ending-style] {
+    translate: 0 var(--sys-unit-2);
+    opacity: 0;
+  }
+}

package/dist/components/stale/stale.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode } from "react";
+export type StaleRootProps = Readonly<{
+    /** Whether a background refresh is in flight. */
+    busy: boolean;
+    /** Ms of `busy` before anything is shown at all. @default 150 */
+    busyAfter?: number;
+    /**
+     * Ms the busy treatment stays up once shown, even if the refresh finishes
+     * sooner. @default 200
+     */
+    busyMinDuration?: number;
+    /** Ms of `busy` before the overlay surfaces. @default 4000 */
+    slowAfter?: number;
+    /** Ms of `busy` before the retry appears. @default 8000 */
+    stuckAfter?: number;
+    children?: ReactNode;
+    className?: string;
+}>;
+export type StaleContentProps = Readonly<{
+    children?: ReactNode;
+    className?: string;
+}>;
+export type StaleOverlayProps = Readonly<{
+    children?: ReactNode;
+    className?: string;
+}>;
+export type StaleMessageProps = Readonly<{
+    /** The moving indicator above the copy, such as the app's animated logo. @default <Spinner size={2} /> */
+    illustration?: ReactNode;
+    /** What the overlay says, such as "This is taking longer than usual." */
+    children: ReactNode;
+    className?: string;
+}>;
+export type StaleRetryProps = Readonly<{
+    onRetry: () => void;
+    /** The retry's label, such as "Try again". */
+    children: ReactNode;
+    className?: string;
+}>;
+declare const Root: ({ busy, busyAfter, busyMinDuration, slowAfter, stuckAfter, children, className, }: StaleRootProps) => ReactNode;
+declare const Content: ({ children, className, }: StaleContentProps) => ReactNode;
+declare const Overlay: ({ children, className, }: StaleOverlayProps) => ReactNode;
+declare const Message: ({ illustration, children, className, }: StaleMessageProps) => ReactNode;
+declare const Retry: ({ onRetry, children, className, }: StaleRetryProps) => ReactNode;
+type StaleNamespace = Readonly<{
+    Root: typeof Root;
+    Content: typeof Content;
+    Overlay: typeof Overlay;
+    Message: typeof Message;
+    Retry: typeof Retry;
+}>;
+/**
+ * Content that stays visible while a background refresh runs, escalating the
+ * longer the refresh takes: `Content` dims once busy, `Overlay` surfaces once
+ * slow with its `Message`, and `Retry` appears once stuck. A refresh that
+ * finishes within `busyAfter` shows nothing.
+ *
+ * @example
+ * <Stale.Root busy={query.isFetching}>
+ * 	<Stale.Content>{table}</Stale.Content>
+ * 	<Stale.Overlay>
+ * 		<Stale.Message>This is taking longer than usual.</Stale.Message>
+ * 		<Stale.Retry onRetry={() => query.refetch()}>Try again</Stale.Retry>
+ * 	</Stale.Overlay>
+ * </Stale.Root>
+ */
+export declare const Stale: StaleNamespace;
+export {};
+//# sourceMappingURL=stale.d.ts.map

package/dist/components/stale/stale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stale.d.ts","sourceRoot":"","sources":["../../../src/components/stale/stale.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,SAAS,EAEd,MAAM,OAAO,CAAC;AAsBf,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACrC,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,0GAA0G;IAC1G,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,QAAA,MAAM,IAAI,sFAQP,cAAc,KAAG,SAkBnB,CAAC;AAEF,QAAA,MAAM,OAAO,6BAGV,iBAAiB,KAAG,SAYtB,CAAC;AAEF,QAAA,MAAM,OAAO,6BAGV,iBAAiB,KAAG,SAkBtB,CAAC;AAEF,QAAA,MAAM,OAAO,2CAIV,iBAAiB,KAAG,SAStB,CAAC;AAEF,QAAA,MAAM,KAAK,sCAIR,eAAe,KAAG,SAkBpB,CAAC;AAEF,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,EAAE,cAMnB,CAAC"}

package/dist/components/stale/stale.js

@@ -0,0 +1,231 @@
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { usePresence } from "../../lib/hooks/use-presence.js";
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { Button } from "../button/button.js";
+import { Spinner } from "../spinner/spinner.js";
+import stale_module_default from "./stale.module.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/stale/stale.tsx
+var StaleContext = createContext(null);
+var usePhase = () => {
+	return useRequiredContext(StaleContext, "Stale.* must be rendered inside <Stale.Root>.");
+};
+var isOverlaid = (phase) => phase === "slow" || phase === "stuck";
+var Root = (t0) => {
+	const $ = c(15);
+	const { busy, busyAfter, busyMinDuration, slowAfter, stuckAfter, children, className } = t0;
+	let t1;
+	if ($[0] !== busy || $[1] !== busyAfter || $[2] !== busyMinDuration || $[3] !== slowAfter || $[4] !== stuckAfter) {
+		t1 = {
+			busy,
+			busyAfter,
+			busyMinDuration,
+			slowAfter,
+			stuckAfter
+		};
+		$[0] = busy;
+		$[1] = busyAfter;
+		$[2] = busyMinDuration;
+		$[3] = slowAfter;
+		$[4] = stuckAfter;
+		$[5] = t1;
+	} else t1 = $[5];
+	const phase = useBusyPhase(t1);
+	let t2;
+	if ($[6] !== className) {
+		t2 = clsx(stale_module_default.root, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== phase || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			"data-phase": phase,
+			children
+		});
+		$[8] = children;
+		$[9] = phase;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== phase || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx(StaleContext, {
+			value: phase,
+			children: t3
+		});
+		$[12] = phase;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+};
+var Content = (t0) => {
+	const $ = c(10);
+	const { children, className } = t0;
+	const phase = usePhase();
+	const busy = phase !== "fresh";
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(stale_module_default.content, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = busy || void 0;
+	const t3 = busy || void 0;
+	let t4;
+	if ($[2] !== phase) {
+		t4 = isOverlaid(phase);
+		$[2] = phase;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== children || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			"data-busy": t2,
+			"aria-busy": t3,
+			inert: t4,
+			children
+		});
+		$[4] = children;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+};
+var Overlay = (t0) => {
+	const $ = c(8);
+	const { children, className } = t0;
+	const phase = usePhase();
+	const overlayRef = useRef(null);
+	let t1;
+	if ($[0] !== phase) {
+		t1 = isOverlaid(phase);
+		$[0] = phase;
+		$[1] = t1;
+	} else t1 = $[1];
+	const presence = usePresence(t1, overlayRef);
+	if (!presence.mounted) return null;
+	let t2;
+	if ($[2] !== className) {
+		t2 = clsx(stale_module_default.overlay, className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== children || $[5] !== presence.props || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref: overlayRef,
+			className: t2,
+			...presence.props,
+			children
+		});
+		$[4] = children;
+		$[5] = presence.props;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+};
+var Message = (t0) => {
+	const $ = c(10);
+	const { illustration, children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(stale_module_default.message, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== illustration) {
+		t2 = illustration ?? /* @__PURE__ */ jsx(Spinner, { size: 2 });
+		$[2] = illustration;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: stale_module_default.illustration,
+			"aria-hidden": "true",
+			children: t2
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== children || $[7] !== t1 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("p", {
+			className: t1,
+			role: "status",
+			children: [t3, children]
+		});
+		$[6] = children;
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+};
+var Retry = (t0) => {
+	const $ = c(7);
+	const { onRetry, children, className } = t0;
+	const phase = usePhase();
+	const retryRef = useRef(null);
+	const presence = usePresence(phase === "stuck", retryRef);
+	if (!presence.mounted) return null;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(stale_module_default.retry, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== onRetry || $[4] !== presence.props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			ref: retryRef,
+			variant: "tertiary",
+			size: "sm",
+			onClick: onRetry,
+			className: t1,
+			...presence.props,
+			children
+		});
+		$[2] = children;
+		$[3] = onRetry;
+		$[4] = presence.props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+/**
+* Content that stays visible while a background refresh runs, escalating the
+* longer the refresh takes: `Content` dims once busy, `Overlay` surfaces once
+* slow with its `Message`, and `Retry` appears once stuck. A refresh that
+* finishes within `busyAfter` shows nothing.
+*
+* @example
+* <Stale.Root busy={query.isFetching}>
+* 	<Stale.Content>{table}</Stale.Content>
+* 	<Stale.Overlay>
+* 		<Stale.Message>This is taking longer than usual.</Stale.Message>
+* 		<Stale.Retry onRetry={() => query.refetch()}>Try again</Stale.Retry>
+* 	</Stale.Overlay>
+* </Stale.Root>
+*/
+var Stale = {
+	Root,
+	Content,
+	Overlay,
+	Message,
+	Retry
+};
+export { Stale };

package/dist/components/stale/stale.module.js

@@ -0,0 +1,16 @@
+import './stale.css';// src/components/stale/stale.module.scss
+var root = "_root_1tgdq_3";
+var content = "_content_1tgdq_7";
+var overlay = "_overlay_1tgdq_15";
+var message = "_message_1tgdq_38";
+var illustration = "_illustration_1tgdq_46";
+var retry = "_retry_1tgdq_52";
+var stale_module_default = {
+	root,
+	content,
+	overlay,
+	message,
+	illustration,
+	retry
+};
+export { content, stale_module_default as default, illustration, message, overlay, retry, root };

package/dist/components/status-message/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./status-message.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/status-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status-message/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/status-message/index.js

@@ -0,0 +1 @@
+export { StatusMessage } from "./status-message.js";

package/dist/components/status-message/status-message.css

@@ -0,0 +1,122 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_6woix_3 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--status-message-gap, var(--sys-unit-6));
+    padding: var(--status-message-pad, var(--sys-unit-12));
+    color: var(--status-message-fg, var(--sys-color-text));
+    text-align: center;
+  }
+  ._disc_6woix_12[data-variant=subtle] {
+    --_status-message-disc-bg: var(--sys-color-neutral-bg);
+    --_status-message-disc-fg: var(--sys-color-neutral-fg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-variant=solid] {
+    --_status-message-disc-bg: var(--sys-color-neutral-fg);
+    --_status-message-disc-fg: var(--sys-color-neutral-bg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-variant=outline] {
+    --_status-message-disc-bg: transparent;
+    --_status-message-disc-fg: var(--sys-color-neutral-fg);
+    --_status-message-disc-border: var(--sys-color-neutral-border);
+  }
+  ._disc_6woix_12[data-tone=info][data-variant=subtle] {
+    --_status-message-disc-bg: var(--sys-color-info-bg);
+    --_status-message-disc-fg: var(--sys-color-info-fg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=info][data-variant=solid] {
+    --_status-message-disc-bg: var(--sys-color-info-fg);
+    --_status-message-disc-fg: var(--sys-color-info-bg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=info][data-variant=outline] {
+    --_status-message-disc-bg: transparent;
+    --_status-message-disc-fg: var(--sys-color-info-fg);
+    --_status-message-disc-border: var(
+    	--sys-color-info-border
+    );
+  }
+  ._disc_6woix_12[data-tone=success][data-variant=subtle] {
+    --_status-message-disc-bg: var(--sys-color-success-bg);
+    --_status-message-disc-fg: var(--sys-color-success-fg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=success][data-variant=solid] {
+    --_status-message-disc-bg: var(--sys-color-success-fg);
+    --_status-message-disc-fg: var(--sys-color-success-bg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=success][data-variant=outline] {
+    --_status-message-disc-bg: transparent;
+    --_status-message-disc-fg: var(--sys-color-success-fg);
+    --_status-message-disc-border: var(
+    	--sys-color-success-border
+    );
+  }
+  ._disc_6woix_12[data-tone=warning][data-variant=subtle] {
+    --_status-message-disc-bg: var(--sys-color-warning-bg);
+    --_status-message-disc-fg: var(--sys-color-warning-fg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=warning][data-variant=solid] {
+    --_status-message-disc-bg: var(--sys-color-warning-fg);
+    --_status-message-disc-fg: var(--sys-color-warning-bg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=warning][data-variant=outline] {
+    --_status-message-disc-bg: transparent;
+    --_status-message-disc-fg: var(--sys-color-warning-fg);
+    --_status-message-disc-border: var(
+    	--sys-color-warning-border
+    );
+  }
+  ._disc_6woix_12[data-tone=error][data-variant=subtle] {
+    --_status-message-disc-bg: var(--sys-color-error-bg);
+    --_status-message-disc-fg: var(--sys-color-error-fg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=error][data-variant=solid] {
+    --_status-message-disc-bg: var(--sys-color-error-fg);
+    --_status-message-disc-fg: var(--sys-color-error-bg);
+    --_status-message-disc-border: transparent;
+  }
+  ._disc_6woix_12[data-tone=error][data-variant=outline] {
+    --_status-message-disc-bg: transparent;
+    --_status-message-disc-fg: var(--sys-color-error-fg);
+    --_status-message-disc-border: var(
+    	--sys-color-error-border
+    );
+  }
+  ._disc_6woix_12 {
+    display: grid;
+    place-items: center;
+    inline-size: var(--status-message-disc-size, var(--sys-unit-32));
+    block-size: var(--status-message-disc-size, var(--sys-unit-32));
+    border-radius: var(--sys-radius-full);
+    background: var(--status-message-disc-bg, var(--_status-message-disc-bg));
+    color: var(--status-message-disc-fg, var(--_status-message-disc-fg));
+  }
+  ._illustration_6woix_104 {
+    display: grid;
+    place-items: center;
+    color: var(--status-message-illustration-fg, var(--sys-color-primary));
+  }
+  ._title_6woix_109 {
+    font: var(--status-message-title-font, var(--sys-font-heading-medium));
+  }
+  ._description_6woix_112 {
+    max-inline-size: var(--status-message-measure, 40ch);
+    font: var(--status-message-description-font, var(--sys-font-body-medium));
+  }
+  ._action_6woix_116 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--status-message-action-gap, var(--sys-unit-4));
+  }
+}