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

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

@@ -5,6 +5,7 @@ interface FormStepProps extends FormProps {
     heading: string;
     formStatus: FormStatus;
     onSubmit: FormEventHandler<HTMLFormElement>;
+    onHeaderClick?: (step: number) => void;
 }
 export interface FormStepData<T> {
     formId: string;

package/dist/grunnmuren.mjs

@@ -3,13 +3,13 @@ import { jsx as o, jsxs as f, Fragment as O } from "react/jsx-runtime";
 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 c from "clsx";
 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 });
+  return /* @__PURE__ */ o("div", { className: c(r, "flex flex-col gap-2"), ...t });
 }, Y = w({
   isExpanded: !1,
   setExpanded: I,
@@ -28,7 +28,7 @@ const I = () => {
   return /* @__PURE__ */ o(Y.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ o(
     "div",
     {
-      className: l(
+      className: c(
         r,
         "rounded-sm border-b-2 border-l-4 border-solid",
         i.isExpanded ? "border-l-green-dark" : "border-l-green"
@@ -37,17 +37,17 @@ const I = () => {
     }
   ) });
 }, Re = (e) => {
-  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: d } = A(Y), m = s({ onClick: () => i(!d) });
+  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: d } = A(Y), u = s({ onClick: () => i(!d) });
   return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ f(
     "button",
     {
-      className: l(
+      className: c(
         t,
         "focus-visible:outline-blue-dark aria-expanded:bg-green-dark group flex min-h-[4rem] w-full items-center justify-between px-5 py-4 text-left text-lg font-semibold focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 aria-expanded:text-white"
       ),
       ...a,
-      ...m,
-      id: oe(m["aria-controls"]),
+      ...u,
+      id: oe(u["aria-controls"]),
       children: [
         r,
         /* @__PURE__ */ o(
@@ -59,19 +59,19 @@ const I = () => {
       ]
     }
   ) });
-}, ke = (e) => {
+}, Se = (e) => {
   const { getCollapseProps: r } = A(Y), { className: t, ...n } = e, a = r();
-  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": oe(a.id), children: /* @__PURE__ */ o("div", { className: l(t, "p-5 pb-10"), ...n }) });
+  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": oe(a.id), children: /* @__PURE__ */ o("div", { className: c(t, "p-5 pb-10"), ...n }) });
 }, oe = (e) => e + "toggle";
 X.Item = Ee;
 X.Header = Re;
-X.Content = ke;
+X.Content = Se;
 const ct = (e) => {
   const { className: r, children: t, heading: n, severity: a = "alert", ...s } = e;
   return /* @__PURE__ */ o(
     "section",
     {
-      className: l(r, "p-4 md:py-8", {
+      className: c(r, "p-4 md:py-8", {
         "bg-orange-light": a === "info",
         "bg-red-light": a === "alert"
       }),
@@ -79,7 +79,7 @@ const ct = (e) => {
       ...s,
       children: /* @__PURE__ */ f("div", { className: "flex justify-center", children: [
         /* @__PURE__ */ o(
-          Se,
+          ke,
           {
             className: "mr-4 flex-none md:mr-8 md:text-2xl",
             severity: a
@@ -92,7 +92,7 @@ const ct = (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 });
+}, ke = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(re, { className: c(r, "text-red") }) : /* @__PURE__ */ o(ne, { className: c(r, "text-orange") }), qe = "(prefers-reduced-motion: reduce)", dt = (e = !1) => ae(qe, { initializeWithValue: e });
 function se(e) {
   switch (e) {
     case "gray":
@@ -109,24 +109,24 @@ 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((c) => {
-    c.target.checkValidity() && (n("valid"), s(void 0));
+  const [t, n] = q("indeterminate"), [a, s] = q(), i = N((l) => {
+    l.target.checkValidity() && (n("valid"), s(void 0));
   }, []), d = N(
-    (c) => {
-      t !== "indeterminate" && c.target.checkValidity() && (n("valid"), s(void 0));
+    (l) => {
+      t !== "indeterminate" && l.target.checkValidity() && (n("valid"), s(void 0));
     },
     [t]
-  ), m = N((c) => {
-    c.preventDefault();
-    const u = c.target.validationMessage;
-    s(u), n("invalid");
+  ), u = N((l) => {
+    l.preventDefault();
+    const m = l.target.validationMessage;
+    s(m), n("invalid");
   }, []);
   return fe(() => {
-    var u;
-    const { current: c } = e;
+    var m;
+    const { current: l } = e;
     return r && // @ts-expect-error respect the <form noValidate> attribute if we are rendered inside a form
-    ((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);
+    ((m = l == null ? void 0 : l.form) == null ? void 0 : m.noValidate) !== !0 && (l == null || l.addEventListener("blur", i), l == null || l.addEventListener("input", d), l == null || l.addEventListener("invalid", u)), () => {
+      l == null || l.removeEventListener("blur", i), l == null || l.removeEventListener("input", d), l == null || l.removeEventListener("invalid", u);
     };
   }, [r, d]), { validity: t, validationMessage: a };
 }
@@ -143,7 +143,7 @@ const mt = (e) => {
     image: s,
     ...i
   } = 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: [
+  return /* @__PURE__ */ o("article", { className: c(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 }),
@@ -175,28 +175,28 @@ const mt = (e) => {
     href: s,
     loading: i,
     type: d = "button",
-    variant: m = "primary",
-    ...c
-  } = e, u = A(P), b = Pe[`${a ?? u}-${m}`], p = l(n, b, "button"), v = i ? /* @__PURE__ */ o(Me, { children: t }) : t;
+    variant: u = "primary",
+    ...l
+  } = e, m = A(P), b = Pe[`${a ?? m}-${u}`], p = c(n, b, "button"), x = i ? /* @__PURE__ */ o(Me, { children: t }) : t;
   return /* @__PURE__ */ o(O, { children: s ? /* @__PURE__ */ o(
     "a",
     {
       "aria-busy": i ? !0 : void 0,
-      ...c,
+      ...l,
       href: s,
       ref: r,
       className: p,
-      children: v
+      children: x
     }
   ) : /* @__PURE__ */ o(
     "button",
     {
       "aria-busy": i ? !0 : void 0,
-      ...c,
+      ...l,
       type: d,
       ref: r,
       className: p,
-      children: v
+      children: x
     }
   ) });
 }), Me = (e) => /* @__PURE__ */ f(O, { children: [
@@ -235,7 +235,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     t,
     {
-      className: l(
+      className: c(
         a,
         "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0"
       ),
@@ -253,7 +253,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
     return /* @__PURE__ */ o(
       "div",
       {
-        className: l(t, "md:mx-18 self-center"),
+        className: c(t, "md:mx-18 self-center"),
         ref: r,
         ...n
       }
@@ -261,7 +261,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   }
 ), Fe = h(
   (e, r) => {
-    const { className: t, children: n, ...a } = e, s = A(le), i = l(
+    const { className: t, children: n, ...a } = e, s = A(le), i = c(
       t,
       "max-md:rounded-b-3xl w-full",
       s ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
@@ -290,7 +290,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(
     t,
     {
-      className: l(n, "relative overflow-hidden rounded-3xl", {
+      className: c(n, "relative overflow-hidden rounded-3xl", {
         "border-2 border-solid bg-white": a === "white",
         "bg-gray-light": a === "gray"
       }),
@@ -304,7 +304,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
     return /* @__PURE__ */ o(
       "img",
       {
-        className: l(t, "w-full object-cover"),
+        className: c(t, "w-full object-cover"),
         loading: "lazy",
         ...n,
         ref: r
@@ -314,7 +314,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
 ), pt = h(
   (e, r) => {
     const { bgColor: t, className: n, ...a } = e, s = se(t);
-    return /* @__PURE__ */ o("div", { className: l(s, n), children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("div", { className: c(s, n), children: /* @__PURE__ */ o(
       "div",
       {
         className: "container grid grid-cols-1 gap-12 py-16 md:grid-cols-2 md:py-20 lg:py-24",
@@ -326,14 +326,14 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
 ), At = h(
   (e, r) => {
     const { className: t, ...n } = e;
-    return /* @__PURE__ */ o("div", { className: l(t, "p-8 md:px-10"), ...n, ref: r });
+    return /* @__PURE__ */ o("div", { className: c(t, "p-8 md:px-10"), ...n, ref: r });
   }
 ), xt = h((e, r) => {
   const { className: t, ...n } = e;
   return /* @__PURE__ */ o(
     "a",
     {
-      className: l(
+      className: c(
         t,
         "no-underline before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full hover:underline"
       ),
@@ -350,17 +350,17 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
       id: s,
       disableValidation: i = !1,
       ...d
-    } = e, m = E(null), { validity: c, validationMessage: u } = L(
-      m,
+    } = e, u = E(null), { validity: l, validationMessage: m } = L(
+      u,
       !i
-    ), g = R(s), b = g + "err", p = a || u;
+    ), g = R(s), b = g + "err", p = a || m;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ f("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
+      /* @__PURE__ */ f("label", { className: c(n, "flex cursor-pointer gap-2.5"), children: [
         /* @__PURE__ */ o(
           "input",
           {
             id: g,
-            className: l(
+            className: c(
               "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",
               {
                 "border-gray-dark focus:ring-black": !a,
@@ -371,12 +371,12 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
             type: "checkbox",
             ...d,
             "aria-describedby": p ? b : void 0,
-            "aria-invalid": !!a || c === "invalid"
+            "aria-invalid": !!a || l === "invalid"
           }
         ),
         t
       ] }),
-      p && /* @__PURE__ */ o(k, { id: b, children: p })
+      p && /* @__PURE__ */ o(S, { id: b, children: p })
     ] });
   }
 ), je = {
@@ -398,17 +398,17 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         "inline-flex items-center gap-0.5 overflow-hidden rounded-lg border-2 text-sm font-semibold",
         i,
         r
       ),
       children: [
-        n && /* @__PURE__ */ o("div", { className: l("px-3 py-2", d), children: n }),
+        n && /* @__PURE__ */ o("div", { className: c("px-3 py-2", d), children: n }),
         /* @__PURE__ */ o(
           "div",
           {
-            className: l("flex-1 px-4 py-2", {
+            className: c("flex-1 px-4 py-2", {
               "bg-white": s === "outline"
             }),
             children: a
@@ -422,7 +422,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(
     "footer",
     {
-      className: l(
+      className: c(
         r,
         // calculated height for psuedo element fixes rendering artifict that sometimes occurs on specific screen sizes and zoom levels
         "bg-blue pt-18 relative pb-12 text-white before:absolute before:-top-px before:left-0 before:right-0 before:h-[calc(1.5rem_+_1px)] before:rounded-b-3xl before:bg-white "
@@ -436,7 +436,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "form",
     {
-      className: l(
+      className: c(
         n,
         "border-blue-dark block overflow-hidden rounded-b-lg rounded-t-3xl border-2"
       ),
@@ -452,7 +452,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(
     "h2",
     {
-      className: l(
+      className: c(
         r,
         "bg-blue-dark p-6 text-xl font-bold text-white md:px-10 md:py-8 md:text-2xl"
       ),
@@ -465,7 +465,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
     "div",
     {
       "aria-live": "polite",
-      className: l(
+      className: c(
         r,
         "border-red bg-red-light rounded-lg border-2 p-6 text-sm"
       ),
@@ -473,12 +473,12 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
       children: "Beklager! Noe gikk dessverre galt under innesendingen av skjemaet. Prøv gjerne igjen om en stund."
     }
   );
-}, k = (e) => {
+}, S = (e) => {
   const { children: r, className: t, ...n } = e;
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         t,
         "bg-red-light text-red flex items-center gap-2 rounded px-2 py-1 text-sm"
       ),
@@ -492,19 +492,19 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   );
 }, M = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ o("div", { className: l(r, "text-gray-dark text-sm"), ...n, children: t });
+  return /* @__PURE__ */ o("div", { className: c(r, "text-gray-dark text-sm"), ...n, children: t });
 }, z = (e) => {
   const { className: r, children: t, isRequired: n, isInvalid: a, ...s } = e;
   return /* @__PURE__ */ f(
     "label",
     {
-      className: l(r, "block cursor-pointer font-semibold"),
+      className: c(r, "block cursor-pointer font-semibold"),
       ...s,
       children: [
         n && /* @__PURE__ */ o(
           "span",
           {
-            className: l(
+            className: c(
               "mr-1 select-none",
               a ? "text-red" : "text-blue"
             ),
@@ -520,7 +520,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         r,
         "bg-gray-lightest flex flex-col gap-8 p-8 text-center"
       ),
@@ -549,7 +549,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
       type: "button",
       "aria-disabled": t,
       onClick: a,
-      className: l(
+      className: c(
         r,
         "border-blue-dark w-full rounded-t-lg border-2 py-4 pl-4 md:py-8 ",
         {
@@ -592,7 +592,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "h2",
     {
-      className: l(
+      className: c(
         "grid grid-cols-[auto_1fr] grid-rows-[1fr_auto] items-center text-left text-xl font-bold md:text-2xl",
         {
           "text-white": !r
@@ -602,7 +602,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
         /* @__PURE__ */ o(
           "div",
           {
-            className: l(
+            className: c(
               "row-span-2 mr-4 flex h-10 w-10 items-center justify-center self-center rounded-full border-2 font-bold md:h-12 md:w-12",
               {
                 "border-white text-white": !r,
@@ -618,7 +618,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
         r && /* @__PURE__ */ o(
           "div",
           {
-            className: l(
+            className: c(
               "text-base font-normal",
               a === "completed" ? "text-white" : "text-black"
             ),
@@ -708,7 +708,7 @@ function Rt({ children: e }) {
   }), n = C(() => [r, t], [r, t]);
   return /* @__PURE__ */ o(Q.Provider, { value: n, children: e });
 }
-const kt = (e) => {
+const St = (e) => {
   const {
     children: r,
     heading: t,
@@ -716,34 +716,35 @@ const kt = (e) => {
     formStatus: a = "blank",
     onSubmit: s,
     className: i,
-    ...d
-  } = e, { isActive: m, setActiveStep: c, activeStep: u } = Xe(n), g = E(null), b = N(() => {
-    n < u && c(n);
-  }, [u, n, c]);
+    onHeaderClick: d,
+    ...u
+  } = e, { isActive: l, setActiveStep: m, activeStep: g } = Xe(n), b = E(null), p = N(() => {
+    n < g && (d == null || d(n), m(n));
+  }, [g, n, m, d]);
   return ye(() => {
-    var p;
-    m && ((p = g.current) == null || p.scrollIntoView({ behavior: "smooth" }));
-  }, [m]), /* @__PURE__ */ f(
+    var x;
+    l && ((x = b.current) == null || x.scrollIntoView({ behavior: "smooth" }));
+  }, [l]), /* @__PURE__ */ f(
     "form",
     {
-      className: l("block", i, {
-        "border-none": a === "completed" && !m
+      className: c("block", i, {
+        "border-none": a === "completed" && !l
       }),
       onSubmit: s,
-      ref: g,
-      ...d,
+      ref: b,
+      ...u,
       children: [
         /* @__PURE__ */ o(
           We,
           {
             step: n,
             formStatus: a,
-            collapsed: !m,
-            onClick: b,
+            collapsed: !l,
+            onClick: p,
             children: t
           }
         ),
-        m && /* @__PURE__ */ o("div", { className: "border-blue-dark relative rounded-b-lg border-2 p-6 md:p-10", children: r })
+        l && /* @__PURE__ */ o("div", { className: "border-blue-dark relative rounded-b-lg border-2 p-6 md:p-10", children: r })
       ]
     }
   );
@@ -751,7 +752,7 @@ const kt = (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) => {
+const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), kt = h((e, r) => {
   const {
     bgColor: t = "white",
     children: n,
@@ -759,30 +760,30 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     contentPosition: s = "below-center",
     image: i,
     ...d
-  } = e, m = i != null, c = m ? s : "below-center", u = C(
+  } = e, u = i != null, l = u ? s : "below-center", m = C(
     () => ({
       bgColor: t,
-      contentPosition: c,
-      hasImage: m
+      contentPosition: l,
+      hasImage: u
     }),
-    [t, c, m]
+    [t, l, u]
   );
   return /* @__PURE__ */ o(
     P.Provider,
     {
       value: t === "white" ? "standard" : "mint",
-      children: /* @__PURE__ */ o(V.Provider, { value: u, children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ o(V.Provider, { value: m, children: /* @__PURE__ */ f(
         "div",
         {
-          className: l(
+          className: c(
             a,
             // 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%]": c === "vertical-split"
+              "md:grid-cols-[50%,50%]": l === "vertical-split"
             }
           ),
-          style: ce(c) ? { gridTemplateAreas: '"hero"' } : void 0,
+          style: ce(l) ? { gridTemplateAreas: '"hero"' } : void 0,
           ...d,
           ref: r,
           children: [
@@ -799,7 +800,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     return /* @__PURE__ */ f(
       "picture",
       {
-        className: l(e.className, "aspect-w-6 aspect-h-7 block", {
+        className: c(e.className, "aspect-w-6 aspect-h-7 block", {
           "sm:aspect-w-8 sm:aspect-h-4": t !== "vertical-split",
           // calculate a square aspect ratio
           "sm:aspect-w-8 sm:aspect-h-8": t === "vertical-split"
@@ -823,11 +824,11 @@ 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: d, description: m, ...c } = e, u = ce(n);
+    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: d, description: u, ...l } = e, m = ce(n);
     return /* @__PURE__ */ f(
       "div",
       {
-        className: l(
+        className: c(
           i,
           "relative grid grid-flow-row grid-cols-[minmax(auto,_37rem)] content-center gap-6 rounded-3xl px-6 py-10 text-center max-md:mx-4 md:p-12",
           {
@@ -846,7 +847,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             // Below left style
             "md:-mt-32 md:ml-[8%] md:max-w-[58%] md:text-left": n === "below-left",
             // styles for when the contain is fully contained within the image
-            "md:mx-32 md:my-9 md:w-2/5": u,
+            "md:mx-32 md:my-9 md:w-2/5": m,
             "self-end justify-self-start": n === "bottom-left",
             "self-start justify-self-start": n === "top-left",
             "self-start justify-self-end": n === "top-right",
@@ -854,12 +855,12 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             "self-center justify-self-center": n === "center"
           }
         ),
-        ...c,
-        style: u ? { gridArea: "hero" } : void 0,
+        ...l,
+        style: m ? { gridArea: "hero" } : void 0,
         ref: r,
         children: [
           /* @__PURE__ */ o("h1", { children: d }),
-          m && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: m }),
+          u && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: u }),
           s
         ]
       }
@@ -871,7 +872,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     return /* @__PURE__ */ o(
       "div",
       {
-        className: l(
+        className: c(
           t,
           "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col",
           // Left align actions/buttons
@@ -892,13 +893,13 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     as: s,
     type: i,
     rightAddon: d,
-    leftAddon: m,
-    ...c
-  } = e, u = s ?? "input", g = Qe(u, i);
+    leftAddon: u,
+    ...l
+  } = e, m = s ?? "input", g = Qe(m, i);
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         t,
         "relative flex items-center rounded-lg border border-b-[3px] focus-within:-ml-[2px] focus-within:-mt-[2px] focus-within:border-[3px] focus-within:shadow",
         {
@@ -906,21 +907,21 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
           "border-red focus-within:border-red": n,
           "w-fit": a != null,
           "w-full": a == null,
-          "pl-4": m,
+          "pl-4": u,
           "pr-4": d
         }
       ),
       children: [
-        m,
+        u,
         /* @__PURE__ */ o(
-          u,
+          m,
           {
             "aria-invalid": n,
             ref: r,
             className: "focus:none placeholder-gray w-full rounded-lg border-none px-4 py-3.5 focus:outline-none",
             size: a,
             type: g,
-            ...c
+            ...l
           }
         ),
         d
@@ -940,7 +941,7 @@ const Mt = (e) => {
     e.icon,
     e.children
   ] });
-}, S = w({
+}, k = w({
   setIsExpanded: I,
   isExpanded: !1,
   collapsibleId: ""
@@ -949,10 +950,10 @@ const Mt = (e) => {
     () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
     [s, a]
   );
-  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(S.Provider, { value: d, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(k.Provider, { value: d, children: /* @__PURE__ */ o(
     "div",
     {
-      className: l(
+      className: c(
         r,
         "bg-blue relative pb-12 pt-6 text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-6 before:rounded-t-3xl before:bg-white md:pb-14 md:pt-8"
       ),
@@ -961,11 +962,11 @@ const Mt = (e) => {
     }
   ) }) });
 }, Vt = (e) => {
-  const { className: r, children: t, ...n } = e, { isExpanded: a } = A(S);
+  const { className: r, children: t, ...n } = e, { isExpanded: a } = A(k);
   return /* @__PURE__ */ o(
     "nav",
     {
-      className: l(
+      className: c(
         r,
         "my-8 flex flex-col md:mb-0 md:flex md:flex-row md:flex-wrap md:gap-x-8",
         {
@@ -983,7 +984,7 @@ const Mt = (e) => {
       "a",
       {
         "aria-current": t ? "page" : void 0,
-        className: l(
+        className: c(
           n,
           "border-b border-[#0156E0] py-3 no-underline md:border-b-2 md:border-transparent md:py-2 md:hover:border-white",
           {
@@ -997,7 +998,7 @@ const Mt = (e) => {
     );
   }
 ), Ue = () => {
-  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(S);
+  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(k);
   let n = Ae, a = "Meny";
   return e && (n = xe, a = "Lukk"), /* @__PURE__ */ f(
     "button",
@@ -1018,7 +1019,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(r, "flex items-center justify-between gap-8"),
+      className: c(r, "flex items-center justify-between gap-8"),
       ...a,
       children: [
         n,
@@ -1028,13 +1029,13 @@ const Mt = (e) => {
     }
   );
 }, Jt = (e) => {
-  const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(S);
+  const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(k);
   return /* @__PURE__ */ o(
     "div",
     {
       ...n,
       "aria-hidden": !s,
-      className: l(r, "md:-mb-8 md:block", {
+      className: c(r, "md:-mb-8 md:block", {
         hidden: !s
       }),
       id: a,
@@ -1042,7 +1043,7 @@ const Mt = (e) => {
     }
   );
 }, jt = (e) => {
-  const { isExpanded: r } = A(S), t = Le(!1);
+  const { isExpanded: r } = A(k), t = Le(!1);
   return !r || !t ? null : /* @__PURE__ */ o(O, { children: e.children });
 }, y = 2, T = w({ currentPage: 0, pageCount: 0 }), Ot = (e) => {
   const {
@@ -1053,9 +1054,9 @@ const Mt = (e) => {
     getItemHref: s,
     getItemAriaLabel: i,
     nextPageAriaLabel: d,
-    prevPageAriaLabel: m,
-    ...c
-  } = e, u = C(
+    prevPageAriaLabel: u,
+    ...l
+  } = e, m = C(
     () => ({
       currentPage: Math.max(1, Math.min(t, n)),
       pageCount: Math.max(1, n)
@@ -1064,16 +1065,16 @@ const Mt = (e) => {
   ), g = (b) => (p) => {
     a && (p.preventDefault(), a(b));
   };
-  return /* @__PURE__ */ o(T.Provider, { value: u, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ o(T.Provider, { value: m, children: /* @__PURE__ */ f(
     "nav",
     {
-      className: l("flex justify-center gap-2 sm:gap-4", r),
-      ...c,
+      className: c("flex justify-center gap-2 sm:gap-4", r),
+      ...l,
       children: [
         /* @__PURE__ */ o(
-          He,
+          De,
           {
-            "aria-label": m,
+            "aria-label": u,
             href: s(t - 1),
             onClick: g(t - 1)
           }
@@ -1088,7 +1089,7 @@ const Mt = (e) => {
             selected: t === 1
           }
         ),
-        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(De, {}),
+        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(He, {}),
         /* @__PURE__ */ o(Ge, { children: (b) => /* @__PURE__ */ o(
           G,
           {
@@ -1124,7 +1125,7 @@ const Mt = (e) => {
       children: /* @__PURE__ */ o(ve, {})
     }
   );
-}), He = h((e, r) => {
+}), De = h((e, r) => {
   const { currentPage: t } = A(T), n = t <= 1;
   return /* @__PURE__ */ o(
     U,
@@ -1142,7 +1143,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ o(
     "a",
     {
-      className: l(
+      className: c(
         t,
         "aria-[current]:border-green hover:bg-gray-lightest flex h-9 w-9 items-center justify-center rounded-lg border-2 border-transparent no-underline sm:h-10 sm:w-10"
       ),
@@ -1150,7 +1151,7 @@ const Mt = (e) => {
       ...n
     }
   );
-}), 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 }) => {
+}), He = () => /* @__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 + y * 2, r + y),
     t
@@ -1172,17 +1173,17 @@ const Mt = (e) => {
   value: void 0,
   error: !1
 }), 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: [
+  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: d, onChange: u, required: l, value: m, error: g } = A(me);
+  return /* @__PURE__ */ f("label", { className: c(n, "flex cursor-pointer gap-2.5"), children: [
     /* @__PURE__ */ o(
       "input",
       {
-        className: l("radio", g && "border-red"),
+        className: c("radio", g && "border-red"),
         defaultChecked: i ? void 0 : a.value === s,
-        checked: i ? a.value === u : void 0,
+        checked: i ? a.value === m : void 0,
         name: d,
-        onChange: i ? m : void 0,
-        required: c,
+        onChange: i ? u : void 0,
+        required: l,
         type: "radio",
         ref: r,
         ...a
@@ -1198,14 +1199,14 @@ const Mt = (e) => {
       description: s,
       error: i,
       id: d,
-      children: m,
-      label: c,
-      name: u,
+      children: u,
+      label: l,
+      name: m,
       onChange: g,
       required: b,
       value: p,
-      ...v
-    } = e, x = N(
+      ...x
+    } = e, v = N(
       (ue) => {
         const be = ue.target.value;
         g == null || g(be);
@@ -1215,32 +1216,32 @@ const Mt = (e) => {
       () => ({
         defaultValue: a,
         isControlled: t,
-        name: u,
-        onChange: x,
+        name: m,
+        onChange: v,
         required: b,
         value: p,
         error: !!i
       }),
-      [a, t, u, x, b, p, i]
-    ), J = R(d), B = `${J}:label`, H = `${J}:help`, D = J + "err", j = i;
+      [a, t, m, v, b, p, i]
+    ), J = R(d), B = `${J}:label`, D = `${J}:help`, H = J + "err", j = i;
     return /* @__PURE__ */ o(me.Provider, { value: F, children: /* @__PURE__ */ f(
       "div",
       {
-        "aria-describedby": l({
-          [D]: j,
-          [H]: s
+        "aria-describedby": c({
+          [H]: j,
+          [D]: s
         }) || void 0,
         "aria-invalid": !!i,
-        "aria-labelledby": c ? B : void 0,
-        className: l(n, "flex flex-col gap-4"),
+        "aria-labelledby": l ? B : void 0,
+        className: c(n, "flex flex-col gap-4"),
         role: "radiogroup",
         ref: r,
-        ...v,
+        ...x,
         children: [
-          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 })
+          l && /* @__PURE__ */ o(z, { id: B, isRequired: b, isInvalid: !!i, children: l }),
+          s && /* @__PURE__ */ o(M, { id: D, children: s }),
+          u,
+          j && /* @__PURE__ */ o(S, { id: H, children: j })
         ]
       }
     ) });
@@ -1248,13 +1249,13 @@ const Mt = (e) => {
 ), _e = h(
   (e, r) => {
     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: [
+    return /* @__PURE__ */ f("div", { className: c(n, "relative", d && "text-sm"), children: [
       /* @__PURE__ */ o(
         "select",
         {
           "aria-invalid": a,
           ...i,
-          className: l(
+          className: c(
             "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",
             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"
@@ -1266,7 +1267,7 @@ const Mt = (e) => {
       /* @__PURE__ */ o(
         te,
         {
-          className: l(
+          className: c(
             "pointer-events-none absolute bottom-0 top-0 my-auto",
             d ? "right-3.5" : "right-4"
           )
@@ -1283,17 +1284,17 @@ const Mt = (e) => {
       label: s,
       disableValidation: i = !1,
       ...d
-    } = e, m = E(null), c = K([m, r]), { validity: u, validationMessage: g } = L(
-      m,
+    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = L(
+      u,
       !i
-    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
+    ), b = R(a), p = b + "help", x = b + "err", v = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
         {
           htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || u === "invalid",
+          isInvalid: !!n || m === "invalid",
           children: s
         }
       ),
@@ -1302,16 +1303,16 @@ const Mt = (e) => {
         _e,
         {
           id: b,
-          ref: c,
+          ref: l,
           ...d,
-          isInvalid: !!n || u === "invalid",
-          "aria-describedby": l({
-            [v]: x,
+          isInvalid: !!n || m === "invalid",
+          "aria-describedby": c({
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ o(k, { id: v, children: x })
+      v && /* @__PURE__ */ o(S, { id: x, children: v })
     ] });
   }
 ), Xt = (e) => {
@@ -1321,7 +1322,7 @@ const Mt = (e) => {
     /* @__PURE__ */ o(
       "h3",
       {
-        className: l(
+        className: c(
           "snackbar-header min-w-0 max-w-prose text-base font-medium",
           {
             "overflow-hidden overflow-ellipsis whitespace-nowrap": !a
@@ -1346,7 +1347,7 @@ const Mt = (e) => {
 }, _ = (e) => /* @__PURE__ */ o(
   "button",
   {
-    className: l(
+    className: c(
       e.className,
       "focus-visible:ring-offset flex-shrink-0 underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black"
     ),
@@ -1362,7 +1363,7 @@ const Mt = (e) => {
   }
 ), $e = (e) => {
   const { align: r = "center", children: t, className: n, ...a } = e;
-  return /* @__PURE__ */ o("ol", { className: l(n, "flex flex-col gap-8 md:gap-12"), ...a, children: Z.map(t, (s) => W(s, {
+  return /* @__PURE__ */ o("ol", { className: c(n, "flex flex-col gap-8 md:gap-12"), ...a, children: Z.map(t, (s) => W(s, {
     align: r
   })) });
 }, et = (e) => {
@@ -1370,7 +1371,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ f(
     "li",
     {
-      className: l(
+      className: c(
         r,
         "group relative flex gap-4 text-sm md:gap-8 md:text-base",
         { "items-center": a === "center" }
@@ -1386,7 +1387,7 @@ const Mt = (e) => {
   "span",
   {
     "aria-hidden": !0,
-    className: l(
+    className: c(
       "text-green after:bg-gray-light before:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-center rounded-full border-2 text-sm font-bold after:absolute after:bottom-0 after:w-0.5 after:translate-x-1/2 group-last:after:hidden md:h-20 md:w-20 md:text-xl",
       {
         "before:absolute before:bottom-1/2 before:top-0 before:w-0.5 before:-translate-y-5 before:translate-x-1/2 after:top-1/2 after:translate-y-5 group-first:before:hidden before:md:-translate-y-10 after:md:translate-y-10": e === "center",
@@ -1406,17 +1407,17 @@ const Qt = h(
       label: s,
       disableValidation: i = !1,
       ...d
-    } = e, m = E(null), c = K([m, r]), { validity: u, validationMessage: g } = L(
-      m,
+    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = L(
+      u,
       !i
-    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
+    ), b = R(a), p = b + "help", x = b + "err", v = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
         {
           htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || u === "invalid",
+          isInvalid: !!n || m === "invalid",
           children: s
         }
       ),
@@ -1425,17 +1426,17 @@ const Qt = h(
         de,
         {
           as: "textarea",
-          ref: c,
+          ref: l,
           id: b,
           ...d,
-          isInvalid: !!n || u === "invalid",
-          "aria-describedby": l({
-            [v]: x,
+          isInvalid: !!n || m === "invalid",
+          "aria-describedby": c({
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ o(k, { id: v, children: x })
+      v && /* @__PURE__ */ o(S, { id: x, children: v })
     ] });
   }
 ), Ut = h(
@@ -1447,18 +1448,18 @@ const Qt = h(
       label: s,
       type: i = "text",
       disableValidation: d = !1,
-      ...m
-    } = e, c = E(null), { validity: u, validationMessage: g } = L(
-      c,
+      ...u
+    } = e, l = E(null), { validity: m, validationMessage: g } = L(
+      l,
       !d
-    ), b = R(a), p = b + "help", v = b + "err", x = n || g, F = K([c, r]);
+    ), b = R(a), p = b + "help", x = b + "err", v = n || g, F = K([l, r]);
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
         {
           htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || u === "invalid",
+          isInvalid: !!n || m === "invalid",
           children: s
         }
       ),
@@ -1469,21 +1470,21 @@ const Qt = h(
           id: b,
           ref: F,
           type: i,
-          ...m,
-          isInvalid: !!n || u === "invalid",
-          "aria-describedby": l({
-            [v]: x,
+          ...u,
+          isInvalid: !!n || m === "invalid",
+          "aria-describedby": c({
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ o(k, { id: v, children: x })
+      v && /* @__PURE__ */ o(S, { id: x, children: v })
     ] });
   }
 );
 export {
   X as Accordion,
-  ke as AccordionContent,
+  Se as AccordionContent,
   Re as AccordionHeader,
   Ee as AccordionItem,
   ct as Alert,
@@ -1502,16 +1503,16 @@ export {
   wt as Footer,
   yt as Form,
   It as FormError,
-  k as FormErrorMessage,
+  S as FormErrorMessage,
   Ze as FormHeading,
   M as FormHelperText,
   z as FormLabel,
-  kt as FormStep,
+  St as FormStep,
   We as FormStepHeader,
   Ke as FormStepHeaderContent,
   Rt as FormStepProvider,
   Ct as FormSuccess,
-  St as Hero,
+  kt as Hero,
   Pt as HeroActions,
   Lt as HeroContent,
   V as HeroContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.14.0-beta.4",
+  "version": "1.14.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,25 +17,25 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@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",
+    "@storybook/addon-controls": "7.0.26",
+    "@storybook/addon-docs": "7.0.26",
+    "@storybook/addon-styling": "1.3.2",
+    "@storybook/builder-vite": "7.0.26",
+    "@storybook/react": "7.0.26",
+    "@storybook/react-vite": "7.0.26",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "@vitejs/plugin-react": "4.0.2",
     "autoprefixer": "10.4.14",
-    "postcss": "8.4.24",
+    "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "5.0.1",
-    "storybook": "7.0.22",
+    "storybook": "7.0.26",
     "tailwindcss": "3.3.2",
     "type-fest": "3.12.0",
-    "vite": "4.3.9",
+    "vite": "4.4.2",
     "@obosbbl/grunnmuren-tailwind": "0.9.1"
   },
   "dependencies": {