@epilot/zenith-react 0.2.0 → 0.3.0-next.1

package/dist/components/field/field.js

@@ -1,50 +1,62 @@
-import { jsx as c } from "react/jsx-runtime";
-import * as a from "react";
-import { mergeClasses as f, SLOT_ATTR as r, shorthands as d } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as P } from "../../styles/make-styles.js";
-import { boxModel as m, nativeControl as N } from "../../styles/host-reset.js";
-import { fontWeightNormal as S, leadingSm as R, textSm as D, grayA11 as O, grayA8 as G, grayA12 as x, fieldPaddingY as w, fieldInputHeight as V, leadingXs as E, textXs as C, errorOnSoft as H, errorA4 as j, errorSoft as I, grayA3 as T, accentA4 as X, accentA3 as Y, grayA4 as q, focusRing as U, spacingElement1 as L, fieldPaddingX as A, spacingElement2 as F, fieldSetGap as Z, radiusLg as J } from "../../tokens/index.js";
-const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createContext(null), $ = () => {
-  const n = a.useContext(z);
-  if (!n)
+import { jsx as u } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeClasses as m, SLOT_ATTR as s, shorthands as c } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as ie } from "../../styles/make-styles.js";
+import { boxModel as y, nativeControl as _ } from "../../styles/host-reset.js";
+import { fontWeightNormal as F, leadingSm as E, textSm as N, grayA11 as W, grayA8 as M, grayA12 as L, fieldPaddingY as R, fieldInputHeight as le, leadingXs as z, textXs as v, errorOnSoft as P, errorA4 as re, errorSoft as V, grayA3 as j, accentA4 as ae, accentA3 as se, grayA4 as de, focusRing as ce, spacingElement1 as I, fieldPaddingX as X, spacingElement2 as w, fieldSetGap as ue, radiusLg as fe } from "../../tokens/index.js";
+const pe = "div", me = "label", ge = "input", he = "p", be = "div", k = l.createContext(null), D = l.createContext(null), De = () => {
+  const t = l.useContext(D);
+  if (!(t != null && t.labels.length)) return;
+  const { labels: o, controlId: e } = t;
+  return ((e ? o.find((i) => i.htmlFor === e) : void 0) ?? o[0]).id;
+}, Ee = (t) => {
+  var e;
+  const o = (e = l.useContext(D)) == null ? void 0 : e.setControlId;
+  O(() => {
+    if (o)
+      return o(t), () => o(void 0);
+  }, [o, t]);
+}, O = typeof window > "u" ? l.useEffect : l.useLayoutEffect, Y = () => {
+  const t = l.useContext(k);
+  if (!t)
     throw new Error("FieldInput must be used within a Field component");
-  return n;
-}, pe = () => a.useContext(z), k = ["field-input", "field-textarea", "select-trigger"], ne = ["field-label", "label"], ie = { cursor: "not-allowed", opacity: 0.5 }, le = () => Object.fromEntries(
+  return t;
+}, Ne = () => l.useContext(k), q = ["field-input", "field-textarea", "select-trigger"], ye = ["field-label", "label"], xe = { cursor: "not-allowed", opacity: 0.5 }, Ce = () => Object.fromEntries(
   [
     "&[data-disabled]",
-    ...k.map(
-      (n) => `&:has([${r}="${n}"]:disabled)`
+    ...q.map(
+      (t) => `&:has([${s}="${t}"]:disabled)`
     )
   ].flatMap(
-    (n) => ne.map((l) => [
-      `${n} [${r}="${l}"]`,
-      ie
+    (t) => ye.map((o) => [
+      `${t} [${s}="${o}"]`,
+      xe
     ])
   )
-), B = {
+), U = {
   alignSelf: "center",
-  marginTop: `calc(-1 * ${w})`,
-  marginBottom: `calc(-1 * ${w})`
-}, re = [...k, "field-input-group"], ae = () => Object.fromEntries([
+  marginTop: `calc(-1 * ${R})`,
+  marginBottom: `calc(-1 * ${R})`
+}, Se = [...q, "field-input-group"], Fe = () => Object.fromEntries([
   ["& > *", { gridColumnStart: 1, gridColumnEnd: -1 }],
-  ...re.flatMap((n) => [
+  ...Se.flatMap((t) => [
     [
-      `& > [${r}="${n}"]`,
+      `& > [${s}="${t}"]`,
       { gridColumnStart: 1, gridColumnEnd: 2 }
     ],
     [
-      `& > [${r}="${n}"] + :not([${r}])`,
+      `& > [${s}="${t}"] + :not([${s}])`,
       {
         gridColumnStart: 2,
         gridColumnEnd: 3,
-        marginLeft: L,
-        ...B
+        marginLeft: I,
+        ...U
       }
     ]
   ])
-]), p = P({
+]), g = ie({
   root: {
-    ...m,
+    ...y,
     position: "relative",
     // A grid, not a column, so an injected button can sit beside the control (see BESIDE_CONTROL).
     // The second column is empty and zero-wide unless something is injected.
@@ -56,13 +68,13 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
     // is a half-step short of the 0.75rem v1 actually uses, which three components got wrong by
     // reaching for it directly; that pitfall is why fieldPaddingX's normal tier aliases
     // spacingElement3, not spacingGroup1 (packages/tokens/spec/density.yaml).
-    paddingTop: w,
-    paddingBottom: w,
-    paddingLeft: A,
-    paddingRight: A,
+    paddingTop: R,
+    paddingBottom: R,
+    paddingLeft: X,
+    paddingRight: X,
     // Row gap only: a column gap would narrow the control even while the second column is empty.
-    rowGap: L,
-    ...d.borderRadius(J),
+    rowGap: I,
+    ...c.borderRadius(fe),
     transitionProperty: "all",
     transitionDuration: "75ms",
     outlineOffset: "2px",
@@ -73,10 +85,10 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
     },
     "&[data-focused='true'], &[data-focus-visible]": {
       outlineStyle: "solid",
-      outlineColor: U
+      outlineColor: ce
     },
     "&[data-invalid]": {
-      backgroundColor: I
+      backgroundColor: V
     },
     // Label's disabled styling, declared here because Field owns the elements these selectors are
     // rooted at. On Label they were written as "[data-disabled] &", ":disabled ~ &" and
@@ -85,46 +97,46 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
     // See src/ancestor-selector.test.ts. The port of those rules still missed: they named the
     // `label` slot while FieldLabel emits `field-label`, and the `~` forms needed the label AFTER
     // the control, but it comes first. `:has()` reaches the control wherever it sits.
-    ...le(),
-    ...ae()
+    ...Ce(),
+    ...Fe()
   },
   rootDefault: {
-    backgroundColor: T,
+    backgroundColor: j,
     ":hover": {
-      backgroundColor: q
+      backgroundColor: de
     }
   },
   rootHighlight: {
-    backgroundColor: Y,
+    backgroundColor: se,
     ":hover": {
-      backgroundColor: X
+      backgroundColor: ae
     }
   },
   rootReadonly: {
-    backgroundColor: T
+    backgroundColor: j
   },
   rootDestructive: {
-    backgroundColor: I,
+    backgroundColor: V,
     ":hover": {
-      backgroundColor: j
+      backgroundColor: re
     }
   },
   fieldSet: {
-    ...m,
+    ...y,
     display: "flex",
     flexDirection: "column",
     // Density-bound (DENSITY-SPEC.md §2.3): normal resolves to the same spacingLayout2 (32px)
     // this used before binding.
-    ...d.gap(Z),
-    ...d.border("0"),
-    ...d.padding(0),
-    ...d.margin(0)
+    ...c.gap(ue),
+    ...c.border("0"),
+    ...c.padding(0),
+    ...c.margin(0)
   },
   fieldGroup: {
-    ...m,
+    ...y,
     display: "flex",
     width: "100%",
-    ...d.gap(F)
+    ...c.gap(w)
   },
   fieldGroupColumn: {
     flexDirection: "column"
@@ -138,20 +150,20 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
     flexShrink: 1,
     flexBasis: "0%",
     flexDirection: "column",
-    ...d.gap(F),
+    ...c.gap(w),
     lineHeight: "1.375"
   },
   label: {
-    ...m,
+    ...y,
     minHeight: "1rem",
-    fontSize: C,
-    lineHeight: E,
+    fontSize: v,
+    lineHeight: z,
     // No width: the label stretches across the field's column, so the whole label row is a hit
     // area for the control rather than only the text. Field reads as one box and is aimed at as one.
     display: "flex",
-    ...d.gap(F),
+    ...c.gap(w),
     cursor: "default",
-    color: x,
+    color: L,
     "&[data-disabled]": {
       opacity: 0.5
     }
@@ -159,7 +171,7 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
   labelContent: {
     display: "inline-flex",
     alignItems: "center",
-    ...d.gap(L),
+    ...c.gap(I),
     transitionProperty: "opacity",
     transitionDuration: "150ms",
     "@media (prefers-reduced-motion: reduce)": {
@@ -167,7 +179,7 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
     }
   },
   labelContentHover: {
-    ...m,
+    ...y,
     width: 0,
     height: 0,
     overflowX: "visible",
@@ -176,86 +188,86 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
     pointerEvents: "none"
   },
   description: {
-    fontSize: C,
+    fontSize: v,
     lineHeight: "1.5",
-    fontWeight: S,
-    ...d.margin(0),
+    fontWeight: F,
+    ...c.margin(0),
     "& a": {
       textDecorationLine: "underline",
       textUnderlineOffset: "4px"
     }
   },
   descriptionDefault: {
-    color: x
+    color: L
   },
   descriptionHelper: {
-    color: O
+    color: W
   },
   error: {
-    color: H,
-    fontSize: C,
-    lineHeight: E,
-    fontWeight: S
+    color: P,
+    fontSize: v,
+    lineHeight: z,
+    fontWeight: F
   },
   errorList: {
-    ...m,
+    ...y,
     display: "flex",
     flexDirection: "column",
-    ...d.margin(0),
+    ...c.margin(0),
     paddingLeft: "1.25rem",
     listStyleType: "disc"
   },
   errorListItem: {
-    color: H,
-    fontSize: C,
-    lineHeight: E,
-    fontWeight: S,
+    color: P,
+    fontSize: v,
+    lineHeight: z,
+    fontWeight: F,
     marginTop: "0.25rem",
     marginBottom: "0.25rem"
   },
   input: {
-    ...N,
+    ..._,
     width: "100%",
     // Density-bound (DENSITY-SPEC.md §2.3): normal resolves to the same "1.5rem" this used before
     // binding. FieldComboboxInput (field-combobox.tsx) has its OWN separate makeZenithStyles call
     // and its own unrelated "input" key (width: "100%" only, no height) — this binding does not
     // reach it; review corrected an earlier claim that it did.
-    height: V,
+    height: le,
     outlineStyle: "none",
-    fontSize: D,
-    lineHeight: R,
-    color: x,
+    fontSize: N,
+    lineHeight: E,
+    color: L,
     backgroundColor: "transparent",
-    ...d.border("0"),
-    ...d.padding(0),
+    ...c.border("0"),
+    ...c.padding(0),
     "::placeholder": {
-      color: G
+      color: M
     },
     ":disabled": {
       cursor: "not-allowed"
     }
   },
   inputGroup: {
-    ...m,
+    ...y,
     display: "flex",
     alignItems: "center",
-    ...d.gap(L),
+    ...c.gap(I),
     width: "100%",
     // Already a row, so an injected button lands beside the input; it must not stretch the row.
-    [`& > [${r}="field-input"] + :not([${r}])`]: B
+    [`& > [${s}="field-input"] + :not([${s}])`]: U
   },
   textarea: {
-    ...N,
+    ..._,
     width: "100%",
     outlineStyle: "none",
-    fontSize: D,
-    lineHeight: R,
-    color: x,
+    fontSize: N,
+    lineHeight: E,
+    color: L,
     backgroundColor: "transparent",
-    ...d.border("0"),
-    ...d.padding(0),
+    ...c.border("0"),
+    ...c.padding(0),
     "::placeholder": {
-      color: G
+      color: M
     },
     ":disabled": {
       cursor: "not-allowed"
@@ -271,18 +283,18 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
     resize: "horizontal"
   },
   addon: {
-    ...m,
-    color: O,
+    ...y,
+    color: W,
     display: "flex",
     height: "auto",
     cursor: "text",
     whiteSpace: "nowrap",
     alignItems: "center",
     justifyContent: "center",
-    ...d.gap(F),
-    fontSize: D,
-    lineHeight: R,
-    fontWeight: S,
+    ...c.gap(w),
+    fontSize: N,
+    lineHeight: E,
+    fontWeight: F,
     userSelect: "none"
   },
   addonStart: {
@@ -291,239 +303,261 @@ const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createCo
   addonEnd: {
     order: 1
   }
-}), ge = ({
-  variant: n = "default"
-} = {}) => n, me = a.forwardRef(
+}), ze = ({
+  variant: t = "default"
+} = {}) => t, Oe = l.forwardRef(
   function({
-    className: l,
+    className: o,
     variant: e = "default",
-    children: t,
-    onFocusCapture: o,
-    onBlurCapture: i,
-    ...s
-  }, h) {
-    const u = p(), y = a.useRef(null), [g, b] = a.useState(!1), _ = (v) => {
-      b(!0), o == null || o(v);
-    }, W = (v) => {
-      b(!1), i == null || i(v);
-    }, M = e === "highlight" ? u.rootHighlight : e === "readonly" ? u.rootReadonly : e === "destructive" ? u.rootDestructive : u.rootDefault;
-    return /* @__PURE__ */ c(z.Provider, { value: { inputRef: y }, children: /* @__PURE__ */ c(
-      K,
+    children: n,
+    onFocusCapture: i,
+    onBlurCapture: r,
+    ...a
+  }, p) {
+    const d = g(), b = l.useRef(null), [f, x] = l.useState(!1), [G, H] = l.useState([]), [T, Z] = l.useState(), A = l.useCallback((h) => {
+      H((C) => {
+        const S = C.findIndex((ne) => ne.key === h.key);
+        if (S === -1) return [...C, h];
+        const { id: te, htmlFor: oe } = C[S];
+        if (te === h.id && oe === h.htmlFor) return C;
+        const B = C.slice();
+        return B[S] = h, B;
+      });
+    }, []), $ = l.useCallback((h) => {
+      H((C) => C.filter((S) => S.key !== h));
+    }, []), J = l.useMemo(
+      () => ({ labels: G, controlId: T, setLabel: A, removeLabel: $, setControlId: Z }),
+      [G, T, A, $]
+    ), K = (h) => {
+      x(!0), i == null || i(h);
+    }, Q = (h) => {
+      x(!1), r == null || r(h);
+    }, ee = e === "highlight" ? d.rootHighlight : e === "readonly" ? d.rootReadonly : e === "destructive" ? d.rootDestructive : d.rootDefault;
+    return /* @__PURE__ */ u(k.Provider, { value: { inputRef: b }, children: /* @__PURE__ */ u(D.Provider, { value: J, children: /* @__PURE__ */ u(
+      pe,
       {
-        ref: h,
+        ref: p,
         role: "group",
         "data-slot": "field",
-        [r]: "field",
-        "data-focused": g ? "true" : "false",
-        className: f(u.root, M, l),
-        onFocusCapture: _,
-        onBlurCapture: W,
-        ...s,
-        children: t
+        [s]: "field",
+        "data-focused": f ? "true" : "false",
+        className: m(d.root, ee, o),
+        onFocusCapture: K,
+        onBlurCapture: Q,
+        ...a,
+        children: n
       }
-    ) });
+    ) }) });
   }
-), he = a.forwardRef(
-  function({ className: l, ...e }, t) {
-    const o = p();
-    return /* @__PURE__ */ c(
+), ke = l.forwardRef(
+  function({ className: o, ...e }, n) {
+    const i = g();
+    return /* @__PURE__ */ u(
       "fieldset",
       {
-        ref: t,
+        ref: n,
         "data-slot": "field-set",
-        [r]: "field-set",
-        className: f(o.fieldSet, l),
+        [s]: "field-set",
+        className: m(i.fieldSet, o),
         ...e
       }
     );
   }
-), ye = a.forwardRef(
-  function({ className: l, direction: e = "column", ...t }, o) {
-    const i = p();
-    return /* @__PURE__ */ c(
+), Ge = l.forwardRef(
+  function({ className: o, direction: e = "column", ...n }, i) {
+    const r = g();
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: o,
+        ref: i,
         "data-slot": "field-group",
-        [r]: "field-group",
-        className: f(
-          i.fieldGroup,
-          e === "row" ? i.fieldGroupRow : i.fieldGroupColumn,
-          l
+        [s]: "field-group",
+        className: m(
+          r.fieldGroup,
+          e === "row" ? r.fieldGroupRow : r.fieldGroupColumn,
+          o
         ),
-        ...t
+        ...n
       }
     );
   }
-), be = a.forwardRef(
-  function({ className: l, ...e }, t) {
-    const o = p();
-    return /* @__PURE__ */ c(
+), He = l.forwardRef(
+  function({ className: o, ...e }, n) {
+    const i = g();
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: t,
+        ref: n,
         "data-slot": "field-content",
-        [r]: "field-content",
-        className: f(o.fieldContent, l),
+        [s]: "field-content",
+        className: m(i.fieldContent, o),
         ...e
       }
     );
   }
-), Se = a.forwardRef(
-  function({ className: l, ...e }, t) {
-    const o = p();
-    return /* @__PURE__ */ c(
-      Q,
+), Te = l.forwardRef(
+  function({ className: o, id: e, ...n }, i) {
+    const r = g(), a = l.useId(), p = l.useContext(D), d = e ?? (p ? a : void 0), b = p == null ? void 0 : p.setLabel, f = p == null ? void 0 : p.removeLabel, x = n.htmlFor;
+    return O(() => {
+      b && d && b({ key: a, id: d, htmlFor: x });
+    }, [b, a, d, x]), O(() => {
+      if (f)
+        return () => f(a);
+    }, [f, a]), /* @__PURE__ */ u(
+      me,
       {
-        ref: t,
+        ref: i,
+        id: d,
         "data-slot": "field-label",
-        [r]: "field-label",
-        className: f(o.label, l),
-        ...e
+        [s]: "field-label",
+        className: m(r.label, o),
+        ...n
       }
     );
   }
-), xe = a.forwardRef(function({ className: l, showOnHover: e = !0, ...t }, o) {
-  const i = p();
-  return /* @__PURE__ */ c(
+), Ae = l.forwardRef(function({ className: o, showOnHover: e = !0, ...n }, i) {
+  const r = g();
+  return /* @__PURE__ */ u(
     "div",
     {
-      ref: o,
+      ref: i,
       "data-slot": "field-label-content",
-      [r]: "field-label-content",
-      className: f(
-        i.labelContent,
-        e && i.labelContentHover,
-        l
+      [s]: "field-label-content",
+      className: m(
+        r.labelContent,
+        e && r.labelContentHover,
+        o
       ),
-      ...t
+      ...n
     }
   );
-}), Ce = ({
-  variant: n = "default"
-} = {}) => n, Fe = a.forwardRef(function({ className: l, variant: e = "default", ...t }, o) {
-  const i = p(), s = e === "helper" ? i.descriptionHelper : i.descriptionDefault;
-  return /* @__PURE__ */ c(
-    te,
+}), $e = ({
+  variant: t = "default"
+} = {}) => t, Be = l.forwardRef(function({ className: o, variant: e = "default", ...n }, i) {
+  const r = g(), a = e === "helper" ? r.descriptionHelper : r.descriptionDefault;
+  return /* @__PURE__ */ u(
+    he,
     {
-      ref: o,
+      ref: i,
       "data-slot": "field-description",
-      [r]: "field-description",
-      className: f(i.description, s, l),
-      ...t
+      [s]: "field-description",
+      className: m(r.description, a, o),
+      ...n
     }
   );
-}), Le = a.forwardRef(
-  function({ className: l, children: e, errors: t, ...o }, i) {
-    const s = p(), h = a.useMemo(() => {
-      var y;
+}), _e = l.forwardRef(
+  function({ className: o, children: e, errors: n, ...i }, r) {
+    const a = g(), p = l.useMemo(() => {
+      var b;
       if (e)
         return e;
-      if (!(t != null && t.length))
+      if (!(n != null && n.length))
         return null;
-      const u = [
-        ...new Map(t.map((g) => [g == null ? void 0 : g.message, g])).values()
+      const d = [
+        ...new Map(n.map((f) => [f == null ? void 0 : f.message, f])).values()
       ];
-      return u.length === 1 ? (y = u[0]) == null ? void 0 : y.message : /* @__PURE__ */ c("ul", { className: s.errorList, children: u.map(
-        (g, b) => (g == null ? void 0 : g.message) && /* @__PURE__ */ c("li", { className: s.errorListItem, children: g.message }, b)
+      return d.length === 1 ? (b = d[0]) == null ? void 0 : b.message : /* @__PURE__ */ u("ul", { className: a.errorList, children: d.map(
+        (f, x) => (f == null ? void 0 : f.message) && /* @__PURE__ */ u("li", { className: a.errorListItem, children: f.message }, x)
       ) });
-    }, [e, t, s.errorList, s.errorListItem]);
-    return h ? /* @__PURE__ */ c(
-      oe,
+    }, [e, n, a.errorList, a.errorListItem]);
+    return p ? /* @__PURE__ */ u(
+      be,
       {
-        ref: i,
+        ref: r,
         role: "alert",
         "data-slot": "field-error",
-        [r]: "field-error",
-        className: f(s.error, l),
-        ...o,
-        children: h
+        [s]: "field-error",
+        className: m(a.error, o),
+        ...i,
+        children: p
       }
     ) : null;
   }
-), we = a.forwardRef(
-  function({ className: l, ...e }, t) {
-    const o = p(), { inputRef: i } = $();
-    return /* @__PURE__ */ c(
-      ee,
+), We = l.forwardRef(
+  function({ className: o, ...e }, n) {
+    const i = g(), { inputRef: r } = Y();
+    return /* @__PURE__ */ u(
+      ge,
       {
-        ref: (s) => {
-          i.current = s, typeof t == "function" ? t(s) : t && (t.current = s);
+        ref: (a) => {
+          r.current = a, typeof n == "function" ? n(a) : n && (n.current = a);
         },
         "data-readonly": e.readOnly,
         "data-slot": "field-input",
-        [r]: "field-input",
-        className: f(o.input, l),
+        [s]: "field-input",
+        className: m(i.input, o),
         ...e
       }
     );
   }
-), ve = a.forwardRef(function({ className: l, ...e }, t) {
-  const o = p();
-  return /* @__PURE__ */ c(
+), Me = l.forwardRef(function({ className: o, ...e }, n) {
+  const i = g();
+  return /* @__PURE__ */ u(
     "div",
     {
-      ref: t,
+      ref: n,
       "data-slot": "field-input-group",
-      [r]: "field-input-group",
-      className: f(o.inputGroup, l),
+      [s]: "field-input-group",
+      className: m(i.inputGroup, o),
       ...e
     }
   );
-}), Re = a.forwardRef(function({ className: l, resize: e = "none", ...t }, o) {
-  const i = p(), { inputRef: s } = $(), h = e === "vertical" ? i.resizeVertical : e === "horizontal" ? i.resizeHorizontal : i.resizeNone;
-  return /* @__PURE__ */ c(
+}), Pe = l.forwardRef(function({ className: o, resize: e = "none", ...n }, i) {
+  const r = g(), { inputRef: a } = Y(), p = e === "vertical" ? r.resizeVertical : e === "horizontal" ? r.resizeHorizontal : r.resizeNone;
+  return /* @__PURE__ */ u(
     "textarea",
     {
-      ...t,
-      ref: (u) => {
-        s.current = u, typeof o == "function" ? o(u) : o && (o.current = u);
+      ...n,
+      ref: (d) => {
+        a.current = d, typeof i == "function" ? i(d) : i && (i.current = d);
       },
-      "data-readonly": t.readOnly,
+      "data-readonly": n.readOnly,
       "data-slot": "field-textarea",
-      [r]: "field-textarea",
+      [s]: "field-textarea",
       "data-resize": e,
-      className: f(i.textarea, h, l)
+      className: m(r.textarea, p, o)
     }
   );
-}), De = ({
-  align: n = "start"
-} = {}) => n, Ee = a.forwardRef(function({ className: l, align: e = "start", ...t }, o) {
-  const i = p();
-  return /* @__PURE__ */ c(
+}), Ve = ({
+  align: t = "start"
+} = {}) => t, je = l.forwardRef(function({ className: o, align: e = "start", ...n }, i) {
+  const r = g();
+  return /* @__PURE__ */ u(
     "div",
     {
-      ref: o,
+      ref: i,
       role: "group",
       "data-slot": "input-group-addon",
-      [r]: "input-group-addon",
+      [s]: "input-group-addon",
       "data-align": e,
-      className: f(
-        i.addon,
-        e === "end" ? i.addonEnd : i.addonStart,
-        l
+      className: m(
+        r.addon,
+        e === "end" ? r.addonEnd : r.addonStart,
+        o
       ),
-      ...t
+      ...n
     }
   );
 });
 export {
-  me as Field,
-  be as FieldContent,
-  Fe as FieldDescription,
-  Le as FieldError,
-  ye as FieldGroup,
-  Ee as FieldGroupAddon,
-  we as FieldInput,
-  ve as FieldInputGroup,
-  Se as FieldLabel,
-  xe as FieldLabelContent,
-  he as FieldSet,
-  Re as FieldTextarea,
-  Ce as fieldDescriptionVariants,
-  ge as fieldVariants,
-  De as inputGroupAddonVariants,
-  $ as useFieldContext,
-  pe as useOptionalFieldContext
+  Oe as Field,
+  He as FieldContent,
+  Be as FieldDescription,
+  _e as FieldError,
+  Ge as FieldGroup,
+  je as FieldGroupAddon,
+  We as FieldInput,
+  Me as FieldInputGroup,
+  Te as FieldLabel,
+  Ae as FieldLabelContent,
+  ke as FieldSet,
+  Pe as FieldTextarea,
+  $e as fieldDescriptionVariants,
+  ze as fieldVariants,
+  Ve as inputGroupAddonVariants,
+  Y as useFieldContext,
+  De as useFieldLabelId,
+  Ne as useOptionalFieldContext,
+  Ee as useReportFieldControlId
 };
 //# sourceMappingURL=field.js.map