@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.0

package/dist/components/field/field.js

@@ -1,42 +1,46 @@
-import { jsx as d } from "react/jsx-runtime";
-import * as a from "react";
+import { j as d } from "../../vendor/react/jsx-dev-runtime.js";
+import * as s from "react";
 import { shorthands as r } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as f } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as W } from "../../styles/make-styles.js";
-import { spacingElement2 as y, spacingElement1 as S, spacingLayout2 as P, radiusLg as X, fontWeightNormal as x, leadingSm as w, textSm as z, grayA11 as L, grayA8 as N, grayA12 as F, leadingXs as D, textXs as v, errorA11 as G, errorA8 as A, errorA4 as $, semErrorSoft as E, accentA8 as R, grayA3 as k, accentA4 as j, accentA3 as M, grayA4 as q, spacingElement3 as I } from "../../tokens/index.js";
-const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createContext(null), T = () => {
-  const l = a.useContext(H);
-  if (!l)
+import { mergeClasses as u } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as T } from "../../styles/make-styles.js";
+import { spacingElement2 as h, spacingElement1 as D, fieldSetGap as O, radiusLg as B, fontWeightNormal as N, leadingSm as F, textSm as S, grayA11 as k, grayA8 as R, grayA12 as v, fieldInputHeight as W, leadingXs as E, textXs as y, semErrorOnSoft as V, errorA4 as P, semErrorSoft as z, grayA3 as j, accentA4 as X, accentA3 as $, grayA4 as M, semFocusRing as Y, fieldPaddingX as H, fieldPaddingY as G } from "../../tokens/index.js";
+const q = "div", Q = "label", _ = "input", J = "p", K = "div", C = s.createContext(null), L = () => {
+  const n = s.useContext(C);
+  if (!n)
     throw new Error("FieldInput must be used within a Field component");
-  return l;
-}, ie = () => a.useContext(H), p = W({
+  return n;
+}, ne = () => s.useContext(C), m = T({
   root: {
     position: "relative",
     display: "flex",
     flexDirection: "column",
     width: "100%",
-    paddingTop: y,
-    paddingBottom: y,
-    // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem
-    // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.
-    // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)
-    // silently loses 4px per side. See STATUS: the scale gap is the root cause.
-    paddingLeft: I,
-    paddingRight: I,
-    ...r.gap(S),
-    ...r.borderRadius(X),
+    // Density-bound (DENSITY-SPEC.md §2.3, WP9B1-ACCEPTANCE-WP9B2A): normal resolves to the same
+    // spacingElement2/spacingElement3 values this used before binding — `spacingGroup1` (0.5rem)
+    // 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: G,
+    paddingBottom: G,
+    paddingLeft: H,
+    paddingRight: H,
+    ...r.gap(D),
+    ...r.borderRadius(B),
     transitionProperty: "all",
     transitionDuration: "75ms",
     outlineOffset: "2px",
     outlineWidth: "2px",
     outlineStyle: "none",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
     "&[data-focused='true'], &[data-focus-visible]": {
-      outlineStyle: "solid"
+      outlineStyle: "solid",
+      outlineColor: Y
     },
     "&[data-invalid]": {
-      backgroundColor: E,
-      outlineColor: A
+      backgroundColor: z
     },
     // 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
@@ -57,42 +61,32 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     }
   },
   rootDefault: {
-    backgroundColor: k,
+    backgroundColor: j,
     ":hover": {
-      backgroundColor: q
-    },
-    "&[data-focused='true'], &[data-focus-visible]": {
-      outlineColor: R
+      backgroundColor: M
     }
   },
   rootHighlight: {
-    backgroundColor: M,
+    backgroundColor: $,
     ":hover": {
-      backgroundColor: j
-    },
-    "&[data-focused='true'], &[data-focus-visible]": {
-      outlineColor: R
+      backgroundColor: X
     }
   },
   rootReadonly: {
-    backgroundColor: k,
-    "&[data-focused='true'], &[data-focus-visible]": {
-      outlineColor: R
-    }
+    backgroundColor: j
   },
   rootDestructive: {
-    backgroundColor: E,
+    backgroundColor: z,
     ":hover": {
-      backgroundColor: $
-    },
-    "&[data-focused='true'], &[data-focus-visible]": {
-      outlineColor: A
+      backgroundColor: P
     }
   },
   fieldSet: {
     display: "flex",
     flexDirection: "column",
-    ...r.gap(P),
+    // Density-bound (DENSITY-SPEC.md §2.3): normal resolves to the same spacingLayout2 (32px)
+    // this used before binding.
+    ...r.gap(O),
     ...r.border("0"),
     ...r.padding(0),
     ...r.margin(0)
@@ -100,7 +94,7 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   fieldGroup: {
     display: "flex",
     width: "100%",
-    ...r.gap(y)
+    ...r.gap(h)
   },
   fieldGroupColumn: {
     flexDirection: "column"
@@ -114,18 +108,18 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     flexShrink: 1,
     flexBasis: "0%",
     flexDirection: "column",
-    ...r.gap(y),
+    ...r.gap(h),
     lineHeight: "1.375"
   },
   label: {
     minHeight: "1rem",
-    fontSize: v,
-    lineHeight: D,
+    fontSize: y,
+    lineHeight: E,
     display: "flex",
     width: "fit-content",
-    ...r.gap(y),
+    ...r.gap(h),
     cursor: "default",
-    color: F,
+    color: v,
     "&[data-disabled]": {
       opacity: 0.5
     }
@@ -133,9 +127,12 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   labelContent: {
     display: "inline-flex",
     alignItems: "center",
-    ...r.gap(S),
+    ...r.gap(D),
     transitionProperty: "opacity",
-    transitionDuration: "150ms"
+    transitionDuration: "150ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    }
   },
   labelContentHover: {
     width: 0,
@@ -146,9 +143,9 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     pointerEvents: "none"
   },
   description: {
-    fontSize: v,
+    fontSize: y,
     lineHeight: "1.5",
-    fontWeight: x,
+    fontWeight: N,
     ...r.margin(0),
     "& a": {
       textDecorationLine: "underline",
@@ -156,16 +153,16 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     }
   },
   descriptionDefault: {
-    color: F
+    color: v
   },
   descriptionHelper: {
-    color: L
+    color: k
   },
   error: {
-    color: G,
-    fontSize: v,
-    lineHeight: D,
-    fontWeight: x
+    color: V,
+    fontSize: y,
+    lineHeight: E,
+    fontWeight: N
   },
   errorList: {
     display: "flex",
@@ -175,25 +172,29 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     listStyleType: "disc"
   },
   errorListItem: {
-    color: G,
-    fontSize: v,
-    lineHeight: D,
-    fontWeight: x,
+    color: V,
+    fontSize: y,
+    lineHeight: E,
+    fontWeight: N,
     marginTop: "0.25rem",
     marginBottom: "0.25rem"
   },
   input: {
     width: "100%",
-    height: "1.5rem",
+    // 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 makeVoltStyles call
+    // and its own unrelated "input" key (width: "100%" only, no height) — this binding does not
+    // reach it; CALIPER-WP9B2A-REVIEW-1.md corrected an earlier claim that it did.
+    height: W,
     outlineStyle: "none",
-    fontSize: z,
-    lineHeight: w,
-    color: F,
+    fontSize: S,
+    lineHeight: F,
+    color: v,
     backgroundColor: "transparent",
     ...r.border("0"),
     ...r.padding(0),
     "::placeholder": {
-      color: N
+      color: R
     },
     ":disabled": {
       cursor: "not-allowed"
@@ -202,20 +203,20 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   inputGroup: {
     display: "flex",
     alignItems: "center",
-    ...r.gap(S),
+    ...r.gap(D),
     width: "100%"
   },
   textarea: {
     width: "100%",
     outlineStyle: "none",
-    fontSize: z,
-    lineHeight: w,
-    color: F,
+    fontSize: S,
+    lineHeight: F,
+    color: v,
     backgroundColor: "transparent",
     ...r.border("0"),
     ...r.padding(0),
     "::placeholder": {
-      color: N
+      color: R
     },
     ":disabled": {
       cursor: "not-allowed"
@@ -231,17 +232,17 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     resize: "horizontal"
   },
   addon: {
-    color: L,
+    color: k,
     display: "flex",
     height: "auto",
     cursor: "text",
     whiteSpace: "nowrap",
     alignItems: "center",
     justifyContent: "center",
-    ...r.gap(y),
-    fontSize: z,
-    lineHeight: w,
-    fontWeight: x,
+    ...r.gap(h),
+    fontSize: S,
+    lineHeight: F,
+    fontWeight: N,
     userSelect: "none"
   },
   addonStart: {
@@ -250,239 +251,347 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   addonEnd: {
     order: 1
   }
-}), le = ({
-  variant: l = "default"
-} = {}) => l, re = a.forwardRef(
+}), re = ({
+  variant: n = "default"
+} = {}) => n, se = s.forwardRef(
   function({
-    className: i,
+    className: o,
     variant: e = "default",
     children: t,
-    onFocusCapture: o,
-    onBlurCapture: n,
-    ...s
-  }, m) {
-    const u = p(), h = a.useRef(null), [g, b] = a.useState(!1), B = (C) => {
-      b(!0), o == null || o(C);
-    }, O = (C) => {
-      b(!1), n == null || n(C);
-    }, V = e === "highlight" ? u.rootHighlight : e === "readonly" ? u.rootReadonly : e === "destructive" ? u.rootDestructive : u.rootDefault;
-    return /* @__PURE__ */ d(H.Provider, { value: { inputRef: h }, children: /* @__PURE__ */ d(
-      Q,
+    onFocusCapture: i,
+    onBlurCapture: l,
+    ...a
+  }, g) {
+    const f = m(), x = s.useRef(null), [p, b] = s.useState(!1), U = (w) => {
+      b(!0), i == null || i(w);
+    }, I = (w) => {
+      b(!1), l == null || l(w);
+    }, A = e === "highlight" ? f.rootHighlight : e === "readonly" ? f.rootReadonly : e === "destructive" ? f.rootDestructive : f.rootDefault;
+    return /* @__PURE__ */ d.jsxDEV(C.Provider, { value: { inputRef: x }, children: /* @__PURE__ */ d.jsxDEV(
+      q,
       {
-        ref: m,
+        ref: g,
         role: "group",
         "data-slot": "field",
         [c]: "field",
-        "data-focused": g ? "true" : "false",
-        className: f(u.root, V, i),
-        onFocusCapture: B,
-        onBlurCapture: O,
-        ...s,
+        "data-focused": p ? "true" : "false",
+        className: u(f.root, A, o),
+        onFocusCapture: U,
+        onBlurCapture: I,
+        ...a,
         children: t
-      }
-    ) });
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 361,
+        columnNumber: 9
+      },
+      this
+    ) }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+      lineNumber: 360,
+      columnNumber: 7
+    }, this);
   }
-), ae = a.forwardRef(
-  function({ className: i, ...e }, t) {
-    const o = p();
-    return /* @__PURE__ */ d(
+), ae = s.forwardRef(
+  function({ className: o, ...e }, t) {
+    const i = m();
+    return /* @__PURE__ */ d.jsxDEV(
       "fieldset",
       {
         ref: t,
         "data-slot": "field-set",
         [c]: "field-set",
-        className: f(o.fieldSet, i),
+        className: u(i.fieldSet, o),
         ...e
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 386,
+        columnNumber: 7
+      },
+      this
     );
   }
-), se = a.forwardRef(
-  function({ className: i, direction: e = "column", ...t }, o) {
-    const n = p();
-    return /* @__PURE__ */ d(
+), de = s.forwardRef(
+  function({ className: o, direction: e = "column", ...t }, i) {
+    const l = m();
+    return /* @__PURE__ */ d.jsxDEV(
       "div",
       {
-        ref: o,
+        ref: i,
         "data-slot": "field-group",
         [c]: "field-group",
-        className: f(
-          n.fieldGroup,
-          e === "row" ? n.fieldGroupRow : n.fieldGroupColumn,
-          i
+        className: u(
+          l.fieldGroup,
+          e === "row" ? l.fieldGroupRow : l.fieldGroupColumn,
+          o
         ),
         ...t
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 406,
+        columnNumber: 7
+      },
+      this
     );
   }
-), de = a.forwardRef(
-  function({ className: i, ...e }, t) {
-    const o = p();
-    return /* @__PURE__ */ d(
+), ce = s.forwardRef(
+  function({ className: o, ...e }, t) {
+    const i = m();
+    return /* @__PURE__ */ d.jsxDEV(
       "div",
       {
         ref: t,
         "data-slot": "field-content",
         [c]: "field-content",
-        className: f(o.fieldContent, i),
+        className: u(i.fieldContent, o),
         ...e
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 428,
+        columnNumber: 7
+      },
+      this
     );
   }
-), ce = a.forwardRef(
-  function({ className: i, ...e }, t) {
-    const o = p();
-    return /* @__PURE__ */ d(
-      U,
+), fe = s.forwardRef(
+  function({ className: o, ...e }, t) {
+    const i = m();
+    return /* @__PURE__ */ d.jsxDEV(
+      Q,
       {
         ref: t,
         "data-slot": "field-label",
         [c]: "field-label",
-        className: f(o.label, i),
+        className: u(i.label, o),
         ...e
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 451,
+        columnNumber: 7
+      },
+      this
     );
   }
-), ue = a.forwardRef(function({ className: i, showOnHover: e = !0, ...t }, o) {
-  const n = p();
-  return /* @__PURE__ */ d(
+), ue = s.forwardRef(function({ className: o, showOnHover: e = !0, ...t }, i) {
+  const l = m();
+  return /* @__PURE__ */ d.jsxDEV(
     "div",
     {
-      ref: o,
+      ref: i,
       "data-slot": "field-label-content",
       [c]: "field-label-content",
-      className: f(
-        n.labelContent,
-        e && n.labelContentHover,
-        i
+      className: u(
+        l.labelContent,
+        e && l.labelContentHover,
+        o
       ),
       ...t
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+      lineNumber: 473,
+      columnNumber: 5
+    },
+    this
   );
-}), fe = ({
-  variant: l = "default"
-} = {}) => l, pe = a.forwardRef(function({ className: i, variant: e = "default", ...t }, o) {
-  const n = p(), s = e === "helper" ? n.descriptionHelper : n.descriptionDefault;
-  return /* @__PURE__ */ d(
-    _,
+}), me = ({
+  variant: n = "default"
+} = {}) => n, pe = s.forwardRef(function({ className: o, variant: e = "default", ...t }, i) {
+  const l = m(), a = e === "helper" ? l.descriptionHelper : l.descriptionDefault;
+  return /* @__PURE__ */ d.jsxDEV(
+    J,
     {
-      ref: o,
+      ref: i,
       "data-slot": "field-description",
       [c]: "field-description",
-      className: f(n.description, s, i),
+      className: u(l.description, a, o),
       ...t
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+      lineNumber: 513,
+      columnNumber: 5
+    },
+    this
   );
-}), ge = a.forwardRef(
-  function({ className: i, children: e, errors: t, ...o }, n) {
-    const s = p(), m = a.useMemo(() => {
-      var h;
+}), ge = s.forwardRef(
+  function({ className: o, children: e, errors: t, ...i }, l) {
+    const a = m(), g = s.useMemo(() => {
+      var x;
       if (e)
         return e;
       if (!(t != null && t.length))
         return null;
-      const u = [
-        ...new Map(t.map((g) => [g == null ? void 0 : g.message, g])).values()
+      const f = [
+        ...new Map(t.map((p) => [p == null ? void 0 : p.message, p])).values()
       ];
-      return u.length === 1 ? (h = u[0]) == null ? void 0 : h.message : /* @__PURE__ */ d("ul", { className: s.errorList, children: u.map(
-        (g, b) => (g == null ? void 0 : g.message) && /* @__PURE__ */ d("li", { className: s.errorListItem, children: g.message }, b)
-      ) });
-    }, [e, t, s.errorList, s.errorListItem]);
-    return m ? /* @__PURE__ */ d(
-      J,
+      return f.length === 1 ? (x = f[0]) == null ? void 0 : x.message : /* @__PURE__ */ d.jsxDEV("ul", { className: a.errorList, children: f.map(
+        (p, b) => (p == null ? void 0 : p.message) && /* @__PURE__ */ d.jsxDEV("li", { className: a.errorListItem, children: p.message }, b, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+          lineNumber: 554,
+          columnNumber: 17
+        }, this)
+      ) }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 550,
+        columnNumber: 9
+      }, this);
+    }, [e, t, a.errorList, a.errorListItem]);
+    return g ? /* @__PURE__ */ d.jsxDEV(
+      K,
       {
-        ref: n,
+        ref: l,
         role: "alert",
         "data-slot": "field-error",
         [c]: "field-error",
-        className: f(s.error, i),
-        ...o,
-        children: m
-      }
+        className: u(a.error, o),
+        ...i,
+        children: g
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 568,
+        columnNumber: 7
+      },
+      this
     ) : null;
   }
-), me = a.forwardRef(
-  function({ className: i, ...e }, t) {
-    const o = p(), { inputRef: n } = T();
-    return /* @__PURE__ */ d(
-      Y,
+), xe = s.forwardRef(
+  function({ className: o, ...e }, t) {
+    const i = m(), { inputRef: l } = L();
+    return /* @__PURE__ */ d.jsxDEV(
+      _,
       {
-        ref: (s) => {
-          n.current = s, typeof t == "function" ? t(s) : t && (t.current = s);
+        ref: (a) => {
+          l.current = a, typeof t == "function" ? t(a) : t && (t.current = a);
         },
         "data-readonly": e.readOnly,
         "data-slot": "field-input",
         [c]: "field-input",
-        className: f(o.input, i),
+        className: u(i.input, o),
         ...e
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+        lineNumber: 595,
+        columnNumber: 7
+      },
+      this
     );
   }
-), ye = a.forwardRef(function({ className: i, ...e }, t) {
-  const o = p();
-  return /* @__PURE__ */ d(
+), be = s.forwardRef(function({ className: o, ...e }, t) {
+  const i = m();
+  return /* @__PURE__ */ d.jsxDEV(
     "div",
     {
       ref: t,
       "data-slot": "field-input-group",
       [c]: "field-input-group",
-      className: f(o.inputGroup, i),
+      className: u(i.inputGroup, o),
       ...e
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+      lineNumber: 623,
+      columnNumber: 5
+    },
+    this
   );
-}), he = a.forwardRef(function({ className: i, resize: e = "none", ...t }, o) {
-  const n = p(), { inputRef: s } = T(), m = e === "vertical" ? n.resizeVertical : e === "horizontal" ? n.resizeHorizontal : n.resizeNone;
-  return /* @__PURE__ */ d(
+}), he = s.forwardRef(function({ className: o, resize: e = "none", ...t }, i) {
+  const l = m(), { inputRef: a } = L(), g = e === "vertical" ? l.resizeVertical : e === "horizontal" ? l.resizeHorizontal : l.resizeNone;
+  return /* @__PURE__ */ d.jsxDEV(
     "textarea",
     {
       ...t,
-      ref: (u) => {
-        s.current = u, typeof o == "function" ? o(u) : o && (o.current = u);
+      ref: (f) => {
+        a.current = f, typeof i == "function" ? i(f) : i && (i.current = f);
       },
       "data-readonly": t.readOnly,
       "data-slot": "field-textarea",
       [c]: "field-textarea",
       "data-resize": e,
-      className: f(n.textarea, m, i)
-    }
+      className: u(l.textarea, g, o)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+      lineNumber: 657,
+      columnNumber: 5
+    },
+    this
   );
-}), be = ({
-  align: l = "start"
-} = {}) => l, xe = a.forwardRef(function({ className: i, align: e = "start", ...t }, o) {
-  const n = p();
-  return /* @__PURE__ */ d(
+}), Ne = ({
+  align: n = "start"
+} = {}) => n, ve = s.forwardRef(function({ className: o, align: e = "start", ...t }, i) {
+  const l = m();
+  return /* @__PURE__ */ d.jsxDEV(
     "div",
     {
-      ref: o,
+      ref: i,
       role: "group",
       "data-slot": "input-group-addon",
       [c]: "input-group-addon",
       "data-align": e,
-      className: f(
-        n.addon,
-        e === "end" ? n.addonEnd : n.addonStart,
-        i
+      className: u(
+        l.addon,
+        e === "end" ? l.addonEnd : l.addonStart,
+        o
       ),
       ...t
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/field/field.tsx",
+      lineNumber: 695,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  re as Field,
-  de as FieldContent,
+  se as Field,
+  ce as FieldContent,
   pe as FieldDescription,
   ge as FieldError,
-  se as FieldGroup,
-  xe as FieldGroupAddon,
-  me as FieldInput,
-  ye as FieldInputGroup,
-  ce as FieldLabel,
+  de as FieldGroup,
+  ve as FieldGroupAddon,
+  xe as FieldInput,
+  be as FieldInputGroup,
+  fe as FieldLabel,
   ue as FieldLabelContent,
   ae as FieldSet,
   he as FieldTextarea,
-  fe as fieldDescriptionVariants,
-  le as fieldVariants,
-  be as inputGroupAddonVariants,
-  T as useFieldContext,
-  ie as useOptionalFieldContext
+  me as fieldDescriptionVariants,
+  re as fieldVariants,
+  Ne as inputGroupAddonVariants,
+  L as useFieldContext,
+  ne as useOptionalFieldContext
 };
 //# sourceMappingURL=field.js.map