@gryt/ui 0.21.1 → 0.23.0

package/dist/index.js

@@ -1,101 +1,101 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { Tooltip as I } from "@base-ui/react/tooltip";
-import { createContext as it, useContext as _, useRef as W, forwardRef as s, useCallback as K, useLayoutEffect as ht, useMemo as wt, useState as vt, useEffect as Nt, useSyncExternalStore as Pt } from "react";
-import { createGrytTheme as Tt } from "@gryt/theme";
-import { GRYT_HUE_KEYS as ma, GRYT_NEUTRAL_KEYS as pa, GRYT_RADIUS_KEYS as ba, GRYT_THEME_NAME_MAX as fa, alphaScale as xa, cloneGrytTheme as ha, contrast as wa, createGrytTheme as va, decodeGrytTheme as Na, encodeGrytTheme as Pa, grytAlphaScales as Ta, grytAlphaScalesLight as ka, grytLightTokens as Ca, grytPresets as Sa, grytPresetsById as $a, grytScales as Ra, grytScalesLight as Ia, grytTheme as Aa, grytThemeHues as Da, grytThemeToOptions as Ma, grytTokens as Ga, hexToOklch as La, hexToRgb as ja, hueScale as za, hueScaleLight as Ba, isHexColor as Fa, neutralScale as Ea, neutralScaleLight as Va, normalizeHexColor as _a, normalizeThemeName as Ya, oklchToHex as Ha, rgbToHex as Oa } from "@gryt/theme";
-import { Button as st } from "@base-ui/react/button";
-import { clsx as kt } from "clsx";
-import { twMerge as Ct } from "tailwind-merge";
-import { Field as V } from "@base-ui/react/field";
-import { PaperPlaneTilt as St, X as ct, Check as lt, CaretUpDown as $t, CircleNotch as Rt, CaretDown as It, Minus as At, Plus as Dt } from "@phosphor-icons/react";
-import { Avatar as O } from "@base-ui/react/avatar";
-import { owlAvatarDataUri as Mt } from "@gryt/owl";
-import { avatarSeed as Ua } from "@gryt/owl";
-import { Checkbox as tt } from "@base-ui/react/checkbox";
-import { Radio as et } from "@base-ui/react/radio";
-import { RadioGroup as Gt } from "@base-ui/react/radio-group";
-import { Switch as rt } from "@base-ui/react/switch";
-import { Slider as z } from "@base-ui/react/slider";
-import { Select as h } from "@base-ui/react/select";
-import { Separator as Lt } from "@base-ui/react/separator";
-import { Progress as X } from "@base-ui/react/progress";
-import { Dialog as C } from "@base-ui/react/dialog";
-import { Drawer as v } from "@base-ui/react/drawer";
-import { Menu as A } from "@base-ui/react/menu";
-import { Tabs as E } from "@base-ui/react/tabs";
-import { Accordion as F } from "@base-ui/react/accordion";
-import { ContextMenu as k } from "@base-ui/react/context-menu";
-import { Popover as P } from "@base-ui/react/popover";
-import { Toast as T } from "@base-ui/react/toast";
-import { ScrollArea as L } from "@base-ui/react/scroll-area";
-import { Toggle as jt } from "@base-ui/react/toggle";
-import { ToggleGroup as zt } from "@base-ui/react/toggle-group";
-import { Meter as B } from "@base-ui/react/meter";
-import { AlertDialog as S } from "@base-ui/react/alert-dialog";
-import { Autocomplete as p } from "@base-ui/react/autocomplete";
-import { Combobox as y } from "@base-ui/react/combobox";
-import { CheckboxGroup as Bt } from "@base-ui/react/checkbox-group";
-import { Collapsible as Q } from "@base-ui/react/collapsible";
-import { Form as Ft } from "@base-ui/react/form";
-import { Fieldset as dt } from "@base-ui/react/fieldset";
-import { Menubar as Et } from "@base-ui/react/menubar";
-import { NavigationMenu as w } from "@base-ui/react/navigation-menu";
-import { NumberField as R } from "@base-ui/react/number-field";
-import { OTPField as ot } from "@base-ui/react/otp-field";
-import { PreviewCard as M } from "@base-ui/react/preview-card";
-import { Toolbar as G } from "@base-ui/react/toolbar";
-const gt = it(void 0);
-function ut() {
-  return _(gt);
+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);
 }
-function Vt(a) {
-  return Object.keys(a).some((t) => t.startsWith("--"));
+function rr(n) {
+  return Object.keys(n).some((t) => t.startsWith("--"));
 }
-function po({
-  children: a,
+function Jo({
+  children: n,
   className: t,
   theme: e,
   tooltipDelay: r = 400,
-  containOverlays: i = !1
+  containOverlays: a = !1
 }) {
-  const c = W(null), l = e === void 0 ? void 0 : Vt(e) ? e : Tt(e);
-  return /* @__PURE__ */ o("div", { className: t, style: l, ref: c, children: /* @__PURE__ */ o(
-    gt.Provider,
+  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,
     {
-      value: i ? c : void 0,
-      children: /* @__PURE__ */ o(I.Provider, { delay: r, children: a })
+      value: a ? c : void 0,
+      children: /* @__PURE__ */ o(F.Provider, { delay: r, children: n })
     }
   ) });
 }
-function n(...a) {
-  return Ct(kt(a));
+function s(...n) {
+  return ze(He(n));
 }
-const _t = {
+const nr = {
   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"
-}, Yt = {
+}, or = {
   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"
-}, Ht = s(
+}, yt = l(
   function({
     children: t,
     className: e,
     endIcon: r,
-    size: i = "medium",
+    size: a = "medium",
     startIcon: c,
-    tone: l = "primary",
-    ...d
-  }, m) {
-    return /* @__PURE__ */ g(
-      st,
+    tone: m = "primary",
+    ...g
+  }, y) {
+    return /* @__PURE__ */ d(
+      ae,
       {
-        ref: m,
-        className: n(
+        ref: y,
+        className: s(
           "gryt-button",
           "inline-flex cursor-pointer items-center justify-center gap-2 border-0 shadow-none",
           "rounded-(--gryt-radius-full) font-semibold whitespace-nowrap select-none",
@@ -121,11 +121,11 @@ const _t = {
           // 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",
-          Yt[i],
-          _t[l],
+          or[a],
+          nr[m],
           e
         ),
-        ...d,
+        ...g,
         children: [
           c,
           t,
@@ -134,68 +134,68 @@ const _t = {
       }
     );
   }
-), b = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", Ot = "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-gryt-accent-light", yt = [
+), 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 = [
   "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(" "), mt = {
+].join(" "), ue = {
   small: "min-h-9 px-3 py-1.5 text-sm",
   medium: "min-h-11 px-4 py-2.5 text-sm"
-}, D = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", $ = [
+}, Y = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", H = [
   // scale and translate are named explicitly because Tailwind v4 sets them as
   // standalone CSS properties rather than folding them into `transform`, so
   // transitioning `transform` would leave the popup snapping into place.
   "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
   "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
   "data-ending-style:scale-[0.98] data-ending-style:opacity-0"
-].join(" "), j = "cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50", Xt = {
+].join(" "), q = "cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50", sr = {
   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"
-}, pt = {
+}, ge = {
   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"
-}, Ut = {
+}, ir = {
   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"
-}, Kt = {
+}, lr = {
   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"
-}, Wt = {
+}, cr = {
   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"
-}, Qt = {
+}, dr = {
   xsmall: "h-8 w-8",
   small: "h-9 w-9",
   medium: "h-10 w-10",
   large: "h-12 w-12"
-}, bo = s(
-  function({ className: t, size: e = "medium", tone: r = "neutral", ...i }, c) {
+}, Qo = l(
+  function({ className: t, size: e = "medium", tone: r = "neutral", ...a }, c) {
     return /* @__PURE__ */ o(
-      st,
+      ae,
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-icon-button",
           "inline-flex shrink-0 items-center justify-center border-0 bg-transparent p-0",
           "rounded-(--gryt-radius-full) select-none",
@@ -209,23 +209,23 @@ const _t = {
           // 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]",
-          b,
-          j,
-          Qt[e],
-          Wt[r],
+          P,
+          q,
+          dr[e],
+          cr[r],
           t
         ),
-        ...i
+        ...a
       }
     );
   }
-), fo = s(
-  function({ className: t, elevated: e = !1, ...r }, i) {
+), Zo = l(
+  function({ className: t, elevated: e = !1, ...r }, a) {
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-surface rounded-(--gryt-radius-lg) border border-gryt-border p-4 text-gryt-text",
           e ? "bg-gryt-surface-raised" : "bg-gryt-surface",
           t
@@ -234,274 +234,294 @@ const _t = {
       }
     );
   }
-), xo = s(
-  function({ children: t, className: e, from: r = "assistant", ...i }, c) {
+), qo = l(
+  function({ children: t, className: e, from: r = "assistant", ...a }, c) {
     return /* @__PURE__ */ o(
       "div",
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-message-bubble",
           r === "user" && "ml-auto bg-gryt-accent text-gryt-on-accent",
           r === "assistant" && "mr-auto border border-gryt-border bg-gryt-surface text-gryt-text",
           r === "system" && "mx-auto border border-dashed border-gryt-border bg-transparent text-gryt-muted",
           e
         ),
-        ...i,
+        ...a,
         children: t
       }
     );
   }
-), ho = s(
+), me = l(
   function({
     className: t,
     error: e = !1,
     fieldClassName: r,
-    helperText: i,
+    helperText: a,
     label: c,
-    minRows: l = 3,
-    multiline: d = !1,
-    size: m = "medium",
-    ...f
-  }, u) {
-    const N = /* @__PURE__ */ o(
-      V.Control,
+    minRows: m = 3,
+    multiline: g = !1,
+    size: y = "medium",
+    ...p
+  }, f) {
+    const h = /* @__PURE__ */ o(
+      gt.Control,
       {
-        ref: u,
-        render: d ? /* @__PURE__ */ o("textarea", { rows: l }) : void 0,
-        className: n(
+        ref: f,
+        render: g ? /* @__PURE__ */ o("textarea", { rows: m }) : void 0,
+        className: s(
           "gryt-text-field-control",
-          yt,
-          d && "resize-y leading-6",
+          de,
+          g && "resize-y leading-6",
           e ? "border-gryt-danger" : "border-gryt-border",
-          mt[m],
+          ue[y],
           t
         ),
-        ...f
+        ...p
       }
     );
-    return /* @__PURE__ */ g(
-      V.Root,
+    return /* @__PURE__ */ d(
+      gt.Root,
       {
-        className: n(
+        className: s(
           "gryt-text-field flex w-full flex-col gap-1.5",
           r
         ),
         children: [
-          c ? /* @__PURE__ */ o(V.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
-          N,
-          i ? /* @__PURE__ */ o(
-            V.Description,
+          c ? /* @__PURE__ */ o(gt.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
+          h,
+          a ? /* @__PURE__ */ o(
+            gt.Description,
             {
-              className: n(
+              className: s(
                 "text-xs",
                 e ? "text-gryt-danger-11" : "text-gryt-muted"
               ),
-              children: i
+              children: a
             }
           ) : null
         ]
       }
     );
   }
-), wo = s(
+), ta = l(
   function({
     className: t,
     disabled: e = !1,
     maxRows: r = 8,
-    minRows: i = 1,
+    minRows: a = 1,
     onSubmit: c,
-    placeholder: l = "Message Gryt",
-    submitLabel: d = "Send",
-    ...m
-  }, f) {
-    const u = W(null), N = K(() => {
-      const x = u.current;
+    placeholder: m = "Message Gryt",
+    submitLabel: g = "Send",
+    ...y
+  }, p) {
+    const f = Mt(null), h = It(() => {
+      const x = f.current;
       if (!x)
         return;
-      const H = window.getComputedStyle(x), J = parseFloat(H.lineHeight) || 24, q = parseFloat(H.paddingTop) + parseFloat(H.paddingBottom);
+      const T = window.getComputedStyle(x), w = parseFloat(T.lineHeight) || 24, R = parseFloat(T.paddingTop) + parseFloat(T.paddingBottom);
       x.style.height = "auto", x.style.height = `${Math.min(
-        Math.max(x.scrollHeight, J * i + q),
-        J * r + q
+        Math.max(x.scrollHeight, w * a + R),
+        w * r + R
       )}px`;
-    }, [r, i]);
-    ht(N, [N, m.value]);
-    function Z(x) {
+    }, [r, a]);
+    Se(h, [h, y.value]);
+    function S(x) {
       if (!c) {
         x.preventDefault();
         return;
       }
       c(x);
     }
-    return /* @__PURE__ */ g("form", { className: n("gryt-composer", t), onSubmit: Z, children: [
+    return /* @__PURE__ */ d("form", { className: s("gryt-composer", t), onSubmit: S, children: [
       /* @__PURE__ */ o(
         "textarea",
         {
           ref: (x) => {
-            u.current = x, typeof f == "function" ? f(x) : f && (f.current = x);
+            f.current = x, typeof p == "function" ? p(x) : p && (p.current = x);
           },
-          rows: i,
+          rows: a,
           disabled: e,
-          placeholder: l,
-          onInput: N,
+          placeholder: m,
+          onInput: h,
           className: "gryt-composer-textarea disabled:cursor-not-allowed disabled:opacity-60",
-          ...m
+          ...y
         }
       ),
       /* @__PURE__ */ o(
-        Ht,
+        yt,
         {
           type: "submit",
           disabled: e,
           size: "small",
-          endIcon: /* @__PURE__ */ o(St, { size: 14, weight: "fill" }),
-          children: d
+          endIcon: /* @__PURE__ */ o(Be, { size: 14, weight: "fill" }),
+          children: g
         }
       )
     ] });
   }
-), Zt = {
+), ur = {
   small: "h-8 w-8 text-xs",
   medium: "h-10 w-10 text-sm",
   large: "h-12 w-12 text-base"
-}, Jt = 256, qt = s(function({ alt: t, children: e, className: r, fallback: i, seed: c, size: l = "medium", src: d, ...m }, f) {
-  const u = wt(
-    () => c ? Mt(c, { size: Jt }) : void 0,
+}, Xt = 256, gr = l(function({
+  alt: t,
+  children: e,
+  className: r,
+  fallback: a,
+  seed: c,
+  eggSeed: m,
+  size: g = "medium",
+  src: y,
+  ...p
+}, f) {
+  const h = it(
+    () => c ? Xe(c, { size: Xt }) : void 0,
     [c]
-  );
-  return /* @__PURE__ */ g(
-    O.Root,
+  ), S = it(
+    () => m ? Ke(m, { size: Xt }) : void 0,
+    [m]
+  ), x = h ?? S;
+  return /* @__PURE__ */ d(
+    Pt.Root,
     {
       ref: f,
-      className: n(
+      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",
-        Zt[l],
+        ur[g],
         r
       ),
-      ...m,
+      ...p,
       children: [
-        d ? /* @__PURE__ */ o(
-          O.Image,
+        y ? /* @__PURE__ */ o(
+          Pt.Image,
           {
-            src: d,
+            src: y,
             alt: t,
             className: "h-full w-full object-cover"
           }
         ) : null,
-        /* @__PURE__ */ o(O.Fallback, { className: "flex h-full w-full items-center justify-center", children: u ? /* @__PURE__ */ o("img", { src: u, alt: t, className: "h-full w-full object-cover" }) : i ?? e })
+        /* @__PURE__ */ o(Pt.Fallback, { className: "flex h-full w-full items-center justify-center", children: x ? /* @__PURE__ */ o(
+          "img",
+          {
+            src: x,
+            alt: t,
+            className: "h-full w-full object-cover"
+          }
+        ) : a ?? e })
       ]
     }
   );
-}), vo = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, d) {
-  return /* @__PURE__ */ g(
+}), ea = l(function({ active: t = !1, avatar: e, className: r, subtitle: a, title: c, ...m }, g) {
+  return /* @__PURE__ */ d(
     "button",
     {
-      ref: d,
+      ref: g,
       type: "button",
-      className: n(
+      className: s(
         "gryt-conversation-item enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
         t ? "bg-gryt-accent text-gryt-on-accent" : "text-gryt-text hover:bg-white/5",
         r
       ),
-      ...l,
+      ...m,
       children: [
         e ?? /* @__PURE__ */ o(
-          qt,
+          gr,
           {
             size: "small",
-            className: n(
+            className: s(
               t ? "bg-gryt-on-accent text-gryt-accent-9 ring-transparent" : "bg-gryt-surface-raised text-gryt-text"
             ),
             children: c.slice(0, 1).toUpperCase()
           }
         ),
-        /* @__PURE__ */ g("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ d("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ o("span", { className: "block truncate text-sm font-semibold", children: c }),
-          i ? /* @__PURE__ */ o(
+          a ? /* @__PURE__ */ o(
             "span",
             {
-              className: n(
+              className: s(
                 "block truncate text-xs",
                 t ? "text-gryt-on-accent/85" : "text-gryt-muted"
               ),
-              children: i
+              children: a
             }
           ) : null
         ] })
       ]
     }
   );
-}), No = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, d) {
-  const m = typeof t == "number" ? t : null, f = m !== null && m === 0 && !c, u = m !== null && m > i ? `${i}+` : t;
-  return /* @__PURE__ */ g(
+}), 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(
     "span",
     {
-      ref: d,
-      className: n("gryt-badge relative inline-flex", r),
-      ...l,
+      ref: g,
+      className: s("gryt-badge relative inline-flex", r),
+      ...m,
       children: [
         e,
-        t !== void 0 && !f ? /* @__PURE__ */ o(
+        t !== void 0 && !p ? /* @__PURE__ */ o(
           "span",
           {
-            className: n(
+            className: s(
               "gryt-badge-dot absolute -top-1 -right-1 z-10 inline-flex items-center justify-center",
               "min-w-5 rounded-(--gryt-radius-full) px-1.5 py-0.5",
               "bg-gryt-accent text-[0.65rem] leading-none font-semibold text-gryt-on-accent",
               "ring-2 ring-gryt-bg"
             ),
-            children: u
+            children: f
           }
         ) : null
       ]
     }
   );
-}), te = {
+}), mr = {
   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"
-}, Po = s(function({ children: t, className: e, icon: r, label: i, onDelete: c, tone: l = "neutral", ...d }, m) {
-  return /* @__PURE__ */ g(
+}, na = l(function({ children: t, className: e, icon: r, label: a, onDelete: c, tone: m = "neutral", ...g }, y) {
+  return /* @__PURE__ */ d(
     "span",
     {
-      ref: m,
-      className: n(
+      ref: y,
+      className: s(
         "gryt-chip inline-flex items-center gap-1.5 rounded-(--gryt-radius-full) border px-3 py-1 text-xs font-medium",
-        te[l],
+        mr[m],
         e
       ),
-      ...d,
+      ...g,
       children: [
         r,
-        i ?? t,
+        a ?? t,
         c ? /* @__PURE__ */ o(
           "button",
           {
             type: "button",
             "aria-label": "Remove",
             onClick: c,
-            className: n(
+            className: s(
               "-mr-1 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-(--gryt-radius-full)",
               "opacity-70 transition-opacity hover:opacity-100",
-              b
+              P
             ),
-            children: /* @__PURE__ */ o(ct, { size: 10, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ o(Gt, { size: 10, weight: "bold", "aria-hidden": "true" })
           }
         ) : null
       ]
     }
   );
-}), To = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
+}), Kt = l(
+  function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
-      tt.Root,
+      Vt.Root,
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-checkbox flex h-5 w-5 shrink-0 items-center justify-center",
           "rounded-(--gryt-radius-sm) border border-gryt-border bg-gryt-surface-raised",
           "transition-[scale,background-color,border-color] duration-(--gryt-dur-spring) ease-spring",
@@ -511,18 +531,18 @@ const _t = {
           "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]",
-          b,
-          j,
+          P,
+          q,
           // Unchecked stays a neutral outline; the tone only paints once checked.
-          Xt[e],
+          sr[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          tt.Indicator,
+          Vt.Indicator,
           {
             keepMounted: !0,
-            className: n(
+            className: s(
               "flex origin-center",
               "transition-[scale,opacity] duration-(--gryt-dur-spring) ease-spring",
               // Scaling from 0 rather than from something near 1 is deliberate.
@@ -532,65 +552,65 @@ const _t = {
               "data-unchecked:scale-0 data-unchecked:opacity-0",
               "motion-reduce:transition-none"
             ),
-            children: /* @__PURE__ */ o(lt, { size: 12, weight: "bold" })
+            children: /* @__PURE__ */ o(jt, { size: 12, weight: "bold" })
           }
         )
       }
     );
   }
-), ko = s(function({ className: t, tone: e = "primary", ...r }, i) {
+), oa = l(function({ className: t, tone: e = "primary", ...r }, a) {
   return /* @__PURE__ */ o(
-    et.Root,
+    Ot.Root,
     {
-      ref: i,
-      className: n(
+      ref: a,
+      className: s(
         "gryt-radio flex h-5 w-5 shrink-0 items-center justify-center",
         "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface-raised",
         "transition-[scale,background-color,border-color] duration-(--gryt-dur-spring) ease-spring",
         "hover:not-data-disabled:border-gryt-accent-light",
         "motion-safe:hover:not-data-disabled:scale-[1.08]",
         "motion-safe:active:not-data-disabled:scale-[0.92]",
-        b,
-        j,
+        P,
+        q,
         // Border takes the tone when selected; the dot inside carries the fill.
-        Ut[e],
+        ir[e],
         t
       ),
       ...r,
       children: /* @__PURE__ */ o(
-        et.Indicator,
+        Ot.Indicator,
         {
           keepMounted: !0,
-          className: n(
+          className: s(
             "h-2.5 w-2.5 origin-center rounded-(--gryt-radius-full)",
             "transition-[scale,opacity] duration-(--gryt-dur-spring) ease-spring",
             // From 0, for the same reason as the Checkbox tick — see the note there.
             "data-unchecked:scale-0 data-unchecked:opacity-0",
             "motion-reduce:transition-none",
-            pt[e]
+            ge[e]
           )
         }
       )
     }
   );
-}), Co = s(
+}), aa = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Gt,
+      We,
       {
         ref: r,
-        className: n("gryt-radio-group flex flex-col gap-2", t),
+        className: s("gryt-radio-group flex flex-col gap-2", t),
         ...e
       }
     );
   }
-), So = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
+), sa = l(
+  function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
-      rt.Root,
+      Yt.Root,
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-switch relative inline-flex h-6 w-10 shrink-0 items-center",
           "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface-raised p-0.5",
           "transition-[scale,background-color,border-color] duration-(--gryt-dur-spring) ease-spring",
@@ -598,16 +618,16 @@ const _t = {
           "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]",
-          b,
-          j,
-          Kt[e],
+          P,
+          q,
+          lr[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          rt.Thumb,
+          Yt.Thumb,
           {
-            className: n(
+            className: s(
               "h-4.5 w-4.5 rounded-(--gryt-radius-full) bg-gryt-text",
               "transition-transform duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
               "data-checked:translate-x-4 data-checked:bg-gryt-bg"
@@ -617,70 +637,70 @@ const _t = {
       }
     );
   }
-), at = 3;
-function $o({
-  className: a,
+), Wt = 3;
+function pr({
+  className: n,
   tone: t = "primary",
   "aria-label": e,
   ...r
 }) {
-  const [i, c] = vt(!1), l = W(null);
-  Nt(() => {
-    if (!i && l.current === null)
+  const [a, c] = _(!1), m = Mt(null);
+  $e(() => {
+    if (!a && m.current === null)
       return;
-    const u = () => {
-      l.current = null, c(!1);
+    const f = () => {
+      m.current = null, c(!1);
     };
-    return window.addEventListener("pointerup", u), window.addEventListener("pointercancel", u), () => {
-      window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u);
+    return window.addEventListener("pointerup", f), window.addEventListener("pointercancel", f), () => {
+      window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", f);
     };
-  }, [i]);
-  function d(u) {
-    l.current = { x: u.clientX, y: u.clientY };
+  }, [a]);
+  function g(f) {
+    m.current = { x: f.clientX, y: f.clientY };
   }
-  function m(u) {
-    const N = l.current;
-    if (N === null || i)
+  function y(f) {
+    const h = m.current;
+    if (h === null || a)
       return;
-    (Math.abs(u.clientX - N.x) > at || Math.abs(u.clientY - N.y) > at) && c(!0);
+    (Math.abs(f.clientX - h.x) > Wt || Math.abs(f.clientY - h.y) > Wt) && c(!0);
   }
-  const f = i ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
-  return /* @__PURE__ */ o(z.Root, { className: n("gryt-slider w-full", a), ...r, children: /* @__PURE__ */ o(
-    z.Control,
+  const 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,
     {
       className: "flex w-full cursor-pointer touch-none items-center py-2 select-none",
-      onPointerDown: d,
-      onPointerMove: m,
-      children: /* @__PURE__ */ g(z.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
+      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: [
         /* @__PURE__ */ o(
-          z.Indicator,
+          rt.Indicator,
           {
-            className: n(
+            className: s(
               "h-full rounded-(--gryt-radius-full) select-none",
               "transition-[width]",
-              f,
-              pt[t]
+              p,
+              ge[t]
             )
           }
         ),
         /* @__PURE__ */ o(
-          z.Thumb,
+          rt.Thumb,
           {
             "aria-label": e,
-            className: n(
+            className: s(
               "group h-4 w-4 rounded-(--gryt-radius-full) select-none",
               "transition-[inset-inline-start]",
-              f,
+              p,
               // 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.
-              Ot
+              ar
             ),
             children: /* @__PURE__ */ o(
               "span",
               {
-                className: n(
+                className: s(
                   "block h-full w-full rounded-(--gryt-radius-full) bg-gryt-text",
                   "transition-[scale] duration-(--gryt-dur-spring) ease-spring",
                   "motion-safe:group-hover:scale-[1.12] motion-safe:group-active:scale-[0.94]",
@@ -694,67 +714,67 @@ function $o({
     }
   ) });
 }
-const ee = {
+const yr = {
   small: "min-h-9 px-3 text-sm",
   medium: "min-h-11 px-4 text-sm"
 };
-function Ro({
-  className: a,
+function fr({
+  className: n,
   label: t,
   options: e = [],
   placeholder: r = "Select",
-  size: i = "medium",
+  size: a = "medium",
   ...c
 }) {
-  const l = ut();
-  return /* @__PURE__ */ g(h.Root, { items: e, ...c, children: [
-    /* @__PURE__ */ g("div", { className: n("gryt-select flex w-full flex-col gap-1.5", a), children: [
-      t ? /* @__PURE__ */ o(h.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
-      /* @__PURE__ */ g(
-        h.Trigger,
+  const 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,
         {
-          className: n(
+          className: s(
             "flex w-full cursor-pointer items-center justify-between gap-2",
             "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface-raised",
             "text-gryt-text select-none",
             "transition-colors duration-150 hover:border-gryt-accent-light",
             "data-disabled:cursor-not-allowed data-disabled:opacity-60",
-            b,
-            ee[i]
+            P,
+            yr[a]
           ),
           children: [
-            /* @__PURE__ */ o(h.Value, { placeholder: r }),
-            /* @__PURE__ */ o(h.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o($t, { size: 16 }) })
+            /* @__PURE__ */ o(C.Value, { placeholder: r }),
+            /* @__PURE__ */ o(C.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(Fe, { size: 16 }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ o(h.Portal, { container: l, children: /* @__PURE__ */ o(
-      h.Positioner,
+    /* @__PURE__ */ o(C.Portal, { container: m, children: /* @__PURE__ */ o(
+      C.Positioner,
       {
         sideOffset: 6,
         className: "gryt-select-positioner outline-none",
         children: /* @__PURE__ */ o(
-          h.Popup,
+          C.Popup,
           {
-            className: n("min-w-(--anchor-width) p-1", D, $),
-            children: /* @__PURE__ */ o(h.List, { children: e.map((d) => /* @__PURE__ */ g(
-              h.Item,
+            className: s("min-w-(--anchor-width) p-1", Y, H),
+            children: /* @__PURE__ */ o(C.List, { children: e.map((g) => /* @__PURE__ */ d(
+              C.Item,
               {
-                value: d.value,
-                disabled: d.disabled,
-                className: n(
+                value: g.value,
+                disabled: g.disabled,
+                className: s(
                   "flex cursor-pointer items-center justify-between gap-2",
                   "rounded-(--gryt-radius-md) px-3 py-2 text-sm text-gryt-text",
                   "outline-none select-none data-highlighted:bg-gryt-surface-raised",
                   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
                 ),
                 children: [
-                  /* @__PURE__ */ o(h.ItemText, { children: d.label }),
-                  /* @__PURE__ */ o(h.ItemIndicator, { className: "text-gryt-accent-11", children: /* @__PURE__ */ o(lt, { size: 14, weight: "bold" }) })
+                  /* @__PURE__ */ o(C.ItemText, { children: g.label }),
+                  /* @__PURE__ */ o(C.ItemIndicator, { className: "text-gryt-accent-11", children: /* @__PURE__ */ o(jt, { size: 14, weight: "bold" }) })
                 ]
               },
-              String(d.value)
+              String(g.value)
             )) })
           }
         )
@@ -762,46 +782,46 @@ function Ro({
     ) })
   ] });
 }
-function Io({
-  children: a,
+function ia({
+  children: n,
   className: t,
   side: e = "top",
   sideOffset: r = 8,
-  title: i
+  title: a
 }) {
-  const c = ut();
-  return /* @__PURE__ */ g(I.Root, { children: [
-    /* @__PURE__ */ o(I.Trigger, { render: a }),
-    /* @__PURE__ */ o(I.Portal, { container: c, children: /* @__PURE__ */ o(
-      I.Positioner,
+  const c = ce();
+  return /* @__PURE__ */ d(F.Root, { children: [
+    /* @__PURE__ */ o(F.Trigger, { render: n }),
+    /* @__PURE__ */ o(F.Portal, { container: c, children: /* @__PURE__ */ o(
+      F.Positioner,
       {
         side: e,
         sideOffset: r,
         className: "gryt-tooltip-positioner",
         children: /* @__PURE__ */ o(
-          I.Popup,
+          F.Popup,
           {
-            className: n(
+            className: s(
               "gryt-tooltip rounded-(--gryt-radius-md) border border-gryt-border bg-gryt-surface-raised",
               "px-2.5 py-1.5 text-xs text-gryt-text",
-              $,
+              H,
               t
             ),
-            children: i
+            children: a
           }
         )
       }
     ) })
   ] });
 }
-const Ao = I.Provider, Do = s(
-  function({ className: t, orientation: e = "horizontal", ...r }, i) {
+const la = F.Provider, ca = l(
+  function({ className: t, orientation: e = "horizontal", ...r }, a) {
     return /* @__PURE__ */ o(
-      Lt,
+      Je,
       {
-        ref: i,
+        ref: a,
         orientation: e,
-        className: n(
+        className: s(
           "gryt-divider bg-gryt-border",
           e === "vertical" ? "h-full w-px" : "h-px w-full",
           t
@@ -810,12 +830,12 @@ const Ao = I.Provider, Do = s(
       }
     );
   }
-), Mo = s(function({ className: t, ...e }, r) {
+), da = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     "div",
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-card rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text",
         t
       ),
@@ -823,87 +843,87 @@ const Ao = I.Provider, Do = s(
     }
   );
 });
-function Go({
-  children: a,
+function ua({
+  children: n,
   className: t,
   subheader: e,
   title: r,
-  ...i
+  ...a
 }) {
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: n("gryt-card-header flex flex-col gap-1 p-4", t),
-      ...i,
+      className: s("gryt-card-header flex flex-col gap-1 p-4", t),
+      ...a,
       children: [
         r ? /* @__PURE__ */ o("span", { className: "text-base font-semibold text-gryt-text", children: r }) : null,
         e ? /* @__PURE__ */ o("span", { className: "text-sm text-gryt-muted", children: e }) : null,
-        a
+        n
       ]
     }
   );
 }
-function Lo({
-  className: a,
+function ga({
+  className: n,
   ...t
 }) {
   return /* @__PURE__ */ o(
     "div",
     {
-      className: n(
+      className: s(
         "gryt-card-content px-4 pb-4 text-sm text-gryt-muted",
-        a
+        n
       ),
       ...t
     }
   );
 }
-function jo({
-  className: a,
+function ma({
+  className: n,
   ...t
 }) {
   return /* @__PURE__ */ o(
     "div",
     {
-      className: n(
+      className: s(
         "gryt-card-actions flex items-center gap-2 px-4 pb-4",
-        a
+        n
       ),
       ...t
     }
   );
 }
-const re = {
+const hr = {
   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"
-}, zo = s(function({ className: t, severity: e = "info", ...r }, i) {
+}, pa = l(function({ className: t, severity: e = "info", ...r }, a) {
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: i,
+      ref: a,
       role: "alert",
-      className: n(
+      className: s(
         "gryt-alert rounded-(--gryt-radius-lg) border px-4 py-3 text-sm",
-        re[e],
+        hr[e],
         t
       ),
       ...r
     }
   );
 });
-function Bo({ className: a, value: t = null, ...e }) {
+function ya({ className: n, value: t = null, ...e }) {
   return /* @__PURE__ */ o(
-    X.Root,
+    St.Root,
     {
       value: t,
-      className: n("gryt-progress w-full", a),
+      className: s("gryt-progress w-full", n),
       ...e,
-      children: /* @__PURE__ */ o(X.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-        X.Indicator,
+      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,
         {
-          className: n(
+          className: s(
             "h-full rounded-(--gryt-radius-full) bg-gryt-accent",
             "transition-[width] duration-300 ease-out motion-reduce:transition-none",
             // Base UI marks the indicator indeterminate and leaves its width
@@ -918,41 +938,41 @@ function Bo({ className: a, value: t = null, ...e }) {
     }
   );
 }
-function Fo({
-  className: a,
+function fa({
+  className: n,
   size: t = 24,
   "aria-label": e = "Loading"
 }) {
   return /* @__PURE__ */ o(
-    Rt,
+    _e,
     {
       role: "status",
       "aria-label": e,
       size: t,
       weight: "bold",
-      className: n(
+      className: s(
         "gryt-spinner text-gryt-accent-11 motion-safe:animate-spin",
-        a
+        n
       )
     }
   );
 }
-const oe = {
+const br = {
   text: "h-4 rounded-(--gryt-radius-sm)",
   rounded: "rounded-(--gryt-radius-lg)",
   circular: "rounded-(--gryt-radius-full)",
   rectangular: "rounded-none"
 };
-function Eo({
-  className: a,
+function ha({
+  className: n,
   height: t,
   style: e,
   variant: r = "text",
-  width: i,
+  width: a,
   ...c
 }) {
-  const l = {
-    width: i,
+  const m = {
+    width: a,
     height: t,
     ...e
   };
@@ -960,7 +980,7 @@ function Eo({
     "div",
     {
       "aria-hidden": "true",
-      className: n(
+      className: s(
         // Not bg-gryt-surface-raised. #1e2028 against #1a1d24 is four points of
         // luminance, which is invisible on a laptop screen at an angle — the
         // placeholder that is meant to say "something is coming" said nothing.
@@ -968,24 +988,24 @@ function Eo({
         // 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",
-        oe[r],
-        a
+        br[r],
+        n
       ),
-      style: l,
+      style: m,
       ...c
     }
   );
 }
-const bt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", ae = s(
+const pe = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", xr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Backdrop,
+      j.Backdrop,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-backdrop fixed inset-0 min-h-dvh bg-black/60",
           "backdrop-blur-(--gryt-backdrop-blur)",
-          bt,
+          pe,
           "data-starting-style:opacity-0 data-ending-style:opacity-0",
           t
         ),
@@ -993,17 +1013,17 @@ const bt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ne = s(
+), vr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Popup,
+      j.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
           "flex w-[32rem] max-w-[calc(100vw-3rem)] flex-col gap-4",
           "rounded-(--gryt-radius-lg) border border-gryt-border bg-gryt-surface p-5 text-gryt-text",
-          bt,
+          pe,
           "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
           "data-ending-style:scale-[0.98] data-ending-style:opacity-0",
           t
@@ -1012,13 +1032,13 @@ const bt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ie = s(
+), wr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Title,
+      j.Title,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-title text-base font-semibold text-gryt-text",
           t
         ),
@@ -1026,13 +1046,13 @@ const bt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), se = s(
+), Nr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      C.Description,
+      j.Description,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-description text-sm text-gryt-muted",
           t
         ),
@@ -1040,13 +1060,13 @@ const bt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ce = s(
+), Tr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
       "div",
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-dialog-footer flex justify-end gap-3",
           t
         ),
@@ -1054,45 +1074,45 @@ const bt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), Vo = {
-  Root: C.Root,
-  Trigger: C.Trigger,
-  Portal: C.Portal,
-  Close: C.Close,
-  Backdrop: ae,
-  Popup: ne,
-  Title: ie,
-  Description: se,
-  Footer: ce
-}, le = () => () => {
+), ba = {
+  Root: j.Root,
+  Trigger: j.Trigger,
+  Portal: j.Portal,
+  Close: j.Close,
+  Backdrop: xr,
+  Popup: vr,
+  Title: wr,
+  Description: Nr,
+  Footer: Tr
+}, Pr = () => () => {
 };
-function de(a) {
-  const t = K(
+function Sr(n) {
+  const t = It(
     (r) => {
-      if (typeof window > "u" || !window.matchMedia) return le();
-      const i = window.matchMedia(a);
-      return i.addEventListener("change", r), () => i.removeEventListener("change", r);
+      if (typeof window > "u" || !window.matchMedia) return Pr();
+      const a = window.matchMedia(n);
+      return a.addEventListener("change", r), () => a.removeEventListener("change", r);
     },
-    [a]
-  ), e = K(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(a).matches, [a]);
-  return Pt(t, e, () => !1);
+    [n]
+  ), e = It(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(n).matches, [n]);
+  return Ce(t, e, () => !1);
 }
-const ge = {
+const $r = {
   left: "left",
   right: "right",
   top: "up",
   bottom: "down"
-}, Y = it("right"), ue = {
+}, bt = ne("right"), Cr = {
   left: "items-stretch justify-start",
   right: "items-stretch justify-end",
   top: "items-start justify-center",
   bottom: "items-end justify-center"
-}, ye = {
+}, kr = {
   left: "rounded-r-(--gryt-radius-xl)",
   right: "rounded-l-(--gryt-radius-xl)",
   top: "rounded-b-(--gryt-radius-xl)",
   bottom: "rounded-t-(--gryt-radius-xl)"
-}, me = {
+}, Rr = {
   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))]",
@@ -1122,41 +1142,41 @@ const ge = {
     "data-ending-style:[transform:translateY(calc(100%-var(--gryt-drawer-bleed)))]"
   ].join(" ")
 };
-function pe({
-  side: a = "right",
+function Ar({
+  side: n = "right",
   sheetOnMobile: t = !0,
   children: e,
   ...r
 }) {
-  const i = de("(max-width: 767px)"), c = t && i ? "bottom" : a;
-  return /* @__PURE__ */ o(Y.Provider, { value: c, children: /* @__PURE__ */ o(v.Root, { swipeDirection: ge[c], ...r, children: e }) });
+  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 be = s(
+const Ir = l(
   function({ className: t, ...e }, r) {
-    const i = _(Y);
+    const a = ht(bt);
     return /* @__PURE__ */ o(
-      v.Viewport,
+      I.Viewport,
       {
         ref: r,
-        className: n(
+        className: s(
           // z-50 matters: the popup is no longer positioned itself, so the
           // viewport is what has to sit above the page. Without it a sticky
           // site header renders over the panel.
           "gryt-drawer-viewport fixed inset-0 z-50 flex",
-          ue[i],
+          Cr[a],
           t
         ),
         ...e
       }
     );
   }
-), fe = s(function({ className: t, ...e }, r) {
-  const i = _(Y);
+), Dr = l(function({ className: t, ...e }, r) {
+  const a = ht(bt);
   return /* @__PURE__ */ o(
-    v.Popup,
+    I.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-drawer flex flex-col gap-4 border-gryt-border bg-gryt-surface text-gryt-text",
         "overflow-y-auto overscroll-contain outline-none",
         "transition-transform duration-(--gryt-dur-spring-soft) ease-spring-tight",
@@ -1164,19 +1184,19 @@ const be = s(
         // duration here turns a drag into a drag plus lag.
         "data-swiping:duration-0 data-swiping:select-none",
         "motion-reduce:transition-none",
-        me[i],
-        ye[i],
+        Rr[a],
+        kr[a],
         t
       ),
       ...e
     }
   );
-}), xe = s(function({ className: t, ...e }, r) {
+}), Lr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    v.Backdrop,
+    I.Backdrop,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-drawer-backdrop fixed inset-0 z-50 min-h-dvh bg-black/60",
         "backdrop-blur-(--gryt-backdrop-blur)",
         // Lightens as the panel is dragged away, so letting go halfway does not
@@ -1192,64 +1212,64 @@ const be = s(
     }
   );
 });
-function he({ className: a }) {
-  const t = _(Y);
+function Mr({ className: n }) {
+  const t = ht(bt);
   return t !== "bottom" && t !== "top" ? null : /* @__PURE__ */ o(
     "div",
     {
       "aria-hidden": !0,
-      className: n(
+      className: s(
         "gryt-drawer-grabber mx-auto h-1.5 w-10 shrink-0 rounded-(--gryt-radius-full) bg-gryt-border",
         t === "top" && "order-last",
-        a
+        n
       )
     }
   );
 }
-const _o = {
-  Root: pe,
-  Trigger: v.Trigger,
-  Portal: v.Portal,
-  Backdrop: xe,
-  Viewport: be,
-  Popup: fe,
-  Content: v.Content,
-  Grabber: he,
-  Close: v.Close,
-  Title: v.Title,
-  Description: v.Description
-}, we = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+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(
+  function({ className: t, sideOffset: e = 8, ...r }, a) {
     return /* @__PURE__ */ o(
-      A.Positioner,
+      V.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-menu-positioner outline-none", t),
+        className: s("gryt-menu-positioner outline-none", t),
         ...r
       }
     );
   }
-), ve = s(function({ className: t, ...e }, r) {
+), jr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    A.Popup,
+    V.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-menu min-w-44 p-1 outline-none",
-        D,
-        $,
+        Y,
+        H,
         t
       ),
       ...e
     }
   );
-}), Ne = s(function({ className: t, ...e }, r) {
+}), Er = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    A.Item,
+    V.Item,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-menu-item flex cursor-pointer items-center gap-2 rounded-(--gryt-radius-md)",
         "px-3 py-2 text-sm text-gryt-text outline-none select-none",
         // Base UI drives keyboard and pointer highlight through the same
@@ -1261,29 +1281,29 @@ const _o = {
       ...e
     }
   );
-}), Pe = s(function({ className: t, ...e }, r) {
+}), Hr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    A.Separator,
+    V.Separator,
     {
       ref: r,
-      className: n("gryt-menu-separator my-1 h-px bg-gryt-border", t),
+      className: s("gryt-menu-separator my-1 h-px bg-gryt-border", t),
       ...e
     }
   );
-}), U = {
-  Root: A.Root,
-  Trigger: A.Trigger,
-  Portal: A.Portal,
-  Positioner: we,
-  Popup: ve,
-  Item: Ne,
-  Separator: Pe
-}, Te = s(function({ className: t, ...e }, r) {
+}), $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) {
   return /* @__PURE__ */ o(
-    E.Root,
+    dt.Root,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tabs",
         // Vertical puts the rail and the panel side by side. min-w-0 on the
         // panel does the rest; without the flex here the panel lands under the
@@ -1294,12 +1314,12 @@ const _o = {
       ...e
     }
   );
-}), ke = s(function({ className: t, ...e }, r) {
+}), Br = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.List,
+    dt.List,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tabs-list relative inline-flex items-center gap-1 rounded-(--gryt-radius-full) bg-gryt-surface-raised p-1",
         // A rail, not a pill: rows are full width and the corner radius drops
         // to lg, because a 999px radius on a tall box bows its short edges.
@@ -1311,12 +1331,12 @@ const _o = {
       ...e
     }
   );
-}), Ce = s(function({ className: t, ...e }, r) {
+}), Fr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Tab,
+    dt.Tab,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tab inline-flex min-h-8 cursor-pointer items-center justify-center whitespace-nowrap",
         "rounded-(--gryt-radius-full) border-0 bg-transparent px-4 py-1.5",
         "text-sm font-medium text-gryt-muted select-none",
@@ -1342,20 +1362,20 @@ const _o = {
         "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",
-        b,
+        P,
         t
       ),
       ...e
     }
   );
-}), Se = s(
+}), _r = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      E.Indicator,
+      dt.Indicator,
       {
         ref: r,
         renderBeforeHydration: !0,
-        className: n(
+        className: s(
           "gryt-tabs-indicator absolute top-1 left-0 z-0 h-[calc(100%-0.5rem)]",
           "w-(--active-tab-width) translate-x-(--active-tab-left)",
           "rounded-(--gryt-radius-full) bg-gryt-accent",
@@ -1375,12 +1395,12 @@ const _o = {
       }
     );
   }
-), $e = s(function({ className: t, ...e }, r) {
+), Vr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    E.Panel,
+    dt.Panel,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-tabs-panel pt-3 text-sm text-gryt-text",
         // Beside the rail rather than under it, and allowed to shrink so long
         // content wraps instead of pushing the rail off screen.
@@ -1391,49 +1411,49 @@ const _o = {
       ...e
     }
   );
-}), Yo = Object.assign(Te, { List: ke, Tab: Ce, Panel: $e, Indicator: Se }), Re = s(function({ className: t, ...e }, r) {
+}), va = Object.assign(zr, { List: Br, Tab: Fr, Panel: Vr, Indicator: _r }), Or = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    F.Root,
+    ct.Root,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-accordion flex w-full flex-col gap-2 rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface p-2",
         t
       ),
       ...e
     }
   );
-}), Ie = s(
+}), Yr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      F.Item,
+      ct.Item,
       {
         ref: r,
-        className: n("gryt-accordion-item", t),
+        className: s("gryt-accordion-item", t),
         ...e
       }
     );
   }
-), Ae = s(
-  function({ children: t, className: e, expandIcon: r, ...i }, c) {
-    return /* @__PURE__ */ o(F.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ g(
-      F.Trigger,
+), Ur = 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,
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-accordion-trigger flex w-full cursor-pointer items-center justify-between gap-3",
           "rounded-(--gryt-radius-lg) border-0 bg-transparent px-3 py-2.5",
           "text-left text-sm font-medium text-gryt-text select-none",
           "transition-colors duration-150 hover:bg-gryt-surface-raised",
           "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-          b,
+          P,
           e
         ),
-        ...i,
+        ...a,
         children: [
           t,
           r === void 0 ? /* @__PURE__ */ o(
-            It,
+            Ve,
             {
               size: 16,
               className: "shrink-0 transition-transform duration-(--gryt-dur-spring) ease-spring data-panel-open:rotate-180 motion-reduce:transition-none"
@@ -1443,13 +1463,13 @@ const _o = {
       }
     ) });
   }
-), De = s(
-  function({ children: t, className: e, ...r }, i) {
+), Xr = l(
+  function({ children: t, className: e, ...r }, a) {
     return /* @__PURE__ */ o(
-      F.Panel,
+      ct.Panel,
       {
-        ref: i,
-        className: n(
+        ref: a,
+        className: s(
           "gryt-accordion-panel overflow-hidden text-sm text-gryt-muted",
           // Base UI measures the panel and exposes the height as a variable,
           // which is what makes a real open and close transition possible.
@@ -1463,105 +1483,105 @@ const _o = {
       }
     );
   }
-), Ho = Object.assign(Re, { Item: Ie, Trigger: Ae, Panel: De }), Me = s(
-  function({ className: t, sideOffset: e = 2, ...r }, i) {
+), wa = Object.assign(Or, { Item: Yr, Trigger: Ur, Panel: Xr }), Kr = l(
+  function({ className: t, sideOffset: e = 2, ...r }, a) {
     return /* @__PURE__ */ o(
-      k.Positioner,
+      G.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-context-menu-positioner outline-none", t),
+        className: s("gryt-context-menu-positioner outline-none", t),
         ...r
       }
     );
   }
-), Oo = {
-  Root: k.Root,
-  Trigger: k.Trigger,
-  Portal: k.Portal,
-  Positioner: Me,
-  Popup: U.Popup,
-  Item: U.Item,
-  Separator: U.Separator,
-  Group: k.Group,
-  GroupLabel: k.GroupLabel,
-  SubmenuRoot: k.SubmenuRoot,
-  SubmenuTrigger: k.SubmenuTrigger
-}, Ge = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+), 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(
+  function({ className: t, sideOffset: e = 8, ...r }, a) {
     return /* @__PURE__ */ o(
-      P.Positioner,
+      L.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-popover-positioner outline-none", t),
+        className: s("gryt-popover-positioner outline-none", t),
         ...r
       }
     );
   }
-), Le = s(
+), Jr = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      P.Popup,
+      L.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-popover max-w-[min(20rem,calc(100vw-2rem))] p-4 outline-none",
-          D,
-          $,
+          Y,
+          H,
           t
         ),
         ...e
       }
     );
   }
-), je = s(function({ className: t, ...e }, r) {
+), Qr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    P.Title,
+    L.Title,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-popover-title text-sm font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), ze = s(function({ className: t, ...e }, r) {
+}), Zr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    P.Description,
+    L.Description,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-popover-description mt-1 text-sm leading-6 text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), Xo = {
-  Root: P.Root,
-  Trigger: P.Trigger,
-  Portal: P.Portal,
-  Positioner: Ge,
-  Popup: Le,
-  Title: je,
-  Description: ze,
-  Close: P.Close,
-  Arrow: P.Arrow
-}, Be = {
+}), 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 = {
   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"
-}, Fe = s(
+}, tn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      T.Viewport,
+      M.Viewport,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-toast-viewport fixed right-4 bottom-4 z-50 flex w-[min(22rem,calc(100vw-2rem))]",
           "flex-col gap-2 outline-none",
           t
@@ -1570,12 +1590,12 @@ const _o = {
       }
     );
   }
-), Ee = s(function({ className: t, severity: e = "neutral", ...r }, i) {
+), en = l(function({ className: t, severity: e = "neutral", ...r }, a) {
   return /* @__PURE__ */ o(
-    T.Root,
+    M.Root,
     {
-      ref: i,
-      className: n(
+      ref: a,
+      className: s(
         "gryt-toast relative flex flex-col p-3 pr-9",
         // Not popupSurface. That border is --gryt-border, a solid slate line
         // that is right for a menu anchored to the thing that opened it and too
@@ -1583,7 +1603,7 @@ const _o = {
         // white hairline separates it from the page without drawing a box
         // around it.
         "rounded-(--gryt-radius-xl) border text-gryt-text",
-        Be[e],
+        qr[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",
@@ -1595,37 +1615,37 @@ const _o = {
       ...r
     }
   );
-}), Ve = s(function({ className: t, ...e }, r) {
+}), rn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Title,
+    M.Title,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toast-title text-sm font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), _e = s(function({ className: t, ...e }, r) {
+}), nn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Description,
+    M.Description,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toast-description mt-0.5 text-sm leading-6 text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), Ye = s(function({ className: t, children: e, ...r }, i) {
+}), on = l(function({ className: t, children: e, ...r }, a) {
   return /* @__PURE__ */ o(
-    T.Close,
+    M.Close,
     {
-      ref: i,
+      ref: a,
       "aria-label": "Close",
-      className: n(
+      className: s(
         "gryt-toast-close absolute top-2.5 right-2.5 inline-flex h-6 w-6 items-center justify-center",
         "rounded-(--gryt-radius-full) border-0 bg-transparent text-gryt-muted",
         "transition-colors hover:bg-white/8 hover:text-gryt-text motion-reduce:transition-none",
@@ -1633,15 +1653,15 @@ const _o = {
         t
       ),
       ...r,
-      children: e ?? /* @__PURE__ */ o(ct, { size: 14, weight: "bold" })
+      children: e ?? /* @__PURE__ */ o(Gt, { size: 14, weight: "bold" })
     }
   );
-}), He = s(function({ className: t, ...e }, r) {
+}), an = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Action,
+    M.Action,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toast-action mt-2 self-start rounded-(--gryt-radius-full) border-0",
         "bg-gryt-accent px-3 py-1.5 text-sm font-medium text-gryt-on-accent",
         "transition-[scale] duration-(--gryt-dur-spring) ease-spring",
@@ -1652,33 +1672,33 @@ const _o = {
       ...e
     }
   );
-}), Uo = {
-  Provider: T.Provider,
-  Portal: T.Portal,
-  Viewport: Fe,
-  Root: Ee,
-  Title: Ve,
-  Description: _e,
-  Close: Ye,
-  Action: He
-}, Ko = T.useToastManager, Oe = s(
+}), Pa = {
+  Provider: M.Provider,
+  Portal: M.Portal,
+  Viewport: tn,
+  Root: en,
+  Title: rn,
+  Description: nn,
+  Close: on,
+  Action: an
+}, Sa = M.useToastManager, sn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      L.Root,
+      Z.Root,
       {
         ref: r,
-        className: n("gryt-scroll-area relative", t),
+        className: s("gryt-scroll-area relative", t),
         ...e
       }
     );
   }
-), Xe = s(
+), ln = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      L.Viewport,
+      Z.Viewport,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-scroll-area-viewport h-full w-full overscroll-contain",
           "focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gryt-accent-light",
           t
@@ -1687,14 +1707,14 @@ const _o = {
       }
     );
   }
-), Ue = s(
-  function({ className: t, orientation: e, ...r }, i) {
+), cn = l(
+  function({ className: t, orientation: e, ...r }, a) {
     return /* @__PURE__ */ o(
-      L.Scrollbar,
+      Z.Scrollbar,
       {
-        ref: i,
+        ref: a,
         orientation: e,
-        className: n(
+        className: s(
           "gryt-scroll-area-scrollbar flex touch-none p-0.5 select-none",
           // Fades in on hover or while scrolling rather than sitting there
           // permanently — a chat sidebar is mostly not being scrolled.
@@ -1705,17 +1725,17 @@ const _o = {
           t
         ),
         ...r,
-        children: /* @__PURE__ */ o(L.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
+        children: /* @__PURE__ */ o(Z.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
       }
     );
   }
-), Wo = {
-  Root: Oe,
-  Viewport: Xe,
-  Scrollbar: Ue,
-  Content: L.Content,
-  Corner: L.Corner
-}, Ke = {
+), $a = {
+  Root: sn,
+  Viewport: ln,
+  Scrollbar: cn,
+  Content: Z.Content,
+  Corner: Z.Corner
+}, dn = {
   primary: [
     "text-gryt-muted hover:not-data-disabled:bg-white/8",
     "data-pressed:bg-gryt-accent data-pressed:text-gryt-on-accent",
@@ -1736,18 +1756,18 @@ const _o = {
     "data-pressed:bg-gryt-danger data-pressed:text-gryt-on-danger",
     "data-pressed:hover:not-data-disabled:bg-gryt-danger"
   ].join(" ")
-}, We = {
+}, un = {
   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"
-}, Qo = s(
-  function({ className: t, size: e = "medium", tone: r = "primary", ...i }, c) {
+}, Jt = l(
+  function({ className: t, size: e = "medium", tone: r = "primary", ...a }, c) {
     return /* @__PURE__ */ o(
-      jt,
+      Qe,
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-toggle",
           "inline-flex shrink-0 items-center justify-center gap-2 border-0 bg-transparent",
           "rounded-(--gryt-radius-full) font-medium select-none",
@@ -1755,23 +1775,23 @@ const _o = {
           "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]",
-          b,
-          j,
-          We[e],
-          Ke[r],
+          P,
+          q,
+          un[e],
+          dn[r],
           t
         ),
-        ...i
+        ...a
       }
     );
   }
-), Zo = s(
+), gn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      zt,
+      Ze,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-toggle-group inline-flex items-center gap-1",
           "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface p-1",
           t
@@ -1780,38 +1800,807 @@ const _o = {
       }
     );
   }
-), Qe = {
+), ye = Ae, Ca = Re;
+function Lt(n, t) {
+  return t === "light" && n.lightHue !== null ? "lightHue" : "hue";
+}
+const ft = De;
+function mn(n) {
+  return {
+    hue: { ...n.hue },
+    lightHue: n.lightHue === null ? null : { ...n.lightHue },
+    dark: { ...n.dark },
+    light: { ...n.light },
+    radius: { ...n.radius }
+  };
+}
+function pn(n, t) {
+  return { ...ft(n, t), ...n[t] };
+}
+function yn(n, t) {
+  return oe(Ie(n, t));
+}
+function D(n, t) {
+  const e = n;
+  return Array.from(
+    { length: 12 },
+    (r, a) => e[`--gryt-${t}-${a + 1}`]
+  );
+}
+function Qt(n) {
+  return JSON.stringify(n);
+}
+const Ct = {
+  accent: "Accent",
+  accentLight: "Accent, light",
+  secondary: "Secondary",
+  secondaryLight: "Secondary, light",
+  success: "Success",
+  danger: "Danger",
+  dangerLight: "Danger, light",
+  warning: "Warning",
+  onAccent: "Text on accent",
+  onSecondary: "Text on secondary",
+  onDanger: "Text on danger"
+}, Zt = {
+  bg: "Page",
+  surface: "Surface",
+  surfaceRaised: "Raised surface",
+  surfaceHover: "Surface, hovered",
+  border: "Border",
+  muted: "Muted text",
+  text: "Text"
+}, qt = {
+  sm: "Small",
+  md: "Medium",
+  lg: "Large",
+  xl: "Extra large",
+  full: "Full"
+}, fn = {
+  sm: "Chips, swatches, small insets",
+  md: "Menu rows, list items",
+  lg: "Cards and panels",
+  xl: "Dialogs, composers, bubbles",
+  full: "Buttons, fields, avatars"
+};
+function ot({
+  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));
+  function f(h) {
+    g(h), Le(h) && e(lt(h));
+  }
+  return /* @__PURE__ */ d("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ d(
+      "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
+        ]
+      }
+    ),
+    /* @__PURE__ */ d("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          "aria-label": `${n}, colour picker`,
+          className: "docs-swatch disabled:cursor-not-allowed disabled:opacity-60",
+          disabled: a,
+          onChange: (h) => f(h.target.value),
+          type: "color",
+          value: lt(t)
+        }
+      ),
+      /* @__PURE__ */ o(
+        me,
+        {
+          "aria-label": `${n}, hex value`,
+          className: "font-mono",
+          disabled: a,
+          onBlur: () => g(t),
+          onChange: (h) => f(h.target.value),
+          size: "small",
+          spellCheck: !1,
+          value: m
+        }
+      )
+    ] })
+  ] });
+}
+const hn = {
+  pass: jt,
+  tight: se,
+  fail: Gt
+}, te = {
+  pass: "text-gryt-success-11",
+  tight: "text-gryt-warning-11",
+  fail: "text-gryt-danger-11"
+};
+function bn({ 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: [
+      /* @__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,
+        " of ",
+        n.length
+      ] }) : /* @__PURE__ */ d("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(
+        "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__ */ 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: [
+                " / ",
+                r.min
+              ] }),
+              /* @__PURE__ */ d("span", { className: "sr-only", children: [
+                " against a minimum of ",
+                r.min
+              ] }),
+              !r.advisory && r.ratio >= 7 ? /* @__PURE__ */ o("span", { className: "pl-1.5 text-[10px] text-gryt-success-11", children: "AAA" }) : null
+            ] })
+          ]
+        },
+        r.id
+      );
+    }) }),
+    t ? /* @__PURE__ */ o("div", { className: "pt-3", children: /* @__PURE__ */ o(yt, { 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: [
+    /* @__PURE__ */ o("span", { className: "mb-1 block text-[11px] font-medium tracking-wide text-gryt-muted", children: n }),
+    /* @__PURE__ */ o("ol", { className: "m-0 flex list-none gap-px overflow-hidden rounded-(--gryt-radius-sm) border border-gryt-border p-0", children: t.map((e, r) => /* @__PURE__ */ o(
+      "li",
+      {
+        className: "h-6 min-w-0 flex-1",
+        style: { backgroundColor: e },
+        title: `${n} ${r + 1} · ${e}`
+      },
+      `${n}-${r}`
+    )) })
+  ] });
+}
+const xn = [
+  { family: "accent", label: "Accent" },
+  { family: "secondary", label: "Secondary" },
+  { family: "success", label: "Success" },
+  { family: "danger", label: "Danger" },
+  { family: "warning", label: "Warning" }
+];
+function vn(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);
+  return {
+    id: n,
+    label: t,
+    foreground: e,
+    background: r,
+    ratio: g,
+    min: a,
+    level: vn(g, a),
+    advisory: m,
+    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`
+    ]),
+    B("text-surface", "Text on a surface", m, c, 4.5, [
+      `${p}.text`,
+      `${p}.surface`
+    ]),
+    B("muted-page", "Muted text on the page", g, a, 4.5, [
+      `${p}.muted`,
+      `${p}.bg`
+    ]),
+    B("muted-surface", "Muted text on a surface", g, c, 4.5, [
+      `${p}.muted`,
+      `${p}.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],
+        a,
+        4.5,
+        [`${f}.${T}`, `${p}.bg`]
+      )
+    );
+  }
+  const x = [
+    { family: "accent", on: "onAccent", label: "Label on a filled button" },
+    { family: "secondary", on: "onSecondary", label: "Label on a secondary button" },
+    { family: "danger", on: "onDanger", label: "Label on a danger button" }
+  ];
+  for (const { family: 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}`
+      ])
+    );
+  return S.push(
+    B(
+      "border-page",
+      "Border against the page",
+      y,
+      a,
+      1.15,
+      [`${p}.border`, `${p}.bg`],
+      !0
+    )
+  ), S;
+}
+function b(n, t) {
+  return n + Math.random() * (t - n);
+}
+function kt(n) {
+  return n[Math.floor(Math.random() * n.length)];
+}
+const Nn = [
+  { 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 = {
+    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),
+    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) }),
+    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) }),
+    onAccent: "",
+    onSecondary: "",
+    onDanger: ""
+  };
+  return h.onAccent = O(y), h.onSecondary = O(p), h.onDanger = O(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) }
+  };
+}
+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 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 at(n) {
+  return {
+    ...n,
+    onAccent: O(n.accent),
+    onSecondary: O(n.secondary),
+    onDanger: O(n.danger)
+  };
+}
+function X(n) {
+  const t = at(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;
+  }
+  return m === 1 ? "#ffffff" : "#000000";
+}
+function Pn(n) {
+  const t = mn(n);
+  for (const e of ["dark", "light"])
+    t[e].text = st(
+      t[e].text,
+      t[e].bg,
+      7
+    ), t[e].text = st(
+      t[e].text,
+      t[e].surface,
+      7
+    ), t[e].muted = st(
+      t[e].muted,
+      t[e].bg,
+      4.5
+    ), t[e].muted = st(
+      t[e].muted,
+      t[e].surface,
+      4.5
+    );
+  for (const e of [t.hue, t.lightHue])
+    if (e !== null)
+      for (const [r, a] of [
+        ["onAccent", "accent"],
+        ["onSecondary", "secondary"],
+        ["onDanger", "danger"]
+      ]) {
+        const c = e[a];
+        Q(e[r], c) < 7 && (e[r] = O(c));
+      }
+  return t;
+}
+function Sn(n) {
+  return n === "light" ? { ...Dt.color, ...Ge } : { ...Dt.color };
+}
+function $n(n, t) {
+  const e = Sn(t);
+  return Object.entries(pn(n, t)).filter(
+    ([r, a]) => lt(a) !== lt(e[r] ?? "")
+  );
+}
+function Cn(n) {
+  return ye.filter(
+    (t) => n.radius[t] !== Dt.radius[t]
+  ).map((t) => [t, n.radius[t]]);
+}
+function ee(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}`);
+  }), e.push("  },"));
+  const a = Cn(n);
+  a.length > 0 && e.push(
+    `  radius: { ${a.map(([m, g]) => `${m}: ${g}`).join(", ")} }`
+  );
+  const c = e.length - 1;
+  return c >= 0 && (e[c] = e[c].replace(/,$/, "")), e.length === 0 ? "" : `{
+${e.join(`
+`)}
+}`;
+}
+function ka(n) {
+  const t = ee(n, "dark"), e = ee(n, "light");
+  return `import { createGrytTheme, GrytProvider } from "@gryt/ui";
+
+// One call per appearance. The scales are regenerated from these anchors, so
+// every component moves with them — not just the tokens named here.
+const dark = createGrytTheme(${t});
+
+const light = createGrytTheme(${e});
+
+export function App({ appearance }: { appearance: "dark" | "light" }) {
+  return (
+    <GrytProvider theme={appearance === "light" ? light : dark}>
+      {/* your app */}
+    </GrytProvider>
+  );
+}`;
+}
+function Ra(n) {
+  return JSON.stringify(n, null, 2);
+}
+function kn(n) {
+  const t = n.trim();
+  if (t === "") return { error: "Nothing to import." };
+  const e = Me(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 = {
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+  full: 40
+}, At = 999, Rn = [
+  "bg",
+  "surface",
+  "surfaceRaised",
+  "surfaceHover",
+  "border"
+], An = ["text", "muted"];
+function Aa({
+  value: n,
+  onChange: t,
+  appearance: e,
+  onAppearanceChange: r,
+  actions: a,
+  footer: c,
+  className: m
+}) {
+  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 [h, S] = _(""), [x, T] = _(null), w = it(() => yn(n, e), [n, e]), R = it(
+    () => wn(n, w, e),
+    [n, w, e]
+  ), tt = it(() => {
+    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}`);
+    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(
+    (i) => !i.advisory && i.level === "fail"
+  ).length;
+  function ut(i) {
+    f(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 wt(i) {
+    y(
+      X(i.hue) && (i.lightHue === null || X(i.lightHue))
+    ), ut(i);
+  }
+  function Nt(i, u) {
+    et(($) => {
+      const Tt = Lt($, e);
+      return {
+        ...$,
+        [Tt]: { ...ft($, e), [i]: u }
+      };
+    });
+  }
+  function ve(i) {
+    et((u) => ({
+      ...u,
+      lightHue: i ? { ...u.hue } : null
+    }));
+  }
+  function we(i) {
+    y(i), i && ut({
+      ...n,
+      hue: at(n.hue),
+      lightHue: n.lightHue === null ? null : at(n.lightHue)
+    });
+  }
+  function Bt(i, u) {
+    et(($) => ({
+      ...$,
+      [e]: { ...$[e], [i]: u }
+    }));
+  }
+  function Ne(i) {
+    et((u) => ({ ...u, name: i === "" ? void 0 : i }));
+  }
+  function Te(i, u) {
+    et(($) => ({
+      ...$,
+      radius: { ...$.radius, [i]: u }
+    }));
+  }
+  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.");
+      return;
+    }
+    wt(u.draft), u.appearance !== void 0 && r(u.appearance), T(null), S("");
+  }
+  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: [
+      /* @__PURE__ */ o("div", { className: "w-52", children: /* @__PURE__ */ o(
+        fr,
+        {
+          label: "Preset",
+          onValueChange: (i) => {
+            const u = je.get(String(i));
+            u && wt(u.theme);
+          },
+          options: [
+            ..._t.map((i) => ({
+              label: i.name,
+              value: i.id
+            })),
+            ...Ht === "custom" ? [{ label: "Custom", value: "custom" }] : []
+          ],
+          size: "small",
+          value: Ht
+        }
+      ) }),
+      /* @__PURE__ */ o("div", { className: "w-48", children: /* @__PURE__ */ o(
+        me,
+        {
+          label: "Name",
+          maxLength: Ee,
+          onChange: (i) => Ne(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 }),
+        "Generate"
+      ] }),
+      /* @__PURE__ */ d("div", { className: "ml-auto flex items-end gap-3", children: [
+        /* @__PURE__ */ d(
+          gn,
+          {
+            "aria-label": "Appearance",
+            onValueChange: (i) => {
+              const u = i[i.length - 1];
+              (u === "dark" || u === "light") && r(u);
+            },
+            value: [e],
+            children: [
+              /* @__PURE__ */ o(Jt, { size: "small", value: "dark", children: "Dark" }),
+              /* @__PURE__ */ o(Jt, { size: "small", value: "light", children: "Light" })
+            ]
+          }
+        ),
+        a
+      ] })
+    ] }),
+    /* @__PURE__ */ d("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__ */ o(
+          Kt,
+          {
+            checked: n.lightHue !== null,
+            onCheckedChange: ve
+          }
+        ),
+        "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 }),
+        "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,
+          {
+            label: Zt[i],
+            onChange: (u) => Bt(i, u),
+            value: zt[i],
+            warning: tt.get(`${e}.${i}`)
+          },
+          i
+        )),
+        /* @__PURE__ */ o(U, { label: "neutral", steps: D(w, "neutral") })
+      ] }),
+      /* @__PURE__ */ o(K, { title: "Text", children: An.map((i) => /* @__PURE__ */ o(
+        ot,
+        {
+          label: Zt[i],
+          onChange: (u) => Bt(i, u),
+          value: zt[i],
+          warning: tt.get(`${e}.${i}`)
+        },
+        i
+      )) }),
+      /* @__PURE__ */ d(K, { title: "Accent", children: [
+        ["accent", "accentLight", "onAccent"].map((i) => /* @__PURE__ */ o(
+          ot,
+          {
+            disabled: g && i === "onAccent",
+            label: Ct[i],
+            onChange: (u) => Nt(i, u),
+            value: vt[i],
+            warning: tt.get(`${xt}.${i}`)
+          },
+          i
+        )),
+        /* @__PURE__ */ o(U, { label: "accent", steps: D(w, "accent") })
+      ] }),
+      /* @__PURE__ */ d(K, { title: "Secondary", children: [
+        ["secondary", "secondaryLight", "onSecondary"].map(
+          (i) => /* @__PURE__ */ o(
+            ot,
+            {
+              disabled: g && i === "onSecondary",
+              label: Ct[i],
+              onChange: (u) => Nt(i, u),
+              value: vt[i],
+              warning: tt.get(`${xt}.${i}`)
+            },
+            i
+          )
+        ),
+        /* @__PURE__ */ o(U, { label: "secondary", steps: D(w, "secondary") })
+      ] }),
+      /* @__PURE__ */ d(K, { title: "Status", children: [
+        [
+          "success",
+          "danger",
+          "dangerLight",
+          "onDanger",
+          "warning"
+        ].map((i) => /* @__PURE__ */ o(
+          ot,
+          {
+            disabled: g && i === "onDanger",
+            label: Ct[i],
+            onChange: (u) => Nt(i, u),
+            value: vt[i],
+            warning: tt.get(`${xt}.${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(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(
+            pr,
+            {
+              "aria-label": `${qt[i]} radius`,
+              max: mt[i],
+              min: 0,
+              onValueChange: (Tt) => {
+                const Ft = Number(Tt);
+                Te(
+                  i,
+                  i === "full" && Ft >= mt.full ? At : Ft
+                );
+              },
+              value: Math.min($, mt[i])
+            }
+          ),
+          /* @__PURE__ */ o("p", { className: "m-0 pt-1 text-[11px] text-gryt-muted", children: fn[i] })
+        ] }, i);
+      }) }),
+      /* @__PURE__ */ o(
+        bn,
+        {
+          checks: R,
+          onRepair: xe > 0 ? () => ut(Pn(n)) : void 0
+        }
+      ),
+      /* @__PURE__ */ d("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__ */ 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),
+              placeholder: "{ …",
+              rows: 2,
+              spellCheck: !1,
+              value: h
+            }
+          ),
+          /* @__PURE__ */ o(yt, { onClick: () => Pe(h), tone: "neutral", children: "Load" })
+        ] }),
+        x ? /* @__PURE__ */ o("p", { className: "m-0 pt-2 text-sm text-gryt-danger-11", children: x }) : null
+      ] }),
+      c
+    ] })
+  ] });
+}
+function K({ title: n, children: t }) {
+  return /* @__PURE__ */ d("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 = {
   primary: "bg-gryt-accent",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning",
   danger: "bg-gryt-danger"
 };
-function Jo({
-  className: a,
+function Ia({
+  className: n,
   value: t,
   label: e,
   showValue: r = !1,
-  tone: i = "primary",
+  tone: a = "primary",
   ...c
 }) {
-  return /* @__PURE__ */ g(
-    B.Root,
+  return /* @__PURE__ */ d(
+    nt.Root,
     {
       value: t,
-      className: n("gryt-meter flex w-full flex-col gap-1.5", a),
+      className: s("gryt-meter flex w-full flex-col gap-1.5", n),
       ...c,
       children: [
-        (e || r) && /* @__PURE__ */ g("div", { className: "flex items-baseline justify-between gap-2", children: [
-          e ? /* @__PURE__ */ o(B.Label, { className: "text-sm text-gryt-muted", children: e }) : /* @__PURE__ */ o("span", {}),
-          r && /* @__PURE__ */ o(B.Value, { className: "font-mono text-xs text-gryt-muted tabular-nums" })
+        (e || r) && /* @__PURE__ */ 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" })
         ] }),
-        /* @__PURE__ */ o(B.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-          B.Indicator,
+        /* @__PURE__ */ o(nt.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
+          nt.Indicator,
           {
-            className: n(
+            className: s(
               "h-full rounded-(--gryt-radius-full)",
               "transition-[width] duration-120 ease-out motion-reduce:transition-none",
-              Qe[i]
+              In[a]
             )
           }
         ) })
@@ -1819,13 +2608,13 @@ function Jo({
     }
   );
 }
-const Ze = s(
+const Dn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      S.Popup,
+      E.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-alert-dialog fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
           "flex w-[32rem] max-w-[calc(100vw-3rem)] flex-col gap-4",
           "rounded-(--gryt-radius-lg) border border-gryt-border bg-gryt-surface p-5 text-gryt-text",
@@ -1839,12 +2628,12 @@ const Ze = s(
       }
     );
   }
-), Je = s(function({ className: t, ...e }, r) {
+), Ln = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    S.Backdrop,
+    E.Backdrop,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-alert-dialog-backdrop fixed inset-0 z-50 min-h-dvh bg-black/60",
         "backdrop-blur-(--gryt-backdrop-blur)",
         "transition-opacity duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
@@ -1854,40 +2643,40 @@ const Ze = s(
       ...e
     }
   );
-}), qe = s(function({ className: t, ...e }, r) {
+}), Mn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    S.Title,
+    E.Title,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-alert-dialog-title text-lg font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), tr = s(function({ className: t, ...e }, r) {
+}), Gn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    S.Description,
+    E.Description,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-alert-dialog-description text-sm leading-6 text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), qo = {
-  Root: S.Root,
-  Trigger: S.Trigger,
-  Portal: S.Portal,
-  Backdrop: Je,
-  Popup: Ze,
-  Title: qe,
-  Description: tr,
-  Close: S.Close
-}, ft = [
+}), Da = {
+  Root: E.Root,
+  Trigger: E.Trigger,
+  Portal: E.Portal,
+  Backdrop: Ln,
+  Popup: Dn,
+  Title: Mn,
+  Description: Gn,
+  Close: E.Close
+}, fe = [
   "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
@@ -1895,195 +2684,195 @@ const Ze = s(
   "data-highlighted:bg-gryt-surface-raised",
   "data-selected:text-gryt-accent-11",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
-].join(" "), xt = [
-  yt,
-  mt.medium,
+].join(" "), he = [
+  de,
+  ue.medium,
   "border-gryt-border",
-  b
-].join(" "), er = s(function({ className: t, ...e }, r) {
+  P
+].join(" "), jn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    y.Input,
+    v.Input,
     {
       ref: r,
-      className: n("gryt-combobox-input", xt, t),
+      className: s("gryt-combobox-input", he, t),
       ...e
     }
   );
-}), rr = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
+}), En = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
   return /* @__PURE__ */ o(
-    y.Positioner,
+    v.Positioner,
     {
-      ref: i,
+      ref: a,
       sideOffset: e,
-      className: n("gryt-combobox-positioner outline-none", t),
+      className: s("gryt-combobox-positioner outline-none", t),
       ...r
     }
   );
-}), or = s(
+}), Hn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      y.Popup,
+      v.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-combobox max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-          D,
-          $,
+          Y,
+          H,
           t
         ),
         ...e
       }
     );
   }
-), ar = s(function({ className: t, ...e }, r) {
+), zn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    y.Item,
+    v.Item,
     {
       ref: r,
-      className: n("gryt-combobox-item", ft, t),
+      className: s("gryt-combobox-item", fe, t),
       ...e
     }
   );
-}), nr = s(function({ className: t, ...e }, r) {
+}), Bn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    y.Empty,
+    v.Empty,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-combobox-empty px-3 py-2 text-sm text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), ta = {
-  Root: y.Root,
-  Input: er,
-  InputGroup: y.InputGroup,
-  Trigger: y.Trigger,
-  Icon: y.Icon,
-  Clear: y.Clear,
-  Value: y.Value,
-  Chips: y.Chips,
-  Chip: y.Chip,
-  ChipRemove: y.ChipRemove,
-  Portal: y.Portal,
-  Positioner: rr,
-  Popup: or,
-  List: y.List,
-  Item: ar,
-  ItemIndicator: y.ItemIndicator,
-  Group: y.Group,
-  GroupLabel: y.GroupLabel,
-  Empty: nr,
-  Separator: y.Separator
-}, ir = s(function({ className: t, ...e }, r) {
+}), 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) {
   return /* @__PURE__ */ o(
-    p.Input,
+    N.Input,
     {
       ref: r,
-      className: n("gryt-autocomplete-input", xt, t),
+      className: s("gryt-autocomplete-input", he, t),
       ...e
     }
   );
-}), sr = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
+}), _n = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
   return /* @__PURE__ */ o(
-    p.Positioner,
+    N.Positioner,
     {
-      ref: i,
+      ref: a,
       sideOffset: e,
-      className: n("gryt-autocomplete-positioner outline-none", t),
+      className: s("gryt-autocomplete-positioner outline-none", t),
       ...r
     }
   );
-}), cr = s(function({ className: t, ...e }, r) {
+}), Vn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    p.Popup,
+    N.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-autocomplete max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-        D,
-        $,
+        Y,
+        H,
         t
       ),
       ...e
     }
   );
-}), lr = s(function({ className: t, ...e }, r) {
+}), On = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    p.Item,
+    N.Item,
     {
       ref: r,
-      className: n("gryt-autocomplete-item", ft, t),
+      className: s("gryt-autocomplete-item", fe, t),
       ...e
     }
   );
-}), dr = s(function({ className: t, ...e }, r) {
+}), Yn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    p.Empty,
+    N.Empty,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-autocomplete-empty px-3 py-2 text-sm text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), ea = {
-  Root: p.Root,
-  Input: ir,
-  InputGroup: p.InputGroup,
-  Trigger: p.Trigger,
-  Icon: p.Icon,
-  Clear: p.Clear,
-  Value: p.Value,
-  Portal: p.Portal,
-  Positioner: sr,
-  Popup: cr,
-  List: p.List,
-  Item: lr,
-  Group: p.Group,
-  GroupLabel: p.GroupLabel,
-  Empty: dr,
-  Separator: p.Separator
-}, ra = s(
+}), 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(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Bt,
+      qe,
       {
         ref: r,
-        className: n("gryt-checkbox-group flex flex-col gap-2", t),
+        className: s("gryt-checkbox-group flex flex-col gap-2", t),
         ...e
       }
     );
   }
-), gr = s(
+), Un = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Q.Trigger,
+      Et.Trigger,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-collapsible-trigger flex w-full items-center justify-between gap-2",
           "rounded-(--gryt-radius-md) border-0 bg-transparent px-2 py-2 text-left",
           "text-sm font-medium text-gryt-text select-none",
           "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-          b,
+          P,
           t
         ),
         ...e
       }
     );
   }
-), ur = s(
+), Xn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Q.Panel,
+      Et.Panel,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-collapsible-panel overflow-hidden",
           // Base UI measures the panel and exposes the height as a variable, so
           // this animates to the content's real height rather than to a guess.
@@ -2096,26 +2885,26 @@ const Ze = s(
       }
     );
   }
-), oa = {
-  Root: Q.Root,
-  Trigger: gr,
-  Panel: ur
-}, aa = s(function({ className: t, ...e }, r) {
+), ja = {
+  Root: Et.Root,
+  Trigger: Un,
+  Panel: Xn
+}, Ea = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    Ft,
+    tr,
     {
       ref: r,
-      className: n("gryt-form flex flex-col gap-(--gryt-space-lg)", t),
+      className: s("gryt-form flex flex-col gap-(--gryt-space-lg)", t),
       ...e
     }
   );
-}), yr = s(
+}), Kn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      dt.Root,
+      ie.Root,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-fieldset flex min-w-0 flex-col gap-3 border-0 p-0",
           t
         ),
@@ -2123,25 +2912,25 @@ const Ze = s(
       }
     );
   }
-), mr = s(function({ className: t, ...e }, r) {
+), Wn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    dt.Legend,
+    ie.Legend,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-fieldset-legend text-sm font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), na = { Root: yr, Legend: mr }, ia = s(
+}), Ha = { Root: Kn, Legend: Wn }, za = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Et,
+      er,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-menubar flex items-center gap-1",
           "rounded-(--gryt-radius-md) border border-gryt-border bg-gryt-surface p-1",
           t
@@ -2150,132 +2939,132 @@ const Ze = s(
       }
     );
   }
-), pr = s(function({ className: t, ...e }, r) {
+), Jn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Trigger,
+    k.Trigger,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-trigger flex items-center gap-1.5 rounded-(--gryt-radius-md)",
         "border-0 bg-transparent px-3 py-2 text-sm font-medium text-gryt-text select-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
         "data-popup-open:bg-gryt-surface-raised",
-        b,
+        P,
         t
       ),
       ...e
     }
   );
-}), br = s(function({ className: t, ...e }, r) {
+}), Qn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Popup,
+    k.Popup,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-popup outline-none",
-        D,
-        $,
+        Y,
+        H,
         t
       ),
       ...e
     }
   );
-}), fr = s(function({ className: t, ...e }, r) {
+}), Zn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Positioner,
+    k.Positioner,
     {
       ref: r,
-      className: n("gryt-navigation-menu-positioner outline-none", t),
+      className: s("gryt-navigation-menu-positioner outline-none", t),
       ...e
     }
   );
-}), xr = s(function({ className: t, ...e }, r) {
+}), qn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Viewport,
+    k.Viewport,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-viewport relative overflow-hidden",
         t
       ),
       ...e
     }
   );
-}), hr = s(function({ className: t, ...e }, r) {
+}), to = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Link,
+    k.Link,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-navigation-menu-link block rounded-(--gryt-radius-md) px-3 py-2",
         "text-sm text-gryt-text no-underline outline-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-        b,
+        P,
         t
       ),
       ...e
     }
   );
-}), sa = {
-  Root: w.Root,
-  List: w.List,
-  Item: w.Item,
-  Trigger: pr,
-  Content: w.Content,
-  Portal: w.Portal,
-  Positioner: fr,
-  Viewport: xr,
-  Popup: br,
-  Link: hr,
-  Icon: w.Icon,
-  Arrow: w.Arrow
-}, nt = "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", ca = s(
-  function({ className: t, label: e, scrubbable: r = !1, ...i }, c) {
-    return /* @__PURE__ */ g(
-      R.Root,
+}), 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(
+  function({ className: t, label: e, scrubbable: r = !1, ...a }, c) {
+    return /* @__PURE__ */ d(
+      z.Root,
       {
         ref: c,
-        className: n("gryt-number-field flex flex-col gap-1.5", t),
-        ...i,
+        className: s("gryt-number-field flex flex-col gap-1.5", t),
+        ...a,
         children: [
-          e && (r ? /* @__PURE__ */ g(R.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
+          e && (r ? /* @__PURE__ */ d(z.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
             e,
-            /* @__PURE__ */ o(R.ScrubAreaCursor, {})
+            /* @__PURE__ */ o(z.ScrubAreaCursor, {})
           ] }) : /* @__PURE__ */ o("span", { className: "text-sm text-gryt-muted", children: e })),
-          /* @__PURE__ */ g(
-            R.Group,
+          /* @__PURE__ */ d(
+            z.Group,
             {
-              className: n(
+              className: s(
                 "flex w-fit items-center overflow-hidden rounded-(--gryt-radius-full)",
                 "border border-gryt-border bg-gryt-surface-raised",
                 "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-gryt-accent-light",
-                j
+                q
               ),
               children: [
                 /* @__PURE__ */ o(
-                  R.Decrement,
+                  z.Decrement,
                   {
                     "aria-label": "Decrease",
-                    className: n(nt, "rounded-l-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(At, { size: 14, weight: "bold" })
+                    className: s(re, "rounded-l-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(Ye, { size: 14, weight: "bold" })
                   }
                 ),
                 /* @__PURE__ */ o(
-                  R.Input,
+                  z.Input,
                   {
-                    className: n(
+                    className: s(
                       "w-16 border-0 bg-transparent px-1 py-2 text-center",
                       "font-mono text-sm text-gryt-text tabular-nums outline-none",
-                      b
+                      P
                     )
                   }
                 ),
                 /* @__PURE__ */ o(
-                  R.Increment,
+                  z.Increment,
                   {
                     "aria-label": "Increase",
-                    className: n(nt, "rounded-r-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Dt, { size: 14, weight: "bold" })
+                    className: s(re, "rounded-r-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(Ue, { size: 14, weight: "bold" })
                   }
                 )
               ]
@@ -2285,73 +3074,73 @@ const Ze = s(
       }
     );
   }
-), la = s(
-  function({ className: t, length: e = 6, ...r }, i) {
+), _a = l(
+  function({ className: t, length: e = 6, ...r }, a) {
     return /* @__PURE__ */ o(
-      ot.Root,
+      Ut.Root,
       {
-        ref: i,
+        ref: a,
         length: e,
-        className: n("gryt-otp-field flex gap-2", t),
+        className: s("gryt-otp-field flex gap-2", t),
         ...r,
-        children: Array.from({ length: e }, (c, l) => /* @__PURE__ */ o(
-          ot.Input,
+        children: Array.from({ length: e }, (c, m) => /* @__PURE__ */ o(
+          Ut.Input,
           {
-            className: n(
+            className: s(
               "gryt-otp-input h-12 w-10 rounded-(--gryt-radius-md) text-center",
               "border border-gryt-border bg-gryt-surface-raised",
               "font-mono text-lg text-gryt-text tabular-nums outline-none",
               "transition-colors duration-(--gryt-dur-fast) motion-reduce:transition-none",
               "data-filled:border-gryt-accent",
-              b
+              P
             )
           },
-          l
+          m
         ))
       }
     );
   }
-), wr = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+), eo = l(
+  function({ className: t, sideOffset: e = 8, ...r }, a) {
     return /* @__PURE__ */ o(
-      M.Positioner,
+      W.Positioner,
       {
-        ref: i,
+        ref: a,
         sideOffset: e,
-        className: n("gryt-preview-card-positioner outline-none", t),
+        className: s("gryt-preview-card-positioner outline-none", t),
         ...r
       }
     );
   }
-), vr = s(
+), ro = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      M.Popup,
+      W.Popup,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-preview-card w-64 max-w-[calc(100vw-2rem)] p-4 outline-none",
-          D,
-          $,
+          Y,
+          H,
           t
         ),
         ...e
       }
     );
   }
-), da = {
-  Root: M.Root,
-  Trigger: M.Trigger,
-  Portal: M.Portal,
-  Positioner: wr,
-  Popup: vr,
-  Arrow: M.Arrow
-}, Nr = s(function({ className: t, ...e }, r) {
+), Va = {
+  Root: W.Root,
+  Trigger: W.Trigger,
+  Portal: W.Portal,
+  Positioner: eo,
+  Popup: ro,
+  Arrow: W.Arrow
+}, no = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    G.Root,
+    J.Root,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-toolbar flex items-center gap-1",
         "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface p-1",
         t
@@ -2359,113 +3148,121 @@ const Ze = s(
       ...e
     }
   );
-}), Pr = s(function({ className: t, ...e }, r) {
+}), oo = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    G.Separator,
+    J.Separator,
     {
       ref: r,
-      className: n("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", t),
+      className: s("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", t),
       ...e
     }
   );
-}), ga = {
-  Root: Nr,
-  Group: G.Group,
-  Button: G.Button,
-  Link: G.Link,
-  Input: G.Input,
-  Separator: Pr
+}), Oa = {
+  Root: no,
+  Group: J.Group,
+  Button: J.Button,
+  Link: J.Link,
+  Input: J.Input,
+  Separator: oo
 };
 export {
-  Ho as Accordion,
-  zo as Alert,
-  qo as AlertDialog,
-  ea as Autocomplete,
-  qt as Avatar,
-  No as Badge,
-  Ht as Button,
-  Mo as Card,
-  jo as CardActions,
-  Lo as CardContent,
-  Go as CardHeader,
-  To as Checkbox,
-  ra as CheckboxGroup,
-  Po as Chip,
-  oa as Collapsible,
-  ta as Combobox,
-  wo as Composer,
-  Oo as ContextMenu,
-  vo as ConversationItem,
-  Vo as Dialog,
-  Do as Divider,
-  _o as Drawer,
-  na as Fieldset,
-  aa as Form,
-  ma as GRYT_HUE_KEYS,
-  pa as GRYT_NEUTRAL_KEYS,
-  ba as GRYT_RADIUS_KEYS,
-  fa as GRYT_THEME_NAME_MAX,
-  po as GrytProvider,
-  bo as IconButton,
-  U as Menu,
-  ia as Menubar,
-  xo as MessageBubble,
-  Jo as Meter,
-  sa as NavigationMenu,
-  ca as NumberField,
-  la as OtpField,
-  Xo as Popover,
-  da as PreviewCard,
-  Bo as Progress,
-  ko as Radio,
-  Co as RadioGroup,
-  Wo as ScrollArea,
-  Ro as Select,
-  Eo as Skeleton,
-  $o as Slider,
-  Fo as Spinner,
-  fo as Surface,
-  So as Switch,
-  Ce as Tab,
-  Yo as Tabs,
-  ho as TextField,
-  Uo as Toast,
-  Qo as Toggle,
-  Zo as ToggleGroup,
-  ga as Toolbar,
-  Io as Tooltip,
-  Ao as TooltipProvider,
-  xa as alphaScale,
-  Ua as avatarSeed,
-  ha as cloneGrytTheme,
-  n as cn,
-  wa as contrast,
-  va as createGrytTheme,
-  Na as decodeGrytTheme,
-  Pa as encodeGrytTheme,
-  Ta as grytAlphaScales,
-  ka as grytAlphaScalesLight,
-  Ca as grytLightTokens,
-  Sa as grytPresets,
-  $a as grytPresetsById,
-  Ra as grytScales,
-  Ia as grytScalesLight,
-  Aa as grytTheme,
-  Da as grytThemeHues,
-  Ma as grytThemeToOptions,
-  Ga as grytTokens,
-  La as hexToOklch,
-  ja as hexToRgb,
-  za as hueScale,
-  Ba as hueScaleLight,
-  Fa as isHexColor,
-  Ea as neutralScale,
-  Va as neutralScaleLight,
-  _a as normalizeHexColor,
-  Ya as normalizeThemeName,
-  Ha as oklchToHex,
-  Oa as rgbToHex,
-  de as useMediaQuery,
-  Ko as useToastManager
+  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,
+  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
 };
 //# sourceMappingURL=index.js.map