@gryt/ui 0.22.0 → 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 ct, useContext as Y, useRef as Q, forwardRef as s, useCallback as W, useLayoutEffect as vt, useMemo as tt, useState as Nt, useEffect as Pt, useSyncExternalStore as Tt } from "react";
-import { createGrytTheme as kt } from "@gryt/theme";
-import { GRYT_HUE_KEYS as pa, GRYT_NEUTRAL_KEYS as ba, GRYT_RADIUS_KEYS as fa, GRYT_THEME_NAME_MAX as xa, alphaScale as ha, cloneGrytTheme as wa, contrast as va, createGrytTheme as Na, decodeGrytTheme as Pa, encodeGrytTheme as Ta, grytAlphaScales as ka, grytAlphaScalesLight as Ca, grytLightTokens as Sa, grytPresets as $a, grytPresetsById as Ra, grytScales as Ia, grytScalesLight as Aa, grytTheme as Da, grytThemeHues as Ma, grytThemeToOptions as Ga, grytTokens as La, hexToOklch as ja, hexToRgb as za, hueScale as Ba, hueScaleLight as Fa, isHexColor as Ea, neutralScale as Va, neutralScaleLight as _a, normalizeHexColor as Ya, normalizeThemeName as Ha, oklchToHex as Oa, rgbToHex as Xa } from "@gryt/theme";
-import { Button as lt } from "@base-ui/react/button";
-import { clsx as Ct } from "clsx";
-import { twMerge as St } from "tailwind-merge";
-import { Field as _ } from "@base-ui/react/field";
-import { PaperPlaneTilt as $t, X as dt, Check as gt, CaretUpDown as Rt, CircleNotch as It, CaretDown as At, Minus as Dt, Plus as Mt } from "@phosphor-icons/react";
-import { Avatar as X } from "@base-ui/react/avatar";
-import { owlAvatarDataUri as Gt, eggAvatarDataUri as Lt } from "@gryt/owl";
-import { avatarSeed as Ka } from "@gryt/owl";
-import { Checkbox as et } from "@base-ui/react/checkbox";
-import { Radio as rt } from "@base-ui/react/radio";
-import { RadioGroup as jt } from "@base-ui/react/radio-group";
-import { Switch as ot } from "@base-ui/react/switch";
-import { Slider as z } from "@base-ui/react/slider";
-import { Select as h } from "@base-ui/react/select";
-import { Separator as zt } from "@base-ui/react/separator";
-import { Progress as U } from "@base-ui/react/progress";
-import { Dialog as C } from "@base-ui/react/dialog";
-import { Drawer as N } from "@base-ui/react/drawer";
-import { Menu as A } from "@base-ui/react/menu";
-import { Tabs as E } from "@base-ui/react/tabs";
-import { Accordion as F } from "@base-ui/react/accordion";
-import { ContextMenu as k } from "@base-ui/react/context-menu";
-import { Popover as P } from "@base-ui/react/popover";
-import { Toast as T } from "@base-ui/react/toast";
-import { ScrollArea as L } from "@base-ui/react/scroll-area";
-import { Toggle as Bt } from "@base-ui/react/toggle";
-import { ToggleGroup as Ft } from "@base-ui/react/toggle-group";
-import { Meter as B } from "@base-ui/react/meter";
-import { AlertDialog as S } from "@base-ui/react/alert-dialog";
-import { Autocomplete as p } from "@base-ui/react/autocomplete";
-import { Combobox as u } from "@base-ui/react/combobox";
-import { CheckboxGroup as Et } from "@base-ui/react/checkbox-group";
-import { Collapsible as Z } from "@base-ui/react/collapsible";
-import { Form as Vt } from "@base-ui/react/form";
-import { Fieldset as ut } from "@base-ui/react/fieldset";
-import { Menubar as _t } from "@base-ui/react/menubar";
-import { NavigationMenu as w } from "@base-ui/react/navigation-menu";
-import { NumberField as R } from "@base-ui/react/number-field";
-import { OTPField as at } from "@base-ui/react/otp-field";
-import { PreviewCard as M } from "@base-ui/react/preview-card";
-import { Toolbar as G } from "@base-ui/react/toolbar";
-const yt = ct(void 0);
-function mt() {
-  return Y(yt);
+import { 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 Yt(a) {
-  return Object.keys(a).some((t) => t.startsWith("--"));
+function rr(n) {
+  return Object.keys(n).some((t) => t.startsWith("--"));
 }
-function bo({
-  children: a,
+function Jo({
+  children: n,
   className: t,
   theme: e,
   tooltipDelay: r = 400,
-  containOverlays: i = !1
+  containOverlays: a = !1
 }) {
-  const c = Q(null), l = e === void 0 ? void 0 : Yt(e) ? e : kt(e);
-  return /* @__PURE__ */ o("div", { className: t, style: l, ref: c, children: /* @__PURE__ */ o(
-    yt.Provider,
+  const c = 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 St(Ct(a));
+function s(...n) {
+  return ze(He(n));
 }
-const Ht = {
+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"
-}, Ot = {
+}, 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"
-}, Xt = 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(
-      lt,
+    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 Ht = {
           // and an icon at full strength on a dead button is the same lie in
           // miniature.
           "data-disabled:cursor-not-allowed data-disabled:opacity-60",
-          Ot[i],
-          Ht[l],
+          or[a],
+          nr[m],
           e
         ),
-        ...d,
+        ...g,
         children: [
           c,
           t,
@@ -134,68 +134,68 @@ const Ht = {
       }
     );
   }
-), f = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", Ut = "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-gryt-accent-light", pt = [
+), 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(" "), bt = {
+].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", Kt = {
+].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"
-}, ft = {
+}, 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"
-}, Wt = {
+}, 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"
-}, Qt = {
+}, 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"
-}, Zt = {
+}, 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"
-}, Jt = {
+}, dr = {
   xsmall: "h-8 w-8",
   small: "h-9 w-9",
   medium: "h-10 w-10",
   large: "h-12 w-12"
-}, fo = s(
-  function({ className: t, size: e = "medium", tone: r = "neutral", ...i }, c) {
+}, Qo = l(
+  function({ className: t, size: e = "medium", tone: r = "neutral", ...a }, c) {
     return /* @__PURE__ */ o(
-      lt,
+      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 Ht = {
           // that is what it is; Base UI puts it there, nothing to pass.
           "motion-safe:not-[[aria-haspopup]]:hover:not-data-disabled:scale-[1.06]",
           "motion-safe:not-[[aria-haspopup]]:active:not-data-disabled:scale-[0.94]",
-          f,
-          j,
-          Jt[e],
-          Zt[r],
+          P,
+          q,
+          dr[e],
+          cr[r],
           t
         ),
-        ...i
+        ...a
       }
     );
   }
-), xo = 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,294 +234,294 @@ const Ht = {
       }
     );
   }
-), ho = 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
       }
     );
   }
-), wo = 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",
-    ...x
-  }, y) {
-    const v = /* @__PURE__ */ o(
-      _.Control,
+    minRows: m = 3,
+    multiline: g = !1,
+    size: y = "medium",
+    ...p
+  }, f) {
+    const h = /* @__PURE__ */ o(
+      gt.Control,
       {
-        ref: y,
-        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",
-          pt,
-          d && "resize-y leading-6",
+          de,
+          g && "resize-y leading-6",
           e ? "border-gryt-danger" : "border-gryt-border",
-          bt[m],
+          ue[y],
           t
         ),
-        ...x
+        ...p
       }
     );
-    return /* @__PURE__ */ g(
-      _.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(_.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
-          v,
-          i ? /* @__PURE__ */ o(
-            _.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
         ]
       }
     );
   }
-), vo = 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
-  }, x) {
-    const y = Q(null), v = W(() => {
-      const b = y.current;
-      if (!b)
+    placeholder: m = "Message Gryt",
+    submitLabel: g = "Send",
+    ...y
+  }, p) {
+    const f = Mt(null), h = It(() => {
+      const x = f.current;
+      if (!x)
         return;
-      const O = window.getComputedStyle(b), J = parseFloat(O.lineHeight) || 24, q = parseFloat(O.paddingTop) + parseFloat(O.paddingBottom);
-      b.style.height = "auto", b.style.height = `${Math.min(
-        Math.max(b.scrollHeight, J * i + q),
-        J * r + q
+      const 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, w * a + R),
+        w * r + R
       )}px`;
-    }, [r, i]);
-    vt(v, [v, m.value]);
-    function V(b) {
+    }, [r, a]);
+    Se(h, [h, y.value]);
+    function S(x) {
       if (!c) {
-        b.preventDefault();
+        x.preventDefault();
         return;
       }
-      c(b);
+      c(x);
     }
-    return /* @__PURE__ */ g("form", { className: n("gryt-composer", t), onSubmit: V, children: [
+    return /* @__PURE__ */ d("form", { className: s("gryt-composer", t), onSubmit: S, children: [
       /* @__PURE__ */ o(
         "textarea",
         {
-          ref: (b) => {
-            y.current = b, typeof x == "function" ? x(b) : x && (x.current = b);
+          ref: (x) => {
+            f.current = x, typeof p == "function" ? p(x) : p && (p.current = x);
           },
-          rows: i,
+          rows: a,
           disabled: e,
-          placeholder: l,
-          onInput: v,
+          placeholder: m,
+          onInput: h,
           className: "gryt-composer-textarea disabled:cursor-not-allowed disabled:opacity-60",
-          ...m
+          ...y
         }
       ),
       /* @__PURE__ */ o(
-        Xt,
+        yt,
         {
           type: "submit",
           disabled: e,
           size: "small",
-          endIcon: /* @__PURE__ */ o($t, { size: 14, weight: "fill" }),
-          children: d
+          endIcon: /* @__PURE__ */ o(Be, { size: 14, weight: "fill" }),
+          children: g
         }
       )
     ] });
   }
-), qt = {
+), ur = {
   small: "h-8 w-8 text-xs",
   medium: "h-10 w-10 text-sm",
   large: "h-12 w-12 text-base"
-}, nt = 256, te = s(function({
+}, Xt = 256, gr = l(function({
   alt: t,
   children: e,
   className: r,
-  fallback: i,
+  fallback: a,
   seed: c,
-  eggSeed: l,
-  size: d = "medium",
-  src: m,
-  ...x
-}, y) {
-  const v = tt(
-    () => c ? Gt(c, { size: nt }) : void 0,
+  eggSeed: m,
+  size: g = "medium",
+  src: y,
+  ...p
+}, f) {
+  const h = it(
+    () => c ? Xe(c, { size: Xt }) : void 0,
     [c]
-  ), V = tt(
-    () => l ? Lt(l, { size: nt }) : void 0,
-    [l]
-  ), b = v ?? V;
-  return /* @__PURE__ */ g(
-    X.Root,
+  ), S = it(
+    () => m ? Ke(m, { size: Xt }) : void 0,
+    [m]
+  ), x = h ?? S;
+  return /* @__PURE__ */ d(
+    Pt.Root,
     {
-      ref: y,
-      className: n(
+      ref: f,
+      className: s(
         "gryt-avatar inline-flex shrink-0 items-center justify-center overflow-hidden align-middle select-none",
         "rounded-(--gryt-radius-full) bg-gryt-surface-raised font-medium text-gryt-text ring-1 ring-gryt-border",
-        qt[d],
+        ur[g],
         r
       ),
-      ...x,
+      ...p,
       children: [
-        m ? /* @__PURE__ */ o(
-          X.Image,
+        y ? /* @__PURE__ */ o(
+          Pt.Image,
           {
-            src: m,
+            src: y,
             alt: t,
             className: "h-full w-full object-cover"
           }
         ) : null,
-        /* @__PURE__ */ o(X.Fallback, { className: "flex h-full w-full items-center justify-center", children: b ? /* @__PURE__ */ o(
+        /* @__PURE__ */ o(Pt.Fallback, { className: "flex h-full w-full items-center justify-center", children: x ? /* @__PURE__ */ o(
           "img",
           {
-            src: b,
+            src: x,
             alt: t,
             className: "h-full w-full object-cover"
           }
-        ) : i ?? e })
+        ) : a ?? e })
       ]
     }
   );
-}), No = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, d) {
-  return /* @__PURE__ */ g(
+}), 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(
-          te,
+          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
         ] })
       ]
     }
   );
-}), Po = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, d) {
-  const m = typeof t == "number" ? t : null, x = m !== null && m === 0 && !c, y = m !== null && m > i ? `${i}+` : t;
-  return /* @__PURE__ */ g(
+}), ra = l(function({ badgeContent: t, children: e, className: r, max: a = 99, showZero: c = !1, ...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 && !x ? /* @__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: y
+            children: f
           }
         ) : null
       ]
     }
   );
-}), ee = {
+}), 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"
-}, To = 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",
-        ee[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",
-              f
+              P
             ),
-            children: /* @__PURE__ */ o(dt, { size: 10, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ o(Gt, { size: 10, weight: "bold", "aria-hidden": "true" })
           }
         ) : null
       ]
     }
   );
-}), ko = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
+}), Kt = l(
+  function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
-      et.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",
@@ -531,18 +531,18 @@ const Ht = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.08]",
           "motion-safe:active:not-data-disabled:scale-[0.92]",
-          f,
-          j,
+          P,
+          q,
           // Unchecked stays a neutral outline; the tone only paints once checked.
-          Kt[e],
+          sr[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          et.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.
@@ -552,65 +552,65 @@ const Ht = {
               "data-unchecked:scale-0 data-unchecked:opacity-0",
               "motion-reduce:transition-none"
             ),
-            children: /* @__PURE__ */ o(gt, { size: 12, weight: "bold" })
+            children: /* @__PURE__ */ o(jt, { size: 12, weight: "bold" })
           }
         )
       }
     );
   }
-), Co = s(function({ className: t, tone: e = "primary", ...r }, i) {
+), oa = l(function({ className: t, tone: e = "primary", ...r }, a) {
   return /* @__PURE__ */ o(
-    rt.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]",
-        f,
-        j,
+        P,
+        q,
         // Border takes the tone when selected; the dot inside carries the fill.
-        Wt[e],
+        ir[e],
         t
       ),
       ...r,
       children: /* @__PURE__ */ o(
-        rt.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",
-            ft[e]
+            ge[e]
           )
         }
       )
     }
   );
-}), So = s(
+}), aa = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      jt,
+      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
       }
     );
   }
-), $o = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
+), sa = l(
+  function({ className: t, tone: e = "primary", ...r }, a) {
     return /* @__PURE__ */ o(
-      ot.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",
@@ -618,16 +618,16 @@ const Ht = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.05]",
           "motion-safe:active:not-data-disabled:scale-[0.95]",
-          f,
-          j,
-          Qt[e],
+          P,
+          q,
+          lr[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          ot.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"
@@ -637,70 +637,70 @@ const Ht = {
       }
     );
   }
-), it = 3;
-function Ro({
-  className: a,
+), Wt = 3;
+function pr({
+  className: n,
   tone: t = "primary",
   "aria-label": e,
   ...r
 }) {
-  const [i, c] = Nt(!1), l = Q(null);
-  Pt(() => {
-    if (!i && l.current === null)
+  const [a, c] = _(!1), m = Mt(null);
+  $e(() => {
+    if (!a && m.current === null)
       return;
-    const y = () => {
-      l.current = null, c(!1);
+    const f = () => {
+      m.current = null, c(!1);
     };
-    return window.addEventListener("pointerup", y), window.addEventListener("pointercancel", y), () => {
-      window.removeEventListener("pointerup", y), window.removeEventListener("pointercancel", y);
+    return window.addEventListener("pointerup", f), window.addEventListener("pointercancel", f), () => {
+      window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", f);
     };
-  }, [i]);
-  function d(y) {
-    l.current = { x: y.clientX, y: y.clientY };
+  }, [a]);
+  function g(f) {
+    m.current = { x: f.clientX, y: f.clientY };
   }
-  function m(y) {
-    const v = l.current;
-    if (v === null || i)
+  function y(f) {
+    const h = m.current;
+    if (h === null || a)
       return;
-    (Math.abs(y.clientX - v.x) > it || Math.abs(y.clientY - v.y) > it) && c(!0);
+    (Math.abs(f.clientX - h.x) > Wt || Math.abs(f.clientY - h.y) > Wt) && c(!0);
   }
-  const x = i ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
-  return /* @__PURE__ */ o(z.Root, { className: n("gryt-slider w-full", a), ...r, children: /* @__PURE__ */ o(
-    z.Control,
+  const 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]",
-              x,
-              ft[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]",
-              x,
+              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.
-              Ut
+              ar
             ),
             children: /* @__PURE__ */ o(
               "span",
               {
-                className: n(
+                className: s(
                   "block h-full w-full rounded-(--gryt-radius-full) bg-gryt-text",
                   "transition-[scale] duration-(--gryt-dur-spring) ease-spring",
                   "motion-safe:group-hover:scale-[1.12] motion-safe:group-active:scale-[0.94]",
@@ -714,67 +714,67 @@ function Ro({
     }
   ) });
 }
-const re = {
+const yr = {
   small: "min-h-9 px-3 text-sm",
   medium: "min-h-11 px-4 text-sm"
 };
-function Io({
-  className: a,
+function fr({
+  className: n,
   label: t,
   options: e = [],
   placeholder: r = "Select",
-  size: i = "medium",
+  size: a = "medium",
   ...c
 }) {
-  const l = mt();
-  return /* @__PURE__ */ g(h.Root, { items: e, ...c, children: [
-    /* @__PURE__ */ g("div", { className: n("gryt-select flex w-full flex-col gap-1.5", a), children: [
-      t ? /* @__PURE__ */ o(h.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
-      /* @__PURE__ */ g(
-        h.Trigger,
+  const 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",
-            f,
-            re[i]
+            P,
+            yr[a]
           ),
           children: [
-            /* @__PURE__ */ o(h.Value, { placeholder: r }),
-            /* @__PURE__ */ o(h.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(Rt, { size: 16 }) })
+            /* @__PURE__ */ o(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(gt, { 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)
             )) })
           }
         )
@@ -782,46 +782,46 @@ function Io({
     ) })
   ] });
 }
-function Ao({
-  children: a,
+function ia({
+  children: n,
   className: t,
   side: e = "top",
   sideOffset: r = 8,
-  title: i
+  title: a
 }) {
-  const c = mt();
-  return /* @__PURE__ */ g(I.Root, { children: [
-    /* @__PURE__ */ o(I.Trigger, { render: a }),
-    /* @__PURE__ */ o(I.Portal, { container: c, children: /* @__PURE__ */ o(
-      I.Positioner,
+  const c = 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 Do = I.Provider, Mo = 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(
-      zt,
+      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
@@ -830,12 +830,12 @@ const Do = I.Provider, Mo = s(
       }
     );
   }
-), Go = 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
       ),
@@ -843,87 +843,87 @@ const Do = I.Provider, Mo = s(
     }
   );
 });
-function Lo({
-  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 jo({
-  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 zo({
-  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 oe = {
+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"
-}, Bo = 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",
-        oe[e],
+        hr[e],
         t
       ),
       ...r
     }
   );
 });
-function Fo({ className: a, value: t = null, ...e }) {
+function ya({ className: n, value: t = null, ...e }) {
   return /* @__PURE__ */ o(
-    U.Root,
+    St.Root,
     {
       value: t,
-      className: n("gryt-progress w-full", a),
+      className: s("gryt-progress w-full", n),
       ...e,
-      children: /* @__PURE__ */ o(U.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-        U.Indicator,
+      children: /* @__PURE__ */ o(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
@@ -938,41 +938,41 @@ function Fo({ className: a, value: t = null, ...e }) {
     }
   );
 }
-function Eo({
-  className: a,
+function fa({
+  className: n,
   size: t = 24,
   "aria-label": e = "Loading"
 }) {
   return /* @__PURE__ */ o(
-    It,
+    _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 ae = {
+const br = {
   text: "h-4 rounded-(--gryt-radius-sm)",
   rounded: "rounded-(--gryt-radius-lg)",
   circular: "rounded-(--gryt-radius-full)",
   rectangular: "rounded-none"
 };
-function Vo({
-  className: a,
+function 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
   };
@@ -980,7 +980,7 @@ function Vo({
     "div",
     {
       "aria-hidden": "true",
-      className: n(
+      className: s(
         // Not bg-gryt-surface-raised. #1e2028 against #1a1d24 is four points of
         // luminance, which is invisible on a laptop screen at an angle — the
         // placeholder that is meant to say "something is coming" said nothing.
@@ -988,24 +988,24 @@ function Vo({
         // the surfaces it can land on rather than only the one it was picked
         // against, and it dims rather than brightens as it pulses.
         "gryt-skeleton bg-white/9 motion-safe:animate-pulse",
-        ae[r],
-        a
+        br[r],
+        n
       ),
-      style: l,
+      style: m,
       ...c
     }
   );
 }
-const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", ne = 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)",
-          xt,
+          pe,
           "data-starting-style:opacity-0 data-ending-style:opacity-0",
           t
         ),
@@ -1013,17 +1013,17 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ie = s(
+), 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",
-          xt,
+          pe,
           "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
           "data-ending-style:scale-[0.98] data-ending-style:opacity-0",
           t
@@ -1032,13 +1032,13 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), se = s(
+), 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
         ),
@@ -1046,13 +1046,13 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), ce = 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
         ),
@@ -1060,13 +1060,13 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), le = 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
         ),
@@ -1074,45 +1074,45 @@ const xt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), _o = {
-  Root: C.Root,
-  Trigger: C.Trigger,
-  Portal: C.Portal,
-  Close: C.Close,
-  Backdrop: ne,
-  Popup: ie,
-  Title: se,
-  Description: ce,
-  Footer: le
-}, de = () => () => {
+), 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 ge(a) {
-  const t = W(
+function Sr(n) {
+  const t = It(
     (r) => {
-      if (typeof window > "u" || !window.matchMedia) return de();
-      const i = window.matchMedia(a);
-      return i.addEventListener("change", r), () => i.removeEventListener("change", r);
+      if (typeof window > "u" || !window.matchMedia) return Pr();
+      const a = window.matchMedia(n);
+      return a.addEventListener("change", r), () => a.removeEventListener("change", r);
     },
-    [a]
-  ), e = W(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(a).matches, [a]);
-  return Tt(t, e, () => !1);
+    [n]
+  ), e = It(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(n).matches, [n]);
+  return Ce(t, e, () => !1);
 }
-const ue = {
+const $r = {
   left: "left",
   right: "right",
   top: "up",
   bottom: "down"
-}, H = ct("right"), ye = {
+}, bt = ne("right"), Cr = {
   left: "items-stretch justify-start",
   right: "items-stretch justify-end",
   top: "items-start justify-center",
   bottom: "items-end justify-center"
-}, me = {
+}, 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)"
-}, pe = {
+}, 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))]",
@@ -1142,41 +1142,41 @@ const ue = {
     "data-ending-style:[transform:translateY(calc(100%-var(--gryt-drawer-bleed)))]"
   ].join(" ")
 };
-function be({
-  side: a = "right",
+function Ar({
+  side: n = "right",
   sheetOnMobile: t = !0,
   children: e,
   ...r
 }) {
-  const i = ge("(max-width: 767px)"), c = t && i ? "bottom" : a;
-  return /* @__PURE__ */ o(H.Provider, { value: c, children: /* @__PURE__ */ o(N.Root, { swipeDirection: ue[c], ...r, children: e }) });
+  const a = 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 fe = s(
+const Ir = l(
   function({ className: t, ...e }, r) {
-    const i = Y(H);
+    const a = ht(bt);
     return /* @__PURE__ */ o(
-      N.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",
-          ye[i],
+          Cr[a],
           t
         ),
         ...e
       }
     );
   }
-), xe = s(function({ className: t, ...e }, r) {
-  const i = Y(H);
+), Dr = l(function({ className: t, ...e }, r) {
+  const a = ht(bt);
   return /* @__PURE__ */ o(
-    N.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",
@@ -1184,19 +1184,19 @@ const fe = s(
         // duration here turns a drag into a drag plus lag.
         "data-swiping:duration-0 data-swiping:select-none",
         "motion-reduce:transition-none",
-        pe[i],
-        me[i],
+        Rr[a],
+        kr[a],
         t
       ),
       ...e
     }
   );
-}), he = s(function({ className: t, ...e }, r) {
+}), Lr = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    N.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
@@ -1212,64 +1212,64 @@ const fe = s(
     }
   );
 });
-function we({ className: a }) {
-  const t = Y(H);
+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 Yo = {
-  Root: be,
-  Trigger: N.Trigger,
-  Portal: N.Portal,
-  Backdrop: he,
-  Viewport: fe,
-  Popup: xe,
-  Content: N.Content,
-  Grabber: we,
-  Close: N.Close,
-  Title: N.Title,
-  Description: N.Description
-}, ve = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+const 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
       }
     );
   }
-), Ne = 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
     }
   );
-}), Pe = 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
@@ -1281,29 +1281,29 @@ const Yo = {
       ...e
     }
   );
-}), Te = 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
     }
   );
-}), K = {
-  Root: A.Root,
-  Trigger: A.Trigger,
-  Portal: A.Portal,
-  Positioner: ve,
-  Popup: Ne,
-  Item: Pe,
-  Separator: Te
-}, ke = s(function({ className: t, ...e }, r) {
+}), $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
@@ -1314,12 +1314,12 @@ const Yo = {
       ...e
     }
   );
-}), Ce = 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.
@@ -1331,12 +1331,12 @@ const Yo = {
       ...e
     }
   );
-}), Se = 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",
@@ -1362,20 +1362,20 @@ const Yo = {
         "data-[orientation=vertical]:gap-2.5 data-[orientation=vertical]:px-3",
         "data-[orientation=vertical]:rounded-(--gryt-radius-md)",
         "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        f,
+        P,
         t
       ),
       ...e
     }
   );
-}), $e = 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",
@@ -1395,12 +1395,12 @@ const Yo = {
       }
     );
   }
-), Re = 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.
@@ -1411,49 +1411,49 @@ const Yo = {
       ...e
     }
   );
-}), Ho = Object.assign(ke, { List: Ce, Tab: Se, Panel: Re, Indicator: $e }), Ie = s(function({ className: t, ...e }, r) {
+}), 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
     }
   );
-}), Ae = 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
       }
     );
   }
-), De = s(
-  function({ children: t, className: e, expandIcon: r, ...i }, c) {
-    return /* @__PURE__ */ o(F.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ g(
-      F.Trigger,
+), 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",
-          f,
+          P,
           e
         ),
-        ...i,
+        ...a,
         children: [
           t,
           r === void 0 ? /* @__PURE__ */ o(
-            At,
+            Ve,
             {
               size: 16,
               className: "shrink-0 transition-transform duration-(--gryt-dur-spring) ease-spring data-panel-open:rotate-180 motion-reduce:transition-none"
@@ -1463,13 +1463,13 @@ const Yo = {
       }
     ) });
   }
-), Me = s(
-  function({ children: t, className: e, ...r }, i) {
+), 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.
@@ -1483,105 +1483,105 @@ const Yo = {
       }
     );
   }
-), Oo = Object.assign(Ie, { Item: Ae, Trigger: De, Panel: Me }), Ge = s(
-  function({ className: t, sideOffset: e = 2, ...r }, i) {
+), 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
       }
     );
   }
-), Xo = {
-  Root: k.Root,
-  Trigger: k.Trigger,
-  Portal: k.Portal,
-  Positioner: Ge,
-  Popup: K.Popup,
-  Item: K.Item,
-  Separator: K.Separator,
-  Group: k.Group,
-  GroupLabel: k.GroupLabel,
-  SubmenuRoot: k.SubmenuRoot,
-  SubmenuTrigger: k.SubmenuTrigger
-}, Le = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
+), 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
       }
     );
   }
-), je = 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
       }
     );
   }
-), ze = 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
     }
   );
-}), Be = 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
     }
   );
-}), Uo = {
-  Root: P.Root,
-  Trigger: P.Trigger,
-  Portal: P.Portal,
-  Positioner: Le,
-  Popup: je,
-  Title: ze,
-  Description: Be,
-  Close: P.Close,
-  Arrow: P.Arrow
-}, Fe = {
+}), 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"
-}, Ee = 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
@@ -1590,12 +1590,12 @@ const Yo = {
       }
     );
   }
-), Ve = 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
@@ -1603,7 +1603,7 @@ const Yo = {
         // white hairline separates it from the page without drawing a box
         // around it.
         "rounded-(--gryt-radius-xl) border text-gryt-text",
-        Fe[e],
+        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",
@@ -1615,37 +1615,37 @@ const Yo = {
       ...r
     }
   );
-}), _e = 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
     }
   );
-}), Ye = 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
     }
   );
-}), He = 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",
@@ -1653,15 +1653,15 @@ const Yo = {
         t
       ),
       ...r,
-      children: e ?? /* @__PURE__ */ o(dt, { size: 14, weight: "bold" })
+      children: e ?? /* @__PURE__ */ o(Gt, { size: 14, weight: "bold" })
     }
   );
-}), Oe = 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",
@@ -1672,33 +1672,33 @@ const Yo = {
       ...e
     }
   );
-}), Ko = {
-  Provider: T.Provider,
-  Portal: T.Portal,
-  Viewport: Ee,
-  Root: Ve,
-  Title: _e,
-  Description: Ye,
-  Close: He,
-  Action: Oe
-}, Wo = T.useToastManager, Xe = s(
+}), 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
       }
     );
   }
-), Ue = 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
@@ -1707,14 +1707,14 @@ const Yo = {
       }
     );
   }
-), Ke = 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.
@@ -1725,17 +1725,17 @@ const Yo = {
           t
         ),
         ...r,
-        children: /* @__PURE__ */ o(L.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
+        children: /* @__PURE__ */ o(Z.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
       }
     );
   }
-), Qo = {
-  Root: Xe,
-  Viewport: Ue,
-  Scrollbar: Ke,
-  Content: L.Content,
-  Corner: L.Corner
-}, We = {
+), $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",
@@ -1756,18 +1756,18 @@ const Yo = {
     "data-pressed:bg-gryt-danger data-pressed:text-gryt-on-danger",
     "data-pressed:hover:not-data-disabled:bg-gryt-danger"
   ].join(" ")
-}, Qe = {
+}, 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"
-}, Zo = 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(
-      Bt,
+      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",
@@ -1775,23 +1775,23 @@ const Yo = {
           "transition-[scale,background-color,color] duration-(--gryt-dur-spring) ease-spring",
           "motion-safe:hover:not-data-disabled:scale-[1.06]",
           "motion-safe:active:not-data-disabled:scale-[0.94]",
-          f,
-          j,
-          Qe[e],
-          We[r],
+          P,
+          q,
+          un[e],
+          dn[r],
           t
         ),
-        ...i
+        ...a
       }
     );
   }
-), Jo = s(
+), gn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Ft,
+      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
@@ -1800,38 +1800,807 @@ const Yo = {
       }
     );
   }
-), Ze = {
+), 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 qo({
-  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",
-              Ze[i]
+              In[a]
             )
           }
         ) })
@@ -1839,13 +2608,13 @@ function qo({
     }
   );
 }
-const Je = 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",
@@ -1859,12 +2628,12 @@ const Je = s(
       }
     );
   }
-), qe = 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",
@@ -1874,40 +2643,40 @@ const Je = s(
       ...e
     }
   );
-}), tr = 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
     }
   );
-}), er = 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
     }
   );
-}), ta = {
-  Root: S.Root,
-  Trigger: S.Trigger,
-  Portal: S.Portal,
-  Backdrop: qe,
-  Popup: Je,
-  Title: tr,
-  Description: er,
-  Close: S.Close
-}, ht = [
+}), 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
@@ -1915,195 +2684,195 @@ const Je = s(
   "data-highlighted:bg-gryt-surface-raised",
   "data-selected:text-gryt-accent-11",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
-].join(" "), wt = [
-  pt,
-  bt.medium,
+].join(" "), he = [
+  de,
+  ue.medium,
   "border-gryt-border",
-  f
-].join(" "), rr = s(function({ className: t, ...e }, r) {
+  P
+].join(" "), jn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Input,
+    v.Input,
     {
       ref: r,
-      className: n("gryt-combobox-input", wt, t),
+      className: s("gryt-combobox-input", he, t),
       ...e
     }
   );
-}), or = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
+}), En = l(function({ className: t, sideOffset: e = 6, ...r }, a) {
   return /* @__PURE__ */ o(
-    u.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
     }
   );
-}), ar = s(
+}), Hn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      u.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
       }
     );
   }
-), nr = s(function({ className: t, ...e }, r) {
+), zn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Item,
+    v.Item,
     {
       ref: r,
-      className: n("gryt-combobox-item", ht, t),
+      className: s("gryt-combobox-item", fe, t),
       ...e
     }
   );
-}), ir = s(function({ className: t, ...e }, r) {
+}), Bn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Empty,
+    v.Empty,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-combobox-empty px-3 py-2 text-sm text-gryt-muted",
         t
       ),
       ...e
     }
   );
-}), ea = {
-  Root: u.Root,
-  Input: rr,
-  InputGroup: u.InputGroup,
-  Trigger: u.Trigger,
-  Icon: u.Icon,
-  Clear: u.Clear,
-  Value: u.Value,
-  Chips: u.Chips,
-  Chip: u.Chip,
-  ChipRemove: u.ChipRemove,
-  Portal: u.Portal,
-  Positioner: or,
-  Popup: ar,
-  List: u.List,
-  Item: nr,
-  ItemIndicator: u.ItemIndicator,
-  Group: u.Group,
-  GroupLabel: u.GroupLabel,
-  Empty: ir,
-  Separator: u.Separator
-}, sr = s(function({ className: t, ...e }, r) {
+}), 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", wt, t),
+      className: s("gryt-autocomplete-input", he, t),
       ...e
     }
   );
-}), cr = 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
     }
   );
-}), lr = 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
     }
   );
-}), dr = 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", ht, t),
+      className: s("gryt-autocomplete-item", fe, t),
       ...e
     }
   );
-}), gr = 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
     }
   );
-}), ra = {
-  Root: p.Root,
-  Input: sr,
-  InputGroup: p.InputGroup,
-  Trigger: p.Trigger,
-  Icon: p.Icon,
-  Clear: p.Clear,
-  Value: p.Value,
-  Portal: p.Portal,
-  Positioner: cr,
-  Popup: lr,
-  List: p.List,
-  Item: dr,
-  Group: p.Group,
-  GroupLabel: p.GroupLabel,
-  Empty: gr,
-  Separator: p.Separator
-}, oa = s(
+}), 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(
-      Et,
+      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
       }
     );
   }
-), ur = s(
+), Un = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Z.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",
-          f,
+          P,
           t
         ),
         ...e
       }
     );
   }
-), yr = s(
+), Xn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Z.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.
@@ -2116,26 +2885,26 @@ const Je = s(
       }
     );
   }
-), aa = {
-  Root: Z.Root,
-  Trigger: ur,
-  Panel: yr
-}, na = s(function({ className: t, ...e }, r) {
+), ja = {
+  Root: Et.Root,
+  Trigger: Un,
+  Panel: Xn
+}, Ea = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    Vt,
+    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
     }
   );
-}), mr = s(
+}), Kn = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      ut.Root,
+      ie.Root,
       {
         ref: r,
-        className: n(
+        className: s(
           "gryt-fieldset flex min-w-0 flex-col gap-3 border-0 p-0",
           t
         ),
@@ -2143,25 +2912,25 @@ const Je = s(
       }
     );
   }
-), pr = s(function({ className: t, ...e }, r) {
+), Wn = l(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    ut.Legend,
+    ie.Legend,
     {
       ref: r,
-      className: n(
+      className: s(
         "gryt-fieldset-legend text-sm font-semibold text-gryt-text",
         t
       ),
       ...e
     }
   );
-}), ia = { Root: mr, Legend: pr }, sa = s(
+}), Ha = { Root: Kn, Legend: Wn }, za = l(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      _t,
+      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
@@ -2170,132 +2939,132 @@ const Je = s(
       }
     );
   }
-), br = 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",
-        f,
+        P,
         t
       ),
       ...e
     }
   );
-}), fr = 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
     }
   );
-}), xr = 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
     }
   );
-}), hr = 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
     }
   );
-}), wr = 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",
-        f,
+        P,
         t
       ),
       ...e
     }
   );
-}), ca = {
-  Root: w.Root,
-  List: w.List,
-  Item: w.Item,
-  Trigger: br,
-  Content: w.Content,
-  Portal: w.Portal,
-  Positioner: xr,
-  Viewport: hr,
-  Popup: fr,
-  Link: wr,
-  Icon: w.Icon,
-  Arrow: w.Arrow
-}, st = "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-transparent text-gryt-muted transition-colors hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50", la = s(
-  function({ className: t, label: e, scrubbable: r = !1, ...i }, c) {
-    return /* @__PURE__ */ g(
-      R.Root,
+}), 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(st, "rounded-l-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Dt, { 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",
-                      f
+                      P
                     )
                   }
                 ),
                 /* @__PURE__ */ o(
-                  R.Increment,
+                  z.Increment,
                   {
                     "aria-label": "Increase",
-                    className: n(st, "rounded-r-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Mt, { size: 14, weight: "bold" })
+                    className: s(re, "rounded-r-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(Ue, { size: 14, weight: "bold" })
                   }
                 )
               ]
@@ -2305,73 +3074,73 @@ const Je = s(
       }
     );
   }
-), da = s(
-  function({ className: t, length: e = 6, ...r }, i) {
+), _a = l(
+  function({ className: t, length: e = 6, ...r }, a) {
     return /* @__PURE__ */ o(
-      at.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(
-          at.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",
-              f
+              P
             )
           },
-          l
+          m
         ))
       }
     );
   }
-), vr = 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
       }
     );
   }
-), Nr = 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
       }
     );
   }
-), ga = {
-  Root: M.Root,
-  Trigger: M.Trigger,
-  Portal: M.Portal,
-  Positioner: vr,
-  Popup: Nr,
-  Arrow: M.Arrow
-}, Pr = 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
@@ -2379,113 +3148,121 @@ const Je = s(
       ...e
     }
   );
-}), Tr = 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
     }
   );
-}), ua = {
-  Root: Pr,
-  Group: G.Group,
-  Button: G.Button,
-  Link: G.Link,
-  Input: G.Input,
-  Separator: Tr
+}), Oa = {
+  Root: no,
+  Group: J.Group,
+  Button: J.Button,
+  Link: J.Link,
+  Input: J.Input,
+  Separator: oo
 };
 export {
-  Oo as Accordion,
-  Bo as Alert,
-  ta as AlertDialog,
-  ra as Autocomplete,
-  te as Avatar,
-  Po as Badge,
-  Xt as Button,
-  Go as Card,
-  zo as CardActions,
-  jo as CardContent,
-  Lo as CardHeader,
-  ko as Checkbox,
-  oa as CheckboxGroup,
-  To as Chip,
-  aa as Collapsible,
-  ea as Combobox,
-  vo as Composer,
-  Xo as ContextMenu,
-  No as ConversationItem,
-  _o as Dialog,
-  Mo as Divider,
-  Yo as Drawer,
-  ia as Fieldset,
-  na as Form,
-  pa as GRYT_HUE_KEYS,
-  ba as GRYT_NEUTRAL_KEYS,
-  fa as GRYT_RADIUS_KEYS,
-  xa as GRYT_THEME_NAME_MAX,
-  bo as GrytProvider,
-  fo as IconButton,
-  K as Menu,
-  sa as Menubar,
-  ho as MessageBubble,
-  qo as Meter,
-  ca as NavigationMenu,
-  la as NumberField,
-  da as OtpField,
-  Uo as Popover,
-  ga as PreviewCard,
-  Fo as Progress,
-  Co as Radio,
-  So as RadioGroup,
-  Qo as ScrollArea,
-  Io as Select,
-  Vo as Skeleton,
-  Ro as Slider,
-  Eo as Spinner,
-  xo as Surface,
-  $o as Switch,
-  Se as Tab,
-  Ho as Tabs,
-  wo as TextField,
-  Ko as Toast,
-  Zo as Toggle,
-  Jo as ToggleGroup,
-  ua as Toolbar,
-  Ao as Tooltip,
-  Do as TooltipProvider,
-  ha as alphaScale,
-  Ka as avatarSeed,
-  wa as cloneGrytTheme,
-  n as cn,
-  va as contrast,
-  Na as createGrytTheme,
-  Pa as decodeGrytTheme,
-  Ta as encodeGrytTheme,
-  ka as grytAlphaScales,
-  Ca as grytAlphaScalesLight,
-  Sa as grytLightTokens,
-  $a as grytPresets,
-  Ra as grytPresetsById,
-  Ia as grytScales,
-  Aa as grytScalesLight,
-  Da as grytTheme,
-  Ma as grytThemeHues,
-  Ga as grytThemeToOptions,
-  La as grytTokens,
-  ja as hexToOklch,
-  za as hexToRgb,
-  Ba as hueScale,
-  Fa as hueScaleLight,
-  Ea as isHexColor,
-  Va as neutralScale,
-  _a as neutralScaleLight,
-  Ya as normalizeHexColor,
-  Ha as normalizeThemeName,
-  Oa as oklchToHex,
-  Xa as rgbToHex,
-  ge as useMediaQuery,
-  Wo as useToastManager
+  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