@obosbbl/grunnmuren-react 1.14.0-beta.3 → 1.14.0-beta.4

package/dist/grunnmuren.mjs

@@ -5,7 +5,7 @@ import { ChevronDown as te, Warning as re, InfoCircle as ne, LoadingSpinner as h
 import { useCollapse as we } from "react-collapsed";
 import l from "clsx";
 import { useMediaQuery as ae, useUpdateEffect as ye } from "@react-hookz/web";
-import K from "@react-hook/merged-ref";
+import { mergeRefs as K } from "react-merge-refs";
 const I = () => {
 }, Ie = 300, Ce = "duration-300", X = (e) => {
   const { className: r, ...t } = e;
@@ -37,7 +37,7 @@ const I = () => {
     }
   ) });
 }, Re = (e) => {
-  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: c } = A(Y), m = s({ onClick: () => i(!c) });
+  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: d } = A(Y), m = s({ onClick: () => i(!d) });
   return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ f(
     "button",
     {
@@ -66,7 +66,7 @@ const I = () => {
 X.Item = Ee;
 X.Header = Re;
 X.Content = ke;
-const dt = (e) => {
+const ct = (e) => {
   const { className: r, children: t, heading: n, severity: a = "alert", ...s } = e;
   return /* @__PURE__ */ o(
     "section",
@@ -92,7 +92,7 @@ const dt = (e) => {
       ] })
     }
   );
-}, Se = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(re, { className: l(r, "text-red") }) : /* @__PURE__ */ o(ne, { className: l(r, "text-orange") }), qe = "(prefers-reduced-motion: reduce)", ct = (e = !1) => ae(qe, { initializeWithValue: e });
+}, Se = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(re, { className: l(r, "text-red") }) : /* @__PURE__ */ o(ne, { className: l(r, "text-orange") }), qe = "(prefers-reduced-motion: reduce)", dt = (e = !1) => ae(qe, { initializeWithValue: e });
 function se(e) {
   switch (e) {
     case "gray":
@@ -109,26 +109,26 @@ function se(e) {
 }
 const Le = (e) => ae("(max-width: 767.9px)", { initializeWithValue: e });
 function L(e, r = !0) {
-  const [t, n] = q("indeterminate"), [a, s] = q(), i = N((d) => {
-    d.target.checkValidity() && (n("valid"), s(void 0));
-  }, []), c = N(
-    (d) => {
-      t !== "indeterminate" && d.target.checkValidity() && (n("valid"), s(void 0));
+  const [t, n] = q("indeterminate"), [a, s] = q(), i = N((c) => {
+    c.target.checkValidity() && (n("valid"), s(void 0));
+  }, []), d = N(
+    (c) => {
+      t !== "indeterminate" && c.target.checkValidity() && (n("valid"), s(void 0));
     },
     [t]
-  ), m = N((d) => {
-    d.preventDefault();
-    const u = d.target.validationMessage;
+  ), m = N((c) => {
+    c.preventDefault();
+    const u = c.target.validationMessage;
     s(u), n("invalid");
   }, []);
   return fe(() => {
     var u;
-    const { current: d } = e;
+    const { current: c } = e;
     return r && // @ts-expect-error respect the <form noValidate> attribute if we are rendered inside a form
-    ((u = d == null ? void 0 : d.form) == null ? void 0 : u.noValidate) !== !0 && (d == null || d.addEventListener("blur", i), d == null || d.addEventListener("input", c), d == null || d.addEventListener("invalid", m)), () => {
-      d == null || d.removeEventListener("blur", i), d == null || d.removeEventListener("input", c), d == null || d.removeEventListener("invalid", m);
+    ((u = c == null ? void 0 : c.form) == null ? void 0 : u.noValidate) !== !0 && (c == null || c.addEventListener("blur", i), c == null || c.addEventListener("input", d), c == null || c.addEventListener("invalid", m)), () => {
+      c == null || c.removeEventListener("blur", i), c == null || c.removeEventListener("input", d), c == null || c.removeEventListener("invalid", m);
     };
-  }, [r, c]), { validity: t, validationMessage: a };
+  }, [r, d]), { validity: t, validationMessage: a };
 }
 function R(e) {
   const r = $();
@@ -142,8 +142,8 @@ const mt = (e) => {
     heading: a,
     image: s,
     ...i
-  } = e, c = se(r);
-  return /* @__PURE__ */ o("article", { className: l(t, c, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ f("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
+  } = e, d = se(r);
+  return /* @__PURE__ */ o("article", { className: l(t, d, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ f("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
     s,
     /* @__PURE__ */ f("div", { className: "max-w-prose", children: [
       a && /* @__PURE__ */ o("h2", { className: "h3 mb-4", children: a }),
@@ -158,7 +158,7 @@ const mt = (e) => {
     className: "w-20 flex-none self-center md:w-32 md:self-start",
     ...e
   }
-), Me = {
+), Pe = {
   "standard-primary": "bg-green border-green text-white",
   "standard-secondary": "bg-white border-green text-black",
   "mint-primary": "bg-mint border-mint text-black",
@@ -174,15 +174,15 @@ const mt = (e) => {
     color: a,
     href: s,
     loading: i,
-    type: c = "button",
+    type: d = "button",
     variant: m = "primary",
-    ...d
-  } = e, u = A(M), b = Me[`${a ?? u}-${m}`], p = l(n, b, "button"), v = i ? /* @__PURE__ */ o(Pe, { children: t }) : t;
+    ...c
+  } = e, u = A(P), b = Pe[`${a ?? u}-${m}`], p = l(n, b, "button"), v = i ? /* @__PURE__ */ o(Me, { children: t }) : t;
   return /* @__PURE__ */ o(O, { children: s ? /* @__PURE__ */ o(
     "a",
     {
       "aria-busy": i ? !0 : void 0,
-      ...d,
+      ...c,
       href: s,
       ref: r,
       className: p,
@@ -192,14 +192,14 @@ const mt = (e) => {
     "button",
     {
       "aria-busy": i ? !0 : void 0,
-      ...d,
-      type: c,
+      ...c,
+      type: d,
       ref: r,
       className: p,
       children: v
     }
   ) });
-}), Pe = (e) => /* @__PURE__ */ f(O, { children: [
+}), Me = (e) => /* @__PURE__ */ f(O, { children: [
   ie(e.children),
   /* @__PURE__ */ o(
     "span",
@@ -223,14 +223,14 @@ function ie(e) {
     return r;
   });
 }
-const M = w("standard"), le = w(!0), ze = (e, r) => {
+const P = w("standard"), le = w(!0), ze = (e, r) => {
   const {
     as: t = "div",
     body: n,
     className: a,
     image: s,
     rightAlignBody: i = !0,
-    ...c
+    ...d
   } = e;
   return /* @__PURE__ */ f(
     t,
@@ -239,7 +239,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
         a,
         "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0"
       ),
-      ...c,
+      ...d,
       ref: r,
       children: [
         /* @__PURE__ */ o(le.Provider, { value: i, children: s }),
@@ -267,8 +267,8 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
       s ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
     );
     if (ee(n)) {
-      const c = Z.only(n);
-      return W(c, {
+      const d = Z.only(n);
+      return W(d, {
         // @ts-expect-error assume className prop is allowed
         className: i,
         ref: r,
@@ -349,8 +349,8 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
       error: a,
       id: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), { validity: d, validationMessage: u } = L(
+      ...d
+    } = e, m = E(null), { validity: c, validationMessage: u } = L(
       m,
       !i
     ), g = R(s), b = g + "err", p = a || u;
@@ -369,9 +369,9 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
             ),
             ref: r,
             type: "checkbox",
-            ...c,
+            ...d,
             "aria-describedby": p ? b : void 0,
-            "aria-invalid": !!a || d === "invalid"
+            "aria-invalid": !!a || c === "invalid"
           }
         ),
         t
@@ -394,7 +394,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   "green-light": "text-green",
   "blue-light": "text-blue-dark"
 }, Nt = (e) => {
-  const { className: r, color: t, icon: n, children: a, variant: s = "filled" } = e, i = t && je[t], c = t && Oe[t];
+  const { className: r, color: t, icon: n, children: a, variant: s = "filled" } = e, i = t && je[t], d = t && Oe[t];
   return /* @__PURE__ */ f(
     "div",
     {
@@ -404,7 +404,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
         r
       ),
       children: [
-        n && /* @__PURE__ */ o("div", { className: l("px-3 py-2", c), children: n }),
+        n && /* @__PURE__ */ o("div", { className: l("px-3 py-2", d), children: n }),
         /* @__PURE__ */ o(
           "div",
           {
@@ -419,7 +419,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   );
 }, wt = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ o(M.Provider, { value: "white", children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(
     "footer",
     {
       className: l(
@@ -490,7 +490,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
       ]
     }
   );
-}, P = (e) => {
+}, M = (e) => {
   const { className: r, children: t, ...n } = e;
   return /* @__PURE__ */ o("div", { className: l(r, "text-gray-dark text-sm"), ...n, children: t });
 }, z = (e) => {
@@ -647,26 +647,26 @@ function Xe(e) {
   const [r, t] = A(Q), n = N(async () => {
     t({ type: "PREV_STEP" });
   }, [t]), a = N(
-    (c) => {
+    (d) => {
       t({
         type: "SET_FORM_STEP_DATA",
         formId: `form${e}`,
-        formValues: c
+        formValues: d
       });
     },
     [t, e]
   ), s = N(() => {
     t({ type: "NEXT_STEP" });
   }, [t]), i = N(
-    (c) => {
-      a(c), s();
+    (d) => {
+      a(d), s();
     },
     [s, a]
   );
   return {
     isActive: r.activeStep === e,
     activeStep: r.activeStep,
-    setActiveStep: (c) => t({ type: "SET_STEP", step: c }),
+    setActiveStep: (d) => t({ type: "SET_STEP", step: d }),
     previousFormStep: n,
     nextFormStep: s,
     submitAndNextFormStep: i,
@@ -716,10 +716,10 @@ const kt = (e) => {
     formStatus: a = "blank",
     onSubmit: s,
     className: i,
-    ...c
-  } = e, { isActive: m, setActiveStep: d, activeStep: u } = Xe(n), g = E(null), b = N(() => {
-    n < u && d(n);
-  }, [u, n, d]);
+    ...d
+  } = e, { isActive: m, setActiveStep: c, activeStep: u } = Xe(n), g = E(null), b = N(() => {
+    n < u && c(n);
+  }, [u, n, c]);
   return ye(() => {
     var p;
     m && ((p = g.current) == null || p.scrollIntoView({ behavior: "smooth" }));
@@ -731,7 +731,7 @@ const kt = (e) => {
       }),
       onSubmit: s,
       ref: g,
-      ...c,
+      ...d,
       children: [
         /* @__PURE__ */ o(
           We,
@@ -748,7 +748,7 @@ const kt = (e) => {
     }
   );
 };
-function de(e) {
+function ce(e) {
   return e !== "vertical-split" && e !== "below-center" && e !== "below-left";
 }
 const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), St = h((e, r) => {
@@ -758,17 +758,17 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     className: a,
     contentPosition: s = "below-center",
     image: i,
-    ...c
-  } = e, m = i != null, d = m ? s : "below-center", u = C(
+    ...d
+  } = e, m = i != null, c = m ? s : "below-center", u = C(
     () => ({
       bgColor: t,
-      contentPosition: d,
+      contentPosition: c,
       hasImage: m
     }),
-    [t, d, m]
+    [t, c, m]
   );
   return /* @__PURE__ */ o(
-    M.Provider,
+    P.Provider,
     {
       value: t === "white" ? "standard" : "mint",
       children: /* @__PURE__ */ o(V.Provider, { value: u, children: /* @__PURE__ */ f(
@@ -779,11 +779,11 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             // disable padding on small screens so the hero image is flush with the screen edges
             "container px-0 md:grid lg:px-4",
             {
-              "md:grid-cols-[50%,50%]": d === "vertical-split"
+              "md:grid-cols-[50%,50%]": c === "vertical-split"
             }
           ),
-          style: de(d) ? { gridTemplateAreas: '"hero"' } : void 0,
-          ...c,
+          style: ce(c) ? { gridTemplateAreas: '"hero"' } : void 0,
+          ...d,
           ref: r,
           children: [
             i,
@@ -823,7 +823,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
   }
 ), Lt = h(
   (e, r) => {
-    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: c, description: m, ...d } = e, u = de(n);
+    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: d, description: m, ...c } = e, u = ce(n);
     return /* @__PURE__ */ f(
       "div",
       {
@@ -854,18 +854,18 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             "self-center justify-self-center": n === "center"
           }
         ),
-        ...d,
+        ...c,
         style: u ? { gridArea: "hero" } : void 0,
         ref: r,
         children: [
-          /* @__PURE__ */ o("h1", { children: c }),
+          /* @__PURE__ */ o("h1", { children: d }),
           m && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: m }),
           s
         ]
       }
     );
   }
-), Mt = h(
+), Pt = h(
   (e, r) => {
     const { className: t, ...n } = e, { contentPosition: a } = A(V);
     return /* @__PURE__ */ o(
@@ -884,16 +884,16 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), ce = h((e, r) => {
+), de = h((e, r) => {
   const {
     className: t,
     isInvalid: n,
     size: a,
     as: s,
     type: i,
-    rightAddon: c,
+    rightAddon: d,
     leftAddon: m,
-    ...d
+    ...c
   } = e, u = s ?? "input", g = Qe(u, i);
   return /* @__PURE__ */ f(
     "div",
@@ -907,7 +907,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
           "w-fit": a != null,
           "w-full": a == null,
           "pl-4": m,
-          "pr-4": c
+          "pr-4": d
         }
       ),
       children: [
@@ -920,10 +920,10 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             className: "focus:none placeholder-gray w-full rounded-lg border-none px-4 py-3.5 focus:outline-none",
             size: a,
             type: g,
-            ...d
+            ...c
           }
         ),
-        c
+        d
       ]
     }
   );
@@ -934,7 +934,7 @@ function Qe(e, r) {
   if (e === "input")
     return "text";
 }
-const Pt = (e) => {
+const Mt = (e) => {
   let r = "";
   return e.icon && (r = "inline-flex items-center gap-2"), /* @__PURE__ */ f("a", { className: r, href: e.href, children: [
     e.icon,
@@ -945,11 +945,11 @@ const Pt = (e) => {
   isExpanded: !1,
   collapsibleId: ""
 }), zt = (e) => {
-  const { className: r, children: t, ...n } = e, a = $(), [s, i] = q(!1), c = C(
+  const { className: r, children: t, ...n } = e, a = $(), [s, i] = q(!1), d = C(
     () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
     [s, a]
   );
-  return /* @__PURE__ */ o(M.Provider, { value: "white", children: /* @__PURE__ */ o(S.Provider, { value: c, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(S.Provider, { value: d, children: /* @__PURE__ */ o(
     "div",
     {
       className: l(
@@ -1052,9 +1052,9 @@ const Pt = (e) => {
     onChange: a,
     getItemHref: s,
     getItemAriaLabel: i,
-    nextPageAriaLabel: c,
+    nextPageAriaLabel: d,
     prevPageAriaLabel: m,
-    ...d
+    ...c
   } = e, u = C(
     () => ({
       currentPage: Math.max(1, Math.min(t, n)),
@@ -1068,7 +1068,7 @@ const Pt = (e) => {
     "nav",
     {
       className: l("flex justify-center gap-2 sm:gap-4", r),
-      ...d,
+      ...c,
       children: [
         /* @__PURE__ */ o(
           He,
@@ -1103,7 +1103,7 @@ const Pt = (e) => {
         /* @__PURE__ */ o(
           Be,
           {
-            "aria-label": c,
+            "aria-label": d,
             href: s(t + 1),
             onClick: g(t + 1)
           }
@@ -1159,7 +1159,7 @@ const Pt = (e) => {
     Math.min(r - y, n - y * 2),
     1
   );
-  return a - y === 0 && (a = a - 1), Array.from({ length: n - a }, (i, c) => a + c + 1).map((i) => e(i));
+  return a - y === 0 && (a = a - 1), Array.from({ length: n - a }, (i, d) => a + d + 1).map((i) => e(i));
 }, G = h((e, r) => {
   const { page: t, selected: n, ...a } = e;
   return /* @__PURE__ */ o(U, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
@@ -1172,7 +1172,7 @@ const Pt = (e) => {
   value: void 0,
   error: !1
 }), Zt = h((e, r) => {
-  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: c, onChange: m, required: d, value: u, error: g } = A(me);
+  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: d, onChange: m, required: c, value: u, error: g } = A(me);
   return /* @__PURE__ */ f("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
     /* @__PURE__ */ o(
       "input",
@@ -1180,9 +1180,9 @@ const Pt = (e) => {
         className: l("radio", g && "border-red"),
         defaultChecked: i ? void 0 : a.value === s,
         checked: i ? a.value === u : void 0,
-        name: c,
+        name: d,
         onChange: i ? m : void 0,
-        required: d,
+        required: c,
         type: "radio",
         ref: r,
         ...a
@@ -1197,9 +1197,9 @@ const Pt = (e) => {
       defaultValue: a,
       description: s,
       error: i,
-      id: c,
+      id: d,
       children: m,
-      label: d,
+      label: c,
       name: u,
       onChange: g,
       required: b,
@@ -1222,7 +1222,7 @@ const Pt = (e) => {
         error: !!i
       }),
       [a, t, u, x, b, p, i]
-    ), J = R(c), B = `${J}:label`, H = `${J}:help`, D = J + "err", j = i;
+    ), J = R(d), B = `${J}:label`, H = `${J}:help`, D = J + "err", j = i;
     return /* @__PURE__ */ o(me.Provider, { value: F, children: /* @__PURE__ */ f(
       "div",
       {
@@ -1231,14 +1231,14 @@ const Pt = (e) => {
           [H]: s
         }) || void 0,
         "aria-invalid": !!i,
-        "aria-labelledby": d ? B : void 0,
+        "aria-labelledby": c ? B : void 0,
         className: l(n, "flex flex-col gap-4"),
         role: "radiogroup",
         ref: r,
         ...v,
         children: [
-          d && /* @__PURE__ */ o(z, { id: B, isRequired: b, isInvalid: !!i, children: d }),
-          s && /* @__PURE__ */ o(P, { id: H, children: s }),
+          c && /* @__PURE__ */ o(z, { id: B, isRequired: b, isInvalid: !!i, children: c }),
+          s && /* @__PURE__ */ o(M, { id: H, children: s }),
           m,
           j && /* @__PURE__ */ o(k, { id: D, children: j })
         ]
@@ -1247,8 +1247,8 @@ const Pt = (e) => {
   }
 ), _e = h(
   (e, r) => {
-    const { children: t, className: n, isInvalid: a, size: s, ...i } = e, c = s === "small";
-    return /* @__PURE__ */ f("div", { className: l(n, "relative", c && "text-sm"), children: [
+    const { children: t, className: n, isInvalid: a, size: s, ...i } = e, d = s === "small";
+    return /* @__PURE__ */ f("div", { className: l(n, "relative", d && "text-sm"), children: [
       /* @__PURE__ */ o(
         "select",
         {
@@ -1256,7 +1256,7 @@ const Pt = (e) => {
           ...i,
           className: l(
             "w-full cursor-pointer appearance-none border border-b-[3px] bg-white focus:-ml-0.5 focus:-mt-0.5 focus:border-[3px] focus:shadow focus:outline-none",
-            c ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5",
+            d ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5",
             a ? "border-red focus:border-red" : "focus:border-blue-dark border-black"
           ),
           ref: r,
@@ -1268,7 +1268,7 @@ const Pt = (e) => {
         {
           className: l(
             "pointer-events-none absolute bottom-0 top-0 my-auto",
-            c ? "right-3.5" : "right-4"
+            d ? "right-3.5" : "right-4"
           )
         }
       )
@@ -1282,8 +1282,8 @@ const Pt = (e) => {
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: g } = L(
+      ...d
+    } = e, m = E(null), c = K([m, r]), { validity: u, validationMessage: g } = L(
       m,
       !i
     ), b = R(a), p = b + "help", v = b + "err", x = n || g;
@@ -1297,13 +1297,13 @@ const Pt = (e) => {
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(P, { id: p, children: t }),
+      t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
         _e,
         {
           id: b,
-          ref: d,
-          ...c,
+          ref: c,
+          ...d,
           isInvalid: !!n || u === "invalid",
           "aria-describedby": l({
             [v]: x,
@@ -1405,8 +1405,8 @@ const Qt = h(
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: g } = L(
+      ...d
+    } = e, m = E(null), c = K([m, r]), { validity: u, validationMessage: g } = L(
       m,
       !i
     ), b = R(a), p = b + "help", v = b + "err", x = n || g;
@@ -1420,14 +1420,14 @@ const Qt = h(
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(P, { id: p, children: t }),
+      t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
-        ce,
+        de,
         {
           as: "textarea",
-          ref: d,
+          ref: c,
           id: b,
-          ...c,
+          ...d,
           isInvalid: !!n || u === "invalid",
           "aria-describedby": l({
             [v]: x,
@@ -1446,12 +1446,12 @@ const Qt = h(
       id: a,
       label: s,
       type: i = "text",
-      disableValidation: c = !1,
+      disableValidation: d = !1,
       ...m
-    } = e, d = E(null), { validity: u, validationMessage: g } = L(
-      d,
-      !c
-    ), b = R(a), p = b + "help", v = b + "err", x = n || g, F = K(d, r);
+    } = e, c = E(null), { validity: u, validationMessage: g } = L(
+      c,
+      !d
+    ), b = R(a), p = b + "help", v = b + "err", x = n || g, F = K([c, r]);
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
@@ -1462,9 +1462,9 @@ const Qt = h(
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(P, { id: p, children: t }),
+      t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
-        ce,
+        de,
         {
           id: b,
           ref: F,
@@ -1486,11 +1486,11 @@ export {
   ke as AccordionContent,
   Re as AccordionHeader,
   Ee as AccordionItem,
-  dt as Alert,
+  ct as Alert,
   mt as Banner,
   ut as BannerImage,
   bt as Button,
-  M as ButtonColorContext,
+  P as ButtonColorContext,
   ft as Campaign,
   gt as Card,
   At as CardContent,
@@ -1504,7 +1504,7 @@ export {
   It as FormError,
   k as FormErrorMessage,
   Ze as FormHeading,
-  P as FormHelperText,
+  M as FormHelperText,
   z as FormLabel,
   kt as FormStep,
   We as FormStepHeader,
@@ -1512,12 +1512,12 @@ export {
   Rt as FormStepProvider,
   Ct as FormSuccess,
   St as Hero,
-  Mt as HeroActions,
+  Pt as HeroActions,
   Lt as HeroContent,
   V as HeroContext,
   qt as HeroImage,
-  ce as Input,
-  Pt as Link,
+  de as Input,
+  Mt as Link,
   zt as Navbar,
   Jt as NavbarCollapsible,
   Ft as NavbarContent,
@@ -1540,6 +1540,6 @@ export {
   Et as useFormContext,
   L as useFormControlValidity,
   Xe as useFormStepContext,
-  ct as usePrefersReducedMotion,
+  dt as usePrefersReducedMotion,
   Le as useScreenMaxWidthMd
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.14.0-beta.3",
+  "version": "1.14.0-beta.4",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,32 +17,32 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@storybook/addon-controls": "7.0.12",
-    "@storybook/addon-docs": "7.0.12",
-    "@storybook/addon-styling": "1.0.8",
-    "@storybook/builder-vite": "7.0.12",
-    "@storybook/react": "7.0.12",
-    "@storybook/react-vite": "7.0.12",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4",
+    "@storybook/addon-controls": "7.0.22",
+    "@storybook/addon-docs": "7.0.22",
+    "@storybook/addon-styling": "1.3.0",
+    "@storybook/builder-vite": "7.0.22",
+    "@storybook/react": "7.0.22",
+    "@storybook/react-vite": "7.0.22",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
     "@vitejs/plugin-react": "4.0.0",
     "autoprefixer": "10.4.14",
-    "postcss": "8.4.23",
+    "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "5.0.1",
-    "storybook": "7.0.12",
+    "storybook": "7.0.22",
     "tailwindcss": "3.3.2",
-    "type-fest": "3.11.0",
-    "vite": "4.3.8",
+    "type-fest": "3.12.0",
+    "vite": "4.3.9",
     "@obosbbl/grunnmuren-tailwind": "0.9.1"
   },
   "dependencies": {
-    "@react-hook/merged-ref": "1.3.2",
     "@react-hookz/web": "23.0.0",
     "clsx": "1.2.1",
     "react-collapsed": "4.0.2",
+    "react-merge-refs": "2.0.2",
     "@obosbbl/grunnmuren-icons": "^0.6.0"
   },
   "peerDependencies": {