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

package/dist/Form/MultiStep/FormStepContext.d.ts

@@ -1,11 +1,17 @@
 /// <reference types="react" />
 export type FieldValues = Record<string, unknown>;
+export declare function useFormContext(): {
+    activeStep: number;
+    formData: any;
+};
 export declare function useFormStepContext<FormStepData extends FieldValues>(formStep: number): {
     isActive: boolean;
     activeStep: number;
     setActiveStep: (step: number) => void;
     previousFormStep: () => Promise<void>;
+    nextFormStep: () => void;
     submitAndNextFormStep: (formValues: FormStepData) => void;
+    setFormData: (formValues: FormStepData) => void;
     formData: any;
 };
 export declare function FormStepProvider({ children }: {

package/dist/grunnmuren.mjs

@@ -1,25 +1,25 @@
 'use client';
 import { jsx as o, jsxs as f, Fragment as O } from "react/jsx-runtime";
-import { createContext as N, useContext as A, useState as q, useCallback as I, useEffect as fe, useId as _, forwardRef as g, Children as Z, isValidElement as $, cloneElement as W, useRef as E, useMemo as C, useReducer as he } from "react";
-import { ChevronDown as ee, Warning as te, InfoCircle as re, LoadingSpinner as ge, CheckCircle as pe, MenuAlt as Ae, Close as xe, ChevronRight as ve, ChevronLeft as Ne } from "@obosbbl/grunnmuren-icons";
+import { createContext as w, useContext as A, useState as q, useCallback as N, useEffect as fe, useId as $, forwardRef as h, Children as Z, isValidElement as ee, cloneElement as W, useRef as E, useMemo as C, useReducer as ge } from "react";
+import { ChevronDown as te, Warning as re, InfoCircle as ne, LoadingSpinner as he, CheckCircle as pe, MenuAlt as Ae, Close as xe, ChevronRight as ve, ChevronLeft as Ne } from "@obosbbl/grunnmuren-icons";
 import { useCollapse as we } from "react-collapsed";
 import l from "clsx";
-import { useMediaQuery as ne, useUpdateEffect as ye } from "@react-hookz/web";
-import K from "@react-hook/merged-ref";
-const y = () => {
+import { useMediaQuery as ae, useUpdateEffect as ye } from "@react-hookz/web";
+import { mergeRefs as K } from "react-merge-refs";
+const I = () => {
 }, Ie = 300, Ce = "duration-300", X = (e) => {
   const { className: r, ...t } = e;
   return /* @__PURE__ */ o("div", { className: l(r, "flex flex-col gap-2"), ...t });
-}, Y = N({
+}, Y = w({
   isExpanded: !1,
-  setExpanded: y,
+  setExpanded: I,
   // @ts-expect-error noop
-  getCollapseProps: y,
+  getCollapseProps: I,
   // @ts-expect-error noop
-  getToggleProps: y,
-  onChange: y
+  getToggleProps: I,
+  onChange: I
 }), Ee = (e) => {
-  const { className: r, defaultOpen: t, onChange: n = y, open: a, ...s } = e, i = we({
+  const { className: r, defaultOpen: t, onChange: n = I, open: a, ...s } = e, i = we({
     defaultExpanded: t,
     isExpanded: a,
     duration: Ie,
@@ -37,7 +37,7 @@ const y = () => {
     }
   ) });
 }, 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",
     {
@@ -47,11 +47,11 @@ const y = () => {
       ),
       ...a,
       ...m,
-      id: ae(m["aria-controls"]),
+      id: oe(m["aria-controls"]),
       children: [
         r,
         /* @__PURE__ */ o(
-          ee,
+          te,
           {
             className: `shrink-0 text-sm ${Ce} group-aria-expanded:rotate-180`
           }
@@ -61,12 +61,12 @@ const y = () => {
   ) });
 }, ke = (e) => {
   const { getCollapseProps: r } = A(Y), { className: t, ...n } = e, a = r();
-  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": ae(a.id), children: /* @__PURE__ */ o("div", { className: l(t, "p-5 pb-10"), ...n }) });
-}, ae = (e) => e + "toggle";
+  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": oe(a.id), children: /* @__PURE__ */ o("div", { className: l(t, "p-5 pb-10"), ...n }) });
+}, oe = (e) => e + "toggle";
 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,8 +92,8 @@ const dt = (e) => {
       ] })
     }
   );
-}, Se = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(te, { className: l(r, "text-red") }) : /* @__PURE__ */ o(re, { className: l(r, "text-orange") }), qe = "(prefers-reduced-motion: reduce)", ct = (e = !1) => ne(qe, { initializeWithValue: e });
-function oe(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":
       return "bg-gray-lightest";
@@ -107,31 +107,31 @@ function oe(e) {
       return "bg-sky-light";
   }
 }
-const Le = (e) => ne("(max-width: 767.9px)", { initializeWithValue: 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 = I((d) => {
-    d.target.checkValidity() && (n("valid"), s(void 0));
-  }, []), c = I(
-    (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 = I((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 = _();
+  const r = $();
   return e ?? r;
 }
 const mt = (e) => {
@@ -142,8 +142,8 @@ const mt = (e) => {
     heading: a,
     image: s,
     ...i
-  } = e, c = oe(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",
@@ -167,22 +167,22 @@ const mt = (e) => {
   "white-secondary": "bg-transparent border-white text-white",
   "light-green-primary": "bg-green-light border-green-light text-black",
   "light-green-secondary": "bg-transparent border-green-light text-green-light"
-}, bt = g((e, r) => {
+}, bt = h((e, r) => {
   const {
     children: t,
     className: n,
     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,45 +192,45 @@ 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: [
-  se(e.children),
+}), Me = (e) => /* @__PURE__ */ f(O, { children: [
+  ie(e.children),
   /* @__PURE__ */ o(
     "span",
     {
       className: "!visible absolute bottom-1 left-1 right-1 top-1 grid place-items-center overflow-hidden bg-inherit",
       "aria-hidden": !0,
-      children: /* @__PURE__ */ o(ge, { className: "animate-spin" })
+      children: /* @__PURE__ */ o(he, { className: "animate-spin" })
     }
   )
 ] });
-function se(e) {
+function ie(e) {
   return Z.map(e, (r) => {
-    if (!$(r))
+    if (!ee(r))
       return typeof r == "string" ? /* @__PURE__ */ o("span", { children: r }) : r;
     if (r.props.children) {
       const t = {
-        children: se(r.props.children)
+        children: ie(r.props.children)
       };
       r = W(r, t);
     }
     return r;
   });
 }
-const M = N("standard"), ie = N(!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,15 +239,15 @@ const M = N("standard"), ie = N(!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(ie.Provider, { value: i, children: s }),
+        /* @__PURE__ */ o(le.Provider, { value: i, children: s }),
         n
       ]
     }
   );
-}, Ve = g(ze), Te = g(
+}, Ve = h(ze), Te = h(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ o(
@@ -259,16 +259,16 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       }
     );
   }
-), Fe = g(
+), Fe = h(
   (e, r) => {
-    const { className: t, children: n, ...a } = e, s = A(ie), i = l(
+    const { className: t, children: n, ...a } = e, s = A(le), i = l(
       t,
       "max-md:rounded-b-3xl w-full",
       s ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
     );
-    if ($(n)) {
-      const c = Z.only(n);
-      return W(c, {
+    if (ee(n)) {
+      const d = Z.only(n);
+      return W(d, {
         // @ts-expect-error assume className prop is allowed
         className: i,
         ref: r,
@@ -298,7 +298,7 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       ref: r
     }
   );
-}, ht = g(Je), gt = g(
+}, gt = h(Je), ht = h(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ o(
@@ -311,9 +311,9 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       }
     );
   }
-), pt = g(
+), pt = h(
   (e, r) => {
-    const { bgColor: t, className: n, ...a } = e, s = oe(t);
+    const { bgColor: t, className: n, ...a } = e, s = se(t);
     return /* @__PURE__ */ o("div", { className: l(s, n), children: /* @__PURE__ */ o(
       "div",
       {
@@ -323,12 +323,12 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       }
     ) });
   }
-), At = g(
+), At = h(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ o("div", { className: l(t, "p-8 md:px-10"), ...n, ref: r });
   }
-), xt = g((e, r) => {
+), xt = h((e, r) => {
   const { className: t, ...n } = e;
   return /* @__PURE__ */ o(
     "a",
@@ -341,7 +341,7 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       ...n
     }
   );
-}), vt = g(
+}), vt = h(
   (e, r) => {
     const {
       children: t,
@@ -349,17 +349,17 @@ const M = N("standard"), ie = N(!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
-    ), h = R(s), b = h + "err", p = a || u;
+    ), g = R(s), b = g + "err", p = a || u;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ f("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
         /* @__PURE__ */ o(
           "input",
           {
-            id: h,
+            id: g,
             className: l(
               "checkbox checked:bg-green checked:border-green grid h-[1.25em] w-[1.25em] flex-none translate-y-[0.1em] cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2",
               {
@@ -369,9 +369,9 @@ const M = N("standard"), ie = N(!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 = N("standard"), ie = N(!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 = N("standard"), ie = N(!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 = N("standard"), ie = N(!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(
@@ -485,12 +485,12 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       "aria-live": "polite",
       ...n,
       children: [
-        /* @__PURE__ */ o(te, { className: "text-red flex-shrink-0" }),
+        /* @__PURE__ */ o(re, { className: "text-red flex-shrink-0" }),
         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) => {
@@ -549,11 +549,17 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       type: "button",
       "aria-disabled": t,
       onClick: a,
-      className: l(r, "w-full py-4 pl-4 md:py-8 ", {
-        "bg-blue-dark": !t,
-        "border-black bg-white": t && i !== "completed",
-        "border-green bg-green text-white": t && i === "completed"
-      }),
+      className: l(
+        r,
+        "border-blue-dark w-full rounded-t-lg border-2 py-4 pl-4 md:py-8 ",
+        {
+          "bg-blue-dark": !t,
+          "border-black bg-white": t && i !== "completed",
+          "border-green bg-green text-white": t && i === "completed",
+          "rounded-t-2xl md:rounded-t-3xl": n === 1,
+          "rounded-lg": t
+        }
+      ),
       children: /* @__PURE__ */ o(
         Ke,
         {
@@ -622,7 +628,7 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       ]
     }
   );
-}, le = N([
+}, Q = w([
   {
     activeStep: 1,
     formData: {}
@@ -630,25 +636,41 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
   () => {
   }
 ]);
+function Et() {
+  const [e] = A(Q);
+  return {
+    activeStep: e.activeStep,
+    formData: e.formData
+  };
+}
 function Xe(e) {
-  const [r, t] = A(le), n = I(async () => {
+  const [r, t] = A(Q), n = N(async () => {
     t({ type: "PREV_STEP" });
-  }, [t]), a = I(
-    (s) => {
+  }, [t]), a = N(
+    (d) => {
       t({
         type: "SET_FORM_STEP_DATA",
         formId: `form${e}`,
-        formValues: s
-      }), t({ type: "NEXT_STEP" });
+        formValues: d
+      });
     },
     [t, e]
+  ), s = N(() => {
+    t({ type: "NEXT_STEP" });
+  }, [t]), i = N(
+    (d) => {
+      a(d), s();
+    },
+    [s, a]
   );
   return {
     isActive: r.activeStep === e,
     activeStep: r.activeStep,
-    setActiveStep: (s) => t({ type: "SET_STEP", step: s }),
+    setActiveStep: (d) => t({ type: "SET_STEP", step: d }),
     previousFormStep: n,
-    submitAndNextFormStep: a,
+    nextFormStep: s,
+    submitAndNextFormStep: i,
+    setFormData: a,
     formData: r.formData
   };
 }
@@ -679,14 +701,14 @@ function Ye(e, r) {
       };
   }
 }
-function Et({ children: e }) {
-  const [r, t] = he(Ye, {
+function Rt({ children: e }) {
+  const [r, t] = ge(Ye, {
     activeStep: 1,
     formData: {}
   }), n = C(() => [r, t], [r, t]);
-  return /* @__PURE__ */ o(le.Provider, { value: n, children: e });
+  return /* @__PURE__ */ o(Q.Provider, { value: n, children: e });
 }
-const Rt = (e) => {
+const kt = (e) => {
   const {
     children: r,
     heading: t,
@@ -694,27 +716,22 @@ const Rt = (e) => {
     formStatus: a = "blank",
     onSubmit: s,
     className: i,
-    ...c
-  } = e, { isActive: m, setActiveStep: d, activeStep: u } = Xe(n), h = E(null), b = I(() => {
-    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 = h.current) == null || p.scrollIntoView({ behavior: "smooth" }));
+    m && ((p = g.current) == null || p.scrollIntoView({ behavior: "smooth" }));
   }, [m]), /* @__PURE__ */ f(
     "form",
     {
-      className: l(
-        "border-blue-dark relative block overflow-hidden rounded-lg border-2",
-        i,
-        {
-          "rounded-t-2xl md:rounded-t-3xl": n === 1,
-          "border-none": a === "completed" && !m
-        }
-      ),
+      className: l("block", i, {
+        "border-none": a === "completed" && !m
+      }),
       onSubmit: s,
-      ref: h,
-      ...c,
+      ref: g,
+      ...d,
       children: [
         /* @__PURE__ */ o(
           We,
@@ -726,32 +743,32 @@ const Rt = (e) => {
             children: t
           }
         ),
-        m && /* @__PURE__ */ o("div", { className: "p-6 md:p-10", children: r })
+        m && /* @__PURE__ */ o("div", { className: "border-blue-dark relative rounded-b-lg border-2 p-6 md:p-10", children: r })
       ]
     }
   );
 };
-function de(e) {
+function ce(e) {
   return e !== "vertical-split" && e !== "below-center" && e !== "below-left";
 }
-const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), kt = g((e, r) => {
+const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), St = h((e, r) => {
   const {
     bgColor: t = "white",
     children: n,
     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(
@@ -762,11 +779,11 @@ const V = N({ 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,
@@ -776,7 +793,7 @@ const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       ) })
     }
   );
-}), St = g(
+}), qt = h(
   (e, r) => {
     const { contentPosition: t } = A(V);
     return /* @__PURE__ */ f(
@@ -804,9 +821,9 @@ const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), qt = g(
+), 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",
       {
@@ -837,18 +854,18 @@ const V = N({ 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
         ]
       }
     );
   }
-), Lt = g(
+), Pt = h(
   (e, r) => {
     const { className: t, ...n } = e, { contentPosition: a } = A(V);
     return /* @__PURE__ */ o(
@@ -867,17 +884,17 @@ const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), ce = g((e, r) => {
+), de = h((e, r) => {
   const {
     className: t,
     isInvalid: n,
     size: a,
     as: s,
     type: i,
-    rightAddon: c,
+    rightAddon: d,
     leftAddon: m,
-    ...d
-  } = e, u = s ?? "input", h = Qe(u, i);
+    ...c
+  } = e, u = s ?? "input", g = Qe(u, i);
   return /* @__PURE__ */ f(
     "div",
     {
@@ -890,7 +907,7 @@ const V = N({ 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: [
@@ -902,11 +919,11 @@ const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             ref: r,
             className: "focus:none placeholder-gray w-full rounded-lg border-none px-4 py-3.5 focus:outline-none",
             size: a,
-            type: h,
-            ...d
+            type: g,
+            ...c
           }
         ),
-        c
+        d
       ]
     }
   );
@@ -923,16 +940,16 @@ const Mt = (e) => {
     e.icon,
     e.children
   ] });
-}, S = N({
-  setIsExpanded: y,
+}, S = w({
+  setIsExpanded: I,
   isExpanded: !1,
   collapsibleId: ""
-}), Pt = (e) => {
-  const { className: r, children: t, ...n } = e, a = _(), [s, i] = q(!1), c = C(
+}), zt = (e) => {
+  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(
@@ -943,7 +960,7 @@ const Mt = (e) => {
       children: /* @__PURE__ */ o("div", { className: "container", children: t })
     }
   ) }) });
-}, zt = (e) => {
+}, Vt = (e) => {
   const { className: r, children: t, ...n } = e, { isExpanded: a } = A(S);
   return /* @__PURE__ */ o(
     "nav",
@@ -959,7 +976,7 @@ const Mt = (e) => {
       children: t
     }
   );
-}, Vt = g(
+}, Tt = h(
   (e, r) => {
     const { active: t, className: n, children: a, ...s } = e;
     return /* @__PURE__ */ o(
@@ -996,7 +1013,7 @@ const Mt = (e) => {
       ]
     }
   );
-}, Tt = (e) => {
+}, Ft = (e) => {
   const { className: r, children: t, logo: n, ...a } = e;
   return /* @__PURE__ */ f(
     "div",
@@ -1010,7 +1027,7 @@ const Mt = (e) => {
       ]
     }
   );
-}, Ft = (e) => {
+}, Jt = (e) => {
   const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(S);
   return /* @__PURE__ */ o(
     "div",
@@ -1024,10 +1041,10 @@ const Mt = (e) => {
       children: t
     }
   );
-}, Jt = (e) => {
+}, jt = (e) => {
   const { isExpanded: r } = A(S), t = Le(!1);
   return !r || !t ? null : /* @__PURE__ */ o(O, { children: e.children });
-}, w = 2, T = N({ currentPage: 0, pageCount: 0 }), jt = (e) => {
+}, y = 2, T = w({ currentPage: 0, pageCount: 0 }), Ot = (e) => {
   const {
     className: r,
     page: t,
@@ -1035,30 +1052,30 @@ const Mt = (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)),
       pageCount: Math.max(1, n)
     }),
     [t, n]
-  ), h = (b) => (p) => {
+  ), g = (b) => (p) => {
     a && (p.preventDefault(), a(b));
   };
   return /* @__PURE__ */ o(T.Provider, { value: u, children: /* @__PURE__ */ f(
     "nav",
     {
       className: l("flex justify-center gap-2 sm:gap-4", r),
-      ...d,
+      ...c,
       children: [
         /* @__PURE__ */ o(
           He,
           {
             "aria-label": m,
             href: s(t - 1),
-            onClick: h(t - 1)
+            onClick: g(t - 1)
           }
         ),
         /* @__PURE__ */ o(
@@ -1066,17 +1083,17 @@ const Mt = (e) => {
           {
             page: 1,
             href: s(1),
-            onClick: h(1),
+            onClick: g(1),
             "aria-label": i(1),
             selected: t === 1
           }
         ),
-        n > 2 + w * 2 && t > w + 2 && /* @__PURE__ */ o(Ge, {}),
-        /* @__PURE__ */ o(De, { children: (b) => /* @__PURE__ */ o(
+        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(De, {}),
+        /* @__PURE__ */ o(Ge, { children: (b) => /* @__PURE__ */ o(
           G,
           {
             href: s(b),
-            onClick: h(b),
+            onClick: g(b),
             "aria-label": i(b),
             page: b,
             selected: b === t
@@ -1086,18 +1103,18 @@ const Mt = (e) => {
         /* @__PURE__ */ o(
           Be,
           {
-            "aria-label": c,
+            "aria-label": d,
             href: s(t + 1),
-            onClick: h(t + 1)
+            onClick: g(t + 1)
           }
         )
       ]
     }
   ) });
-}, Be = g((e, r) => {
+}, Be = h((e, r) => {
   const { currentPage: t, pageCount: n } = A(T), a = t >= n;
   return /* @__PURE__ */ o(
-    Q,
+    U,
     {
       "aria-hidden": a,
       className: a ? "invisible" : void 0,
@@ -1107,10 +1124,10 @@ const Mt = (e) => {
       children: /* @__PURE__ */ o(ve, {})
     }
   );
-}), He = g((e, r) => {
+}), He = h((e, r) => {
   const { currentPage: t } = A(T), n = t <= 1;
   return /* @__PURE__ */ o(
-    Q,
+    U,
     {
       "aria-hidden": n,
       className: n ? "invisible" : void 0,
@@ -1120,7 +1137,7 @@ const Mt = (e) => {
       children: /* @__PURE__ */ o(Ne, {})
     }
   );
-}), Q = g((e, r) => {
+}), U = h((e, r) => {
   const { className: t, ...n } = e;
   return /* @__PURE__ */ o(
     "a",
@@ -1133,39 +1150,39 @@ const Mt = (e) => {
       ...n
     }
   );
-}), Ge = () => /* @__PURE__ */ o("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), De = ({ children: e }) => {
+}), De = () => /* @__PURE__ */ o("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), Ge = ({ children: e }) => {
   const { currentPage: r, pageCount: t } = A(T), n = Math.min(
-    Math.max(2 + w * 2, r + w),
+    Math.max(2 + y * 2, r + y),
     t
   );
   let a = Math.max(
-    Math.min(r - w, n - w * 2),
+    Math.min(r - y, n - y * 2),
     1
   );
-  return a - w === 0 && (a = a - 1), Array.from({ length: n - a }, (i, c) => a + c + 1).map((i) => e(i));
-}, G = g((e, r) => {
+  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(Q, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
-}), me = N({
+  return /* @__PURE__ */ o(U, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
+}), me = w({
   defaultValue: void 0,
   isControlled: !1,
   name: void 0,
-  onChange: y,
+  onChange: I,
   required: !1,
   value: void 0,
   error: !1
-}), Ot = g((e, r) => {
-  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: c, onChange: m, required: d, value: u, error: h } = A(me);
+}), Zt = h((e, r) => {
+  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",
       {
-        className: l("radio", h && "border-red"),
+        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
@@ -1173,27 +1190,27 @@ const Mt = (e) => {
     ),
     t
   ] });
-}), Zt = g(
+}), Wt = h(
   (e, r) => {
     const t = "value" in e, {
       className: n,
       defaultValue: a,
       description: s,
       error: i,
-      id: c,
+      id: d,
       children: m,
-      label: d,
+      label: c,
       name: u,
-      onChange: h,
+      onChange: g,
       required: b,
       value: p,
       ...v
-    } = e, x = I(
+    } = e, x = N(
       (ue) => {
         const be = ue.target.value;
-        h == null || h(be);
+        g == null || g(be);
       },
-      [h]
+      [g]
     ), F = C(
       () => ({
         defaultValue: a,
@@ -1205,33 +1222,33 @@ const Mt = (e) => {
         error: !!i
       }),
       [a, t, u, x, b, p, i]
-    ), J = R(c), U = `${J}:label`, B = `${J}:help`, H = 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",
       {
         "aria-describedby": l({
-          [H]: j,
-          [B]: s
+          [D]: j,
+          [H]: s
         }) || void 0,
         "aria-invalid": !!i,
-        "aria-labelledby": d ? U : 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: U, isRequired: b, isInvalid: !!i, children: d }),
-          s && /* @__PURE__ */ o(P, { id: B, 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: H, children: j })
+          j && /* @__PURE__ */ o(k, { id: D, children: j })
         ]
       }
     ) });
   }
-), _e = g(
+), _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",
         {
@@ -1239,7 +1256,7 @@ const Mt = (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,
@@ -1247,17 +1264,17 @@ const Mt = (e) => {
         }
       ),
       /* @__PURE__ */ o(
-        ee,
+        te,
         {
           className: l(
             "pointer-events-none absolute bottom-0 top-0 my-auto",
-            c ? "right-3.5" : "right-4"
+            d ? "right-3.5" : "right-4"
           )
         }
       )
     ] });
   }
-), Wt = g(
+), Kt = h(
   (e, r) => {
     const {
       description: t,
@@ -1265,11 +1282,11 @@ const Mt = (e) => {
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: h } = 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 || h;
+    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
@@ -1280,13 +1297,13 @@ const Mt = (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,
@@ -1297,10 +1314,10 @@ const Mt = (e) => {
       x && /* @__PURE__ */ o(k, { id: v, children: x })
     ] });
   }
-), Kt = (e) => {
+), Xt = (e) => {
   const { heading: r, children: t, closeSnackbar: n } = e, [a, s] = q(!1);
   return /* @__PURE__ */ o("div", { className: "container max-w-[59rem]", children: /* @__PURE__ */ o("div", { className: "bg-orange-light px-8 py-4 max-md:p-4", children: /* @__PURE__ */ f("div", { className: "snackbar grid items-center", children: [
-    /* @__PURE__ */ o(re, { className: "text-orange snackbar-icon mr-4 self-start md:mr-8 md:text-2xl" }),
+    /* @__PURE__ */ o(ne, { className: "text-orange snackbar-icon mr-4 self-start md:mr-8 md:text-2xl" }),
     /* @__PURE__ */ o(
       "h3",
       {
@@ -1315,18 +1332,18 @@ const Mt = (e) => {
     ),
     /* @__PURE__ */ f("div", { className: "snackbar-actions flex justify-end gap-4 max-md:mt-3 md:ml-4", children: [
       /* @__PURE__ */ o(
-        D,
+        _,
         {
           "aria-expanded": a,
           onClick: () => s(!a),
           children: a ? "Les mindre" : "Les mer"
         }
       ),
-      /* @__PURE__ */ o(D, { onClick: n, children: "Ok" })
+      /* @__PURE__ */ o(_, { onClick: n, children: "Ok" })
     ] }),
     a && t
   ] }) }) });
-}, D = (e) => /* @__PURE__ */ o(
+}, _ = (e) => /* @__PURE__ */ o(
   "button",
   {
     className: l(
@@ -1336,7 +1353,7 @@ const Mt = (e) => {
     ...e,
     children: e.children
   }
-), Xt = (e) => /* @__PURE__ */ o(
+), Yt = (e) => /* @__PURE__ */ o(
   "div",
   {
     className: "snackbar-content my-4 max-h-[50vh] max-w-prose overflow-y-auto",
@@ -1380,7 +1397,7 @@ const Mt = (e) => {
   }
 );
 $e.Item = et;
-const Yt = g(
+const Qt = h(
   (e, r) => {
     const {
       description: t,
@@ -1388,11 +1405,11 @@ const Yt = g(
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: h } = 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 || h;
+    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
@@ -1403,14 +1420,14 @@ const Yt = g(
           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,
@@ -1421,7 +1438,7 @@ const Yt = g(
       x && /* @__PURE__ */ o(k, { id: v, children: x })
     ] });
   }
-), Qt = g(
+), Ut = h(
   (e, r) => {
     const {
       description: t,
@@ -1429,12 +1446,12 @@ const Yt = g(
       id: a,
       label: s,
       type: i = "text",
-      disableValidation: c = !1,
+      disableValidation: d = !1,
       ...m
-    } = e, d = E(null), { validity: u, validationMessage: h } = L(
-      d,
-      !c
-    ), b = R(a), p = b + "help", v = b + "err", x = n || h, 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,
@@ -1445,9 +1462,9 @@ const Yt = g(
           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,
@@ -1469,15 +1486,15 @@ 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,
-  ht as Card,
+  gt as Card,
   At as CardContent,
-  gt as CardImage,
+  ht as CardImage,
   xt as CardLinkOverlay,
   pt as CardList,
   vt as Checkbox,
@@ -1487,41 +1504,42 @@ export {
   It as FormError,
   k as FormErrorMessage,
   Ze as FormHeading,
-  P as FormHelperText,
+  M as FormHelperText,
   z as FormLabel,
-  Rt as FormStep,
+  kt as FormStep,
   We as FormStepHeader,
   Ke as FormStepHeaderContent,
-  Et as FormStepProvider,
+  Rt as FormStepProvider,
   Ct as FormSuccess,
-  kt as Hero,
-  Lt as HeroActions,
-  qt as HeroContent,
+  St as Hero,
+  Pt as HeroActions,
+  Lt as HeroContent,
   V as HeroContext,
-  St as HeroImage,
-  ce as Input,
+  qt as HeroImage,
+  de as Input,
   Mt as Link,
-  Pt as Navbar,
-  Ft as NavbarCollapsible,
-  Tt as NavbarContent,
-  Jt as NavbarExpandedMobileContent,
-  Vt as NavbarItem,
-  zt as NavbarItems,
-  jt as Pagination,
-  Ot as Radio,
-  Zt as RadioGroup,
-  Wt as Select,
-  Kt as Snackbar,
-  D as SnackbarButton,
-  Xt as SnackbarContent,
+  zt as Navbar,
+  Jt as NavbarCollapsible,
+  Ft as NavbarContent,
+  jt as NavbarExpandedMobileContent,
+  Tt as NavbarItem,
+  Vt as NavbarItems,
+  Ot as Pagination,
+  Zt as Radio,
+  Wt as RadioGroup,
+  Kt as Select,
+  Xt as Snackbar,
+  _ as SnackbarButton,
+  Yt as SnackbarContent,
   $e as StepList,
   et as StepListItem,
-  Yt as TextArea,
-  Qt as TextField,
-  oe as useBlockBackgroundColor,
+  Qt as TextArea,
+  Ut as TextField,
+  se as useBlockBackgroundColor,
   R as useFallbackId,
+  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.2",
+  "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": {
-    "@react-hookz/web": "23.0.0",
-    "@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": {