@thewhatmatters/wmds 0.2.0

package/dist/components/atoms/Kbd/useKbdChoiceKeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKbdChoiceKeys.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Kbd/useKbdChoiceKeys.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAc,EACd,OAAO,GACR,EAAE,uBAAuB,GAAG,IAAI,CAoBhC"}

package/dist/components/atoms/Kbd/useKbdChoiceKeys.js

@@ -0,0 +1,18 @@
+"use client";
+import { isEditableGridOverlayTarget as e } from "../../../lib/gridOverlayUtils.js";
+import { useEffect as t, useRef as n } from "react";
+//#region src/components/atoms/Kbd/useKbdChoiceKeys.ts
+function r({ enabled: r = !0, choices: i }) {
+	let a = n(i);
+	a.current = i, t(() => {
+		if (!r) return;
+		let t = (t) => {
+			if (t.defaultPrevented || t.metaKey || t.ctrlKey || t.altKey || e(t.target)) return;
+			let n = a.current[t.key];
+			n != null && (t.preventDefault(), n());
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [r]);
+}
+//#endregion
+export { r as useKbdChoiceKeys };

package/dist/components/atoms/Radio/Radio.d.ts

@@ -0,0 +1,26 @@
+import { type InputHTMLAttributes } from "react";
+import { type RadioSize } from "./radioStyles";
+import type { InputStatus } from "../Input/inputShellStyles";
+export { radioSizes, type RadioSize } from "./radioStyles";
+export { inputStatuses, type InputStatus } from "../Input/inputShellStyles";
+/** Layout-only — width/margin on the row wrapper. */
+export type RadioLayoutClassName = string;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: RadioSize;
+    /** Visible label — always rendered; use `labelHidden` to visually hide. */
+    label: string;
+    labelHidden?: boolean;
+    /** Neutral helper below the label. */
+    description?: string;
+    /** Validation status — tints circle border; pair with `message` (standalone use). */
+    status?: InputStatus;
+    /** Validation copy below the row — requires `status`. */
+    message?: string;
+    className?: RadioLayoutClassName;
+}
+/**
+ * Single radio option — circle + label row; compose in **RadioGroup**.
+ * Compose inside **RadioGroup** for grouped selection, or use standalone with a shared `name`.
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/atoms/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAGf,OAAO,EAgBL,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAiIhB,CAAC"}

package/dist/components/atoms/Radio/Radio.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import "../Input/inputShellStyles.js";
+import { InputStatusBanner as t } from "../inputShared/InputStatusBanner.js";
+import { radioCircleClassesFor as n, radioDescriptionClasses as r, radioDescriptionRowClasses as i, radioDotClasses as a, radioDotSizeClasses as o, radioHiddenInputClasses as s, radioHitTargetDescriptionAlignClasses as c, radioHitTargetSizeClasses as l, radioLabelClassesFor as u, radioRowBaseClasses as d, radioRowSizeClasses as f, radioSizes as p, radioStatusBannerClassesFor as m, radioTextColumnClasses as h } from "./radioStyles.js";
+import { forwardRef as g, useId as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/atoms/Radio/Radio.tsx
+var S = {
+	sm: "sm",
+	md: "md"
+};
+function C(e) {
+	e.message != null && e.status == null && console.warn("[WMDS Radio] `message` requires `status`.");
+}
+var w = g(function({ size: p = "md", label: g, labelHidden: w = !1, description: T, status: E, message: D, className: O, disabled: k, checked: A, defaultChecked: j, id: M, onChange: N, ...P }, F) {
+	let I = _(), L = M ?? I;
+	C({
+		status: E,
+		message: D
+	});
+	let R = A !== void 0, [z, B] = v(j ?? !1), V = R ? !!A : z, H = D != null && D.length > 0 && E != null, U = H ? `${L}-message` : void 0, W = T != null && !w ? `${L}-description` : void 0, G = [
+		P["aria-describedby"],
+		W,
+		U
+	].filter(Boolean).join(" ") || void 0, K = (e) => {
+		R || B(e.target.checked), N?.(e);
+	}, q = n(p, V, k, H ? void 0 : E), J = T != null && !w, Y = (t) => /* @__PURE__ */ x("span", {
+		className: e("relative flex shrink-0 items-center justify-center", l[p], t),
+		children: [/* @__PURE__ */ b("input", {
+			...P,
+			ref: F,
+			id: L,
+			type: "radio",
+			checked: R ? A : void 0,
+			defaultChecked: R ? void 0 : j,
+			disabled: k,
+			"aria-invalid": E === "error" || void 0,
+			"aria-describedby": G,
+			onChange: K,
+			className: s
+		}), /* @__PURE__ */ b("span", {
+			className: q,
+			"aria-hidden": !0,
+			children: V ? /* @__PURE__ */ b("span", { className: e(o[p], a) }) : null
+		})]
+	}), X = /* @__PURE__ */ b("label", {
+		htmlFor: L,
+		className: e(d, !J && "items-center", !J && f[p], k && "cursor-not-allowed", O),
+		children: w ? /* @__PURE__ */ x(y, { children: [Y(), /* @__PURE__ */ b("span", {
+			className: "sr-only",
+			children: g
+		})] }) : J ? /* @__PURE__ */ x("span", {
+			className: i[p],
+			children: [Y(c[p]), /* @__PURE__ */ x("span", {
+				className: h,
+				children: [/* @__PURE__ */ b("span", {
+					className: u(k, !0),
+					children: g
+				}), /* @__PURE__ */ b("span", {
+					id: W,
+					className: r,
+					children: T
+				})]
+			})]
+		}) : /* @__PURE__ */ x(y, { children: [Y(), /* @__PURE__ */ b("span", {
+			className: u(k),
+			children: g
+		})] })
+	});
+	return !H || E == null || U == null ? X : /* @__PURE__ */ x("div", {
+		className: "flex w-full flex-col gap-1.5",
+		children: [X, /* @__PURE__ */ b(t, {
+			status: E,
+			message: D,
+			messageId: U,
+			size: S[p],
+			messagePosition: "bottom",
+			bannerClassName: m(E)
+		})]
+	});
+});
+//#endregion
+export { w as Radio, p as radioSizes };

package/dist/components/atoms/Radio/radioStyles.d.ts

@@ -0,0 +1,28 @@
+import { type InputStatus } from "../Input/inputShellStyles";
+export declare const radioSizes: readonly ["sm", "md"];
+export type RadioSize = (typeof radioSizes)[number];
+/** Row rhythm — aligns with cluster sm (28px) / md (36px) tiers. */
+export declare const radioRowSizeClasses: Record<RadioSize, string>;
+export declare const radioHitTargetSizeClasses: Record<RadioSize, string>;
+export declare const radioCircleSizeClasses: Record<RadioSize, string>;
+export declare const radioDotSizeClasses: Record<RadioSize, string>;
+export declare const radioCircleBaseClasses: string;
+export declare const radioCircleUncheckedClasses = "border-border-emphasized bg-surface group-hover/radio:border-border-emphasized group-hover/radio:bg-body";
+export declare const radioCircleCheckedClasses = "border-primary bg-primary group-hover/radio:border-primary group-hover/radio:bg-primary";
+export declare const radioDotClasses = "rounded-full bg-primary-foreground";
+export declare const radioCircleDisabledClasses = "opacity-50";
+export declare const radioLabelClasses: string;
+export declare const radioDescriptionClasses: string;
+export declare const radioTextColumnClasses = "flex min-w-0 flex-col gap-px";
+export declare const radioLabelWithDescriptionClasses: string;
+export declare const radioDescriptionRowClasses: Record<RadioSize, string>;
+export declare const radioHitTargetDescriptionAlignClasses: Record<RadioSize, string>;
+export declare const radioRowBaseClasses = "group/radio relative flex w-full cursor-pointer";
+export declare const radioRowLabelOnlyClasses = "items-center";
+export declare const radioRowDisabledClasses = "cursor-not-allowed";
+export declare const radioHiddenInputClasses = "peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed";
+export declare const radioFocusRingClasses = "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-focus-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-body";
+export declare function radioCircleClassesFor(size: RadioSize, checked: boolean, disabled?: boolean, status?: InputStatus): string;
+export declare function radioLabelClassesFor(disabled?: boolean, withDescription?: boolean): string;
+export declare function radioStatusBannerClassesFor(status: InputStatus): string;
+//# sourceMappingURL=radioStyles.d.ts.map

package/dist/components/atoms/Radio/radioStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Radio/radioStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,UAAU,uBAAwB,CAAC;AAEhD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG5D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAIlC,CAAC;AAEF,eAAO,MAAM,2BAA2B,6GACoE,CAAC;AAE7G,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,eAAO,MAAM,eAAe,uCAAuC,CAAC;AAEpE,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,iBAAiB,QAA8B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,QAAiD,CAAC;AAEtF,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,eAAO,MAAM,gCAAgC,QAAyC,CAAC;AAEvF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGhE,CAAC;AAEF,eAAO,MAAM,qCAAqC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG3E,CAAC;AAEF,eAAO,MAAM,mBAAmB,oDAAoD,CAAC;AAErF,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,eAAO,MAAM,uBAAuB,uBAAuB,CAAC;AAE5D,eAAO,MAAM,uBAAuB,8FACyD,CAAC;AAE9F,eAAO,MAAM,qBAAqB,sKACmI,CAAC;AAEtK,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,CAAC,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CASR;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAK1F;AAED,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAKvE"}

package/dist/components/atoms/Radio/radioStyles.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { motionTransition as n } from "../../../lib/motion.js";
+import { inputStatusBannerSurfaceClasses as r, inputStatusShellClasses as i } from "../Input/inputShellStyles.js";
+//#region src/components/atoms/Radio/radioStyles.ts
+var a = ["sm", "md"], o = {
+	sm: "min-h-7 gap-2",
+	md: "min-h-9 gap-2.5"
+}, s = {
+	sm: "size-7",
+	md: "size-9"
+}, c = {
+	sm: "size-[18px] rounded-full",
+	md: "size-[22px] rounded-full"
+}, l = {
+	sm: "size-2",
+	md: "size-2.5"
+}, u = e("pointer-events-none flex items-center justify-center border shadow-none", "transition-[background-color,border-color]", n("fast")), d = "border-border-emphasized bg-surface group-hover/radio:border-border-emphasized group-hover/radio:bg-body", f = "border-primary bg-primary group-hover/radio:border-primary group-hover/radio:bg-primary", p = "rounded-full bg-primary-foreground", m = "opacity-50", h = t("ui-label"), g = e(t("caption"), "leading-snug"), _ = "flex min-w-0 flex-col gap-px", v = e(h, "leading-tight"), y = {
+	sm: "flex min-w-0 items-start gap-2",
+	md: "flex min-w-0 items-start gap-2.5"
+}, b = {
+	sm: "mt-px",
+	md: "mt-0.5"
+}, x = "group/radio relative flex w-full cursor-pointer", S = "items-center", C = "cursor-not-allowed", w = "peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", T = "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-focus-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-body";
+function E(t, n, r, a) {
+	return e(u, c[t], T, n ? f : d, a != null && i[a], r && "opacity-50");
+}
+function D(t, n) {
+	return e(n ? v : h, t && "opacity-50");
+}
+function O(t) {
+	return e("flex w-full items-start gap-2 rounded-lg px-2.5 py-2 leading-snug", r[t]);
+}
+//#endregion
+export { u as radioCircleBaseClasses, f as radioCircleCheckedClasses, E as radioCircleClassesFor, m as radioCircleDisabledClasses, c as radioCircleSizeClasses, d as radioCircleUncheckedClasses, g as radioDescriptionClasses, y as radioDescriptionRowClasses, p as radioDotClasses, l as radioDotSizeClasses, T as radioFocusRingClasses, w as radioHiddenInputClasses, b as radioHitTargetDescriptionAlignClasses, s as radioHitTargetSizeClasses, h as radioLabelClasses, D as radioLabelClassesFor, v as radioLabelWithDescriptionClasses, x as radioRowBaseClasses, C as radioRowDisabledClasses, S as radioRowLabelOnlyClasses, o as radioRowSizeClasses, a as radioSizes, O as radioStatusBannerClassesFor, _ as radioTextColumnClasses };

package/dist/components/atoms/RiveHand/RiveHand.d.ts

@@ -0,0 +1,44 @@
+import { riveHandArtboards, riveHandSrc, riveHandWasmSrc, riveHands, type RiveHandEntrance, type RiveHandName } from "./riveHandUtils";
+export { riveHandArtboards, riveHandSrc, riveHandWasmSrc, riveHands, type RiveHandEntrance, type RiveHandName, };
+/** Layout-only — not for colors. Size comes from the `size` prop. */
+export type RiveHandLayoutClassName = string;
+export interface RiveHandProps {
+    /** `point` is artboard `31_Cigarette` (the cigarette is removed). `rock` is `29_Rock`. */
+    hand: RiveHandName;
+    /**
+     * Box size. A number is pixels. An `em` length tracks the parent font size.
+     * Ignored when `inline` is set — that mode sizes the canvas from the artboard ink.
+     */
+    size?: number | string;
+    /**
+     * Sit in a text line. The canvas is larger than the artboard padding so the
+     * drawn hand is about 1.15em and centered on the line. The in-flow slot is
+     * zero height, so the line box does not grow.
+     * This prop skips the hand's own slide or grow. A TextSequence parent still pops the slot.
+     */
+    inline?: boolean;
+    /**
+     * Drives state-machine input `Boolean 1`. Hover or focus on the headline sets this.
+     * Ignored while `prefers-reduced-motion: reduce` matches.
+     */
+    active?: boolean;
+    /**
+     * Holds `Boolean 1` for 1.1s, then waits a random 1–2s before the next pulse.
+     * Per hand, while the page is visible and the sized hand box is in view.
+     * The zero-height inline slot is not the visibility target. Default is on.
+     * Inside a TextSequence, the first pulse waits until that slot's pop finishes.
+     * Reduced motion never starts the timer.
+     */
+    idle?: boolean;
+    /**
+     * `slide-up` rises from below an overflow-clip (the hero clips at the baseline).
+     * `grow` scales from 0 at the grip, with a short spring after the rock hand.
+     * `none` renders at rest. Reduced motion skips the entrance.
+     */
+    entrance?: RiveHandEntrance;
+    className?: RiveHandLayoutClassName;
+    /** Decorative by default so the headline text stays the accessible name. */
+    "aria-hidden"?: boolean;
+}
+export declare function RiveHand({ hand, size, inline, active, idle, entrance, className, "aria-hidden": ariaHidden, }: RiveHandProps): import("react").JSX.Element;
+//# sourceMappingURL=RiveHand.d.ts.map

package/dist/components/atoms/RiveHand/RiveHand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiveHand.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/RiveHand/RiveHand.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,iBAAiB,EAkBjB,WAAW,EAEX,eAAe,EACf,SAAS,EACT,KAAK,gBAAgB,EACrB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,SAAS,EACT,KAAK,gBAAgB,EACrB,KAAK,YAAY,GAClB,CAAC;AAaF,qEAAqE;AACrE,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAkC7C,MAAM,WAAW,aAAa;IAC5B,0FAA0F;IAC1F,IAAI,EAAE,YAAY,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,MAAc,EACd,MAAc,EACd,IAAW,EACX,QAAiB,EACjB,SAAS,EACT,aAAa,EAAE,UAAiB,GACjC,EAAE,aAAa,+BAkXf"}

package/dist/components/atoms/RiveHand/RiveHand.js

@@ -0,0 +1,254 @@
+"use client";
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { applyRiveHandTokenColors as t, installRiveHandLayoutRect as n, nextRiveHandIdleDelayMs as r, paintRiveHandColors as i, riveHandArtboards as a, riveHandBooleanInput as o, riveHandBooleanValue as s, riveHandBoxSize as c, riveHandClassName as l, riveHandEnteredAttr as ee, riveHandFillProperty as u, riveHandGrowDelaySec as d, riveHandGrowOrigin as f, riveHandGrowSettled as p, riveHandHasLayoutBox as m, riveHandIdleAllowed as h, riveHandIdleHoldMs as te, riveHandInlineLayout as g, riveHandInlineSlotClassName as _, riveHandIntersectsViewport as v, riveHandOutlineProperty as ne, riveHandSrc as y, riveHandStateMachine as b, riveHandWasmSrc as x, riveHands as re } from "./riveHandUtils.js";
+import { useEffect as S, useLayoutEffect as C, useMemo as ie, useRef as w, useState as T } from "react";
+import { jsx as E } from "react/jsx-runtime";
+import { motion as ae } from "motion/react";
+import { Fit as oe, Layout as se, Rive as D, RuntimeLoader as O, useRive as ce, useStateMachineInput as le, useViewModelInstanceColor as k } from "@rive-app/react-canvas";
+import { createPortal as ue } from "react-dom";
+O.setWasmUrl(x), D.suppressDeprecationWarnings = [.../* @__PURE__ */ new Set([...D.suppressDeprecationWarnings, "state-machine-inputs"])];
+function de(e, t, n) {
+	if (!(!t || !m(t.clientWidth, t.clientHeight))) {
+		if (n) {
+			e.drawFrame(), e.pause();
+			return;
+		}
+		if (v(t.getBoundingClientRect(), window.innerWidth, window.innerHeight)) {
+			if (typeof e.play == "function" && (e.isStopped || e.isPaused)) {
+				e.play(e.isStopped ? b : void 0);
+				return;
+			}
+			e.startRendering();
+		}
+	}
+}
+function A({ hand: x, size: re, inline: D = !1, active: O = !1, idle: A = !0, entrance: j = "none", className: fe, "aria-hidden": M = !0 }) {
+	let [N, pe] = T(!1), [P, F] = T(!1), [me, he] = T(0), [I, L] = T(!1), [R, z] = T(j === "none"), B = w(N);
+	B.current = N;
+	let V = w(O);
+	V.current = O;
+	let H = w(null), ge = ie(() => new se({ fit: oe.Contain }), []), { rive: U, RiveComponent: _e } = ce({
+		src: y,
+		artboard: a[x],
+		stateMachine: b,
+		autoplay: !0,
+		autoBind: !0,
+		shouldDisableRiveListeners: !0,
+		layout: ge,
+		onRiveReady: (e) => {
+			i(e), e.drawFrame();
+		}
+	}), { setRgb: W } = k(u, U?.viewModelInstance), { setRgb: G } = k(ne, U?.viewModelInstance), K = le(U, b, o);
+	C(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function") {
+			F(!0);
+			return;
+		}
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => pe(e.matches);
+		return t(), F(!0), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), S(() => {
+		if (typeof document > "u" || typeof MutationObserver > "u") return;
+		let e = new MutationObserver(() => he((e) => e + 1));
+		return e.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: [
+				"data-theme",
+				"class",
+				"style"
+			]
+		}), () => e.disconnect();
+	}, []), S(() => {
+		t({
+			handFill: { setRgb: W },
+			outline: { setRgb: G }
+		}), U && (N ? K && (K.value = !1) : K && (K.value = s(O, I, !1)), de(U, H.current, N));
+	}, [
+		O,
+		I,
+		K,
+		N,
+		U,
+		W,
+		G,
+		me
+	]), S(() => {
+		if (!P || N || j === "none") return;
+		let e = H.current, t = e?.parentElement ?? e;
+		if (!t || typeof IntersectionObserver > "u") {
+			z(!0);
+			return;
+		}
+		let n = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && (z(!0), n.disconnect());
+		});
+		return n.observe(t), () => n.disconnect();
+	}, [
+		j,
+		P,
+		N
+	]), S(() => {
+		if (!A || N) return;
+		let e = H.current, t = 0, n = 0, i = document.visibilityState !== "hidden", a = typeof IntersectionObserver > "u", o = !1, s = () => {
+			window.clearTimeout(t), window.clearTimeout(n), t = 0, n = 0;
+		}, c = e?.closest("[data-text-sequence]") ? e.closest("[data-rive-hand-slot]") : null, l = () => !c || c.getAttribute("data-rive-hand-entered") === "true", u = () => {
+			s(), l() && (o || !h({
+				idle: !0,
+				reduced: B.current,
+				pageVisible: i,
+				inView: a
+			}) || (t = window.setTimeout(() => {
+				if (!(o || !l() || !h({
+					idle: !0,
+					reduced: B.current,
+					pageVisible: i,
+					inView: a
+				}))) {
+					if (V.current) {
+						u();
+						return;
+					}
+					L(!0), n = window.setTimeout(() => {
+						L(!1), u();
+					}, te);
+				}
+			}, r())));
+		}, d = (e) => {
+			e !== a && (a = e, a || L(!1), u());
+		}, f = () => {
+			i = document.visibilityState !== "hidden", i || L(!1), u();
+		}, p = null;
+		typeof IntersectionObserver < "u" && e ? (p = new IntersectionObserver((e) => {
+			let t = e[e.length - 1];
+			if (!t) return;
+			let n = t.boundingClientRect;
+			n && !m(n.width, n.height) || d(t.isIntersecting);
+		}), p.observe(e)) : u();
+		let g = null;
+		typeof ResizeObserver < "u" && e && (g = new ResizeObserver(() => {
+			if (!e.isConnected || !m(e.clientWidth, e.clientHeight)) return;
+			let t = e.getBoundingClientRect();
+			m(t.width, t.height) && d(v(t, window.innerWidth, window.innerHeight));
+		}), g.observe(e));
+		let _ = null;
+		return c && typeof MutationObserver < "u" && (_ = new MutationObserver(() => {
+			l() || L(!1), u();
+		}), _.observe(c, {
+			attributes: !0,
+			attributeFilter: [ee]
+		})), document.addEventListener("visibilitychange", f), () => {
+			o = !0, s(), L(!1), p?.disconnect(), g?.disconnect(), _?.disconnect(), document.removeEventListener("visibilitychange", f);
+		};
+	}, [
+		A,
+		P,
+		N
+	]);
+	let q = D ? g(x) : null, J = q ? q.box : c(re ?? "1em"), [Y, ve] = T(null), X = !D && P && !N && j === "slide-up", Z = !D && P && !N && j === "grow";
+	C(() => {
+		let e = H.current;
+		if (e) {
+			if (e.shadowRoot) {
+				ve(e.shadowRoot);
+				return;
+			}
+			ve(e.attachShadow({ mode: "open" }));
+		}
+	}, [X, Z]), C(() => {
+		let e = H.current?.shadowRoot?.querySelector("canvas");
+		e && n(e);
+	}, [Y]);
+	let Q = w(() => {});
+	S(() => {
+		let e = H.current;
+		if (!U || !e) return;
+		let t = () => {
+			let e = H.current;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			if (!p(e.offsetWidth, e.offsetHeight, t.width, t.height)) return;
+			let n = e.shadowRoot?.querySelector("canvas");
+			n && e.clientWidth > 0 && e.clientHeight > 0 && (n.style.width = `${e.clientWidth}px`, n.style.height = `${e.clientHeight}px`), m(e.clientWidth, e.clientHeight) && (U.resizeDrawingSurfaceToCanvas(), de(U, e, B.current));
+		};
+		Q.current = t;
+		let n = 0, r = 0, i = () => {
+			t();
+			let e = H.current, a = e?.shadowRoot?.querySelector("canvas"), o = !a || a.clientWidth < 1 || a.clientHeight < 1, s = !e || !e.isConnected || e.clientWidth < 1 || e.clientHeight < 1;
+			(o || s) && e?.isConnected && n < 8 && (n += 1, r = requestAnimationFrame(i));
+		};
+		if (i(), typeof ResizeObserver > "u") return () => {
+			cancelAnimationFrame(r), Q.current = () => {};
+		};
+		let a = new ResizeObserver(() => {
+			t();
+		});
+		return a.observe(e), () => {
+			cancelAnimationFrame(r), a.disconnect(), Q.current = () => {};
+		};
+	}, [
+		Z,
+		X,
+		U
+	]);
+	let ye = Y ? ue(/* @__PURE__ */ E("div", {
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		children: /* @__PURE__ */ E(_e, {})
+	}), Y) : null, be = e(l, fe), xe = {
+		width: J,
+		height: J,
+		transformOrigin: Z ? f : void 0,
+		...q ? {
+			position: "absolute",
+			left: "50%",
+			top: "50%",
+			transform: q.transform
+		} : {}
+	}, $ = !X && !Z ? /* @__PURE__ */ E("div", {
+		ref: H,
+		"aria-hidden": M,
+		"data-rive-hand": x,
+		className: be,
+		style: xe,
+		children: ye
+	}) : /* @__PURE__ */ E(ae.div, {
+		ref: H,
+		"aria-hidden": M,
+		"data-rive-hand": x,
+		className: be,
+		style: xe,
+		initial: X ? { y: "100%" } : { scale: 0 },
+		animate: X ? { y: R ? "0%" : "100%" } : { scale: +!!R },
+		transition: X ? {
+			type: "spring",
+			stiffness: 260,
+			damping: 28,
+			mass: .85
+		} : {
+			type: "spring",
+			stiffness: 480,
+			damping: 12,
+			mass: .55,
+			delay: R ? d : 0
+		},
+		onAnimationComplete: () => {
+			Q.current();
+		},
+		children: ye
+	});
+	return q ? /* @__PURE__ */ E("span", {
+		"aria-hidden": M,
+		"data-rive-hand-slot": x,
+		className: _,
+		style: { width: q.slot },
+		children: /* @__PURE__ */ E("span", {
+			"data-rive-hand-pop": "",
+			className: "pointer-events-none absolute left-0 top-0 h-0 w-full",
+			children: $
+		})
+	}) : $;
+}
+//#endregion
+export { A as RiveHand, a as riveHandArtboards, y as riveHandSrc, x as riveHandWasmSrc, re as riveHands };