@gryt/ui 0.22.0 → 0.24.0

package/dist/index.js

@@ -1,101 +1,101 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { Tooltip as I } from "@base-ui/react/tooltip";
-import { createContext as ct, useContext as Y, useRef as Q, forwardRef as s, useCallback as W, useLayoutEffect as vt, useMemo as tt, useState as Nt, useEffect as Pt, useSyncExternalStore as Tt } from "react";
-import { createGrytTheme as kt } from "@gryt/theme";
-import { GRYT_HUE_KEYS as pa, GRYT_NEUTRAL_KEYS as ba, GRYT_RADIUS_KEYS as fa, GRYT_THEME_NAME_MAX as xa, alphaScale as ha, cloneGrytTheme as wa, contrast as va, createGrytTheme as Na, decodeGrytTheme as Pa, encodeGrytTheme as Ta, grytAlphaScales as ka, grytAlphaScalesLight as Ca, grytLightTokens as Sa, grytPresets as $a, grytPresetsById as Ra, grytScales as Ia, grytScalesLight as Aa, grytTheme as Da, grytThemeHues as Ma, grytThemeToOptions as Ga, grytTokens as La, hexToOklch as ja, hexToRgb as za, hueScale as Ba, hueScaleLight as Fa, isHexColor as Ea, neutralScale as Va, neutralScaleLight as _a, normalizeHexColor as Ya, normalizeThemeName as Ha, oklchToHex as Oa, rgbToHex as Xa } from "@gryt/theme";
-import { Button as lt } from "@base-ui/react/button";
-import { clsx as Ct } from "clsx";
-import { twMerge as St } from "tailwind-merge";
-import { Field as _ } from "@base-ui/react/field";
-import { PaperPlaneTilt as $t, X as dt, Check as gt, CaretUpDown as Rt, CircleNotch as It, CaretDown as At, Minus as Dt, Plus as Mt } from "@phosphor-icons/react";
-import { Avatar as X } from "@base-ui/react/avatar";
-import { owlAvatarDataUri as Gt, eggAvatarDataUri as Lt } from "@gryt/owl";
-import { avatarSeed as Ka } from "@gryt/owl";
-import { Checkbox as et } from "@base-ui/react/checkbox";
-import { Radio as rt } from "@base-ui/react/radio";
-import { RadioGroup as jt } from "@base-ui/react/radio-group";
+import { jsx as o, jsxs as u, Fragment as jt } from "react/jsx-runtime";
+import { Tooltip as K } from "@base-ui/react/tooltip";
+import { createContext as bt, useContext as $e, useRef as ke, forwardRef as l, useCallback as pe, useLayoutEffect as Ot, useMemo as me, useState as G, useEffect as Vt, useSyncExternalStore as Yt, useId as Ut } from "react";
+import { createGrytTheme as xt, grytTheme as Xt, GRYT_RADIUS_KEYS as Wt, grytThemeToOptions as Kt, grytThemeHues as Jt, normalizeHexColor as ye, isHexColor as Qt, grytFonts as vt, isFontStack as Zt, isBezier as qt, grytMotion as er, grytDurations as qe, GRYT_MOTION_SCALE_MAX as tr, springSamples as et, springTightSamples as rr, contrast as ae, oklchToHex as L, hexToOklch as Ne, decodeGrytTheme as nr, grytTokens as Oe, grytLightTokens as or, grytPresets as tt, grytPresetsById as ar, GRYT_THEME_NAME_MAX as sr, GRYT_FONT_KEYS as ir } from "@gryt/theme";
+import { GRYT_FONT_KEYS as Ns, GRYT_FONT_STACK_MAX as Ts, GRYT_HUE_KEYS as Ss, GRYT_MOTION_CURVES as $s, GRYT_MOTION_SCALE_MAX as ks, GRYT_NEUTRAL_KEYS as Ps, GRYT_RADIUS_KEYS as Cs, GRYT_THEME_NAME_MAX as As, alphaScale as Ms, cloneGrytTheme as Rs, contrast as Is, createGrytTheme as Ls, decodeGrytTheme as Ds, encodeGrytTheme as Gs, encodeGrytTheme as Fs, grytAlphaScales as zs, grytAlphaScalesLight as Bs, grytFonts as Es, grytLightTokens as _s, grytMotion as Hs, grytPresets as js, grytPresetsById as Os, grytScales as Vs, grytScalesLight as Ys, grytTheme as Us, grytThemeHues as Xs, grytThemeToOptions as Ws, grytTokens as Ks, hexToOklch as Js, hexToRgb as Qs, hueScale as Zs, hueScaleLight as qs, isBezier as ei, isFontStack as ti, isHexColor as ri, isValidBezier as ni, neutralScale as oi, neutralScaleLight as ai, normalizeHexColor as si, normalizeThemeName as ii, oklchToHex as li, rgbToHex as ci } from "@gryt/theme";
+import { Button as wt } from "@base-ui/react/button";
+import { clsx as lr } from "clsx";
+import { twMerge as cr } from "tailwind-merge";
+import { Field as xe } from "@base-ui/react/field";
+import { PaperPlaneTilt as dr, X as Ue, Check as Xe, CaretUpDown as ur, CircleNotch as gr, CaretDown as mr, Warning as Nt, ArrowsClockwise as pr, Minus as yr, Plus as fr } from "@phosphor-icons/react";
+import { Avatar as Le } from "@base-ui/react/avatar";
+import { owlAvatarDataUri as hr, eggAvatarDataUri as br } from "@gryt/owl";
+import { avatarSeed as ui } from "@gryt/owl";
+import { Checkbox as rt } from "@base-ui/react/checkbox";
+import { Radio as nt } from "@base-ui/react/radio";
+import { RadioGroup as xr } from "@base-ui/react/radio-group";
 import { Switch as ot } from "@base-ui/react/switch";
-import { Slider as z } from "@base-ui/react/slider";
-import { Select as h } from "@base-ui/react/select";
-import { Separator as zt } from "@base-ui/react/separator";
-import { Progress as U } from "@base-ui/react/progress";
-import { Dialog as C } from "@base-ui/react/dialog";
-import { Drawer as N } from "@base-ui/react/drawer";
-import { Menu as A } from "@base-ui/react/menu";
-import { Tabs as E } from "@base-ui/react/tabs";
-import { Accordion as F } from "@base-ui/react/accordion";
-import { ContextMenu as k } from "@base-ui/react/context-menu";
-import { Popover as P } from "@base-ui/react/popover";
-import { Toast as T } from "@base-ui/react/toast";
-import { ScrollArea as L } from "@base-ui/react/scroll-area";
-import { Toggle as Bt } from "@base-ui/react/toggle";
-import { ToggleGroup as Ft } from "@base-ui/react/toggle-group";
-import { Meter as B } from "@base-ui/react/meter";
-import { AlertDialog as S } from "@base-ui/react/alert-dialog";
-import { Autocomplete as p } from "@base-ui/react/autocomplete";
-import { Combobox as u } from "@base-ui/react/combobox";
-import { CheckboxGroup as Et } from "@base-ui/react/checkbox-group";
-import { Collapsible as Z } from "@base-ui/react/collapsible";
-import { Form as Vt } from "@base-ui/react/form";
-import { Fieldset as ut } from "@base-ui/react/fieldset";
-import { Menubar as _t } from "@base-ui/react/menubar";
-import { NavigationMenu as w } from "@base-ui/react/navigation-menu";
-import { NumberField as R } from "@base-ui/react/number-field";
+import { Slider as le } from "@base-ui/react/slider";
+import { Select as R } from "@base-ui/react/select";
+import { Separator as vr } from "@base-ui/react/separator";
+import { Progress as De } from "@base-ui/react/progress";
+import { Dialog as O } from "@base-ui/react/dialog";
+import { Drawer as D } from "@base-ui/react/drawer";
+import { Menu as J } from "@base-ui/react/menu";
+import { Tabs as he } from "@base-ui/react/tabs";
+import { Accordion as fe } from "@base-ui/react/accordion";
+import { ContextMenu as j } from "@base-ui/react/context-menu";
+import { Popover as B } from "@base-ui/react/popover";
+import { Toast as E } from "@base-ui/react/toast";
+import { ScrollArea as se } from "@base-ui/react/scroll-area";
+import { Toggle as wr } from "@base-ui/react/toggle";
+import { ToggleGroup as Nr } from "@base-ui/react/toggle-group";
+import { Meter as ce } from "@base-ui/react/meter";
+import { AlertDialog as V } from "@base-ui/react/alert-dialog";
+import { Autocomplete as C } from "@base-ui/react/autocomplete";
+import { Combobox as S } from "@base-ui/react/combobox";
+import { CheckboxGroup as Tr } from "@base-ui/react/checkbox-group";
+import { Collapsible as We } from "@base-ui/react/collapsible";
+import { Form as Sr } from "@base-ui/react/form";
+import { Fieldset as Tt } from "@base-ui/react/fieldset";
+import { Menubar as $r } from "@base-ui/react/menubar";
+import { NavigationMenu as I } from "@base-ui/react/navigation-menu";
+import { NumberField as X } from "@base-ui/react/number-field";
 import { OTPField as at } from "@base-ui/react/otp-field";
-import { PreviewCard as M } from "@base-ui/react/preview-card";
-import { Toolbar as G } from "@base-ui/react/toolbar";
-const yt = ct(void 0);
-function mt() {
-  return Y(yt);
+import { PreviewCard as ne } from "@base-ui/react/preview-card";
+import { Toolbar as oe } from "@base-ui/react/toolbar";
+const St = bt(void 0);
+function $t() {
+  return $e(St);
 }
-function Yt(a) {
-  return Object.keys(a).some((t) => t.startsWith("--"));
+function kr(n) {
+  return Object.keys(n).some((t) => t.startsWith("--"));
 }
-function bo({
-  children: a,
+function $a({
+  children: n,
   className: t,
   theme: e,
   tooltipDelay: r = 400,
-  containOverlays: i = !1
+  containOverlays: a = !1
 }) {
-  const c = Q(null), l = e === void 0 ? void 0 : Yt(e) ? e : kt(e);
-  return /* @__PURE__ */ o("div", { className: t, style: l, ref: c, children: /* @__PURE__ */ o(
-    yt.Provider,
+  const c = ke(null), d = e === void 0 ? void 0 : kr(e) ? e : xt(e);
+  return /* @__PURE__ */ o("div", { className: t, style: d, ref: c, children: /* @__PURE__ */ o(
+    St.Provider,
     {
-      value: i ? c : void 0,
-      children: /* @__PURE__ */ o(I.Provider, { delay: r, children: a })
+      value: a ? c : void 0,
+      children: /* @__PURE__ */ o(K.Provider, { delay: r, children: n })
     }
   ) });
 }
-function n(...a) {
-  return St(Ct(a));
+function s(...n) {
+  return cr(lr(n));
 }
-const Ht = {
+const Pr = {
   primary: "bg-gryt-accent text-gryt-on-accent hover:not-data-disabled:bg-gryt-accent-light data-disabled:bg-gryt-surface-raised data-disabled:text-gryt-muted",
   secondary: "bg-gryt-secondary text-gryt-on-secondary hover:not-data-disabled:bg-gryt-secondary-light data-disabled:bg-gryt-surface-raised data-disabled:text-gryt-muted",
   neutral: "bg-gryt-surface-raised text-gryt-text hover:not-data-disabled:bg-gryt-surface-hover data-disabled:text-gryt-muted",
   danger: "bg-gryt-danger text-gryt-on-danger hover:not-data-disabled:bg-gryt-danger-light data-disabled:bg-gryt-surface-raised data-disabled:text-gryt-muted",
   ghost: "bg-transparent text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text"
-}, Ot = {
+}, Cr = {
   xsmall: "min-h-8 px-3 text-xs",
   small: "min-h-9 px-4 text-sm",
   medium: "min-h-10 px-5 text-sm",
   large: "min-h-12 px-6 text-base"
-}, Xt = s(
+}, Te = l(
   function({
     children: t,
     className: e,
     endIcon: r,
-    size: i = "medium",
+    size: a = "medium",
     startIcon: c,
-    tone: l = "primary",
-    ...d
+    tone: d = "primary",
+    ...p
   }, m) {
-    return /* @__PURE__ */ g(
-      lt,
+    return /* @__PURE__ */ u(
+      wt,
       {
         ref: m,
-        className: n(
+        className: s(
           "gryt-button",
           "inline-flex cursor-pointer items-center justify-center gap-2 border-0 shadow-none",
           "rounded-(--gryt-radius-full) font-semibold whitespace-nowrap select-none",
@@ -121,11 +121,11 @@ const Ht = {
           // and an icon at full strength on a dead button is the same lie in
           // miniature.
           "data-disabled:cursor-not-allowed data-disabled:opacity-60",
-          Ot[i],
-          Ht[l],
+          Cr[a],
+          Pr[d],
           e
         ),
-        ...d,
+        ...p,
         children: [
           c,
           t,
@@ -134,68 +134,68 @@ const Ht = {
       }
     );
   }
-), f = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", Ut = "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-gryt-accent-light", pt = [
+), A = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", Ar = "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-gryt-accent-light", kt = [
   "w-full rounded-(--gryt-radius-xl) border bg-gryt-surface-raised",
   "text-gryt-text outline-none placeholder:text-gryt-muted",
   "transition-colors duration-150 motion-reduce:transition-none",
   "hover:border-gryt-accent-light focus:border-gryt-accent",
   "disabled:cursor-not-allowed disabled:opacity-60"
-].join(" "), bt = {
+].join(" "), Pt = {
   small: "min-h-9 px-3 py-1.5 text-sm",
   medium: "min-h-11 px-4 py-2.5 text-sm"
-}, D = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", $ = [
+}, Z = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", Y = [
   // scale and translate are named explicitly because Tailwind v4 sets them as
   // standalone CSS properties rather than folding them into `transform`, so
   // transitioning `transform` would leave the popup snapping into place.
   "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
   "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
   "data-ending-style:scale-[0.98] data-ending-style:opacity-0"
-].join(" "), j = "cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50", Kt = {
+].join(" "), ie = "cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50", Mr = {
   primary: "data-checked:bg-gryt-accent data-checked:text-gryt-on-accent",
   secondary: "data-checked:bg-gryt-secondary data-checked:text-gryt-on-secondary",
   neutral: "data-checked:bg-gryt-surface-hover data-checked:text-gryt-text",
   danger: "data-checked:bg-gryt-danger data-checked:text-gryt-on-danger",
   success: "data-checked:bg-gryt-success data-checked:text-gryt-on-accent",
   warning: "data-checked:bg-gryt-warning data-checked:text-gryt-on-accent"
-}, ft = {
+}, Ct = {
   primary: "bg-gryt-accent",
   secondary: "bg-gryt-secondary",
   neutral: "bg-gryt-surface-hover",
   danger: "bg-gryt-danger",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning"
-}, Wt = {
+}, Rr = {
   primary: "data-checked:border-gryt-accent",
   secondary: "data-checked:border-gryt-secondary",
   neutral: "data-checked:border-gryt-muted",
   danger: "data-checked:border-gryt-danger",
   success: "data-checked:border-gryt-success",
   warning: "data-checked:border-gryt-warning"
-}, Qt = {
+}, Ir = {
   primary: "data-checked:bg-gryt-accent",
   secondary: "data-checked:bg-gryt-secondary",
   neutral: "data-checked:bg-gryt-surface-hover",
   danger: "data-checked:bg-gryt-danger",
   success: "data-checked:bg-gryt-success",
   warning: "data-checked:bg-gryt-warning"
-}, Zt = {
+}, Lr = {
   primary: "text-gryt-accent-11 hover:not-data-disabled:bg-gryt-accent-3",
   secondary: "text-gryt-secondary-11 hover:not-data-disabled:bg-gryt-secondary-3",
   neutral: "text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text",
   danger: "text-gryt-danger-11 hover:not-data-disabled:bg-gryt-danger-3",
   ghost: "text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text"
-}, Jt = {
+}, Dr = {
   xsmall: "h-8 w-8",
   small: "h-9 w-9",
   medium: "h-10 w-10",
   large: "h-12 w-12"
-}, fo = s(
-  function({ className: t, size: e = "medium", tone: r = "neutral", ...i }, c) {
+}, ka = l(
+  function({ className: t, size: e = "medium", tone: r = "neutral", ...a }, c) {
     return /* @__PURE__ */ o(
-      lt,
+      wt,
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-icon-button",
           "inline-flex shrink-0 items-center justify-center border-0 bg-transparent p-0",
           "rounded-(--gryt-radius-full) select-none",
@@ -209,23 +209,23 @@ const Ht = {
           // that is what it is; Base UI puts it there, nothing to pass.
           "motion-safe:not-[[aria-haspopup]]:hover:not-data-disabled:scale-[1.06]",
           "motion-safe:not-[[aria-haspopup]]:active:not-data-disabled:scale-[0.94]",
-          f,
-          j,
-          Jt[e],
-          Zt[r],
+          A,
+          ie,
+          Dr[e],
+          Lr[r],
           t
         ),
-        ...i
+        ...a
       }
     );
   }
-), xo = s(
-  function({ className: t, elevated: e = !1, ...r }, i) {
+), Pa = l(
+  function({ className: t, elevated: e = !1, ...r }, a) {
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-surface rounded-(--gryt-radius-lg) border border-gryt-border p-4 text-gryt-text",
           e ? "bg-gryt-surface-raised" : "bg-gryt-surface",
           t
@@ -234,294 +234,294 @@ const Ht = {
       }
     );
   }
-), ho = s(
-  function({ children: t, className: e, from: r = "assistant", ...i }, c) {
+), Ca = l(
+  function({ children: t, className: e, from: r = "assistant", ...a }, c) {
     return /* @__PURE__ */ o(
       "div",
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-message-bubble",
           r === "user" && "ml-auto bg-gryt-accent text-gryt-on-accent",
           r === "assistant" && "mr-auto border border-gryt-border bg-gryt-surface text-gryt-text",
           r === "system" && "mx-auto border border-dashed border-gryt-border bg-transparent text-gryt-muted",
           e
         ),
-        ...i,
+        ...a,
         children: t
       }
     );
   }
-), wo = s(
+), Ke = l(
   function({
     className: t,
     error: e = !1,
     fieldClassName: r,
-    helperText: i,
+    helperText: a,
     label: c,
-    minRows: l = 3,
-    multiline: d = !1,
+    minRows: d = 3,
+    multiline: p = !1,
     size: m = "medium",
-    ...x
-  }, y) {
-    const v = /* @__PURE__ */ o(
-      _.Control,
+    ...y
+  }, f) {
+    const h = /* @__PURE__ */ o(
+      xe.Control,
       {
-        ref: y,
-        render: d ? /* @__PURE__ */ o("textarea", { rows: l }) : void 0,
-        className: n(
+        ref: f,
+        render: p ? /* @__PURE__ */ o("textarea", { rows: d }) : void 0,
+        className: s(
           "gryt-text-field-control",
-          pt,
-          d && "resize-y leading-6",
+          kt,
+          p && "resize-y leading-6",
           e ? "border-gryt-danger" : "border-gryt-border",
-          bt[m],
+          Pt[m],
           t
         ),
-        ...x
+        ...y
       }
     );
-    return /* @__PURE__ */ g(
-      _.Root,
+    return /* @__PURE__ */ u(
+      xe.Root,
       {
-        className: n(
+        className: s(
           "gryt-text-field flex w-full flex-col gap-1.5",
           r
         ),
         children: [
-          c ? /* @__PURE__ */ o(_.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
-          v,
-          i ? /* @__PURE__ */ o(
-            _.Description,
+          c ? /* @__PURE__ */ o(xe.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
+          h,
+          a ? /* @__PURE__ */ o(
+            xe.Description,
             {
-              className: n(
+              className: s(
                 "text-xs",
                 e ? "text-gryt-danger-11" : "text-gryt-muted"
               ),
-              children: i
+              children: a
             }
           ) : null
         ]
       }
     );
   }
-), vo = s(
+), Aa = l(
   function({
     className: t,
     disabled: e = !1,
     maxRows: r = 8,
-    minRows: i = 1,
+    minRows: a = 1,
     onSubmit: c,
-    placeholder: l = "Message Gryt",
-    submitLabel: d = "Send",
+    placeholder: d = "Message Gryt",
+    submitLabel: p = "Send",
     ...m
-  }, x) {
-    const y = Q(null), v = W(() => {
-      const b = y.current;
-      if (!b)
+  }, y) {
+    const f = ke(null), h = pe(() => {
+      const x = f.current;
+      if (!x)
         return;
-      const O = window.getComputedStyle(b), J = parseFloat(O.lineHeight) || 24, q = parseFloat(O.paddingTop) + parseFloat(O.paddingBottom);
-      b.style.height = "auto", b.style.height = `${Math.min(
-        Math.max(b.scrollHeight, J * i + q),
-        J * r + q
+      const v = window.getComputedStyle(x), N = parseFloat(v.lineHeight) || 24, k = parseFloat(v.paddingTop) + parseFloat(v.paddingBottom);
+      x.style.height = "auto", x.style.height = `${Math.min(
+        Math.max(x.scrollHeight, N * a + k),
+        N * r + k
       )}px`;
-    }, [r, i]);
-    vt(v, [v, m.value]);
-    function V(b) {
+    }, [r, a]);
+    Ot(h, [h, m.value]);
+    function b(x) {
       if (!c) {
-        b.preventDefault();
+        x.preventDefault();
         return;
       }
-      c(b);
+      c(x);
     }
-    return /* @__PURE__ */ g("form", { className: n("gryt-composer", t), onSubmit: V, children: [
+    return /* @__PURE__ */ u("form", { className: s("gryt-composer", t), onSubmit: b, children: [
       /* @__PURE__ */ o(
         "textarea",
         {
-          ref: (b) => {
-            y.current = b, typeof x == "function" ? x(b) : x && (x.current = b);
+          ref: (x) => {
+            f.current = x, typeof y == "function" ? y(x) : y && (y.current = x);
           },
-          rows: i,
+          rows: a,
           disabled: e,
-          placeholder: l,
-          onInput: v,
+          placeholder: d,
+          onInput: h,
           className: "gryt-composer-textarea disabled:cursor-not-allowed disabled:opacity-60",
           ...m
         }
       ),
       /* @__PURE__ */ o(
-        Xt,
+        Te,
         {
           type: "submit",
           disabled: e,
           size: "small",
-          endIcon: /* @__PURE__ */ o($t, { size: 14, weight: "fill" }),
-          children: d
+          endIcon: /* @__PURE__ */ o(dr, { size: 14, weight: "fill" }),
+          children: p
         }
       )
     ] });
   }
-), qt = {
+), Gr = {
   small: "h-8 w-8 text-xs",
   medium: "h-10 w-10 text-sm",
   large: "h-12 w-12 text-base"
-}, nt = 256, te = s(function({
+}, st = 256, Fr = l(function({
   alt: t,
   children: e,
   className: r,
-  fallback: i,
+  fallback: a,
   seed: c,
-  eggSeed: l,
-  size: d = "medium",
+  eggSeed: d,
+  size: p = "medium",
   src: m,
-  ...x
-}, y) {
-  const v = tt(
-    () => c ? Gt(c, { size: nt }) : void 0,
+  ...y
+}, f) {
+  const h = me(
+    () => c ? hr(c, { size: st }) : void 0,
     [c]
-  ), V = tt(
-    () => l ? Lt(l, { size: nt }) : void 0,
-    [l]
-  ), b = v ?? V;
-  return /* @__PURE__ */ g(
-    X.Root,
+  ), b = me(
+    () => d ? br(d, { size: st }) : void 0,
+    [d]
+  ), x = h ?? b;
+  return /* @__PURE__ */ u(
+    Le.Root,
     {
-      ref: y,
-      className: n(
+      ref: f,
+      className: s(
         "gryt-avatar inline-flex shrink-0 items-center justify-center overflow-hidden align-middle select-none",
         "rounded-(--gryt-radius-full) bg-gryt-surface-raised font-medium text-gryt-text ring-1 ring-gryt-border",
-        qt[d],
+        Gr[p],
         r
       ),
-      ...x,
+      ...y,
       children: [
         m ? /* @__PURE__ */ o(
-          X.Image,
+          Le.Image,
           {
             src: m,
             alt: t,
             className: "h-full w-full object-cover"
           }
         ) : null,
-        /* @__PURE__ */ o(X.Fallback, { className: "flex h-full w-full items-center justify-center", children: b ? /* @__PURE__ */ o(
+        /* @__PURE__ */ o(Le.Fallback, { className: "flex h-full w-full items-center justify-center", children: x ? /* @__PURE__ */ o(
           "img",
           {
-            src: b,
+            src: x,
             alt: t,
             className: "h-full w-full object-cover"
           }
-        ) : i ?? e })
+        ) : a ?? e })
       ]
     }
   );
-}), No = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, d) {
-  return /* @__PURE__ */ g(
+}), Ma = l(function({ active: t = !1, avatar: e, className: r, subtitle: a, title: c, ...d }, p) {
+  return /* @__PURE__ */ u(
     "button",
     {
-      ref: d,
+      ref: p,
       type: "button",
-      className: n(
+      className: s(
         "gryt-conversation-item enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
         t ? "bg-gryt-accent text-gryt-on-accent" : "text-gryt-text hover:bg-white/5",
         r
       ),
-      ...l,
+      ...d,
       children: [
         e ?? /* @__PURE__ */ o(
-          te,
+          Fr,
           {
             size: "small",
-            className: n(
+            className: s(
               t ? "bg-gryt-on-accent text-gryt-accent-9 ring-transparent" : "bg-gryt-surface-raised text-gryt-text"
             ),
             children: c.slice(0, 1).toUpperCase()
           }
         ),
-        /* @__PURE__ */ g("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ u("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ o("span", { className: "block truncate text-sm font-semibold", children: c }),
-          i ? /* @__PURE__ */ o(
+          a ? /* @__PURE__ */ o(
             "span",
             {
-              className: n(
+              className: s(
                 "block truncate text-xs",
                 t ? "text-gryt-on-accent/85" : "text-gryt-muted"
               ),
-              children: i
+              children: a
             }
           ) : null
         ] })
       ]
     }
   );
-}), Po = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, d) {
-  const m = typeof t == "number" ? t : null, x = m !== null && m === 0 && !c, y = m !== null && m > i ? `${i}+` : t;
-  return /* @__PURE__ */ g(
+}), Ra = l(function({ badgeContent: t, children: e, className: r, max: a = 99, showZero: c = !1, ...d }, p) {
+  const m = typeof t == "number" ? t : null, y = m !== null && m === 0 && !c, f = m !== null && m > a ? `${a}+` : t;
+  return /* @__PURE__ */ u(
     "span",
     {
-      ref: d,
-      className: n("gryt-badge relative inline-flex", r),
-      ...l,
+      ref: p,
+      className: s("gryt-badge relative inline-flex", r),
+      ...d,
       children: [
         e,
-        t !== void 0 && !x ? /* @__PURE__ */ o(
+        t !== void 0 && !y ? /* @__PURE__ */ o(
           "span",
           {
-            className: n(
+            className: s(
               "gryt-badge-dot absolute -top-1 -right-1 z-10 inline-flex items-center justify-center",
               "min-w-5 rounded-(--gryt-radius-full) px-1.5 py-0.5",
               "bg-gryt-accent text-[0.65rem] leading-none font-semibold text-gryt-on-accent",
               "ring-2 ring-gryt-bg"
             ),
-            children: y
+            children: f
           }
         ) : null
       ]
     }
   );
-}), ee = {
+}), zr = {
   neutral: "border-gryt-border bg-gryt-surface-raised text-gryt-text",
   primary: "border-gryt-accent-6 bg-gryt-accent-3 text-gryt-accent-11",
   secondary: "border-gryt-secondary-6 bg-gryt-secondary-3 text-gryt-secondary-11",
   success: "border-gryt-success-6 bg-gryt-success-3 text-gryt-success-11",
   warning: "border-gryt-warning-6 bg-gryt-warning-3 text-gryt-warning-11",
   danger: "border-gryt-danger-6 bg-gryt-danger-3 text-gryt-danger-11"
-}, To = s(function({ children: t, className: e, icon: r, label: i, onDelete: c, tone: l = "neutral", ...d }, m) {
-  return /* @__PURE__ */ g(
+}, Ia = l(function({ children: t, className: e, icon: r, label: a, onDelete: c, tone: d = "neutral", ...p }, m) {
+  return /* @__PURE__ */ u(
     "span",
     {
       ref: m,
-      className: n(
+      className: s(
         "gryt-chip inline-flex items-center gap-1.5 rounded-(--gryt-radius-full) border px-3 py-1 text-xs font-medium",
-        ee[l],
+        zr[d],
         e
       ),
-      ...d,
+      ...p,
       children: [
         r,
-        i ?? t,
+        a ?? t,
         c ? /* @__PURE__ */ o(
           "button",
           {
             type: "button",
             "aria-label": "Remove",
             onClick: c,
-            className: n(
+            className: s(
               "-mr-1 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-(--gryt-radius-full)",
               "opacity-70 transition-opacity hover:opacity-100",
-              f
+              A
             ),
-            children: /* @__PURE__ */ o(dt, { size: 10, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ o(Ue, { size: 10, weight: "bold", "aria-hidden": "true" })
           }
         ) : null
       ]
     }
   );
-}), ko = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
+}), it = l(
+  function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
-      et.Root,
+      rt.Root,
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-checkbox flex h-5 w-5 shrink-0 items-center justify-center",
           "rounded-(--gryt-radius-sm) border border-gryt-border bg-gryt-surface-raised",
           "transition-[scale,background-color,border-color] duration-(--gryt-dur-spring) ease-spring",
@@ -531,18 +531,18 @@ const Ht = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.08]",
           "motion-safe:active:not-data-disabled:scale-[0.92]",
-          f,
-          j,
+          A,
+          ie,
           // Unchecked stays a neutral outline; the tone only paints once checked.
-          Kt[e],
+          Mr[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          et.Indicator,
+          rt.Indicator,
           {
             keepMounted: !0,
-            className: n(
+            className: s(
               "flex origin-center",
               "transition-[scale,opacity] duration-(--gryt-dur-spring) ease-spring",
               // Scaling from 0 rather than from something near 1 is deliberate.
@@ -552,65 +552,65 @@ const Ht = {
               "data-unchecked:scale-0 data-unchecked:opacity-0",
               "motion-reduce:transition-none"
             ),
-            children: /* @__PURE__ */ o(gt, { size: 12, weight: "bold" })
+            children: /* @__PURE__ */ o(Xe, { size: 12, weight: "bold" })
           }
         )
       }
     );
   }
-), Co = s(function({ className: t, tone: e = "primary", ...r }, i) {
+), La = l(function({ className: t, tone: e = "primary", ...r }, a) {
   return /* @__PURE__ */ o(
-    rt.Root,
+    nt.Root,
     {
-      ref: i,
-      className: n(
+      ref: a,
+      className: s(
         "gryt-radio flex h-5 w-5 shrink-0 items-center justify-center",
         "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface-raised",
         "transition-[scale,background-color,border-color] duration-(--gryt-dur-spring) ease-spring",
         "hover:not-data-disabled:border-gryt-accent-light",
         "motion-safe:hover:not-data-disabled:scale-[1.08]",
         "motion-safe:active:not-data-disabled:scale-[0.92]",
-        f,
-        j,
+        A,
+        ie,
         // Border takes the tone when selected; the dot inside carries the fill.
-        Wt[e],
+        Rr[e],
         t
       ),
       ...r,
       children: /* @__PURE__ */ o(
-        rt.Indicator,
+        nt.Indicator,
         {
           keepMounted: !0,
-          className: n(
+          className: s(
             "h-2.5 w-2.5 origin-center rounded-(--gryt-radius-full)",
             "transition-[scale,opacity] duration-(--gryt-dur-spring) ease-spring",
             // From 0, for the same reason as the Checkbox tick — see the note there.
             "data-unchecked:scale-0 data-unchecked:opacity-0",
             "motion-reduce:transition-none",
-            ft[e]
+            Ct[e]
           )
         }
       )
     }
   );
-}), So = s(
+}), Da = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      jt,
+      xr,
       {
         ref: r,
-        className: n("gryt-radio-group flex flex-col gap-2", t),
+        className: s("gryt-radio-group flex flex-col gap-2", t),
         ...e
       }
     );
   }
-), $o = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
+), Ga = l(
+  function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
       ot.Root,
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-switch relative inline-flex h-6 w-10 shrink-0 items-center",
           "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface-raised p-0.5",
           "transition-[scale,background-color,border-color] duration-(--gryt-dur-spring) ease-spring",
@@ -618,16 +618,16 @@ const Ht = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.05]",
           "motion-safe:active:not-data-disabled:scale-[0.95]",
-          f,
-          j,
-          Qt[e],
+          A,
+          ie,
+          Ir[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
           ot.Thumb,
           {
-            className: n(
+            className: s(
               "h-4.5 w-4.5 rounded-(--gryt-radius-full) bg-gryt-text",
               "transition-transform duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
               "data-checked:translate-x-4 data-checked:bg-gryt-bg"
@@ -637,70 +637,70 @@ const Ht = {
       }
     );
   }
-), it = 3;
-function Ro({
-  className: a,
+), lt = 3;
+function At({
+  className: n,
   tone: t = "primary",
   "aria-label": e,
   ...r
 }) {
-  const [i, c] = Nt(!1), l = Q(null);
-  Pt(() => {
-    if (!i && l.current === null)
+  const [a, c] = G(!1), d = ke(null);
+  Vt(() => {
+    if (!a && d.current === null)
       return;
-    const y = () => {
-      l.current = null, c(!1);
+    const f = () => {
+      d.current = null, c(!1);
     };
-    return window.addEventListener("pointerup", y), window.addEventListener("pointercancel", y), () => {
-      window.removeEventListener("pointerup", y), window.removeEventListener("pointercancel", y);
+    return window.addEventListener("pointerup", f), window.addEventListener("pointercancel", f), () => {
+      window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", f);
     };
-  }, [i]);
-  function d(y) {
-    l.current = { x: y.clientX, y: y.clientY };
+  }, [a]);
+  function p(f) {
+    d.current = { x: f.clientX, y: f.clientY };
   }
-  function m(y) {
-    const v = l.current;
-    if (v === null || i)
+  function m(f) {
+    const h = d.current;
+    if (h === null || a)
       return;
-    (Math.abs(y.clientX - v.x) > it || Math.abs(y.clientY - v.y) > it) && c(!0);
+    (Math.abs(f.clientX - h.x) > lt || Math.abs(f.clientY - h.y) > lt) && c(!0);
   }
-  const x = i ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
-  return /* @__PURE__ */ o(z.Root, { className: n("gryt-slider w-full", a), ...r, children: /* @__PURE__ */ o(
-    z.Control,
+  const y = a ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
+  return /* @__PURE__ */ o(le.Root, { className: s("gryt-slider w-full", n), ...r, children: /* @__PURE__ */ o(
+    le.Control,
     {
       className: "flex w-full cursor-pointer touch-none items-center py-2 select-none",
-      onPointerDown: d,
+      onPointerDown: p,
       onPointerMove: m,
-      children: /* @__PURE__ */ g(z.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
+      children: /* @__PURE__ */ u(le.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
         /* @__PURE__ */ o(
-          z.Indicator,
+          le.Indicator,
           {
-            className: n(
+            className: s(
               "h-full rounded-(--gryt-radius-full) select-none",
               "transition-[width]",
-              x,
-              ft[t]
+              y,
+              Ct[t]
             )
           }
         ),
         /* @__PURE__ */ o(
-          z.Thumb,
+          le.Thumb,
           {
             "aria-label": e,
-            className: n(
+            className: s(
               "group h-4 w-4 rounded-(--gryt-radius-full) select-none",
               "transition-[inset-inline-start]",
-              x,
+              y,
               // The ring goes on the thumb but the focus lands on the visually
               // hidden input inside it, so this has to match a descendant.
               // Without it the slider is the one control here you cannot see
               // yourself tab to.
-              Ut
+              Ar
             ),
             children: /* @__PURE__ */ o(
               "span",
               {
-                className: n(
+                className: s(
                   "block h-full w-full rounded-(--gryt-radius-full) bg-gryt-text",
                   "transition-[scale] duration-(--gryt-dur-spring) ease-spring",
                   "motion-safe:group-hover:scale-[1.12] motion-safe:group-active:scale-[0.94]",
@@ -714,67 +714,67 @@ function Ro({
     }
   ) });
 }
-const re = {
+const Br = {
   small: "min-h-9 px-3 text-sm",
   medium: "min-h-11 px-4 text-sm"
 };
-function Io({
-  className: a,
+function Je({
+  className: n,
   label: t,
   options: e = [],
   placeholder: r = "Select",
-  size: i = "medium",
+  size: a = "medium",
   ...c
 }) {
-  const l = mt();
-  return /* @__PURE__ */ g(h.Root, { items: e, ...c, children: [
-    /* @__PURE__ */ g("div", { className: n("gryt-select flex w-full flex-col gap-1.5", a), children: [
-      t ? /* @__PURE__ */ o(h.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
-      /* @__PURE__ */ g(
-        h.Trigger,
+  const d = $t();
+  return /* @__PURE__ */ u(R.Root, { items: e, ...c, children: [
+    /* @__PURE__ */ u("div", { className: s("gryt-select flex w-full flex-col gap-1.5", n), children: [
+      t ? /* @__PURE__ */ o(R.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
+      /* @__PURE__ */ u(
+        R.Trigger,
         {
-          className: n(
+          className: s(
             "flex w-full cursor-pointer items-center justify-between gap-2",
             "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface-raised",
             "text-gryt-text select-none",
             "transition-colors duration-150 hover:border-gryt-accent-light",
             "data-disabled:cursor-not-allowed data-disabled:opacity-60",
-            f,
-            re[i]
+            A,
+            Br[a]
           ),
           children: [
-            /* @__PURE__ */ o(h.Value, { placeholder: r }),
-            /* @__PURE__ */ o(h.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(Rt, { size: 16 }) })
+            /* @__PURE__ */ o(R.Value, { placeholder: r }),
+            /* @__PURE__ */ o(R.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(ur, { size: 16 }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ o(h.Portal, { container: l, children: /* @__PURE__ */ o(
-      h.Positioner,
+    /* @__PURE__ */ o(R.Portal, { container: d, children: /* @__PURE__ */ o(
+      R.Positioner,
       {
         sideOffset: 6,
         className: "gryt-select-positioner outline-none",
         children: /* @__PURE__ */ o(
-          h.Popup,
+          R.Popup,
           {
-            className: n("min-w-(--anchor-width) p-1", D, $),
-            children: /* @__PURE__ */ o(h.List, { children: e.map((d) => /* @__PURE__ */ g(
-              h.Item,
+            className: s("min-w-(--anchor-width) p-1", Z, Y),
+            children: /* @__PURE__ */ o(R.List, { children: e.map((p) => /* @__PURE__ */ u(
+              R.Item,
               {
-                value: d.value,
-                disabled: d.disabled,
-                className: n(
+                value: p.value,
+                disabled: p.disabled,
+                className: s(
                   "flex cursor-pointer items-center justify-between gap-2",
                   "rounded-(--gryt-radius-md) px-3 py-2 text-sm text-gryt-text",
                   "outline-none select-none data-highlighted:bg-gryt-surface-raised",
                   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
                 ),
                 children: [
-                  /* @__PURE__ */ o(h.ItemText, { children: d.label }),
-                  /* @__PURE__ */ o(h.ItemIndicator, { className: "text-gryt-accent-11", children: /* @__PURE__ */ o(gt, { size: 14, weight: "bold" }) })
+                  /* @__PURE__ */ o(R.ItemText, { children: p.label }),
+                  /* @__PURE__ */ o(R.ItemIndicator, { className: "text-gryt-accent-11", children: /* @__PURE__ */ o(Xe, { size: 14, weight: "bold" }) })
                 ]
               },
-              String(d.value)
+              String(p.value)
             )) })
           }
         )
@@ -782,46 +782,46 @@ function Io({
     ) })
   ] });
 }
-function Ao({
-  children: a,
+function Fa({
+  children: n,
   className: t,
   side: e = "top",
   sideOffset: r = 8,
-  title: i
+  title: a
 }) {
-  const c = mt();
-  return /* @__PURE__ */ g(I.Root, { children: [
-    /* @__PURE__ */ o(I.Trigger, { render: a }),
-    /* @__PURE__ */ o(I.Portal, { container: c, children: /* @__PURE__ */ o(
-      I.Positioner,
+  const c = $t();
+  return /* @__PURE__ */ u(K.Root, { children: [
+    /* @__PURE__ */ o(K.Trigger, { render: n }),
+    /* @__PURE__ */ o(K.Portal, { container: c, children: /* @__PURE__ */ o(
+      K.Positioner,
       {
         side: e,
         sideOffset: r,
         className: "gryt-tooltip-positioner",
         children: /* @__PURE__ */ o(
-          I.Popup,
+          K.Popup,
           {
-            className: n(
+            className: s(
               "gryt-tooltip rounded-(--gryt-radius-md) border border-gryt-border bg-gryt-surface-raised",
               "px-2.5 py-1.5 text-xs text-gryt-text",
-              $,
+              Y,
               t
             ),
-            children: i
+            children: a
           }
         )
       }
     ) })
   ] });
 }
-const Do = I.Provider, Mo = s(
-  function({ className: t, orientation: e = "horizontal", ...r }, i) {
+const za = K.Provider, Ba = l(
+  function({ className: t, orientation: e = "horizontal", ...r }, a) {
     return /* @__PURE__ */ o(
-      zt,
+      vr,
       {
-        ref: i,
+        ref: a,
         orientation: e,
-        className: n(
+        className: s(
           "gryt-divider bg-gryt-border",
           e === "vertical" ? "h-full w-px" : "h-px w-full",
           t
@@ -830,12 +830,12 @@ const Do = I.Provider, Mo = s(
       }
     );
   }
-), Go = s(function({ className: t, ...e }, r) {
+), Ea = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     "div",
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-card rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text",
         t
       ),
@@ -843,87 +843,87 @@ const Do = I.Provider, Mo = s(
     }
   );
 });
-function Lo({
-  children: a,
+function _a({
+  children: n,
   className: t,
   subheader: e,
   title: r,
-  ...i
+  ...a
 }) {
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: n("gryt-card-header flex flex-col gap-1 p-4", t),
-      ...i,
+      className: s("gryt-card-header flex flex-col gap-1 p-4", t),
+      ...a,
       children: [
         r ? /* @__PURE__ */ o("span", { className: "text-base font-semibold text-gryt-text", children: r }) : null,
         e ? /* @__PURE__ */ o("span", { className: "text-sm text-gryt-muted", children: e }) : null,
-        a
+        n
       ]
     }
   );
 }
-function jo({
-  className: a,
+function Ha({
+  className: n,
   ...t
 }) {
   return /* @__PURE__ */ o(
     "div",
     {
-      className: n(
+      className: s(
         "gryt-card-content px-4 pb-4 text-sm text-gryt-muted",
-        a
+        n
       ),
       ...t
     }
   );
 }
-function zo({
-  className: a,
+function ja({
+  className: n,
   ...t
 }) {
   return /* @__PURE__ */ o(
     "div",
     {
-      className: n(
+      className: s(
         "gryt-card-actions flex items-center gap-2 px-4 pb-4",
-        a
+        n
       ),
       ...t
     }
   );
 }
-const oe = {
+const Er = {
   info: "border-gryt-secondary-6 bg-gryt-secondary-3 text-gryt-secondary-11",
   success: "border-gryt-success-6 bg-gryt-success-3 text-gryt-success-11",
   warning: "border-gryt-warning-6 bg-gryt-warning-3 text-gryt-warning-11",
   error: "border-gryt-danger-6 bg-gryt-danger-3 text-gryt-danger-11"
-}, Bo = s(function({ className: t, severity: e = "info", ...r }, i) {
+}, Oa = l(function({ className: t, severity: e = "info", ...r }, a) {
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: i,
+      ref: a,
       role: "alert",
-      className: n(
+      className: s(
         "gryt-alert rounded-(--gryt-radius-lg) border px-4 py-3 text-sm",
-        oe[e],
+        Er[e],
         t
       ),
       ...r
     }
   );
 });
-function Fo({ className: a, value: t = null, ...e }) {
+function Va({ className: n, value: t = null, ...e }) {
   return /* @__PURE__ */ o(
-    U.Root,
+    De.Root,
     {
       value: t,
-      className: n("gryt-progress w-full", a),
+      className: s("gryt-progress w-full", n),
       ...e,
-      children: /* @__PURE__ */ o(U.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-        U.Indicator,
+      children: /* @__PURE__ */ o(De.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
+        De.Indicator,
         {
-          className: n(
+          className: s(
             "h-full rounded-(--gryt-radius-full) bg-gryt-accent",
             "transition-[width] duration-300 ease-out motion-reduce:transition-none",
             // Base UI marks the indicator indeterminate and leaves its width
@@ -938,41 +938,41 @@ function Fo({ className: a, value: t = null, ...e }) {
     }
   );
 }
-function Eo({
-  className: a,
+function Ya({
+  className: n,
   size: t = 24,
   "aria-label": e = "Loading"
 }) {
   return /* @__PURE__ */ o(
-    It,
+    gr,
     {
       role: "status",
       "aria-label": e,
       size: t,
       weight: "bold",
-      className: n(
+      className: s(
         "gryt-spinner text-gryt-accent-11 motion-safe:animate-spin",
-        a
+        n
       )
     }
   );
 }
-const ae = {
+const _r = {
   text: "h-4 rounded-(--gryt-radius-sm)",
   rounded: "rounded-(--gryt-radius-lg)",
   circular: "rounded-(--gryt-radius-full)",
   rectangular: "rounded-none"
 };
-function Vo({
-  className: a,
+function Ua({
+  className: n,
   height: t,
   style: e,
   variant: r = "text",
-  width: i,
+  width: a,
   ...c
 }) {
-  const l = {
-    width: i,
+  const d = {
+    width: a,
     height: t,
     ...e
   };
@@ -980,7 +980,7 @@ function Vo({
     "div",
     {
       "aria-hidden": "true",
-      className: n(
+      className: s(
         // Not bg-gryt-surface-raised. #1e2028 against #1a1d24 is four points of
         // luminance, which is invisible on a laptop screen at an angle — the
         // placeholder that is meant to say "something is coming" said nothing.
@@ -988,24 +988,24 @@ function Vo({
         // the surfaces it can land on rather than only the one it was picked
         // against, and it dims rather than brightens as it pulses.
         "gryt-skeleton bg-white/9 motion-safe:animate-pulse",
-        ae[r],
-        a
+        _r[r],
+        n
       ),
-      style: l,
+      style: d,
       ...c
     }
   );
 }
-const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", ne = s(
+const Mt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", Hr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Backdrop,
+      O.Backdrop,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-backdrop fixed inset-0 min-h-dvh bg-black/60",
           "backdrop-blur-(--gryt-backdrop-blur)",
-          xt,
+          Mt,
           "data-starting-style:opacity-0 data-ending-style:opacity-0",
           t
         ),
@@ -1013,17 +1013,17 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ie = s(
+), jr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Popup,
+      O.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
           "flex w-[32rem] max-w-[calc(100vw-3rem)] flex-col gap-4",
           "rounded-(--gryt-radius-lg) border border-gryt-border bg-gryt-surface p-5 text-gryt-text",
-          xt,
+          Mt,
           "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
           "data-ending-style:scale-[0.98] data-ending-style:opacity-0",
           t
@@ -1032,13 +1032,13 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), se = s(
+), Or = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Title,
+      O.Title,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-title text-base font-semibold text-gryt-text",
           t
         ),
@@ -1046,13 +1046,13 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ce = s(
+), Vr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Description,
+      O.Description,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-description text-sm text-gryt-muted",
           t
         ),
@@ -1060,13 +1060,13 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), le = s(
+), Yr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
       "div",
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-footer flex justify-end gap-3",
           t
         ),
@@ -1074,45 +1074,45 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), _o = {
-  Root: C.Root,
-  Trigger: C.Trigger,
-  Portal: C.Portal,
-  Close: C.Close,
-  Backdrop: ne,
-  Popup: ie,
-  Title: se,
-  Description: ce,
-  Footer: le
-}, de = () => () => {
+), Xa = {
+  Root: O.Root,
+  Trigger: O.Trigger,
+  Portal: O.Portal,
+  Close: O.Close,
+  Backdrop: Hr,
+  Popup: jr,
+  Title: Or,
+  Description: Vr,
+  Footer: Yr
+}, Ur = () => () => {
 };
-function ge(a) {
-  const t = W(
+function Xr(n) {
+  const t = pe(
     (r) => {
-      if (typeof window > "u" || !window.matchMedia) return de();
-      const i = window.matchMedia(a);
-      return i.addEventListener("change", r), () => i.removeEventListener("change", r);
+      if (typeof window > "u" || !window.matchMedia) return Ur();
+      const a = window.matchMedia(n);
+      return a.addEventListener("change", r), () => a.removeEventListener("change", r);
     },
-    [a]
-  ), e = W(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(a).matches, [a]);
-  return Tt(t, e, () => !1);
+    [n]
+  ), e = pe(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(n).matches, [n]);
+  return Yt(t, e, () => !1);
 }
-const ue = {
+const Wr = {
   left: "left",
   right: "right",
   top: "up",
   bottom: "down"
-}, H = ct("right"), ye = {
+}, Pe = bt("right"), Kr = {
   left: "items-stretch justify-start",
   right: "items-stretch justify-end",
   top: "items-start justify-center",
   bottom: "items-end justify-center"
-}, me = {
+}, Jr = {
   left: "rounded-r-(--gryt-radius-xl)",
   right: "rounded-l-(--gryt-radius-xl)",
   top: "rounded-b-(--gryt-radius-xl)",
   bottom: "rounded-t-(--gryt-radius-xl)"
-}, pe = {
+}, Qr = {
   left: [
     "h-full w-[calc(20rem+var(--gryt-drawer-bleed))] max-w-[calc(85vw+var(--gryt-drawer-bleed))]",
     "-ml-(--gryt-drawer-bleed) border-r py-5 pr-5 pl-[calc(1.25rem+var(--gryt-drawer-bleed))]",
@@ -1142,41 +1142,41 @@ const ue = {
     "data-ending-style:[transform:translateY(calc(100%-var(--gryt-drawer-bleed)))]"
   ].join(" ")
 };
-function be({
-  side: a = "right",
+function Zr({
+  side: n = "right",
   sheetOnMobile: t = !0,
   children: e,
   ...r
 }) {
-  const i = ge("(max-width: 767px)"), c = t && i ? "bottom" : a;
-  return /* @__PURE__ */ o(H.Provider, { value: c, children: /* @__PURE__ */ o(N.Root, { swipeDirection: ue[c], ...r, children: e }) });
+  const a = Xr("(max-width: 767px)"), c = t && a ? "bottom" : n;
+  return /* @__PURE__ */ o(Pe.Provider, { value: c, children: /* @__PURE__ */ o(D.Root, { swipeDirection: Wr[c], ...r, children: e }) });
 }
-const fe = s(
+const qr = l(
   function({ className: t, ...e }, r) {
-    const i = Y(H);
+    const a = $e(Pe);
     return /* @__PURE__ */ o(
-      N.Viewport,
+      D.Viewport,
       {
         ref: r,
-        className: n(
+        className: s(
           // z-50 matters: the popup is no longer positioned itself, so the
           // viewport is what has to sit above the page. Without it a sticky
           // site header renders over the panel.
           "gryt-drawer-viewport fixed inset-0 z-50 flex",
-          ye[i],
+          Kr[a],
           t
         ),
         ...e
       }
     );
   }
-), xe = s(function({ className: t, ...e }, r) {
-  const i = Y(H);
+), en = l(function({ className: t, ...e }, r) {
+  const a = $e(Pe);
   return /* @__PURE__ */ o(
-    N.Popup,
+    D.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-drawer flex flex-col gap-4 border-gryt-border bg-gryt-surface text-gryt-text",
         "overflow-y-auto overscroll-contain outline-none",
         "transition-transform duration-(--gryt-dur-spring-soft) ease-spring-tight",
@@ -1184,19 +1184,19 @@ const fe = s(
         // duration here turns a drag into a drag plus lag.
         "data-swiping:duration-0 data-swiping:select-none",
         "motion-reduce:transition-none",
-        pe[i],
-        me[i],
+        Qr[a],
+        Jr[a],
         t
       ),
       ...e
     }
   );
-}), he = s(function({ className: t, ...e }, r) {
+}), tn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    N.Backdrop,
+    D.Backdrop,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-drawer-backdrop fixed inset-0 z-50 min-h-dvh bg-black/60",
         "backdrop-blur-(--gryt-backdrop-blur)",
         // Lightens as the panel is dragged away, so letting go halfway does not
@@ -1212,64 +1212,64 @@ const fe = s(
     }
   );
 });
-function we({ className: a }) {
-  const t = Y(H);
+function rn({ className: n }) {
+  const t = $e(Pe);
   return t !== "bottom" && t !== "top" ? null : /* @__PURE__ */ o(
     "div",
     {
       "aria-hidden": !0,
-      className: n(
+      className: s(
         "gryt-drawer-grabber mx-auto h-1.5 w-10 shrink-0 rounded-(--gryt-radius-full) bg-gryt-border",
         t === "top" && "order-last",
-        a
+        n
       )
     }
   );
 }
-const Yo = {
-  Root: be,
-  Trigger: N.Trigger,
-  Portal: N.Portal,
-  Backdrop: he,
-  Viewport: fe,
-  Popup: xe,
-  Content: N.Content,
-  Grabber: we,
-  Close: N.Close,
-  Title: N.Title,
-  Description: N.Description
-}, ve = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+const Wa = {
+  Root: Zr,
+  Trigger: D.Trigger,
+  Portal: D.Portal,
+  Backdrop: tn,
+  Viewport: qr,
+  Popup: en,
+  Content: D.Content,
+  Grabber: rn,
+  Close: D.Close,
+  Title: D.Title,
+  Description: D.Description
+}, nn = l(
+  function({ className: t, sideOffset: e = 8, ...r }, a) {
     return /* @__PURE__ */ o(
-      A.Positioner,
+      J.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-menu-positioner outline-none", t),
+        className: s("gryt-menu-positioner outline-none", t),
         ...r
       }
     );
   }
-), Ne = s(function({ className: t, ...e }, r) {
+), on = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    A.Popup,
+    J.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-menu min-w-44 p-1 outline-none",
-        D,
-        $,
+        Z,
+        Y,
         t
       ),
       ...e
     }
   );
-}), Pe = s(function({ className: t, ...e }, r) {
+}), an = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    A.Item,
+    J.Item,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-menu-item flex cursor-pointer items-center gap-2 rounded-(--gryt-radius-md)",
         "px-3 py-2 text-sm text-gryt-text outline-none select-none",
         // Base UI drives keyboard and pointer highlight through the same
@@ -1281,29 +1281,29 @@ const Yo = {
       ...e
     }
   );
-}), Te = s(function({ className: t, ...e }, r) {
+}), sn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    A.Separator,
+    J.Separator,
     {
       ref: r,
-      className: n("gryt-menu-separator my-1 h-px bg-gryt-border", t),
+      className: s("gryt-menu-separator my-1 h-px bg-gryt-border", t),
       ...e
     }
   );
-}), K = {
-  Root: A.Root,
-  Trigger: A.Trigger,
-  Portal: A.Portal,
-  Positioner: ve,
-  Popup: Ne,
-  Item: Pe,
-  Separator: Te
-}, ke = s(function({ className: t, ...e }, r) {
+}), Ge = {
+  Root: J.Root,
+  Trigger: J.Trigger,
+  Portal: J.Portal,
+  Positioner: nn,
+  Popup: on,
+  Item: an,
+  Separator: sn
+}, ln = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Root,
+    he.Root,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tabs",
         // Vertical puts the rail and the panel side by side. min-w-0 on the
         // panel does the rest; without the flex here the panel lands under the
@@ -1314,12 +1314,12 @@ const Yo = {
       ...e
     }
   );
-}), Ce = s(function({ className: t, ...e }, r) {
+}), cn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.List,
+    he.List,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tabs-list relative inline-flex items-center gap-1 rounded-(--gryt-radius-full) bg-gryt-surface-raised p-1",
         // A rail, not a pill: rows are full width and the corner radius drops
         // to lg, because a 999px radius on a tall box bows its short edges.
@@ -1331,12 +1331,12 @@ const Yo = {
       ...e
     }
   );
-}), Se = s(function({ className: t, ...e }, r) {
+}), dn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Tab,
+    he.Tab,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tab inline-flex min-h-8 cursor-pointer items-center justify-center whitespace-nowrap",
         "rounded-(--gryt-radius-full) border-0 bg-transparent px-4 py-1.5",
         "text-sm font-medium text-gryt-muted select-none",
@@ -1362,20 +1362,20 @@ const Yo = {
         "data-[orientation=vertical]:gap-2.5 data-[orientation=vertical]:px-3",
         "data-[orientation=vertical]:rounded-(--gryt-radius-md)",
         "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        f,
+        A,
         t
       ),
       ...e
     }
   );
-}), $e = s(
+}), un = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      E.Indicator,
+      he.Indicator,
       {
         ref: r,
         renderBeforeHydration: !0,
-        className: n(
+        className: s(
           "gryt-tabs-indicator absolute top-1 left-0 z-0 h-[calc(100%-0.5rem)]",
           "w-(--active-tab-width) translate-x-(--active-tab-left)",
           "rounded-(--gryt-radius-full) bg-gryt-accent",
@@ -1395,12 +1395,12 @@ const Yo = {
       }
     );
   }
-), Re = s(function({ className: t, ...e }, r) {
+), gn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Panel,
+    he.Panel,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tabs-panel pt-3 text-sm text-gryt-text",
         // Beside the rail rather than under it, and allowed to shrink so long
         // content wraps instead of pushing the rail off screen.
@@ -1411,49 +1411,49 @@ const Yo = {
       ...e
     }
   );
-}), Ho = Object.assign(ke, { List: Ce, Tab: Se, Panel: Re, Indicator: $e }), Ie = s(function({ className: t, ...e }, r) {
+}), Ka = Object.assign(ln, { List: cn, Tab: dn, Panel: gn, Indicator: un }), mn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    F.Root,
+    fe.Root,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-accordion flex w-full flex-col gap-2 rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface p-2",
         t
       ),
       ...e
     }
   );
-}), Ae = s(
+}), pn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      F.Item,
+      fe.Item,
       {
         ref: r,
-        className: n("gryt-accordion-item", t),
+        className: s("gryt-accordion-item", t),
         ...e
       }
     );
   }
-), De = s(
-  function({ children: t, className: e, expandIcon: r, ...i }, c) {
-    return /* @__PURE__ */ o(F.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ g(
-      F.Trigger,
+), yn = l(
+  function({ children: t, className: e, expandIcon: r, ...a }, c) {
+    return /* @__PURE__ */ o(fe.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ u(
+      fe.Trigger,
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-accordion-trigger flex w-full cursor-pointer items-center justify-between gap-3",
           "rounded-(--gryt-radius-lg) border-0 bg-transparent px-3 py-2.5",
           "text-left text-sm font-medium text-gryt-text select-none",
           "transition-colors duration-150 hover:bg-gryt-surface-raised",
           "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-          f,
+          A,
           e
         ),
-        ...i,
+        ...a,
         children: [
           t,
           r === void 0 ? /* @__PURE__ */ o(
-            At,
+            mr,
             {
               size: 16,
               className: "shrink-0 transition-transform duration-(--gryt-dur-spring) ease-spring data-panel-open:rotate-180 motion-reduce:transition-none"
@@ -1463,13 +1463,13 @@ const Yo = {
       }
     ) });
   }
-), Me = s(
-  function({ children: t, className: e, ...r }, i) {
+), fn = l(
+  function({ children: t, className: e, ...r }, a) {
     return /* @__PURE__ */ o(
-      F.Panel,
+      fe.Panel,
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-accordion-panel overflow-hidden text-sm text-gryt-muted",
           // Base UI measures the panel and exposes the height as a variable,
           // which is what makes a real open and close transition possible.
@@ -1483,105 +1483,105 @@ const Yo = {
       }
     );
   }
-), Oo = Object.assign(Ie, { Item: Ae, Trigger: De, Panel: Me }), Ge = s(
-  function({ className: t, sideOffset: e = 2, ...r }, i) {
+), Ja = Object.assign(mn, { Item: pn, Trigger: yn, Panel: fn }), hn = l(
+  function({ className: t, sideOffset: e = 2, ...r }, a) {
     return /* @__PURE__ */ o(
-      k.Positioner,
+      j.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-context-menu-positioner outline-none", t),
+        className: s("gryt-context-menu-positioner outline-none", t),
         ...r
       }
     );
   }
-), Xo = {
-  Root: k.Root,
-  Trigger: k.Trigger,
-  Portal: k.Portal,
-  Positioner: Ge,
-  Popup: K.Popup,
-  Item: K.Item,
-  Separator: K.Separator,
-  Group: k.Group,
-  GroupLabel: k.GroupLabel,
-  SubmenuRoot: k.SubmenuRoot,
-  SubmenuTrigger: k.SubmenuTrigger
-}, Le = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+), Qa = {
+  Root: j.Root,
+  Trigger: j.Trigger,
+  Portal: j.Portal,
+  Positioner: hn,
+  Popup: Ge.Popup,
+  Item: Ge.Item,
+  Separator: Ge.Separator,
+  Group: j.Group,
+  GroupLabel: j.GroupLabel,
+  SubmenuRoot: j.SubmenuRoot,
+  SubmenuTrigger: j.SubmenuTrigger
+}, bn = l(
+  function({ className: t, sideOffset: e = 8, ...r }, a) {
     return /* @__PURE__ */ o(
-      P.Positioner,
+      B.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-popover-positioner outline-none", t),
+        className: s("gryt-popover-positioner outline-none", t),
         ...r
       }
     );
   }
-), je = s(
+), xn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      P.Popup,
+      B.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-popover max-w-[min(20rem,calc(100vw-2rem))] p-4 outline-none",
-          D,
-          $,
+          Z,
+          Y,
           t
         ),
         ...e
       }
     );
   }
-), ze = s(function({ className: t, ...e }, r) {
+), vn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    P.Title,
+    B.Title,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-popover-title text-sm font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), Be = s(function({ className: t, ...e }, r) {
+}), wn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    P.Description,
+    B.Description,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-popover-description mt-1 text-sm leading-6 text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), Uo = {
-  Root: P.Root,
-  Trigger: P.Trigger,
-  Portal: P.Portal,
-  Positioner: Le,
-  Popup: je,
-  Title: ze,
-  Description: Be,
-  Close: P.Close,
-  Arrow: P.Arrow
-}, Fe = {
+}), Za = {
+  Root: B.Root,
+  Trigger: B.Trigger,
+  Portal: B.Portal,
+  Positioner: bn,
+  Popup: xn,
+  Title: vn,
+  Description: wn,
+  Close: B.Close,
+  Arrow: B.Arrow
+}, Nn = {
   neutral: "border-white/8 bg-gryt-surface",
   info: "border-gryt-secondary-6 bg-gryt-secondary-2",
   success: "border-gryt-success-6 bg-gryt-success-2",
   warning: "border-gryt-warning-6 bg-gryt-warning-2",
   danger: "border-gryt-danger-6 bg-gryt-danger-2"
-}, Ee = s(
+}, Tn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      T.Viewport,
+      E.Viewport,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-toast-viewport fixed right-4 bottom-4 z-50 flex w-[min(22rem,calc(100vw-2rem))]",
           "flex-col gap-2 outline-none",
           t
@@ -1590,12 +1590,12 @@ const Yo = {
       }
     );
   }
-), Ve = s(function({ className: t, severity: e = "neutral", ...r }, i) {
+), Sn = l(function({ className: t, severity: e = "neutral", ...r }, a) {
   return /* @__PURE__ */ o(
-    T.Root,
+    E.Root,
     {
-      ref: i,
-      className: n(
+      ref: a,
+      className: s(
         "gryt-toast relative flex flex-col p-3 pr-9",
         // Not popupSurface. That border is --gryt-border, a solid slate line
         // that is right for a menu anchored to the thing that opened it and too
@@ -1603,7 +1603,7 @@ const Yo = {
         // white hairline separates it from the page without drawing a box
         // around it.
         "rounded-(--gryt-radius-xl) border text-gryt-text",
-        Fe[e],
+        Nn[e],
         // Swiping is a pointer gesture, so the toast follows the finger
         // through Base UI's swipe variables before it animates out.
         "transition-[opacity,transform] duration-(--gryt-dur-spring) ease-spring",
@@ -1615,37 +1615,37 @@ const Yo = {
       ...r
     }
   );
-}), _e = s(function({ className: t, ...e }, r) {
+}), $n = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Title,
+    E.Title,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toast-title text-sm font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), Ye = s(function({ className: t, ...e }, r) {
+}), kn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Description,
+    E.Description,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toast-description mt-0.5 text-sm leading-6 text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), He = s(function({ className: t, children: e, ...r }, i) {
+}), Pn = l(function({ className: t, children: e, ...r }, a) {
   return /* @__PURE__ */ o(
-    T.Close,
+    E.Close,
     {
-      ref: i,
+      ref: a,
       "aria-label": "Close",
-      className: n(
+      className: s(
         "gryt-toast-close absolute top-2.5 right-2.5 inline-flex h-6 w-6 items-center justify-center",
         "rounded-(--gryt-radius-full) border-0 bg-transparent text-gryt-muted",
         "transition-colors hover:bg-white/8 hover:text-gryt-text motion-reduce:transition-none",
@@ -1653,15 +1653,15 @@ const Yo = {
         t
       ),
       ...r,
-      children: e ?? /* @__PURE__ */ o(dt, { size: 14, weight: "bold" })
+      children: e ?? /* @__PURE__ */ o(Ue, { size: 14, weight: "bold" })
     }
   );
-}), Oe = s(function({ className: t, ...e }, r) {
+}), Cn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Action,
+    E.Action,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toast-action mt-2 self-start rounded-(--gryt-radius-full) border-0",
         "bg-gryt-accent px-3 py-1.5 text-sm font-medium text-gryt-on-accent",
         "transition-[scale] duration-(--gryt-dur-spring) ease-spring",
@@ -1672,33 +1672,33 @@ const Yo = {
       ...e
     }
   );
-}), Ko = {
-  Provider: T.Provider,
-  Portal: T.Portal,
-  Viewport: Ee,
-  Root: Ve,
-  Title: _e,
-  Description: Ye,
-  Close: He,
-  Action: Oe
-}, Wo = T.useToastManager, Xe = s(
+}), qa = {
+  Provider: E.Provider,
+  Portal: E.Portal,
+  Viewport: Tn,
+  Root: Sn,
+  Title: $n,
+  Description: kn,
+  Close: Pn,
+  Action: Cn
+}, es = E.useToastManager, An = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      L.Root,
+      se.Root,
       {
         ref: r,
-        className: n("gryt-scroll-area relative", t),
+        className: s("gryt-scroll-area relative", t),
         ...e
       }
     );
   }
-), Ue = s(
+), Mn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      L.Viewport,
+      se.Viewport,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-scroll-area-viewport h-full w-full overscroll-contain",
           "focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gryt-accent-light",
           t
@@ -1707,14 +1707,14 @@ const Yo = {
       }
     );
   }
-), Ke = s(
-  function({ className: t, orientation: e, ...r }, i) {
+), Rn = l(
+  function({ className: t, orientation: e, ...r }, a) {
     return /* @__PURE__ */ o(
-      L.Scrollbar,
+      se.Scrollbar,
       {
-        ref: i,
+        ref: a,
         orientation: e,
-        className: n(
+        className: s(
           "gryt-scroll-area-scrollbar flex touch-none p-0.5 select-none",
           // Fades in on hover or while scrolling rather than sitting there
           // permanently — a chat sidebar is mostly not being scrolled.
@@ -1725,17 +1725,17 @@ const Yo = {
           t
         ),
         ...r,
-        children: /* @__PURE__ */ o(L.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
+        children: /* @__PURE__ */ o(se.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
       }
     );
   }
-), Qo = {
-  Root: Xe,
-  Viewport: Ue,
-  Scrollbar: Ke,
-  Content: L.Content,
-  Corner: L.Corner
-}, We = {
+), ts = {
+  Root: An,
+  Viewport: Mn,
+  Scrollbar: Rn,
+  Content: se.Content,
+  Corner: se.Corner
+}, In = {
   primary: [
     "text-gryt-muted hover:not-data-disabled:bg-white/8",
     "data-pressed:bg-gryt-accent data-pressed:text-gryt-on-accent",
@@ -1756,18 +1756,18 @@ const Yo = {
     "data-pressed:bg-gryt-danger data-pressed:text-gryt-on-danger",
     "data-pressed:hover:not-data-disabled:bg-gryt-danger"
   ].join(" ")
-}, Qe = {
+}, Ln = {
   xsmall: "h-8 min-w-8 px-2 text-xs",
   small: "h-9 min-w-9 px-2.5 text-sm",
   medium: "h-10 min-w-10 px-3 text-sm",
   large: "h-12 min-w-12 px-4 text-base"
-}, Zo = s(
-  function({ className: t, size: e = "medium", tone: r = "primary", ...i }, c) {
+}, ct = l(
+  function({ className: t, size: e = "medium", tone: r = "primary", ...a }, c) {
     return /* @__PURE__ */ o(
-      Bt,
+      wr,
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-toggle",
           "inline-flex shrink-0 items-center justify-center gap-2 border-0 bg-transparent",
           "rounded-(--gryt-radius-full) font-medium select-none",
@@ -1775,23 +1775,23 @@ const Yo = {
           "transition-[scale,background-color,color] duration-(--gryt-dur-spring) ease-spring",
           "motion-safe:hover:not-data-disabled:scale-[1.06]",
           "motion-safe:active:not-data-disabled:scale-[0.94]",
-          f,
-          j,
-          Qe[e],
-          We[r],
+          A,
+          ie,
+          Ln[e],
+          In[r],
           t
         ),
-        ...i
+        ...a
       }
     );
   }
-), Jo = s(
+), Dn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Ft,
+      Nr,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-toggle-group inline-flex items-center gap-1",
           "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface p-1",
           t
@@ -1800,38 +1800,1210 @@ const Yo = {
       }
     );
   }
-), Ze = {
+), Rt = Wt, rs = Xt;
+function Ve(n, t) {
+  return t === "light" && n.lightHue !== null ? "lightHue" : "hue";
+}
+const Se = Jt;
+function Gn(n) {
+  return {
+    hue: { ...n.hue },
+    lightHue: n.lightHue === null ? null : { ...n.lightHue },
+    dark: { ...n.dark },
+    light: { ...n.light },
+    radius: { ...n.radius }
+  };
+}
+function Fn(n, t) {
+  return { ...Se(n, t), ...n[t] };
+}
+function zn(n, t) {
+  return xt(Kt(n, t));
+}
+function z(n, t) {
+  const e = n;
+  return Array.from(
+    { length: 12 },
+    (r, a) => e[`--gryt-${t}-${a + 1}`]
+  );
+}
+function dt(n) {
+  return JSON.stringify(n);
+}
+const Fe = {
+  accent: "Accent",
+  accentLight: "Accent, light",
+  secondary: "Secondary",
+  secondaryLight: "Secondary, light",
+  success: "Success",
+  danger: "Danger",
+  dangerLight: "Danger, light",
+  warning: "Warning",
+  onAccent: "Text on accent",
+  onSecondary: "Text on secondary",
+  onDanger: "Text on danger"
+}, ut = {
+  bg: "Page",
+  surface: "Surface",
+  surfaceRaised: "Raised surface",
+  surfaceHover: "Surface, hovered",
+  border: "Border",
+  muted: "Muted text",
+  text: "Text"
+}, gt = {
+  sm: "Small",
+  md: "Medium",
+  lg: "Large",
+  xl: "Extra large",
+  full: "Full"
+}, Bn = {
+  sm: "Chips, swatches, small insets",
+  md: "Menu rows, list items",
+  lg: "Cards and panels",
+  xl: "Dialogs, composers, bubbles",
+  full: "Buttons, fields, avatars"
+};
+function de({
+  label: n,
+  value: t,
+  onChange: e,
+  warning: r,
+  disabled: a = !1
+}) {
+  const c = Ut(), [d, p] = G(t), [m, y] = G(t);
+  t !== m && (y(t), p(t));
+  function f(h) {
+    p(h), Qt(h) && e(ye(h));
+  }
+  return /* @__PURE__ */ u("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ u(
+      "span",
+      {
+        className: "mb-1 flex items-center gap-1.5 text-xs font-medium text-gryt-muted",
+        id: `${c}-label`,
+        children: [
+          /* @__PURE__ */ o("span", { className: "truncate", children: n }),
+          r ? /* @__PURE__ */ o("span", { className: "inline-flex shrink-0 text-gryt-warning-11", title: r, children: /* @__PURE__ */ o(Nt, { "aria-label": r, size: 13 }) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ u("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          "aria-label": `${n}, colour picker`,
+          className: "docs-swatch disabled:cursor-not-allowed disabled:opacity-60",
+          disabled: a,
+          onChange: (h) => f(h.target.value),
+          type: "color",
+          value: ye(t)
+        }
+      ),
+      /* @__PURE__ */ o(
+        Ke,
+        {
+          "aria-label": `${n}, hex value`,
+          className: "font-mono",
+          disabled: a,
+          onBlur: () => p(t),
+          onChange: (h) => f(h.target.value),
+          size: "small",
+          spellCheck: !1,
+          value: d
+        }
+      )
+    ] })
+  ] });
+}
+const ee = "ui-sans-serif, system-ui, sans-serif", ze = "ui-serif, Georgia, serif", ve = "ui-monospace, Menlo, Consolas, monospace", Ye = [
+  {
+    label: "Atkinson Hyperlegible",
+    stack: `"Atkinson Hyperlegible Next", ${ee}`,
+    remote: !1,
+    note: "What Gryt ships. Drawn so letterforms cannot be confused."
+  },
+  {
+    label: "System",
+    stack: ee,
+    remote: !1,
+    note: "Whatever this machine uses. Nothing to load."
+  },
+  {
+    label: "System serif",
+    stack: ze,
+    remote: !1,
+    note: "The machine's serif. Nothing to load."
+  },
+  {
+    label: "Atkinson Hyperlegible Mono",
+    stack: `"Atkinson Hyperlegible Mono", ${ve}`,
+    remote: !1,
+    note: "The monospace Gryt ships."
+  },
+  {
+    label: "System mono",
+    stack: ve,
+    remote: !1,
+    note: "The machine's monospace. Nothing to load."
+  },
+  {
+    label: "Inter",
+    stack: `"Inter", ${ee}`,
+    remote: !0,
+    note: "The default interface grotesque. Neutral to a fault."
+  },
+  {
+    label: "Geist",
+    stack: `"Geist", ${ee}`,
+    remote: !0,
+    note: "Vercel's. What shadcn/ui is set in."
+  },
+  {
+    label: "IBM Plex Sans",
+    stack: `"IBM Plex Sans", ${ee}`,
+    remote: !0,
+    note: "Technical and a little cold, with a real mono to match."
+  },
+  {
+    label: "Archivo",
+    stack: `"Archivo", ${ee}`,
+    remote: !0,
+    note: "Grotesque with weight. Good for headings that carry."
+  },
+  {
+    label: "Fraunces",
+    stack: `"Fraunces", ${ze}`,
+    remote: !0,
+    note: "A serif with opinions. Headings rather than body."
+  },
+  {
+    label: "Source Serif 4",
+    stack: `"Source Serif 4", ${ze}`,
+    remote: !0,
+    note: "A serif you can read a paragraph in."
+  },
+  {
+    label: "JetBrains Mono",
+    stack: `"JetBrains Mono", ${ve}`,
+    remote: !0,
+    note: "Monospace with a tall x-height. Made for code."
+  },
+  {
+    label: "IBM Plex Mono",
+    stack: `"IBM Plex Mono", ${ve}`,
+    remote: !0,
+    note: "The mono beside IBM Plex Sans."
+  }
+], En = {
+  body: "Body",
+  display: "Headings",
+  mono: "Code and numbers"
+}, _n = {
+  body: "Messages, labels, everything you read.",
+  display: "Headings and titles. Defaults to the body face.",
+  mono: "Code, hex values, timestamps, fingerprints."
+};
+function Hn(n) {
+  return Ye.find((t) => t.stack === n);
+}
+function jn(n) {
+  return (n.split(",")[0]?.trim() ?? "").replace(/^["']|["']$/g, "");
+}
+const Be = "custom";
+function On({
+  role: n,
+  fonts: t,
+  onChange: e,
+  remoteAllowed: r = !0
+}) {
+  const a = t?.[n] ?? vt[n], c = Hn(a), [d, p] = G(
+    () => c === void 0 ? jn(a) : ""
+  ), m = n === "mono" ? "ui-monospace, Menlo, Consolas, monospace" : "ui-sans-serif, system-ui, sans-serif";
+  function y(b) {
+    if (b === Be) {
+      const v = d.trim();
+      v !== "" && f(v);
+      return;
+    }
+    const x = Ye.find((v) => v.label === b);
+    x !== void 0 && e(x.stack);
+  }
+  function f(b) {
+    const x = `"${b}", ${m}`;
+    Zt(x) && e(x);
+  }
+  const h = c?.remote === !0 && !r;
+  return /* @__PURE__ */ u("div", { className: "min-w-0 flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ o(
+      Je,
+      {
+        label: En[n],
+        onValueChange: (b) => y(String(b)),
+        options: [
+          ...Ye.map((b) => ({
+            label: b.remote ? `${b.label} · fetched` : b.label,
+            value: b.label
+          })),
+          { label: "Something else…", value: Be }
+        ],
+        size: "small",
+        value: c?.label ?? Be
+      }
+    ),
+    c === void 0 ? /* @__PURE__ */ o(
+      Ke,
+      {
+        label: "Family name",
+        onChange: (b) => {
+          p(b.target.value);
+          const x = b.target.value.trim();
+          x !== "" && f(x);
+        },
+        placeholder: "Bodoni Moda",
+        size: "small",
+        value: d
+      }
+    ) : null,
+    /* @__PURE__ */ o("p", { className: "m-0 text-[11px] leading-4 text-gryt-muted", children: c?.note ?? _n[n] }),
+    h ? /* @__PURE__ */ o("p", { className: "m-0 text-[11px] leading-4 text-gryt-warning-11", children: "This one is fetched from Google, which is off on this machine. It will fall back until you turn it on." }) : null,
+    /* @__PURE__ */ o(
+      "p",
+      {
+        className: "m-0 truncate text-sm text-gryt-text",
+        style: { fontFamily: a },
+        children: "The quick brown fox — 0123456789"
+      }
+    )
+  ] });
+}
+const mt = 0.45, _ = { min: -mt, size: 1 + mt * 2 };
+function pt({
+  value: n,
+  onChange: t,
+  reference: e,
+  samples: r
+}) {
+  const a = r !== void 0, c = ke(null), [d, p] = G(null), [m, y, f, h] = n, b = pe((w, $) => {
+    const M = c.current?.getBoundingClientRect();
+    if (M === void 0 || M.width === 0) return null;
+    const F = _.min + (w - M.left) / M.width * _.size, q = _.min + (M.bottom - $) / M.height * _.size;
+    return { x: F, y: q };
+  }, []), x = pe(
+    (w) => {
+      if (d === null) return;
+      const $ = b(w.clientX, w.clientY);
+      if ($ === null) return;
+      const M = Math.min(1, Math.max(0, Number($.x.toFixed(3)))), F = Number($.y.toFixed(3));
+      t(
+        d === 0 ? [M, F, f, h] : [m, y, M, F]
+      );
+    },
+    [d, t, b, m, y, f, h]
+  ), v = (w) => w, N = (w) => 1 - w, k = `M 0 ${N(0)} C ${v(m)} ${N(y)}, ${v(f)} ${N(h)}, 1 ${N(1)}`;
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      className: "w-full touch-none rounded-(--gryt-radius-sm) border border-gryt-border bg-gryt-surface-raised",
+      onPointerDown: (w) => {
+        if (a) return;
+        const $ = b(w.clientX, w.clientY);
+        if ($ === null) return;
+        const M = (F, q) => ($.x - F) ** 2 + ($.y - q) ** 2;
+        p(M(m, y) <= M(f, h) ? 0 : 1), w.currentTarget.setPointerCapture(w.pointerId);
+      },
+      onPointerMove: x,
+      onPointerUp: (w) => {
+        p(null), w.currentTarget.releasePointerCapture(w.pointerId);
+      },
+      preserveAspectRatio: "none",
+      ref: c,
+      role: a ? "img" : "application",
+      "aria-label": "Timing curve",
+      style: { height: 132 },
+      viewBox: `${_.min} ${_.min} ${_.size} ${_.size}`,
+      children: [
+        /* @__PURE__ */ o(
+          "rect",
+          {
+            fill: "none",
+            height: 1,
+            stroke: "var(--gryt-border)",
+            strokeWidth: 4e-3,
+            width: 1,
+            x: 0,
+            y: 0
+          }
+        ),
+        e !== void 0 ? /* @__PURE__ */ o(
+          "polyline",
+          {
+            fill: "none",
+            opacity: 0.35,
+            points: e.map((w, $) => `${$ / (e.length - 1)},${N(w)}`).join(" "),
+            stroke: "var(--gryt-muted)",
+            strokeWidth: 8e-3
+          }
+        ) : null,
+        a ? /* @__PURE__ */ o(
+          "polyline",
+          {
+            fill: "none",
+            points: r.map((w, $) => `${$ / (r.length - 1)},${N(w)}`).join(" "),
+            stroke: "var(--gryt-accent)",
+            strokeWidth: 0.014
+          }
+        ) : /* @__PURE__ */ u(jt, { children: [
+          /* @__PURE__ */ o(
+            "line",
+            {
+              stroke: "var(--gryt-muted)",
+              strokeWidth: 5e-3,
+              x1: 0,
+              x2: v(m),
+              y1: N(0),
+              y2: N(y)
+            }
+          ),
+          /* @__PURE__ */ o(
+            "line",
+            {
+              stroke: "var(--gryt-muted)",
+              strokeWidth: 5e-3,
+              x1: 1,
+              x2: v(f),
+              y1: N(1),
+              y2: N(h)
+            }
+          ),
+          /* @__PURE__ */ o(
+            "path",
+            {
+              d: k,
+              fill: "none",
+              stroke: "var(--gryt-accent)",
+              strokeWidth: 0.014
+            }
+          ),
+          /* @__PURE__ */ o(
+            "circle",
+            {
+              cx: v(m),
+              cy: N(y),
+              fill: "var(--gryt-accent)",
+              r: d === 0 ? 0.035 : 0.026
+            }
+          ),
+          /* @__PURE__ */ o(
+            "circle",
+            {
+              cx: v(f),
+              cy: N(h),
+              fill: "var(--gryt-accent)",
+              r: d === 1 ? 0.035 : 0.026
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Ee = "custom", Vn = [0.22, 1, 0.36, 1];
+function Yn({ motion: n, onChange: t }) {
+  const e = n ?? er, r = qt(e.curve) ? e.curve : null, [a, c] = G(
+    r ?? Vn
+  );
+  function d(m) {
+    t({ ...e, curve: m });
+  }
+  const p = e.scale === 0;
+  return /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ u("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ u("div", { className: "mb-1 flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ o("span", { className: "text-xs font-medium text-gryt-muted", children: "Speed" }),
+        /* @__PURE__ */ o("span", { className: "font-mono text-[11px] text-gryt-muted", children: p ? "off" : `${e.scale.toFixed(2)}× · ${Math.round(
+          qe.spring * e.scale
+        )}ms` })
+      ] }),
+      /* @__PURE__ */ o(
+        At,
+        {
+          "aria-label": "Animation speed",
+          max: tr,
+          min: 0,
+          onValueChange: (m) => t({ ...e, scale: Number(Number(m).toFixed(2)) }),
+          step: 0.05,
+          value: e.scale
+        }
+      ),
+      /* @__PURE__ */ o("p", { className: "m-0 pt-1 text-[11px] leading-4 text-gryt-muted", children: p ? "Nothing animates. A real choice, not a broken one — some people find movement unpleasant." : "One multiplier over every tier, so a drawer stays slower than a button." })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "min-w-0", children: /* @__PURE__ */ o(
+      Je,
+      {
+        label: "Curve",
+        onValueChange: (m) => {
+          const y = String(m);
+          d(y === Ee ? a : y);
+        },
+        options: [
+          { label: "Spring — overshoots and settles", value: "spring" },
+          { label: "Smooth — settles without passing", value: "smooth" },
+          { label: "Linear — no easing at all", value: "linear" },
+          { label: "Draw one…", value: Ee }
+        ],
+        size: "small",
+        value: r === null ? e.curve : Ee
+      }
+    ) }),
+    r !== null ? /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+      /* @__PURE__ */ o(
+        pt,
+        {
+          onChange: (m) => {
+            c(m), d(m);
+          },
+          reference: et,
+          value: r
+        }
+      ),
+      /* @__PURE__ */ u("p", { className: "m-0 font-mono text-[11px] text-gryt-muted", children: [
+        "cubic-bezier(",
+        r.join(", "),
+        ")"
+      ] }),
+      /* @__PURE__ */ o("p", { className: "m-0 text-[11px] leading-4 text-gryt-muted", children: "The faint line is the shipped spring, to compare against. Anything drawn above the box overshoots — fine on a button, and it throws a drawer outside its own edge, because one curve now does both jobs." })
+    ] }) : /* @__PURE__ */ o(
+      pt,
+      {
+        onChange: d,
+        samples: e.curve === "smooth" ? rr : e.curve === "linear" ? [0, 1] : et,
+        value: a
+      }
+    ),
+    /* @__PURE__ */ u("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ o("span", { className: "text-xs font-medium text-gryt-muted", children: "Preview" }),
+      /* @__PURE__ */ o("div", { className: "mt-1 overflow-hidden rounded-(--gryt-radius-sm) border border-gryt-border bg-gryt-surface-raised p-2", children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "h-4 w-4 rounded-(--gryt-radius-sm) bg-gryt-accent",
+          style: {
+            animation: p ? "none" : `gryt-motion-preview ${Math.round(
+              qe.springSoft * e.scale
+            )}ms var(--ease-spring) infinite alternate`
+          }
+        },
+        `${e.scale}-${String(e.curve)}`
+      ) })
+    ] })
+  ] });
+}
+const Un = {
+  pass: Xe,
+  tight: Nt,
+  fail: Ue
+}, yt = {
+  pass: "text-gryt-success-11",
+  tight: "text-gryt-warning-11",
+  fail: "text-gryt-danger-11"
+};
+function Xn({ checks: n, onRepair: t }) {
+  const e = n.filter(
+    (r) => !r.advisory && r.level === "fail"
+  ).length;
+  return /* @__PURE__ */ u("section", { className: "min-w-0", children: [
+    /* @__PURE__ */ u("header", { className: "flex items-center justify-between gap-2 pb-2", children: [
+      /* @__PURE__ */ o("h2", { className: "m-0 text-[11px] font-semibold uppercase tracking-wider text-gryt-muted", children: "Contrast" }),
+      e > 0 ? /* @__PURE__ */ u("span", { className: "text-xs text-gryt-danger-11", children: [
+        e,
+        " of ",
+        n.length
+      ] }) : /* @__PURE__ */ u("span", { className: "text-xs text-gryt-muted", children: [
+        n.length,
+        " checks pass"
+      ] })
+    ] }),
+    /* @__PURE__ */ o("ul", { className: "m-0 list-none space-y-1 p-0", children: n.map((r) => {
+      const a = r.advisory && r.level === "fail" ? "tight" : r.level, c = Un[a];
+      return /* @__PURE__ */ u(
+        "li",
+        {
+          className: "flex items-center justify-between gap-2 text-xs",
+          children: [
+            /* @__PURE__ */ u("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ o(c, { "aria-hidden": "true", className: yt[a], size: 12 }),
+              /* @__PURE__ */ o("span", { className: "truncate text-gryt-muted", children: r.label })
+            ] }),
+            /* @__PURE__ */ u("span", { className: "shrink-0 font-mono text-[11px] text-gryt-muted", children: [
+              /* @__PURE__ */ o("span", { className: a === "pass" ? "text-gryt-text" : yt[a], children: r.ratio.toFixed(1) }),
+              /* @__PURE__ */ u("span", { "aria-hidden": "true", children: [
+                " / ",
+                r.min
+              ] }),
+              /* @__PURE__ */ u("span", { className: "sr-only", children: [
+                " against a minimum of ",
+                r.min
+              ] }),
+              !r.advisory && r.ratio >= 7 ? /* @__PURE__ */ o("span", { className: "pl-1.5 text-[10px] text-gryt-success-11", children: "AAA" }) : null
+            ] })
+          ]
+        },
+        r.id
+      );
+    }) }),
+    t ? /* @__PURE__ */ o("div", { className: "pt-3", children: /* @__PURE__ */ o(Te, { onClick: t, size: "small", tone: "neutral", children: "Fix the text colours" }) }) : null
+  ] });
+}
+function te({ label: n, steps: t }) {
+  return /* @__PURE__ */ u("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ o("span", { className: "mb-1 block text-[11px] font-medium tracking-wide text-gryt-muted", children: n }),
+    /* @__PURE__ */ o("ol", { className: "m-0 flex list-none gap-px overflow-hidden rounded-(--gryt-radius-sm) border border-gryt-border p-0", children: t.map((e, r) => /* @__PURE__ */ o(
+      "li",
+      {
+        className: "h-6 min-w-0 flex-1",
+        style: { backgroundColor: e },
+        title: `${n} ${r + 1} · ${e}`
+      },
+      `${n}-${r}`
+    )) })
+  ] });
+}
+const Wn = [
+  { family: "accent", label: "Accent" },
+  { family: "secondary", label: "Secondary" },
+  { family: "success", label: "Success" },
+  { family: "danger", label: "Danger" },
+  { family: "warning", label: "Warning" }
+];
+function Kn(n, t) {
+  return n < t ? "fail" : n < t * 1.1 ? "tight" : "pass";
+}
+function W(n, t, e, r, a, c, d = !1) {
+  const p = ae(e, r);
+  return {
+    id: n,
+    label: t,
+    foreground: e,
+    background: r,
+    ratio: p,
+    min: a,
+    level: Kn(p, a),
+    advisory: d,
+    paths: c
+  };
+}
+function Jn(n, t, e) {
+  const r = z(t, "neutral"), a = r[0], c = r[1], d = r[11], p = r[10], m = r[5], y = e, f = Ve(n, e), h = Se(n, e), b = [
+    W("text-page", "Text on the page", d, a, 4.5, [
+      `${y}.text`,
+      `${y}.bg`
+    ]),
+    W("text-surface", "Text on a surface", d, c, 4.5, [
+      `${y}.text`,
+      `${y}.surface`
+    ]),
+    W("muted-page", "Muted text on the page", p, a, 4.5, [
+      `${y}.muted`,
+      `${y}.bg`
+    ]),
+    W("muted-surface", "Muted text on a surface", p, c, 4.5, [
+      `${y}.muted`,
+      `${y}.surface`
+    ])
+  ];
+  for (const { family: v, label: N } of Wn) {
+    const k = z(t, v);
+    b.push(
+      W(
+        `${v}-text`,
+        `${N} text on the page`,
+        k[10],
+        a,
+        4.5,
+        [`${f}.${v}`, `${y}.bg`]
+      )
+    );
+  }
+  const x = [
+    { family: "accent", on: "onAccent", label: "Label on a filled button" },
+    { family: "secondary", on: "onSecondary", label: "Label on a secondary button" },
+    { family: "danger", on: "onDanger", label: "Label on a danger button" }
+  ];
+  for (const { family: v, on: N, label: k } of x)
+    b.push(
+      W(`${N}-fill`, k, h[N], z(t, v)[8], 4.5, [
+        `${f}.${N}`,
+        `${f}.${v}`
+      ])
+    );
+  return b.push(
+    W(
+      "border-page",
+      "Border against the page",
+      m,
+      a,
+      1.15,
+      [`${y}.border`, `${y}.bg`],
+      !0
+    )
+  ), b;
+}
+function T(n, t) {
+  return n + Math.random() * (t - n);
+}
+function _e(n) {
+  return n[Math.floor(Math.random() * n.length)];
+}
+const Qn = [
+  { sm: 8, md: 12, lg: 20, xl: 28, full: 999 },
+  { sm: 6, md: 8, lg: 14, xl: 18, full: 999 },
+  { sm: 4, md: 6, lg: 10, xl: 14, full: 8 },
+  { sm: 2, md: 4, lg: 6, xl: 8, full: 4 },
+  { sm: 10, md: 16, lg: 24, xl: 32, full: 999 }
+];
+function Zn() {
+  const n = T(0, 360), t = _e([0.4, 0.8, 1.4, 2.2]), e = n + _e([-1, 1]) * T(110, 200), r = (b, x, v = n) => L({ l: b, c: x * t, h: v }), a = T(0.15, 0.21), c = {
+    bg: r(a, 0.011),
+    surface: r(a + 0.045, 0.014),
+    surfaceRaised: r(a + 0.062, 0.016),
+    surfaceHover: r(a + 0.125, 0.022),
+    border: r(a + 0.125, 0.024),
+    muted: r(T(0.62, 0.665), 8e-3),
+    text: r(T(0.9, 0.925), 8e-3)
+  }, d = T(0.95, 0.968), p = {
+    bg: r(d, 6e-3),
+    surface: r(T(0.995, 1), 1e-3),
+    surfaceRaised: r(d + 0.016, 4e-3),
+    surfaceHover: r(d - 0.035, 0.01),
+    border: r(T(0.878, 0.9), 0.014),
+    muted: r(T(0.46, 0.5), 0.014),
+    text: r(T(0.23, 0.27), 0.014)
+  }, m = L({ l: T(0.67, 0.74), c: T(0.13, 0.17), h: n }), y = L({
+    l: T(0.79, 0.85),
+    c: T(0.09, 0.13),
+    h: e
+  }), f = L({ l: T(0.67, 0.72), c: T(0.15, 0.19), h: T(18, 30) }), h = {
+    accent: m,
+    accentLight: He(m, 0.085),
+    secondary: y,
+    secondaryLight: He(y, 0.07),
+    success: L({ l: T(0.8, 0.85), c: T(0.15, 0.19), h: T(140, 156) }),
+    danger: f,
+    dangerLight: He(f, 0.08),
+    warning: L({ l: T(0.82, 0.86), c: T(0.14, 0.17), h: T(72, 90) }),
+    onAccent: "",
+    onSecondary: "",
+    onDanger: ""
+  };
+  return h.onAccent = Q(m), h.onSecondary = Q(y), h.onDanger = Q(f), {
+    hue: h,
+    // Generated themes keep one hue set. Splitting light off is a decision
+    // somebody makes about their own palette, not something to roll for them.
+    lightHue: null,
+    dark: c,
+    light: p,
+    radius: { ..._e(Qn) }
+  };
+}
+function He(n, t) {
+  const { l: e, c: r, h: a } = Ne(n);
+  return L({ l: Math.min(0.97, e + t), c: r * 0.85, h: a });
+}
+function Q(n) {
+  const { c: t, h: e } = Ne(n), r = L({ l: 0.17, c: Math.min(0.05, t * 0.3), h: e }), a = L({ l: 0.97, c: Math.min(0.03, t * 0.2), h: e }), c = ae(r, n) >= ae(a, n) ? r : a;
+  return ge(c, n, 7);
+}
+function ue(n) {
+  return {
+    ...n,
+    onAccent: Q(n.accent),
+    onSecondary: Q(n.secondary),
+    onDanger: Q(n.danger)
+  };
+}
+function re(n) {
+  const t = ue(n);
+  return t.onAccent === n.onAccent && t.onSecondary === n.onSecondary && t.onDanger === n.onDanger;
+}
+function ge(n, t, e) {
+  if (ae(n, t) >= e) return n;
+  const { l: r, c: a, h: c } = Ne(n), d = r >= Ne(t).l ? 1 : -1;
+  let p = r;
+  for (let m = 0; m < 120; m++) {
+    p = Math.min(1, Math.max(0, p + d * 8e-3));
+    const y = L({ l: p, c: a, h: c });
+    if (ae(y, t) >= e) return y;
+    if (p === 0 || p === 1) break;
+  }
+  return d === 1 ? "#ffffff" : "#000000";
+}
+function qn(n) {
+  const t = Gn(n);
+  for (const e of ["dark", "light"])
+    t[e].text = ge(
+      t[e].text,
+      t[e].bg,
+      7
+    ), t[e].text = ge(
+      t[e].text,
+      t[e].surface,
+      7
+    ), t[e].muted = ge(
+      t[e].muted,
+      t[e].bg,
+      4.5
+    ), t[e].muted = ge(
+      t[e].muted,
+      t[e].surface,
+      4.5
+    );
+  for (const e of [t.hue, t.lightHue])
+    if (e !== null)
+      for (const [r, a] of [
+        ["onAccent", "accent"],
+        ["onSecondary", "secondary"],
+        ["onDanger", "danger"]
+      ]) {
+        const c = e[a];
+        ae(e[r], c) < 7 && (e[r] = Q(c));
+      }
+  return t;
+}
+function eo(n) {
+  return n === "light" ? { ...Oe.color, ...or } : { ...Oe.color };
+}
+function to(n, t) {
+  const e = eo(t);
+  return Object.entries(Fn(n, t)).filter(
+    ([r, a]) => ye(a) !== ye(e[r] ?? "")
+  );
+}
+function ro(n) {
+  return Rt.filter(
+    (t) => n.radius[t] !== Oe.radius[t]
+  ).map((t) => [t, n.radius[t]]);
+}
+function ft(n, t) {
+  const e = [];
+  t === "light" && e.push('  appearance: "light",');
+  const r = to(n, t);
+  r.length > 0 && (e.push("  color: {"), r.forEach(([d, p], m) => {
+    const y = m === r.length - 1 ? "" : ",";
+    e.push(`    ${d}: "${ye(p)}"${y}`);
+  }), e.push("  },"));
+  const a = ro(n);
+  a.length > 0 && e.push(
+    `  radius: { ${a.map(([d, p]) => `${d}: ${p}`).join(", ")} }`
+  );
+  const c = e.length - 1;
+  return c >= 0 && (e[c] = e[c].replace(/,$/, "")), e.length === 0 ? "" : `{
+${e.join(`
+`)}
+}`;
+}
+function ns(n) {
+  const t = ft(n, "dark"), e = ft(n, "light");
+  return `import { createGrytTheme, GrytProvider } from "@gryt/ui";
+
+// One call per appearance. The scales are regenerated from these anchors, so
+// every component moves with them — not just the tokens named here.
+const dark = createGrytTheme(${t});
+
+const light = createGrytTheme(${e});
+
+export function App({ appearance }: { appearance: "dark" | "light" }) {
+  return (
+    <GrytProvider theme={appearance === "light" ? light : dark}>
+      {/* your app */}
+    </GrytProvider>
+  );
+}`;
+}
+function os(n) {
+  return JSON.stringify(n, null, 2);
+}
+function no(n) {
+  const t = n.trim();
+  if (t === "") return { error: "Nothing to import." };
+  const e = nr(t);
+  return e === null ? {
+    error: t.startsWith("{") ? "No theme in that JSON." : "No theme in that link."
+  } : { draft: e.theme, appearance: e.appearance };
+}
+const we = {
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+  full: 40
+}, je = 999, oo = [
+  "bg",
+  "surface",
+  "surfaceRaised",
+  "surfaceHover",
+  "border"
+], ao = ["text", "muted"];
+function as({
+  value: n,
+  onChange: t,
+  appearance: e,
+  onAppearanceChange: r,
+  remoteFontsAllowed: a = !0,
+  actions: c,
+  footer: d,
+  className: p
+}) {
+  const [m, y] = G(
+    () => re(n.hue) && (n.lightHue === null || re(n.lightHue))
+  ), [f, h] = G(null);
+  if (f !== null && f !== n) {
+    h(null);
+    const i = re(n.hue) && (n.lightHue === null || re(n.lightHue));
+    i !== m && y(i);
+  }
+  const [b, x] = G(""), [v, N] = G(null), k = me(() => zn(n, e), [n, e]), w = me(
+    () => Jn(n, k, e),
+    [n, k, e]
+  ), $ = me(() => {
+    const i = /* @__PURE__ */ new Map();
+    for (const g of w)
+      if (!(g.advisory || g.level !== "fail"))
+        for (const P of g.paths)
+          i.has(P) || i.set(P, `${g.label}: ${g.ratio.toFixed(1)}, needs ${g.min}`);
+    return i;
+  }, [w]), M = dt(n), F = tt.find((i) => dt(i.theme) === M)?.id ?? "custom", q = n[e], Ce = Ve(n, e), Ae = Se(n, e), Dt = w.filter(
+    (i) => !i.advisory && i.level === "fail"
+  ).length;
+  function be(i) {
+    h(i), t(i);
+  }
+  function U(i) {
+    const g = i(n);
+    be(
+      m ? {
+        ...g,
+        hue: ue(g.hue),
+        lightHue: g.lightHue === null ? null : ue(g.lightHue)
+      } : g
+    );
+  }
+  function Me(i) {
+    y(
+      re(i.hue) && (i.lightHue === null || re(i.lightHue))
+    ), be(i);
+  }
+  function Re(i, g) {
+    U((P) => {
+      const Ie = Ve(P, e);
+      return {
+        ...P,
+        [Ie]: { ...Se(P, e), [i]: g }
+      };
+    });
+  }
+  function Gt(i) {
+    U((g) => ({
+      ...g,
+      lightHue: i ? { ...g.hue } : null
+    }));
+  }
+  function Ft(i) {
+    y(i), i && be({
+      ...n,
+      hue: ue(n.hue),
+      lightHue: n.lightHue === null ? null : ue(n.lightHue)
+    });
+  }
+  function Qe(i, g) {
+    U((P) => ({
+      ...P,
+      [e]: { ...P[e], [i]: g }
+    }));
+  }
+  function zt(i) {
+    U((g) => ({ ...g, name: i === "" ? void 0 : i }));
+  }
+  function Bt(i, g) {
+    U((P) => ({
+      ...P,
+      fonts: { ...P.fonts ?? vt, [i]: g }
+    }));
+  }
+  function Et(i) {
+    U((g) => ({ ...g, motion: i }));
+  }
+  function _t(i, g) {
+    U((P) => ({
+      ...P,
+      radius: { ...P.radius, [i]: g }
+    }));
+  }
+  function Ht(i) {
+    const g = no(i);
+    if (g.error !== void 0 || g.draft === void 0) {
+      N(g.error ?? "That did not look like a theme.");
+      return;
+    }
+    Me(g.draft), g.appearance !== void 0 && r(g.appearance), N(null), x("");
+  }
+  return /* @__PURE__ */ u("div", { className: s("flex min-w-0 flex-col gap-(--space-md)", p), children: [
+    /* @__PURE__ */ u("div", { className: "flex flex-wrap items-end gap-3 border-y border-gryt-border py-3", children: [
+      /* @__PURE__ */ o("div", { className: "w-52", children: /* @__PURE__ */ o(
+        Je,
+        {
+          label: "Preset",
+          onValueChange: (i) => {
+            const g = ar.get(String(i));
+            g && Me(g.theme);
+          },
+          options: [
+            ...tt.map((i) => ({
+              label: i.name,
+              value: i.id
+            })),
+            ...F === "custom" ? [{ label: "Custom", value: "custom" }] : []
+          ],
+          size: "small",
+          value: F
+        }
+      ) }),
+      /* @__PURE__ */ o("div", { className: "w-48", children: /* @__PURE__ */ o(
+        Ke,
+        {
+          label: "Name",
+          maxLength: sr,
+          onChange: (i) => zt(i.target.value),
+          placeholder: "Untitled theme",
+          size: "small",
+          value: n.name ?? ""
+        }
+      ) }),
+      /* @__PURE__ */ u(Te, { onClick: () => Me(Zn()), size: "small", tone: "neutral", children: [
+        /* @__PURE__ */ o(pr, { "aria-hidden": "true", size: 15 }),
+        "Generate"
+      ] }),
+      /* @__PURE__ */ u("div", { className: "ml-auto flex items-end gap-3", children: [
+        /* @__PURE__ */ u(
+          Dn,
+          {
+            "aria-label": "Appearance",
+            onValueChange: (i) => {
+              const g = i[i.length - 1];
+              (g === "dark" || g === "light") && r(g);
+            },
+            value: [e],
+            children: [
+              /* @__PURE__ */ o(ct, { size: "small", value: "dark", children: "Dark" }),
+              /* @__PURE__ */ o(ct, { size: "small", value: "light", children: "Light" })
+            ]
+          }
+        ),
+        c
+      ] })
+    ] }),
+    /* @__PURE__ */ u("p", { className: "m-0 text-xs text-gryt-muted", children: [
+      "Editing the ",
+      e,
+      " half. The neutrals below belong to it",
+      n.lightHue === null ? "; the hues are shared, because step 9 is the same colour in both." : " and so do the hues."
+    ] }),
+    /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: [
+      e === "light" ? /* @__PURE__ */ u("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-gryt-muted", children: [
+        /* @__PURE__ */ o(
+          it,
+          {
+            checked: n.lightHue !== null,
+            onCheckedChange: Gt
+          }
+        ),
+        "Light has its own hues"
+      ] }) : null,
+      /* @__PURE__ */ u("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-gryt-muted", children: [
+        /* @__PURE__ */ o(it, { checked: m, onCheckedChange: Ft }),
+        "Pick label colours automatically"
+      ] })
+    ] }),
+    /* @__PURE__ */ u("div", { className: "flex flex-col gap-(--space-md)", children: [
+      /* @__PURE__ */ u(H, { title: "Surfaces", children: [
+        oo.map((i) => /* @__PURE__ */ o(
+          de,
+          {
+            label: ut[i],
+            onChange: (g) => Qe(i, g),
+            value: q[i],
+            warning: $.get(`${e}.${i}`)
+          },
+          i
+        )),
+        /* @__PURE__ */ o(te, { label: "neutral", steps: z(k, "neutral") })
+      ] }),
+      /* @__PURE__ */ o(H, { title: "Text", children: ao.map((i) => /* @__PURE__ */ o(
+        de,
+        {
+          label: ut[i],
+          onChange: (g) => Qe(i, g),
+          value: q[i],
+          warning: $.get(`${e}.${i}`)
+        },
+        i
+      )) }),
+      /* @__PURE__ */ u(H, { title: "Accent", children: [
+        ["accent", "accentLight", "onAccent"].map((i) => /* @__PURE__ */ o(
+          de,
+          {
+            disabled: m && i === "onAccent",
+            label: Fe[i],
+            onChange: (g) => Re(i, g),
+            value: Ae[i],
+            warning: $.get(`${Ce}.${i}`)
+          },
+          i
+        )),
+        /* @__PURE__ */ o(te, { label: "accent", steps: z(k, "accent") })
+      ] }),
+      /* @__PURE__ */ u(H, { title: "Secondary", children: [
+        ["secondary", "secondaryLight", "onSecondary"].map(
+          (i) => /* @__PURE__ */ o(
+            de,
+            {
+              disabled: m && i === "onSecondary",
+              label: Fe[i],
+              onChange: (g) => Re(i, g),
+              value: Ae[i],
+              warning: $.get(`${Ce}.${i}`)
+            },
+            i
+          )
+        ),
+        /* @__PURE__ */ o(te, { label: "secondary", steps: z(k, "secondary") })
+      ] }),
+      /* @__PURE__ */ u(H, { title: "Status", children: [
+        [
+          "success",
+          "danger",
+          "dangerLight",
+          "onDanger",
+          "warning"
+        ].map((i) => /* @__PURE__ */ o(
+          de,
+          {
+            disabled: m && i === "onDanger",
+            label: Fe[i],
+            onChange: (g) => Re(i, g),
+            value: Ae[i],
+            warning: $.get(`${Ce}.${i}`)
+          },
+          i
+        )),
+        /* @__PURE__ */ o(te, { label: "success", steps: z(k, "success") }),
+        /* @__PURE__ */ o(te, { label: "danger", steps: z(k, "danger") }),
+        /* @__PURE__ */ o(te, { label: "warning", steps: z(k, "warning") })
+      ] }),
+      /* @__PURE__ */ o(H, { title: "Type", children: ir.map((i) => /* @__PURE__ */ o(
+        On,
+        {
+          fonts: n.fonts,
+          onChange: (g) => Bt(i, g),
+          remoteAllowed: a,
+          role: i
+        },
+        i
+      )) }),
+      /* @__PURE__ */ o(H, { title: "Motion", children: /* @__PURE__ */ o(Yn, { motion: n.motion, onChange: Et }) }),
+      /* @__PURE__ */ o(H, { title: "Radius", children: Rt.map((i) => {
+        const g = n.radius[i], P = i === "full" && g >= je ? we.full : g;
+        return /* @__PURE__ */ u("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ u("div", { className: "mb-1 flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ o("span", { className: "text-xs font-medium text-gryt-muted", children: gt[i] }),
+            /* @__PURE__ */ o("span", { className: "font-mono text-[11px] text-gryt-muted", children: g >= je ? "pill" : `${g}px` })
+          ] }),
+          /* @__PURE__ */ o(
+            At,
+            {
+              "aria-label": `${gt[i]} radius`,
+              max: we[i],
+              min: 0,
+              onValueChange: (Ie) => {
+                const Ze = Number(Ie);
+                _t(
+                  i,
+                  i === "full" && Ze >= we.full ? je : Ze
+                );
+              },
+              value: Math.min(P, we[i])
+            }
+          ),
+          /* @__PURE__ */ o("p", { className: "m-0 pt-1 text-[11px] text-gryt-muted", children: Bn[i] })
+        ] }, i);
+      }) }),
+      /* @__PURE__ */ o(
+        Xn,
+        {
+          checks: w,
+          onRepair: Dt > 0 ? () => be(qn(n)) : void 0
+        }
+      ),
+      /* @__PURE__ */ u("section", { className: "min-w-0", children: [
+        /* @__PURE__ */ o("h2", { className: "m-0 pb-2 text-[11px] font-semibold uppercase tracking-wider text-gryt-muted", children: "Load one back" }),
+        /* @__PURE__ */ o("p", { className: "m-0 pb-2 text-sm text-gryt-muted", children: "Paste a theme’s JSON, or a link somebody sent you." }),
+        /* @__PURE__ */ u("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+          /* @__PURE__ */ o(
+            "textarea",
+            {
+              "aria-label": "Theme JSON or a shared link",
+              className: "min-h-11 flex-1 rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface-raised px-4 py-2.5 font-mono text-sm text-gryt-text outline-none placeholder:text-gryt-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light",
+              onChange: (i) => x(i.target.value),
+              placeholder: "{ …",
+              rows: 2,
+              spellCheck: !1,
+              value: b
+            }
+          ),
+          /* @__PURE__ */ o(Te, { onClick: () => Ht(b), tone: "neutral", children: "Load" })
+        ] }),
+        v ? /* @__PURE__ */ o("p", { className: "m-0 pt-2 text-sm text-gryt-danger-11", children: v }) : null
+      ] }),
+      d
+    ] })
+  ] });
+}
+function H({ title: n, children: t }) {
+  return /* @__PURE__ */ u("section", { className: "min-w-0", children: [
+    /* @__PURE__ */ o("h2", { className: "m-0 pb-2 text-[11px] font-semibold uppercase tracking-wider text-gryt-muted", children: n }),
+    /* @__PURE__ */ o("div", { className: "flex flex-col gap-3", children: t })
+  ] });
+}
+const so = {
   primary: "bg-gryt-accent",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning",
   danger: "bg-gryt-danger"
 };
-function qo({
-  className: a,
+function ss({
+  className: n,
   value: t,
   label: e,
   showValue: r = !1,
-  tone: i = "primary",
+  tone: a = "primary",
   ...c
 }) {
-  return /* @__PURE__ */ g(
-    B.Root,
+  return /* @__PURE__ */ u(
+    ce.Root,
     {
       value: t,
-      className: n("gryt-meter flex w-full flex-col gap-1.5", a),
+      className: s("gryt-meter flex w-full flex-col gap-1.5", n),
       ...c,
       children: [
-        (e || r) && /* @__PURE__ */ g("div", { className: "flex items-baseline justify-between gap-2", children: [
-          e ? /* @__PURE__ */ o(B.Label, { className: "text-sm text-gryt-muted", children: e }) : /* @__PURE__ */ o("span", {}),
-          r && /* @__PURE__ */ o(B.Value, { className: "font-mono text-xs text-gryt-muted tabular-nums" })
+        (e || r) && /* @__PURE__ */ u("div", { className: "flex items-baseline justify-between gap-2", children: [
+          e ? /* @__PURE__ */ o(ce.Label, { className: "text-sm text-gryt-muted", children: e }) : /* @__PURE__ */ o("span", {}),
+          r && /* @__PURE__ */ o(ce.Value, { className: "font-mono text-xs text-gryt-muted tabular-nums" })
         ] }),
-        /* @__PURE__ */ o(B.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-          B.Indicator,
+        /* @__PURE__ */ o(ce.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
+          ce.Indicator,
           {
-            className: n(
+            className: s(
               "h-full rounded-(--gryt-radius-full)",
               "transition-[width] duration-120 ease-out motion-reduce:transition-none",
-              Ze[i]
+              so[a]
             )
           }
         ) })
@@ -1839,13 +3011,13 @@ function qo({
     }
   );
 }
-const Je = s(
+const io = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      S.Popup,
+      V.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-alert-dialog fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
           "flex w-[32rem] max-w-[calc(100vw-3rem)] flex-col gap-4",
           "rounded-(--gryt-radius-lg) border border-gryt-border bg-gryt-surface p-5 text-gryt-text",
@@ -1859,12 +3031,12 @@ const Je = s(
       }
     );
   }
-), qe = s(function({ className: t, ...e }, r) {
+), lo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    S.Backdrop,
+    V.Backdrop,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-alert-dialog-backdrop fixed inset-0 z-50 min-h-dvh bg-black/60",
         "backdrop-blur-(--gryt-backdrop-blur)",
         "transition-opacity duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
@@ -1874,40 +3046,40 @@ const Je = s(
       ...e
     }
   );
-}), tr = s(function({ className: t, ...e }, r) {
+}), co = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    S.Title,
+    V.Title,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-alert-dialog-title text-lg font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), er = s(function({ className: t, ...e }, r) {
+}), uo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    S.Description,
+    V.Description,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-alert-dialog-description text-sm leading-6 text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), ta = {
-  Root: S.Root,
-  Trigger: S.Trigger,
-  Portal: S.Portal,
-  Backdrop: qe,
-  Popup: Je,
-  Title: tr,
-  Description: er,
-  Close: S.Close
-}, ht = [
+}), is = {
+  Root: V.Root,
+  Trigger: V.Trigger,
+  Portal: V.Portal,
+  Backdrop: lo,
+  Popup: io,
+  Title: co,
+  Description: uo,
+  Close: V.Close
+}, It = [
   "flex cursor-default items-center gap-2 rounded-(--gryt-radius-md)",
   "px-3 py-2 text-sm text-gryt-text outline-none select-none",
   // Base UI drives keyboard and pointer highlight through one attribute, so
@@ -1915,195 +3087,195 @@ const Je = s(
   "data-highlighted:bg-gryt-surface-raised",
   "data-selected:text-gryt-accent-11",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
-].join(" "), wt = [
-  pt,
-  bt.medium,
+].join(" "), Lt = [
+  kt,
+  Pt.medium,
   "border-gryt-border",
-  f
-].join(" "), rr = s(function({ className: t, ...e }, r) {
+  A
+].join(" "), go = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Input,
+    S.Input,
     {
       ref: r,
-      className: n("gryt-combobox-input", wt, t),
+      className: s("gryt-combobox-input", Lt, t),
       ...e
     }
   );
-}), or = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
+}), mo = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
   return /* @__PURE__ */ o(
-    u.Positioner,
+    S.Positioner,
     {
-      ref: i,
+      ref: a,
       sideOffset: e,
-      className: n("gryt-combobox-positioner outline-none", t),
+      className: s("gryt-combobox-positioner outline-none", t),
       ...r
     }
   );
-}), ar = s(
+}), po = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      u.Popup,
+      S.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-combobox max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-          D,
-          $,
+          Z,
+          Y,
           t
         ),
         ...e
       }
     );
   }
-), nr = s(function({ className: t, ...e }, r) {
+), yo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Item,
+    S.Item,
     {
       ref: r,
-      className: n("gryt-combobox-item", ht, t),
+      className: s("gryt-combobox-item", It, t),
       ...e
     }
   );
-}), ir = s(function({ className: t, ...e }, r) {
+}), fo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Empty,
+    S.Empty,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-combobox-empty px-3 py-2 text-sm text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), ea = {
-  Root: u.Root,
-  Input: rr,
-  InputGroup: u.InputGroup,
-  Trigger: u.Trigger,
-  Icon: u.Icon,
-  Clear: u.Clear,
-  Value: u.Value,
-  Chips: u.Chips,
-  Chip: u.Chip,
-  ChipRemove: u.ChipRemove,
-  Portal: u.Portal,
-  Positioner: or,
-  Popup: ar,
-  List: u.List,
-  Item: nr,
-  ItemIndicator: u.ItemIndicator,
-  Group: u.Group,
-  GroupLabel: u.GroupLabel,
-  Empty: ir,
-  Separator: u.Separator
-}, sr = s(function({ className: t, ...e }, r) {
+}), ls = {
+  Root: S.Root,
+  Input: go,
+  InputGroup: S.InputGroup,
+  Trigger: S.Trigger,
+  Icon: S.Icon,
+  Clear: S.Clear,
+  Value: S.Value,
+  Chips: S.Chips,
+  Chip: S.Chip,
+  ChipRemove: S.ChipRemove,
+  Portal: S.Portal,
+  Positioner: mo,
+  Popup: po,
+  List: S.List,
+  Item: yo,
+  ItemIndicator: S.ItemIndicator,
+  Group: S.Group,
+  GroupLabel: S.GroupLabel,
+  Empty: fo,
+  Separator: S.Separator
+}, ho = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    p.Input,
+    C.Input,
     {
       ref: r,
-      className: n("gryt-autocomplete-input", wt, t),
+      className: s("gryt-autocomplete-input", Lt, t),
       ...e
     }
   );
-}), cr = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
+}), bo = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
   return /* @__PURE__ */ o(
-    p.Positioner,
+    C.Positioner,
     {
-      ref: i,
+      ref: a,
       sideOffset: e,
-      className: n("gryt-autocomplete-positioner outline-none", t),
+      className: s("gryt-autocomplete-positioner outline-none", t),
       ...r
     }
   );
-}), lr = s(function({ className: t, ...e }, r) {
+}), xo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    p.Popup,
+    C.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-autocomplete max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-        D,
-        $,
+        Z,
+        Y,
         t
       ),
       ...e
     }
   );
-}), dr = s(function({ className: t, ...e }, r) {
+}), vo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    p.Item,
+    C.Item,
     {
       ref: r,
-      className: n("gryt-autocomplete-item", ht, t),
+      className: s("gryt-autocomplete-item", It, t),
       ...e
     }
   );
-}), gr = s(function({ className: t, ...e }, r) {
+}), wo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    p.Empty,
+    C.Empty,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-autocomplete-empty px-3 py-2 text-sm text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), ra = {
-  Root: p.Root,
-  Input: sr,
-  InputGroup: p.InputGroup,
-  Trigger: p.Trigger,
-  Icon: p.Icon,
-  Clear: p.Clear,
-  Value: p.Value,
-  Portal: p.Portal,
-  Positioner: cr,
-  Popup: lr,
-  List: p.List,
-  Item: dr,
-  Group: p.Group,
-  GroupLabel: p.GroupLabel,
-  Empty: gr,
-  Separator: p.Separator
-}, oa = s(
+}), cs = {
+  Root: C.Root,
+  Input: ho,
+  InputGroup: C.InputGroup,
+  Trigger: C.Trigger,
+  Icon: C.Icon,
+  Clear: C.Clear,
+  Value: C.Value,
+  Portal: C.Portal,
+  Positioner: bo,
+  Popup: xo,
+  List: C.List,
+  Item: vo,
+  Group: C.Group,
+  GroupLabel: C.GroupLabel,
+  Empty: wo,
+  Separator: C.Separator
+}, ds = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Et,
+      Tr,
       {
         ref: r,
-        className: n("gryt-checkbox-group flex flex-col gap-2", t),
+        className: s("gryt-checkbox-group flex flex-col gap-2", t),
         ...e
       }
     );
   }
-), ur = s(
+), No = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Z.Trigger,
+      We.Trigger,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-collapsible-trigger flex w-full items-center justify-between gap-2",
           "rounded-(--gryt-radius-md) border-0 bg-transparent px-2 py-2 text-left",
           "text-sm font-medium text-gryt-text select-none",
           "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-          f,
+          A,
           t
         ),
         ...e
       }
     );
   }
-), yr = s(
+), To = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Z.Panel,
+      We.Panel,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-collapsible-panel overflow-hidden",
           // Base UI measures the panel and exposes the height as a variable, so
           // this animates to the content's real height rather than to a guess.
@@ -2116,26 +3288,26 @@ const Je = s(
       }
     );
   }
-), aa = {
-  Root: Z.Root,
-  Trigger: ur,
-  Panel: yr
-}, na = s(function({ className: t, ...e }, r) {
+), us = {
+  Root: We.Root,
+  Trigger: No,
+  Panel: To
+}, gs = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    Vt,
+    Sr,
     {
       ref: r,
-      className: n("gryt-form flex flex-col gap-(--gryt-space-lg)", t),
+      className: s("gryt-form flex flex-col gap-(--gryt-space-lg)", t),
       ...e
     }
   );
-}), mr = s(
+}), So = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      ut.Root,
+      Tt.Root,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-fieldset flex min-w-0 flex-col gap-3 border-0 p-0",
           t
         ),
@@ -2143,25 +3315,25 @@ const Je = s(
       }
     );
   }
-), pr = s(function({ className: t, ...e }, r) {
+), $o = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    ut.Legend,
+    Tt.Legend,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-fieldset-legend text-sm font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), ia = { Root: mr, Legend: pr }, sa = s(
+}), ms = { Root: So, Legend: $o }, ps = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      _t,
+      $r,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-menubar flex items-center gap-1",
           "rounded-(--gryt-radius-md) border border-gryt-border bg-gryt-surface p-1",
           t
@@ -2170,132 +3342,132 @@ const Je = s(
       }
     );
   }
-), br = s(function({ className: t, ...e }, r) {
+), ko = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Trigger,
+    I.Trigger,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-trigger flex items-center gap-1.5 rounded-(--gryt-radius-md)",
         "border-0 bg-transparent px-3 py-2 text-sm font-medium text-gryt-text select-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
         "data-popup-open:bg-gryt-surface-raised",
-        f,
+        A,
         t
       ),
       ...e
     }
   );
-}), fr = s(function({ className: t, ...e }, r) {
+}), Po = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Popup,
+    I.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-popup outline-none",
-        D,
-        $,
+        Z,
+        Y,
         t
       ),
       ...e
     }
   );
-}), xr = s(function({ className: t, ...e }, r) {
+}), Co = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Positioner,
+    I.Positioner,
     {
       ref: r,
-      className: n("gryt-navigation-menu-positioner outline-none", t),
+      className: s("gryt-navigation-menu-positioner outline-none", t),
       ...e
     }
   );
-}), hr = s(function({ className: t, ...e }, r) {
+}), Ao = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Viewport,
+    I.Viewport,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-viewport relative overflow-hidden",
         t
       ),
       ...e
     }
   );
-}), wr = s(function({ className: t, ...e }, r) {
+}), Mo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Link,
+    I.Link,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-link block rounded-(--gryt-radius-md) px-3 py-2",
         "text-sm text-gryt-text no-underline outline-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-        f,
+        A,
         t
       ),
       ...e
     }
   );
-}), ca = {
-  Root: w.Root,
-  List: w.List,
-  Item: w.Item,
-  Trigger: br,
-  Content: w.Content,
-  Portal: w.Portal,
-  Positioner: xr,
-  Viewport: hr,
-  Popup: fr,
-  Link: wr,
-  Icon: w.Icon,
-  Arrow: w.Arrow
-}, st = "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-transparent text-gryt-muted transition-colors hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50", la = s(
-  function({ className: t, label: e, scrubbable: r = !1, ...i }, c) {
-    return /* @__PURE__ */ g(
-      R.Root,
+}), ys = {
+  Root: I.Root,
+  List: I.List,
+  Item: I.Item,
+  Trigger: ko,
+  Content: I.Content,
+  Portal: I.Portal,
+  Positioner: Co,
+  Viewport: Ao,
+  Popup: Po,
+  Link: Mo,
+  Icon: I.Icon,
+  Arrow: I.Arrow
+}, ht = "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-transparent text-gryt-muted transition-colors hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50", fs = l(
+  function({ className: t, label: e, scrubbable: r = !1, ...a }, c) {
+    return /* @__PURE__ */ u(
+      X.Root,
       {
         ref: c,
-        className: n("gryt-number-field flex flex-col gap-1.5", t),
-        ...i,
+        className: s("gryt-number-field flex flex-col gap-1.5", t),
+        ...a,
         children: [
-          e && (r ? /* @__PURE__ */ g(R.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
+          e && (r ? /* @__PURE__ */ u(X.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
             e,
-            /* @__PURE__ */ o(R.ScrubAreaCursor, {})
+            /* @__PURE__ */ o(X.ScrubAreaCursor, {})
           ] }) : /* @__PURE__ */ o("span", { className: "text-sm text-gryt-muted", children: e })),
-          /* @__PURE__ */ g(
-            R.Group,
+          /* @__PURE__ */ u(
+            X.Group,
             {
-              className: n(
+              className: s(
                 "flex w-fit items-center overflow-hidden rounded-(--gryt-radius-full)",
                 "border border-gryt-border bg-gryt-surface-raised",
                 "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-gryt-accent-light",
-                j
+                ie
               ),
               children: [
                 /* @__PURE__ */ o(
-                  R.Decrement,
+                  X.Decrement,
                   {
                     "aria-label": "Decrease",
-                    className: n(st, "rounded-l-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Dt, { size: 14, weight: "bold" })
+                    className: s(ht, "rounded-l-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(yr, { size: 14, weight: "bold" })
                   }
                 ),
                 /* @__PURE__ */ o(
-                  R.Input,
+                  X.Input,
                   {
-                    className: n(
+                    className: s(
                       "w-16 border-0 bg-transparent px-1 py-2 text-center",
                       "font-mono text-sm text-gryt-text tabular-nums outline-none",
-                      f
+                      A
                     )
                   }
                 ),
                 /* @__PURE__ */ o(
-                  R.Increment,
+                  X.Increment,
                   {
                     "aria-label": "Increase",
-                    className: n(st, "rounded-r-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Mt, { size: 14, weight: "bold" })
+                    className: s(ht, "rounded-r-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(fr, { size: 14, weight: "bold" })
                   }
                 )
               ]
@@ -2305,73 +3477,73 @@ const Je = s(
       }
     );
   }
-), da = s(
-  function({ className: t, length: e = 6, ...r }, i) {
+), hs = l(
+  function({ className: t, length: e = 6, ...r }, a) {
     return /* @__PURE__ */ o(
       at.Root,
       {
-        ref: i,
+        ref: a,
         length: e,
-        className: n("gryt-otp-field flex gap-2", t),
+        className: s("gryt-otp-field flex gap-2", t),
         ...r,
-        children: Array.from({ length: e }, (c, l) => /* @__PURE__ */ o(
+        children: Array.from({ length: e }, (c, d) => /* @__PURE__ */ o(
           at.Input,
           {
-            className: n(
+            className: s(
               "gryt-otp-input h-12 w-10 rounded-(--gryt-radius-md) text-center",
               "border border-gryt-border bg-gryt-surface-raised",
               "font-mono text-lg text-gryt-text tabular-nums outline-none",
               "transition-colors duration-(--gryt-dur-fast) motion-reduce:transition-none",
               "data-filled:border-gryt-accent",
-              f
+              A
             )
           },
-          l
+          d
         ))
       }
     );
   }
-), vr = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+), Ro = l(
+  function({ className: t, sideOffset: e = 8, ...r }, a) {
     return /* @__PURE__ */ o(
-      M.Positioner,
+      ne.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-preview-card-positioner outline-none", t),
+        className: s("gryt-preview-card-positioner outline-none", t),
         ...r
       }
     );
   }
-), Nr = s(
+), Io = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      M.Popup,
+      ne.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-preview-card w-64 max-w-[calc(100vw-2rem)] p-4 outline-none",
-          D,
-          $,
+          Z,
+          Y,
           t
         ),
         ...e
       }
     );
   }
-), ga = {
-  Root: M.Root,
-  Trigger: M.Trigger,
-  Portal: M.Portal,
-  Positioner: vr,
-  Popup: Nr,
-  Arrow: M.Arrow
-}, Pr = s(function({ className: t, ...e }, r) {
+), bs = {
+  Root: ne.Root,
+  Trigger: ne.Trigger,
+  Portal: ne.Portal,
+  Positioner: Ro,
+  Popup: Io,
+  Arrow: ne.Arrow
+}, Lo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    G.Root,
+    oe.Root,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toolbar flex items-center gap-1",
         "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface p-1",
         t
@@ -2379,113 +3551,130 @@ const Je = s(
       ...e
     }
   );
-}), Tr = s(function({ className: t, ...e }, r) {
+}), Do = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    G.Separator,
+    oe.Separator,
     {
       ref: r,
-      className: n("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", t),
+      className: s("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", t),
       ...e
     }
   );
-}), ua = {
-  Root: Pr,
-  Group: G.Group,
-  Button: G.Button,
-  Link: G.Link,
-  Input: G.Input,
-  Separator: Tr
+}), xs = {
+  Root: Lo,
+  Group: oe.Group,
+  Button: oe.Button,
+  Link: oe.Link,
+  Input: oe.Input,
+  Separator: Do
 };
 export {
-  Oo as Accordion,
-  Bo as Alert,
-  ta as AlertDialog,
-  ra as Autocomplete,
-  te as Avatar,
-  Po as Badge,
-  Xt as Button,
-  Go as Card,
-  zo as CardActions,
-  jo as CardContent,
-  Lo as CardHeader,
-  ko as Checkbox,
-  oa as CheckboxGroup,
-  To as Chip,
-  aa as Collapsible,
-  ea as Combobox,
-  vo as Composer,
-  Xo as ContextMenu,
-  No as ConversationItem,
-  _o as Dialog,
-  Mo as Divider,
-  Yo as Drawer,
-  ia as Fieldset,
-  na as Form,
-  pa as GRYT_HUE_KEYS,
-  ba as GRYT_NEUTRAL_KEYS,
-  fa as GRYT_RADIUS_KEYS,
-  xa as GRYT_THEME_NAME_MAX,
-  bo as GrytProvider,
-  fo as IconButton,
-  K as Menu,
-  sa as Menubar,
-  ho as MessageBubble,
-  qo as Meter,
-  ca as NavigationMenu,
-  la as NumberField,
-  da as OtpField,
-  Uo as Popover,
-  ga as PreviewCard,
-  Fo as Progress,
-  Co as Radio,
-  So as RadioGroup,
-  Qo as ScrollArea,
-  Io as Select,
-  Vo as Skeleton,
-  Ro as Slider,
-  Eo as Spinner,
-  xo as Surface,
-  $o as Switch,
-  Se as Tab,
-  Ho as Tabs,
-  wo as TextField,
-  Ko as Toast,
-  Zo as Toggle,
-  Jo as ToggleGroup,
-  ua as Toolbar,
-  Ao as Tooltip,
-  Do as TooltipProvider,
-  ha as alphaScale,
-  Ka as avatarSeed,
-  wa as cloneGrytTheme,
-  n as cn,
-  va as contrast,
-  Na as createGrytTheme,
-  Pa as decodeGrytTheme,
-  Ta as encodeGrytTheme,
-  ka as grytAlphaScales,
-  Ca as grytAlphaScalesLight,
-  Sa as grytLightTokens,
-  $a as grytPresets,
-  Ra as grytPresetsById,
-  Ia as grytScales,
-  Aa as grytScalesLight,
-  Da as grytTheme,
-  Ma as grytThemeHues,
-  Ga as grytThemeToOptions,
-  La as grytTokens,
-  ja as hexToOklch,
-  za as hexToRgb,
-  Ba as hueScale,
-  Fa as hueScaleLight,
-  Ea as isHexColor,
-  Va as neutralScale,
-  _a as neutralScaleLight,
-  Ya as normalizeHexColor,
-  Ha as normalizeThemeName,
-  Oa as oklchToHex,
-  Xa as rgbToHex,
-  ge as useMediaQuery,
-  Wo as useToastManager
+  Ja as Accordion,
+  Oa as Alert,
+  is as AlertDialog,
+  cs as Autocomplete,
+  Fr as Avatar,
+  Ra as Badge,
+  Te as Button,
+  Ea as Card,
+  ja as CardActions,
+  Ha as CardContent,
+  _a as CardHeader,
+  it as Checkbox,
+  ds as CheckboxGroup,
+  Ia as Chip,
+  us as Collapsible,
+  ls as Combobox,
+  Aa as Composer,
+  Qa as ContextMenu,
+  Ma as ConversationItem,
+  Xa as Dialog,
+  Ba as Divider,
+  Wa as Drawer,
+  ms as Fieldset,
+  gs as Form,
+  Ns as GRYT_FONT_KEYS,
+  Ts as GRYT_FONT_STACK_MAX,
+  Ss as GRYT_HUE_KEYS,
+  $s as GRYT_MOTION_CURVES,
+  ks as GRYT_MOTION_SCALE_MAX,
+  Ps as GRYT_NEUTRAL_KEYS,
+  Cs as GRYT_RADIUS_KEYS,
+  As as GRYT_THEME_NAME_MAX,
+  $a as GrytProvider,
+  ka as IconButton,
+  Ge as Menu,
+  ps as Menubar,
+  Ca as MessageBubble,
+  ss as Meter,
+  ys as NavigationMenu,
+  fs as NumberField,
+  hs as OtpField,
+  Za as Popover,
+  bs as PreviewCard,
+  Va as Progress,
+  La as Radio,
+  Da as RadioGroup,
+  ts as ScrollArea,
+  Je as Select,
+  Ua as Skeleton,
+  At as Slider,
+  Ya as Spinner,
+  Pa as Surface,
+  Ga as Switch,
+  dn as Tab,
+  Ka as Tabs,
+  Ke as TextField,
+  as as ThemeEditor,
+  qa as Toast,
+  ct as Toggle,
+  Dn as ToggleGroup,
+  xs as Toolbar,
+  Fa as Tooltip,
+  za as TooltipProvider,
+  Ms as alphaScale,
+  ui as avatarSeed,
+  Gn as cloneDraft,
+  Rs as cloneGrytTheme,
+  s as cn,
+  Is as contrast,
+  Ls as createGrytTheme,
+  Ds as decodeGrytTheme,
+  Gs as encodeDraft,
+  Fs as encodeGrytTheme,
+  zs as grytAlphaScales,
+  Bs as grytAlphaScalesLight,
+  rs as grytDraft,
+  Es as grytFonts,
+  _s as grytLightTokens,
+  Hs as grytMotion,
+  js as grytPresets,
+  Os as grytPresetsById,
+  Vs as grytScales,
+  Ys as grytScalesLight,
+  Us as grytTheme,
+  Xs as grytThemeHues,
+  Ws as grytThemeToOptions,
+  Ks as grytTokens,
+  Js as hexToOklch,
+  Qs as hexToRgb,
+  Zs as hueScale,
+  qs as hueScaleLight,
+  no as importTheme,
+  ei as isBezier,
+  ti as isFontStack,
+  ri as isHexColor,
+  ni as isValidBezier,
+  oi as neutralScale,
+  ai as neutralScaleLight,
+  si as normalizeHexColor,
+  ii as normalizeThemeName,
+  li as oklchToHex,
+  ci as rgbToHex,
+  ns as themeCode,
+  os as themeJson,
+  zn as themeStyle,
+  Xr as useMediaQuery,
+  es as useToastManager
 };
 //# sourceMappingURL=index.js.map