@gryt/ui 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,46 +1,198 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { Tooltip as D } from "@base-ui/react/tooltip";
-import { Button as it } from "@base-ui/react/button";
-import { forwardRef as s, useRef as st, useCallback as U, useLayoutEffect as pt, useState as bt, useEffect as ft, useSyncExternalStore as xt, useContext as W, createContext as ht } from "react";
-import { clsx as wt } from "clsx";
-import { twMerge as vt } from "tailwind-merge";
-import { Field as E } from "@base-ui/react/field";
-import { PaperPlaneTilt as Nt, X as ct, Check as lt, CaretUpDown as Pt, CircleNotch as kt, CaretDown as Tt, Minus as $t, Plus as Ct } from "@phosphor-icons/react";
-import { Avatar as X } from "@base-ui/react/avatar";
-import { Checkbox as q } from "@base-ui/react/checkbox";
-import { Radio as tt } from "@base-ui/react/radio";
-import { RadioGroup as St } from "@base-ui/react/radio-group";
-import { Switch as et } from "@base-ui/react/switch";
-import { Slider as B } from "@base-ui/react/slider";
-import { Select as x } from "@base-ui/react/select";
-import { Separator as Rt } from "@base-ui/react/separator";
-import { Progress as O } from "@base-ui/react/progress";
-import { Dialog as $ } from "@base-ui/react/dialog";
-import { Drawer as v } from "@base-ui/react/drawer";
-import { Menu as A } from "@base-ui/react/menu";
-import { Tabs as V } from "@base-ui/react/tabs";
-import { Accordion as F } from "@base-ui/react/accordion";
-import { ContextMenu as T } from "@base-ui/react/context-menu";
-import { Popover as P } from "@base-ui/react/popover";
-import { Toast as k } from "@base-ui/react/toast";
-import { ScrollArea as j } from "@base-ui/react/scroll-area";
-import { Toggle as It } from "@base-ui/react/toggle";
-import { ToggleGroup as Dt } from "@base-ui/react/toggle-group";
-import { Meter as z } from "@base-ui/react/meter";
-import { AlertDialog as C } from "@base-ui/react/alert-dialog";
-import { Autocomplete as p } from "@base-ui/react/autocomplete";
-import { Combobox as g } from "@base-ui/react/combobox";
-import { CheckboxGroup as At } from "@base-ui/react/checkbox-group";
-import { Collapsible as Q } from "@base-ui/react/collapsible";
-import { Form as Mt } from "@base-ui/react/form";
-import { Fieldset as dt } from "@base-ui/react/fieldset";
-import { Menubar as Lt } from "@base-ui/react/menubar";
-import { NavigationMenu as h } from "@base-ui/react/navigation-menu";
-import { NumberField as I } from "@base-ui/react/number-field";
-import { OTPField as rt } from "@base-ui/react/otp-field";
-import { PreviewCard as M } from "@base-ui/react/preview-card";
-import { Toolbar as L } from "@base-ui/react/toolbar";
-const ot = {
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { Tooltip as j } from "@base-ui/react/tooltip";
+import { Button as bt } from "@base-ui/react/button";
+import { forwardRef as i, useRef as ht, useCallback as at, useLayoutEffect as Lt, useState as Mt, useEffect as At, useSyncExternalStore as Dt, useContext as nt, createContext as jt } from "react";
+import { clsx as Gt } from "clsx";
+import { twMerge as Bt } from "tailwind-merge";
+import { Field as Q } from "@base-ui/react/field";
+import { PaperPlaneTilt as zt, X as xt, Check as wt, CaretUpDown as Ft, CircleNotch as Et, CaretDown as Vt, Minus as _t, Plus as Ht } from "@phosphor-icons/react";
+import { Avatar as tt } from "@base-ui/react/avatar";
+import { Checkbox as lt } from "@base-ui/react/checkbox";
+import { Radio as dt } from "@base-ui/react/radio";
+import { RadioGroup as Ot } from "@base-ui/react/radio-group";
+import { Switch as gt } from "@base-ui/react/switch";
+import { Slider as _ } from "@base-ui/react/slider";
+import { Select as v } from "@base-ui/react/select";
+import { Separator as Ut } from "@base-ui/react/separator";
+import { Progress as et } from "@base-ui/react/progress";
+import { Dialog as L } from "@base-ui/react/dialog";
+import { Drawer as T } from "@base-ui/react/drawer";
+import { Menu as G } from "@base-ui/react/menu";
+import { Tabs as W } from "@base-ui/react/tabs";
+import { Accordion as U } from "@base-ui/react/accordion";
+import { ContextMenu as I } from "@base-ui/react/context-menu";
+import { Popover as C } from "@base-ui/react/popover";
+import { Toast as R } from "@base-ui/react/toast";
+import { ScrollArea as E } from "@base-ui/react/scroll-area";
+import { Toggle as Xt } from "@base-ui/react/toggle";
+import { ToggleGroup as Yt } from "@base-ui/react/toggle-group";
+import { Meter as H } from "@base-ui/react/meter";
+import { AlertDialog as M } from "@base-ui/react/alert-dialog";
+import { Autocomplete as h } from "@base-ui/react/autocomplete";
+import { Combobox as b } from "@base-ui/react/combobox";
+import { CheckboxGroup as Wt } from "@base-ui/react/checkbox-group";
+import { Collapsible as st } from "@base-ui/react/collapsible";
+import { Form as Qt } from "@base-ui/react/form";
+import { Fieldset as vt } from "@base-ui/react/fieldset";
+import { Menubar as Jt } from "@base-ui/react/menubar";
+import { NavigationMenu as N } from "@base-ui/react/navigation-menu";
+import { NumberField as D } from "@base-ui/react/number-field";
+import { OTPField as ut } from "@base-ui/react/otp-field";
+import { PreviewCard as z } from "@base-ui/react/preview-card";
+import { Toolbar as F } from "@base-ui/react/toolbar";
+function Kt(o) {
+  return o <= 0.04045 ? o / 12.92 : ((o + 0.055) / 1.055) ** 2.4;
+}
+function rt(o) {
+  return o <= 31308e-7 ? 12.92 * o : 1.055 * o ** (1 / 2.4) - 0.055;
+}
+function O(o) {
+  return Math.min(1, Math.max(0, o));
+}
+function J(o) {
+  const e = o.replace("#", ""), r = e.length === 3 ? e.split("").map((t) => t + t).join("") : e;
+  return [
+    parseInt(r.slice(0, 2), 16) / 255,
+    parseInt(r.slice(2, 4), 16) / 255,
+    parseInt(r.slice(4, 6), 16) / 255
+  ];
+}
+function Nt([o, e, r]) {
+  const t = (n) => Math.round(O(n) * 255).toString(16).padStart(2, "0");
+  return `#${t(o)}${t(e)}${t(r)}`;
+}
+function X(o) {
+  const [e, r, t] = J(o).map(Kt), n = Math.cbrt(
+    0.4122214708 * e + 0.5363325363 * r + 0.0514459929 * t
+  ), c = Math.cbrt(
+    0.2119034982 * e + 0.6806995451 * r + 0.1073969566 * t
+  ), l = Math.cbrt(
+    0.0883024619 * e + 0.2817188376 * r + 0.6299787005 * t
+  ), d = 0.2104542553 * n + 0.793617785 * c - 0.0040720468 * l, u = 1.9779984951 * n - 2.428592205 * c + 0.4505937099 * l, m = 0.0259040371 * n + 0.7827717662 * c - 0.808675766 * l;
+  return {
+    l: d,
+    c: Math.hypot(u, m),
+    h: (Math.atan2(m, u) * 180 / Math.PI + 360) % 360
+  };
+}
+function S({ l: o, c: e, h: r }) {
+  const t = e * Math.cos(r * Math.PI / 180), n = e * Math.sin(r * Math.PI / 180), c = (o + 0.3963377774 * t + 0.2158037573 * n) ** 3, l = (o - 0.1055613458 * t - 0.0638541728 * n) ** 3, d = (o - 0.0894841775 * t - 1.291485548 * n) ** 3;
+  return Nt([
+    rt(O(4.0767416621 * c - 3.3077115913 * l + 0.2309699292 * d)),
+    rt(O(-1.2684380046 * c + 2.6097574011 * l - 0.3413193965 * d)),
+    rt(O(-0.0041960863 * c - 0.7034186147 * l + 1.707614701 * d))
+  ]);
+}
+const Zt = [0.195, 0.24, 0.27, 0.3, 0.33, 0.37, 0.43, 0.52], qt = [0.014, 0.026, 0.04, 0.052, 0.062, 0.072, 0.084, 0.1];
+function k(o, e) {
+  const { h: r } = X(o), t = Zt.map((d, u) => S({ l: d, c: qt[u], h: r }));
+  t.push(o, e);
+  const n = X(e).l, c = Math.min(0.95, Math.max(0.84, n + 0.04)), l = Math.min(0.98, Math.max(c + 0.06, 0.93));
+  return t.push(S({ l: c, c: 0.11, h: r })), t.push(S({ l, c: 0.055, h: r })), t;
+}
+const te = [
+  0.187,
+  0.231,
+  0.245,
+  0.268,
+  0.289,
+  0.31,
+  0.355,
+  0.425,
+  0.52,
+  0.57,
+  0.627,
+  0.908
+], ee = [
+  0.011,
+  0.014,
+  0.016,
+  0.019,
+  0.022,
+  0.024,
+  0.026,
+  0.026,
+  0.02,
+  0.012,
+  0,
+  8e-3
+];
+function Pt(o) {
+  const e = {
+    0: o.bg,
+    1: o.surface,
+    2: o.surfaceRaised,
+    5: o.border,
+    10: o.muted,
+    11: o.text
+  }, r = X(o.border).h;
+  return te.map(
+    (t, n) => e[n] ?? S({ l: t, c: ee[n], h: r })
+  );
+}
+function Y(o, e) {
+  const r = J(e);
+  return o.map((t) => {
+    const n = J(t);
+    let c = 0;
+    for (let g = 0; g < 3; g++) {
+      const f = n[g], P = r[g];
+      f > P ? c = Math.max(c, P < 1 ? (f - P) / (1 - P) : 0) : f < P && (c = Math.max(c, P > 0 ? (P - f) / P : 0));
+    }
+    if (c < 1e-6) return "transparent";
+    const l = Nt(
+      n.map((g, f) => O(r[f] + (g - r[f]) / c))
+    ), [d, u, m] = J(l).map((g) => Math.round(g * 255));
+    return `rgb(${d} ${u} ${m} / ${(c * 100).toFixed(1)}%)`;
+  });
+}
+const re = [
+  0.962,
+  1,
+  0.978,
+  0.952,
+  0.928,
+  0.898,
+  0.855,
+  0.79,
+  0.66,
+  0.61,
+  0.48,
+  0.25
+], oe = [
+  6e-3,
+  0,
+  4e-3,
+  7e-3,
+  0.01,
+  0.013,
+  0.016,
+  0.018,
+  0.016,
+  0.014,
+  0.012,
+  0.014
+], ae = [0.975, 0.955, 0.93, 0.905, 0.878, 0.845, 0.795, 0.72], ne = [0.012, 0.024, 0.038, 0.05, 0.062, 0.074, 0.09, 0.11];
+function Tt(o) {
+  const e = {
+    0: o.bg,
+    1: o.surface,
+    2: o.surfaceRaised,
+    5: o.border,
+    10: o.muted,
+    11: o.text
+  }, r = X(o.border).h;
+  return re.map(
+    (t, n) => e[n] ?? S({ l: t, c: oe[n], h: r })
+  );
+}
+function $(o) {
+  const { l: e, c: r, h: t } = X(o), n = ae.map(
+    (c, l) => S({ l: c, c: ne[l], h: t })
+  );
+  return n.push(o), n.push(S({ l: Math.max(0, e - 0.07), c: r, h: t })), n.push(S({ l: 0.5, c: 0.15, h: t })), n.push(S({ l: 0.33, c: 0.1, h: t })), n;
+}
+const y = {
   color: {
     bg: "#111318",
     surface: "#1a1d24",
@@ -49,7 +201,7 @@ const ot = {
     border: "#2b303d",
     text: "#e0e0e6",
     muted: "#888888",
-    accent: "#968FF8",
+    accent: "#968ff8",
     accentLight: "#b4afff",
     secondary: "#7dd3fc",
     secondaryLight: "#bae6fd",
@@ -68,10 +220,77 @@ const ot = {
     xl: 28,
     full: 999
   }
+}, K = {
+  bg: "#f1f2f7",
+  surface: "#ffffff",
+  surfaceRaised: "#f7f8fb",
+  border: "#dadde6",
+  muted: "#5b5d65",
+  text: "#1f2129"
+}, yt = {
+  neutral: Pt({
+    bg: y.color.bg,
+    surface: y.color.surface,
+    surfaceRaised: y.color.surfaceRaised,
+    border: y.color.border,
+    muted: y.color.muted,
+    text: y.color.text
+  }),
+  accent: k(y.color.accent, y.color.accentLight),
+  secondary: k(
+    y.color.secondary,
+    y.color.secondaryLight
+  ),
+  success: k(y.color.success, y.color.success),
+  danger: k(y.color.danger, y.color.dangerLight),
+  warning: k(y.color.warning, y.color.warning)
+}, mt = {
+  neutral: Tt(K),
+  accent: $(y.color.accent),
+  secondary: $(y.color.secondary),
+  success: $(y.color.success),
+  danger: $(y.color.danger),
+  warning: $(y.color.warning)
+}, Lo = {
+  neutral: Y(yt.neutral, y.color.bg),
+  accent: Y(yt.accent, y.color.bg)
+}, Mo = {
+  neutral: Y(mt.neutral, K.bg),
+  accent: Y(mt.accent, K.bg)
 };
-function jt(a = {}) {
-  const t = { ...ot.color, ...a.color }, e = { ...ot.radius, ...a.radius };
+function se(o = {}) {
+  const e = o.appearance === "light", t = { ...e ? { ...y.color, ...K } : y.color, ...o.color }, n = { ...y.radius, ...o.radius }, c = {
+    bg: t.bg,
+    surface: t.surface,
+    surfaceRaised: t.surfaceRaised,
+    border: t.border,
+    muted: t.muted,
+    text: t.text
+  }, l = e ? {
+    neutral: Tt(c),
+    accent: $(t.accent),
+    secondary: $(t.secondary),
+    success: $(t.success),
+    danger: $(t.danger),
+    warning: $(t.warning)
+  } : {
+    neutral: Pt(c),
+    accent: k(t.accent, t.accentLight),
+    secondary: k(t.secondary, t.secondaryLight),
+    success: k(t.success, t.success),
+    danger: k(t.danger, t.dangerLight),
+    warning: k(t.warning, t.warning)
+  }, d = {};
+  for (const [u, m] of Object.entries(l))
+    m.forEach((g, f) => {
+      d[`--gryt-${u}-${f + 1}`] = g, d[`--color-gryt-${u}-${f + 1}`] = g;
+    });
+  for (const u of ["neutral", "accent"])
+    Y(l[u], t.bg).forEach((m, g) => {
+      d[`--gryt-${u}-a${g + 1}`] = m, d[`--color-gryt-${u}-a${g + 1}`] = m;
+    });
   return {
+    ...d,
     "--gryt-bg": t.bg,
     "--gryt-surface": t.surface,
     "--gryt-surface-raised": t.surfaceRaised,
@@ -111,54 +330,54 @@ function jt(a = {}) {
     "--color-gryt-on-accent": t.onAccent,
     "--color-gryt-on-secondary": t.onSecondary,
     "--color-gryt-on-danger": t.onDanger,
-    "--gryt-radius-sm": `${e.sm}px`,
-    "--gryt-radius-md": `${e.md}px`,
-    "--gryt-radius-lg": `${e.lg}px`,
-    "--gryt-radius-xl": `${e.xl}px`,
-    "--gryt-radius-full": `${e.full}px`
+    "--gryt-radius-sm": `${n.sm}px`,
+    "--gryt-radius-md": `${n.md}px`,
+    "--gryt-radius-lg": `${n.lg}px`,
+    "--gryt-radius-xl": `${n.xl}px`,
+    "--gryt-radius-full": `${n.full}px`
   };
 }
-function Gt(a) {
-  return Object.keys(a).some((t) => t.startsWith("--"));
+function ie(o) {
+  return Object.keys(o).some((e) => e.startsWith("--"));
 }
-function no({
-  children: a,
-  className: t,
-  theme: e,
-  tooltipDelay: r = 400
+function Ao({
+  children: o,
+  className: e,
+  theme: r,
+  tooltipDelay: t = 400
 }) {
-  const i = e && Gt(e) ? e : jt(e ?? {});
-  return /* @__PURE__ */ o("div", { className: t, style: i, children: /* @__PURE__ */ o(D.Provider, { delay: r, children: a }) });
+  const n = r && ie(r) ? r : se(r ?? {});
+  return /* @__PURE__ */ a("div", { className: e, style: n, children: /* @__PURE__ */ a(j.Provider, { delay: t, children: o }) });
 }
-function n(...a) {
-  return vt(wt(a));
+function s(...o) {
+  return Bt(Gt(o));
 }
-const Bt = {
+const ce = {
   primary: "bg-gryt-accent text-gryt-on-accent hover:not-data-disabled:bg-gryt-accent-light",
   secondary: "bg-gryt-secondary text-gryt-on-secondary hover:not-data-disabled:bg-gryt-secondary-light",
   neutral: "bg-gryt-surface-raised text-gryt-text hover:not-data-disabled:bg-gryt-surface-hover",
   danger: "bg-gryt-danger text-gryt-on-danger hover:not-data-disabled:bg-gryt-danger-light",
   ghost: "bg-transparent text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text"
-}, zt = {
+}, le = {
   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"
-}, Ft = s(
+}, de = i(
   function({
-    children: t,
-    className: e,
-    endIcon: r,
-    size: i = "medium",
+    children: e,
+    className: r,
+    endIcon: t,
+    size: n = "medium",
     startIcon: c,
     tone: l = "primary",
-    ...m
+    ...d
   }, u) {
-    return /* @__PURE__ */ d(
-      it,
+    return /* @__PURE__ */ p(
+      bt,
       {
         ref: u,
-        className: n(
+        className: s(
           "gryt-button",
           "inline-flex items-center justify-center gap-2 border-0 shadow-none",
           "rounded-(--gryt-radius-full) font-semibold whitespace-nowrap select-none",
@@ -169,378 +388,393 @@ const Bt = {
           "duration-(--gryt-dur-spring) ease-spring",
           // Press travels further than hover, so the button reads as being
           // pushed down rather than just acknowledging the cursor.
-          "motion-safe:hover:not-data-disabled:scale-[1.03]",
-          "motion-safe:active:not-data-disabled:scale-[0.96]",
+          // A button that opens something does not grow under the cursor.
+          // Base UI positions the popup against the trigger's measured box, and
+          // it keeps measuring while the popup is open — so a trigger that
+          // scales on hover drags its own menu a pixel or two sideways every
+          // time the pointer crosses it. aria-haspopup is how the trigger says
+          // that is what it is; Base UI puts it there, nothing to pass.
+          "motion-safe:not-[[aria-haspopup]]:hover:not-data-disabled:scale-[1.03]",
+          "motion-safe:not-[[aria-haspopup]]:active:not-data-disabled:scale-[0.96]",
           "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light",
           "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-          zt[i],
-          Bt[l],
-          e
+          le[n],
+          ce[l],
+          r
         ),
-        ...m,
+        ...d,
         children: [
           c,
-          t,
-          r
+          e,
+          t
         ]
       }
     );
   }
-), b = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", Vt = "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-gryt-accent-light", S = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", R = [
+), x = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", ge = "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-gryt-accent-light", kt = [
+  "w-full rounded-(--gryt-radius-xl) border bg-gryt-surface-raised",
+  "text-gryt-text outline-none placeholder:text-gryt-muted",
+  "transition-colors duration-150 motion-reduce:transition-none",
+  "hover:border-gryt-accent-light focus:border-gryt-accent",
+  "disabled:cursor-not-allowed disabled:opacity-60"
+].join(" "), $t = {
+  small: "min-h-9 px-3 py-1.5 text-sm",
+  medium: "min-h-11 px-4 py-2.5 text-sm"
+}, B = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", A = [
   // 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(" "), G = "data-disabled:cursor-not-allowed data-disabled:opacity-50", Et = {
+].join(" "), V = "data-disabled:cursor-not-allowed data-disabled:opacity-50", ue = {
   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"
-}, gt = {
+}, Ct = {
   primary: "bg-gryt-accent",
   secondary: "bg-gryt-secondary",
   neutral: "bg-gryt-surface-hover",
   danger: "bg-gryt-danger",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning"
-}, _t = {
+}, ye = {
   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"
-}, Ht = {
+}, me = {
   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"
-}, Xt = {
+}, pe = {
   primary: "text-gryt-accent hover:not-data-disabled:bg-gryt-accent/10",
   secondary: "text-gryt-secondary hover:not-data-disabled:bg-gryt-secondary/10",
   neutral: "text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text",
   danger: "text-gryt-danger hover:not-data-disabled:bg-gryt-danger/10",
   ghost: "text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text"
-}, Ot = {
+}, fe = {
   xsmall: "h-8 w-8",
   small: "h-9 w-9",
   medium: "h-10 w-10",
   large: "h-12 w-12"
-}, io = s(
-  function({ className: t, size: e = "medium", tone: r = "neutral", ...i }, c) {
-    return /* @__PURE__ */ o(
-      it,
+}, Do = i(
+  function({ className: e, size: r = "medium", tone: t = "neutral", ...n }, c) {
+    return /* @__PURE__ */ a(
+      bt,
       {
         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",
           // scale rather than transform — see the note in Button.
           "transition-[scale,background-color,color] duration-(--gryt-dur-spring) ease-spring",
-          "motion-safe:hover:not-data-disabled:scale-[1.06]",
-          "motion-safe:active:not-data-disabled:scale-[0.94]",
-          b,
-          G,
-          Ot[e],
-          Xt[r],
-          t
+          // A button that opens something does not grow under the cursor.
+          // Base UI positions the popup against the trigger's measured box, and
+          // it keeps measuring while the popup is open — so a trigger that
+          // scales on hover drags its own menu a pixel or two sideways every
+          // time the pointer crosses it. aria-haspopup is how the trigger says
+          // 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]",
+          x,
+          V,
+          fe[r],
+          pe[t],
+          e
         ),
-        ...i
+        ...n
       }
     );
   }
-), so = s(
-  function({ className: t, elevated: e = !1, ...r }, i) {
-    return /* @__PURE__ */ o(
+), jo = i(
+  function({ className: e, elevated: r = !1, ...t }, n) {
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: i,
-        className: n(
+        ref: n,
+        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
+          r ? "bg-gryt-surface-raised" : "bg-gryt-surface",
+          e
         ),
-        ...r
+        ...t
       }
     );
   }
-), co = s(
-  function({ children: t, className: e, from: r = "assistant", ...i }, c) {
-    return /* @__PURE__ */ o(
+), Go = i(
+  function({ children: e, className: r, from: t = "assistant", ...n }, c) {
+    return /* @__PURE__ */ a(
       "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
+          t === "user" && "ml-auto bg-gryt-accent text-gryt-on-accent",
+          t === "assistant" && "mr-auto border border-gryt-border bg-gryt-surface text-gryt-text",
+          t === "system" && "mx-auto border border-dashed border-gryt-border bg-transparent text-gryt-muted",
+          r
         ),
-        ...i,
-        children: t
+        ...n,
+        children: e
       }
     );
   }
-), Yt = {
-  small: "min-h-9 px-3 py-1.5 text-sm",
-  medium: "min-h-11 px-4 py-2.5 text-sm"
-}, lo = s(
+), Bo = i(
   function({
-    className: t,
-    error: e = !1,
-    fieldClassName: r,
-    helperText: i,
+    className: e,
+    error: r = !1,
+    fieldClassName: t,
+    helperText: n,
     label: c,
     minRows: l = 3,
-    multiline: m = !1,
+    multiline: d = !1,
     size: u = "medium",
-    ...w
-  }, y) {
-    const N = /* @__PURE__ */ o(
-      E.Control,
+    ...m
+  }, g) {
+    const f = /* @__PURE__ */ a(
+      Q.Control,
       {
-        ref: y,
-        render: m ? /* @__PURE__ */ o("textarea", { rows: l }) : void 0,
-        className: n(
-          "gryt-text-field-control w-full rounded-(--gryt-radius-xl) border bg-gryt-surface-raised",
-          "text-gryt-text outline-none placeholder:text-gryt-muted",
-          "transition-colors duration-150",
-          "hover:border-gryt-accent-light focus:border-gryt-accent",
-          "disabled:cursor-not-allowed disabled:opacity-60",
-          m && "resize-y leading-6",
-          e ? "border-gryt-danger" : "border-gryt-border",
-          Yt[u],
-          t
+        ref: g,
+        render: d ? /* @__PURE__ */ a("textarea", { rows: l }) : void 0,
+        className: s(
+          "gryt-text-field-control",
+          kt,
+          d && "resize-y leading-6",
+          r ? "border-gryt-danger" : "border-gryt-border",
+          $t[u],
+          e
         ),
-        ...w
+        ...m
       }
     );
-    return /* @__PURE__ */ d(
-      E.Root,
+    return /* @__PURE__ */ p(
+      Q.Root,
       {
-        className: n(
+        className: s(
           "gryt-text-field flex w-full flex-col gap-1.5",
-          r
+          t
         ),
         children: [
-          c ? /* @__PURE__ */ o(E.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
-          N,
-          i ? /* @__PURE__ */ o(
-            E.Description,
+          c ? /* @__PURE__ */ a(Q.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
+          f,
+          n ? /* @__PURE__ */ a(
+            Q.Description,
             {
-              className: n(
+              className: s(
                 "text-xs",
-                e ? "text-gryt-danger" : "text-gryt-muted"
+                r ? "text-gryt-danger" : "text-gryt-muted"
               ),
-              children: i
+              children: n
             }
           ) : null
         ]
       }
     );
   }
-), go = s(
+), zo = i(
   function({
-    className: t,
-    disabled: e = !1,
-    maxRows: r = 8,
-    minRows: i = 1,
+    className: e,
+    disabled: r = !1,
+    maxRows: t = 8,
+    minRows: n = 1,
     onSubmit: c,
     placeholder: l = "Message Gryt",
-    submitLabel: m = "Send",
+    submitLabel: d = "Send",
     ...u
-  }, w) {
-    const y = st(null), N = U(() => {
-      const f = y.current;
-      if (!f)
+  }, m) {
+    const g = ht(null), f = at(() => {
+      const w = g.current;
+      if (!w)
         return;
-      const H = window.getComputedStyle(f), K = parseFloat(H.lineHeight) || 24, Z = parseFloat(H.paddingTop) + parseFloat(H.paddingBottom);
-      f.style.height = "auto", f.style.height = `${Math.min(
-        Math.max(f.scrollHeight, K * i + Z),
-        K * r + Z
+      const q = window.getComputedStyle(w), it = parseFloat(q.lineHeight) || 24, ct = parseFloat(q.paddingTop) + parseFloat(q.paddingBottom);
+      w.style.height = "auto", w.style.height = `${Math.min(
+        Math.max(w.scrollHeight, it * n + ct),
+        it * t + ct
       )}px`;
-    }, [r, i]);
-    pt(N, [N, u.value]);
-    function J(f) {
+    }, [t, n]);
+    Lt(f, [f, u.value]);
+    function P(w) {
       if (!c) {
-        f.preventDefault();
+        w.preventDefault();
         return;
       }
-      c(f);
+      c(w);
     }
-    return /* @__PURE__ */ d("form", { className: n("gryt-composer", t), onSubmit: J, children: [
-      /* @__PURE__ */ o(
+    return /* @__PURE__ */ p("form", { className: s("gryt-composer", e), onSubmit: P, children: [
+      /* @__PURE__ */ a(
         "textarea",
         {
-          ref: (f) => {
-            y.current = f, typeof w == "function" ? w(f) : w && (w.current = f);
+          ref: (w) => {
+            g.current = w, typeof m == "function" ? m(w) : m && (m.current = w);
           },
-          rows: i,
-          disabled: e,
+          rows: n,
+          disabled: r,
           placeholder: l,
-          onInput: N,
+          onInput: f,
           className: "gryt-composer-textarea disabled:cursor-not-allowed disabled:opacity-60",
           ...u
         }
       ),
-      /* @__PURE__ */ o(
-        Ft,
+      /* @__PURE__ */ a(
+        de,
         {
           type: "submit",
-          disabled: e,
+          disabled: r,
           size: "small",
-          endIcon: /* @__PURE__ */ o(Nt, { size: 14, weight: "fill" }),
-          children: m
+          endIcon: /* @__PURE__ */ a(zt, { size: 14, weight: "fill" }),
+          children: d
         }
       )
     ] });
   }
-), Ut = {
+), be = {
   small: "h-8 w-8 text-xs",
   medium: "h-10 w-10 text-sm",
   large: "h-12 w-12 text-base"
-}, Wt = s(function({ alt: t, children: e, className: r, fallback: i, size: c = "medium", src: l, ...m }, u) {
-  return /* @__PURE__ */ d(
-    X.Root,
+}, he = i(function({ alt: e, children: r, className: t, fallback: n, size: c = "medium", src: l, ...d }, u) {
+  return /* @__PURE__ */ p(
+    tt.Root,
     {
       ref: u,
-      className: n(
+      className: s(
         "gryt-avatar inline-flex shrink-0 items-center justify-center overflow-hidden align-middle select-none",
         "rounded-(--gryt-radius-full) bg-gryt-surface-raised font-medium text-gryt-text ring-1 ring-gryt-border",
-        Ut[c],
-        r
+        be[c],
+        t
       ),
-      ...m,
+      ...d,
       children: [
-        l ? /* @__PURE__ */ o(
-          X.Image,
+        l ? /* @__PURE__ */ a(
+          tt.Image,
           {
             src: l,
-            alt: t,
+            alt: e,
             className: "h-full w-full object-cover"
           }
         ) : null,
-        /* @__PURE__ */ o(X.Fallback, { className: "flex h-full w-full items-center justify-center", children: i ?? e })
+        /* @__PURE__ */ a(tt.Fallback, { className: "flex h-full w-full items-center justify-center", children: n ?? r })
       ]
     }
   );
-}), uo = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, m) {
-  return /* @__PURE__ */ d(
+}), Fo = i(function({ active: e = !1, avatar: r, className: t, subtitle: n, title: c, ...l }, d) {
+  return /* @__PURE__ */ p(
     "button",
     {
-      ref: m,
+      ref: d,
       type: "button",
-      className: n(
+      className: s(
         "gryt-conversation-item",
-        t ? "bg-gryt-accent text-gryt-on-accent" : "text-gryt-text hover:bg-white/5",
-        r
+        e ? "bg-gryt-accent text-gryt-on-accent" : "text-gryt-text hover:bg-white/5",
+        t
       ),
       ...l,
       children: [
-        e ?? /* @__PURE__ */ o(
-          Wt,
+        r ?? /* @__PURE__ */ a(
+          he,
           {
             size: "small",
-            className: n(
-              t ? "bg-gryt-on-accent text-gryt-accent ring-transparent" : "bg-gryt-surface-raised text-gryt-text"
+            className: s(
+              e ? "bg-gryt-on-accent text-gryt-accent ring-transparent" : "bg-gryt-surface-raised text-gryt-text"
             ),
             children: c.slice(0, 1).toUpperCase()
           }
         ),
-        /* @__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(
+        /* @__PURE__ */ p("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ a("span", { className: "block truncate text-sm font-semibold", children: c }),
+          n ? /* @__PURE__ */ a(
             "span",
             {
-              className: n(
+              className: s(
                 "block truncate text-xs",
-                t ? "text-gryt-on-accent/70" : "text-gryt-muted"
+                e ? "text-gryt-on-accent/70" : "text-gryt-muted"
               ),
-              children: i
+              children: n
             }
           ) : null
         ] })
       ]
     }
   );
-}), yo = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, m) {
-  const u = typeof t == "number" ? t : null, w = u !== null && u === 0 && !c, y = u !== null && u > i ? `${i}+` : t;
-  return /* @__PURE__ */ d(
+}), Eo = i(function({ badgeContent: e, children: r, className: t, max: n = 99, showZero: c = !1, ...l }, d) {
+  const u = typeof e == "number" ? e : null, m = u !== null && u === 0 && !c, g = u !== null && u > n ? `${n}+` : e;
+  return /* @__PURE__ */ p(
     "span",
     {
-      ref: m,
-      className: n("gryt-badge relative inline-flex", r),
+      ref: d,
+      className: s("gryt-badge relative inline-flex", t),
       ...l,
       children: [
-        e,
-        t !== void 0 && !w ? /* @__PURE__ */ o(
+        r,
+        e !== void 0 && !m ? /* @__PURE__ */ a(
           "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: g
           }
         ) : null
       ]
     }
   );
-}), Qt = {
+}), xe = {
   neutral: "border-gryt-border bg-gryt-surface-raised text-gryt-text",
   primary: "border-gryt-accent/40 bg-gryt-accent/12 text-gryt-accent",
   secondary: "border-gryt-secondary/40 bg-gryt-secondary/12 text-gryt-secondary",
   success: "border-gryt-success/40 bg-gryt-success/12 text-gryt-success",
   warning: "border-gryt-warning/40 bg-gryt-warning/12 text-gryt-warning",
   danger: "border-gryt-danger/40 bg-gryt-danger/12 text-gryt-danger"
-}, mo = s(function({ children: t, className: e, icon: r, label: i, onDelete: c, tone: l = "neutral", ...m }, u) {
-  return /* @__PURE__ */ d(
+}, Vo = i(function({ children: e, className: r, icon: t, label: n, onDelete: c, tone: l = "neutral", ...d }, u) {
+  return /* @__PURE__ */ p(
     "span",
     {
       ref: u,
-      className: n(
+      className: s(
         "gryt-chip inline-flex items-center gap-1.5 rounded-(--gryt-radius-full) border px-3 py-1 text-xs font-medium",
-        Qt[l],
-        e
+        xe[l],
+        r
       ),
-      ...m,
+      ...d,
       children: [
-        r,
-        i ?? t,
-        c ? /* @__PURE__ */ o(
+        t,
+        n ?? e,
+        c ? /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             "aria-label": "Remove",
             onClick: c,
-            className: n(
+            className: s(
               "-mr-1 inline-flex h-4 w-4 items-center justify-center rounded-(--gryt-radius-full)",
               "opacity-70 transition-opacity hover:opacity-100",
-              b
+              x
             ),
-            children: /* @__PURE__ */ o(ct, { size: 10, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ a(xt, { size: 10, weight: "bold", "aria-hidden": "true" })
           }
         ) : null
       ]
     }
   );
-}), po = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
-    return /* @__PURE__ */ o(
-      q.Root,
+}), _o = i(
+  function({ className: e, tone: r = "primary", ...t }, n) {
+    return /* @__PURE__ */ a(
+      lt.Root,
       {
-        ref: i,
-        className: n(
+        ref: n,
+        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",
@@ -550,18 +784,18 @@ const Bt = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.08]",
           "motion-safe:active:not-data-disabled:scale-[0.92]",
-          b,
-          G,
+          x,
+          V,
           // Unchecked stays a neutral outline; the tone only paints once checked.
-          Et[e],
-          t
+          ue[r],
+          e
         ),
-        ...r,
-        children: /* @__PURE__ */ o(
-          q.Indicator,
+        ...t,
+        children: /* @__PURE__ */ a(
+          lt.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.
@@ -571,65 +805,65 @@ const Bt = {
               "data-unchecked:scale-0 data-unchecked:opacity-0",
               "motion-reduce:transition-none"
             ),
-            children: /* @__PURE__ */ o(lt, { size: 12, weight: "bold" })
+            children: /* @__PURE__ */ a(wt, { size: 12, weight: "bold" })
           }
         )
       }
     );
   }
-), bo = s(function({ className: t, tone: e = "primary", ...r }, i) {
-  return /* @__PURE__ */ o(
-    tt.Root,
+), Ho = i(function({ className: e, tone: r = "primary", ...t }, n) {
+  return /* @__PURE__ */ a(
+    dt.Root,
     {
-      ref: i,
-      className: n(
+      ref: n,
+      className: s(
         "gryt-radio flex h-5 w-5 shrink-0 items-center justify-center",
         "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface-raised",
         "transition-[scale,background-color,border-color] duration-(--gryt-dur-spring) ease-spring",
         "hover:not-data-disabled:border-gryt-accent-light",
         "motion-safe:hover:not-data-disabled:scale-[1.08]",
         "motion-safe:active:not-data-disabled:scale-[0.92]",
-        b,
-        G,
+        x,
+        V,
         // Border takes the tone when selected; the dot inside carries the fill.
-        _t[e],
-        t
+        ye[r],
+        e
       ),
-      ...r,
-      children: /* @__PURE__ */ o(
-        tt.Indicator,
+      ...t,
+      children: /* @__PURE__ */ a(
+        dt.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",
-            gt[e]
+            Ct[r]
           )
         }
       )
     }
   );
-}), fo = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      St,
+}), Oo = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      Ot,
       {
-        ref: r,
-        className: n("gryt-radio-group flex flex-col gap-2", t),
-        ...e
+        ref: t,
+        className: s("gryt-radio-group flex flex-col gap-2", e),
+        ...r
       }
     );
   }
-), xo = s(
-  function({ className: t, tone: e = "primary", ...r }, i) {
-    return /* @__PURE__ */ o(
-      et.Root,
+), Uo = i(
+  function({ className: e, tone: r = "primary", ...t }, n) {
+    return /* @__PURE__ */ a(
+      gt.Root,
       {
-        ref: i,
-        className: n(
+        ref: n,
+        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",
@@ -637,16 +871,16 @@ const Bt = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.05]",
           "motion-safe:active:not-data-disabled:scale-[0.95]",
-          b,
-          G,
-          Ht[e],
-          t
+          x,
+          V,
+          me[r],
+          e
         ),
-        ...r,
-        children: /* @__PURE__ */ o(
-          et.Thumb,
+        ...t,
+        children: /* @__PURE__ */ a(
+          gt.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"
@@ -656,70 +890,70 @@ const Bt = {
       }
     );
   }
-), at = 3;
-function ho({
-  className: a,
-  tone: t = "primary",
-  "aria-label": e,
-  ...r
+), pt = 3;
+function Xo({
+  className: o,
+  tone: e = "primary",
+  "aria-label": r,
+  ...t
 }) {
-  const [i, c] = bt(!1), l = st(null);
-  ft(() => {
-    if (!i && l.current === null)
+  const [n, c] = Mt(!1), l = ht(null);
+  At(() => {
+    if (!n && l.current === null)
       return;
-    const y = () => {
+    const g = () => {
       l.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", g), window.addEventListener("pointercancel", g), () => {
+      window.removeEventListener("pointerup", g), window.removeEventListener("pointercancel", g);
     };
-  }, [i]);
-  function m(y) {
-    l.current = { x: y.clientX, y: y.clientY };
+  }, [n]);
+  function d(g) {
+    l.current = { x: g.clientX, y: g.clientY };
   }
-  function u(y) {
-    const N = l.current;
-    if (N === null || i)
+  function u(g) {
+    const f = l.current;
+    if (f === null || n)
       return;
-    (Math.abs(y.clientX - N.x) > at || Math.abs(y.clientY - N.y) > at) && c(!0);
+    (Math.abs(g.clientX - f.x) > pt || Math.abs(g.clientY - f.y) > pt) && c(!0);
   }
-  const w = i ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
-  return /* @__PURE__ */ o(B.Root, { className: n("gryt-slider w-full", a), ...r, children: /* @__PURE__ */ o(
-    B.Control,
+  const m = n ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
+  return /* @__PURE__ */ a(_.Root, { className: s("gryt-slider w-full", o), ...t, children: /* @__PURE__ */ a(
+    _.Control,
     {
       className: "flex w-full touch-none items-center py-2 select-none",
-      onPointerDown: m,
+      onPointerDown: d,
       onPointerMove: u,
-      children: /* @__PURE__ */ d(B.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
-        /* @__PURE__ */ o(
-          B.Indicator,
+      children: /* @__PURE__ */ p(_.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
+        /* @__PURE__ */ a(
+          _.Indicator,
           {
-            className: n(
+            className: s(
               "h-full rounded-(--gryt-radius-full) select-none",
               "transition-[width]",
-              w,
-              gt[t]
+              m,
+              Ct[e]
             )
           }
         ),
-        /* @__PURE__ */ o(
-          B.Thumb,
+        /* @__PURE__ */ a(
+          _.Thumb,
           {
-            "aria-label": e,
-            className: n(
+            "aria-label": r,
+            className: s(
               "group h-4 w-4 rounded-(--gryt-radius-full) select-none",
               "transition-[inset-inline-start]",
-              w,
+              m,
               // 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.
-              Vt
+              ge
             ),
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ a(
               "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]",
@@ -733,58 +967,58 @@ function ho({
     }
   ) });
 }
-const Jt = {
+const we = {
   small: "min-h-9 px-3 text-sm",
   medium: "min-h-11 px-4 text-sm"
 };
-function wo({
-  className: a,
-  label: t,
-  options: e = [],
-  placeholder: r = "Select",
-  size: i = "medium",
+function Yo({
+  className: o,
+  label: e,
+  options: r = [],
+  placeholder: t = "Select",
+  size: n = "medium",
   ...c
 }) {
-  return /* @__PURE__ */ d(x.Root, { items: e, ...c, children: [
-    /* @__PURE__ */ d("div", { className: n("gryt-select flex w-full flex-col gap-1.5", a), children: [
-      t ? /* @__PURE__ */ o(x.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
-      /* @__PURE__ */ d(
-        x.Trigger,
+  return /* @__PURE__ */ p(v.Root, { items: r, ...c, children: [
+    /* @__PURE__ */ p("div", { className: s("gryt-select flex w-full flex-col gap-1.5", o), children: [
+      e ? /* @__PURE__ */ a(v.Label, { className: "text-xs font-medium text-gryt-muted", children: e }) : null,
+      /* @__PURE__ */ p(
+        v.Trigger,
         {
-          className: n(
+          className: s(
             "flex w-full items-center justify-between gap-2",
             "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface-raised",
             "text-gryt-text select-none",
             "transition-colors duration-150 hover:border-gryt-accent-light",
             "data-disabled:cursor-not-allowed data-disabled:opacity-60",
-            b,
-            Jt[i]
+            x,
+            we[n]
           ),
           children: [
-            /* @__PURE__ */ o(x.Value, { placeholder: r }),
-            /* @__PURE__ */ o(x.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(Pt, { size: 16 }) })
+            /* @__PURE__ */ a(v.Value, { placeholder: t }),
+            /* @__PURE__ */ a(v.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ a(Ft, { size: 16 }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ o(x.Portal, { children: /* @__PURE__ */ o(x.Positioner, { sideOffset: 6, className: "outline-none", children: /* @__PURE__ */ o(
-      x.Popup,
+    /* @__PURE__ */ a(v.Portal, { children: /* @__PURE__ */ a(v.Positioner, { sideOffset: 6, className: "outline-none", children: /* @__PURE__ */ a(
+      v.Popup,
       {
-        className: n("min-w-(--anchor-width) p-1", S, R),
-        children: /* @__PURE__ */ o(x.List, { children: e.map((l) => /* @__PURE__ */ d(
-          x.Item,
+        className: s("min-w-(--anchor-width) p-1", B, A),
+        children: /* @__PURE__ */ a(v.List, { children: r.map((l) => /* @__PURE__ */ p(
+          v.Item,
           {
             value: l.value,
             disabled: l.disabled,
-            className: n(
+            className: s(
               "flex cursor-default 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(x.ItemText, { children: l.label }),
-              /* @__PURE__ */ o(x.ItemIndicator, { className: "text-gryt-accent", children: /* @__PURE__ */ o(lt, { size: 14, weight: "bold" }) })
+              /* @__PURE__ */ a(v.ItemText, { children: l.label }),
+              /* @__PURE__ */ a(v.ItemIndicator, { className: "text-gryt-accent", children: /* @__PURE__ */ a(wt, { size: 14, weight: "bold" }) })
             ]
           },
           String(l.value)
@@ -793,308 +1027,314 @@ function wo({
     ) }) })
   ] });
 }
-function vo({
-  children: a,
-  className: t,
-  side: e = "top",
-  sideOffset: r = 8,
-  title: i
+function Wo({
+  children: o,
+  className: e,
+  side: r = "top",
+  sideOffset: t = 8,
+  title: n
 }) {
-  return /* @__PURE__ */ d(D.Root, { children: [
-    /* @__PURE__ */ o(D.Trigger, { render: a }),
-    /* @__PURE__ */ o(D.Portal, { children: /* @__PURE__ */ o(D.Positioner, { side: e, sideOffset: r, children: /* @__PURE__ */ o(
-      D.Popup,
+  return /* @__PURE__ */ p(j.Root, { children: [
+    /* @__PURE__ */ a(j.Trigger, { render: o }),
+    /* @__PURE__ */ a(j.Portal, { children: /* @__PURE__ */ a(j.Positioner, { side: r, sideOffset: t, children: /* @__PURE__ */ a(
+      j.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",
-          R,
-          t
+          A,
+          e
         ),
-        children: i
+        children: n
       }
     ) }) })
   ] });
 }
-const No = D.Provider, Po = s(
-  function({ className: t, orientation: e = "horizontal", ...r }, i) {
-    return /* @__PURE__ */ o(
-      Rt,
+const Qo = j.Provider, Jo = i(
+  function({ className: e, orientation: r = "horizontal", ...t }, n) {
+    return /* @__PURE__ */ a(
+      Ut,
       {
-        ref: i,
-        orientation: e,
-        className: n(
+        ref: n,
+        orientation: r,
+        className: s(
           "gryt-divider bg-gryt-border",
-          e === "vertical" ? "h-full w-px" : "h-px w-full",
-          t
+          r === "vertical" ? "h-full w-px" : "h-px w-full",
+          e
         ),
-        ...r
+        ...t
       }
     );
   }
-), ko = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
+), Ko = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-card rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
 });
-function To({
-  children: a,
-  className: t,
-  subheader: e,
-  title: r,
-  ...i
+function Zo({
+  children: o,
+  className: e,
+  subheader: r,
+  title: t,
+  ...n
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ p(
     "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", e),
+      ...n,
       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
+        t ? /* @__PURE__ */ a("span", { className: "text-base font-semibold text-gryt-text", children: t }) : null,
+        r ? /* @__PURE__ */ a("span", { className: "text-sm text-gryt-muted", children: r }) : null,
+        o
       ]
     }
   );
 }
-function $o({
-  className: a,
-  ...t
+function qo({
+  className: o,
+  ...e
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: n(
+      className: s(
         "gryt-card-content px-4 pb-4 text-sm text-gryt-muted",
-        a
+        o
       ),
-      ...t
+      ...e
     }
   );
 }
-function Co({
-  className: a,
-  ...t
+function ta({
+  className: o,
+  ...e
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: n(
+      className: s(
         "gryt-card-actions flex items-center gap-2 px-4 pb-4",
-        a
+        o
       ),
-      ...t
+      ...e
     }
   );
 }
-const Kt = {
+const ve = {
   info: "border-gryt-secondary/40 bg-gryt-secondary/10 text-gryt-secondary",
   success: "border-gryt-success/40 bg-gryt-success/10 text-gryt-success",
   warning: "border-gryt-warning/40 bg-gryt-warning/10 text-gryt-warning",
   error: "border-gryt-danger/40 bg-gryt-danger/10 text-gryt-danger"
-}, So = s(function({ className: t, severity: e = "info", ...r }, i) {
-  return /* @__PURE__ */ o(
+}, ea = i(function({ className: e, severity: r = "info", ...t }, n) {
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: i,
+      ref: n,
       role: "alert",
-      className: n(
+      className: s(
         "gryt-alert rounded-(--gryt-radius-lg) border px-4 py-3 text-sm",
-        Kt[e],
-        t
+        ve[r],
+        e
       ),
-      ...r
+      ...t
     }
   );
 });
-function Ro({ className: a, value: t = null, ...e }) {
-  return /* @__PURE__ */ o(
-    O.Root,
+function ra({ className: o, value: e = null, ...r }) {
+  return /* @__PURE__ */ a(
+    et.Root,
     {
-      value: t,
-      className: n("gryt-progress w-full", a),
-      ...e,
-      children: /* @__PURE__ */ o(O.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(O.Indicator, { className: "h-full rounded-(--gryt-radius-full) bg-gryt-accent transition-[width] duration-(--gryt-dur-spring-soft) ease-spring motion-reduce:transition-none" }) })
+      value: e,
+      className: s("gryt-progress w-full", o),
+      ...r,
+      children: /* @__PURE__ */ a(et.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ a(et.Indicator, { className: "h-full rounded-(--gryt-radius-full) bg-gryt-accent transition-[width] duration-300 ease-out motion-reduce:transition-none" }) })
     }
   );
 }
-function Io({
-  className: a,
-  size: t = 24,
-  "aria-label": e = "Loading"
+function oa({
+  className: o,
+  size: e = 24,
+  "aria-label": r = "Loading"
 }) {
-  return /* @__PURE__ */ o(
-    kt,
+  return /* @__PURE__ */ a(
+    Et,
     {
       role: "status",
-      "aria-label": e,
-      size: t,
+      "aria-label": r,
+      size: e,
       weight: "bold",
-      className: n(
+      className: s(
         "gryt-spinner text-gryt-accent motion-safe:animate-spin",
-        a
+        o
       )
     }
   );
 }
-const Zt = {
+const Ne = {
   text: "h-4 rounded-(--gryt-radius-sm)",
   rounded: "rounded-(--gryt-radius-lg)",
   circular: "rounded-(--gryt-radius-full)",
   rectangular: "rounded-none"
 };
-function Do({
-  className: a,
-  height: t,
-  style: e,
-  variant: r = "text",
-  width: i,
+function aa({
+  className: o,
+  height: e,
+  style: r,
+  variant: t = "text",
+  width: n,
   ...c
 }) {
   const l = {
-    width: i,
-    height: t,
-    ...e
+    width: n,
+    height: e,
+    ...r
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ a(
     "div",
     {
       "aria-hidden": "true",
-      className: n(
-        "gryt-skeleton bg-gryt-surface-raised motion-safe:animate-pulse",
-        Zt[r],
-        a
+      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.
+        // A white wash instead of a fixed colour, so it stays visible on any of
+        // 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",
+        Ne[t],
+        o
       ),
       style: l,
       ...c
     }
   );
 }
-const ut = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", qt = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      $.Backdrop,
+const St = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", Pe = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      L.Backdrop,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-dialog-backdrop fixed inset-0 min-h-dvh bg-black/60",
           "backdrop-blur-(--gryt-backdrop-blur)",
-          ut,
+          St,
           "data-starting-style:opacity-0 data-ending-style:opacity-0",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), te = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      $.Popup,
+), Te = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      L.Popup,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-dialog fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
           "flex w-96 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",
-          ut,
+          St,
           "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
           "data-ending-style:scale-[0.98] data-ending-style:opacity-0",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), ee = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      $.Title,
+), ke = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      L.Title,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-dialog-title text-base font-semibold text-gryt-text",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), re = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      $.Description,
+), $e = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      L.Description,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-dialog-description text-sm text-gryt-muted",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), oe = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
+), Ce = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-dialog-footer flex justify-end gap-3",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Ao = {
-  Root: $.Root,
-  Trigger: $.Trigger,
-  Portal: $.Portal,
-  Close: $.Close,
-  Backdrop: qt,
-  Popup: te,
-  Title: ee,
-  Description: re,
-  Footer: oe
-}, ae = () => () => {
+), na = {
+  Root: L.Root,
+  Trigger: L.Trigger,
+  Portal: L.Portal,
+  Close: L.Close,
+  Backdrop: Pe,
+  Popup: Te,
+  Title: ke,
+  Description: $e,
+  Footer: Ce
+}, Se = () => () => {
 };
-function ne(a) {
-  const t = U(
-    (r) => {
-      if (typeof window > "u" || !window.matchMedia) return ae();
-      const i = window.matchMedia(a);
-      return i.addEventListener("change", r), () => i.removeEventListener("change", r);
+function Re(o) {
+  const e = at(
+    (t) => {
+      if (typeof window > "u" || !window.matchMedia) return Se();
+      const n = window.matchMedia(o);
+      return n.addEventListener("change", t), () => n.removeEventListener("change", t);
     },
-    [a]
-  ), e = U(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(a).matches, [a]);
-  return xt(t, e, () => !1);
+    [o]
+  ), r = at(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(o).matches, [o]);
+  return Dt(e, r, () => !1);
 }
-const ie = {
+const Ie = {
   left: "left",
   right: "right",
   top: "up",
   bottom: "down"
-}, _ = ht("right"), se = {
+}, Z = jt("right"), Le = {
   left: "items-stretch justify-start",
   right: "items-stretch justify-end",
   top: "items-start justify-center",
   bottom: "items-end justify-center"
-}, ce = {
+}, Me = {
   left: "rounded-r-(--gryt-radius-xl)",
   right: "rounded-l-(--gryt-radius-xl)",
   top: "rounded-b-(--gryt-radius-xl)",
   bottom: "rounded-t-(--gryt-radius-xl)"
-}, le = {
+}, Ae = {
   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))]",
@@ -1124,41 +1364,41 @@ const ie = {
     "data-ending-style:[transform:translateY(calc(100%-var(--gryt-drawer-bleed)))]"
   ].join(" ")
 };
-function de({
-  side: a = "right",
-  sheetOnMobile: t = !0,
-  children: e,
-  ...r
+function De({
+  side: o = "right",
+  sheetOnMobile: e = !0,
+  children: r,
+  ...t
 }) {
-  const i = ne("(max-width: 767px)"), c = t && i ? "bottom" : a;
-  return /* @__PURE__ */ o(_.Provider, { value: c, children: /* @__PURE__ */ o(v.Root, { swipeDirection: ie[c], ...r, children: e }) });
+  const n = Re("(max-width: 767px)"), c = e && n ? "bottom" : o;
+  return /* @__PURE__ */ a(Z.Provider, { value: c, children: /* @__PURE__ */ a(T.Root, { swipeDirection: Ie[c], ...t, children: r }) });
 }
-const ge = s(
-  function({ className: t, ...e }, r) {
-    const i = W(_);
-    return /* @__PURE__ */ o(
-      v.Viewport,
+const je = i(
+  function({ className: e, ...r }, t) {
+    const n = nt(Z);
+    return /* @__PURE__ */ a(
+      T.Viewport,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        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",
-          se[i],
-          t
+          Le[n],
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), ue = s(function({ className: t, ...e }, r) {
-  const i = W(_);
-  return /* @__PURE__ */ o(
-    v.Popup,
+), Ge = i(function({ className: e, ...r }, t) {
+  const n = nt(Z);
+  return /* @__PURE__ */ a(
+    T.Popup,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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",
@@ -1166,19 +1406,19 @@ const ge = s(
         // duration here turns a drag into a drag plus lag.
         "data-swiping:duration-0 data-swiping:select-none",
         "motion-reduce:transition-none",
-        le[i],
-        ce[i],
-        t
+        Ae[n],
+        Me[n],
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), ye = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    v.Backdrop,
+}), Be = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    T.Backdrop,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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
@@ -1188,137 +1428,137 @@ const ge = s(
         "data-swiping:duration-0",
         "data-starting-style:opacity-0 data-ending-style:opacity-0",
         "motion-reduce:transition-none",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
 });
-function me({ className: a }) {
-  const t = W(_);
-  return t !== "bottom" && t !== "top" ? null : /* @__PURE__ */ o(
+function ze({ className: o }) {
+  const e = nt(Z);
+  return e !== "bottom" && e !== "top" ? null : /* @__PURE__ */ a(
     "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
+        e === "top" && "order-last",
+        o
       )
     }
   );
 }
-const Mo = {
-  Root: de,
-  Trigger: v.Trigger,
-  Portal: v.Portal,
-  Backdrop: ye,
-  Viewport: ge,
-  Popup: ue,
-  Content: v.Content,
-  Grabber: me,
-  Close: v.Close,
-  Title: v.Title,
-  Description: v.Description
-}, pe = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
-    return /* @__PURE__ */ o(
-      A.Positioner,
+const sa = {
+  Root: De,
+  Trigger: T.Trigger,
+  Portal: T.Portal,
+  Backdrop: Be,
+  Viewport: je,
+  Popup: Ge,
+  Content: T.Content,
+  Grabber: ze,
+  Close: T.Close,
+  Title: T.Title,
+  Description: T.Description
+}, Fe = i(
+  function({ className: e, sideOffset: r = 8, ...t }, n) {
+    return /* @__PURE__ */ a(
+      G.Positioner,
       {
-        ref: i,
-        sideOffset: e,
-        className: n("gryt-menu-positioner outline-none", t),
-        ...r
+        ref: n,
+        sideOffset: r,
+        className: s("gryt-menu-positioner outline-none", e),
+        ...t
       }
     );
   }
-), be = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    A.Popup,
+), Ee = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    G.Popup,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-menu min-w-44 p-1 outline-none",
-        S,
-        R,
-        t
+        B,
+        A,
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), fe = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    A.Item,
+}), Ve = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    G.Item,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-menu-item 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 the same
         // attribute, so arrow keys and the mouse land on identical styling.
         "data-highlighted:bg-gryt-surface-raised",
         "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), xe = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    A.Separator,
+}), _e = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    G.Separator,
     {
-      ref: r,
-      className: n("gryt-menu-separator my-1 h-px bg-gryt-border", t),
-      ...e
+      ref: t,
+      className: s("gryt-menu-separator my-1 h-px bg-gryt-border", e),
+      ...r
     }
   );
-}), Y = {
-  Root: A.Root,
-  Trigger: A.Trigger,
-  Portal: A.Portal,
-  Positioner: pe,
-  Popup: be,
-  Item: fe,
-  Separator: xe
-}, he = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    V.Root,
+}), ot = {
+  Root: G.Root,
+  Trigger: G.Trigger,
+  Portal: G.Portal,
+  Positioner: Fe,
+  Popup: Ee,
+  Item: Ve,
+  Separator: _e
+}, He = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    W.Root,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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
         // rail and the layout reads as a very tall accordion.
         "data-[orientation=vertical]:flex data-[orientation=vertical]:items-stretch",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), we = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    V.List,
+}), Oe = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    W.List,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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.
         "data-[orientation=vertical]:flex data-[orientation=vertical]:shrink-0",
         "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
         "data-[orientation=vertical]:rounded-(--gryt-radius-lg)",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), ve = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    V.Tab,
+}), Ue = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    W.Tab,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-tab inline-flex min-h-8 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",
@@ -1332,20 +1572,20 @@ const Mo = {
         "data-[orientation=vertical]:min-h-9 data-[orientation=vertical]:justify-start",
         "data-[orientation=vertical]:gap-2.5 data-[orientation=vertical]:px-3",
         "data-[orientation=vertical]:rounded-(--gryt-radius-md)",
-        b,
-        t
+        x,
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Ne = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      V.Indicator,
+}), Xe = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      W.Indicator,
       {
-        ref: r,
+        ref: t,
         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",
@@ -1359,340 +1599,352 @@ const Mo = {
           "[[data-orientation=vertical]_&]:translate-y-(--active-tab-top)",
           "[[data-orientation=vertical]_&]:rounded-(--gryt-radius-md)",
           "[[data-orientation=vertical]_&]:transition-[translate,height]",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Pe = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    V.Panel,
+), Ye = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    W.Panel,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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.
         "data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:flex-1",
         "data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Lo = Object.assign(he, { List: we, Tab: ve, Panel: Pe, Indicator: Ne }), ke = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    F.Root,
+}), ia = Object.assign(He, { List: Oe, Tab: Ue, Panel: Ye, Indicator: Xe }), We = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    U.Root,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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
       ),
-      ...e
+      ...r
     }
   );
-}), Te = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      F.Item,
+}), Qe = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      U.Item,
       {
-        ref: r,
-        className: n("gryt-accordion-item", t),
-        ...e
+        ref: t,
+        className: s("gryt-accordion-item", e),
+        ...r
       }
     );
   }
-), $e = s(
-  function({ children: t, className: e, expandIcon: r, ...i }, c) {
-    return /* @__PURE__ */ o(F.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ d(
-      F.Trigger,
+), Je = i(
+  function({ children: e, className: r, expandIcon: t, ...n }, c) {
+    return /* @__PURE__ */ a(U.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ p(
+      U.Trigger,
       {
         ref: c,
-        className: n(
+        className: s(
           "gryt-accordion-trigger flex w-full 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",
-          b,
-          e
+          x,
+          r
         ),
-        ...i,
+        ...n,
         children: [
-          t,
-          r === void 0 ? /* @__PURE__ */ o(
-            Tt,
+          e,
+          t === void 0 ? /* @__PURE__ */ a(
+            Vt,
             {
               size: 16,
               className: "shrink-0 transition-transform duration-(--gryt-dur-spring) ease-spring data-panel-open:rotate-180 motion-reduce:transition-none"
             }
-          ) : r
+          ) : t
         ]
       }
     ) });
   }
-), Ce = s(
-  function({ children: t, className: e, ...r }, i) {
-    return /* @__PURE__ */ o(
-      F.Panel,
+), Ke = i(
+  function({ children: e, className: r, ...t }, n) {
+    return /* @__PURE__ */ a(
+      U.Panel,
       {
-        ref: i,
-        className: n(
+        ref: n,
+        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.
           "h-[var(--accordion-panel-height)] transition-[height] duration-(--gryt-dur-spring-soft) ease-spring",
           "data-starting-style:h-0 data-ending-style:h-0",
           "motion-reduce:transition-none",
-          e
+          r
         ),
-        ...r,
-        children: /* @__PURE__ */ o("div", { className: "px-3 pt-1 pb-3", children: t })
+        ...t,
+        children: /* @__PURE__ */ a("div", { className: "px-3 pt-1 pb-3", children: e })
       }
     );
   }
-), jo = Object.assign(ke, { Item: Te, Trigger: $e, Panel: Ce }), Se = s(
-  function({ className: t, sideOffset: e = 2, ...r }, i) {
-    return /* @__PURE__ */ o(
-      T.Positioner,
+), ca = Object.assign(We, { Item: Qe, Trigger: Je, Panel: Ke }), Ze = i(
+  function({ className: e, sideOffset: r = 2, ...t }, n) {
+    return /* @__PURE__ */ a(
+      I.Positioner,
       {
-        ref: i,
-        sideOffset: e,
-        className: n("gryt-context-menu-positioner outline-none", t),
-        ...r
+        ref: n,
+        sideOffset: r,
+        className: s("gryt-context-menu-positioner outline-none", e),
+        ...t
       }
     );
   }
-), Go = {
-  Root: T.Root,
-  Trigger: T.Trigger,
-  Portal: T.Portal,
-  Positioner: Se,
-  Popup: Y.Popup,
-  Item: Y.Item,
-  Separator: Y.Separator,
-  Group: T.Group,
-  GroupLabel: T.GroupLabel,
-  SubmenuRoot: T.SubmenuRoot,
-  SubmenuTrigger: T.SubmenuTrigger
-}, Re = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
-    return /* @__PURE__ */ o(
-      P.Positioner,
+), la = {
+  Root: I.Root,
+  Trigger: I.Trigger,
+  Portal: I.Portal,
+  Positioner: Ze,
+  Popup: ot.Popup,
+  Item: ot.Item,
+  Separator: ot.Separator,
+  Group: I.Group,
+  GroupLabel: I.GroupLabel,
+  SubmenuRoot: I.SubmenuRoot,
+  SubmenuTrigger: I.SubmenuTrigger
+}, qe = i(
+  function({ className: e, sideOffset: r = 8, ...t }, n) {
+    return /* @__PURE__ */ a(
+      C.Positioner,
       {
-        ref: i,
-        sideOffset: e,
-        className: n("gryt-popover-positioner outline-none", t),
-        ...r
+        ref: n,
+        sideOffset: r,
+        className: s("gryt-popover-positioner outline-none", e),
+        ...t
       }
     );
   }
-), Ie = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      P.Popup,
+), tr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      C.Popup,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-popover max-w-[min(20rem,calc(100vw-2rem))] p-4 outline-none",
-          S,
-          R,
-          t
+          B,
+          A,
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), De = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    P.Title,
+), er = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    C.Title,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-popover-title text-sm font-semibold text-gryt-text",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Ae = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    P.Description,
+}), rr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    C.Description,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-popover-description mt-1 text-sm leading-6 text-gryt-muted",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Bo = {
-  Root: P.Root,
-  Trigger: P.Trigger,
-  Portal: P.Portal,
-  Positioner: Re,
-  Popup: Ie,
-  Title: De,
-  Description: Ae,
-  Close: P.Close,
-  Arrow: P.Arrow
-}, Me = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      k.Viewport,
+}), da = {
+  Root: C.Root,
+  Trigger: C.Trigger,
+  Portal: C.Portal,
+  Positioner: qe,
+  Popup: tr,
+  Title: er,
+  Description: rr,
+  Close: C.Close,
+  Arrow: C.Arrow
+}, or = {
+  neutral: "border-white/8 bg-gryt-surface",
+  info: "border-gryt-secondary/30 bg-gryt-secondary/8",
+  success: "border-gryt-success/30 bg-gryt-success/8",
+  warning: "border-gryt-warning/30 bg-gryt-warning/8",
+  danger: "border-gryt-danger/30 bg-gryt-danger/8"
+}, ar = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      R.Viewport,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        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
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Le = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    k.Root,
+), nr = i(function({ className: e, severity: r = "neutral", ...t }, n) {
+  return /* @__PURE__ */ a(
+    R.Root,
     {
-      ref: r,
-      className: n(
+      ref: n,
+      className: s(
         "gryt-toast relative flex flex-col p-3 pr-9",
-        S,
+        // 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
+        // heavy for a card floating in the corner with nothing behind it. A
+        // white hairline separates it from the page without drawing a box
+        // around it.
+        "rounded-(--gryt-radius-xl) border text-gryt-text",
+        or[r],
         // 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",
         "data-starting-style:translate-y-2 data-starting-style:opacity-0",
         "data-ending-style:translate-y-2 data-ending-style:opacity-0",
         "motion-reduce:transition-none",
-        t
+        e
       ),
-      ...e
+      ...t
     }
   );
-}), je = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    k.Title,
+}), sr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    R.Title,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-toast-title text-sm font-semibold text-gryt-text",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Ge = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    k.Description,
+}), ir = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    R.Description,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-toast-description mt-0.5 text-sm leading-6 text-gryt-muted",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Be = s(function({ className: t, children: e, ...r }, i) {
-  return /* @__PURE__ */ o(
-    k.Close,
+}), cr = i(function({ className: e, children: r, ...t }, n) {
+  return /* @__PURE__ */ a(
+    R.Close,
     {
-      ref: i,
+      ref: n,
       "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",
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light",
-        t
+        e
       ),
-      ...r,
-      children: e ?? /* @__PURE__ */ o(ct, { size: 14, weight: "bold" })
+      ...t,
+      children: r ?? /* @__PURE__ */ a(xt, { size: 14, weight: "bold" })
     }
   );
-}), ze = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    k.Action,
+}), lr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    R.Action,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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",
         "motion-safe:hover:scale-[1.04] motion-safe:active:scale-[0.96]",
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), zo = {
-  Provider: k.Provider,
-  Portal: k.Portal,
-  Viewport: Me,
-  Root: Le,
-  Title: je,
-  Description: Ge,
-  Close: Be,
-  Action: ze
-}, Fo = k.useToastManager, Fe = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      j.Root,
+}), ga = {
+  Provider: R.Provider,
+  Portal: R.Portal,
+  Viewport: ar,
+  Root: nr,
+  Title: sr,
+  Description: ir,
+  Close: cr,
+  Action: lr
+}, ua = R.useToastManager, dr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      E.Root,
       {
-        ref: r,
-        className: n("gryt-scroll-area relative", t),
-        ...e
+        ref: t,
+        className: s("gryt-scroll-area relative", e),
+        ...r
       }
     );
   }
-), Ve = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      j.Viewport,
+), gr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      E.Viewport,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        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
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Ee = s(
-  function({ className: t, orientation: e, ...r }, i) {
-    return /* @__PURE__ */ o(
-      j.Scrollbar,
+), ur = i(
+  function({ className: e, orientation: r, ...t }, n) {
+    return /* @__PURE__ */ a(
+      E.Scrollbar,
       {
-        ref: i,
-        orientation: e,
-        className: n(
+        ref: n,
+        orientation: r,
+        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.
           "opacity-0 transition-opacity duration-(--gryt-dur-fast)",
           "data-hovering:opacity-100 data-scrolling:opacity-100",
           "motion-reduce:transition-none",
-          e === "horizontal" ? "h-2 flex-col" : "w-2",
-          t
+          r === "horizontal" ? "h-2 flex-col" : "w-2",
+          e
         ),
-        ...r,
-        children: /* @__PURE__ */ o(j.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
+        ...t,
+        children: /* @__PURE__ */ a(E.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
       }
     );
   }
-), Vo = {
-  Root: Fe,
-  Viewport: Ve,
-  Scrollbar: Ee,
-  Content: j.Content,
-  Corner: j.Corner
-}, _e = {
+), ya = {
+  Root: dr,
+  Viewport: gr,
+  Scrollbar: ur,
+  Content: E.Content,
+  Corner: E.Corner
+}, yr = {
   primary: [
     "text-gryt-muted hover:not-data-disabled:bg-white/8",
     "data-pressed:bg-gryt-accent data-pressed:text-gryt-on-accent",
@@ -1713,18 +1965,18 @@ const Mo = {
     "data-pressed:bg-gryt-danger data-pressed:text-gryt-on-danger",
     "data-pressed:hover:not-data-disabled:bg-gryt-danger"
   ].join(" ")
-}, He = {
+}, mr = {
   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"
-}, Eo = s(
-  function({ className: t, size: e = "medium", tone: r = "primary", ...i }, c) {
-    return /* @__PURE__ */ o(
-      It,
+}, ma = i(
+  function({ className: e, size: r = "medium", tone: t = "primary", ...n }, c) {
+    return /* @__PURE__ */ a(
+      Xt,
       {
         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",
@@ -1732,62 +1984,63 @@ const Mo = {
           "transition-[scale,background-color,color] duration-(--gryt-dur-spring) ease-spring",
           "motion-safe:hover:not-data-disabled:scale-[1.06]",
           "motion-safe:active:not-data-disabled:scale-[0.94]",
-          b,
-          G,
-          He[e],
-          _e[r],
-          t
+          x,
+          V,
+          mr[r],
+          yr[t],
+          e
         ),
-        ...i
+        ...n
       }
     );
   }
-), _o = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      Dt,
+), pa = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      Yt,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        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
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Xe = {
+), pr = {
   primary: "bg-gryt-accent",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning",
   danger: "bg-gryt-danger"
 };
-function Ho({
-  className: a,
-  value: t,
-  label: e,
-  showValue: r = !1,
-  tone: i = "primary",
+function fa({
+  className: o,
+  value: e,
+  label: r,
+  showValue: t = !1,
+  tone: n = "primary",
   ...c
 }) {
-  return /* @__PURE__ */ d(
-    z.Root,
+  return /* @__PURE__ */ p(
+    H.Root,
     {
-      value: t,
-      className: n("gryt-meter flex w-full flex-col gap-1.5", a),
+      value: e,
+      className: s("gryt-meter flex w-full flex-col gap-1.5", o),
       ...c,
       children: [
-        (e || r) && /* @__PURE__ */ d("div", { className: "flex items-baseline justify-between gap-2", children: [
-          e ? /* @__PURE__ */ o(z.Label, { className: "text-sm text-gryt-muted", children: e }) : /* @__PURE__ */ o("span", {}),
-          r && /* @__PURE__ */ o(z.Value, { className: "font-mono text-xs text-gryt-muted tabular-nums" })
+        (r || t) && /* @__PURE__ */ p("div", { className: "flex items-baseline justify-between gap-2", children: [
+          r ? /* @__PURE__ */ a(H.Label, { className: "text-sm text-gryt-muted", children: r }) : /* @__PURE__ */ a("span", {}),
+          t && /* @__PURE__ */ a(H.Value, { className: "font-mono text-xs text-gryt-muted tabular-nums" })
         ] }),
-        /* @__PURE__ */ o(z.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(
-          z.Indicator,
+        /* @__PURE__ */ a(H.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ a(
+          H.Indicator,
           {
-            className: n(
+            className: s(
               "h-full rounded-(--gryt-radius-full)",
-              Xe[i]
+              "transition-[width] duration-120 ease-out motion-reduce:transition-none",
+              pr[n]
             )
           }
         ) })
@@ -1795,13 +2048,13 @@ function Ho({
     }
   );
 }
-const Oe = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      C.Popup,
+const fr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      M.Popup,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-alert-dialog fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
           "flex w-96 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",
@@ -1809,61 +2062,61 @@ const Oe = s(
           "transition-[opacity,scale] 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",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Ye = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    C.Backdrop,
+), br = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    M.Backdrop,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      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",
         "data-starting-style:opacity-0 data-ending-style:opacity-0",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Ue = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    C.Title,
+}), hr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    M.Title,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-alert-dialog-title text-lg font-semibold text-gryt-text",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), We = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    C.Description,
+}), xr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    M.Description,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-alert-dialog-description text-sm leading-6 text-gryt-muted",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Xo = {
-  Root: C.Root,
-  Trigger: C.Trigger,
-  Portal: C.Portal,
-  Backdrop: Ye,
-  Popup: Oe,
-  Title: Ue,
-  Description: We,
-  Close: C.Close
-}, yt = [
+}), ba = {
+  Root: M.Root,
+  Trigger: M.Trigger,
+  Portal: M.Portal,
+  Backdrop: br,
+  Popup: fr,
+  Title: hr,
+  Description: xr,
+  Close: M.Close
+}, Rt = [
   "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
@@ -1871,377 +2124,378 @@ const Oe = s(
   "data-highlighted:bg-gryt-surface-raised",
   "data-selected:text-gryt-accent",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
-].join(" "), mt = [
-  "w-full rounded-(--gryt-radius-input) border border-gryt-border bg-gryt-surface-raised",
-  "px-3 py-2 text-sm text-gryt-text outline-none placeholder:text-gryt-muted",
-  b
-].join(" "), Qe = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    g.Input,
+].join(" "), It = [
+  kt,
+  $t.medium,
+  "border-gryt-border",
+  x
+].join(" "), wr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    b.Input,
     {
-      ref: r,
-      className: n("gryt-combobox-input", mt, t),
-      ...e
+      ref: t,
+      className: s("gryt-combobox-input", It, e),
+      ...r
     }
   );
-}), Je = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
-  return /* @__PURE__ */ o(
-    g.Positioner,
+}), vr = i(function({ className: e, sideOffset: r = 6, ...t }, n) {
+  return /* @__PURE__ */ a(
+    b.Positioner,
     {
-      ref: i,
-      sideOffset: e,
-      className: n("gryt-combobox-positioner outline-none", t),
-      ...r
+      ref: n,
+      sideOffset: r,
+      className: s("gryt-combobox-positioner outline-none", e),
+      ...t
     }
   );
-}), Ke = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      g.Popup,
+}), Nr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      b.Popup,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-combobox max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-          S,
-          R,
-          t
+          B,
+          A,
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Ze = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    g.Item,
+), Pr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    b.Item,
     {
-      ref: r,
-      className: n("gryt-combobox-item", yt, t),
-      ...e
+      ref: t,
+      className: s("gryt-combobox-item", Rt, e),
+      ...r
     }
   );
-}), qe = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    g.Empty,
+}), Tr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    b.Empty,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-combobox-empty px-3 py-2 text-sm text-gryt-muted",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Oo = {
-  Root: g.Root,
-  Input: Qe,
-  InputGroup: g.InputGroup,
-  Trigger: g.Trigger,
-  Icon: g.Icon,
-  Clear: g.Clear,
-  Value: g.Value,
-  Chips: g.Chips,
-  Chip: g.Chip,
-  ChipRemove: g.ChipRemove,
-  Portal: g.Portal,
-  Positioner: Je,
-  Popup: Ke,
-  List: g.List,
-  Item: Ze,
-  ItemIndicator: g.ItemIndicator,
-  Group: g.Group,
-  GroupLabel: g.GroupLabel,
-  Empty: qe,
-  Separator: g.Separator
-}, tr = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    p.Input,
+}), ha = {
+  Root: b.Root,
+  Input: wr,
+  InputGroup: b.InputGroup,
+  Trigger: b.Trigger,
+  Icon: b.Icon,
+  Clear: b.Clear,
+  Value: b.Value,
+  Chips: b.Chips,
+  Chip: b.Chip,
+  ChipRemove: b.ChipRemove,
+  Portal: b.Portal,
+  Positioner: vr,
+  Popup: Nr,
+  List: b.List,
+  Item: Pr,
+  ItemIndicator: b.ItemIndicator,
+  Group: b.Group,
+  GroupLabel: b.GroupLabel,
+  Empty: Tr,
+  Separator: b.Separator
+}, kr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    h.Input,
     {
-      ref: r,
-      className: n("gryt-autocomplete-input", mt, t),
-      ...e
+      ref: t,
+      className: s("gryt-autocomplete-input", It, e),
+      ...r
     }
   );
-}), er = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
-  return /* @__PURE__ */ o(
-    p.Positioner,
+}), $r = i(function({ className: e, sideOffset: r = 6, ...t }, n) {
+  return /* @__PURE__ */ a(
+    h.Positioner,
     {
-      ref: i,
-      sideOffset: e,
-      className: n("gryt-autocomplete-positioner outline-none", t),
-      ...r
+      ref: n,
+      sideOffset: r,
+      className: s("gryt-autocomplete-positioner outline-none", e),
+      ...t
     }
   );
-}), rr = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    p.Popup,
+}), Cr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    h.Popup,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-autocomplete max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-        S,
-        R,
-        t
+        B,
+        A,
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), or = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    p.Item,
+}), Sr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    h.Item,
     {
-      ref: r,
-      className: n("gryt-autocomplete-item", yt, t),
-      ...e
+      ref: t,
+      className: s("gryt-autocomplete-item", Rt, e),
+      ...r
     }
   );
-}), ar = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    p.Empty,
+}), Rr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    h.Empty,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-autocomplete-empty px-3 py-2 text-sm text-gryt-muted",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Yo = {
-  Root: p.Root,
-  Input: tr,
-  InputGroup: p.InputGroup,
-  Trigger: p.Trigger,
-  Icon: p.Icon,
-  Clear: p.Clear,
-  Value: p.Value,
-  Portal: p.Portal,
-  Positioner: er,
-  Popup: rr,
-  List: p.List,
-  Item: or,
-  Group: p.Group,
-  GroupLabel: p.GroupLabel,
-  Empty: ar,
-  Separator: p.Separator
-}, Uo = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      At,
+}), xa = {
+  Root: h.Root,
+  Input: kr,
+  InputGroup: h.InputGroup,
+  Trigger: h.Trigger,
+  Icon: h.Icon,
+  Clear: h.Clear,
+  Value: h.Value,
+  Portal: h.Portal,
+  Positioner: $r,
+  Popup: Cr,
+  List: h.List,
+  Item: Sr,
+  Group: h.Group,
+  GroupLabel: h.GroupLabel,
+  Empty: Rr,
+  Separator: h.Separator
+}, wa = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      Wt,
       {
-        ref: r,
-        className: n("gryt-checkbox-group flex flex-col gap-2", t),
-        ...e
+        ref: t,
+        className: s("gryt-checkbox-group flex flex-col gap-2", e),
+        ...r
       }
     );
   }
-), nr = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      Q.Trigger,
+), Ir = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      st.Trigger,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-collapsible-trigger flex w-full items-center justify-between gap-2",
           "rounded-(--gryt-radius-md) border-0 bg-transparent px-2 py-2 text-left",
           "text-sm font-medium text-gryt-text select-none",
           "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-          b,
-          t
+          x,
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), ir = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      Q.Panel,
+), Lr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      st.Panel,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        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.
           "h-(--collapsible-panel-height) transition-[height] duration-(--gryt-dur-spring) ease-spring",
           "data-starting-style:h-0 data-ending-style:h-0",
           "motion-reduce:transition-none",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), Wo = {
-  Root: Q.Root,
-  Trigger: nr,
-  Panel: ir
-}, Qo = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    Mt,
+), va = {
+  Root: st.Root,
+  Trigger: Ir,
+  Panel: Lr
+}, Na = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    Qt,
     {
-      ref: r,
-      className: n("gryt-form flex flex-col gap-(--gryt-space-lg)", t),
-      ...e
+      ref: t,
+      className: s("gryt-form flex flex-col gap-(--gryt-space-lg)", e),
+      ...r
     }
   );
-}), sr = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      dt.Root,
+}), Mr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      vt.Root,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-fieldset flex min-w-0 flex-col gap-3 border-0 p-0",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), cr = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    dt.Legend,
+), Ar = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    vt.Legend,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-fieldset-legend text-sm font-semibold text-gryt-text",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Jo = { Root: sr, Legend: cr }, Ko = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      Lt,
+}), Pa = { Root: Mr, Legend: Ar }, Ta = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      Jt,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-menubar flex items-center gap-1",
           "rounded-(--gryt-radius-md) border border-gryt-border bg-gryt-surface p-1",
-          t
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), lr = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    h.Trigger,
+), Dr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    N.Trigger,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-navigation-menu-trigger flex items-center gap-1.5 rounded-(--gryt-radius-md)",
         "border-0 bg-transparent px-3 py-2 text-sm font-medium text-gryt-text select-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
         "data-popup-open:bg-gryt-surface-raised",
-        b,
-        t
+        x,
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), dr = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    h.Popup,
+}), jr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    N.Popup,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-navigation-menu-popup outline-none",
-        S,
-        R,
-        t
+        B,
+        A,
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), gr = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    h.Viewport,
+}), Gr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    N.Viewport,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-navigation-menu-viewport relative overflow-hidden",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), ur = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    h.Link,
+}), Br = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    N.Link,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-navigation-menu-link block rounded-(--gryt-radius-md) px-3 py-2",
         "text-sm text-gryt-text no-underline outline-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-        b,
-        t
+        x,
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), Zo = {
-  Root: h.Root,
-  List: h.List,
-  Item: h.Item,
-  Trigger: lr,
-  Content: h.Content,
-  Portal: h.Portal,
-  Positioner: h.Positioner,
-  Viewport: gr,
-  Popup: dr,
-  Link: ur,
-  Icon: h.Icon,
-  Arrow: h.Arrow
-}, nt = "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-transparent text-gryt-muted transition-colors hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50", qo = s(
-  function({ className: t, label: e, scrubbable: r = !1, ...i }, c) {
-    return /* @__PURE__ */ d(
-      I.Root,
+}), ka = {
+  Root: N.Root,
+  List: N.List,
+  Item: N.Item,
+  Trigger: Dr,
+  Content: N.Content,
+  Portal: N.Portal,
+  Positioner: N.Positioner,
+  Viewport: Gr,
+  Popup: jr,
+  Link: Br,
+  Icon: N.Icon,
+  Arrow: N.Arrow
+}, ft = "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", $a = i(
+  function({ className: e, label: r, scrubbable: t = !1, ...n }, c) {
+    return /* @__PURE__ */ p(
+      D.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", e),
+        ...n,
         children: [
-          e && (r ? /* @__PURE__ */ d(I.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
-            e,
-            /* @__PURE__ */ o(I.ScrubAreaCursor, {})
-          ] }) : /* @__PURE__ */ o("span", { className: "text-sm text-gryt-muted", children: e })),
-          /* @__PURE__ */ d(
-            I.Group,
+          r && (t ? /* @__PURE__ */ p(D.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
+            r,
+            /* @__PURE__ */ a(D.ScrubAreaCursor, {})
+          ] }) : /* @__PURE__ */ a("span", { className: "text-sm text-gryt-muted", children: r })),
+          /* @__PURE__ */ p(
+            D.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",
-                G
+                V
               ),
               children: [
-                /* @__PURE__ */ o(
-                  I.Decrement,
+                /* @__PURE__ */ a(
+                  D.Decrement,
                   {
                     "aria-label": "Decrease",
-                    className: n(nt, "rounded-l-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o($t, { size: 14, weight: "bold" })
+                    className: s(ft, "rounded-l-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ a(_t, { size: 14, weight: "bold" })
                   }
                 ),
-                /* @__PURE__ */ o(
-                  I.Input,
+                /* @__PURE__ */ a(
+                  D.Input,
                   {
-                    className: n(
+                    className: s(
                       "w-16 border-0 bg-transparent px-1 py-2 text-center",
                       "font-mono text-sm text-gryt-text tabular-nums outline-none",
-                      b
+                      x
                     )
                   }
                 ),
-                /* @__PURE__ */ o(
-                  I.Increment,
+                /* @__PURE__ */ a(
+                  D.Increment,
                   {
                     "aria-label": "Increase",
-                    className: n(nt, "rounded-r-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Ct, { size: 14, weight: "bold" })
+                    className: s(ft, "rounded-r-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ a(Ht, { size: 14, weight: "bold" })
                   }
                 )
               ]
@@ -2251,25 +2505,25 @@ const Oe = s(
       }
     );
   }
-), ta = s(
-  function({ className: t, length: e = 6, ...r }, i) {
-    return /* @__PURE__ */ o(
-      rt.Root,
+), Ca = i(
+  function({ className: e, length: r = 6, ...t }, n) {
+    return /* @__PURE__ */ a(
+      ut.Root,
       {
-        ref: i,
-        length: e,
-        className: n("gryt-otp-field flex gap-2", t),
-        ...r,
-        children: Array.from({ length: e }, (c, l) => /* @__PURE__ */ o(
-          rt.Input,
+        ref: n,
+        length: r,
+        className: s("gryt-otp-field flex gap-2", e),
+        ...t,
+        children: Array.from({ length: r }, (c, l) => /* @__PURE__ */ a(
+          ut.Input,
           {
-            className: n(
+            className: s(
               "gryt-otp-input h-12 w-10 rounded-(--gryt-radius-md) text-center",
               "border border-gryt-border bg-gryt-surface-raised",
               "font-mono text-lg text-gryt-text tabular-nums outline-none",
               "transition-colors duration-(--gryt-dur-fast) motion-reduce:transition-none",
               "data-filled:border-gryt-accent",
-              b
+              x
             )
           },
           l
@@ -2277,130 +2531,135 @@ const Oe = s(
       }
     );
   }
-), yr = s(
-  function({ className: t, sideOffset: e = 8, ...r }, i) {
-    return /* @__PURE__ */ o(
-      M.Positioner,
+), zr = i(
+  function({ className: e, sideOffset: r = 8, ...t }, n) {
+    return /* @__PURE__ */ a(
+      z.Positioner,
       {
-        ref: i,
-        sideOffset: e,
-        className: n("gryt-preview-card-positioner outline-none", t),
-        ...r
+        ref: n,
+        sideOffset: r,
+        className: s("gryt-preview-card-positioner outline-none", e),
+        ...t
       }
     );
   }
-), mr = s(
-  function({ className: t, ...e }, r) {
-    return /* @__PURE__ */ o(
-      M.Popup,
+), Fr = i(
+  function({ className: e, ...r }, t) {
+    return /* @__PURE__ */ a(
+      z.Popup,
       {
-        ref: r,
-        className: n(
+        ref: t,
+        className: s(
           "gryt-preview-card w-64 max-w-[calc(100vw-2rem)] p-4 outline-none",
-          S,
-          R,
-          t
+          B,
+          A,
+          e
         ),
-        ...e
+        ...r
       }
     );
   }
-), ea = {
-  Root: M.Root,
-  Trigger: M.Trigger,
-  Portal: M.Portal,
-  Positioner: yr,
-  Popup: mr,
-  Arrow: M.Arrow
-}, pr = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    L.Root,
+), Sa = {
+  Root: z.Root,
+  Trigger: z.Trigger,
+  Portal: z.Portal,
+  Positioner: zr,
+  Popup: Fr,
+  Arrow: z.Arrow
+}, Er = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    F.Root,
     {
-      ref: r,
-      className: n(
+      ref: t,
+      className: s(
         "gryt-toolbar flex items-center gap-1",
         "rounded-(--gryt-radius-full) border border-gryt-border bg-gryt-surface p-1",
-        t
+        e
       ),
-      ...e
+      ...r
     }
   );
-}), br = s(function({ className: t, ...e }, r) {
-  return /* @__PURE__ */ o(
-    L.Separator,
+}), Vr = i(function({ className: e, ...r }, t) {
+  return /* @__PURE__ */ a(
+    F.Separator,
     {
-      ref: r,
-      className: n("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", t),
-      ...e
+      ref: t,
+      className: s("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", e),
+      ...r
     }
   );
-}), ra = {
-  Root: pr,
-  Group: L.Group,
-  Button: L.Button,
-  Link: L.Link,
-  Input: L.Input,
-  Separator: br
+}), Ra = {
+  Root: Er,
+  Group: F.Group,
+  Button: F.Button,
+  Link: F.Link,
+  Input: F.Input,
+  Separator: Vr
 };
 export {
-  jo as Accordion,
-  So as Alert,
-  Xo as AlertDialog,
-  Yo as Autocomplete,
-  Wt as Avatar,
-  yo as Badge,
-  Ft as Button,
-  ko as Card,
-  Co as CardActions,
-  $o as CardContent,
-  To as CardHeader,
-  po as Checkbox,
-  Uo as CheckboxGroup,
-  mo as Chip,
-  Wo as Collapsible,
-  Oo as Combobox,
-  go as Composer,
-  Go as ContextMenu,
-  uo as ConversationItem,
-  Ao as Dialog,
-  Po as Divider,
-  Mo as Drawer,
-  Jo as Fieldset,
-  Qo as Form,
-  no as GrytProvider,
-  io as IconButton,
-  Y as Menu,
-  Ko as Menubar,
-  co as MessageBubble,
-  Ho as Meter,
-  Zo as NavigationMenu,
-  qo as NumberField,
-  ta as OtpField,
-  Bo as Popover,
-  ea as PreviewCard,
-  Ro as Progress,
-  bo as Radio,
-  fo as RadioGroup,
-  Vo as ScrollArea,
-  wo as Select,
-  Do as Skeleton,
-  ho as Slider,
-  Io as Spinner,
-  so as Surface,
-  xo as Switch,
-  ve as Tab,
-  Lo as Tabs,
-  lo as TextField,
-  zo as Toast,
-  Eo as Toggle,
-  _o as ToggleGroup,
-  ra as Toolbar,
-  vo as Tooltip,
-  No as TooltipProvider,
-  n as cn,
-  jt as createGrytTheme,
-  ot as grytTokens,
-  ne as useMediaQuery,
-  Fo as useToastManager
+  ca as Accordion,
+  ea as Alert,
+  ba as AlertDialog,
+  xa as Autocomplete,
+  he as Avatar,
+  Eo as Badge,
+  de as Button,
+  Ko as Card,
+  ta as CardActions,
+  qo as CardContent,
+  Zo as CardHeader,
+  _o as Checkbox,
+  wa as CheckboxGroup,
+  Vo as Chip,
+  va as Collapsible,
+  ha as Combobox,
+  zo as Composer,
+  la as ContextMenu,
+  Fo as ConversationItem,
+  na as Dialog,
+  Jo as Divider,
+  sa as Drawer,
+  Pa as Fieldset,
+  Na as Form,
+  Ao as GrytProvider,
+  Do as IconButton,
+  ot as Menu,
+  Ta as Menubar,
+  Go as MessageBubble,
+  fa as Meter,
+  ka as NavigationMenu,
+  $a as NumberField,
+  Ca as OtpField,
+  da as Popover,
+  Sa as PreviewCard,
+  ra as Progress,
+  Ho as Radio,
+  Oo as RadioGroup,
+  ya as ScrollArea,
+  Yo as Select,
+  aa as Skeleton,
+  Xo as Slider,
+  oa as Spinner,
+  jo as Surface,
+  Uo as Switch,
+  Ue as Tab,
+  ia as Tabs,
+  Bo as TextField,
+  ga as Toast,
+  ma as Toggle,
+  pa as ToggleGroup,
+  Ra as Toolbar,
+  Wo as Tooltip,
+  Qo as TooltipProvider,
+  s as cn,
+  se as createGrytTheme,
+  Lo as grytAlphaScales,
+  Mo as grytAlphaScalesLight,
+  K as grytLightTokens,
+  yt as grytScales,
+  mt as grytScalesLight,
+  y as grytTokens,
+  Re as useMediaQuery,
+  ua as useToastManager
 };
 //# sourceMappingURL=index.js.map