@obosbbl/grunnmuren-react 1.13.1 → 1.14.0-beta.0

package/dist/grunnmuren.mjs

@@ -1,30 +1,31 @@
 'use client';
-import { jsx as a, jsxs as g, Fragment as Z } from "react/jsx-runtime";
-import he, { createContext as I, useContext as A, useState as k, useCallback as q, useEffect as pe, useId as ee, forwardRef as b, Children as W, isValidElement as te, cloneElement as K, useRef as L, useMemo as M } from "react";
-import { ChevronDown as re, Warning as ne, InfoCircle as ae, LoadingSpinner as Ae, MenuAlt as xe, Close as ve, ChevronRight as Ne, ChevronLeft as we } from "@obosbbl/grunnmuren-icons";
-import { useCollapse as ye } from "react-collapsed";
+import { jsx as o, jsxs as b, Fragment as Z } from "react/jsx-runtime";
+import pe, { createContext as w, useContext as A, useState as M, useCallback as E, useEffect as Ae, useId as ee, forwardRef as g, Children as W, isValidElement as te, cloneElement as K, useRef as R, useMemo as C, useReducer as ve } from "react";
+import { ChevronDown as re, Warning as ne, InfoCircle as ae, LoadingSpinner as xe, CheckCircle as Ne, MenuAlt as we, Close as ye, ChevronRight as Ie, ChevronLeft as Ee } from "@obosbbl/grunnmuren-icons";
+import { useCollapse as Ce } from "react-collapsed";
 import l from "clsx";
-import Y from "@react-hook/merged-ref";
-const y = () => {
-}, Ie = 300, Ce = "duration-300", X = (e) => {
+import { useUpdateEffect as Re } from "react-use";
+import X from "@react-hook/merged-ref";
+const I = () => {
+}, Se = 300, ke = "duration-300", Y = (e) => {
   const { className: r, ...t } = e;
-  return /* @__PURE__ */ a("div", { className: l(r, "flex flex-col gap-2"), ...t });
-}, B = I({
+  return /* @__PURE__ */ o("div", { className: l(r, "flex flex-col gap-2"), ...t });
+}, B = w({
   isExpanded: !1,
-  setExpanded: y,
+  setExpanded: I,
   // @ts-expect-error noop
-  getCollapseProps: y,
+  getCollapseProps: I,
   // @ts-expect-error noop
-  getToggleProps: y,
-  onChange: y
-}), Ee = (e) => {
-  const { className: r, defaultOpen: t, onChange: n = y, open: s, ...o } = e, i = ye({
+  getToggleProps: I,
+  onChange: I
+}), qe = (e) => {
+  const { className: r, defaultOpen: t, onChange: n = I, open: a, ...s } = e, i = Ce({
     defaultExpanded: t,
-    isExpanded: s,
-    duration: Ie,
+    isExpanded: a,
+    duration: Se,
     easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
   });
-  return /* @__PURE__ */ a(B.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(B.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ o(
     "div",
     {
       className: l(
@@ -32,101 +33,101 @@ const y = () => {
         "rounded-sm border-b-2 border-l-4 border-solid",
         i.isExpanded ? "border-l-green-dark" : "border-l-green"
       ),
-      ...o
+      ...s
     }
   ) });
-}, Re = (e) => {
-  const { children: r, className: t, as: n = "h3", ...s } = e, { getToggleProps: o, onChange: i, isExpanded: c } = A(B), u = o({ onClick: () => i(!c) });
-  return /* @__PURE__ */ a(n, { children: /* @__PURE__ */ g(
+}, Me = (e) => {
+  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: c } = A(B), u = s({ onClick: () => i(!c) });
+  return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ b(
     "button",
     {
       className: l(
         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"
       ),
-      ...s,
+      ...a,
       ...u,
-      id: se(u["aria-controls"]),
+      id: oe(u["aria-controls"]),
       children: [
         r,
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           re,
           {
-            className: `shrink-0 text-sm ${Ce} group-aria-expanded:rotate-180`
+            className: `shrink-0 text-sm ${ke} group-aria-expanded:rotate-180`
           }
         )
       ]
     }
   ) });
-}, qe = (e) => {
-  const { getCollapseProps: r } = A(B), { className: t, ...n } = e, s = r();
-  return /* @__PURE__ */ a("div", { ...s, "aria-labelledby": se(s.id), children: /* @__PURE__ */ a("div", { className: l(t, "p-5 pb-10"), ...n }) });
-}, se = (e) => e + "toggle";
-X.Item = Ee;
-X.Header = Re;
-X.Content = qe;
-const ct = (e) => {
-  const { className: r, children: t, heading: n, severity: s = "alert", ...o } = e;
-  return /* @__PURE__ */ a(
+}, Le = (e) => {
+  const { getCollapseProps: r } = A(B), { 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 }) });
+}, oe = (e) => e + "toggle";
+Y.Item = qe;
+Y.Header = Me;
+Y.Content = Le;
+const vt = (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", {
-        "bg-orange-light": s === "info",
-        "bg-red-light": s === "alert"
+        "bg-orange-light": a === "info",
+        "bg-red-light": a === "alert"
       }),
       role: "alert",
-      ...o,
-      children: /* @__PURE__ */ g("div", { className: "flex justify-center", children: [
-        /* @__PURE__ */ a(
-          ke,
+      ...s,
+      children: /* @__PURE__ */ b("div", { className: "flex justify-center", children: [
+        /* @__PURE__ */ o(
+          Pe,
           {
             className: "mr-4 flex-none md:mr-8 md:text-2xl",
-            severity: s
+            severity: a
           }
         ),
-        /* @__PURE__ */ g("div", { className: "w-prose flex-initial", children: [
-          /* @__PURE__ */ a("h2", { className: "h4 mb-2", children: n }),
+        /* @__PURE__ */ b("div", { className: "w-prose flex-initial", children: [
+          /* @__PURE__ */ o("h2", { className: "h4 mb-2", children: n }),
           t
         ] })
       ] })
     }
   );
-}, ke = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ a(ne, { className: l(r, "text-red") }) : /* @__PURE__ */ a(ae, { className: l(r, "text-orange") });
-var oe = {}, N = {};
+}, Pe = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(ne, { className: l(r, "text-red") }) : /* @__PURE__ */ o(ae, { className: l(r, "text-orange") });
+var se = {}, N = {};
 Object.defineProperty(N, "__esModule", { value: !0 });
 N.isNavigator = N.isBrowser = N.off = N.on = N.noop = void 0;
-var Le = function() {
+var ze = function() {
 };
-N.noop = Le;
-function Me(e) {
+N.noop = ze;
+function Ve(e) {
   for (var r = [], t = 1; t < arguments.length; t++)
     r[t - 1] = arguments[t];
   e && e.addEventListener && e.addEventListener.apply(e, r);
 }
-N.on = Me;
-function ze(e) {
+N.on = Ve;
+function Te(e) {
   for (var r = [], t = 1; t < arguments.length; t++)
     r[t - 1] = arguments[t];
   e && e.removeEventListener && e.removeEventListener.apply(e, r);
 }
-N.off = ze;
+N.off = Te;
 N.isBrowser = typeof window < "u";
 N.isNavigator = typeof navigator < "u";
-Object.defineProperty(oe, "__esModule", { value: !0 });
-var D = he, Pe = N, Se = function(e, r) {
-  return r !== void 0 ? r : Pe.isBrowser ? window.matchMedia(e).matches : (process.env.NODE_ENV !== "production" && console.warn("`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."), !1);
-}, Ve = function(e, r) {
-  var t = D.useState(Se(e, r)), n = t[0], s = t[1];
-  return D.useEffect(function() {
-    var o = !0, i = window.matchMedia(e), c = function() {
-      o && s(!!i.matches);
+Object.defineProperty(se, "__esModule", { value: !0 });
+var G = pe, Fe = N, Je = function(e, r) {
+  return r !== void 0 ? r : Fe.isBrowser ? window.matchMedia(e).matches : (process.env.NODE_ENV !== "production" && console.warn("`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."), !1);
+}, Oe = function(e, r) {
+  var t = G.useState(Je(e, r)), n = t[0], a = t[1];
+  return G.useEffect(function() {
+    var s = !0, i = window.matchMedia(e), c = function() {
+      s && a(!!i.matches);
     };
-    return i.addListener(c), s(i.matches), function() {
-      o = !1, i.removeListener(c);
+    return i.addListener(c), a(i.matches), function() {
+      s = !1, i.removeListener(c);
     };
   }, [e]), n;
-}, ie = oe.default = Ve;
-const Je = "(prefers-reduced-motion: reduce)", mt = (e = !1) => ie(Je, e);
+}, ie = se.default = Oe;
+const je = "(prefers-reduced-motion: reduce)", xt = (e = !1) => ie(je, e);
 function le(e) {
   switch (e) {
     case "gray":
@@ -141,50 +142,50 @@ function le(e) {
       return "bg-sky-light";
   }
 }
-const Oe = (e) => ie("(max-width: 767.9px)", e);
-function z(e, r = !0) {
-  const [t, n] = k("indeterminate"), [s, o] = k(), i = q((d) => {
-    d.target.checkValidity() && (n("valid"), o(void 0));
-  }, []), c = q(
+const Ze = (e) => ie("(max-width: 767.9px)", e);
+function L(e, r = !0) {
+  const [t, n] = M("indeterminate"), [a, s] = M(), i = E((d) => {
+    d.target.checkValidity() && (n("valid"), s(void 0));
+  }, []), c = E(
     (d) => {
-      t !== "indeterminate" && d.target.checkValidity() && (n("valid"), o(void 0));
+      t !== "indeterminate" && d.target.checkValidity() && (n("valid"), s(void 0));
     },
     [t]
-  ), u = q((d) => {
+  ), u = E((d) => {
     d.preventDefault();
     const m = d.target.validationMessage;
-    o(m), n("invalid");
+    s(m), n("invalid");
   }, []);
-  return pe(() => {
+  return Ae(() => {
     var m;
     const { current: d } = e;
     return r && // @ts-expect-error respect the <form noValidate> attribute if we are rendered inside a form
     ((m = d == null ? void 0 : d.form) == null ? void 0 : m.noValidate) !== !0 && (d == null || d.addEventListener("blur", i), d == null || d.addEventListener("input", c), d == null || d.addEventListener("invalid", u)), () => {
       d == null || d.removeEventListener("blur", i), d == null || d.removeEventListener("input", c), d == null || d.removeEventListener("invalid", u);
     };
-  }, [r, c]), { validity: t, validationMessage: s };
+  }, [r, c]), { validity: t, validationMessage: a };
 }
-function C(e) {
+function S(e) {
   const r = ee();
   return e ?? r;
 }
-const ut = (e) => {
+const Nt = (e) => {
   const {
     bgColor: r,
     className: t,
     children: n,
-    heading: s,
-    image: o,
+    heading: a,
+    image: s,
     ...i
   } = e, c = le(r);
-  return /* @__PURE__ */ a("article", { className: l(t, c, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ g("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
-    o,
-    /* @__PURE__ */ g("div", { className: "max-w-prose", children: [
-      s && /* @__PURE__ */ a("h2", { className: "h3 mb-4", children: s }),
+  return /* @__PURE__ */ o("article", { className: l(t, c, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ b("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
+    s,
+    /* @__PURE__ */ b("div", { className: "max-w-prose", children: [
+      a && /* @__PURE__ */ o("h2", { className: "h3 mb-4", children: a }),
       n
     ] })
   ] }) });
-}, ft = (e) => /* @__PURE__ */ a(
+}, wt = (e) => /* @__PURE__ */ o(
   "img",
   {
     loading: "lazy",
@@ -192,7 +193,7 @@ const ut = (e) => {
     className: "w-20 flex-none self-center md:w-32 md:self-start",
     ...e
   }
-), Te = {
+), We = {
   "standard-primary": "bg-green border-green text-white",
   "standard-secondary": "bg-white border-green text-black",
   "mint-primary": "bg-mint border-mint text-black",
@@ -201,28 +202,28 @@ const ut = (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"
-}, gt = b((e, r) => {
+}, yt = g((e, r) => {
   const {
     children: t,
     className: n,
-    color: s,
-    href: o,
+    color: a,
+    href: s,
     loading: i,
     type: c = "button",
     variant: u = "primary",
     ...d
-  } = e, m = A(P), f = Te[`${s ?? m}-${u}`], p = l(n, f, "button"), v = i ? /* @__PURE__ */ a(je, { children: t }) : t;
-  return /* @__PURE__ */ a(Z, { children: o ? /* @__PURE__ */ a(
+  } = e, m = A(P), f = We[`${a ?? m}-${u}`], p = l(n, f, "button"), x = i ? /* @__PURE__ */ o(Ke, { children: t }) : t;
+  return /* @__PURE__ */ o(Z, { children: s ? /* @__PURE__ */ o(
     "a",
     {
       "aria-busy": i ? !0 : void 0,
       ...d,
-      href: o,
+      href: s,
       ref: r,
       className: p,
-      children: v
+      children: x
     }
-  ) : /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ o(
     "button",
     {
       "aria-busy": i ? !0 : void 0,
@@ -230,24 +231,24 @@ const ut = (e) => {
       type: c,
       ref: r,
       className: p,
-      children: v
+      children: x
     }
   ) });
-}), je = (e) => /* @__PURE__ */ g(Z, { children: [
+}), Ke = (e) => /* @__PURE__ */ b(Z, { children: [
   de(e.children),
-  /* @__PURE__ */ a(
+  /* @__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__ */ a(Ae, { className: "animate-spin" })
+      children: /* @__PURE__ */ o(xe, { className: "animate-spin" })
     }
   )
 ] });
 function de(e) {
   return W.map(e, (r) => {
     if (!te(r))
-      return typeof r == "string" ? /* @__PURE__ */ a("span", { children: r }) : r;
+      return typeof r == "string" ? /* @__PURE__ */ o("span", { children: r }) : r;
     if (r.props.children) {
       const t = {
         children: de(r.props.children)
@@ -257,34 +258,34 @@ function de(e) {
     return r;
   });
 }
-const P = I("standard"), ce = I(!0), Fe = (e, r) => {
+const P = w("standard"), ce = w(!0), Xe = (e, r) => {
   const {
     as: t = "div",
     body: n,
-    className: s,
-    image: o,
+    className: a,
+    image: s,
     rightAlignBody: i = !0,
     ...c
   } = e;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ b(
     t,
     {
       className: l(
-        s,
+        a,
         "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0"
       ),
       ...c,
       ref: r,
       children: [
-        /* @__PURE__ */ a(ce.Provider, { value: i, children: o }),
+        /* @__PURE__ */ o(ce.Provider, { value: i, children: s }),
         n
       ]
     }
   );
-}, Ze = b(Fe), We = b(
+}, Ye = g(Xe), Be = g(
   (e, r) => {
     const { className: t, ...n } = e;
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ o(
       "div",
       {
         className: l(t, "md:mx-18 self-center"),
@@ -293,12 +294,12 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
       }
     );
   }
-), Ke = b(
+), Ue = g(
   (e, r) => {
-    const { className: t, children: n, ...s } = e, o = A(ce), i = l(
+    const { className: t, children: n, ...a } = e, s = A(ce), i = l(
       t,
       "max-md:rounded-b-3xl w-full",
-      o ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
+      s ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
     );
     if (te(n)) {
       const c = W.only(n);
@@ -306,36 +307,36 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
         // @ts-expect-error assume className prop is allowed
         className: i,
         ref: r,
-        ...s
+        ...a
       });
     }
-    return /* @__PURE__ */ a("img", { className: i, ref: r, ...s });
+    return /* @__PURE__ */ o("img", { className: i, ref: r, ...a });
   }
-), bt = Object.assign({}, Ze, {
-  Body: We,
-  Image: Ke
-}), Ye = (e, r) => {
+), It = Object.assign({}, Ye, {
+  Body: Be,
+  Image: Ue
+}), Qe = (e, r) => {
   const {
     as: t = "div",
     className: n,
-    bgColor: s = "white",
-    ...o
+    bgColor: a = "white",
+    ...s
   } = e;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     t,
     {
       className: l(n, "relative overflow-hidden rounded-3xl", {
-        "border-2 border-solid bg-white": s === "white",
-        "bg-gray-light": s === "gray"
+        "border-2 border-solid bg-white": a === "white",
+        "bg-gray-light": a === "gray"
       }),
-      ...o,
+      ...s,
       ref: r
     }
   );
-}, ht = b(Ye), pt = b(
+}, Et = g(Qe), Ct = g(
   (e, r) => {
     const { className: t, ...n } = e;
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ o(
       "img",
       {
         className: l(t, "w-full object-cover"),
@@ -345,26 +346,26 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
       }
     );
   }
-), At = b(
+), Rt = g(
   (e, r) => {
-    const { bgColor: t, className: n, ...s } = e, o = le(t);
-    return /* @__PURE__ */ a("div", { className: l(o, n), children: /* @__PURE__ */ a(
+    const { bgColor: t, className: n, ...a } = e, s = le(t);
+    return /* @__PURE__ */ o("div", { className: l(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",
-        ...s,
+        ...a,
         ref: r
       }
     ) });
   }
-), xt = b(
+), St = g(
   (e, r) => {
     const { className: t, ...n } = e;
-    return /* @__PURE__ */ a("div", { className: l(t, "p-8 md:px-10"), ...n, ref: r });
+    return /* @__PURE__ */ o("div", { className: l(t, "p-8 md:px-10"), ...n, ref: r });
   }
-), vt = b((e, r) => {
+), kt = g((e, r) => {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "a",
     {
       className: l(
@@ -375,61 +376,61 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
       ...n
     }
   );
-}), Nt = b(
+}), qt = g(
   (e, r) => {
     const {
       children: t,
       className: n,
-      error: s,
-      id: o,
+      error: a,
+      id: s,
       disableValidation: i = !1,
       ...c
-    } = e, u = L(null), { validity: d, validationMessage: m } = z(
+    } = e, u = R(null), { validity: d, validationMessage: m } = L(
       u,
       !i
-    ), h = C(o), f = h + "err", p = s || m;
-    return /* @__PURE__ */ g("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ g("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
-        /* @__PURE__ */ a(
+    ), h = S(s), f = h + "err", p = a || m;
+    return /* @__PURE__ */ b("div", { className: "grid gap-2", children: [
+      /* @__PURE__ */ b("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
+        /* @__PURE__ */ o(
           "input",
           {
             id: h,
             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",
               {
-                "border-gray-dark focus:ring-black": !s,
-                "border-red focus:ring-red": !!s
+                "border-gray-dark focus:ring-black": !a,
+                "border-red focus:ring-red": !!a
               }
             ),
             ref: r,
             type: "checkbox",
             ...c,
             "aria-describedby": p ? f : void 0,
-            "aria-invalid": !!s || d === "invalid"
+            "aria-invalid": !!a || d === "invalid"
           }
         ),
         t
       ] }),
-      p && /* @__PURE__ */ a(E, { id: f, children: p })
+      p && /* @__PURE__ */ o(k, { id: f, children: p })
     ] });
   }
-), Xe = {
+), He = {
   sky: "bg-sky border-sky",
   "red-light": "bg-red-light border-red-light",
   mint: "bg-mint border-mint",
   "orange-light": "bg-orange-light border-orange-light",
   "green-light": "bg-green-light border-green-light",
   "blue-light": "bg-blue-light border-blue-light"
-}, Be = {
+}, De = {
   sky: "text-blue-dark",
   "red-light": "text-red",
   mint: "text-green",
   "orange-light": "text-black",
   "green-light": "text-green",
   "blue-light": "text-blue-dark"
-}, wt = (e) => {
-  const { className: r, color: t, icon: n, children: s, variant: o = "filled" } = e, i = t && Xe[t], c = t && Be[t];
-  return /* @__PURE__ */ g(
+}, Mt = (e) => {
+  const { className: r, color: t, icon: n, children: a, variant: s = "filled" } = e, i = t && He[t], c = t && De[t];
+  return /* @__PURE__ */ b(
     "div",
     {
       className: l(
@@ -438,22 +439,22 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
         r
       ),
       children: [
-        n && /* @__PURE__ */ a("div", { className: l("px-3 py-2", c), children: n }),
-        /* @__PURE__ */ a(
+        n && /* @__PURE__ */ o("div", { className: l("px-3 py-2", c), children: n }),
+        /* @__PURE__ */ o(
           "div",
           {
             className: l("flex-1 px-4 py-2", {
-              "bg-white": o === "outline"
+              "bg-white": s === "outline"
             }),
-            children: s
+            children: a
           }
         )
       ]
     }
   );
-}, yt = (e) => {
+}, Lt = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ a(P.Provider, { value: "white", children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(
     "footer",
     {
       className: l(
@@ -462,28 +463,28 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
         "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 "
       ),
       ...n,
-      children: /* @__PURE__ */ a("div", { className: "container", children: t })
+      children: /* @__PURE__ */ o("div", { className: "container", children: t })
     }
   ) });
-}, It = (e) => {
-  const { heading: r, children: t, className: n, ...s } = e;
-  return /* @__PURE__ */ g(
+}, Pt = (e) => {
+  const { heading: r, children: t, className: n, ...a } = e;
+  return /* @__PURE__ */ b(
     "form",
     {
       className: l(
         n,
         "border-blue-dark block overflow-hidden rounded-b-lg rounded-t-3xl border-2"
       ),
-      ...s,
+      ...a,
       children: [
-        r && /* @__PURE__ */ a(Qe, { children: r }),
-        /* @__PURE__ */ a("div", { className: "p-6 md:p-10", children: t })
+        r && /* @__PURE__ */ o(Ge, { children: r }),
+        /* @__PURE__ */ o("div", { className: "p-6 md:p-10", children: t })
       ]
     }
   );
-}, Qe = (e) => {
+}, Ge = (e) => {
   const { className: r, ...t } = e;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "h2",
     {
       className: l(
@@ -493,9 +494,9 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
       ...t
     }
   );
-}, Ct = (e) => {
+}, zt = (e) => {
   const { className: r, ...t } = e;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "div",
     {
       "aria-live": "polite",
@@ -507,9 +508,9 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
       children: "Beklager! Noe gikk dessverre galt under innesendingen av skjemaet. Prøv gjerne igjen om en stund."
     }
   );
-}, E = (e) => {
+}, k = (e) => {
   const { children: r, className: t, ...n } = e;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ b(
     "div",
     {
       className: l(
@@ -519,29 +520,28 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
       "aria-live": "polite",
       ...n,
       children: [
-        /* @__PURE__ */ a(ne, { className: "text-red flex-shrink-0" }),
+        /* @__PURE__ */ o(ne, { className: "text-red flex-shrink-0" }),
         r
       ]
     }
   );
-}, S = (e) => {
+}, z = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ a("div", { className: l(r, "text-gray-dark text-sm"), ...n, children: t });
+  return /* @__PURE__ */ o("div", { className: l(r, "text-gray-dark text-sm"), ...n, children: t });
 }, V = (e) => {
-  const { className: r, children: t, isRequired: n, isInvalid: s, ...o } = e;
-  return /* @__PURE__ */ g(
+  const { className: r, children: t, isRequired: n, isInvalid: a, ...s } = e;
+  return /* @__PURE__ */ b(
     "label",
     {
       className: l(r, "block cursor-pointer font-semibold"),
-      ...o,
+      ...s,
       children: [
-        n && /* @__PURE__ */ a(
+        n && /* @__PURE__ */ o(
           "span",
           {
-            "aria-hidden": !0,
             className: l(
               "mr-1 select-none",
-              s ? "text-red" : "text-blue"
+              a ? "text-red" : "text-blue"
             ),
             children: "*"
           }
@@ -550,18 +550,18 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
       ]
     }
   );
-}, Et = (e) => {
-  const { className: r, heading: t, text: n, ...s } = e;
-  return /* @__PURE__ */ g(
+}, Vt = (e) => {
+  const { className: r, heading: t, text: n, ...a } = e;
+  return /* @__PURE__ */ b(
     "div",
     {
       className: l(
         r,
         "bg-gray-lightest flex flex-col gap-8 p-8 text-center"
       ),
-      ...s,
+      ...a,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "img",
           {
             className: "mx-auto",
@@ -571,24 +571,209 @@ const P = I("standard"), ce = I(!0), Fe = (e, r) => {
             src: "data:image/png;base64,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"
           }
         ),
-        t && /* @__PURE__ */ a("h2", { className: "text-blue text-2xl", children: t }),
-        n && /* @__PURE__ */ a("p", { className: "text-lg", children: n })
+        t && /* @__PURE__ */ o("h2", { className: "text-blue text-2xl", children: t }),
+        n && /* @__PURE__ */ o("p", { className: "text-lg", children: n })
+      ]
+    }
+  );
+}, _e = (e) => {
+  const { className: r, collapsed: t, step: n, onClick: a, children: s, formStatus: i } = e;
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      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"
+      }),
+      children: /* @__PURE__ */ o(
+        $e,
+        {
+          collapsed: t,
+          step: n,
+          formStatus: i,
+          children: s
+        }
+      )
+    }
+  );
+}, $e = (e) => {
+  const { collapsed: r, step: t, children: n, formStatus: a } = e, s = C(() => {
+    switch (a) {
+      case "blank":
+        return "Ikke utfylt";
+      case "completed":
+        return "Fullført";
+    }
+  }, [a]), i = C(() => {
+    if (!r)
+      return /* @__PURE__ */ o("div", { children: t });
+    switch (a) {
+      case "blank":
+        return /* @__PURE__ */ o("div", { children: t });
+      case "completed":
+        return /* @__PURE__ */ o(Ne, { className: "h-10 w-10 md:h-12 md:w-12" });
+    }
+  }, [a, t, r]);
+  return /* @__PURE__ */ b(
+    "h2",
+    {
+      className: l(
+        "grid grid-cols-[auto_1fr] grid-rows-[1fr_auto] items-center text-left text-xl font-bold md:text-2xl",
+        {
+          "text-white": !r
+        }
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: l(
+              "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,
+                "border-black": r && a !== "completed",
+                "border-none": a === "completed" && r
+              }
+            ),
+            role: "text",
+            children: i
+          }
+        ),
+        n,
+        r && /* @__PURE__ */ o(
+          "div",
+          {
+            className: l(
+              "text-base font-normal",
+              a === "completed" ? "text-white" : "text-black"
+            ),
+            children: s
+          }
+        )
+      ]
+    }
+  );
+}, me = w([
+  {
+    activeStep: 1,
+    formData: {}
+  },
+  () => {
+  }
+]);
+function et(e) {
+  const [r, t] = A(me), n = E(async () => {
+    t({ type: "PREV_STEP" });
+  }, [t]), a = E(
+    (s) => {
+      t({
+        type: "SET_FORM_STEP_DATA",
+        formId: `form${e}`,
+        formValues: s
+      }), t({ type: "NEXT_STEP" });
+    },
+    [t, e]
+  );
+  return {
+    isActive: r.activeStep === e,
+    activeStep: r.activeStep,
+    setActiveStep: (s) => t({ type: "SET_STEP", step: s }),
+    previousFormStep: n,
+    submitAndNextFormStep: a,
+    formData: r.formData
+  };
+}
+function tt(e, r) {
+  switch (r.type) {
+    case "NEXT_STEP":
+      return {
+        ...e,
+        activeStep: e.activeStep + 1
+      };
+    case "PREV_STEP":
+      return {
+        ...e,
+        activeStep: Math.max(e.activeStep - 1, 1)
+      };
+    case "SET_STEP":
+      return {
+        ...e,
+        activeStep: r.step
+      };
+    case "SET_FORM_STEP_DATA":
+      return {
+        ...e,
+        formData: {
+          ...e.formData,
+          [r.formId]: r.formValues
+        }
+      };
+  }
+}
+function Tt({ children: e }) {
+  const [r, t] = ve(tt, {
+    activeStep: 1,
+    formData: {}
+  }), n = C(() => [r, t], [r, t]);
+  return /* @__PURE__ */ o(me.Provider, { value: n, children: e });
+}
+const Ft = (e) => {
+  const {
+    children: r,
+    heading: t,
+    step: n,
+    formStatus: a = "blank",
+    onSubmit: s,
+    ...i
+  } = e, { isActive: c, setActiveStep: u, activeStep: d } = et(n), m = R(null), h = E(() => {
+    n < d && u(n);
+  }, [d, n, u]);
+  return Re(() => {
+    var f;
+    c && ((f = m.current) == null || f.scrollIntoView({ behavior: "smooth" }));
+  }, [c]), /* @__PURE__ */ b(
+    "form",
+    {
+      className: l(
+        "border-blue-dark block overflow-hidden rounded-lg border-2",
+        { "rounded-t-2xl md:rounded-t-3xl": n === 1 },
+        { "border-none": a === "completed" && !c }
+      ),
+      onSubmit: s,
+      ref: m,
+      ...i,
+      children: [
+        /* @__PURE__ */ o(
+          _e,
+          {
+            step: n,
+            formStatus: a,
+            collapsed: !c,
+            onClick: h,
+            children: t
+          }
+        ),
+        c && /* @__PURE__ */ o("div", { className: "p-6 md:p-10", children: r })
       ]
     }
   );
 };
-function me(e) {
+function ue(e) {
   return e !== "vertical-split" && e !== "below-center" && e !== "below-left";
 }
-const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), Rt = b((e, r) => {
+const T = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), Jt = g((e, r) => {
   const {
     bgColor: t = "white",
     children: n,
-    className: s,
-    contentPosition: o = "below-center",
+    className: a,
+    contentPosition: s = "below-center",
     image: i,
     ...c
-  } = e, u = i != null, d = u ? o : "below-center", m = M(
+  } = e, u = i != null, d = u ? s : "below-center", m = C(
     () => ({
       bgColor: t,
       contentPosition: d,
@@ -596,22 +781,22 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     }),
     [t, d, u]
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     P.Provider,
     {
       value: t === "white" ? "standard" : "mint",
-      children: /* @__PURE__ */ a(J.Provider, { value: m, children: /* @__PURE__ */ g(
+      children: /* @__PURE__ */ o(T.Provider, { value: m, children: /* @__PURE__ */ b(
         "div",
         {
           className: l(
-            s,
+            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%]": d === "vertical-split"
             }
           ),
-          style: me(d) ? { gridTemplateAreas: '"hero"' } : void 0,
+          style: ue(d) ? { gridTemplateAreas: '"hero"' } : void 0,
           ...c,
           ref: r,
           children: [
@@ -622,10 +807,10 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       ) })
     }
   );
-}), qt = b(
+}), Ot = g(
   (e, r) => {
-    const { contentPosition: t } = A(J);
-    return /* @__PURE__ */ g(
+    const { contentPosition: t } = A(T);
+    return /* @__PURE__ */ b(
       "picture",
       {
         className: l(e.className, "aspect-w-6 aspect-h-7 block", {
@@ -636,8 +821,8 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
         style: t !== "vertical-split" && t !== "below-center" && t !== "below-left" ? { gridArea: "hero" } : void 0,
         ref: r,
         children: [
-          /* @__PURE__ */ a("source", { media: "(min-width: 768px)", srcSet: e.mdSrc }),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ o("source", { media: "(min-width: 768px)", srcSet: e.mdSrc }),
+          /* @__PURE__ */ o(
             "img",
             {
               className: "object-cover",
@@ -650,10 +835,10 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), kt = b(
+), jt = g(
   (e, r) => {
-    const { bgColor: t, contentPosition: n, hasImage: s } = A(J), { children: o, className: i, heading: c, description: u, ...d } = e, m = me(n);
-    return /* @__PURE__ */ g(
+    const { bgColor: t, contentPosition: n, hasImage: a } = A(T), { children: s, className: i, heading: c, description: u, ...d } = e, m = ue(n);
+    return /* @__PURE__ */ b(
       "div",
       {
         className: l(
@@ -661,7 +846,7 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
           "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",
           {
             // On mobile we use negative margin on the content to pull the content up into the image
-            "max-md:-mt-18": s,
+            "max-md:-mt-18": a,
             "text-white": t !== "white",
             "bg-green-dark": t === "green",
             "bg-blue-dark": t === "blue",
@@ -671,7 +856,7 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             "md:z-10 md:-order-1 md:-mr-5 md:mt-0 md:justify-center md:rounded-l-none md:text-left": n === "vertical-split",
             // below center/content header
             "justify-center md:mx-auto md:w-4/5": n === "below-center",
-            "md:-mt-18": s && n === "below-center",
+            "md:-mt-18": a && n === "below-center",
             // 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
@@ -687,17 +872,17 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
         style: m ? { gridArea: "hero" } : void 0,
         ref: r,
         children: [
-          /* @__PURE__ */ a("h1", { children: c }),
-          u && /* @__PURE__ */ a("p", { className: "text-lg font-semibold md:text-xl", children: u }),
-          o
+          /* @__PURE__ */ o("h1", { children: c }),
+          u && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: u }),
+          s
         ]
       }
     );
   }
-), Lt = b(
+), Zt = g(
   (e, r) => {
-    const { className: t, ...n } = e, { contentPosition: s } = A(J);
-    return /* @__PURE__ */ a(
+    const { className: t, ...n } = e, { contentPosition: a } = A(T);
+    return /* @__PURE__ */ o(
       "div",
       {
         className: l(
@@ -705,7 +890,7 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
           "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col",
           // Left align actions/buttons
           {
-            "md:justify-start": s === "vertical-split" || s === "below-left"
+            "md:justify-start": a === "vertical-split" || a === "below-left"
           }
         ),
         ...n,
@@ -713,18 +898,18 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), ue = b((e, r) => {
+), fe = g((e, r) => {
   const {
     className: t,
     isInvalid: n,
-    size: s,
-    as: o,
+    size: a,
+    as: s,
     type: i,
     rightAddon: c,
     leftAddon: u,
     ...d
-  } = e, m = o ?? "input", h = Ue(m, i);
-  return /* @__PURE__ */ g(
+  } = e, m = s ?? "input", h = rt(m, i);
+  return /* @__PURE__ */ b(
     "div",
     {
       className: l(
@@ -733,21 +918,21 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
         {
           "focus-within:border-blue-dark border-black": !n,
           "border-red focus-within:border-red": n,
-          "w-fit": s != null,
-          "w-full": s == null,
+          "w-fit": a != null,
+          "w-full": a == null,
           "pl-4": u,
           "pr-4": c
         }
       ),
       children: [
         u,
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           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: s,
+            size: a,
             type: h,
             ...d
           }
@@ -757,28 +942,28 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     }
   );
 });
-function Ue(e, r) {
+function rt(e, r) {
   if (r != null)
     return r;
   if (e === "input")
     return "text";
 }
-const Mt = (e) => {
+const Wt = (e) => {
   let r = "";
-  return e.icon && (r = "inline-flex items-center gap-2"), /* @__PURE__ */ g("a", { className: r, href: e.href, children: [
+  return e.icon && (r = "inline-flex items-center gap-2"), /* @__PURE__ */ b("a", { className: r, href: e.href, children: [
     e.icon,
     e.children
   ] });
-}, R = I({
-  setIsExpanded: y,
+}, q = w({
+  setIsExpanded: I,
   isExpanded: !1,
   collapsibleId: ""
-}), zt = (e) => {
-  const { className: r, children: t, ...n } = e, s = ee(), [o, i] = k(!1), c = M(
-    () => ({ isExpanded: o, setIsExpanded: i, collapsibleId: s }),
-    [o, s]
+}), Kt = (e) => {
+  const { className: r, children: t, ...n } = e, a = ee(), [s, i] = M(!1), c = C(
+    () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
+    [s, a]
   );
-  return /* @__PURE__ */ a(P.Provider, { value: "white", children: /* @__PURE__ */ a(R.Provider, { value: c, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(q.Provider, { value: c, children: /* @__PURE__ */ o(
     "div",
     {
       className: l(
@@ -786,29 +971,29 @@ const Mt = (e) => {
         "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"
       ),
       ...n,
-      children: /* @__PURE__ */ a("div", { className: "container", children: t })
+      children: /* @__PURE__ */ o("div", { className: "container", children: t })
     }
   ) }) });
-}, Pt = (e) => {
-  const { className: r, children: t, ...n } = e, { isExpanded: s } = A(R);
-  return /* @__PURE__ */ a(
+}, Xt = (e) => {
+  const { className: r, children: t, ...n } = e, { isExpanded: a } = A(q);
+  return /* @__PURE__ */ o(
     "nav",
     {
       className: l(
         r,
         "my-8 flex flex-col md:mb-0 md:flex md:flex-row md:flex-wrap md:gap-x-8",
         {
-          hidden: !s
+          hidden: !a
         }
       ),
       ...n,
       children: t
     }
   );
-}, St = b(
+}, Yt = g(
   (e, r) => {
-    const { active: t, className: n, children: s, ...o } = e;
-    return /* @__PURE__ */ a(
+    const { active: t, className: n, children: a, ...s } = e;
+    return /* @__PURE__ */ o(
       "a",
       {
         "aria-current": t ? "page" : void 0,
@@ -820,108 +1005,108 @@ const Mt = (e) => {
           }
         ),
         ref: r,
-        ...o,
-        children: s
+        ...s,
+        children: a
       }
     );
   }
-), Ge = () => {
-  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(R);
-  let n = xe, s = "Meny";
-  return e && (n = ve, s = "Lukk"), /* @__PURE__ */ g(
+), nt = () => {
+  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(q);
+  let n = we, a = "Meny";
+  return e && (n = ye, a = "Lukk"), /* @__PURE__ */ b(
     "button",
     {
       "aria-controls": t,
       "aria-expanded": e,
       className: "inline-flex items-center gap-2 md:hidden",
-      onClick: () => r((o) => !o),
+      onClick: () => r((s) => !s),
       children: [
-        s,
+        a,
         " ",
-        /* @__PURE__ */ a(n, {})
+        /* @__PURE__ */ o(n, {})
       ]
     }
   );
-}, Vt = (e) => {
-  const { className: r, children: t, logo: n, ...s } = e;
-  return /* @__PURE__ */ g(
+}, Bt = (e) => {
+  const { className: r, children: t, logo: n, ...a } = e;
+  return /* @__PURE__ */ b(
     "div",
     {
       className: l(r, "flex items-center justify-between gap-8"),
-      ...s,
+      ...a,
       children: [
         n,
-        /* @__PURE__ */ a("div", { className: "hidden md:block", children: t }),
-        /* @__PURE__ */ a(Ge, {})
+        /* @__PURE__ */ o("div", { className: "hidden md:block", children: t }),
+        /* @__PURE__ */ o(nt, {})
       ]
     }
   );
-}, Jt = (e) => {
-  const { className: r, children: t, ...n } = e, { collapsibleId: s, isExpanded: o } = A(R);
-  return /* @__PURE__ */ a(
+}, Ut = (e) => {
+  const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(q);
+  return /* @__PURE__ */ o(
     "div",
     {
       ...n,
-      "aria-hidden": !o,
+      "aria-hidden": !s,
       className: l(r, "md:-mb-8 md:block", {
-        hidden: !o
+        hidden: !s
       }),
-      id: s,
+      id: a,
       children: t
     }
   );
-}, Ot = (e) => {
-  const { isExpanded: r } = A(R), t = Oe(!1);
-  return !r || !t ? null : /* @__PURE__ */ a(Z, { children: e.children });
-}, w = 2, O = I({ currentPage: 0, pageCount: 0 }), Tt = (e) => {
+}, Qt = (e) => {
+  const { isExpanded: r } = A(q), t = Ze(!1);
+  return !r || !t ? null : /* @__PURE__ */ o(Z, { children: e.children });
+}, y = 2, F = w({ currentPage: 0, pageCount: 0 }), Ht = (e) => {
   const {
     className: r,
     page: t,
     count: n,
-    onChange: s,
-    getItemHref: o,
+    onChange: a,
+    getItemHref: s,
     getItemAriaLabel: i,
     nextPageAriaLabel: c,
     prevPageAriaLabel: u,
     ...d
-  } = e, m = M(
+  } = e, m = C(
     () => ({
       currentPage: Math.max(1, Math.min(t, n)),
       pageCount: Math.max(1, n)
     }),
     [t, n]
   ), h = (f) => (p) => {
-    s && (p.preventDefault(), s(f));
+    a && (p.preventDefault(), a(f));
   };
-  return /* @__PURE__ */ a(O.Provider, { value: m, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ o(F.Provider, { value: m, children: /* @__PURE__ */ b(
     "nav",
     {
       className: l("flex justify-center gap-2 sm:gap-4", r),
       ...d,
       children: [
-        /* @__PURE__ */ a(
-          De,
+        /* @__PURE__ */ o(
+          ot,
           {
             "aria-label": u,
-            href: o(t - 1),
+            href: s(t - 1),
             onClick: h(t - 1)
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           _,
           {
             page: 1,
-            href: o(1),
+            href: s(1),
             onClick: h(1),
             "aria-label": i(1),
             selected: t === 1
           }
         ),
-        n > 2 + w * 2 && t > w + 2 && /* @__PURE__ */ a(_e, {}),
-        /* @__PURE__ */ a($e, { children: (f) => /* @__PURE__ */ a(
+        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(st, {}),
+        /* @__PURE__ */ o(it, { children: (f) => /* @__PURE__ */ o(
           _,
           {
-            href: o(f),
+            href: s(f),
             onClick: h(f),
             "aria-label": i(f),
             page: f,
@@ -929,46 +1114,46 @@ const Mt = (e) => {
           },
           f
         ) }),
-        /* @__PURE__ */ a(
-          He,
+        /* @__PURE__ */ o(
+          at,
           {
             "aria-label": c,
-            href: o(t + 1),
+            href: s(t + 1),
             onClick: h(t + 1)
           }
         )
       ]
     }
   ) });
-}, He = b((e, r) => {
-  const { currentPage: t, pageCount: n } = A(O), s = t >= n;
-  return /* @__PURE__ */ a(
-    Q,
+}, at = g((e, r) => {
+  const { currentPage: t, pageCount: n } = A(F), a = t >= n;
+  return /* @__PURE__ */ o(
+    U,
     {
-      "aria-hidden": s,
-      className: s ? "invisible" : void 0,
+      "aria-hidden": a,
+      className: a ? "invisible" : void 0,
       ref: r,
       rel: "next",
       ...e,
-      children: /* @__PURE__ */ a(Ne, {})
+      children: /* @__PURE__ */ o(Ie, {})
     }
   );
-}), De = b((e, r) => {
-  const { currentPage: t } = A(O), n = t <= 1;
-  return /* @__PURE__ */ a(
-    Q,
+}), ot = g((e, r) => {
+  const { currentPage: t } = A(F), n = t <= 1;
+  return /* @__PURE__ */ o(
+    U,
     {
       "aria-hidden": n,
       className: n ? "invisible" : void 0,
       ref: r,
       rel: "prev",
       ...e,
-      children: /* @__PURE__ */ a(we, {})
+      children: /* @__PURE__ */ o(Ee, {})
     }
   );
-}), Q = b((e, r) => {
+}), U = g((e, r) => {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "a",
     {
       className: l(
@@ -979,52 +1164,52 @@ const Mt = (e) => {
       ...n
     }
   );
-}), _e = () => /* @__PURE__ */ a("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), $e = ({ children: e }) => {
-  const { currentPage: r, pageCount: t } = A(O), n = Math.min(
-    Math.max(2 + w * 2, r + w),
+}), st = () => /* @__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: "..." }), it = ({ children: e }) => {
+  const { currentPage: r, pageCount: t } = A(F), n = Math.min(
+    Math.max(2 + y * 2, r + y),
     t
   );
-  let s = Math.max(
-    Math.min(r - w, n - w * 2),
+  let a = Math.max(
+    Math.min(r - y, n - y * 2),
     1
   );
-  return s - w === 0 && (s = s - 1), Array.from({ length: n - s }, (i, c) => s + c + 1).map((i) => e(i));
-}, _ = b((e, r) => {
-  const { page: t, selected: n, ...s } = e;
-  return /* @__PURE__ */ a(Q, { "aria-current": n ? "page" : void 0, ref: r, ...s, children: t });
-}), fe = I({
+  return a - y === 0 && (a = a - 1), Array.from({ length: n - a }, (i, c) => a + c + 1).map((i) => e(i));
+}, _ = g((e, r) => {
+  const { page: t, selected: n, ...a } = e;
+  return /* @__PURE__ */ o(U, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
+}), be = w({
   defaultValue: void 0,
   isControlled: !1,
   name: void 0,
-  onChange: y,
+  onChange: I,
   required: !1,
   value: void 0,
   error: !1
-}), jt = b((e, r) => {
-  const { children: t, className: n, ...s } = e, { defaultValue: o, isControlled: i, name: c, onChange: u, required: d, value: m, error: h } = A(fe);
-  return /* @__PURE__ */ g("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
-    /* @__PURE__ */ a(
+}), Dt = g((e, r) => {
+  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: c, onChange: u, required: d, value: m, error: h } = A(be);
+  return /* @__PURE__ */ b("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
+    /* @__PURE__ */ o(
       "input",
       {
         className: l("radio", h && "border-red"),
-        defaultChecked: i ? void 0 : s.value === o,
-        checked: i ? s.value === m : void 0,
+        defaultChecked: i ? void 0 : a.value === s,
+        checked: i ? a.value === m : void 0,
         name: c,
         onChange: i ? u : void 0,
         required: d,
         type: "radio",
         ref: r,
-        ...s
+        ...a
       }
     ),
     t
   ] });
-}), Ft = b(
+}), Gt = g(
   (e, r) => {
     const t = "value" in e, {
       className: n,
-      defaultValue: s,
-      description: o,
+      defaultValue: a,
+      description: s,
       error: i,
       id: c,
       children: u,
@@ -1033,66 +1218,66 @@ const Mt = (e) => {
       onChange: h,
       required: f,
       value: p,
-      ...v
-    } = e, x = q(
+      ...x
+    } = e, v = E(
       (ge) => {
-        const be = ge.target.value;
-        h == null || h(be);
+        const he = ge.target.value;
+        h == null || h(he);
       },
       [h]
-    ), T = M(
+    ), J = C(
       () => ({
-        defaultValue: s,
+        defaultValue: a,
         isControlled: t,
         name: m,
-        onChange: x,
+        onChange: v,
         required: f,
         value: p,
         error: !!i
       }),
-      [s, t, m, x, f, p, i]
-    ), j = C(c), U = `${j}:label`, G = `${j}:help`, H = j + "err", F = i;
-    return /* @__PURE__ */ a(fe.Provider, { value: T, children: /* @__PURE__ */ g(
+      [a, t, m, v, f, p, i]
+    ), O = S(c), Q = `${O}:label`, H = `${O}:help`, D = O + "err", j = i;
+    return /* @__PURE__ */ o(be.Provider, { value: J, children: /* @__PURE__ */ b(
       "div",
       {
         "aria-describedby": l({
-          [H]: F,
-          [G]: o
+          [D]: j,
+          [H]: s
         }) || void 0,
         "aria-invalid": !!i,
-        "aria-labelledby": d ? U : void 0,
+        "aria-labelledby": d ? Q : void 0,
         className: l(n, "flex flex-col gap-4"),
         role: "radiogroup",
         ref: r,
-        ...v,
+        ...x,
         children: [
-          d && /* @__PURE__ */ a(V, { id: U, isRequired: f, isInvalid: !!i, children: d }),
-          o && /* @__PURE__ */ a(S, { id: G, children: o }),
+          d && /* @__PURE__ */ o(V, { id: Q, isRequired: f, isInvalid: !!i, children: d }),
+          s && /* @__PURE__ */ o(z, { id: H, children: s }),
           u,
-          F && /* @__PURE__ */ a(E, { id: H, children: F })
+          j && /* @__PURE__ */ o(k, { id: D, children: j })
         ]
       }
     ) });
   }
-), et = b(
+), lt = g(
   (e, r) => {
-    const { children: t, className: n, isInvalid: s, size: o, ...i } = e, c = o === "small";
-    return /* @__PURE__ */ g("div", { className: l(n, "relative", c && "text-sm"), children: [
-      /* @__PURE__ */ a(
+    const { children: t, className: n, isInvalid: a, size: s, ...i } = e, c = s === "small";
+    return /* @__PURE__ */ b("div", { className: l(n, "relative", c && "text-sm"), children: [
+      /* @__PURE__ */ o(
         "select",
         {
-          "aria-invalid": s,
+          "aria-invalid": a,
           ...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",
-            s ? "border-red focus:border-red" : "focus:border-blue-dark border-black"
+            a ? "border-red focus:border-red" : "focus:border-blue-dark border-black"
           ),
           ref: r,
           children: t
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ o(
         re,
         {
           className: l(
@@ -1103,76 +1288,76 @@ const Mt = (e) => {
       )
     ] });
   }
-), Zt = b(
+), _t = g(
   (e, r) => {
     const {
       description: t,
       error: n,
-      id: s,
-      label: o,
+      id: a,
+      label: s,
       disableValidation: i = !1,
       ...c
-    } = e, u = L(null), d = Y(u, r), { validity: m, validationMessage: h } = z(
+    } = e, u = R(null), d = X(u, r), { validity: m, validationMessage: h } = L(
       u,
       !i
-    ), f = C(s), p = f + "help", v = f + "err", x = n || h;
-    return /* @__PURE__ */ g("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ a(
+    ), f = S(a), p = f + "help", x = f + "err", v = n || h;
+    return /* @__PURE__ */ b("div", { className: "grid gap-2", children: [
+      /* @__PURE__ */ o(
         V,
         {
           htmlFor: f,
           isRequired: e.required,
           isInvalid: !!n || m === "invalid",
-          children: o
+          children: s
         }
       ),
-      t && /* @__PURE__ */ a(S, { id: p, children: t }),
-      /* @__PURE__ */ a(
-        et,
+      t && /* @__PURE__ */ o(z, { id: p, children: t }),
+      /* @__PURE__ */ o(
+        lt,
         {
           id: f,
           ref: d,
           ...c,
           isInvalid: !!n || m === "invalid",
           "aria-describedby": l({
-            [v]: x,
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ a(E, { id: v, children: x })
+      v && /* @__PURE__ */ o(k, { id: x, children: v })
     ] });
   }
-), Wt = (e) => {
-  const { heading: r, children: t, closeSnackbar: n } = e, [s, o] = k(!1);
-  return /* @__PURE__ */ a("div", { className: "container max-w-[59rem]", children: /* @__PURE__ */ a("div", { className: "bg-orange-light px-8 py-4 max-md:p-4", children: /* @__PURE__ */ g("div", { className: "snackbar grid items-center", children: [
-    /* @__PURE__ */ a(ae, { className: "text-orange snackbar-icon mr-4 self-start md:mr-8 md:text-2xl" }),
-    /* @__PURE__ */ a(
+), $t = (e) => {
+  const { heading: r, children: t, closeSnackbar: n } = e, [a, s] = M(!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__ */ b("div", { className: "snackbar grid items-center", children: [
+    /* @__PURE__ */ o(ae, { className: "text-orange snackbar-icon mr-4 self-start md:mr-8 md:text-2xl" }),
+    /* @__PURE__ */ o(
       "h3",
       {
         className: l(
           "snackbar-header min-w-0 max-w-prose text-base font-medium",
           {
-            "overflow-hidden overflow-ellipsis whitespace-nowrap": !s
+            "overflow-hidden overflow-ellipsis whitespace-nowrap": !a
           }
         ),
         children: r
       }
     ),
-    /* @__PURE__ */ g("div", { className: "snackbar-actions flex justify-end gap-4 max-md:mt-3 md:ml-4", children: [
-      /* @__PURE__ */ a(
+    /* @__PURE__ */ b("div", { className: "snackbar-actions flex justify-end gap-4 max-md:mt-3 md:ml-4", children: [
+      /* @__PURE__ */ o(
         $,
         {
-          "aria-expanded": s,
-          onClick: () => o(!s),
-          children: s ? "Les mindre" : "Les mer"
+          "aria-expanded": a,
+          onClick: () => s(!a),
+          children: a ? "Les mindre" : "Les mer"
         }
       ),
-      /* @__PURE__ */ a($, { onClick: n, children: "Ok" })
+      /* @__PURE__ */ o($, { onClick: n, children: "Ok" })
     ] }),
-    s && t
+    a && t
   ] }) }) });
-}, $ = (e) => /* @__PURE__ */ a(
+}, $ = (e) => /* @__PURE__ */ o(
   "button",
   {
     className: l(
@@ -1182,36 +1367,36 @@ const Mt = (e) => {
     ...e,
     children: e.children
   }
-), Kt = (e) => /* @__PURE__ */ a(
+), er = (e) => /* @__PURE__ */ o(
   "div",
   {
     className: "snackbar-content my-4 max-h-[50vh] max-w-prose overflow-y-auto",
     ...e,
     children: e.children
   }
-), tt = (e) => {
-  const { align: r = "center", children: t, className: n, ...s } = e;
-  return /* @__PURE__ */ a("ol", { className: l(n, "flex flex-col gap-8 md:gap-12"), ...s, children: W.map(t, (o) => K(o, {
+), dt = (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: W.map(t, (s) => K(s, {
     align: r
   })) });
-}, rt = (e) => {
-  const { className: r, children: t, bullet: n, align: s = "center", ...o } = e;
-  return /* @__PURE__ */ g(
+}, ct = (e) => {
+  const { className: r, children: t, bullet: n, align: a = "center", ...s } = e;
+  return /* @__PURE__ */ b(
     "li",
     {
       className: l(
         r,
         "group relative flex gap-4 text-sm md:gap-8 md:text-base",
-        { "items-center": s === "center" }
+        { "items-center": a === "center" }
       ),
-      ...o,
+      ...s,
       children: [
-        /* @__PURE__ */ a(nt, { align: s, children: n }),
+        /* @__PURE__ */ o(mt, { align: a, children: n }),
         t
       ]
     }
   );
-}, nt = ({ align: e, ...r }) => /* @__PURE__ */ a(
+}, mt = ({ align: e, ...r }) => /* @__PURE__ */ o(
   "span",
   {
     "aria-hidden": !0,
@@ -1225,33 +1410,33 @@ const Mt = (e) => {
     ...r
   }
 );
-tt.Item = rt;
-const Yt = b(
+dt.Item = ct;
+const tr = g(
   (e, r) => {
     const {
       description: t,
       error: n,
-      id: s,
-      label: o,
+      id: a,
+      label: s,
       disableValidation: i = !1,
       ...c
-    } = e, u = L(null), d = Y(u, r), { validity: m, validationMessage: h } = z(
+    } = e, u = R(null), d = X(u, r), { validity: m, validationMessage: h } = L(
       u,
       !i
-    ), f = C(s), p = f + "help", v = f + "err", x = n || h;
-    return /* @__PURE__ */ g("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ a(
+    ), f = S(a), p = f + "help", x = f + "err", v = n || h;
+    return /* @__PURE__ */ b("div", { className: "grid gap-2", children: [
+      /* @__PURE__ */ o(
         V,
         {
           htmlFor: f,
           isRequired: e.required,
           isInvalid: !!n || m === "invalid",
-          children: o
+          children: s
         }
       ),
-      t && /* @__PURE__ */ a(S, { id: p, children: t }),
-      /* @__PURE__ */ a(
-        ue,
+      t && /* @__PURE__ */ o(z, { id: p, children: t }),
+      /* @__PURE__ */ o(
+        fe,
         {
           as: "textarea",
           ref: d,
@@ -1259,111 +1444,116 @@ const Yt = b(
           ...c,
           isInvalid: !!n || m === "invalid",
           "aria-describedby": l({
-            [v]: x,
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ a(E, { id: v, children: x })
+      v && /* @__PURE__ */ o(k, { id: x, children: v })
     ] });
   }
-), Xt = b(
+), rr = g(
   (e, r) => {
     const {
       description: t,
       error: n,
-      id: s,
-      label: o,
+      id: a,
+      label: s,
       type: i = "text",
       disableValidation: c = !1,
       ...u
-    } = e, d = L(null), { validity: m, validationMessage: h } = z(
+    } = e, d = R(null), { validity: m, validationMessage: h } = L(
       d,
       !c
-    ), f = C(s), p = f + "help", v = f + "err", x = n || h, T = Y(d, r);
-    return /* @__PURE__ */ g("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ a(
+    ), f = S(a), p = f + "help", x = f + "err", v = n || h, J = X(d, r);
+    return /* @__PURE__ */ b("div", { className: "grid gap-2", children: [
+      /* @__PURE__ */ o(
         V,
         {
           htmlFor: f,
           isRequired: e.required,
           isInvalid: !!n || m === "invalid",
-          children: o
+          children: s
         }
       ),
-      t && /* @__PURE__ */ a(S, { id: p, children: t }),
-      /* @__PURE__ */ a(
-        ue,
+      t && /* @__PURE__ */ o(z, { id: p, children: t }),
+      /* @__PURE__ */ o(
+        fe,
         {
           id: f,
-          ref: T,
+          ref: J,
           type: i,
           ...u,
           isInvalid: !!n || m === "invalid",
           "aria-describedby": l({
-            [v]: x,
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ a(E, { id: v, children: x })
+      v && /* @__PURE__ */ o(k, { id: x, children: v })
     ] });
   }
 );
 export {
-  X as Accordion,
-  qe as AccordionContent,
-  Re as AccordionHeader,
-  Ee as AccordionItem,
-  ct as Alert,
-  ut as Banner,
-  ft as BannerImage,
-  gt as Button,
+  Y as Accordion,
+  Le as AccordionContent,
+  Me as AccordionHeader,
+  qe as AccordionItem,
+  vt as Alert,
+  Nt as Banner,
+  wt as BannerImage,
+  yt as Button,
   P as ButtonColorContext,
-  bt as Campaign,
-  ht as Card,
-  xt as CardContent,
-  pt as CardImage,
-  vt as CardLinkOverlay,
-  At as CardList,
-  Nt as Checkbox,
-  wt as Chip,
-  yt as Footer,
-  It as Form,
-  Ct as FormError,
-  E as FormErrorMessage,
-  Qe as FormHeading,
-  S as FormHelperText,
+  It as Campaign,
+  Et as Card,
+  St as CardContent,
+  Ct as CardImage,
+  kt as CardLinkOverlay,
+  Rt as CardList,
+  qt as Checkbox,
+  Mt as Chip,
+  Lt as Footer,
+  Pt as Form,
+  zt as FormError,
+  k as FormErrorMessage,
+  Ge as FormHeading,
+  z as FormHelperText,
   V as FormLabel,
-  Et as FormSuccess,
-  Rt as Hero,
-  Lt as HeroActions,
-  kt as HeroContent,
-  J as HeroContext,
-  qt as HeroImage,
-  ue as Input,
-  Mt as Link,
-  zt as Navbar,
-  Jt as NavbarCollapsible,
-  Vt as NavbarContent,
-  Ot as NavbarExpandedMobileContent,
-  St as NavbarItem,
-  Pt as NavbarItems,
-  Tt as Pagination,
-  jt as Radio,
-  Ft as RadioGroup,
-  Zt as Select,
-  Wt as Snackbar,
+  Ft as FormStep,
+  _e as FormStepHeader,
+  $e as FormStepHeaderContent,
+  Tt as FormStepProvider,
+  Vt as FormSuccess,
+  Jt as Hero,
+  Zt as HeroActions,
+  jt as HeroContent,
+  T as HeroContext,
+  Ot as HeroImage,
+  fe as Input,
+  Wt as Link,
+  Kt as Navbar,
+  Ut as NavbarCollapsible,
+  Bt as NavbarContent,
+  Qt as NavbarExpandedMobileContent,
+  Yt as NavbarItem,
+  Xt as NavbarItems,
+  Ht as Pagination,
+  Dt as Radio,
+  Gt as RadioGroup,
+  _t as Select,
+  $t as Snackbar,
   $ as SnackbarButton,
-  Kt as SnackbarContent,
-  tt as StepList,
-  rt as StepListItem,
-  Yt as TextArea,
-  Xt as TextField,
+  er as SnackbarContent,
+  dt as StepList,
+  ct as StepListItem,
+  tr as TextArea,
+  rr as TextField,
   le as useBlockBackgroundColor,
-  C as useFallbackId,
-  z as useFormControlValidity,
+  S as useFallbackId,
+  L as useFormControlValidity,
+  et as useFormStepContext,
   ie as useMedia,
-  mt as usePrefersReducedMotion,
-  Oe as useScreenMaxWidthMd
+  xt as usePrefersReducedMotion,
+  Ze as useScreenMaxWidthMd
 };