@ogcio/design-system-react 1.11.2 → 1.12.0

package/dist/accordion/accordion-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as d, Fragment as u, jsx as i } from "react/jsx-runtime";
 import { useState as y, useRef as b } from "react";
-import { c as h } from "../index-DNkhmzZp.js";
+import { c as h } from "../index-CB-zPpNk.js";
 import { cn as r } from "../cn.js";
 import { Icon as w } from "../icon/icon.js";
 const I = h({

package/dist/alert/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import { useState as D } from "react";
-import { c as h } from "../index-DNkhmzZp.js";
+import { c as h } from "../index-CB-zPpNk.js";
 import { cn as v } from "../cn.js";
 import { translate as k } from "../i18n/utility.js";
 import { Icon as w } from "../icon/icon.js";

package/dist/autocomplete/autocomplete.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as G, jsx as E } from "react/jsx-runtime";
-import { useRef as C, useReducer as H, useEffect as m, createElement as j, isValidElement as K, Children as X } from "react";
+import { useRef as C, useReducer as H, Children as j, useEffect as m, createElement as K, isValidElement as X } from "react";
 import { cn as N } from "../cn.js";
 import { InputText as $ } from "../input-text/input-text.js";
 import { Popover as q } from "../popover/popover.js";
@@ -58,8 +58,8 @@ const {
 }, _ = (t) => {
   var r, s;
   const o = ((r = t == null ? void 0 : t.type) == null ? void 0 : r.componentType) || ((s = t == null ? void 0 : t.props) == null ? void 0 : s.__mdxType);
-  return K(t) && o === "AutocompleteItem";
-}, S = (t) => X.toArray(t).filter((o) => _(o)) || [], I = (t, o) => {
+  return X(t) && o === "AutocompleteItem";
+}, S = (t) => j.toArray(t).filter((o) => _(o)) || [], I = (t, o) => {
   var r;
   return (((r = S(t).find((s) => s.props.value === o)) == null ? void 0 : r.props.children) || "").toString();
 }, re = ({
@@ -225,7 +225,7 @@ const {
               ]
             },
             children: /* @__PURE__ */ E(z, { onChange: w, children: f.map(
-              (e, p) => _(e) ? /* @__PURE__ */ j(
+              (e, p) => _(e) ? /* @__PURE__ */ K(
                 F,
                 {
                   ...e.props,

package/dist/button-group/button-group.js

@@ -1,85 +1,85 @@
 "use client";
 import { jsx as p } from "react/jsx-runtime";
-import { createContext as x, useContext as B, useState as I } from "react";
+import { createContext as B, useState as I, useContext as f } from "react";
 import { Button as G } from "../button/button.js";
 import { useDomId as g } from "../hooks/use-dom-id.js";
-const b = x(
+const b = B(
   void 0
-), w = ({
+), v = ({
   value: e,
   children: a,
-  role: n,
-  "aria-checked": r,
-  "aria-label": i
+  role: i,
+  "aria-checked": o,
+  "aria-label": n
 }) => {
-  const o = B(b);
-  if (!o)
+  const r = f(b);
+  if (!r)
     throw new Error("ButtonGroupItem must be used within a ButtonGroup");
   const {
-    selectedValue: d,
-    setSelectedValue: c,
-    size: u,
+    selectedValue: c,
+    setSelectedValue: d,
+    size: s,
     onChange: t,
-    groupId: s,
-    appearance: l
-  } = o, m = d === e, f = () => {
-    c(e), t == null || t(e);
-  }, y = `${s}-${e}`;
+    groupId: l,
+    appearance: u
+  } = r, m = c === e, y = () => {
+    d(e), t == null || t(e);
+  }, x = `${l}-${e}`;
   return /* @__PURE__ */ p(
     G,
     {
       variant: m ? "primary" : "secondary",
-      size: u,
-      appearance: l,
-      onClick: f,
-      id: y,
-      role: n || "radio",
-      "aria-checked": r === void 0 ? m : r,
-      "aria-label": i,
+      size: s,
+      appearance: u,
+      onClick: y,
+      id: x,
+      role: i || "radio",
+      "aria-checked": o === void 0 ? m : o,
+      "aria-label": n,
       type: "button",
       children: a
     }
   );
-}, C = ({
+}, w = ({
   name: e,
   size: a = "medium",
-  appearance: n = "dark",
-  onChange: r,
-  defaultValue: i,
-  children: o,
-  role: d,
-  "aria-labelledby": c,
-  "aria-describedby": u
+  appearance: i = "dark",
+  onChange: o,
+  defaultValue: n,
+  children: r,
+  role: c,
+  "aria-labelledby": d,
+  "aria-describedby": s
 }) => {
-  const [t, s] = I(
-    i
-  ), l = g();
+  const [t, l] = I(
+    n
+  ), u = g();
   return /* @__PURE__ */ p(
     b.Provider,
     {
       value: {
         selectedValue: t,
-        setSelectedValue: s,
+        setSelectedValue: l,
         name: e,
         size: a,
-        onChange: r,
-        groupId: l,
-        appearance: n
+        onChange: o,
+        groupId: u,
+        appearance: i
       },
       children: /* @__PURE__ */ p(
         "div",
         {
           className: "gi-btn-group",
-          role: d || "radiogroup",
-          "aria-labelledby": c,
-          "aria-describedby": u,
-          children: o
+          role: c || "radiogroup",
+          "aria-labelledby": d,
+          "aria-describedby": s,
+          children: r
         }
       )
     }
   );
 };
 export {
-  C as ButtonGroup,
-  w as ButtonGroupItem
+  w as ButtonGroup,
+  v as ButtonGroupItem
 };

package/dist/card/card-next.js

@@ -1,39 +1,39 @@
 "use client";
 import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import { createContext as l, useContext as m, useMemo as f, Children as p, isValidElement as v } from "react";
+import { createContext as l, Children as m, isValidElement as f, useContext as p, useMemo as v } from "react";
 import { Icon as N } from "../icon/icon.js";
 import { Paragraph as h } from "../paragraph/paragraph.js";
 import { Tag as x } from "../tag/tag.js";
-const u = l(!1), c = l(!1), o = l(!1);
-function i(e, a, t) {
-  if (!m(e))
-    throw new Error(`${a} must be used inside <${t}>`);
+const u = l(!1), o = l(!1), c = l(!1);
+function i(e, a, n) {
+  if (!p(e))
+    throw new Error(`${a} must be used inside <${n}>`);
   return !0;
 }
 const P = ({
   children: e,
   inset: a,
-  type: t = "vertical",
-  dataTestid: n
+  type: n = "vertical",
+  dataTestid: t
 }) => {
-  const d = f(() => {
-    const s = `gi-card-inset-${a || "none"}`;
-    return `gi-card gi-card-${t} ${s} gi-not-prose`;
-  }, [t, a]);
-  return /* @__PURE__ */ r(u.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: d, "data-testid": n, children: e }) });
+  const s = v(() => {
+    const d = `gi-card-inset-${a || "none"}`;
+    return `gi-card gi-card-${n} ${d} gi-not-prose`;
+  }, [n, a]);
+  return /* @__PURE__ */ r(u.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: s, "data-testid": t, children: e }) });
 }, j = ({ media: e, href: a }) => {
   if (i(u, "CardMedia", "Card"), !e)
     return null;
   switch (e.type) {
     case "image": {
-      const { src: t, alt: n, aspectRatio: d } = e.config;
+      const { src: n, alt: t, aspectRatio: s } = e.config;
       return /* @__PURE__ */ r("div", { className: "gi-card-image", children: /* @__PURE__ */ r("a", { href: a, children: /* @__PURE__ */ r(
         "img",
         {
-          src: t,
-          alt: n,
-          style: d ? { aspectRatio: d } : void 0,
-          className: d ? "gi-w-full" : void 0
+          src: n,
+          alt: t,
+          style: s ? { aspectRatio: s } : void 0,
+          className: s ? "gi-w-full" : void 0
         }
       ) }) });
     }
@@ -47,29 +47,29 @@ const P = ({
 }, E = ({
   children: e,
   inset: a = "none"
-}) => (i(u, "CardContainer", "Card"), /* @__PURE__ */ r(o.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: `gi-card-content gi-card-inset-${a || "none"}`, children: e }) })), M = ({ children: e }) => (i(c, "CardTitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-title", children: e }) : null), A = ({ children: e }) => (i(c, "CardSubtitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-subheading", children: e }) : null), T = ({ text: e, type: a }) => (i(c, "CardTag", "CardHeader"), /* @__PURE__ */ r("div", { className: "gi-card-tag", children: /* @__PURE__ */ r(x, { text: e, type: a }) }));
+}) => (i(u, "CardContainer", "Card"), /* @__PURE__ */ r(c.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: `gi-card-content gi-card-inset-${a || "none"}`, children: e }) })), M = ({ children: e }) => (i(o, "CardTitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-title", children: e }) : null), A = ({ children: e }) => (i(o, "CardSubtitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-subheading", children: e }) : null), T = ({ text: e, type: a }) => (i(o, "CardTag", "CardHeader"), /* @__PURE__ */ r("div", { className: "gi-card-tag", children: /* @__PURE__ */ r(x, { text: e, type: a }) }));
 Object.defineProperty(T, "componentType", {
   value: "CardTag",
   writable: !1,
   enumerable: !1
 });
 const D = ({ children: e }) => {
-  i(o, "CardHeader", "CardContainer");
-  const a = [], t = [];
-  return p.forEach(e, (n) => {
-    var s, C;
-    if (!v(n))
+  i(c, "CardHeader", "CardContainer");
+  const a = [], n = [];
+  return m.forEach(e, (t) => {
+    var d, C;
+    if (!f(t))
       return;
-    (((s = n == null ? void 0 : n.type) == null ? void 0 : s.componentType) || ((C = n.props) == null ? void 0 : C.__mdxType)) === "CardTag" ? t.push(n) : a.push(n);
-  }), /* @__PURE__ */ r(c.Provider, { value: !0, children: /* @__PURE__ */ g("div", { className: "gi-card-header", children: [
+    (((d = t == null ? void 0 : t.type) == null ? void 0 : d.componentType) || ((C = t.props) == null ? void 0 : C.__mdxType)) === "CardTag" ? n.push(t) : a.push(t);
+  }), /* @__PURE__ */ r(o.Provider, { value: !0, children: /* @__PURE__ */ g("div", { className: "gi-card-header", children: [
     /* @__PURE__ */ r("div", { className: "gi-card-heading", children: a }),
-    t
+    n
   ] }) });
 }, R = ({
   children: e
-}) => (i(o, "CardDescription", "CardContainer"), e ? /* @__PURE__ */ r("div", { className: "gi-card-paragraph", children: /* @__PURE__ */ r(h, { size: "sm", children: e }) }) : null), S = ({
+}) => (i(c, "CardDescription", "CardContainer"), e ? /* @__PURE__ */ r("div", { className: "gi-card-paragraph", children: /* @__PURE__ */ r(h, { size: "sm", children: e }) }) : null), S = ({
   children: e
-}) => (i(o, "CardAction", "CardContainer"), /* @__PURE__ */ r("div", { className: "gi-card-action", children: e }));
+}) => (i(c, "CardAction", "CardContainer"), /* @__PURE__ */ r("div", { className: "gi-card-action", children: e }));
 export {
   S as CardAction,
   E as CardContainer,

package/dist/combo-box/dropdown-item.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
 import { useState as u, useId as j, useEffect as q } from "react";
 import { Button as B } from "../button/button.js";
 import { cn as x } from "../cn.js";
@@ -11,7 +11,7 @@ import { InputText as O } from "../input-text/input-text.js";
 import { Paragraph as y } from "../paragraph/paragraph.js";
 import { Tag as A, TagTypeEnum as F } from "../tag/tag.js";
 import { slugify as P } from "../utilities.js";
-const ee = ({
+const oo = ({
   children: c,
   noSearch: h,
   options: p,
@@ -26,40 +26,40 @@ const ee = ({
     )
   ];
   q(() => {
-    var a, n;
-    let e = 0;
-    const o = z();
-    for (const b of o) {
+    var a, i;
+    let o = 0;
+    const e = z();
+    for (const b of e) {
       const f = (a = b.querySelector("label")) == null ? void 0 : a.textContent;
-      (n = f == null ? void 0 : f.toLowerCase()) != null && n.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", e++);
+      (i = f == null ? void 0 : f.toLowerCase()) != null && i.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", o++);
     }
-    _(e === p.length);
+    _(o === p.length);
   }, [d, p.length]);
-  const R = (e, o) => {
-    const a = o ? [...t || [], e] : (t || []).filter((n) => n !== e);
+  const R = (o, e) => {
+    const a = e ? [...t || [], o] : (t || []).filter((i) => i !== o);
     w || V(a), g == null || g(a);
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "div",
     {
       role: "group",
       "aria-label": `${c} dropdown`,
       className: "gi-combobox-dropdown-item",
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ n(
           B,
           {
             variant: "flat",
             appearance: "dark",
             size: "large",
-            onClick: (e) => {
-              e.preventDefault(), C(!m);
+            onClick: (o) => {
+              o.preventDefault(), C(!m);
             },
             className: x("gi-combobox-toggle", {
               "gi-combobox-toggle-open": m
             }),
             children: [
-              /* @__PURE__ */ i("div", { className: "gi-combobox-toggle-content", children: [
+              /* @__PURE__ */ n("div", { className: "gi-combobox-toggle-content", children: [
                 /* @__PURE__ */ s(y, { size: "md", children: c }),
                 (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ s(A, { type: F.Counter, text: t.length.toString() })
               ] }),
@@ -73,22 +73,22 @@ const ee = ({
             ]
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ n(
           "div",
           {
             className: m ? "gi-combobox-dropdown-container-open" : "gi-hidden",
             id: `${r}-search`,
             children: [
-              !h && /* @__PURE__ */ i("div", { className: "gi-combobox-search", children: [
+              !h && /* @__PURE__ */ n("div", { className: "gi-combobox-search", children: [
                 /* @__PURE__ */ s(
                   O,
                   {
                     placeholder: N("dropdownItem.search", { defaultValue: "Search" }),
                     className: "gi-combobox-search-input",
                     value: d,
-                    onChange: (e) => {
-                      const o = e.target.value;
-                      $(o), l == null || l(o);
+                    onChange: (o) => {
+                      const e = o.target.value;
+                      $(e), l == null || l(e);
                     }
                   }
                 ),
@@ -108,7 +108,7 @@ const ee = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ n(
                 "div",
                 {
                   className: x("gi-combobox-checkbox-container", {
@@ -118,8 +118,8 @@ const ee = ({
                     I && /* @__PURE__ */ s(y, { className: "gi-combobox-checkbox-paragraph", children: N("dropdownItem.noResultFound", {
                       defaultValue: "No results found."
                     }) }),
-                    p.map((e, o) => {
-                      const a = t == null ? void 0 : t.includes(e.value);
+                    p.map((o, e) => {
+                      const a = t == null ? void 0 : t.includes(o.value);
                       return /* @__PURE__ */ s(
                         "div",
                         {
@@ -127,16 +127,16 @@ const ee = ({
                           children: /* @__PURE__ */ s(
                             L,
                             {
-                              onChange: (n) => R(e.value, n.target.checked),
+                              onChange: (i) => R(o.value, i.target.checked),
                               checked: a,
-                              id: `${o}_${r}_${e.value}`,
-                              label: e.label,
-                              name: `${o}_${e.label}_${r}`,
-                              value: e.value
+                              id: `${e}_${r}_${o.value}`,
+                              label: o.label,
+                              name: `${e}_${o.label}_${r}`,
+                              value: o.value
                             }
                           )
                         },
-                        `${o}_${r}_${e.value}`
+                        `${e}_${r}_${o.value}`
                       );
                     })
                   ]
@@ -150,5 +150,5 @@ const ee = ({
   );
 };
 export {
-  ee as DropdownItem
+  oo as DropdownItem
 };

package/dist/drawer/drawer.content.js

@@ -1,11 +1,11 @@
-import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e, Fragment as d } from "react/jsx-runtime";
 import { MenuItemAccordion as p } from "../header/components/header-menu.js";
 import { HeaderSearch as g } from "../header/components/header-search.js";
 import { ListItem as o } from "../list-item/list-item.js";
 import { DrawerBody as b, DrawerFooter as f } from "./drawer.js";
-const D = /* @__PURE__ */ s(m, { children: [
+const D = /* @__PURE__ */ s(d, { children: [
   /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e("p", { className: "gi-paragraph-md", children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam molestias error accusantium non nobis excepturi doloremque dolorem possimus corrupti. Nostrum quisquam est voluptate! Iure suscipit, commodi cupiditate sit minima veritatis." }) }),
-  /* @__PURE__ */ e(f, { className: "gi-flex gi-gap-6 gi-justify-end", children: /* @__PURE__ */ s(m, { children: [
+  /* @__PURE__ */ e(f, { className: "gi-flex gi-gap-6 gi-justify-end", children: /* @__PURE__ */ s(d, { children: [
     /* @__PURE__ */ e("button", { className: "gi-btn gi-btn-secondary gi-btn-secondary-dark gi-btn-regular", children: "Cancel" }),
     /* @__PURE__ */ e("button", { className: "gi-btn gi-btn-primary gi-btn-regular", children: "Primary" })
   ] }) })
@@ -44,7 +44,7 @@ const D = /* @__PURE__ */ s(m, { children: [
       href: "#",
       label: "Gaeilge"
     }
-  ], d = {};
+  ], c = {};
   return /* @__PURE__ */ s("ul", { children: [
     i == null ? void 0 : i.map((r, t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
       o,
@@ -55,10 +55,10 @@ const D = /* @__PURE__ */ s(m, { children: [
       }
     ) }, `navLink-${r.label}-${t}`)),
     a == null ? void 0 : a.map(
-      ({ href: r, label: t, slot: l, keepOnMobile: u, external: h }, c) => l && !u ? null : /* @__PURE__ */ e("li", { children: l ? /* @__PURE__ */ e(p, { index: c, item: { label: t, slot: l } }) : /* @__PURE__ */ e(o, { href: r, label: t, external: h }) }, `toolItems-${t}-${c}`)
+      ({ href: r, label: t, slot: l, keepOnMobile: u, external: h }, m) => l && !u ? null : /* @__PURE__ */ e("li", { children: l ? /* @__PURE__ */ e(p, { index: m, item: { label: t, slot: l } }) : /* @__PURE__ */ e(o, { href: r, label: t, external: h }) }, `toolItems-${t}-${m}`)
     ),
     n == null ? void 0 : n.map((r, t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(o, { href: r.href, label: r.label, bold: !1 }) }, `secondary-${r.label}-${t}`)),
-    /* @__PURE__ */ e("li", { className: "gi-mt-8 sm:gi-hidden", children: /* @__PURE__ */ e(g, { ...d }) })
+    c && /* @__PURE__ */ e("li", { className: "gi-mt-8 sm:gi-hidden", children: /* @__PURE__ */ e(g, { ...c }) })
   ] });
 };
 export {

package/dist/drawer/drawer.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as r, jsxs as x, Fragment as y } from "react/jsx-runtime";
 import { useState as D, cloneElement as O } from "react";
-import { cn as n } from "../cn.js";
-import { ModalWrapper as F, ModalBody as M, ModalFooter as N } from "../modal/modal.js";
+import { cn as a } from "../cn.js";
+import { ModalBody as F, ModalFooter as M, ModalWrapper as N } from "../modal/modal.js";
 const b = ({
   children: o,
   className: e,
   ...s
-}) => /* @__PURE__ */ r(F, { className: n("gi-drawer-container", e), ...s, children: o }), S = ({
+}) => /* @__PURE__ */ r(N, { className: a("gi-drawer-container", e), ...s, children: o }), I = ({
   children: o,
   triggerButton: e,
   startsOpen: s,
@@ -16,7 +16,7 @@ const b = ({
   className: m,
   closeButtonSize: f
 }) => {
-  const [t, a] = D(!!s), w = () => a(!0), C = () => a(!1), h = O(e, {
+  const [t, n] = D(!!s), w = () => n(!0), C = () => n(!1), h = O(e, {
     "data-testid": "drawer-trigger-button-container",
     onClick: (k) => {
       var l, d;
@@ -39,10 +39,10 @@ const b = ({
       }
     )
   ] });
-}, T = ({ children: o, className: e }) => /* @__PURE__ */ r(M, { className: n("gi-drawer-body", e), children: o }), q = ({ children: o, className: e }) => /* @__PURE__ */ r(N, { className: n("gi-drawer-footer", e), children: o });
+}, S = ({ children: o, className: e }) => /* @__PURE__ */ r(F, { className: a("gi-drawer-body", e), children: o }), T = ({ children: o, className: e }) => /* @__PURE__ */ r(M, { className: a("gi-drawer-footer", e), children: o });
 export {
-  S as Drawer,
-  T as DrawerBody,
-  q as DrawerFooter,
+  I as Drawer,
+  S as DrawerBody,
+  T as DrawerFooter,
   b as DrawerWrapper
 };

package/dist/error-text/error-text.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { c as m } from "../index-DNkhmzZp.js";
+import { c as m } from "../index-CB-zPpNk.js";
 const d = {
   Small: "sm",
   Medium: "md",

package/dist/forms/form-field/form-field.d.ts

@@ -0,0 +1,18 @@
+import { ErrorTextProps } from '../../error-text/types.js';
+import { HintTextProps } from '../../hint-text/types.js';
+import { LabelTextProps } from '../../label/types.js';
+import { FormFieldProps } from './types.js';
+declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormFieldLabel: {
+    ({ children, text, size, htmlFor, className, }: LabelTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const FormFieldHint: {
+    ({ children, text, size, className }: HintTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const FormFieldError: {
+    ({ children, text, size, className, }: ErrorTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FormField, FormFieldLabel, FormFieldHint, FormFieldError };

package/dist/forms/form-field/form-field.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { S as y } from "../../index-2sRBqKFV.js";
+import { createContext as N, Children as p, isValidElement as l, useContext as C } from "react";
+import { cn as m } from "../../cn.js";
+import { ErrorText as v } from "../../error-text/error-text.js";
+import { HintText as L } from "../../hint-text/hint-text.js";
+import { Label as E } from "../../label/label.js";
+const f = N(null);
+function u(e) {
+  C(f) || console.error(`[${e}] must be used within a <FormField>.`);
+}
+function H(e) {
+  return e === s || e === c || e === d;
+}
+const B = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
+  "[FormField] Using legacy props. Please migrate to the new composable API."
+), /* @__PURE__ */ i(f.Provider, { value: !0, children: /* @__PURE__ */ a(g, { children: [
+  e.label && /* @__PURE__ */ i(s, { ...e.label }),
+  e.hint && /* @__PURE__ */ i(c, { ...e.hint }),
+  e.error && /* @__PURE__ */ i(d, { ...e.error }),
+  e.children
+] }) })) : /* @__PURE__ */ i(f.Provider, { value: !0, children: /* @__PURE__ */ i(g, { children: e.children }) }), g = ({
+  children: e,
+  className: o,
+  ...n
+}) => {
+  const r = p.toArray(e), F = r.find(
+    (t) => l(t) && t.type === s
+  ), h = r.find(
+    (t) => l(t) && t.type === c
+  ), b = r.find(
+    (t) => l(t) && t.type === d
+  ), x = r.filter(
+    (t) => !l(t) || !H(t.type)
+  );
+  return /* @__PURE__ */ a(
+    "fieldset",
+    {
+      className: m({ "gi-error-state": !!b }, o),
+      ...n,
+      children: [
+        /* @__PURE__ */ a("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+          /* @__PURE__ */ a("div", { children: [
+            F,
+            h
+          ] }),
+          b
+        ] }),
+        /* @__PURE__ */ i(y, { children: x })
+      ]
+    }
+  );
+}, s = ({
+  children: e,
+  text: o,
+  size: n,
+  htmlFor: r,
+  className: F
+}) => (u("FormFieldLabel"), /* @__PURE__ */ i(
+  E,
+  {
+    text: o,
+    size: n,
+    htmlFor: r,
+    className: m("gi-font-bold", F),
+    children: e
+  }
+));
+s.displayName = "FormFieldLabel";
+const c = ({ children: e, text: o, size: n, className: r }) => (u("FormFieldHint"), /* @__PURE__ */ i(L, { text: o, size: n, className: m("gi-mb-1", r), children: e }));
+c.displayName = "FormFieldHint";
+const d = ({
+  children: e,
+  text: o,
+  size: n,
+  className: r
+}) => (u("FormFieldError"), /* @__PURE__ */ i(v, { text: o, size: n, className: m("gi-mb-1", r), children: e }));
+d.displayName = "FormFieldError";
+export {
+  B as FormField,
+  d as FormFieldError,
+  c as FormFieldHint,
+  s as FormFieldLabel
+};

package/dist/forms/form-field/types.d.ts

@@ -0,0 +1,13 @@
+import { FieldsetHTMLAttributes } from 'react';
+import { ErrorTextProps } from '../../error-text/types.js';
+import { HintTextProps } from '../../hint-text/types.js';
+import { LabelTextProps } from '../../label/types.js';
+export type FormFieldProps = {
+    /** @deprecated Use <FormFieldError> instead */
+    error?: ErrorTextProps;
+    /** @deprecated Use <FormFieldHint> instead */
+    hint?: HintTextProps;
+    /** @deprecated Use <FormFieldLabel> instead */
+    label?: LabelTextProps;
+    className?: string;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'style'>;

package/dist/forms/form-field/types.js

@@ -0,0 +1 @@
+

package/dist/forms/form-field-with-tag/form-field-with-tag.js

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as m } from "react/jsx-runtime";
-import { S as d } from "../../index-ntYL1VRC.js";
+import { S as d } from "../../index-2sRBqKFV.js";
 import { cn as c } from "../../cn.js";
 import { ErrorText as l } from "../../error-text/error-text.js";
 import { HintText as f } from "../../hint-text/hint-text.js";

package/dist/heading/heading.js

@@ -1,5 +1,5 @@
 import { jsxs as x, Fragment as o, jsx as s } from "react/jsx-runtime";
-import { c as l } from "../index-DNkhmzZp.js";
+import { c as l } from "../index-CB-zPpNk.js";
 import { cn as e } from "../cn.js";
 const c = {
   xl: "gi-heading-xl",