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

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 { useMediaQuery as ae, useUpdateEffect as ye } from "@react-hookz/web";
 import K from "@react-hook/merged-ref";
-const y = () => {
+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,
@@ -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,8 +61,8 @@ 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;
@@ -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)", ct = (e = !1) => ae(qe, { initializeWithValue: e });
+function se(e) {
   switch (e) {
     case "gray":
       return "bg-gray-lightest";
@@ -107,16 +107,16 @@ 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) => {
+  const [t, n] = q("indeterminate"), [a, s] = q(), i = N((d) => {
     d.target.checkValidity() && (n("valid"), s(void 0));
-  }, []), c = I(
+  }, []), c = N(
     (d) => {
       t !== "indeterminate" && d.target.checkValidity() && (n("valid"), s(void 0));
     },
     [t]
-  ), m = I((d) => {
+  ), m = N((d) => {
     d.preventDefault();
     const u = d.target.validationMessage;
     s(u), n("invalid");
@@ -131,7 +131,7 @@ function L(e, r = !0) {
   }, [r, c]), { validity: t, validationMessage: a };
 }
 function R(e) {
-  const r = _();
+  const r = $();
   return e ?? r;
 }
 const mt = (e) => {
@@ -142,7 +142,7 @@ const mt = (e) => {
     heading: a,
     image: s,
     ...i
-  } = e, c = oe(r);
+  } = 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: [
     s,
     /* @__PURE__ */ f("div", { className: "max-w-prose", children: [
@@ -167,7 +167,7 @@ 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,
@@ -200,30 +200,30 @@ const mt = (e) => {
     }
   ) });
 }), Pe = (e) => /* @__PURE__ */ f(O, { children: [
-  se(e.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 M = w("standard"), le = w(!0), ze = (e, r) => {
   const {
     as: t = "div",
     body: n,
@@ -242,12 +242,12 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
       ...c,
       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,14 +259,14 @@ 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)) {
+    if (ee(n)) {
       const c = Z.only(n);
       return W(c, {
         // @ts-expect-error assume className prop is allowed
@@ -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,
@@ -353,13 +353,13 @@ const M = N("standard"), ie = N(!0), ze = (e, r) => {
     } = e, m = E(null), { validity: d, 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",
               {
@@ -485,7 +485,7 @@ 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
       ]
     }
@@ -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(
+    (c) => {
       t({
         type: "SET_FORM_STEP_DATA",
         formId: `form${e}`,
-        formValues: s
-      }), t({ type: "NEXT_STEP" });
+        formValues: c
+      });
     },
     [t, e]
+  ), s = N(() => {
+    t({ type: "NEXT_STEP" });
+  }, [t]), i = N(
+    (c) => {
+      a(c), s();
+    },
+    [s, a]
   );
   return {
     isActive: r.activeStep === e,
     activeStep: r.activeStep,
-    setActiveStep: (s) => t({ type: "SET_STEP", step: s }),
+    setActiveStep: (c) => t({ type: "SET_STEP", step: c }),
     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,
@@ -695,25 +717,20 @@ const Rt = (e) => {
     onSubmit: s,
     className: i,
     ...c
-  } = e, { isActive: m, setActiveStep: d, activeStep: u } = Xe(n), h = E(null), b = I(() => {
+  } = e, { isActive: m, setActiveStep: d, activeStep: u } = Xe(n), g = E(null), b = N(() => {
     n < u && d(n);
   }, [u, n, d]);
   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,
+      ref: g,
       ...c,
       children: [
         /* @__PURE__ */ o(
@@ -726,7 +743,7 @@ 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 })
       ]
     }
   );
@@ -734,7 +751,7 @@ const Rt = (e) => {
 function de(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,
@@ -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,7 +821,7 @@ 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);
     return /* @__PURE__ */ f(
@@ -848,7 +865,7 @@ const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), Lt = g(
+), Mt = h(
   (e, r) => {
     const { className: t, ...n } = e, { contentPosition: a } = A(V);
     return /* @__PURE__ */ o(
@@ -867,7 +884,7 @@ const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), ce = g((e, r) => {
+), ce = h((e, r) => {
   const {
     className: t,
     isInvalid: n,
@@ -877,7 +894,7 @@ const V = N({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     rightAddon: c,
     leftAddon: m,
     ...d
-  } = e, u = s ?? "input", h = Qe(u, i);
+  } = e, u = s ?? "input", g = Qe(u, i);
   return /* @__PURE__ */ f(
     "div",
     {
@@ -902,7 +919,7 @@ 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,
+            type: g,
             ...d
           }
         ),
@@ -917,18 +934,18 @@ function Qe(e, r) {
   if (e === "input")
     return "text";
 }
-const Mt = (e) => {
+const Pt = (e) => {
   let r = "";
   return e.icon && (r = "inline-flex items-center gap-2"), /* @__PURE__ */ f("a", { className: r, href: e.href, children: [
     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), c = C(
     () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
     [s, a]
   );
@@ -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,
@@ -1044,7 +1061,7 @@ const Mt = (e) => {
       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(
@@ -1058,7 +1075,7 @@ const Mt = (e) => {
           {
             "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
@@ -1088,16 +1105,16 @@ const Mt = (e) => {
           {
             "aria-label": c,
             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,34 +1150,34 @@ 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, c) => a + c + 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: c, onChange: m, required: d, 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,
@@ -1173,7 +1190,7 @@ const Mt = (e) => {
     ),
     t
   ] });
-}), Zt = g(
+}), Wt = h(
   (e, r) => {
     const t = "value" in e, {
       className: n,
@@ -1184,16 +1201,16 @@ const Mt = (e) => {
       children: m,
       label: d,
       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,30 +1222,30 @@ 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(c), 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": d ? 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 }),
+          d && /* @__PURE__ */ o(z, { id: B, isRequired: b, isInvalid: !!i, children: d }),
+          s && /* @__PURE__ */ o(P, { 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: [
@@ -1247,7 +1264,7 @@ const Mt = (e) => {
         }
       ),
       /* @__PURE__ */ o(
-        ee,
+        te,
         {
           className: l(
             "pointer-events-none absolute bottom-0 top-0 my-auto",
@@ -1257,7 +1274,7 @@ const Mt = (e) => {
       )
     ] });
   }
-), Wt = g(
+), Kt = h(
   (e, r) => {
     const {
       description: t,
@@ -1266,10 +1283,10 @@ const Mt = (e) => {
       label: s,
       disableValidation: i = !1,
       ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: h } = L(
+    } = e, m = E(null), d = 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,
@@ -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,
@@ -1389,10 +1406,10 @@ const Yt = g(
       label: s,
       disableValidation: i = !1,
       ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: h } = L(
+    } = e, m = E(null), d = 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,
@@ -1421,7 +1438,7 @@ const Yt = g(
       x && /* @__PURE__ */ o(k, { id: v, children: x })
     ] });
   }
-), Qt = g(
+), Ut = h(
   (e, r) => {
     const {
       description: t,
@@ -1431,10 +1448,10 @@ const Yt = g(
       type: i = "text",
       disableValidation: c = !1,
       ...m
-    } = e, d = E(null), { validity: u, validationMessage: h } = L(
+    } = e, d = E(null), { validity: u, validationMessage: g } = L(
       d,
       !c
-    ), b = R(a), p = b + "help", v = b + "err", x = n || h, F = K(d, r);
+    ), b = R(a), p = b + "help", v = b + "err", x = n || g, F = K(d, r);
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
@@ -1475,9 +1492,9 @@ export {
   bt as Button,
   M 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,
@@ -1489,37 +1506,38 @@ export {
   Ze as FormHeading,
   P 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,
+  Mt as HeroActions,
+  Lt as HeroContent,
   V as HeroContext,
-  St as HeroImage,
+  qt as HeroImage,
   ce 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,
+  Pt as Link,
+  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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.14.0-beta.2",
+  "version": "1.14.0-beta.3",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,7 +17,6 @@
   ],
   "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",
@@ -41,6 +40,7 @@
   },
   "dependencies": {
     "@react-hook/merged-ref": "1.3.2",
+    "@react-hookz/web": "23.0.0",
     "clsx": "1.2.1",
     "react-collapsed": "4.0.2",
     "@obosbbl/grunnmuren-icons": "^0.6.0"