@gryt/ui 0.23.0 → 0.24.0

package/dist/index.js

@@ -1,100 +1,100 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { Tooltip as F } from "@base-ui/react/tooltip";
-import { createContext as ne, useContext as ht, useRef as Mt, forwardRef as l, useCallback as It, useLayoutEffect as Se, useMemo as it, useState as _, useEffect as $e, useSyncExternalStore as Ce, useId as ke } from "react";
-import { createGrytTheme as oe, grytTheme as Re, GRYT_RADIUS_KEYS as Ae, grytThemeToOptions as Ie, grytThemeHues as De, normalizeHexColor as lt, isHexColor as Le, contrast as Q, oklchToHex as A, hexToOklch as pt, decodeGrytTheme as Me, grytTokens as Dt, grytLightTokens as Ge, grytPresets as _t, grytPresetsById as je, GRYT_THEME_NAME_MAX as Ee } from "@gryt/theme";
-import { GRYT_HUE_KEYS as Xa, GRYT_NEUTRAL_KEYS as Ka, GRYT_RADIUS_KEYS as Wa, GRYT_THEME_NAME_MAX as Ja, alphaScale as Qa, cloneGrytTheme as Za, contrast as qa, createGrytTheme as ts, decodeGrytTheme as es, encodeGrytTheme as rs, encodeGrytTheme as ns, grytAlphaScales as os, grytAlphaScalesLight as as, grytLightTokens as ss, grytPresets as is, grytPresetsById as ls, grytScales as cs, grytScalesLight as ds, grytTheme as us, grytThemeHues as gs, grytThemeToOptions as ms, grytTokens as ps, hexToOklch as ys, hexToRgb as fs, hueScale as hs, hueScaleLight as bs, isHexColor as xs, neutralScale as vs, neutralScaleLight as ws, normalizeHexColor as Ns, normalizeThemeName as Ts, oklchToHex as Ps, rgbToHex as Ss } from "@gryt/theme";
-import { Button as ae } from "@base-ui/react/button";
-import { clsx as He } from "clsx";
-import { twMerge as ze } from "tailwind-merge";
-import { Field as gt } from "@base-ui/react/field";
-import { PaperPlaneTilt as Be, X as Gt, Check as jt, CaretUpDown as Fe, CircleNotch as _e, CaretDown as Ve, Warning as se, ArrowsClockwise as Oe, Minus as Ye, Plus as Ue } from "@phosphor-icons/react";
-import { Avatar as Pt } from "@base-ui/react/avatar";
-import { owlAvatarDataUri as Xe, eggAvatarDataUri as Ke } from "@gryt/owl";
-import { avatarSeed as Cs } from "@gryt/owl";
-import { Checkbox as Vt } from "@base-ui/react/checkbox";
-import { Radio as Ot } from "@base-ui/react/radio";
-import { RadioGroup as We } from "@base-ui/react/radio-group";
-import { Switch as Yt } from "@base-ui/react/switch";
-import { Slider as rt } from "@base-ui/react/slider";
-import { Select as C } from "@base-ui/react/select";
-import { Separator as Je } from "@base-ui/react/separator";
-import { Progress as St } from "@base-ui/react/progress";
-import { Dialog as j } from "@base-ui/react/dialog";
-import { Drawer as I } from "@base-ui/react/drawer";
-import { Menu as V } from "@base-ui/react/menu";
-import { Tabs as dt } from "@base-ui/react/tabs";
-import { Accordion as ct } from "@base-ui/react/accordion";
-import { ContextMenu as G } from "@base-ui/react/context-menu";
-import { Popover as L } from "@base-ui/react/popover";
-import { Toast as M } from "@base-ui/react/toast";
-import { ScrollArea as Z } from "@base-ui/react/scroll-area";
-import { Toggle as Qe } from "@base-ui/react/toggle";
-import { ToggleGroup as Ze } from "@base-ui/react/toggle-group";
-import { Meter as nt } from "@base-ui/react/meter";
-import { AlertDialog as E } from "@base-ui/react/alert-dialog";
-import { Autocomplete as N } from "@base-ui/react/autocomplete";
-import { Combobox as v } from "@base-ui/react/combobox";
-import { CheckboxGroup as qe } from "@base-ui/react/checkbox-group";
-import { Collapsible as Et } from "@base-ui/react/collapsible";
-import { Form as tr } from "@base-ui/react/form";
-import { Fieldset as ie } from "@base-ui/react/fieldset";
-import { Menubar as er } from "@base-ui/react/menubar";
-import { NavigationMenu as k } from "@base-ui/react/navigation-menu";
-import { NumberField as z } from "@base-ui/react/number-field";
-import { OTPField as Ut } from "@base-ui/react/otp-field";
-import { PreviewCard as W } from "@base-ui/react/preview-card";
-import { Toolbar as J } from "@base-ui/react/toolbar";
-const le = ne(void 0);
-function ce() {
-  return ht(le);
+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 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 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 rr(n) {
+function kr(n) {
   return Object.keys(n).some((t) => t.startsWith("--"));
 }
-function Jo({
+function $a({
   children: n,
   className: t,
   theme: e,
   tooltipDelay: r = 400,
   containOverlays: a = !1
 }) {
-  const c = Mt(null), m = e === void 0 ? void 0 : rr(e) ? e : oe(e);
-  return /* @__PURE__ */ o("div", { className: t, style: m, ref: c, children: /* @__PURE__ */ o(
-    le.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: a ? c : void 0,
-      children: /* @__PURE__ */ o(F.Provider, { delay: r, children: n })
+      children: /* @__PURE__ */ o(K.Provider, { delay: r, children: n })
     }
   ) });
 }
 function s(...n) {
-  return ze(He(n));
+  return cr(lr(n));
 }
-const nr = {
+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"
-}, or = {
+}, 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"
-}, yt = l(
+}, Te = l(
   function({
     children: t,
     className: e,
     endIcon: r,
     size: a = "medium",
     startIcon: c,
-    tone: m = "primary",
-    ...g
-  }, y) {
-    return /* @__PURE__ */ d(
-      ae,
+    tone: d = "primary",
+    ...p
+  }, m) {
+    return /* @__PURE__ */ u(
+      wt,
       {
-        ref: y,
+        ref: m,
         className: s(
           "gryt-button",
           "inline-flex cursor-pointer items-center justify-center gap-2 border-0 shadow-none",
@@ -121,11 +121,11 @@ const nr = {
           // 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",
-          or[a],
-          nr[m],
+          Cr[a],
+          Pr[d],
           e
         ),
-        ...g,
+        ...p,
         children: [
           c,
           t,
@@ -134,65 +134,65 @@ const nr = {
       }
     );
   }
-), P = "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", de = [
+), 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(" "), ue = {
+].join(" "), Pt = {
   small: "min-h-9 px-3 py-1.5 text-sm",
   medium: "min-h-11 px-4 py-2.5 text-sm"
-}, Y = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", H = [
+}, 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(" "), q = "cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50", sr = {
+].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"
-}, ge = {
+}, 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"
-}, ir = {
+}, 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"
-}, lr = {
+}, 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"
-}, cr = {
+}, 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"
-}, dr = {
+}, Dr = {
   xsmall: "h-8 w-8",
   small: "h-9 w-9",
   medium: "h-10 w-10",
   large: "h-12 w-12"
-}, Qo = l(
+}, ka = l(
   function({ className: t, size: e = "medium", tone: r = "neutral", ...a }, c) {
     return /* @__PURE__ */ o(
-      ae,
+      wt,
       {
         ref: c,
         className: s(
@@ -209,17 +209,17 @@ const nr = {
           // 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]",
-          P,
-          q,
-          dr[e],
-          cr[r],
+          A,
+          ie,
+          Dr[e],
+          Lr[r],
           t
         ),
         ...a
       }
     );
   }
-), Zo = l(
+), Pa = l(
   function({ className: t, elevated: e = !1, ...r }, a) {
     return /* @__PURE__ */ o(
       "div",
@@ -234,7 +234,7 @@ const nr = {
       }
     );
   }
-), qo = l(
+), Ca = l(
   function({ children: t, className: e, from: r = "assistant", ...a }, c) {
     return /* @__PURE__ */ o(
       "div",
@@ -252,46 +252,46 @@ const nr = {
       }
     );
   }
-), me = l(
+), Ke = l(
   function({
     className: t,
     error: e = !1,
     fieldClassName: r,
     helperText: a,
     label: c,
-    minRows: m = 3,
-    multiline: g = !1,
-    size: y = "medium",
-    ...p
+    minRows: d = 3,
+    multiline: p = !1,
+    size: m = "medium",
+    ...y
   }, f) {
     const h = /* @__PURE__ */ o(
-      gt.Control,
+      xe.Control,
       {
         ref: f,
-        render: g ? /* @__PURE__ */ o("textarea", { rows: m }) : void 0,
+        render: p ? /* @__PURE__ */ o("textarea", { rows: d }) : void 0,
         className: s(
           "gryt-text-field-control",
-          de,
-          g && "resize-y leading-6",
+          kt,
+          p && "resize-y leading-6",
           e ? "border-gryt-danger" : "border-gryt-border",
-          ue[y],
+          Pt[m],
           t
         ),
-        ...p
+        ...y
       }
     );
-    return /* @__PURE__ */ d(
-      gt.Root,
+    return /* @__PURE__ */ u(
+      xe.Root,
       {
         className: s(
           "gryt-text-field flex w-full flex-col gap-1.5",
           r
         ),
         children: [
-          c ? /* @__PURE__ */ o(gt.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
+          c ? /* @__PURE__ */ o(xe.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
           h,
           a ? /* @__PURE__ */ o(
-            gt.Description,
+            xe.Description,
             {
               className: s(
                 "text-xs",
@@ -304,105 +304,105 @@ const nr = {
       }
     );
   }
-), ta = l(
+), Aa = l(
   function({
     className: t,
     disabled: e = !1,
     maxRows: r = 8,
     minRows: a = 1,
     onSubmit: c,
-    placeholder: m = "Message Gryt",
-    submitLabel: g = "Send",
-    ...y
-  }, p) {
-    const f = Mt(null), h = It(() => {
+    placeholder: d = "Message Gryt",
+    submitLabel: p = "Send",
+    ...m
+  }, y) {
+    const f = ke(null), h = pe(() => {
       const x = f.current;
       if (!x)
         return;
-      const T = window.getComputedStyle(x), w = parseFloat(T.lineHeight) || 24, R = parseFloat(T.paddingTop) + parseFloat(T.paddingBottom);
+      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, w * a + R),
-        w * r + R
+        Math.max(x.scrollHeight, N * a + k),
+        N * r + k
       )}px`;
     }, [r, a]);
-    Se(h, [h, y.value]);
-    function S(x) {
+    Ot(h, [h, m.value]);
+    function b(x) {
       if (!c) {
         x.preventDefault();
         return;
       }
       c(x);
     }
-    return /* @__PURE__ */ d("form", { className: s("gryt-composer", t), onSubmit: S, children: [
+    return /* @__PURE__ */ u("form", { className: s("gryt-composer", t), onSubmit: b, children: [
       /* @__PURE__ */ o(
         "textarea",
         {
           ref: (x) => {
-            f.current = x, typeof p == "function" ? p(x) : p && (p.current = x);
+            f.current = x, typeof y == "function" ? y(x) : y && (y.current = x);
           },
           rows: a,
           disabled: e,
-          placeholder: m,
+          placeholder: d,
           onInput: h,
           className: "gryt-composer-textarea disabled:cursor-not-allowed disabled:opacity-60",
-          ...y
+          ...m
         }
       ),
       /* @__PURE__ */ o(
-        yt,
+        Te,
         {
           type: "submit",
           disabled: e,
           size: "small",
-          endIcon: /* @__PURE__ */ o(Be, { size: 14, weight: "fill" }),
-          children: g
+          endIcon: /* @__PURE__ */ o(dr, { size: 14, weight: "fill" }),
+          children: p
         }
       )
     ] });
   }
-), ur = {
+), Gr = {
   small: "h-8 w-8 text-xs",
   medium: "h-10 w-10 text-sm",
   large: "h-12 w-12 text-base"
-}, Xt = 256, gr = l(function({
+}, st = 256, Fr = l(function({
   alt: t,
   children: e,
   className: r,
   fallback: a,
   seed: c,
-  eggSeed: m,
-  size: g = "medium",
-  src: y,
-  ...p
+  eggSeed: d,
+  size: p = "medium",
+  src: m,
+  ...y
 }, f) {
-  const h = it(
-    () => c ? Xe(c, { size: Xt }) : void 0,
+  const h = me(
+    () => c ? hr(c, { size: st }) : void 0,
     [c]
-  ), S = it(
-    () => m ? Ke(m, { size: Xt }) : void 0,
-    [m]
-  ), x = h ?? S;
-  return /* @__PURE__ */ d(
-    Pt.Root,
+  ), b = me(
+    () => d ? br(d, { size: st }) : void 0,
+    [d]
+  ), x = h ?? b;
+  return /* @__PURE__ */ u(
+    Le.Root,
     {
       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",
-        ur[g],
+        Gr[p],
         r
       ),
-      ...p,
+      ...y,
       children: [
-        y ? /* @__PURE__ */ o(
-          Pt.Image,
+        m ? /* @__PURE__ */ o(
+          Le.Image,
           {
-            src: y,
+            src: m,
             alt: t,
             className: "h-full w-full object-cover"
           }
         ) : null,
-        /* @__PURE__ */ o(Pt.Fallback, { className: "flex h-full w-full items-center justify-center", children: x ? /* @__PURE__ */ o(
+        /* @__PURE__ */ o(Le.Fallback, { className: "flex h-full w-full items-center justify-center", children: x ? /* @__PURE__ */ o(
           "img",
           {
             src: x,
@@ -413,21 +413,21 @@ const nr = {
       ]
     }
   );
-}), ea = l(function({ active: t = !1, avatar: e, className: r, subtitle: a, title: c, ...m }, g) {
-  return /* @__PURE__ */ d(
+}), Ma = l(function({ active: t = !1, avatar: e, className: r, subtitle: a, title: c, ...d }, p) {
+  return /* @__PURE__ */ u(
     "button",
     {
-      ref: g,
+      ref: p,
       type: "button",
       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
       ),
-      ...m,
+      ...d,
       children: [
         e ?? /* @__PURE__ */ o(
-          gr,
+          Fr,
           {
             size: "small",
             className: s(
@@ -436,7 +436,7 @@ const nr = {
             children: c.slice(0, 1).toUpperCase()
           }
         ),
-        /* @__PURE__ */ d("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 }),
           a ? /* @__PURE__ */ o(
             "span",
@@ -452,17 +452,17 @@ const nr = {
       ]
     }
   );
-}), ra = l(function({ badgeContent: t, children: e, className: r, max: a = 99, showZero: c = !1, ...m }, g) {
-  const y = typeof t == "number" ? t : null, p = y !== null && y === 0 && !c, f = y !== null && y > a ? `${a}+` : t;
-  return /* @__PURE__ */ d(
+}), 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: g,
+      ref: p,
       className: s("gryt-badge relative inline-flex", r),
-      ...m,
+      ...d,
       children: [
         e,
-        t !== void 0 && !p ? /* @__PURE__ */ o(
+        t !== void 0 && !y ? /* @__PURE__ */ o(
           "span",
           {
             className: s(
@@ -477,24 +477,24 @@ const nr = {
       ]
     }
   );
-}), mr = {
+}), 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"
-}, na = l(function({ children: t, className: e, icon: r, label: a, onDelete: c, tone: m = "neutral", ...g }, y) {
-  return /* @__PURE__ */ d(
+}, Ia = l(function({ children: t, className: e, icon: r, label: a, onDelete: c, tone: d = "neutral", ...p }, m) {
+  return /* @__PURE__ */ u(
     "span",
     {
-      ref: y,
+      ref: m,
       className: s(
         "gryt-chip inline-flex items-center gap-1.5 rounded-(--gryt-radius-full) border px-3 py-1 text-xs font-medium",
-        mr[m],
+        zr[d],
         e
       ),
-      ...g,
+      ...p,
       children: [
         r,
         a ?? t,
@@ -507,18 +507,18 @@ const nr = {
             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",
-              P
+              A
             ),
-            children: /* @__PURE__ */ o(Gt, { size: 10, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ o(Ue, { size: 10, weight: "bold", "aria-hidden": "true" })
           }
         ) : null
       ]
     }
   );
-}), Kt = l(
+}), it = l(
   function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
-      Vt.Root,
+      rt.Root,
       {
         ref: a,
         className: s(
@@ -531,15 +531,15 @@ const nr = {
           "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]",
-          P,
-          q,
+          A,
+          ie,
           // Unchecked stays a neutral outline; the tone only paints once checked.
-          sr[e],
+          Mr[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          Vt.Indicator,
+          rt.Indicator,
           {
             keepMounted: !0,
             className: s(
@@ -552,15 +552,15 @@ const nr = {
               "data-unchecked:scale-0 data-unchecked:opacity-0",
               "motion-reduce:transition-none"
             ),
-            children: /* @__PURE__ */ o(jt, { size: 12, weight: "bold" })
+            children: /* @__PURE__ */ o(Xe, { size: 12, weight: "bold" })
           }
         )
       }
     );
   }
-), oa = l(function({ className: t, tone: e = "primary", ...r }, a) {
+), La = l(function({ className: t, tone: e = "primary", ...r }, a) {
   return /* @__PURE__ */ o(
-    Ot.Root,
+    nt.Root,
     {
       ref: a,
       className: s(
@@ -570,15 +570,15 @@ const nr = {
         "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]",
-        P,
-        q,
+        A,
+        ie,
         // Border takes the tone when selected; the dot inside carries the fill.
-        ir[e],
+        Rr[e],
         t
       ),
       ...r,
       children: /* @__PURE__ */ o(
-        Ot.Indicator,
+        nt.Indicator,
         {
           keepMounted: !0,
           className: s(
@@ -587,16 +587,16 @@ const nr = {
             // 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",
-            ge[e]
+            Ct[e]
           )
         }
       )
     }
   );
-}), aa = l(
+}), Da = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      We,
+      xr,
       {
         ref: r,
         className: s("gryt-radio-group flex flex-col gap-2", t),
@@ -604,10 +604,10 @@ const nr = {
       }
     );
   }
-), sa = l(
+), Ga = l(
   function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
-      Yt.Root,
+      ot.Root,
       {
         ref: a,
         className: s(
@@ -618,14 +618,14 @@ const nr = {
           "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]",
-          P,
-          q,
-          lr[e],
+          A,
+          ie,
+          Ir[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          Yt.Thumb,
+          ot.Thumb,
           {
             className: s(
               "h-4.5 w-4.5 rounded-(--gryt-radius-full) bg-gryt-text",
@@ -637,65 +637,65 @@ const nr = {
       }
     );
   }
-), Wt = 3;
-function pr({
+), lt = 3;
+function At({
   className: n,
   tone: t = "primary",
   "aria-label": e,
   ...r
 }) {
-  const [a, c] = _(!1), m = Mt(null);
-  $e(() => {
-    if (!a && m.current === null)
+  const [a, c] = G(!1), d = ke(null);
+  Vt(() => {
+    if (!a && d.current === null)
       return;
     const f = () => {
-      m.current = null, c(!1);
+      d.current = null, c(!1);
     };
     return window.addEventListener("pointerup", f), window.addEventListener("pointercancel", f), () => {
       window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", f);
     };
   }, [a]);
-  function g(f) {
-    m.current = { x: f.clientX, y: f.clientY };
+  function p(f) {
+    d.current = { x: f.clientX, y: f.clientY };
   }
-  function y(f) {
-    const h = m.current;
+  function m(f) {
+    const h = d.current;
     if (h === null || a)
       return;
-    (Math.abs(f.clientX - h.x) > Wt || Math.abs(f.clientY - h.y) > Wt) && c(!0);
+    (Math.abs(f.clientX - h.x) > lt || Math.abs(f.clientY - h.y) > lt) && c(!0);
   }
-  const p = a ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
-  return /* @__PURE__ */ o(rt.Root, { className: s("gryt-slider w-full", n), ...r, children: /* @__PURE__ */ o(
-    rt.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: g,
-      onPointerMove: y,
-      children: /* @__PURE__ */ d(rt.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
+      onPointerDown: p,
+      onPointerMove: m,
+      children: /* @__PURE__ */ u(le.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
         /* @__PURE__ */ o(
-          rt.Indicator,
+          le.Indicator,
           {
             className: s(
               "h-full rounded-(--gryt-radius-full) select-none",
               "transition-[width]",
-              p,
-              ge[t]
+              y,
+              Ct[t]
             )
           }
         ),
         /* @__PURE__ */ o(
-          rt.Thumb,
+          le.Thumb,
           {
             "aria-label": e,
             className: s(
               "group h-4 w-4 rounded-(--gryt-radius-full) select-none",
               "transition-[inset-inline-start]",
-              p,
+              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.
-              ar
+              Ar
             ),
             children: /* @__PURE__ */ o(
               "span",
@@ -714,11 +714,11 @@ function pr({
     }
   ) });
 }
-const yr = {
+const Br = {
   small: "min-h-9 px-3 text-sm",
   medium: "min-h-11 px-4 text-sm"
 };
-function fr({
+function Je({
   className: n,
   label: t,
   options: e = [],
@@ -726,12 +726,12 @@ function fr({
   size: a = "medium",
   ...c
 }) {
-  const m = ce();
-  return /* @__PURE__ */ d(C.Root, { items: e, ...c, children: [
-    /* @__PURE__ */ d("div", { className: s("gryt-select flex w-full flex-col gap-1.5", n), children: [
-      t ? /* @__PURE__ */ o(C.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
-      /* @__PURE__ */ d(
-        C.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: s(
             "flex w-full cursor-pointer items-center justify-between gap-2",
@@ -739,30 +739,30 @@ function fr({
             "text-gryt-text select-none",
             "transition-colors duration-150 hover:border-gryt-accent-light",
             "data-disabled:cursor-not-allowed data-disabled:opacity-60",
-            P,
-            yr[a]
+            A,
+            Br[a]
           ),
           children: [
-            /* @__PURE__ */ o(C.Value, { placeholder: r }),
-            /* @__PURE__ */ o(C.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(Fe, { 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(C.Portal, { container: m, children: /* @__PURE__ */ o(
-      C.Positioner,
+    /* @__PURE__ */ o(R.Portal, { container: d, children: /* @__PURE__ */ o(
+      R.Positioner,
       {
         sideOffset: 6,
         className: "gryt-select-positioner outline-none",
         children: /* @__PURE__ */ o(
-          C.Popup,
+          R.Popup,
           {
-            className: s("min-w-(--anchor-width) p-1", Y, H),
-            children: /* @__PURE__ */ o(C.List, { children: e.map((g) => /* @__PURE__ */ d(
-              C.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: g.value,
-                disabled: g.disabled,
+                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",
@@ -770,11 +770,11 @@ function fr({
                   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
                 ),
                 children: [
-                  /* @__PURE__ */ o(C.ItemText, { children: g.label }),
-                  /* @__PURE__ */ o(C.ItemIndicator, { className: "text-gryt-accent-11", children: /* @__PURE__ */ o(jt, { 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(g.value)
+              String(p.value)
             )) })
           }
         )
@@ -782,29 +782,29 @@ function fr({
     ) })
   ] });
 }
-function ia({
+function Fa({
   children: n,
   className: t,
   side: e = "top",
   sideOffset: r = 8,
   title: a
 }) {
-  const c = ce();
-  return /* @__PURE__ */ d(F.Root, { children: [
-    /* @__PURE__ */ o(F.Trigger, { render: n }),
-    /* @__PURE__ */ o(F.Portal, { container: c, children: /* @__PURE__ */ o(
-      F.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(
-          F.Popup,
+          K.Popup,
           {
             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",
-              H,
+              Y,
               t
             ),
             children: a
@@ -814,10 +814,10 @@ function ia({
     ) })
   ] });
 }
-const la = F.Provider, ca = l(
+const za = K.Provider, Ba = l(
   function({ className: t, orientation: e = "horizontal", ...r }, a) {
     return /* @__PURE__ */ o(
-      Je,
+      vr,
       {
         ref: a,
         orientation: e,
@@ -830,7 +830,7 @@ const la = F.Provider, ca = l(
       }
     );
   }
-), da = l(function({ className: t, ...e }, r) {
+), Ea = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     "div",
     {
@@ -843,14 +843,14 @@ const la = F.Provider, ca = l(
     }
   );
 });
-function ua({
+function _a({
   children: n,
   className: t,
   subheader: e,
   title: r,
   ...a
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ u(
     "div",
     {
       className: s("gryt-card-header flex flex-col gap-1 p-4", t),
@@ -863,7 +863,7 @@ function ua({
     }
   );
 }
-function ga({
+function Ha({
   className: n,
   ...t
 }) {
@@ -878,7 +878,7 @@ function ga({
     }
   );
 }
-function ma({
+function ja({
   className: n,
   ...t
 }) {
@@ -893,12 +893,12 @@ function ma({
     }
   );
 }
-const hr = {
+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"
-}, pa = l(function({ className: t, severity: e = "info", ...r }, a) {
+}, Oa = l(function({ className: t, severity: e = "info", ...r }, a) {
   return /* @__PURE__ */ o(
     "div",
     {
@@ -906,22 +906,22 @@ const hr = {
       role: "alert",
       className: s(
         "gryt-alert rounded-(--gryt-radius-lg) border px-4 py-3 text-sm",
-        hr[e],
+        Er[e],
         t
       ),
       ...r
     }
   );
 });
-function ya({ className: n, value: t = null, ...e }) {
+function Va({ className: n, value: t = null, ...e }) {
   return /* @__PURE__ */ o(
-    St.Root,
+    De.Root,
     {
       value: t,
       className: s("gryt-progress w-full", n),
       ...e,
-      children: /* @__PURE__ */ o(St.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-        St.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: s(
             "h-full rounded-(--gryt-radius-full) bg-gryt-accent",
@@ -938,13 +938,13 @@ function ya({ className: n, value: t = null, ...e }) {
     }
   );
 }
-function fa({
+function Ya({
   className: n,
   size: t = 24,
   "aria-label": e = "Loading"
 }) {
   return /* @__PURE__ */ o(
-    _e,
+    gr,
     {
       role: "status",
       "aria-label": e,
@@ -957,13 +957,13 @@ function fa({
     }
   );
 }
-const br = {
+const _r = {
   text: "h-4 rounded-(--gryt-radius-sm)",
   rounded: "rounded-(--gryt-radius-lg)",
   circular: "rounded-(--gryt-radius-full)",
   rectangular: "rounded-none"
 };
-function ha({
+function Ua({
   className: n,
   height: t,
   style: e,
@@ -971,7 +971,7 @@ function ha({
   width: a,
   ...c
 }) {
-  const m = {
+  const d = {
     width: a,
     height: t,
     ...e
@@ -988,24 +988,24 @@ function ha({
         // 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",
-        br[r],
+        _r[r],
         n
       ),
-      style: m,
+      style: d,
       ...c
     }
   );
 }
-const pe = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", xr = l(
+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(
-      j.Backdrop,
+      O.Backdrop,
       {
         ref: r,
         className: s(
           "gryt-dialog-backdrop fixed inset-0 min-h-dvh bg-black/60",
           "backdrop-blur-(--gryt-backdrop-blur)",
-          pe,
+          Mt,
           "data-starting-style:opacity-0 data-ending-style:opacity-0",
           t
         ),
@@ -1013,17 +1013,17 @@ const pe = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), vr = l(
+), jr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      j.Popup,
+      O.Popup,
       {
         ref: r,
         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",
-          pe,
+          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,10 +1032,10 @@ const pe = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), wr = l(
+), Or = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      j.Title,
+      O.Title,
       {
         ref: r,
         className: s(
@@ -1046,10 +1046,10 @@ const pe = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), Nr = l(
+), Vr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      j.Description,
+      O.Description,
       {
         ref: r,
         className: s(
@@ -1060,7 +1060,7 @@ const pe = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), Tr = l(
+), Yr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
       "div",
@@ -1074,45 +1074,45 @@ const pe = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ba = {
-  Root: j.Root,
-  Trigger: j.Trigger,
-  Portal: j.Portal,
-  Close: j.Close,
-  Backdrop: xr,
-  Popup: vr,
-  Title: wr,
-  Description: Nr,
-  Footer: Tr
-}, Pr = () => () => {
+), 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 Sr(n) {
-  const t = It(
+function Xr(n) {
+  const t = pe(
     (r) => {
-      if (typeof window > "u" || !window.matchMedia) return Pr();
+      if (typeof window > "u" || !window.matchMedia) return Ur();
       const a = window.matchMedia(n);
       return a.addEventListener("change", r), () => a.removeEventListener("change", r);
     },
     [n]
-  ), e = It(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(n).matches, [n]);
-  return Ce(t, e, () => !1);
+  ), e = pe(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(n).matches, [n]);
+  return Yt(t, e, () => !1);
 }
-const $r = {
+const Wr = {
   left: "left",
   right: "right",
   top: "up",
   bottom: "down"
-}, bt = ne("right"), Cr = {
+}, Pe = bt("right"), Kr = {
   left: "items-stretch justify-start",
   right: "items-stretch justify-end",
   top: "items-start justify-center",
   bottom: "items-end justify-center"
-}, kr = {
+}, 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)"
-}, Rr = {
+}, 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,20 +1142,20 @@ const $r = {
     "data-ending-style:[transform:translateY(calc(100%-var(--gryt-drawer-bleed)))]"
   ].join(" ")
 };
-function Ar({
+function Zr({
   side: n = "right",
   sheetOnMobile: t = !0,
   children: e,
   ...r
 }) {
-  const a = Sr("(max-width: 767px)"), c = t && a ? "bottom" : n;
-  return /* @__PURE__ */ o(bt.Provider, { value: c, children: /* @__PURE__ */ o(I.Root, { swipeDirection: $r[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 Ir = l(
+const qr = l(
   function({ className: t, ...e }, r) {
-    const a = ht(bt);
+    const a = $e(Pe);
     return /* @__PURE__ */ o(
-      I.Viewport,
+      D.Viewport,
       {
         ref: r,
         className: s(
@@ -1163,17 +1163,17 @@ const Ir = l(
           // 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",
-          Cr[a],
+          Kr[a],
           t
         ),
         ...e
       }
     );
   }
-), Dr = l(function({ className: t, ...e }, r) {
-  const a = ht(bt);
+), en = l(function({ className: t, ...e }, r) {
+  const a = $e(Pe);
   return /* @__PURE__ */ o(
-    I.Popup,
+    D.Popup,
     {
       ref: r,
       className: s(
@@ -1184,16 +1184,16 @@ const Ir = l(
         // duration here turns a drag into a drag plus lag.
         "data-swiping:duration-0 data-swiping:select-none",
         "motion-reduce:transition-none",
-        Rr[a],
-        kr[a],
+        Qr[a],
+        Jr[a],
         t
       ),
       ...e
     }
   );
-}), Lr = l(function({ className: t, ...e }, r) {
+}), tn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    I.Backdrop,
+    D.Backdrop,
     {
       ref: r,
       className: s(
@@ -1212,8 +1212,8 @@ const Ir = l(
     }
   );
 });
-function Mr({ className: n }) {
-  const t = ht(bt);
+function rn({ className: n }) {
+  const t = $e(Pe);
   return t !== "bottom" && t !== "top" ? null : /* @__PURE__ */ o(
     "div",
     {
@@ -1226,22 +1226,22 @@ function Mr({ className: n }) {
     }
   );
 }
-const xa = {
-  Root: Ar,
-  Trigger: I.Trigger,
-  Portal: I.Portal,
-  Backdrop: Lr,
-  Viewport: Ir,
-  Popup: Dr,
-  Content: I.Content,
-  Grabber: Mr,
-  Close: I.Close,
-  Title: I.Title,
-  Description: I.Description
-}, Gr = l(
+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(
-      V.Positioner,
+      J.Positioner,
       {
         ref: a,
         sideOffset: e,
@@ -1250,23 +1250,23 @@ const xa = {
       }
     );
   }
-), jr = l(function({ className: t, ...e }, r) {
+), on = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    V.Popup,
+    J.Popup,
     {
       ref: r,
       className: s(
         "gryt-menu min-w-44 p-1 outline-none",
+        Z,
         Y,
-        H,
         t
       ),
       ...e
     }
   );
-}), Er = l(function({ className: t, ...e }, r) {
+}), an = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    V.Item,
+    J.Item,
     {
       ref: r,
       className: s(
@@ -1281,26 +1281,26 @@ const xa = {
       ...e
     }
   );
-}), Hr = l(function({ className: t, ...e }, r) {
+}), sn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    V.Separator,
+    J.Separator,
     {
       ref: r,
       className: s("gryt-menu-separator my-1 h-px bg-gryt-border", t),
       ...e
     }
   );
-}), $t = {
-  Root: V.Root,
-  Trigger: V.Trigger,
-  Portal: V.Portal,
-  Positioner: Gr,
-  Popup: jr,
-  Item: Er,
-  Separator: Hr
-}, zr = l(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(
-    dt.Root,
+    he.Root,
     {
       ref: r,
       className: s(
@@ -1314,9 +1314,9 @@ const xa = {
       ...e
     }
   );
-}), Br = l(function({ className: t, ...e }, r) {
+}), cn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    dt.List,
+    he.List,
     {
       ref: r,
       className: s(
@@ -1331,9 +1331,9 @@ const xa = {
       ...e
     }
   );
-}), Fr = l(function({ className: t, ...e }, r) {
+}), dn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    dt.Tab,
+    he.Tab,
     {
       ref: r,
       className: s(
@@ -1362,16 +1362,16 @@ const xa = {
         "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",
-        P,
+        A,
         t
       ),
       ...e
     }
   );
-}), _r = l(
+}), un = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      dt.Indicator,
+      he.Indicator,
       {
         ref: r,
         renderBeforeHydration: !0,
@@ -1395,9 +1395,9 @@ const xa = {
       }
     );
   }
-), Vr = l(function({ className: t, ...e }, r) {
+), gn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    dt.Panel,
+    he.Panel,
     {
       ref: r,
       className: s(
@@ -1411,9 +1411,9 @@ const xa = {
       ...e
     }
   );
-}), va = Object.assign(zr, { List: Br, Tab: Fr, Panel: Vr, Indicator: _r }), Or = l(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(
-    ct.Root,
+    fe.Root,
     {
       ref: r,
       className: s(
@@ -1423,10 +1423,10 @@ const xa = {
       ...e
     }
   );
-}), Yr = l(
+}), pn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      ct.Item,
+      fe.Item,
       {
         ref: r,
         className: s("gryt-accordion-item", t),
@@ -1434,10 +1434,10 @@ const xa = {
       }
     );
   }
-), Ur = l(
+), yn = l(
   function({ children: t, className: e, expandIcon: r, ...a }, c) {
-    return /* @__PURE__ */ o(ct.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ d(
-      ct.Trigger,
+    return /* @__PURE__ */ o(fe.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ u(
+      fe.Trigger,
       {
         ref: c,
         className: s(
@@ -1446,14 +1446,14 @@ const xa = {
           "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",
-          P,
+          A,
           e
         ),
         ...a,
         children: [
           t,
           r === void 0 ? /* @__PURE__ */ o(
-            Ve,
+            mr,
             {
               size: 16,
               className: "shrink-0 transition-transform duration-(--gryt-dur-spring) ease-spring data-panel-open:rotate-180 motion-reduce:transition-none"
@@ -1463,10 +1463,10 @@ const xa = {
       }
     ) });
   }
-), Xr = l(
+), fn = l(
   function({ children: t, className: e, ...r }, a) {
     return /* @__PURE__ */ o(
-      ct.Panel,
+      fe.Panel,
       {
         ref: a,
         className: s(
@@ -1483,10 +1483,10 @@ const xa = {
       }
     );
   }
-), wa = Object.assign(Or, { Item: Yr, Trigger: Ur, Panel: Xr }), Kr = l(
+), Ja = Object.assign(mn, { Item: pn, Trigger: yn, Panel: fn }), hn = l(
   function({ className: t, sideOffset: e = 2, ...r }, a) {
     return /* @__PURE__ */ o(
-      G.Positioner,
+      j.Positioner,
       {
         ref: a,
         sideOffset: e,
@@ -1495,22 +1495,22 @@ const xa = {
       }
     );
   }
-), Na = {
-  Root: G.Root,
-  Trigger: G.Trigger,
-  Portal: G.Portal,
-  Positioner: Kr,
-  Popup: $t.Popup,
-  Item: $t.Item,
-  Separator: $t.Separator,
-  Group: G.Group,
-  GroupLabel: G.GroupLabel,
-  SubmenuRoot: G.SubmenuRoot,
-  SubmenuTrigger: G.SubmenuTrigger
-}, Wr = l(
+), 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(
-      L.Positioner,
+      B.Positioner,
       {
         ref: a,
         sideOffset: e,
@@ -1519,25 +1519,25 @@ const xa = {
       }
     );
   }
-), Jr = l(
+), xn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      L.Popup,
+      B.Popup,
       {
         ref: r,
         className: s(
           "gryt-popover max-w-[min(20rem,calc(100vw-2rem))] p-4 outline-none",
+          Z,
           Y,
-          H,
           t
         ),
         ...e
       }
     );
   }
-), Qr = l(function({ className: t, ...e }, r) {
+), vn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    L.Title,
+    B.Title,
     {
       ref: r,
       className: s(
@@ -1547,9 +1547,9 @@ const xa = {
       ...e
     }
   );
-}), Zr = l(function({ className: t, ...e }, r) {
+}), wn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    L.Description,
+    B.Description,
     {
       ref: r,
       className: s(
@@ -1559,26 +1559,26 @@ const xa = {
       ...e
     }
   );
-}), Ta = {
-  Root: L.Root,
-  Trigger: L.Trigger,
-  Portal: L.Portal,
-  Positioner: Wr,
-  Popup: Jr,
-  Title: Qr,
-  Description: Zr,
-  Close: L.Close,
-  Arrow: L.Arrow
-}, qr = {
+}), 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"
-}, tn = l(
+}, Tn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      M.Viewport,
+      E.Viewport,
       {
         ref: r,
         className: s(
@@ -1590,9 +1590,9 @@ const xa = {
       }
     );
   }
-), en = l(function({ className: t, severity: e = "neutral", ...r }, a) {
+), Sn = l(function({ className: t, severity: e = "neutral", ...r }, a) {
   return /* @__PURE__ */ o(
-    M.Root,
+    E.Root,
     {
       ref: a,
       className: s(
@@ -1603,7 +1603,7 @@ const xa = {
         // white hairline separates it from the page without drawing a box
         // around it.
         "rounded-(--gryt-radius-xl) border text-gryt-text",
-        qr[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,9 +1615,9 @@ const xa = {
       ...r
     }
   );
-}), rn = l(function({ className: t, ...e }, r) {
+}), $n = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    M.Title,
+    E.Title,
     {
       ref: r,
       className: s(
@@ -1627,9 +1627,9 @@ const xa = {
       ...e
     }
   );
-}), nn = l(function({ className: t, ...e }, r) {
+}), kn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    M.Description,
+    E.Description,
     {
       ref: r,
       className: s(
@@ -1639,9 +1639,9 @@ const xa = {
       ...e
     }
   );
-}), on = l(function({ className: t, children: e, ...r }, a) {
+}), Pn = l(function({ className: t, children: e, ...r }, a) {
   return /* @__PURE__ */ o(
-    M.Close,
+    E.Close,
     {
       ref: a,
       "aria-label": "Close",
@@ -1653,12 +1653,12 @@ const xa = {
         t
       ),
       ...r,
-      children: e ?? /* @__PURE__ */ o(Gt, { size: 14, weight: "bold" })
+      children: e ?? /* @__PURE__ */ o(Ue, { size: 14, weight: "bold" })
     }
   );
-}), an = l(function({ className: t, ...e }, r) {
+}), Cn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    M.Action,
+    E.Action,
     {
       ref: r,
       className: s(
@@ -1672,19 +1672,19 @@ const xa = {
       ...e
     }
   );
-}), Pa = {
-  Provider: M.Provider,
-  Portal: M.Portal,
-  Viewport: tn,
-  Root: en,
-  Title: rn,
-  Description: nn,
-  Close: on,
-  Action: an
-}, Sa = M.useToastManager, sn = l(
+}), 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(
-      Z.Root,
+      se.Root,
       {
         ref: r,
         className: s("gryt-scroll-area relative", t),
@@ -1692,10 +1692,10 @@ const xa = {
       }
     );
   }
-), ln = l(
+), Mn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Z.Viewport,
+      se.Viewport,
       {
         ref: r,
         className: s(
@@ -1707,10 +1707,10 @@ const xa = {
       }
     );
   }
-), cn = l(
+), Rn = l(
   function({ className: t, orientation: e, ...r }, a) {
     return /* @__PURE__ */ o(
-      Z.Scrollbar,
+      se.Scrollbar,
       {
         ref: a,
         orientation: e,
@@ -1725,17 +1725,17 @@ const xa = {
           t
         ),
         ...r,
-        children: /* @__PURE__ */ o(Z.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" })
       }
     );
   }
-), $a = {
-  Root: sn,
-  Viewport: ln,
-  Scrollbar: cn,
-  Content: Z.Content,
-  Corner: Z.Corner
-}, dn = {
+), 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,15 +1756,15 @@ const xa = {
     "data-pressed:bg-gryt-danger data-pressed:text-gryt-on-danger",
     "data-pressed:hover:not-data-disabled:bg-gryt-danger"
   ].join(" ")
-}, un = {
+}, 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"
-}, Jt = l(
+}, ct = l(
   function({ className: t, size: e = "medium", tone: r = "primary", ...a }, c) {
     return /* @__PURE__ */ o(
-      Qe,
+      wr,
       {
         ref: c,
         className: s(
@@ -1775,20 +1775,20 @@ const xa = {
           "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]",
-          P,
-          q,
-          un[e],
-          dn[r],
+          A,
+          ie,
+          Ln[e],
+          In[r],
           t
         ),
         ...a
       }
     );
   }
-), gn = l(
+), Dn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Ze,
+      Nr,
       {
         ref: r,
         className: s(
@@ -1800,12 +1800,12 @@ const xa = {
       }
     );
   }
-), ye = Ae, Ca = Re;
-function Lt(n, t) {
+), Rt = Wt, rs = Xt;
+function Ve(n, t) {
   return t === "light" && n.lightHue !== null ? "lightHue" : "hue";
 }
-const ft = De;
-function mn(n) {
+const Se = Jt;
+function Gn(n) {
   return {
     hue: { ...n.hue },
     lightHue: n.lightHue === null ? null : { ...n.lightHue },
@@ -1814,23 +1814,23 @@ function mn(n) {
     radius: { ...n.radius }
   };
 }
-function pn(n, t) {
-  return { ...ft(n, t), ...n[t] };
+function Fn(n, t) {
+  return { ...Se(n, t), ...n[t] };
 }
-function yn(n, t) {
-  return oe(Ie(n, t));
+function zn(n, t) {
+  return xt(Kt(n, t));
 }
-function D(n, t) {
+function z(n, t) {
   const e = n;
   return Array.from(
     { length: 12 },
     (r, a) => e[`--gryt-${t}-${a + 1}`]
   );
 }
-function Qt(n) {
+function dt(n) {
   return JSON.stringify(n);
 }
-const Ct = {
+const Fe = {
   accent: "Accent",
   accentLight: "Accent, light",
   secondary: "Secondary",
@@ -1842,7 +1842,7 @@ const Ct = {
   onAccent: "Text on accent",
   onSecondary: "Text on secondary",
   onDanger: "Text on danger"
-}, Zt = {
+}, ut = {
   bg: "Page",
   surface: "Surface",
   surfaceRaised: "Raised surface",
@@ -1850,44 +1850,44 @@ const Ct = {
   border: "Border",
   muted: "Muted text",
   text: "Text"
-}, qt = {
+}, gt = {
   sm: "Small",
   md: "Medium",
   lg: "Large",
   xl: "Extra large",
   full: "Full"
-}, fn = {
+}, Bn = {
   sm: "Chips, swatches, small insets",
   md: "Menu rows, list items",
   lg: "Cards and panels",
   xl: "Dialogs, composers, bubbles",
   full: "Buttons, fields, avatars"
 };
-function ot({
+function de({
   label: n,
   value: t,
   onChange: e,
   warning: r,
   disabled: a = !1
 }) {
-  const c = ke(), [m, g] = _(t), [y, p] = _(t);
-  t !== y && (p(t), g(t));
+  const c = Ut(), [d, p] = G(t), [m, y] = G(t);
+  t !== m && (y(t), p(t));
   function f(h) {
-    g(h), Le(h) && e(lt(h));
+    p(h), Qt(h) && e(ye(h));
   }
-  return /* @__PURE__ */ d("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ d(
+  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(se, { "aria-label": r, size: 13 }) }) : null
+          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__ */ d("span", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ u("span", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ o(
         "input",
         {
@@ -1896,68 +1896,450 @@ function ot({
           disabled: a,
           onChange: (h) => f(h.target.value),
           type: "color",
-          value: lt(t)
+          value: ye(t)
         }
       ),
       /* @__PURE__ */ o(
-        me,
+        Ke,
         {
           "aria-label": `${n}, hex value`,
           className: "font-mono",
           disabled: a,
-          onBlur: () => g(t),
+          onBlur: () => p(t),
           onChange: (h) => f(h.target.value),
           size: "small",
           spellCheck: !1,
-          value: m
+          value: d
         }
       )
     ] })
   ] });
 }
-const hn = {
-  pass: jt,
-  tight: se,
-  fail: Gt
-}, te = {
+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 bn({ checks: n, onRepair: t }) {
+function Xn({ checks: n, onRepair: t }) {
   const e = n.filter(
     (r) => !r.advisory && r.level === "fail"
   ).length;
-  return /* @__PURE__ */ d("section", { className: "min-w-0", children: [
-    /* @__PURE__ */ d("header", { className: "flex items-center justify-between gap-2 pb-2", children: [
+  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__ */ d("span", { className: "text-xs text-gryt-danger-11", children: [
+      e > 0 ? /* @__PURE__ */ u("span", { className: "text-xs text-gryt-danger-11", children: [
         e,
         " of ",
         n.length
-      ] }) : /* @__PURE__ */ d("span", { className: "text-xs text-gryt-muted", children: [
+      ] }) : /* @__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 = hn[a];
-      return /* @__PURE__ */ d(
+      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__ */ d("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-              /* @__PURE__ */ o(c, { "aria-hidden": "true", className: te[a], size: 12 }),
+            /* @__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__ */ d("span", { className: "shrink-0 font-mono text-[11px] text-gryt-muted", children: [
-              /* @__PURE__ */ o("span", { className: a === "pass" ? "text-gryt-text" : te[a], children: r.ratio.toFixed(1) }),
-              /* @__PURE__ */ d("span", { "aria-hidden": "true", children: [
+            /* @__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__ */ d("span", { className: "sr-only", children: [
+              /* @__PURE__ */ u("span", { className: "sr-only", children: [
                 " against a minimum of ",
                 r.min
               ] }),
@@ -1968,11 +2350,11 @@ function bn({ checks: n, onRepair: t }) {
         r.id
       );
     }) }),
-    t ? /* @__PURE__ */ o("div", { className: "pt-3", children: /* @__PURE__ */ o(yt, { onClick: t, size: "small", tone: "neutral", children: "Fix the text colours" }) }) : null
+    t ? /* @__PURE__ */ o("div", { className: "pt-3", children: /* @__PURE__ */ o(Te, { onClick: t, size: "small", tone: "neutral", children: "Fix the text colours" }) }) : null
   ] });
 }
-function U({ label: n, steps: t }) {
-  return /* @__PURE__ */ d("div", { className: "min-w-0", children: [
+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",
@@ -1985,59 +2367,59 @@ function U({ label: n, steps: t }) {
     )) })
   ] });
 }
-const xn = [
+const Wn = [
   { family: "accent", label: "Accent" },
   { family: "secondary", label: "Secondary" },
   { family: "success", label: "Success" },
   { family: "danger", label: "Danger" },
   { family: "warning", label: "Warning" }
 ];
-function vn(n, t) {
+function Kn(n, t) {
   return n < t ? "fail" : n < t * 1.1 ? "tight" : "pass";
 }
-function B(n, t, e, r, a, c, m = !1) {
-  const g = Q(e, r);
+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: g,
+    ratio: p,
     min: a,
-    level: vn(g, a),
-    advisory: m,
+    level: Kn(p, a),
+    advisory: d,
     paths: c
   };
 }
-function wn(n, t, e) {
-  const r = D(t, "neutral"), a = r[0], c = r[1], m = r[11], g = r[10], y = r[5], p = e, f = Lt(n, e), h = ft(n, e), S = [
-    B("text-page", "Text on the page", m, a, 4.5, [
-      `${p}.text`,
-      `${p}.bg`
+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`
     ]),
-    B("text-surface", "Text on a surface", m, c, 4.5, [
-      `${p}.text`,
-      `${p}.surface`
+    W("text-surface", "Text on a surface", d, c, 4.5, [
+      `${y}.text`,
+      `${y}.surface`
     ]),
-    B("muted-page", "Muted text on the page", g, a, 4.5, [
-      `${p}.muted`,
-      `${p}.bg`
+    W("muted-page", "Muted text on the page", p, a, 4.5, [
+      `${y}.muted`,
+      `${y}.bg`
     ]),
-    B("muted-surface", "Muted text on a surface", g, c, 4.5, [
-      `${p}.muted`,
-      `${p}.surface`
+    W("muted-surface", "Muted text on a surface", p, c, 4.5, [
+      `${y}.muted`,
+      `${y}.surface`
     ])
   ];
-  for (const { family: T, label: w } of xn) {
-    const R = D(t, T);
-    S.push(
-      B(
-        `${T}-text`,
-        `${w} text on the page`,
-        R[10],
+  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}.${T}`, `${p}.bg`]
+        [`${f}.${v}`, `${y}.bg`]
       )
     );
   }
@@ -2046,130 +2428,130 @@ function wn(n, t, e) {
     { family: "secondary", on: "onSecondary", label: "Label on a secondary button" },
     { family: "danger", on: "onDanger", label: "Label on a danger button" }
   ];
-  for (const { family: T, on: w, label: R } of x)
-    S.push(
-      B(`${w}-fill`, R, h[w], D(t, T)[8], 4.5, [
-        `${f}.${w}`,
-        `${f}.${T}`
+  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 S.push(
-    B(
+  return b.push(
+    W(
       "border-page",
       "Border against the page",
-      y,
+      m,
       a,
       1.15,
-      [`${p}.border`, `${p}.bg`],
+      [`${y}.border`, `${y}.bg`],
       !0
     )
-  ), S;
+  ), b;
 }
-function b(n, t) {
+function T(n, t) {
   return n + Math.random() * (t - n);
 }
-function kt(n) {
+function _e(n) {
   return n[Math.floor(Math.random() * n.length)];
 }
-const Nn = [
+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 Tn() {
-  const n = b(0, 360), t = kt([0.4, 0.8, 1.4, 2.2]), e = n + kt([-1, 1]) * b(110, 200), r = (S, x, T = n) => A({ l: S, c: x * t, h: T }), a = b(0.15, 0.21), c = {
+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(b(0.62, 0.665), 8e-3),
-    text: r(b(0.9, 0.925), 8e-3)
-  }, m = b(0.95, 0.968), g = {
-    bg: r(m, 6e-3),
-    surface: r(b(0.995, 1), 1e-3),
-    surfaceRaised: r(m + 0.016, 4e-3),
-    surfaceHover: r(m - 0.035, 0.01),
-    border: r(b(0.878, 0.9), 0.014),
-    muted: r(b(0.46, 0.5), 0.014),
-    text: r(b(0.23, 0.27), 0.014)
-  }, y = A({ l: b(0.67, 0.74), c: b(0.13, 0.17), h: n }), p = A({
-    l: b(0.79, 0.85),
-    c: b(0.09, 0.13),
+    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 = A({ l: b(0.67, 0.72), c: b(0.15, 0.19), h: b(18, 30) }), h = {
-    accent: y,
-    accentLight: Rt(y, 0.085),
-    secondary: p,
-    secondaryLight: Rt(p, 0.07),
-    success: A({ l: b(0.8, 0.85), c: b(0.15, 0.19), h: b(140, 156) }),
+  }), 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: Rt(f, 0.08),
-    warning: A({ l: b(0.82, 0.86), c: b(0.14, 0.17), h: b(72, 90) }),
+    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 = O(y), h.onSecondary = O(p), h.onDanger = O(f), {
+  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: g,
-    radius: { ...kt(Nn) }
+    light: p,
+    radius: { ..._e(Qn) }
   };
 }
-function Rt(n, t) {
-  const { l: e, c: r, h: a } = pt(n);
-  return A({ l: Math.min(0.97, e + t), c: r * 0.85, h: a });
+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 O(n) {
-  const { c: t, h: e } = pt(n), r = A({ l: 0.17, c: Math.min(0.05, t * 0.3), h: e }), a = A({ l: 0.97, c: Math.min(0.03, t * 0.2), h: e }), c = Q(r, n) >= Q(a, n) ? r : a;
-  return st(c, n, 7);
+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 at(n) {
+function ue(n) {
   return {
     ...n,
-    onAccent: O(n.accent),
-    onSecondary: O(n.secondary),
-    onDanger: O(n.danger)
+    onAccent: Q(n.accent),
+    onSecondary: Q(n.secondary),
+    onDanger: Q(n.danger)
   };
 }
-function X(n) {
-  const t = at(n);
+function re(n) {
+  const t = ue(n);
   return t.onAccent === n.onAccent && t.onSecondary === n.onSecondary && t.onDanger === n.onDanger;
 }
-function st(n, t, e) {
-  if (Q(n, t) >= e) return n;
-  const { l: r, c: a, h: c } = pt(n), m = r >= pt(t).l ? 1 : -1;
-  let g = r;
-  for (let y = 0; y < 120; y++) {
-    g = Math.min(1, Math.max(0, g + m * 8e-3));
-    const p = A({ l: g, c: a, h: c });
-    if (Q(p, t) >= e) return p;
-    if (g === 0 || g === 1) break;
+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 m === 1 ? "#ffffff" : "#000000";
+  return d === 1 ? "#ffffff" : "#000000";
 }
-function Pn(n) {
-  const t = mn(n);
+function qn(n) {
+  const t = Gn(n);
   for (const e of ["dark", "light"])
-    t[e].text = st(
+    t[e].text = ge(
       t[e].text,
       t[e].bg,
       7
-    ), t[e].text = st(
+    ), t[e].text = ge(
       t[e].text,
       t[e].surface,
       7
-    ), t[e].muted = st(
+    ), t[e].muted = ge(
       t[e].muted,
       t[e].bg,
       4.5
-    ), t[e].muted = st(
+    ), t[e].muted = ge(
       t[e].muted,
       t[e].surface,
       4.5
@@ -2182,35 +2564,35 @@ function Pn(n) {
         ["onDanger", "danger"]
       ]) {
         const c = e[a];
-        Q(e[r], c) < 7 && (e[r] = O(c));
+        ae(e[r], c) < 7 && (e[r] = Q(c));
       }
   return t;
 }
-function Sn(n) {
-  return n === "light" ? { ...Dt.color, ...Ge } : { ...Dt.color };
+function eo(n) {
+  return n === "light" ? { ...Oe.color, ...or } : { ...Oe.color };
 }
-function $n(n, t) {
-  const e = Sn(t);
-  return Object.entries(pn(n, t)).filter(
-    ([r, a]) => lt(a) !== lt(e[r] ?? "")
+function to(n, t) {
+  const e = eo(t);
+  return Object.entries(Fn(n, t)).filter(
+    ([r, a]) => ye(a) !== ye(e[r] ?? "")
   );
 }
-function Cn(n) {
-  return ye.filter(
-    (t) => n.radius[t] !== Dt.radius[t]
+function ro(n) {
+  return Rt.filter(
+    (t) => n.radius[t] !== Oe.radius[t]
   ).map((t) => [t, n.radius[t]]);
 }
-function ee(n, t) {
+function ft(n, t) {
   const e = [];
   t === "light" && e.push('  appearance: "light",');
-  const r = $n(n, t);
-  r.length > 0 && (e.push("  color: {"), r.forEach(([m, g], y) => {
-    const p = y === r.length - 1 ? "" : ",";
-    e.push(`    ${m}: "${lt(g)}"${p}`);
+  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 = Cn(n);
+  const a = ro(n);
   a.length > 0 && e.push(
-    `  radius: { ${a.map(([m, g]) => `${m}: ${g}`).join(", ")} }`
+    `  radius: { ${a.map(([d, p]) => `${d}: ${p}`).join(", ")} }`
   );
   const c = e.length - 1;
   return c >= 0 && (e[c] = e[c].replace(/,$/, "")), e.length === 0 ? "" : `{
@@ -2218,8 +2600,8 @@ ${e.join(`
 `)}
 }`;
 }
-function ka(n) {
-  const t = ee(n, "dark"), e = ee(n, "light");
+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
@@ -2236,255 +2618,265 @@ export function App({ appearance }: { appearance: "dark" | "light" }) {
   );
 }`;
 }
-function Ra(n) {
+function os(n) {
   return JSON.stringify(n, null, 2);
 }
-function kn(n) {
+function no(n) {
   const t = n.trim();
   if (t === "") return { error: "Nothing to import." };
-  const e = Me(t);
+  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 mt = {
+const we = {
   sm: 24,
   md: 32,
   lg: 48,
   xl: 64,
   full: 40
-}, At = 999, Rn = [
+}, je = 999, oo = [
   "bg",
   "surface",
   "surfaceRaised",
   "surfaceHover",
   "border"
-], An = ["text", "muted"];
-function Aa({
+], ao = ["text", "muted"];
+function as({
   value: n,
   onChange: t,
   appearance: e,
   onAppearanceChange: r,
-  actions: a,
-  footer: c,
-  className: m
+  remoteFontsAllowed: a = !0,
+  actions: c,
+  footer: d,
+  className: p
 }) {
-  const [g, y] = _(
-    () => X(n.hue) && (n.lightHue === null || X(n.lightHue))
-  ), [p, f] = _(null);
-  if (p !== null && p !== n) {
-    f(null);
-    const i = X(n.hue) && (n.lightHue === null || X(n.lightHue));
-    i !== g && y(i);
+  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 [h, S] = _(""), [x, T] = _(null), w = it(() => yn(n, e), [n, e]), R = it(
-    () => wn(n, w, e),
-    [n, w, e]
-  ), tt = it(() => {
+  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 u of R)
-      if (!(u.advisory || u.level !== "fail"))
-        for (const $ of u.paths)
-          i.has($) || i.set($, `${u.label}: ${u.ratio.toFixed(1)}, needs ${u.min}`);
+    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;
-  }, [R]), be = Qt(n), Ht = _t.find((i) => Qt(i.theme) === be)?.id ?? "custom", zt = n[e], xt = Lt(n, e), vt = ft(n, e), xe = R.filter(
+  }, [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 ut(i) {
-    f(i), t(i);
+  function be(i) {
+    h(i), t(i);
   }
-  function et(i) {
-    const u = i(n);
-    ut(
-      g ? {
-        ...u,
-        hue: at(u.hue),
-        lightHue: u.lightHue === null ? null : at(u.lightHue)
-      } : u
+  function U(i) {
+    const g = i(n);
+    be(
+      m ? {
+        ...g,
+        hue: ue(g.hue),
+        lightHue: g.lightHue === null ? null : ue(g.lightHue)
+      } : g
     );
   }
-  function wt(i) {
+  function Me(i) {
     y(
-      X(i.hue) && (i.lightHue === null || X(i.lightHue))
-    ), ut(i);
+      re(i.hue) && (i.lightHue === null || re(i.lightHue))
+    ), be(i);
   }
-  function Nt(i, u) {
-    et(($) => {
-      const Tt = Lt($, e);
+  function Re(i, g) {
+    U((P) => {
+      const Ie = Ve(P, e);
       return {
-        ...$,
-        [Tt]: { ...ft($, e), [i]: u }
+        ...P,
+        [Ie]: { ...Se(P, e), [i]: g }
       };
     });
   }
-  function ve(i) {
-    et((u) => ({
-      ...u,
-      lightHue: i ? { ...u.hue } : null
+  function Gt(i) {
+    U((g) => ({
+      ...g,
+      lightHue: i ? { ...g.hue } : null
     }));
   }
-  function we(i) {
-    y(i), i && ut({
+  function Ft(i) {
+    y(i), i && be({
       ...n,
-      hue: at(n.hue),
-      lightHue: n.lightHue === null ? null : at(n.lightHue)
+      hue: ue(n.hue),
+      lightHue: n.lightHue === null ? null : ue(n.lightHue)
     });
   }
-  function Bt(i, u) {
-    et(($) => ({
-      ...$,
-      [e]: { ...$[e], [i]: u }
+  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 Ne(i) {
-    et((u) => ({ ...u, name: i === "" ? void 0 : i }));
+  function Et(i) {
+    U((g) => ({ ...g, motion: i }));
   }
-  function Te(i, u) {
-    et(($) => ({
-      ...$,
-      radius: { ...$.radius, [i]: u }
+  function _t(i, g) {
+    U((P) => ({
+      ...P,
+      radius: { ...P.radius, [i]: g }
     }));
   }
-  function Pe(i) {
-    const u = kn(i);
-    if (u.error !== void 0 || u.draft === void 0) {
-      T(u.error ?? "That did not look like a theme.");
+  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;
     }
-    wt(u.draft), u.appearance !== void 0 && r(u.appearance), T(null), S("");
+    Me(g.draft), g.appearance !== void 0 && r(g.appearance), N(null), x("");
   }
-  return /* @__PURE__ */ d("div", { className: s("flex min-w-0 flex-col gap-(--space-md)", m), children: [
-    /* @__PURE__ */ d("div", { className: "flex flex-wrap items-end gap-3 border-y border-gryt-border py-3", children: [
+  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(
-        fr,
+        Je,
         {
           label: "Preset",
           onValueChange: (i) => {
-            const u = je.get(String(i));
-            u && wt(u.theme);
+            const g = ar.get(String(i));
+            g && Me(g.theme);
           },
           options: [
-            ..._t.map((i) => ({
+            ...tt.map((i) => ({
               label: i.name,
               value: i.id
             })),
-            ...Ht === "custom" ? [{ label: "Custom", value: "custom" }] : []
+            ...F === "custom" ? [{ label: "Custom", value: "custom" }] : []
           ],
           size: "small",
-          value: Ht
+          value: F
         }
       ) }),
       /* @__PURE__ */ o("div", { className: "w-48", children: /* @__PURE__ */ o(
-        me,
+        Ke,
         {
           label: "Name",
-          maxLength: Ee,
-          onChange: (i) => Ne(i.target.value),
+          maxLength: sr,
+          onChange: (i) => zt(i.target.value),
           placeholder: "Untitled theme",
           size: "small",
           value: n.name ?? ""
         }
       ) }),
-      /* @__PURE__ */ d(yt, { onClick: () => wt(Tn()), size: "small", tone: "neutral", children: [
-        /* @__PURE__ */ o(Oe, { "aria-hidden": "true", size: 15 }),
+      /* @__PURE__ */ u(Te, { onClick: () => Me(Zn()), size: "small", tone: "neutral", children: [
+        /* @__PURE__ */ o(pr, { "aria-hidden": "true", size: 15 }),
         "Generate"
       ] }),
-      /* @__PURE__ */ d("div", { className: "ml-auto flex items-end gap-3", children: [
-        /* @__PURE__ */ d(
-          gn,
+      /* @__PURE__ */ u("div", { className: "ml-auto flex items-end gap-3", children: [
+        /* @__PURE__ */ u(
+          Dn,
           {
             "aria-label": "Appearance",
             onValueChange: (i) => {
-              const u = i[i.length - 1];
-              (u === "dark" || u === "light") && r(u);
+              const g = i[i.length - 1];
+              (g === "dark" || g === "light") && r(g);
             },
             value: [e],
             children: [
-              /* @__PURE__ */ o(Jt, { size: "small", value: "dark", children: "Dark" }),
-              /* @__PURE__ */ o(Jt, { size: "small", value: "light", children: "Light" })
+              /* @__PURE__ */ o(ct, { size: "small", value: "dark", children: "Dark" }),
+              /* @__PURE__ */ o(ct, { size: "small", value: "light", children: "Light" })
             ]
           }
         ),
-        a
+        c
       ] })
     ] }),
-    /* @__PURE__ */ d("p", { className: "m-0 text-xs text-gryt-muted", children: [
+    /* @__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__ */ d("div", { className: "flex flex-col gap-2", children: [
-      e === "light" ? /* @__PURE__ */ d("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-gryt-muted", children: [
+    /* @__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(
-          Kt,
+          it,
           {
             checked: n.lightHue !== null,
-            onCheckedChange: ve
+            onCheckedChange: Gt
           }
         ),
         "Light has its own hues"
       ] }) : null,
-      /* @__PURE__ */ d("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-gryt-muted", children: [
-        /* @__PURE__ */ o(Kt, { checked: g, onCheckedChange: we }),
+      /* @__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__ */ d("div", { className: "flex flex-col gap-(--space-md)", children: [
-      /* @__PURE__ */ d(K, { title: "Surfaces", children: [
-        Rn.map((i) => /* @__PURE__ */ o(
-          ot,
+    /* @__PURE__ */ u("div", { className: "flex flex-col gap-(--space-md)", children: [
+      /* @__PURE__ */ u(H, { title: "Surfaces", children: [
+        oo.map((i) => /* @__PURE__ */ o(
+          de,
           {
-            label: Zt[i],
-            onChange: (u) => Bt(i, u),
-            value: zt[i],
-            warning: tt.get(`${e}.${i}`)
+            label: ut[i],
+            onChange: (g) => Qe(i, g),
+            value: q[i],
+            warning: $.get(`${e}.${i}`)
           },
           i
         )),
-        /* @__PURE__ */ o(U, { label: "neutral", steps: D(w, "neutral") })
+        /* @__PURE__ */ o(te, { label: "neutral", steps: z(k, "neutral") })
       ] }),
-      /* @__PURE__ */ o(K, { title: "Text", children: An.map((i) => /* @__PURE__ */ o(
-        ot,
+      /* @__PURE__ */ o(H, { title: "Text", children: ao.map((i) => /* @__PURE__ */ o(
+        de,
         {
-          label: Zt[i],
-          onChange: (u) => Bt(i, u),
-          value: zt[i],
-          warning: tt.get(`${e}.${i}`)
+          label: ut[i],
+          onChange: (g) => Qe(i, g),
+          value: q[i],
+          warning: $.get(`${e}.${i}`)
         },
         i
       )) }),
-      /* @__PURE__ */ d(K, { title: "Accent", children: [
+      /* @__PURE__ */ u(H, { title: "Accent", children: [
         ["accent", "accentLight", "onAccent"].map((i) => /* @__PURE__ */ o(
-          ot,
+          de,
           {
-            disabled: g && i === "onAccent",
-            label: Ct[i],
-            onChange: (u) => Nt(i, u),
-            value: vt[i],
-            warning: tt.get(`${xt}.${i}`)
+            disabled: m && i === "onAccent",
+            label: Fe[i],
+            onChange: (g) => Re(i, g),
+            value: Ae[i],
+            warning: $.get(`${Ce}.${i}`)
           },
           i
         )),
-        /* @__PURE__ */ o(U, { label: "accent", steps: D(w, "accent") })
+        /* @__PURE__ */ o(te, { label: "accent", steps: z(k, "accent") })
       ] }),
-      /* @__PURE__ */ d(K, { title: "Secondary", children: [
+      /* @__PURE__ */ u(H, { title: "Secondary", children: [
         ["secondary", "secondaryLight", "onSecondary"].map(
           (i) => /* @__PURE__ */ o(
-            ot,
+            de,
             {
-              disabled: g && i === "onSecondary",
-              label: Ct[i],
-              onChange: (u) => Nt(i, u),
-              value: vt[i],
-              warning: tt.get(`${xt}.${i}`)
+              disabled: m && i === "onSecondary",
+              label: Fe[i],
+              onChange: (g) => Re(i, g),
+              value: Ae[i],
+              warning: $.get(`${Ce}.${i}`)
             },
             i
           )
         ),
-        /* @__PURE__ */ o(U, { label: "secondary", steps: D(w, "secondary") })
+        /* @__PURE__ */ o(te, { label: "secondary", steps: z(k, "secondary") })
       ] }),
-      /* @__PURE__ */ d(K, { title: "Status", children: [
+      /* @__PURE__ */ u(H, { title: "Status", children: [
         [
           "success",
           "danger",
@@ -2492,90 +2884,101 @@ function Aa({
           "onDanger",
           "warning"
         ].map((i) => /* @__PURE__ */ o(
-          ot,
+          de,
           {
-            disabled: g && i === "onDanger",
-            label: Ct[i],
-            onChange: (u) => Nt(i, u),
-            value: vt[i],
-            warning: tt.get(`${xt}.${i}`)
+            disabled: m && i === "onDanger",
+            label: Fe[i],
+            onChange: (g) => Re(i, g),
+            value: Ae[i],
+            warning: $.get(`${Ce}.${i}`)
           },
           i
         )),
-        /* @__PURE__ */ o(U, { label: "success", steps: D(w, "success") }),
-        /* @__PURE__ */ o(U, { label: "danger", steps: D(w, "danger") }),
-        /* @__PURE__ */ o(U, { label: "warning", steps: D(w, "warning") })
+        /* @__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(K, { title: "Radius", children: ye.map((i) => {
-        const u = n.radius[i], $ = i === "full" && u >= At ? mt.full : u;
-        return /* @__PURE__ */ d("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ d("div", { className: "mb-1 flex items-baseline justify-between gap-2", children: [
-            /* @__PURE__ */ o("span", { className: "text-xs font-medium text-gryt-muted", children: qt[i] }),
-            /* @__PURE__ */ o("span", { className: "font-mono text-[11px] text-gryt-muted", children: u >= At ? "pill" : `${u}px` })
+      /* @__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(
-            pr,
+            At,
             {
-              "aria-label": `${qt[i]} radius`,
-              max: mt[i],
+              "aria-label": `${gt[i]} radius`,
+              max: we[i],
               min: 0,
-              onValueChange: (Tt) => {
-                const Ft = Number(Tt);
-                Te(
+              onValueChange: (Ie) => {
+                const Ze = Number(Ie);
+                _t(
                   i,
-                  i === "full" && Ft >= mt.full ? At : Ft
+                  i === "full" && Ze >= we.full ? je : Ze
                 );
               },
-              value: Math.min($, mt[i])
+              value: Math.min(P, we[i])
             }
           ),
-          /* @__PURE__ */ o("p", { className: "m-0 pt-1 text-[11px] text-gryt-muted", children: fn[i] })
+          /* @__PURE__ */ o("p", { className: "m-0 pt-1 text-[11px] text-gryt-muted", children: Bn[i] })
         ] }, i);
       }) }),
       /* @__PURE__ */ o(
-        bn,
+        Xn,
         {
-          checks: R,
-          onRepair: xe > 0 ? () => ut(Pn(n)) : void 0
+          checks: w,
+          onRepair: Dt > 0 ? () => be(qn(n)) : void 0
         }
       ),
-      /* @__PURE__ */ d("section", { className: "min-w-0", children: [
+      /* @__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__ */ d("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+        /* @__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) => S(i.target.value),
+              onChange: (i) => x(i.target.value),
               placeholder: "{ …",
               rows: 2,
               spellCheck: !1,
-              value: h
+              value: b
             }
           ),
-          /* @__PURE__ */ o(yt, { onClick: () => Pe(h), tone: "neutral", children: "Load" })
+          /* @__PURE__ */ o(Te, { onClick: () => Ht(b), tone: "neutral", children: "Load" })
         ] }),
-        x ? /* @__PURE__ */ o("p", { className: "m-0 pt-2 text-sm text-gryt-danger-11", children: x }) : null
+        v ? /* @__PURE__ */ o("p", { className: "m-0 pt-2 text-sm text-gryt-danger-11", children: v }) : null
       ] }),
-      c
+      d
     ] })
   ] });
 }
-function K({ title: n, children: t }) {
-  return /* @__PURE__ */ d("section", { className: "min-w-0", children: [
+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 In = {
+const so = {
   primary: "bg-gryt-accent",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning",
   danger: "bg-gryt-danger"
 };
-function Ia({
+function ss({
   className: n,
   value: t,
   label: e,
@@ -2583,24 +2986,24 @@ function Ia({
   tone: a = "primary",
   ...c
 }) {
-  return /* @__PURE__ */ d(
-    nt.Root,
+  return /* @__PURE__ */ u(
+    ce.Root,
     {
       value: t,
       className: s("gryt-meter flex w-full flex-col gap-1.5", n),
       ...c,
       children: [
-        (e || r) && /* @__PURE__ */ d("div", { className: "flex items-baseline justify-between gap-2", children: [
-          e ? /* @__PURE__ */ o(nt.Label, { className: "text-sm text-gryt-muted", children: e }) : /* @__PURE__ */ o("span", {}),
-          r && /* @__PURE__ */ o(nt.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(nt.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-          nt.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: s(
               "h-full rounded-(--gryt-radius-full)",
               "transition-[width] duration-120 ease-out motion-reduce:transition-none",
-              In[a]
+              so[a]
             )
           }
         ) })
@@ -2608,10 +3011,10 @@ function Ia({
     }
   );
 }
-const Dn = l(
+const io = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      E.Popup,
+      V.Popup,
       {
         ref: r,
         className: s(
@@ -2628,9 +3031,9 @@ const Dn = l(
       }
     );
   }
-), Ln = l(function({ className: t, ...e }, r) {
+), lo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Backdrop,
+    V.Backdrop,
     {
       ref: r,
       className: s(
@@ -2643,9 +3046,9 @@ const Dn = l(
       ...e
     }
   );
-}), Mn = l(function({ className: t, ...e }, r) {
+}), co = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Title,
+    V.Title,
     {
       ref: r,
       className: s(
@@ -2655,9 +3058,9 @@ const Dn = l(
       ...e
     }
   );
-}), Gn = l(function({ className: t, ...e }, r) {
+}), uo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Description,
+    V.Description,
     {
       ref: r,
       className: s(
@@ -2667,16 +3070,16 @@ const Dn = l(
       ...e
     }
   );
-}), Da = {
-  Root: E.Root,
-  Trigger: E.Trigger,
-  Portal: E.Portal,
-  Backdrop: Ln,
-  Popup: Dn,
-  Title: Mn,
-  Description: Gn,
-  Close: E.Close
-}, fe = [
+}), 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
@@ -2684,23 +3087,23 @@ const Dn = l(
   "data-highlighted:bg-gryt-surface-raised",
   "data-selected:text-gryt-accent-11",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
-].join(" "), he = [
-  de,
-  ue.medium,
+].join(" "), Lt = [
+  kt,
+  Pt.medium,
   "border-gryt-border",
-  P
-].join(" "), jn = l(function({ className: t, ...e }, r) {
+  A
+].join(" "), go = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    v.Input,
+    S.Input,
     {
       ref: r,
-      className: s("gryt-combobox-input", he, t),
+      className: s("gryt-combobox-input", Lt, t),
       ...e
     }
   );
-}), En = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
+}), mo = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
   return /* @__PURE__ */ o(
-    v.Positioner,
+    S.Positioner,
     {
       ref: a,
       sideOffset: e,
@@ -2708,34 +3111,34 @@ const Dn = l(
       ...r
     }
   );
-}), Hn = l(
+}), po = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      v.Popup,
+      S.Popup,
       {
         ref: r,
         className: s(
           "gryt-combobox max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
+          Z,
           Y,
-          H,
           t
         ),
         ...e
       }
     );
   }
-), zn = l(function({ className: t, ...e }, r) {
+), yo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    v.Item,
+    S.Item,
     {
       ref: r,
-      className: s("gryt-combobox-item", fe, t),
+      className: s("gryt-combobox-item", It, t),
       ...e
     }
   );
-}), Bn = l(function({ className: t, ...e }, r) {
+}), fo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    v.Empty,
+    S.Empty,
     {
       ref: r,
       className: s(
@@ -2745,39 +3148,39 @@ const Dn = l(
       ...e
     }
   );
-}), La = {
-  Root: v.Root,
-  Input: jn,
-  InputGroup: v.InputGroup,
-  Trigger: v.Trigger,
-  Icon: v.Icon,
-  Clear: v.Clear,
-  Value: v.Value,
-  Chips: v.Chips,
-  Chip: v.Chip,
-  ChipRemove: v.ChipRemove,
-  Portal: v.Portal,
-  Positioner: En,
-  Popup: Hn,
-  List: v.List,
-  Item: zn,
-  ItemIndicator: v.ItemIndicator,
-  Group: v.Group,
-  GroupLabel: v.GroupLabel,
-  Empty: Bn,
-  Separator: v.Separator
-}, Fn = l(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(
-    N.Input,
+    C.Input,
     {
       ref: r,
-      className: s("gryt-autocomplete-input", he, t),
+      className: s("gryt-autocomplete-input", Lt, t),
       ...e
     }
   );
-}), _n = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
+}), bo = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
   return /* @__PURE__ */ o(
-    N.Positioner,
+    C.Positioner,
     {
       ref: a,
       sideOffset: e,
@@ -2785,32 +3188,32 @@ const Dn = l(
       ...r
     }
   );
-}), Vn = l(function({ className: t, ...e }, r) {
+}), xo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    N.Popup,
+    C.Popup,
     {
       ref: r,
       className: s(
         "gryt-autocomplete max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
+        Z,
         Y,
-        H,
         t
       ),
       ...e
     }
   );
-}), On = l(function({ className: t, ...e }, r) {
+}), vo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    N.Item,
+    C.Item,
     {
       ref: r,
-      className: s("gryt-autocomplete-item", fe, t),
+      className: s("gryt-autocomplete-item", It, t),
       ...e
     }
   );
-}), Yn = l(function({ className: t, ...e }, r) {
+}), wo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    N.Empty,
+    C.Empty,
     {
       ref: r,
       className: s(
@@ -2820,27 +3223,27 @@ const Dn = l(
       ...e
     }
   );
-}), Ma = {
-  Root: N.Root,
-  Input: Fn,
-  InputGroup: N.InputGroup,
-  Trigger: N.Trigger,
-  Icon: N.Icon,
-  Clear: N.Clear,
-  Value: N.Value,
-  Portal: N.Portal,
-  Positioner: _n,
-  Popup: Vn,
-  List: N.List,
-  Item: On,
-  Group: N.Group,
-  GroupLabel: N.GroupLabel,
-  Empty: Yn,
-  Separator: N.Separator
-}, Ga = l(
+}), 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(
-      qe,
+      Tr,
       {
         ref: r,
         className: s("gryt-checkbox-group flex flex-col gap-2", t),
@@ -2848,10 +3251,10 @@ const Dn = l(
       }
     );
   }
-), Un = l(
+), No = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Et.Trigger,
+      We.Trigger,
       {
         ref: r,
         className: s(
@@ -2859,17 +3262,17 @@ const Dn = l(
           "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",
-          P,
+          A,
           t
         ),
         ...e
       }
     );
   }
-), Xn = l(
+), To = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Et.Panel,
+      We.Panel,
       {
         ref: r,
         className: s(
@@ -2885,23 +3288,23 @@ const Dn = l(
       }
     );
   }
-), ja = {
-  Root: Et.Root,
-  Trigger: Un,
-  Panel: Xn
-}, Ea = l(function({ className: t, ...e }, r) {
+), us = {
+  Root: We.Root,
+  Trigger: No,
+  Panel: To
+}, gs = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    tr,
+    Sr,
     {
       ref: r,
       className: s("gryt-form flex flex-col gap-(--gryt-space-lg)", t),
       ...e
     }
   );
-}), Kn = l(
+}), So = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      ie.Root,
+      Tt.Root,
       {
         ref: r,
         className: s(
@@ -2912,9 +3315,9 @@ const Dn = l(
       }
     );
   }
-), Wn = l(function({ className: t, ...e }, r) {
+), $o = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    ie.Legend,
+    Tt.Legend,
     {
       ref: r,
       className: s(
@@ -2924,10 +3327,10 @@ const Dn = l(
       ...e
     }
   );
-}), Ha = { Root: Kn, Legend: Wn }, za = l(
+}), ms = { Root: So, Legend: $o }, ps = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      er,
+      $r,
       {
         ref: r,
         className: s(
@@ -2939,9 +3342,9 @@ const Dn = l(
       }
     );
   }
-), Jn = l(function({ className: t, ...e }, r) {
+), ko = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    k.Trigger,
+    I.Trigger,
     {
       ref: r,
       className: s(
@@ -2949,38 +3352,38 @@ const Dn = l(
         "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",
-        P,
+        A,
         t
       ),
       ...e
     }
   );
-}), Qn = l(function({ className: t, ...e }, r) {
+}), Po = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    k.Popup,
+    I.Popup,
     {
       ref: r,
       className: s(
         "gryt-navigation-menu-popup outline-none",
+        Z,
         Y,
-        H,
         t
       ),
       ...e
     }
   );
-}), Zn = l(function({ className: t, ...e }, r) {
+}), Co = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    k.Positioner,
+    I.Positioner,
     {
       ref: r,
       className: s("gryt-navigation-menu-positioner outline-none", t),
       ...e
     }
   );
-}), qn = l(function({ className: t, ...e }, r) {
+}), Ao = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    k.Viewport,
+    I.Viewport,
     {
       ref: r,
       className: s(
@@ -2990,81 +3393,81 @@ const Dn = l(
       ...e
     }
   );
-}), to = l(function({ className: t, ...e }, r) {
+}), Mo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    k.Link,
+    I.Link,
     {
       ref: r,
       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",
-        P,
+        A,
         t
       ),
       ...e
     }
   );
-}), Ba = {
-  Root: k.Root,
-  List: k.List,
-  Item: k.Item,
-  Trigger: Jn,
-  Content: k.Content,
-  Portal: k.Portal,
-  Positioner: Zn,
-  Viewport: qn,
-  Popup: Qn,
-  Link: to,
-  Icon: k.Icon,
-  Arrow: k.Arrow
-}, re = "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", Fa = l(
+}), 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__ */ d(
-      z.Root,
+    return /* @__PURE__ */ u(
+      X.Root,
       {
         ref: c,
         className: s("gryt-number-field flex flex-col gap-1.5", t),
         ...a,
         children: [
-          e && (r ? /* @__PURE__ */ d(z.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(z.ScrubAreaCursor, {})
+            /* @__PURE__ */ o(X.ScrubAreaCursor, {})
           ] }) : /* @__PURE__ */ o("span", { className: "text-sm text-gryt-muted", children: e })),
-          /* @__PURE__ */ d(
-            z.Group,
+          /* @__PURE__ */ u(
+            X.Group,
             {
               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",
-                q
+                ie
               ),
               children: [
                 /* @__PURE__ */ o(
-                  z.Decrement,
+                  X.Decrement,
                   {
                     "aria-label": "Decrease",
-                    className: s(re, "rounded-l-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Ye, { size: 14, weight: "bold" })
+                    className: s(ht, "rounded-l-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(yr, { size: 14, weight: "bold" })
                   }
                 ),
                 /* @__PURE__ */ o(
-                  z.Input,
+                  X.Input,
                   {
                     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",
-                      P
+                      A
                     )
                   }
                 ),
                 /* @__PURE__ */ o(
-                  z.Increment,
+                  X.Increment,
                   {
                     "aria-label": "Increase",
-                    className: s(re, "rounded-r-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Ue, { size: 14, weight: "bold" })
+                    className: s(ht, "rounded-r-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(fr, { size: 14, weight: "bold" })
                   }
                 )
               ]
@@ -3074,17 +3477,17 @@ const Dn = l(
       }
     );
   }
-), _a = l(
+), hs = l(
   function({ className: t, length: e = 6, ...r }, a) {
     return /* @__PURE__ */ o(
-      Ut.Root,
+      at.Root,
       {
         ref: a,
         length: e,
         className: s("gryt-otp-field flex gap-2", t),
         ...r,
-        children: Array.from({ length: e }, (c, m) => /* @__PURE__ */ o(
-          Ut.Input,
+        children: Array.from({ length: e }, (c, d) => /* @__PURE__ */ o(
+          at.Input,
           {
             className: s(
               "gryt-otp-input h-12 w-10 rounded-(--gryt-radius-md) text-center",
@@ -3092,18 +3495,18 @@ const Dn = l(
               "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",
-              P
+              A
             )
           },
-          m
+          d
         ))
       }
     );
   }
-), eo = l(
+), Ro = l(
   function({ className: t, sideOffset: e = 8, ...r }, a) {
     return /* @__PURE__ */ o(
-      W.Positioner,
+      ne.Positioner,
       {
         ref: a,
         sideOffset: e,
@@ -3112,32 +3515,32 @@ const Dn = l(
       }
     );
   }
-), ro = l(
+), Io = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      W.Popup,
+      ne.Popup,
       {
         ref: r,
         className: s(
           "gryt-preview-card w-64 max-w-[calc(100vw-2rem)] p-4 outline-none",
+          Z,
           Y,
-          H,
           t
         ),
         ...e
       }
     );
   }
-), Va = {
-  Root: W.Root,
-  Trigger: W.Trigger,
-  Portal: W.Portal,
-  Positioner: eo,
-  Popup: ro,
-  Arrow: W.Arrow
-}, no = l(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(
-    J.Root,
+    oe.Root,
     {
       ref: r,
       className: s(
@@ -3148,121 +3551,130 @@ const Dn = l(
       ...e
     }
   );
-}), oo = l(function({ className: t, ...e }, r) {
+}), Do = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    J.Separator,
+    oe.Separator,
     {
       ref: r,
       className: s("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", t),
       ...e
     }
   );
-}), Oa = {
-  Root: no,
-  Group: J.Group,
-  Button: J.Button,
-  Link: J.Link,
-  Input: J.Input,
-  Separator: oo
+}), xs = {
+  Root: Lo,
+  Group: oe.Group,
+  Button: oe.Button,
+  Link: oe.Link,
+  Input: oe.Input,
+  Separator: Do
 };
 export {
-  wa as Accordion,
-  pa as Alert,
-  Da as AlertDialog,
-  Ma as Autocomplete,
-  gr as Avatar,
-  ra as Badge,
-  yt as Button,
-  da as Card,
-  ma as CardActions,
-  ga as CardContent,
-  ua as CardHeader,
-  Kt as Checkbox,
-  Ga as CheckboxGroup,
-  na as Chip,
-  ja as Collapsible,
-  La as Combobox,
-  ta as Composer,
-  Na as ContextMenu,
-  ea as ConversationItem,
-  ba as Dialog,
-  ca as Divider,
-  xa as Drawer,
-  Ha as Fieldset,
-  Ea as Form,
-  Xa as GRYT_HUE_KEYS,
-  Ka as GRYT_NEUTRAL_KEYS,
-  Wa as GRYT_RADIUS_KEYS,
-  Ja as GRYT_THEME_NAME_MAX,
-  Jo as GrytProvider,
-  Qo as IconButton,
-  $t as Menu,
-  za as Menubar,
-  qo as MessageBubble,
-  Ia as Meter,
-  Ba as NavigationMenu,
-  Fa as NumberField,
-  _a as OtpField,
-  Ta as Popover,
-  Va as PreviewCard,
-  ya as Progress,
-  oa as Radio,
-  aa as RadioGroup,
-  $a as ScrollArea,
-  fr as Select,
-  ha as Skeleton,
-  pr as Slider,
-  fa as Spinner,
-  Zo as Surface,
-  sa as Switch,
-  Fr as Tab,
-  va as Tabs,
-  me as TextField,
-  Aa as ThemeEditor,
-  Pa as Toast,
-  Jt as Toggle,
-  gn as ToggleGroup,
-  Oa as Toolbar,
-  ia as Tooltip,
-  la as TooltipProvider,
-  Qa as alphaScale,
-  Cs as avatarSeed,
-  mn as cloneDraft,
-  Za as cloneGrytTheme,
+  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,
-  qa as contrast,
-  ts as createGrytTheme,
-  es as decodeGrytTheme,
-  rs as encodeDraft,
-  ns as encodeGrytTheme,
-  os as grytAlphaScales,
-  as as grytAlphaScalesLight,
-  Ca as grytDraft,
-  ss as grytLightTokens,
-  is as grytPresets,
-  ls as grytPresetsById,
-  cs as grytScales,
-  ds as grytScalesLight,
-  us as grytTheme,
-  gs as grytThemeHues,
-  ms as grytThemeToOptions,
-  ps as grytTokens,
-  ys as hexToOklch,
-  fs as hexToRgb,
-  hs as hueScale,
-  bs as hueScaleLight,
-  kn as importTheme,
-  xs as isHexColor,
-  vs as neutralScale,
-  ws as neutralScaleLight,
-  Ns as normalizeHexColor,
-  Ts as normalizeThemeName,
-  Ps as oklchToHex,
-  Ss as rgbToHex,
-  ka as themeCode,
-  Ra as themeJson,
-  yn as themeStyle,
-  Sr as useMediaQuery,
-  Sa as useToastManager
+  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