prometeo-design-system 9.3.0 → 9.4.1

package/dist/FormField.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/FormField'
+export {}
+import PrometeoDesignSystem from './exports/FormField'
+export default PrometeoDesignSystem
+export * from './exports/FormField'
+export {}

package/dist/FormField.es.js

@@ -0,0 +1,62 @@
+import { j as e } from "./jsx-runtime-CqQglQKg.js";
+import { c as p } from "./cn-B6yFEsav.js";
+import { memo as b, useId as j } from "react";
+import I from "./HelperComponent.es.js";
+import { f as g } from "./fieldVariants-Ci6QYhCb.js";
+import { F as N } from "./FormFieldContext-H8_osEEP.js";
+import { u as E } from "./FormFieldContext-H8_osEEP.js";
+const y = b(function(f) {
+  const {
+    label: l,
+    supportingText: o,
+    showSupportingText: u,
+    state: r = "default",
+    disabled: t = !1,
+    required: d = !1,
+    htmlFor: m,
+    children: x,
+    className: h
+  } = f, s = j(), a = l ? `${s}-label` : void 0, i = `${s}-helper`, F = m ?? `${s}-control`, c = typeof o == "function" ? o() : o, n = u ?? c != null, v = {
+    labelId: a,
+    helperId: n ? i : void 0,
+    labelledBy: a,
+    describedBy: n ? i : void 0,
+    controlId: F,
+    state: r,
+    disabled: t,
+    required: d
+  };
+  return /* @__PURE__ */ e.jsx(N.Provider, { value: v, children: /* @__PURE__ */ e.jsxs("div", { className: p("relative flex w-full flex-col gap-1", h), children: [
+    l ? /* @__PURE__ */ e.jsx(
+      "label",
+      {
+        id: a,
+        htmlFor: m,
+        className: p(
+          g({ state: r, disabled: t }),
+          "relative z-10",
+          d && "after:ml-0.5 after:content-['*']"
+        ),
+        children: l
+      }
+    ) : null,
+    x,
+    n ? /* @__PURE__ */ e.jsx(
+      I,
+      {
+        id: i,
+        variant: r,
+        disabled: t,
+        className: "min-h-4",
+        children: c
+      }
+    ) : null
+  ] }) });
+});
+y.displayName = "FormField";
+export {
+  y as FormField,
+  N as FormFieldContext,
+  y as default,
+  E as useFormField
+};

package/dist/FormFieldContext-H8_osEEP.js

@@ -0,0 +1,11 @@
+import { createContext as t, useContext as e } from "react";
+const o = t(
+  null
+);
+function r() {
+  return e(o);
+}
+export {
+  o as F,
+  r as u
+};

package/dist/HelperComponent.es.js

@@ -1,12 +1,12 @@
 import { j as s } from "./jsx-runtime-CqQglQKg.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { c as i } from "./index-BOQuZ0gG.js";
-import { memo as d } from "react";
-import { Warning as c } from "./Icon-Warning.es.js";
-import { CheckCircle as o } from "./Icon-CheckCircle.es.js";
-import { Error as u } from "./Icon-Error.es.js";
-import { Info as f } from "./Icon-Info.es.js";
-const m = i("truncate", {
+import { memo as c } from "react";
+import { Warning as o } from "./Icon-Warning.es.js";
+import { CheckCircle as u } from "./Icon-CheckCircle.es.js";
+import { Error as f } from "./Icon-Error.es.js";
+import { Info as m } from "./Icon-Info.es.js";
+const b = i("truncate", {
   variants: {
     variant: {
       default: "text-neutral-tertiary-default",
@@ -23,7 +23,7 @@ const m = i("truncate", {
     variant: "default",
     disabled: !1
   }
-}), b = i("min-h-4 shrink-0", {
+}), v = i("min-h-4 shrink-0", {
   variants: {
     variant: {
       default: "",
@@ -50,23 +50,23 @@ const m = i("truncate", {
     variant: "default",
     disabled: !1
   }
-}), v = (a, t) => {
+}), x = (a, t) => {
   const e = {
-    default: f,
-    error: u,
-    success: o,
-    warning: c
+    default: m,
+    error: f,
+    success: u,
+    warning: o
   }[a];
-  return /* @__PURE__ */ s.jsx(e, { size: 16, className: r(b({ variant: a, disabled: t })) });
-}, x = "*:text-disabled-default *:icon-disabled-default", l = (a) => {
-  const { variant: t, className: n, disabled: e } = a;
-  return /* @__PURE__ */ s.jsxs("div", { ref: a.ref, className: r("flex gap-0.5 px-3 items-center prometeo-fonts-body-small", e && x, n), children: [
-    a.children && v(t, e ?? !1),
-    typeof a.children == "string" ? /* @__PURE__ */ s.jsx("p", { title: a.children, className: r(" prometeo-fonts-body-small", m({ variant: t, disabled: e })), children: a.children }) : a.children
+  return /* @__PURE__ */ s.jsx(e, { size: 16, className: r(v({ variant: a, disabled: t })) });
+}, p = "*:text-disabled-default *:icon-disabled-default", l = (a) => {
+  const { variant: t, className: n, disabled: e, id: d } = a;
+  return /* @__PURE__ */ s.jsxs("div", { id: d, ref: a.ref, className: r("flex gap-0.5 px-3 items-center prometeo-fonts-body-small", e && p, n), children: [
+    a.children && x(t, e ?? !1),
+    typeof a.children == "string" ? /* @__PURE__ */ s.jsx("p", { title: a.children, className: r(" prometeo-fonts-body-small", b({ variant: t, disabled: e })), children: a.children }) : a.children
   ] });
 };
 l.displayName = "HelperText";
-const V = d(l);
+const H = c(l);
 export {
-  V as default
+  H as default
 };

package/dist/SegmentedButton.es.js

@@ -1,15 +1,16 @@
-import { j as d } from "./jsx-runtime-CqQglQKg.js";
+import { j as u } from "./jsx-runtime-CqQglQKg.js";
 import { c as m } from "./cn-B6yFEsav.js";
-import { c as X } from "./index-BOQuZ0gG.js";
-import G, { useSyncExternalStore as tt, useId as nt, useRef as f, useState as S, useLayoutEffect as V, useEffect as z } from "react";
-import { useDragScroll as ot } from "./useDragScroll.es.js";
-import { PlainTooltip as rt } from "./PlainTooltip.es.js";
-const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof window > "u" ? !1 : window.matchMedia(Te).matches, st = (a) => {
+import { c as H } from "./index-BOQuZ0gG.js";
+import X, { useSyncExternalStore as it, useId as st, useRef as f, useState as O, useLayoutEffect as V, useEffect as S } from "react";
+import { useDragScroll as ct } from "./useDragScroll.es.js";
+import { u as dt } from "./FormFieldContext-H8_osEEP.js";
+import { PlainTooltip as ut } from "./PlainTooltip.es.js";
+const Ie = "(prefers-reduced-motion: reduce)", ft = () => !1, mt = () => typeof window > "u" ? !1 : window.matchMedia(Ie).matches, pt = (a) => {
   if (typeof window > "u") return () => {
   };
-  const r = window.matchMedia(Te);
-  return r.addEventListener("change", a), () => r.removeEventListener("change", a);
-}, it = () => tt(st, at, lt), ct = (a, r, y) => y ? { commit: null, pending: r } : a && a.left === r.left && a.right === r.right ? { commit: null, pending: null } : { commit: r, pending: null }, ut = {
+  const o = window.matchMedia(Ie);
+  return o.addEventListener("change", a), () => o.removeEventListener("change", a);
+}, bt = () => it(pt, mt, ft), gt = (a, o, v) => v ? { commit: null, pending: o } : a && a.left === o.left && a.right === o.right ? { commit: null, pending: null } : { commit: o, pending: null }, ht = {
   default: "brand",
   danger: "error"
 }, n = {
@@ -68,29 +69,29 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
     option: "px-3 py-1 min-h-7 pyrion-fonts-body-small"
   },
   medium: {
-    container: "py-[3px] px-[3px]",
+    container: "py-[3px] px-[3px] radius-large",
     pill: "py-2 min-h-[34px] radius-medium",
     option: "px-3 py-2 min-h-[34px] pyrion-fonts-body-medium"
   },
   large: {
-    container: "py-[3px] px-[3px]",
+    container: "py-[3px] px-[3px] radius-large",
     pill: "py-2.5 radius-medium",
     option: "px-4 py-2 min-h-10 pyrion-fonts-body-medium"
   }
-}, D = 20, xe = 4, we = 8, dt = { small: 280, medium: 320, large: 360 }, ft = 300, N = "cubic-bezier(0.2,0,0,1)", mt = "cubic-bezier(0.34,1.4,0.64,1)", pt = "cubic-bezier(0.3,0,0.2,1)", ve = {
+}, D = 20, we = 4, ve = 8, xt = { small: 280, medium: 320, large: 360 }, yt = 300, N = "cubic-bezier(0.2,0,0,1)", wt = "cubic-bezier(0.34,1.4,0.64,1)", vt = "cubic-bezier(0.3,0,0.2,1)", Te = {
   natural: "auto-cols-[minmax(0,max-content)]",
   equal: "auto-cols-[minmax(0,1fr)]"
-}, bt = "[transition:var(--sb-motion)] motion-reduce:transition-none", gt = "[transition:var(--sb-motion-text)] motion-reduce:transition-none", ht = "[transition:var(--sb-motion-weight)] motion-reduce:transition-none", xt = "[transition:var(--sb-motion-slot)] motion-reduce:transition-none", ye = (a, r, y) => Math.min(y, Math.max(r, a)), wt = (a, r) => typeof a == "function" ? G.createElement(a, {
+}, Tt = "[transition:var(--sb-motion)] motion-reduce:transition-none", Rt = "[transition:var(--sb-motion-text)] motion-reduce:transition-none", It = "[transition:var(--sb-motion-weight)] motion-reduce:transition-none", Nt = "[transition:var(--sb-motion-slot)] motion-reduce:transition-none", Re = (a, o, v) => Math.min(v, Math.max(o, a)), Et = (a, o) => typeof a == "function" ? X.createElement(a, {
   size: D,
-  className: m(r, "shrink-0!")
-}) : G.cloneElement(
+  className: m(o, "shrink-0!")
+}) : X.cloneElement(
   a,
   {
     size: D,
-    className: m(r, "shrink-0!")
+    className: m(o, "shrink-0!")
   }
-), vt = X(
-  "relative border inline-flex bg-neutral-default-default border-neutral-default-default radius-large shadow-[var(--dropshadow-inset-100)]",
+), Ct = H(
+  "relative border inline-flex bg-neutral-default-default border-neutral-default-default shadow-[var(--dropshadow-inset-100)]",
   {
     variants: {
       size: {
@@ -120,7 +121,7 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
       color: "brand"
     }
   }
-), yt = X(
+), Mt = H(
   "absolute top-0 bottom-0 z-10",
   {
     variants: {
@@ -151,7 +152,7 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
       color: "brand"
     }
   }
-), Tt = X("relative flex items-center justify-center", {
+), Bt = H("relative flex items-center justify-center", {
   variants: {
     size: {
       small: h.small.option,
@@ -179,217 +180,222 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
     size: "medium",
     color: "brand"
   }
-}), Ot = (a) => {
+}), kt = (a) => {
   const {
-    size: r = "medium",
-    color: y = "default",
+    size: o = "medium",
+    color: v = "default",
     options: E,
-    value: Re,
-    name: H,
-    ariaLabel: Ie,
-    onChange: Ne,
-    icon: P,
-    allowExpand: Q,
-    equalWidth: Ee,
+    value: Ne,
+    name: Q,
+    ariaLabel: Ee,
+    ariaLabelledBy: Ce,
+    ariaDescribedBy: Me,
+    onChange: Be,
+    icon: F,
+    allowExpand: Y,
+    equalWidth: Le,
     overflow: C = "truncate",
-    collapseAt: Ce,
-    disableAnimation: Me = !1,
-    animationDuration: Oe,
-    animationIntensity: Le,
-    disabled: $ = !1,
-    className: Se,
-    pillClassName: ze,
-    iconClassName: $e,
-    optionClassName: _e,
-    optionIconClassName: Be
-  } = a, je = `segmented-${nt()}`, Y = f(null), Z = f(null), J = f(null), ee = f(null), _ = f([]), [U, ke] = S(null), te = f(null), T = f(!1), M = f(null), W = f(!1), [b, Ae] = S(!1), [ne, Ve] = S(null), [F, oe] = S(!1), [q, re] = S(!1), le = f(0), O = f(null), De = it(), i = Me || De, c = i ? 0 : ye(Oe ?? ft, 0, 2e3), R = i ? 0 : ye(Le ?? 1, 0, 2), ae = Ee ?? (Q === !0 ? !1 : Q === !1 ? !0 : void 0), w = ae === "fill", B = ae === !0, I = C === "scroll" && !w, L = C === "collapse", Pe = C === "truncate" || C === "scroll" && w, se = E.every((e) => !!(e.icon ?? P)), Ue = Ce ?? dt[r], K = L && se && ne !== null && ne < Ue, v = $ ? "disabled" : ut[y] ?? y, l = Math.max(E.findIndex((e) => e.value === Re), 0), We = w ? "w-full" : "w-max max-w-full", Fe = I ? "overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "", qe = I && !B ? "auto-cols-max" : w || B ? ve.equal : ve.natural, Ke = i ? "none" : `color ${c}ms ${N}`, Ge = i ? "none" : `font-weight ${c}ms ${N}`, Xe = i ? "none" : `width ${c}ms ${N}, opacity ${c}ms ${N}`, ie = q ? Math.round(c * 0.4) : c, He = i ? "none" : `left ${ie}ms ${N}, right ${ie}ms ${N}, transform ${Math.round(F ? c * 0.4 : c * 0.9)}ms ${F ? pt : mt}`, Qe = le.current * 10 * R, Ye = F && R > 0 ? `translateX(${Qe}px) scaleX(${1 + 0.05 * R}) scaleY(${1 - 0.05 * R})` : void 0, ce = (e) => {
-    te.current = e, ke(
+    collapseAt: Oe,
+    disableAnimation: Se = !1,
+    animationDuration: ze,
+    animationIntensity: $e,
+    disabled: z = !1,
+    className: _e,
+    pillClassName: je,
+    iconClassName: ke,
+    optionClassName: Ae,
+    optionIconClassName: Ve
+  } = a, De = `segmented-${st()}`, P = dt(), Z = Ce ?? P?.labelledBy, Fe = Me ?? P?.describedBy, Pe = P?.required || void 0, J = f(null), ee = f(null), te = f(null), ne = f(null), $ = f([]), [q, qe] = O(null), re = f(null), T = f(!1), M = f(null), U = f(!1), [b, Ue] = O(!1), [oe, We] = O(null), [W, le] = O(!1), [K, ae] = O(!1), ie = f(0), B = f(null), Ke = bt(), s = Se || Ke, c = s ? 0 : Re(ze ?? yt, 0, 2e3), R = s ? 0 : Re($e ?? 1, 0, 2), se = Le ?? (Y === !0 ? !1 : Y === !1 ? !0 : void 0), y = se === "fill", _ = se === !0, I = C === "scroll" && !y, L = C === "collapse", Ge = C === "truncate" || C === "scroll" && y, ce = E.every((e) => !!(e.icon ?? F)), Xe = Oe ?? xt[o], G = L && ce && oe !== null && oe < Xe, w = z ? "disabled" : ht[v] ?? v, l = Math.max(E.findIndex((e) => e.value === Ne), 0), He = y ? "w-full" : "w-max max-w-full", Qe = I ? "overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "", Ye = I && !_ ? "auto-cols-max" : y || _ ? Te.equal : Te.natural, Ze = s ? "none" : `color ${c}ms ${N}`, Je = s ? "none" : `font-weight ${c}ms ${N}`, et = s ? "none" : `width ${c}ms ${N}, opacity ${c}ms ${N}`, de = K ? Math.round(c * 0.4) : c, tt = s ? "none" : `left ${de}ms ${N}, right ${de}ms ${N}, transform ${Math.round(W ? c * 0.4 : c * 0.9)}ms ${W ? vt : wt}`, nt = ie.current * 10 * R, rt = W && R > 0 ? `translateX(${nt}px) scaleX(${1 + 0.05 * R}) scaleY(${1 - 0.05 * R})` : void 0, ue = (e) => {
+    re.current = e, qe(
       (t) => t && t.left === e.left && t.right === e.right ? t : e
     );
-  }, ue = () => {
+  }, fe = () => {
     if (!T.current) return;
     T.current = !1;
     const e = M.current;
-    M.current = null, e && (re(!0), ce(e));
+    M.current = null, e && (ae(!0), ue(e));
   };
   V(() => {
-    const e = J.current;
+    const e = te.current;
     if (!L || !e) return;
     const t = () => {
-      const s = e.getBoundingClientRect().width;
-      Ve((p) => p === s ? p : s);
+      const i = e.getBoundingClientRect().width;
+      We((p) => p === i ? p : i);
     };
     t();
-    const o = new ResizeObserver(t);
-    return o.observe(e), () => o.disconnect();
+    const r = new ResizeObserver(t);
+    return r.observe(e), () => r.disconnect();
   }, [L]), V(() => {
-    if (O.current === null) {
-      O.current = l;
+    if (B.current === null) {
+      B.current = l;
       return;
     }
-    O.current !== l && (le.current = l > O.current ? 1 : -1, O.current = l, M.current = null, T.current = !1, W.current = !i);
-  }, [l, i]);
-  const de = f(null), { bind: Ze, ref: Je } = ot({
+    B.current !== l && (ie.current = l > B.current ? 1 : -1, B.current = l, M.current = null, T.current = !1, U.current = !s);
+  }, [l, s]);
+  const me = f(null), { bind: ot, ref: lt } = ct({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" },
     disabled: !I
-  }), fe = (e, t) => e.icon ?? (t ? P : void 0) ? D + (e.label != null && !K ? xe : 0) : 0;
+  }), pe = (e, t) => e.icon ?? (t ? F : void 0) ? D + (e.label != null && !G ? we : 0) : 0;
   V(() => {
-    const e = Z.current, t = _.current[l];
+    const e = ee.current, t = $.current[l];
     if (!e || !t) return;
-    const o = de.current, s = !w && !B && o !== null && o !== l ? E.map(
-      (u, x) => fe(u, x === l) - fe(u, x === o)
-    ) : null, p = (u = !1) => {
+    const r = me.current, i = !y && !_ && r !== null && r !== l ? E.map(
+      (d, x) => pe(d, x === l) - pe(d, x === r)
+    ) : null, p = (d = !1) => {
       const x = e.getBoundingClientRect(), j = t.getBoundingClientRect();
       let k = {
         left: j.left - x.left,
         right: x.right - j.right
       };
-      if (u && s) {
-        let pe = 0, be = 0;
-        s.forEach((ge, he) => {
-          he < l ? pe += ge : he > l && (be += ge);
-        }), k = { left: k.left + pe, right: k.right + be };
+      if (d && i) {
+        let ge = 0, he = 0;
+        i.forEach((xe, ye) => {
+          ye < l ? ge += xe : ye > l && (he += xe);
+        }), k = { left: k.left + ge, right: k.right + he };
       }
-      const A = ct(
-        te.current,
+      const A = gt(
+        re.current,
         k,
         T.current
       );
-      A.pending && (M.current = A.pending), A.commit && ce(A.commit);
+      A.pending && (M.current = A.pending), A.commit && ue(A.commit);
     };
-    p(!0), de.current = l;
+    p(!0), me.current = l;
     const g = new ResizeObserver(() => p());
-    return g.observe(e), _.current.forEach((u) => {
-      u && g.observe(u);
+    return g.observe(e), $.current.forEach((d) => {
+      d && g.observe(d);
     }), () => g.disconnect();
   }, [
     l,
     E.length,
-    r,
-    w,
-    B,
+    o,
+    y,
+    _,
     C,
-    K
+    G
   ]), V(() => {
-    W.current && (W.current = !1, T.current = !0);
-  }, [l, i]), z(() => {
-    U && !b && Ae(!0);
-  }, [U, b]), z(() => {
-    if (!q) return;
+    U.current && (U.current = !1, T.current = !0);
+  }, [l, s]), S(() => {
+    q && !b && Ue(!0);
+  }, [q, b]), S(() => {
+    if (!K) return;
     const e = window.setTimeout(
-      () => re(!1),
+      () => ae(!1),
       Math.max(80, Math.round(c * 0.4))
     );
     return () => window.clearTimeout(e);
-  }, [q, c]), z(() => {
-    const e = ee.current;
+  }, [K, c]), S(() => {
+    const e = ne.current;
     if (!e) return;
-    const t = (o) => {
-      o.propertyName !== "left" && o.propertyName !== "right" || ue();
+    const t = (r) => {
+      r.propertyName !== "left" && r.propertyName !== "right" || fe();
     };
     return e.addEventListener("transitionend", t), () => e.removeEventListener("transitionend", t);
-  }), z(() => {
-    if (i || !T.current) return;
+  }), S(() => {
+    if (s || !T.current) return;
     let e, t;
-    return R > 0 && (oe(!0), e = window.setTimeout(
-      () => oe(!1),
+    return R > 0 && (le(!0), e = window.setTimeout(
+      () => le(!1),
       Math.max(80, Math.round(c * 0.45))
-    )), t = window.setTimeout(ue, c + 80), () => {
+    )), t = window.setTimeout(fe, c + 80), () => {
       e !== void 0 && window.clearTimeout(e), t !== void 0 && window.clearTimeout(t), M.current = null;
     };
-  }, [l, i, c, R]), z(() => {
+  }, [l, s, c, R]), S(() => {
     if (!I) return;
-    const e = Y.current, t = _.current[l];
+    const e = J.current, t = $.current[l];
     if (!e || !t) return;
-    const o = e.getBoundingClientRect(), s = t.getBoundingClientRect(), p = b && !i ? "smooth" : "auto", g = s.right - o.right + we, u = o.left - s.left + we;
-    g > 0 ? e.scrollBy({ left: g, behavior: p }) : u > 0 && e.scrollBy({ left: -u, behavior: p });
-  }, [I, l, b, i]);
-  const et = {
-    "--sb-motion": b ? He : "none",
-    "--sb-motion-text": b ? Ke : "none",
-    "--sb-motion-weight": b ? Ge : "none",
-    "--sb-motion-slot": b ? Xe : "none"
-  }, me = /* @__PURE__ */ d.jsx(
+    const r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), p = b && !s ? "smooth" : "auto", g = i.right - r.right + ve, d = r.left - i.left + ve;
+    g > 0 ? e.scrollBy({ left: g, behavior: p }) : d > 0 && e.scrollBy({ left: -d, behavior: p });
+  }, [I, l, b, s]);
+  const at = {
+    "--sb-motion": b ? tt : "none",
+    "--sb-motion-text": b ? Ze : "none",
+    "--sb-motion-weight": b ? Je : "none",
+    "--sb-motion-slot": b ? et : "none"
+  }, be = /* @__PURE__ */ u.jsx(
     "div",
     {
       ref: (e) => {
-        Y.current = e, Je.current = e;
+        J.current = e, lt.current = e;
       },
       role: "radiogroup",
-      "aria-label": Ie ?? H,
-      "aria-disabled": $ || void 0,
+      "aria-labelledby": Z,
+      "aria-label": Z ? void 0 : Ee ?? Q,
+      "aria-describedby": Fe,
+      "aria-required": Pe,
+      "aria-disabled": z || void 0,
       className: m(
-        vt({ size: r, color: v }),
-        We,
-        Fe,
-        Se
+        Ct({ size: o, color: w }),
+        He,
+        Qe,
+        _e
       ),
-      style: et,
-      ...Ze,
-      children: /* @__PURE__ */ d.jsxs(
+      style: at,
+      ...ot,
+      children: /* @__PURE__ */ u.jsxs(
         "div",
         {
-          ref: Z,
+          ref: ee,
           className: m(
             "relative grid grid-flow-col items-stretch",
-            qe,
-            w && "w-full",
+            Ye,
+            y && "w-full",
             I && "w-max"
           ),
           children: [
-            /* @__PURE__ */ d.jsx(
+            /* @__PURE__ */ u.jsx(
               "div",
               {
-                ref: ee,
+                ref: ne,
                 "aria-hidden": !0,
                 className: m(
-                  yt({ size: r, color: v }),
+                  Mt({ size: o, color: w }),
                   "pointer-events-none",
-                  b && bt,
-                  ze
+                  b && Tt,
+                  je
                 ),
                 style: {
-                  ...U ?? {},
-                  transform: Ye
+                  ...q ?? {},
+                  transform: rt
                 }
               }
             ),
             E.map((e, t) => {
-              const o = t === l, s = e.icon ?? (o ? P : void 0), p = e.label != null && !K, g = Pe || L && !se ? "truncate" : "text-nowrap", u = o ? m(n[v].icon, $e) : m(n[v].optionIcon, Be), x = /* @__PURE__ */ d.jsxs(
+              const r = t === l, i = e.icon ?? (r ? F : void 0), p = e.label != null && !G, g = Ge || L && !ce ? "truncate" : "text-nowrap", d = r ? m(n[w].icon, ke) : m(n[w].optionIcon, Ve), x = /* @__PURE__ */ u.jsxs(
                 "label",
                 {
                   ref: (j) => {
-                    _.current[t] = j;
+                    $.current[t] = j;
                   },
                   title: e.tooltipText ? void 0 : e.label ?? e.ariaLabel,
                   className: m(
-                    Tt({ size: r, color: v }),
+                    Bt({ size: o, color: w }),
                     "relative z-20 min-w-0 select-none",
-                    gt,
-                    o ? n[v].pillText : n[v].option,
+                    Rt,
+                    r ? n[w].pillText : n[w].option,
                     "has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-2 has-[input:focus-visible]:outline-[color:var(--border-brand-onneutral-default)]",
-                    _e
+                    Ae
                   ),
                   children: [
-                    /* @__PURE__ */ d.jsx(
+                    /* @__PURE__ */ u.jsx(
                       "span",
                       {
-                        "aria-hidden": !s,
-                        className: m("flex items-center overflow-hidden shrink-0", xt),
+                        "aria-hidden": !i,
+                        className: m("flex items-center overflow-hidden shrink-0", Nt),
                         style: {
-                          width: s ? D + (p ? xe : 0) : 0,
-                          opacity: s ? 1 : 0
+                          width: i ? D + (p ? we : 0) : 0,
+                          opacity: i ? 1 : 0
                         },
-                        children: s ? wt(s, u) : null
+                        children: i ? Et(i, d) : null
                       }
                     ),
-                    p && /* @__PURE__ */ d.jsxs(
+                    p && /* @__PURE__ */ u.jsxs(
                       "span",
                       {
                         className: "grid grid-cols-[minmax(0,1fr)] min-w-0",
                         children: [
-                          /* @__PURE__ */ d.jsx(
+                          /* @__PURE__ */ u.jsx(
                             "span",
                             {
                               "aria-hidden": !0,
@@ -400,7 +406,7 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
                               children: e.label
                             }
                           ),
-                          /* @__PURE__ */ d.jsx(
+                          /* @__PURE__ */ u.jsx(
                             "span",
                             {
                               className: m(
@@ -409,8 +415,8 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
                                 // `text-center` keeps the shorter regular weight centered
                                 // inside the semibold reserve.
                                 "col-start-1 row-start-1 min-w-0 text-center",
-                                ht,
-                                o ? "font-semibold" : "font-normal",
+                                It,
+                                r ? "font-semibold" : "font-normal",
                                 g
                               ),
                               children: e.label
@@ -419,35 +425,35 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
                         ]
                       }
                     ),
-                    /* @__PURE__ */ d.jsx(
+                    /* @__PURE__ */ u.jsx(
                       "input",
                       {
                         type: "radio",
-                        name: je,
+                        name: De,
                         value: String(e.value),
-                        checked: o,
-                        disabled: $,
-                        onChange: () => Ne?.(H, e.value),
+                        checked: r,
+                        disabled: z,
+                        onChange: () => Be?.(Q, e.value),
                         "aria-label": e.ariaLabel ?? e.label,
                         className: m(
                           "absolute inset-0 z-30 m-0 h-full w-full opacity-0",
-                          $ ? "cursor-default" : "cursor-pointer"
+                          z ? "cursor-default" : "cursor-pointer"
                         )
                       }
                     )
                   ]
                 }
               );
-              return e.tooltipText ? /* @__PURE__ */ d.jsx(rt, { title: e.tooltipText, asChild: !0, children: x }, e.value) : /* @__PURE__ */ d.jsx(G.Fragment, { children: x }, e.value);
+              return e.tooltipText ? /* @__PURE__ */ u.jsx(ut, { title: e.tooltipText, asChild: !0, children: x }, e.value) : /* @__PURE__ */ u.jsx(X.Fragment, { children: x }, e.value);
             })
           ]
         }
       )
     }
   );
-  return L ? /* @__PURE__ */ d.jsx("div", { ref: J, className: "w-full min-w-0", children: me }) : me;
+  return L ? /* @__PURE__ */ u.jsx("div", { ref: te, className: "w-full min-w-0", children: be }) : be;
 };
 export {
-  Ot as SegmentedButton,
-  Ot as default
+  kt as SegmentedButton,
+  kt as default
 };

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,4 @@
+import { FormFieldProps } from './types';
+declare const FormField: import('react').NamedExoticComponent<FormFieldProps>;
+export default FormField;
+export type { FormFieldProps } from './types';

package/dist/components/FormField/FormFieldContext.d.ts

@@ -0,0 +1,22 @@
+import { FormFieldState } from './types';
+export interface FormFieldContextValue {
+    /** id of the visible label node — use with aria-labelledby */
+    labelId: string | undefined;
+    /** id of the supporting-text / HelperComponent node — use with aria-describedby */
+    helperId: string | undefined;
+    /** Convenience: labelId when a label is rendered */
+    labelledBy: string | undefined;
+    /** Convenience: helperId when supporting text is shown */
+    describedBy: string | undefined;
+    /** id for a native control (htmlFor / control id) */
+    controlId: string;
+    state: FormFieldState;
+    disabled: boolean;
+    required: boolean;
+}
+export declare const FormFieldContext: import('react').Context<FormFieldContextValue | null>;
+/**
+ * Optional FormField context. Returns `null` outside a FormField.
+ * Controls (e.g. SegmentedButton) should fall back to their own a11y props.
+ */
+export declare function useFormField(): FormFieldContextValue | null;

package/dist/components/FormField/types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type FormFieldState = "default" | "error" | "success" | "warning";
+export interface FormFieldProps {
+    label?: string;
+    supportingText?: ReactNode | (() => ReactNode);
+    /**
+     * When true, reserves space and renders HelperComponent.
+     * Defaults to true when `supportingText` is provided.
+     */
+    showSupportingText?: boolean;
+    /** Validation / feedback state for label + helper. Independent of child visual variants. */
+    state?: FormFieldState;
+    disabled?: boolean;
+    required?: boolean;
+    /**
+     * Associates the label with a native control via `htmlFor`.
+     * If omitted, a stable id is generated and exposed on context as `controlId`
+     * (for inputs that opt in). Radiogroups should use `labelledBy` instead.
+     */
+    htmlFor?: string;
+    children: ReactNode;
+    className?: string;
+}

package/dist/components/SegmentedButton/SegmentedButton.d.ts

@@ -20,8 +20,17 @@ export interface SegmentedButtonProps {
     /**
      * Accessible name for the radio group. Falls back to `name`.
      * Prefer a human-readable label — `name` is often a form key like `"n"`.
+     * Ignored when `ariaLabelledBy` (or FormField context `labelledBy`) is set.
      */
     ariaLabel?: string;
+    /**
+     * Overrides FormField context `labelledBy`. When set, `aria-label` is omitted.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Overrides FormField context `describedBy` (supporting text).
+     */
+    ariaDescribedBy?: string;
     size?: "small" | "medium" | "large";
     /**
      * Visual color variant.

package/dist/components/Shared/HelperComponent.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { ComponentVariant } from './types';
 export interface HelperTextProps {
     ref?: React.RefObject<HTMLDivElement | null>;
+    id?: string;
     children: React.ReactNode | string;
     variant: ComponentVariant;
     className?: string;

package/dist/exports/FormField.d.ts

@@ -0,0 +1,4 @@
+export { default } from '../components/FormField/FormField';
+export { default as FormField } from '../components/FormField/FormField';
+export type { FormFieldProps, FormFieldState } from '../components/FormField/types';
+export { useFormField, FormFieldContext, type FormFieldContextValue, } from '../components/FormField/FormFieldContext';

package/dist/index.d.ts

@@ -92,6 +92,8 @@ export { default as Popover } from './exports/Popover';
 export { default as Skeleton } from './exports/Skeleton';
 export { resolveSkeletonTextLength } from './exports/Skeleton';
 export { default as SegmentedButton } from './exports/SegmentedButton';
+export { default as FormField } from './exports/FormField';
+export { useFormField } from './exports/FormField';
 export { default as ImageGallery } from './exports/ImageGallery';
 export { default as Image } from './exports/Image';
 export { default as Toast } from './exports/Toast';
@@ -184,6 +186,7 @@ export type { ToggleProps } from './exports/Toggle';
 export type { SwitchProps } from './exports/Toggle';
 export type { SkeletonProps, SkeletonTextLength } from './exports/Skeleton';
 export type { SegmentedButtonProps, SegmentedButtonOption, SegmentedButtonColor } from './exports/SegmentedButton';
+export type { FormFieldProps, FormFieldState, FormFieldContextValue, } from './exports/FormField';
 export type { DatePickerProps } from './exports/DatePicker';
 export type { DatePickerPillProps } from './exports/DatePickerPill';
 export type { CalendarChangeResult, CalendarDateInput, CalendarEvent, CalendarEventChange, CalendarEventColor, CalendarEventColorValue, CalendarEventRenderContext, CalendarProps, CalendarRange, CalendarRangeSelection, CalendarSnapMinutes, CalendarView, ResolvedCalendarEvent, } from './exports/Calendar';

package/dist/prometeo-design-system.es.js

@@ -1,6 +1,6 @@
 import { u as Le, a as Ie, b as Ne, c as De } from "./useDrawerControl-B3mYMhai.js";
 import q from "./HelperComponent.es.js";
-import { DEFAULT_PAGE_SIZE_OPTIONS as Ve, DEFAULT_ROW_INTERACTION as Re, HeadRow as Oe, HeaderCell as Pe, RowCell as ke, Table as Me, TableBody as _e, LegacyTableBody as je, LegacyTableCaption as Be, LegacyTableCell as He, TableFooter as Ee, LegacyTableFooter as Fe, LegacyTableHead as ze, TableHeader as Ue, LegacyTableHeader as Ge, LegacyTable as We, TableRow as Ze, LegacyTableRow as $e } from "./Table.es.js";
+import { DEFAULT_PAGE_SIZE_OPTIONS as Ve, DEFAULT_ROW_INTERACTION as Re, HeadRow as Oe, HeaderCell as Pe, RowCell as ke, Table as Me, TableBody as _e, LegacyTableBody as je, LegacyTableCaption as Be, LegacyTableCell as Fe, TableFooter as He, LegacyTableFooter as Ee, LegacyTableHead as ze, TableHeader as Ue, LegacyTableHeader as Ge, LegacyTable as We, TableRow as Ze, LegacyTableRow as $e } from "./Table.es.js";
 import { Tab as qe, TabLinkItem as Je, TabLinks as Ke, default as Xe } from "./Tabs.es.js";
 import { j as o } from "./jsx-runtime-CqQglQKg.js";
 import { g as A } from "./utils-X4-h3cum.js";
@@ -27,71 +27,73 @@ import { CodeInput as Vt, CodeInput as Rt } from "./CodeInput.es.js";
 import { default as Pt } from "./ColorPicker.es.js";
 import { D as Mt } from "./DatePicker-CoRJVBwy.js";
 import { default as jt } from "./DatePickerPill.es.js";
-import { D as Ht, D as Et, u as Ft, a as zt } from "./useModalControl-BAUI_Hwx.js";
+import { D as Ft, D as Ht, u as Et, a as zt } from "./useModalControl-BAUI_Hwx.js";
 import { Dialog as Gt, useDialogControl as Wt, useDialogState as Zt } from "./Dialog.es.js";
 import { default as Qt } from "./Divider.es.js";
 import { default as Jt, default as Kt } from "./Drawer.es.js";
 import { D as Yt } from "./DrawerMobile-D4m9ndx0.js";
 import { default as tr } from "./FAButton.es.js";
-import { default as ar } from "./Header.es.js";
-import { default as nr } from "./Image.es.js";
-import { I as sr } from "./ImageGallery-COXs6hwn.js";
-import { default as ur } from "./Input.es.js";
-import { default as cr } from "./InputLegacy.es.js";
-import { InputMultiple as mr } from "./InputMultiple.es.js";
-import { default as hr } from "./InputPassword.es.js";
-import { default as br } from "./InputSearch.es.js";
-import { default as vr } from "./Link.es.js";
-import { default as yr } from "./ListItem.es.js";
-import { default as Sr } from "./Logo.es.js";
-import { Menu as Lr, useMenuControl as Ir, useMenuState as Nr } from "./Menu.es.js";
-import { MenuList as Ar } from "./MenuList.es.js";
-import { default as Rr } from "./Modal.es.js";
-import { ModuleItem as Pr } from "./ModuleItem.es.js";
-import { NavigationRail as Mr } from "./NavigationRail.es.js";
-import { default as jr } from "./Pagination.es.js";
-import { PlainTooltip as Hr, PlainTooltip as Er } from "./PlainTooltip.es.js";
-import { default as zr } from "./Popover.es.js";
-import { default as Gr } from "./PriorityChip.es.js";
-import { DEFAULT_WARNING_THRESHOLD as Zr, ProgressBar as $r, useDateProgress as Qr, useQuantityProgress as qr } from "./ProgressBar.es.js";
-import { RecurrentDatePicker as Kr } from "./RecurrentDatePicker.es.js";
-import { DEFAULT_PREVIEW_COUNT as Yr, RecurrentDatePickerRRule as ea } from "./RecurrentDatePickerRRule.es.js";
-import { SearchBar as ra } from "./SearchBar.es.js";
-import { SegmentedButton as oa } from "./SegmentedButton.es.js";
-import { default as la } from "./SelectSearch.es.js";
-import { Sidebar as ia } from "./Sidebar.es.js";
-import { SidebarItem as da } from "./SidebarItem.es.js";
-import { default as fa } from "./Spinner.es.js";
-import { S as pa } from "./Star-DKhRZoa9.js";
-import { Steps as xa } from "./Steps.es.js";
-import { Subtitle as ga } from "./Subtitle.es.js";
-import { T as Ca } from "./usePyrionLayout-N9l4oGVr.js";
-import { TertiaryLevelSidebar as wa } from "./TertiaryLevelSidebar.es.js";
-import { TextArea as Ta, TextArea as La } from "./TextArea.es.js";
-import { Title as Na } from "./Title.es.js";
-import { default as Aa, toastpyrion as Va } from "./Toast.es.js";
-import { default as Oa } from "./ToastProvider.es.js";
-import { UserSidebarItem as ka } from "./UserSidebarItem.es.js";
-import { AttachInput as _a } from "./AttachInput.es.js";
-import { A as Ba } from "./AvatarBase-BM6Doe0z.js";
-import { default as Ea } from "./Button.es.js";
-import { CardProfile as za } from "./CardProfile.es.js";
-import { default as Ga } from "./Check.es.js";
-import { default as Za } from "./CheckBox.es.js";
-import { Collapsible as Qa } from "./Collapsible.es.js";
-import { DATAVIZ as Ja } from "./Dataviz.es.js";
-import { default as Xa } from "./IconButton.es.js";
-import { ProfilePictureUpload as eo } from "./ProfilePictureUpload.es.js";
-import { RadioButton as ro } from "./RadioButton.es.js";
-import { S as oo } from "./Skeleton-C8OCBBLq.js";
-import { SplitButton as lo } from "./SplitButton.es.js";
-import { StarRating as io } from "./StarRating.es.js";
-import { Switch as co, Switch as fo } from "./Switch.es.js";
-import { resolveSkeletonTextLength as po } from "./Skeleton.es.js";
-import { useDragScroll as xo } from "./useDragScroll.es.js";
-import { u as go } from "./useDrawerCollapsed-CJOXf2Fw.js";
-import { useScrollable as Co } from "./useScrollable.es.js";
-const H = ({
+import { FormField as ar } from "./FormField.es.js";
+import { default as nr } from "./Header.es.js";
+import { default as sr } from "./Image.es.js";
+import { I as ur } from "./ImageGallery-COXs6hwn.js";
+import { default as cr } from "./Input.es.js";
+import { default as mr } from "./InputLegacy.es.js";
+import { InputMultiple as hr } from "./InputMultiple.es.js";
+import { default as br } from "./InputPassword.es.js";
+import { default as vr } from "./InputSearch.es.js";
+import { default as yr } from "./Link.es.js";
+import { default as Sr } from "./ListItem.es.js";
+import { default as Lr } from "./Logo.es.js";
+import { Menu as Nr, useMenuControl as Dr, useMenuState as Ar } from "./Menu.es.js";
+import { MenuList as Rr } from "./MenuList.es.js";
+import { default as Pr } from "./Modal.es.js";
+import { ModuleItem as Mr } from "./ModuleItem.es.js";
+import { NavigationRail as jr } from "./NavigationRail.es.js";
+import { default as Fr } from "./Pagination.es.js";
+import { PlainTooltip as Er, PlainTooltip as zr } from "./PlainTooltip.es.js";
+import { default as Gr } from "./Popover.es.js";
+import { default as Zr } from "./PriorityChip.es.js";
+import { DEFAULT_WARNING_THRESHOLD as Qr, ProgressBar as qr, useDateProgress as Jr, useQuantityProgress as Kr } from "./ProgressBar.es.js";
+import { RecurrentDatePicker as Yr } from "./RecurrentDatePicker.es.js";
+import { DEFAULT_PREVIEW_COUNT as ta, RecurrentDatePickerRRule as ra } from "./RecurrentDatePickerRRule.es.js";
+import { SearchBar as oa } from "./SearchBar.es.js";
+import { SegmentedButton as la } from "./SegmentedButton.es.js";
+import { default as ia } from "./SelectSearch.es.js";
+import { Sidebar as da } from "./Sidebar.es.js";
+import { SidebarItem as fa } from "./SidebarItem.es.js";
+import { default as pa } from "./Spinner.es.js";
+import { S as xa } from "./Star-DKhRZoa9.js";
+import { Steps as ga } from "./Steps.es.js";
+import { Subtitle as Ca } from "./Subtitle.es.js";
+import { T as wa } from "./usePyrionLayout-N9l4oGVr.js";
+import { TertiaryLevelSidebar as Ta } from "./TertiaryLevelSidebar.es.js";
+import { TextArea as Ia, TextArea as Na } from "./TextArea.es.js";
+import { Title as Aa } from "./Title.es.js";
+import { default as Ra, toastpyrion as Oa } from "./Toast.es.js";
+import { default as ka } from "./ToastProvider.es.js";
+import { UserSidebarItem as _a } from "./UserSidebarItem.es.js";
+import { AttachInput as Ba } from "./AttachInput.es.js";
+import { A as Ha } from "./AvatarBase-BM6Doe0z.js";
+import { default as za } from "./Button.es.js";
+import { CardProfile as Ga } from "./CardProfile.es.js";
+import { default as Za } from "./Check.es.js";
+import { default as Qa } from "./CheckBox.es.js";
+import { Collapsible as Ja } from "./Collapsible.es.js";
+import { DATAVIZ as Xa } from "./Dataviz.es.js";
+import { default as eo } from "./IconButton.es.js";
+import { ProfilePictureUpload as ro } from "./ProfilePictureUpload.es.js";
+import { RadioButton as oo } from "./RadioButton.es.js";
+import { S as lo } from "./Skeleton-C8OCBBLq.js";
+import { SplitButton as io } from "./SplitButton.es.js";
+import { StarRating as co } from "./StarRating.es.js";
+import { Switch as mo, Switch as po } from "./Switch.es.js";
+import { resolveSkeletonTextLength as xo } from "./Skeleton.es.js";
+import { useDragScroll as go } from "./useDragScroll.es.js";
+import { u as Co } from "./useDrawerCollapsed-CJOXf2Fw.js";
+import { u as wo } from "./FormFieldContext-H8_osEEP.js";
+import { useScrollable as To } from "./useScrollable.es.js";
+const F = ({
   secondaryActionsSlot: e,
   primaryActionsSlot: r,
   className: a
@@ -99,12 +101,12 @@ const H = ({
   /* @__PURE__ */ o.jsx("div", { className: "flex items-center gap-1 flex-1", children: e }),
   /* @__PURE__ */ o.jsx("div", { className: "flex items-center gap-1 min-h-full overflow-x-scroll prometeo-scrollbar-none max-w-full", children: r })
 ] });
-H.displayName = "ActionInput.Footer";
-const E = ({
+F.displayName = "ActionInput.Footer";
+const H = ({
   children: e,
   className: r
 }) => /* @__PURE__ */ o.jsx("div", { className: h("shrink-0 p-3 pb-0 z-10 prometeo-scrollbar-thin-weak overflow-auto", r), children: e });
-E.displayName = "ActionInput.AttachFields";
+H.displayName = "ActionInput.AttachFields";
 const ae = $(
   "transition-all duration-300 ease-in-out border radius-large flex flex-col relative overflow-hidden relative *:z-10",
   {
@@ -136,11 +138,11 @@ function ne(e) {
   let n = null, i = null;
   for (const l of a)
     if (ee(l)) {
-      if (l.type === E && !n) {
+      if (l.type === H && !n) {
         n = l;
         continue;
       }
-      l.type === H && !i && (i = l);
+      l.type === F && !i && (i = l);
     }
   return { attachFields: n, footer: i };
 }
@@ -168,7 +170,7 @@ const Q = K(
       cardBackground: S,
       textArea: P,
       ...k
-    } = e, T = x !== void 0, [L, F] = X(
+    } = e, T = x !== void 0, [L, E] = X(
       () => y ?? ""
     ), z = T ? x : L, M = J.useRef(null), U = j(
       (t) => {
@@ -187,7 +189,7 @@ const Q = K(
       }
       t.style.height = `${b}px`, b > s + 12 && (t.style.alignContent = "start");
     }, [n, l, d, m]), I = (t) => {
-      T || F(t.target.value), f?.(t), v();
+      T || E(t.target.value), f?.(t), v();
     };
     V(() => {
       v();
@@ -244,8 +246,8 @@ const Q = K(
 );
 Q.displayName = "ActionInput";
 const be = Object.assign(Q, {
-  Footer: H,
-  AttachFields: E
+  Footer: F,
+  AttachFields: H
 }), ge = (e) => {
   const r = B(void 0), { asyncMode: a = "fetch_in_open" } = e, n = (t, p, s) => {
     const C = {
@@ -307,7 +309,7 @@ const be = Object.assign(Q, {
       return b && s.push(b), s;
     }, []);
     R(p);
-  }, { displayMode: k = e.multiple ? "chips" : "compact", dropdownOptions: T, overflow: L = "scroll", onChange: F, onClear: z, groupSelection: M, value: U, defaultValue: v, ...I } = e.selectComponentProps || {}, N = {
+  }, { displayMode: k = e.multiple ? "chips" : "compact", dropdownOptions: T, overflow: L = "scroll", onChange: E, onClear: z, groupSelection: M, value: U, defaultValue: v, ...I } = e.selectComponentProps || {}, N = {
     controledSearchValue: i,
     onSearchValueChange: a === "fetch_on_type" ? l : void 0,
     onSearchClear: a === "fetch_on_type" ? () => {
@@ -449,105 +451,106 @@ const be = Object.assign(Q, {
 };
 export {
   be as ActionInput,
-  _a as AttachInput,
+  Ba as AttachInput,
   ot as Avatar,
   nt as AvatarAndSubavatar,
-  Ba as AvatarBase,
+  Ha as AvatarBase,
   st as Badge,
   ve as BadgeLegacy,
   ut as BreadcrumbItem,
   dt as Breadcrumbs,
-  Ea as Button,
+  za as Button,
   ft as Calendar,
   pt as Card,
   ht as CardContent,
   xt as CardFooter,
   bt as CardHeader,
-  za as CardProfile,
+  Ga as CardProfile,
   vt as Chat,
   Tt as ChatCard,
   Ct as ChatViewport,
-  Ga as Check,
-  Za as CheckBox,
+  Za as Check,
+  Qa as CheckBox,
   It as Chip,
   Dt as ChipSelect,
   Vt as CodeInput,
-  Qa as Collapsible,
+  Ja as Collapsible,
   Pt as ColorPicker,
-  Ja as DATAVIZ,
+  Xa as DATAVIZ,
   Ve as DEFAULT_PAGE_SIZE_OPTIONS,
-  Yr as DEFAULT_PREVIEW_COUNT,
+  ta as DEFAULT_PREVIEW_COUNT,
   Re as DEFAULT_ROW_INTERACTION,
-  Zr as DEFAULT_WARNING_THRESHOLD,
+  Qr as DEFAULT_WARNING_THRESHOLD,
   Mt as DatePicker,
   jt as DatePickerPill,
-  Ht as DesktopModal,
+  Ft as DesktopModal,
   Gt as Dialog,
-  Et as DialogModal,
+  Ht as DialogModal,
   Qt as Divider,
   Jt as Drawer,
   Kt as DrawerDesktop,
   Yt as DrawerMobile,
   rt as DropZone,
   tr as FAButton,
+  ar as FormField,
   Oe as HeadRow,
-  ar as Header,
+  nr as Header,
   Pe as HeaderCell,
   q as HelperComponent,
-  Xa as IconButton,
-  nr as Image,
-  sr as ImageGallery,
-  ur as Input,
-  cr as InputLegacy,
-  mr as InputMultiple,
-  hr as InputPassword,
-  br as InputSearch,
-  vr as Link,
-  yr as ListItem,
-  Sr as Logo,
-  Lr as Menu,
-  Ar as MenuList,
-  Rr as Modal,
-  Pr as ModuleItem,
+  eo as IconButton,
+  sr as Image,
+  ur as ImageGallery,
+  cr as Input,
+  mr as InputLegacy,
+  hr as InputMultiple,
+  br as InputPassword,
+  vr as InputSearch,
+  yr as Link,
+  Sr as ListItem,
+  Lr as Logo,
+  Nr as Menu,
+  Rr as MenuList,
+  Pr as Modal,
+  Mr as ModuleItem,
   Ce as NavbarCollapseButton,
-  Mr as NavigationRail,
+  jr as NavigationRail,
   Rt as OtpInput,
-  jr as Pagination,
-  Hr as PlainTooltip,
-  zr as Popover,
-  Gr as PriorityChip,
-  eo as ProfilePictureUpload,
-  $r as ProgressBar,
-  ro as RadioButton,
-  Kr as RecurrentDatePicker,
-  ea as RecurrentDatePickerRRule,
+  Fr as Pagination,
+  Er as PlainTooltip,
+  Gr as Popover,
+  Zr as PriorityChip,
+  ro as ProfilePictureUpload,
+  qr as ProgressBar,
+  oo as RadioButton,
+  Yr as RecurrentDatePicker,
+  ra as RecurrentDatePickerRRule,
   ke as RowCell,
-  ra as SearchBar,
-  oa as SegmentedButton,
+  oa as SearchBar,
+  la as SegmentedButton,
   G as Select,
-  la as SelectSearch,
+  ia as SelectSearch,
   ge as SelectSearchLegacy,
-  ia as Sidebar,
-  da as SidebarItem,
-  oo as Skeleton,
-  fa as Spinner,
-  lo as SplitButton,
-  pa as Star,
-  io as StarRating,
-  xa as Steps,
-  ga as Subtitle,
-  co as Switch,
+  da as Sidebar,
+  fa as SidebarItem,
+  lo as Skeleton,
+  pa as Spinner,
+  io as SplitButton,
+  xa as Star,
+  co as StarRating,
+  ga as Steps,
+  Ca as Subtitle,
+  mo as Switch,
   qe as Tab,
   Je as TabLinkItem,
   Ke as TabLinks,
-  Ca as TabSwitch,
+  wa as TabSwitch,
   Me as Table,
   _e as TableBody,
   je as TableBodyLegacy,
   Be as TableCaption,
-  He as TableCell,
-  Ee as TableFooter,
-  Fe as TableFooterLegacy,
+  Fe as TableCell,
+  He as TableFooter,
+  Ee as TableFooterLegacy,
   ze as TableHeadLegacy,
   Ue as TableHeader,
   Ge as TableHeaderLegacy,
@@ -555,35 +558,36 @@ export {
   Ze as TableRow,
   $e as TableRowLegacy,
   Xe as Tabs,
-  wa as TertiaryLevelSidebar,
-  Ta as TextArea,
-  La as TextareaInput,
-  Na as Title,
-  Aa as Toast,
-  Oa as ToastProvider,
-  fo as Toggle,
-  Er as Tooltip,
-  ka as UserSidebarItem,
+  Ta as TertiaryLevelSidebar,
+  Ia as TextArea,
+  Na as TextareaInput,
+  Aa as Title,
+  Ra as Toast,
+  ka as ToastProvider,
+  po as Toggle,
+  zr as Tooltip,
+  _a as UserSidebarItem,
   yt as groupMessagesBySender,
-  po as resolveSkeletonTextLength,
-  Va as toastpyrion,
+  xo as resolveSkeletonTextLength,
+  Oa as toastpyrion,
   wt as useChatBursts,
   ye as useClickOutside,
-  Qr as useDateProgress,
+  Jr as useDateProgress,
   Wt as useDialogControl,
   Zt as useDialogState,
-  xo as useDragScroll,
-  go as useDrawerCollapsed,
+  go as useDragScroll,
+  Co as useDrawerCollapsed,
   Le as useDrawerControl,
   Ie as useDrawerDesktop,
   Ne as useDrawerMobile,
   De as useDrawerState,
+  wo as useFormField,
   et as useIsMobile,
-  Ir as useMenuControl,
-  Nr as useMenuState,
-  Ft as useModalControl,
+  Dr as useMenuControl,
+  Ar as useMenuState,
+  Et as useModalControl,
   zt as useModalState,
   we as usePopover,
-  qr as useQuantityProgress,
-  Co as useScrollable
+  Kr as useQuantityProgress,
+  To as useScrollable
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "9.3.0",
+  "version": "9.4.1",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -286,6 +286,10 @@
       "types": "./dist/SegmentedButton.d.ts",
       "import": "./dist/SegmentedButton.es.js"
     },
+    "./FormField": {
+      "types": "./dist/FormField.d.ts",
+      "import": "./dist/FormField.es.js"
+    },
     "./DatePicker": {
       "types": "./dist/DatePicker.d.ts",
       "import": "./dist/DatePicker.es.js"