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

package/dist/grunnmuren.mjs

@@ -1,15 +1,16 @@
 'use client';
-import { jsx as o, jsxs as b, Fragment as W } from "react/jsx-runtime";
-import K, { createContext as w, useContext as A, useState as M, useCallback as E, useEffect as xe, useId as re, forwardRef as g, Children as X, isValidElement as ne, cloneElement as Y, useRef as S, useMemo as C, useReducer as Ne } from "react";
-import { ChevronDown as ae, Warning as oe, InfoCircle as se, LoadingSpinner as we, CheckCircle as ye, MenuAlt as Ie, Close as Ee, ChevronRight as Ce, ChevronLeft as Se } from "@obosbbl/grunnmuren-icons";
-import { useCollapse as Re } from "react-collapsed";
+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 B from "@react-hook/merged-ref";
+import { useMediaQuery as ae, useUpdateEffect as ye } from "@react-hookz/web";
+import K from "@react-hook/merged-ref";
 const I = () => {
-}, ke = 300, qe = "duration-300", U = (e) => {
+}, 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 });
-}, Q = w({
+}, Y = w({
   isExpanded: !1,
   setExpanded: I,
   // @ts-expect-error noop
@@ -17,14 +18,14 @@ const I = () => {
   // @ts-expect-error noop
   getToggleProps: I,
   onChange: I
-}), Me = (e) => {
-  const { className: r, defaultOpen: t, onChange: n = I, open: a, ...s } = e, i = Re({
+}), Ee = (e) => {
+  const { className: r, defaultOpen: t, onChange: n = I, open: a, ...s } = e, i = we({
     defaultExpanded: t,
     isExpanded: a,
-    duration: ke,
+    duration: Ie,
     easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
   });
-  return /* @__PURE__ */ o(Q.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(Y.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ o(
     "div",
     {
       className: l(
@@ -35,9 +36,9 @@ const I = () => {
       ...s
     }
   ) });
-}, Le = (e) => {
-  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: c } = A(Q), u = s({ onClick: () => i(!c) });
-  return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ b(
+}, Re = (e) => {
+  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: c } = A(Y), m = s({ onClick: () => i(!c) });
+  return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ f(
     "button",
     {
       className: l(
@@ -45,27 +46,27 @@ const I = () => {
         "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,
-      ...u,
-      id: ie(u["aria-controls"]),
+      ...m,
+      id: oe(m["aria-controls"]),
       children: [
         r,
         /* @__PURE__ */ o(
-          ae,
+          te,
           {
-            className: `shrink-0 text-sm ${qe} group-aria-expanded:rotate-180`
+            className: `shrink-0 text-sm ${Ce} group-aria-expanded:rotate-180`
           }
         )
       ]
     }
   ) });
-}, Pe = (e) => {
-  const { getCollapseProps: r } = A(Q), { className: t, ...n } = e, a = r();
-  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": ie(a.id), children: /* @__PURE__ */ o("div", { className: l(t, "p-5 pb-10"), ...n }) });
-}, ie = (e) => e + "toggle";
-U.Item = Me;
-U.Header = Le;
-U.Content = Pe;
-const Et = (e) => {
+}, ke = (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 }) });
+}, oe = (e) => e + "toggle";
+X.Item = Ee;
+X.Header = Re;
+X.Content = ke;
+const dt = (e) => {
   const { className: r, children: t, heading: n, severity: a = "alert", ...s } = e;
   return /* @__PURE__ */ o(
     "section",
@@ -76,58 +77,23 @@ const Et = (e) => {
       }),
       role: "alert",
       ...s,
-      children: /* @__PURE__ */ b("div", { className: "flex justify-center", children: [
+      children: /* @__PURE__ */ f("div", { className: "flex justify-center", children: [
         /* @__PURE__ */ o(
-          ze,
+          Se,
           {
             className: "mr-4 flex-none md:mr-8 md:text-2xl",
             severity: a
           }
         ),
-        /* @__PURE__ */ b("div", { className: "w-prose flex-initial", children: [
+        /* @__PURE__ */ f("div", { className: "w-prose flex-initial", children: [
           /* @__PURE__ */ o("h2", { className: "h4 mb-2", children: n }),
           t
         ] })
       ] })
     }
   );
-}, ze = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(oe, { className: l(r, "text-red") }) : /* @__PURE__ */ o(se, { className: l(r, "text-orange") });
-var le = {}, N = {};
-Object.defineProperty(N, "__esModule", { value: !0 });
-N.isNavigator = N.isBrowser = N.off = N.on = N.noop = void 0;
-var Ve = function() {
-};
-N.noop = Ve;
-function Te(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 = Te;
-function Fe(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 = Fe;
-N.isBrowser = typeof window < "u";
-N.isNavigator = typeof navigator < "u";
-Object.defineProperty(le, "__esModule", { value: !0 });
-var $ = K, Je = N, Oe = function(e, r) {
-  return r !== void 0 ? r : Je.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);
-}, je = function(e, r) {
-  var t = $.useState(Oe(e, r)), n = t[0], a = t[1];
-  return $.useEffect(function() {
-    var s = !0, i = window.matchMedia(e), c = function() {
-      s && a(!!i.matches);
-    };
-    return i.addListener(c), a(i.matches), function() {
-      s = !1, i.removeListener(c);
-    };
-  }, [e]), n;
-}, de = le.default = je;
-const Ze = "(prefers-reduced-motion: reduce)", Ct = (e = !1) => de(Ze, e);
-function ce(e) {
+}, Se = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(re, { className: l(r, "text-red") }) : /* @__PURE__ */ o(ne, { className: l(r, "text-orange") }), qe = "(prefers-reduced-motion: reduce)", ct = (e = !1) => ae(qe, { initializeWithValue: e });
+function se(e) {
   switch (e) {
     case "gray":
       return "bg-gray-lightest";
@@ -141,34 +107,34 @@ function ce(e) {
       return "bg-sky-light";
   }
 }
-const We = (e) => de("(max-width: 767.9px)", e);
+const Le = (e) => ae("(max-width: 767.9px)", { initializeWithValue: e });
 function L(e, r = !0) {
-  const [t, n] = M("indeterminate"), [a, s] = M(), i = E((d) => {
+  const [t, n] = q("indeterminate"), [a, s] = q(), i = N((d) => {
     d.target.checkValidity() && (n("valid"), s(void 0));
-  }, []), c = E(
+  }, []), c = N(
     (d) => {
       t !== "indeterminate" && d.target.checkValidity() && (n("valid"), s(void 0));
     },
     [t]
-  ), u = E((d) => {
+  ), m = N((d) => {
     d.preventDefault();
-    const m = d.target.validationMessage;
-    s(m), n("invalid");
+    const u = d.target.validationMessage;
+    s(u), n("invalid");
   }, []);
-  return xe(() => {
-    var m;
+  return fe(() => {
+    var u;
     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);
+    ((u = d == null ? void 0 : d.form) == null ? void 0 : u.noValidate) !== !0 && (d == null || d.addEventListener("blur", i), d == null || d.addEventListener("input", c), d == null || d.addEventListener("invalid", m)), () => {
+      d == null || d.removeEventListener("blur", i), d == null || d.removeEventListener("input", c), d == null || d.removeEventListener("invalid", m);
     };
   }, [r, c]), { validity: t, validationMessage: a };
 }
 function R(e) {
-  const r = re();
+  const r = $();
   return e ?? r;
 }
-const St = (e) => {
+const mt = (e) => {
   const {
     bgColor: r,
     className: t,
@@ -176,15 +142,15 @@ const St = (e) => {
     heading: a,
     image: s,
     ...i
-  } = e, c = ce(r);
-  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: [
+  } = e, c = se(r);
+  return /* @__PURE__ */ o("article", { className: l(t, c, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ f("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
     s,
-    /* @__PURE__ */ b("div", { className: "max-w-prose", children: [
+    /* @__PURE__ */ f("div", { className: "max-w-prose", children: [
       a && /* @__PURE__ */ o("h2", { className: "h3 mb-4", children: a }),
       n
     ] })
   ] }) });
-}, Rt = (e) => /* @__PURE__ */ o(
+}, ut = (e) => /* @__PURE__ */ o(
   "img",
   {
     loading: "lazy",
@@ -192,7 +158,7 @@ const St = (e) => {
     className: "w-20 flex-none self-center md:w-32 md:self-start",
     ...e
   }
-), Ke = {
+), Me = {
   "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,7 +167,7 @@ const St = (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"
-}, kt = g((e, r) => {
+}, bt = h((e, r) => {
   const {
     children: t,
     className: n,
@@ -209,10 +175,10 @@ const St = (e) => {
     href: s,
     loading: i,
     type: c = "button",
-    variant: u = "primary",
+    variant: m = "primary",
     ...d
-  } = e, m = A(P), f = Ke[`${a ?? m}-${u}`], p = l(n, f, "button"), x = i ? /* @__PURE__ */ o(Xe, { children: t }) : t;
-  return /* @__PURE__ */ o(W, { children: s ? /* @__PURE__ */ o(
+  } = e, u = A(M), b = Me[`${a ?? u}-${m}`], p = l(n, b, "button"), v = i ? /* @__PURE__ */ o(Pe, { children: t }) : t;
+  return /* @__PURE__ */ o(O, { children: s ? /* @__PURE__ */ o(
     "a",
     {
       "aria-busy": i ? !0 : void 0,
@@ -220,7 +186,7 @@ const St = (e) => {
       href: s,
       ref: r,
       className: p,
-      children: x
+      children: v
     }
   ) : /* @__PURE__ */ o(
     "button",
@@ -230,34 +196,34 @@ const St = (e) => {
       type: c,
       ref: r,
       className: p,
-      children: x
+      children: v
     }
   ) });
-}), Xe = (e) => /* @__PURE__ */ b(W, { children: [
-  me(e.children),
+}), Pe = (e) => /* @__PURE__ */ f(O, { children: [
+  ie(e.children),
   /* @__PURE__ */ o(
     "span",
     {
       className: "!visible absolute bottom-1 left-1 right-1 top-1 grid place-items-center overflow-hidden bg-inherit",
       "aria-hidden": !0,
-      children: /* @__PURE__ */ o(we, { className: "animate-spin" })
+      children: /* @__PURE__ */ o(he, { className: "animate-spin" })
     }
   )
 ] });
-function me(e) {
-  return X.map(e, (r) => {
-    if (!ne(r))
+function ie(e) {
+  return Z.map(e, (r) => {
+    if (!ee(r))
       return typeof r == "string" ? /* @__PURE__ */ o("span", { children: r }) : r;
     if (r.props.children) {
       const t = {
-        children: me(r.props.children)
+        children: ie(r.props.children)
       };
-      r = Y(r, t);
+      r = W(r, t);
     }
     return r;
   });
 }
-const P = w("standard"), ue = w(!0), Ye = (e, r) => {
+const M = w("standard"), le = w(!0), ze = (e, r) => {
   const {
     as: t = "div",
     body: n,
@@ -266,7 +232,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
     rightAlignBody: i = !0,
     ...c
   } = e;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     t,
     {
       className: l(
@@ -276,12 +242,12 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ...c,
       ref: r,
       children: [
-        /* @__PURE__ */ o(ue.Provider, { value: i, children: s }),
+        /* @__PURE__ */ o(le.Provider, { value: i, children: s }),
         n
       ]
     }
   );
-}, Be = g(Ye), Ue = g(
+}, Ve = h(ze), Te = h(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ o(
@@ -293,16 +259,16 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       }
     );
   }
-), Qe = g(
+), Fe = h(
   (e, r) => {
-    const { className: t, children: n, ...a } = e, s = A(ue), i = l(
+    const { className: t, children: n, ...a } = e, s = A(le), i = l(
       t,
       "max-md:rounded-b-3xl w-full",
       s ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
     );
-    if (ne(n)) {
-      const c = X.only(n);
-      return Y(c, {
+    if (ee(n)) {
+      const c = Z.only(n);
+      return W(c, {
         // @ts-expect-error assume className prop is allowed
         className: i,
         ref: r,
@@ -311,10 +277,10 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
     }
     return /* @__PURE__ */ o("img", { className: i, ref: r, ...a });
   }
-), qt = Object.assign({}, Be, {
-  Body: Ue,
-  Image: Qe
-}), He = (e, r) => {
+), ft = Object.assign({}, Ve, {
+  Body: Te,
+  Image: Fe
+}), Je = (e, r) => {
   const {
     as: t = "div",
     className: n,
@@ -332,7 +298,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ref: r
     }
   );
-}, Mt = g(He), Lt = g(
+}, gt = h(Je), ht = h(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ o(
@@ -345,9 +311,9 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       }
     );
   }
-), Pt = g(
+), pt = h(
   (e, r) => {
-    const { bgColor: t, className: n, ...a } = e, s = ce(t);
+    const { bgColor: t, className: n, ...a } = e, s = se(t);
     return /* @__PURE__ */ o("div", { className: l(s, n), children: /* @__PURE__ */ o(
       "div",
       {
@@ -357,12 +323,12 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       }
     ) });
   }
-), zt = g(
+), At = h(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ o("div", { className: l(t, "p-8 md:px-10"), ...n, ref: r });
   }
-), Vt = g((e, r) => {
+), xt = h((e, r) => {
   const { className: t, ...n } = e;
   return /* @__PURE__ */ o(
     "a",
@@ -375,7 +341,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ...n
     }
   );
-}), Tt = g(
+}), vt = h(
   (e, r) => {
     const {
       children: t,
@@ -384,16 +350,16 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       id: s,
       disableValidation: i = !1,
       ...c
-    } = e, u = S(null), { validity: d, validationMessage: m } = L(
-      u,
+    } = e, m = E(null), { validity: d, validationMessage: u } = L(
+      m,
       !i
-    ), h = R(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: [
+    ), g = R(s), b = g + "err", p = a || u;
+    return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
+      /* @__PURE__ */ f("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
         /* @__PURE__ */ o(
           "input",
           {
-            id: h,
+            id: g,
             className: l(
               "checkbox checked:bg-green checked:border-green grid h-[1.25em] w-[1.25em] flex-none translate-y-[0.1em] cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2",
               {
@@ -404,32 +370,32 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
             ref: r,
             type: "checkbox",
             ...c,
-            "aria-describedby": p ? f : void 0,
+            "aria-describedby": p ? b : void 0,
             "aria-invalid": !!a || d === "invalid"
           }
         ),
         t
       ] }),
-      p && /* @__PURE__ */ o(k, { id: f, children: p })
+      p && /* @__PURE__ */ o(k, { id: b, children: p })
     ] });
   }
-), De = {
+), je = {
   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"
-}, Ge = {
+}, Oe = {
   sky: "text-blue-dark",
   "red-light": "text-red",
   mint: "text-green",
   "orange-light": "text-black",
   "green-light": "text-green",
   "blue-light": "text-blue-dark"
-}, Ft = (e) => {
-  const { className: r, color: t, icon: n, children: a, variant: s = "filled" } = e, i = t && De[t], c = t && Ge[t];
-  return /* @__PURE__ */ b(
+}, Nt = (e) => {
+  const { className: r, color: t, icon: n, children: a, variant: s = "filled" } = e, i = t && je[t], c = t && Oe[t];
+  return /* @__PURE__ */ f(
     "div",
     {
       className: l(
@@ -451,9 +417,9 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ]
     }
   );
-}, Jt = (e) => {
+}, wt = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(M.Provider, { value: "white", children: /* @__PURE__ */ o(
     "footer",
     {
       className: l(
@@ -465,9 +431,9 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       children: /* @__PURE__ */ o("div", { className: "container", children: t })
     }
   ) });
-}, Ot = (e) => {
+}, yt = (e) => {
   const { heading: r, children: t, className: n, ...a } = e;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     "form",
     {
       className: l(
@@ -476,12 +442,12 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ),
       ...a,
       children: [
-        r && /* @__PURE__ */ o(_e, { children: r }),
+        r && /* @__PURE__ */ o(Ze, { children: r }),
         /* @__PURE__ */ o("div", { className: "p-6 md:p-10", children: t })
       ]
     }
   );
-}, _e = (e) => {
+}, Ze = (e) => {
   const { className: r, ...t } = e;
   return /* @__PURE__ */ o(
     "h2",
@@ -493,7 +459,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ...t
     }
   );
-}, jt = (e) => {
+}, It = (e) => {
   const { className: r, ...t } = e;
   return /* @__PURE__ */ o(
     "div",
@@ -509,7 +475,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
   );
 }, k = (e) => {
   const { children: r, className: t, ...n } = e;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     "div",
     {
       className: l(
@@ -519,17 +485,17 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       "aria-live": "polite",
       ...n,
       children: [
-        /* @__PURE__ */ o(oe, { className: "text-red flex-shrink-0" }),
+        /* @__PURE__ */ o(re, { className: "text-red flex-shrink-0" }),
         r
       ]
     }
   );
-}, z = (e) => {
+}, P = (e) => {
   const { className: r, children: t, ...n } = e;
   return /* @__PURE__ */ o("div", { className: l(r, "text-gray-dark text-sm"), ...n, children: t });
-}, V = (e) => {
+}, z = (e) => {
   const { className: r, children: t, isRequired: n, isInvalid: a, ...s } = e;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     "label",
     {
       className: l(r, "block cursor-pointer font-semibold"),
@@ -549,9 +515,9 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ]
     }
   );
-}, Zt = (e) => {
+}, Ct = (e) => {
   const { className: r, heading: t, text: n, ...a } = e;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     "div",
     {
       className: l(
@@ -575,7 +541,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ]
     }
   );
-}, $e = (e) => {
+}, We = (e) => {
   const { className: r, collapsed: t, step: n, onClick: a, children: s, formStatus: i } = e;
   return /* @__PURE__ */ o(
     "button",
@@ -583,13 +549,19 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       type: "button",
       "aria-disabled": t,
       onClick: a,
-      className: l(r, "w-full py-4 pl-4 md:py-8 ", {
-        "bg-blue-dark": !t,
-        "border-black bg-white": t && i !== "completed",
-        "border-green bg-green text-white": t && i === "completed"
-      }),
+      className: l(
+        r,
+        "border-blue-dark w-full rounded-t-lg border-2 py-4 pl-4 md:py-8 ",
+        {
+          "bg-blue-dark": !t,
+          "border-black bg-white": t && i !== "completed",
+          "border-green bg-green text-white": t && i === "completed",
+          "rounded-t-2xl md:rounded-t-3xl": n === 1,
+          "rounded-lg": t
+        }
+      ),
       children: /* @__PURE__ */ o(
-        et,
+        Ke,
         {
           collapsed: t,
           step: n,
@@ -599,7 +571,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       )
     }
   );
-}, et = (e) => {
+}, Ke = (e) => {
   const { collapsed: r, step: t, children: n, formStatus: a } = e, s = C(() => {
     switch (a) {
       case "blank":
@@ -614,10 +586,10 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       case "blank":
         return /* @__PURE__ */ o("div", { children: t });
       case "completed":
-        return /* @__PURE__ */ o(ye, { className: "h-10 w-10 md:h-12 md:w-12" });
+        return /* @__PURE__ */ o(pe, { className: "h-10 w-10 md:h-12 md:w-12" });
     }
   }, [a, t, r]);
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     "h2",
     {
       className: l(
@@ -656,7 +628,7 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
       ]
     }
   );
-}, fe = w([
+}, Q = w([
   {
     activeStep: 1,
     formData: {}
@@ -664,29 +636,45 @@ const P = w("standard"), ue = w(!0), Ye = (e, r) => {
   () => {
   }
 ]);
-function tt(e) {
-  const [r, t] = A(fe), n = E(async () => {
+function Et() {
+  const [e] = A(Q);
+  return {
+    activeStep: e.activeStep,
+    formData: e.formData
+  };
+}
+function Xe(e) {
+  const [r, t] = A(Q), n = N(async () => {
     t({ type: "PREV_STEP" });
-  }, [t]), a = E(
-    (s) => {
+  }, [t]), a = N(
+    (c) => {
       t({
         type: "SET_FORM_STEP_DATA",
         formId: `form${e}`,
-        formValues: s
-      }), t({ type: "NEXT_STEP" });
+        formValues: c
+      });
     },
     [t, e]
+  ), s = N(() => {
+    t({ type: "NEXT_STEP" });
+  }, [t]), i = N(
+    (c) => {
+      a(c), s();
+    },
+    [s, a]
   );
   return {
     isActive: r.activeStep === e,
     activeStep: r.activeStep,
-    setActiveStep: (s) => t({ type: "SET_STEP", step: s }),
+    setActiveStep: (c) => t({ type: "SET_STEP", step: c }),
     previousFormStep: n,
-    submitAndNextFormStep: a,
+    nextFormStep: s,
+    submitAndNextFormStep: i,
+    setFormData: a,
     formData: r.formData
   };
 }
-function rt(e, r) {
+function Ye(e, r) {
   switch (r.type) {
     case "NEXT_STEP":
       return {
@@ -713,75 +701,57 @@ function rt(e, r) {
       };
   }
 }
-function Wt({ children: e }) {
-  const [r, t] = Ne(rt, {
+function Rt({ children: e }) {
+  const [r, t] = ge(Ye, {
     activeStep: 1,
     formData: {}
   }), n = C(() => [r, t], [r, t]);
-  return /* @__PURE__ */ o(fe.Provider, { value: n, children: e });
+  return /* @__PURE__ */ o(Q.Provider, { value: n, children: e });
 }
-var be = {}, T = {};
-Object.defineProperty(T, "__esModule", { value: !0 });
-T.useFirstMountState = void 0;
-var nt = K;
-function at() {
-  var e = nt.useRef(!0);
-  return e.current ? (e.current = !1, !0) : e.current;
-}
-T.useFirstMountState = at;
-Object.defineProperty(be, "__esModule", { value: !0 });
-var ot = K, st = T, it = function(e, r) {
-  var t = st.useFirstMountState();
-  ot.useEffect(function() {
-    if (!t)
-      return e();
-  }, r);
-}, lt = be.default = it;
-const Kt = (e) => {
+const kt = (e) => {
   const {
     children: r,
     heading: t,
     step: n,
     formStatus: a = "blank",
     onSubmit: s,
-    ...i
-  } = e, { isActive: c, setActiveStep: u, activeStep: d } = tt(n), m = S(null), h = E(() => {
-    n < d && u(n);
-  }, [d, n, u]);
-  return lt(() => {
-    var f;
-    c && ((f = m.current) == null || f.scrollIntoView({ behavior: "smooth" }));
-  }, [c]), /* @__PURE__ */ b(
+    className: i,
+    ...c
+  } = e, { isActive: m, setActiveStep: d, activeStep: u } = Xe(n), g = E(null), b = N(() => {
+    n < u && d(n);
+  }, [u, n, d]);
+  return ye(() => {
+    var p;
+    m && ((p = g.current) == null || p.scrollIntoView({ behavior: "smooth" }));
+  }, [m]), /* @__PURE__ */ f(
     "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 }
-      ),
+      className: l("block", i, {
+        "border-none": a === "completed" && !m
+      }),
       onSubmit: s,
-      ref: m,
-      ...i,
+      ref: g,
+      ...c,
       children: [
         /* @__PURE__ */ o(
-          $e,
+          We,
           {
             step: n,
             formStatus: a,
-            collapsed: !c,
-            onClick: h,
+            collapsed: !m,
+            onClick: b,
             children: t
           }
         ),
-        c && /* @__PURE__ */ o("div", { className: "p-6 md:p-10", children: r })
+        m && /* @__PURE__ */ o("div", { className: "border-blue-dark relative rounded-b-lg border-2 p-6 md:p-10", children: r })
       ]
     }
   );
 };
-function ge(e) {
+function de(e) {
   return e !== "vertical-split" && e !== "below-center" && e !== "below-left";
 }
-const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), Xt = g((e, r) => {
+const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), St = h((e, r) => {
   const {
     bgColor: t = "white",
     children: n,
@@ -789,19 +759,19 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     contentPosition: s = "below-center",
     image: i,
     ...c
-  } = e, u = i != null, d = u ? s : "below-center", m = C(
+  } = e, m = i != null, d = m ? s : "below-center", u = C(
     () => ({
       bgColor: t,
       contentPosition: d,
-      hasImage: u
+      hasImage: m
     }),
-    [t, d, u]
+    [t, d, m]
   );
   return /* @__PURE__ */ o(
-    P.Provider,
+    M.Provider,
     {
       value: t === "white" ? "standard" : "mint",
-      children: /* @__PURE__ */ o(F.Provider, { value: m, children: /* @__PURE__ */ b(
+      children: /* @__PURE__ */ o(V.Provider, { value: u, children: /* @__PURE__ */ f(
         "div",
         {
           className: l(
@@ -812,7 +782,7 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
               "md:grid-cols-[50%,50%]": d === "vertical-split"
             }
           ),
-          style: ge(d) ? { gridTemplateAreas: '"hero"' } : void 0,
+          style: de(d) ? { gridTemplateAreas: '"hero"' } : void 0,
           ...c,
           ref: r,
           children: [
@@ -823,10 +793,10 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       ) })
     }
   );
-}), Yt = g(
+}), qt = h(
   (e, r) => {
-    const { contentPosition: t } = A(F);
-    return /* @__PURE__ */ b(
+    const { contentPosition: t } = A(V);
+    return /* @__PURE__ */ f(
       "picture",
       {
         className: l(e.className, "aspect-w-6 aspect-h-7 block", {
@@ -851,10 +821,10 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), Bt = g(
+), Lt = h(
   (e, r) => {
-    const { bgColor: t, contentPosition: n, hasImage: a } = A(F), { children: s, className: i, heading: c, description: u, ...d } = e, m = ge(n);
-    return /* @__PURE__ */ b(
+    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: c, description: m, ...d } = e, u = de(n);
+    return /* @__PURE__ */ f(
       "div",
       {
         className: l(
@@ -876,7 +846,7 @@ const F = 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": m,
+            "md:mx-32 md:my-9 md:w-2/5": u,
             "self-end justify-self-start": n === "bottom-left",
             "self-start justify-self-start": n === "top-left",
             "self-start justify-self-end": n === "top-right",
@@ -885,19 +855,19 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
           }
         ),
         ...d,
-        style: m ? { gridArea: "hero" } : void 0,
+        style: u ? { gridArea: "hero" } : void 0,
         ref: r,
         children: [
           /* @__PURE__ */ o("h1", { children: c }),
-          u && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: u }),
+          m && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: m }),
           s
         ]
       }
     );
   }
-), Ut = g(
+), Mt = h(
   (e, r) => {
-    const { className: t, ...n } = e, { contentPosition: a } = A(F);
+    const { className: t, ...n } = e, { contentPosition: a } = A(V);
     return /* @__PURE__ */ o(
       "div",
       {
@@ -914,7 +884,7 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), he = g((e, r) => {
+), ce = h((e, r) => {
   const {
     className: t,
     isInvalid: n,
@@ -922,10 +892,10 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     as: s,
     type: i,
     rightAddon: c,
-    leftAddon: u,
+    leftAddon: m,
     ...d
-  } = e, m = s ?? "input", h = dt(m, i);
-  return /* @__PURE__ */ b(
+  } = e, u = s ?? "input", g = Qe(u, i);
+  return /* @__PURE__ */ f(
     "div",
     {
       className: l(
@@ -936,20 +906,20 @@ const F = 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": u,
+          "pl-4": m,
           "pr-4": c
         }
       ),
       children: [
-        u,
+        m,
         /* @__PURE__ */ o(
-          m,
+          u,
           {
             "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: h,
+            type: g,
             ...d
           }
         ),
@@ -958,28 +928,28 @@ const F = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     }
   );
 });
-function dt(e, r) {
+function Qe(e, r) {
   if (r != null)
     return r;
   if (e === "input")
     return "text";
 }
-const Qt = (e) => {
+const Pt = (e) => {
   let r = "";
-  return e.icon && (r = "inline-flex items-center gap-2"), /* @__PURE__ */ b("a", { className: r, href: e.href, children: [
+  return e.icon && (r = "inline-flex items-center gap-2"), /* @__PURE__ */ f("a", { className: r, href: e.href, children: [
     e.icon,
     e.children
   ] });
-}, q = w({
+}, S = w({
   setIsExpanded: I,
   isExpanded: !1,
   collapsibleId: ""
-}), Ht = (e) => {
-  const { className: r, children: t, ...n } = e, a = re(), [s, i] = M(!1), c = C(
+}), zt = (e) => {
+  const { className: r, children: t, ...n } = e, a = $(), [s, i] = q(!1), c = C(
     () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
     [s, a]
   );
-  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(q.Provider, { value: c, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(M.Provider, { value: "white", children: /* @__PURE__ */ o(S.Provider, { value: c, children: /* @__PURE__ */ o(
     "div",
     {
       className: l(
@@ -990,8 +960,8 @@ const Qt = (e) => {
       children: /* @__PURE__ */ o("div", { className: "container", children: t })
     }
   ) }) });
-}, Dt = (e) => {
-  const { className: r, children: t, ...n } = e, { isExpanded: a } = A(q);
+}, Vt = (e) => {
+  const { className: r, children: t, ...n } = e, { isExpanded: a } = A(S);
   return /* @__PURE__ */ o(
     "nav",
     {
@@ -1006,7 +976,7 @@ const Qt = (e) => {
       children: t
     }
   );
-}, Gt = g(
+}, Tt = h(
   (e, r) => {
     const { active: t, className: n, children: a, ...s } = e;
     return /* @__PURE__ */ o(
@@ -1026,10 +996,10 @@ const Qt = (e) => {
       }
     );
   }
-), ct = () => {
-  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(q);
-  let n = Ie, a = "Meny";
-  return e && (n = Ee, a = "Lukk"), /* @__PURE__ */ b(
+), Ue = () => {
+  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(S);
+  let n = Ae, a = "Meny";
+  return e && (n = xe, a = "Lukk"), /* @__PURE__ */ f(
     "button",
     {
       "aria-controls": t,
@@ -1043,9 +1013,9 @@ const Qt = (e) => {
       ]
     }
   );
-}, _t = (e) => {
+}, Ft = (e) => {
   const { className: r, children: t, logo: n, ...a } = e;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     "div",
     {
       className: l(r, "flex items-center justify-between gap-8"),
@@ -1053,12 +1023,12 @@ const Qt = (e) => {
       children: [
         n,
         /* @__PURE__ */ o("div", { className: "hidden md:block", children: t }),
-        /* @__PURE__ */ o(ct, {})
+        /* @__PURE__ */ o(Ue, {})
       ]
     }
   );
-}, $t = (e) => {
-  const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(q);
+}, Jt = (e) => {
+  const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(S);
   return /* @__PURE__ */ o(
     "div",
     {
@@ -1071,10 +1041,10 @@ const Qt = (e) => {
       children: t
     }
   );
-}, er = (e) => {
-  const { isExpanded: r } = A(q), t = We(!1);
-  return !r || !t ? null : /* @__PURE__ */ o(W, { children: e.children });
-}, y = 2, J = w({ currentPage: 0, pageCount: 0 }), tr = (e) => {
+}, jt = (e) => {
+  const { isExpanded: r } = A(S), t = Le(!1);
+  return !r || !t ? null : /* @__PURE__ */ o(O, { children: e.children });
+}, y = 2, T = w({ currentPage: 0, pageCount: 0 }), Ot = (e) => {
   const {
     className: r,
     page: t,
@@ -1083,91 +1053,91 @@ const Qt = (e) => {
     getItemHref: s,
     getItemAriaLabel: i,
     nextPageAriaLabel: c,
-    prevPageAriaLabel: u,
+    prevPageAriaLabel: m,
     ...d
-  } = e, m = C(
+  } = e, u = C(
     () => ({
       currentPage: Math.max(1, Math.min(t, n)),
       pageCount: Math.max(1, n)
     }),
     [t, n]
-  ), h = (f) => (p) => {
-    a && (p.preventDefault(), a(f));
+  ), g = (b) => (p) => {
+    a && (p.preventDefault(), a(b));
   };
-  return /* @__PURE__ */ o(J.Provider, { value: m, children: /* @__PURE__ */ b(
+  return /* @__PURE__ */ o(T.Provider, { value: u, children: /* @__PURE__ */ f(
     "nav",
     {
       className: l("flex justify-center gap-2 sm:gap-4", r),
       ...d,
       children: [
         /* @__PURE__ */ o(
-          ut,
+          He,
           {
-            "aria-label": u,
+            "aria-label": m,
             href: s(t - 1),
-            onClick: h(t - 1)
+            onClick: g(t - 1)
           }
         ),
         /* @__PURE__ */ o(
-          ee,
+          G,
           {
             page: 1,
             href: s(1),
-            onClick: h(1),
+            onClick: g(1),
             "aria-label": i(1),
             selected: t === 1
           }
         ),
-        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(ft, {}),
-        /* @__PURE__ */ o(bt, { children: (f) => /* @__PURE__ */ o(
-          ee,
+        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(De, {}),
+        /* @__PURE__ */ o(Ge, { children: (b) => /* @__PURE__ */ o(
+          G,
           {
-            href: s(f),
-            onClick: h(f),
-            "aria-label": i(f),
-            page: f,
-            selected: f === t
+            href: s(b),
+            onClick: g(b),
+            "aria-label": i(b),
+            page: b,
+            selected: b === t
           },
-          f
+          b
         ) }),
         /* @__PURE__ */ o(
-          mt,
+          Be,
           {
             "aria-label": c,
             href: s(t + 1),
-            onClick: h(t + 1)
+            onClick: g(t + 1)
           }
         )
       ]
     }
   ) });
-}, mt = g((e, r) => {
-  const { currentPage: t, pageCount: n } = A(J), a = t >= n;
+}, Be = h((e, r) => {
+  const { currentPage: t, pageCount: n } = A(T), a = t >= n;
   return /* @__PURE__ */ o(
-    H,
+    U,
     {
       "aria-hidden": a,
       className: a ? "invisible" : void 0,
       ref: r,
       rel: "next",
       ...e,
-      children: /* @__PURE__ */ o(Ce, {})
+      children: /* @__PURE__ */ o(ve, {})
     }
   );
-}), ut = g((e, r) => {
-  const { currentPage: t } = A(J), n = t <= 1;
+}), He = h((e, r) => {
+  const { currentPage: t } = A(T), n = t <= 1;
   return /* @__PURE__ */ o(
-    H,
+    U,
     {
       "aria-hidden": n,
       className: n ? "invisible" : void 0,
       ref: r,
       rel: "prev",
       ...e,
-      children: /* @__PURE__ */ o(Se, {})
+      children: /* @__PURE__ */ o(Ne, {})
     }
   );
-}), H = g((e, r) => {
+}), U = h((e, r) => {
   const { className: t, ...n } = e;
   return /* @__PURE__ */ o(
     "a",
@@ -1180,8 +1150,8 @@ const Qt = (e) => {
       ...n
     }
   );
-}), ft = () => /* @__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: "..." }), bt = ({ children: e }) => {
-  const { currentPage: r, pageCount: t } = A(J), n = Math.min(
+}), De = () => /* @__PURE__ */ o("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), Ge = ({ children: e }) => {
+  const { currentPage: r, pageCount: t } = A(T), n = Math.min(
     Math.max(2 + y * 2, r + y),
     t
   );
@@ -1190,10 +1160,10 @@ const Qt = (e) => {
     1
   );
   return a - y === 0 && (a = a - 1), Array.from({ length: n - a }, (i, c) => a + c + 1).map((i) => e(i));
-}, ee = g((e, r) => {
+}, G = h((e, r) => {
   const { page: t, selected: n, ...a } = e;
-  return /* @__PURE__ */ o(H, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
-}), pe = w({
+  return /* @__PURE__ */ o(U, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
+}), me = w({
   defaultValue: void 0,
   isControlled: !1,
   name: void 0,
@@ -1201,17 +1171,17 @@ const Qt = (e) => {
   required: !1,
   value: void 0,
   error: !1
-}), rr = 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(pe);
-  return /* @__PURE__ */ b("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
+}), Zt = h((e, r) => {
+  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: c, onChange: m, required: d, value: u, error: g } = A(me);
+  return /* @__PURE__ */ f("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
     /* @__PURE__ */ o(
       "input",
       {
-        className: l("radio", h && "border-red"),
+        className: l("radio", g && "border-red"),
         defaultChecked: i ? void 0 : a.value === s,
-        checked: i ? a.value === m : void 0,
+        checked: i ? a.value === u : void 0,
         name: c,
-        onChange: i ? u : void 0,
+        onChange: i ? m : void 0,
         required: d,
         type: "radio",
         ref: r,
@@ -1220,7 +1190,7 @@ const Qt = (e) => {
     ),
     t
   ] });
-}), nr = g(
+}), Wt = h(
   (e, r) => {
     const t = "value" in e, {
       className: n,
@@ -1228,57 +1198,57 @@ const Qt = (e) => {
       description: s,
       error: i,
       id: c,
-      children: u,
+      children: m,
       label: d,
-      name: m,
-      onChange: h,
-      required: f,
+      name: u,
+      onChange: g,
+      required: b,
       value: p,
-      ...x
-    } = e, v = E(
-      (Ae) => {
-        const ve = Ae.target.value;
-        h == null || h(ve);
+      ...v
+    } = e, x = N(
+      (ue) => {
+        const be = ue.target.value;
+        g == null || g(be);
       },
-      [h]
-    ), O = C(
+      [g]
+    ), F = C(
       () => ({
         defaultValue: a,
         isControlled: t,
-        name: m,
-        onChange: v,
-        required: f,
+        name: u,
+        onChange: x,
+        required: b,
         value: p,
         error: !!i
       }),
-      [a, t, m, v, f, p, i]
-    ), j = R(c), D = `${j}:label`, G = `${j}:help`, _ = j + "err", Z = i;
-    return /* @__PURE__ */ o(pe.Provider, { value: O, children: /* @__PURE__ */ b(
+      [a, t, u, x, b, p, i]
+    ), J = R(c), B = `${J}:label`, H = `${J}:help`, D = J + "err", j = i;
+    return /* @__PURE__ */ o(me.Provider, { value: F, children: /* @__PURE__ */ f(
       "div",
       {
         "aria-describedby": l({
-          [_]: Z,
-          [G]: s
+          [D]: j,
+          [H]: s
         }) || void 0,
         "aria-invalid": !!i,
-        "aria-labelledby": d ? D : void 0,
+        "aria-labelledby": d ? B : void 0,
         className: l(n, "flex flex-col gap-4"),
         role: "radiogroup",
         ref: r,
-        ...x,
+        ...v,
         children: [
-          d && /* @__PURE__ */ o(V, { id: D, isRequired: f, isInvalid: !!i, children: d }),
-          s && /* @__PURE__ */ o(z, { id: G, children: s }),
-          u,
-          Z && /* @__PURE__ */ o(k, { id: _, children: Z })
+          d && /* @__PURE__ */ o(z, { id: B, isRequired: b, isInvalid: !!i, children: d }),
+          s && /* @__PURE__ */ o(P, { id: H, children: s }),
+          m,
+          j && /* @__PURE__ */ o(k, { id: D, children: j })
         ]
       }
     ) });
   }
-), gt = g(
+), _e = h(
   (e, r) => {
     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: [
+    return /* @__PURE__ */ f("div", { className: l(n, "relative", c && "text-sm"), children: [
       /* @__PURE__ */ o(
         "select",
         {
@@ -1294,7 +1264,7 @@ const Qt = (e) => {
         }
       ),
       /* @__PURE__ */ o(
-        ae,
+        te,
         {
           className: l(
             "pointer-events-none absolute bottom-0 top-0 my-auto",
@@ -1304,7 +1274,7 @@ const Qt = (e) => {
       )
     ] });
   }
-), ar = g(
+), Kt = h(
   (e, r) => {
     const {
       description: t,
@@ -1313,41 +1283,41 @@ const Qt = (e) => {
       label: s,
       disableValidation: i = !1,
       ...c
-    } = e, u = S(null), d = B(u, r), { validity: m, validationMessage: h } = L(
-      u,
+    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: g } = L(
+      m,
       !i
-    ), f = R(a), p = f + "help", x = f + "err", v = n || h;
-    return /* @__PURE__ */ b("div", { className: "grid gap-2", children: [
+    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
+    return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
-        V,
+        z,
         {
-          htmlFor: f,
+          htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || m === "invalid",
+          isInvalid: !!n || u === "invalid",
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(z, { id: p, children: t }),
+      t && /* @__PURE__ */ o(P, { id: p, children: t }),
       /* @__PURE__ */ o(
-        gt,
+        _e,
         {
-          id: f,
+          id: b,
           ref: d,
           ...c,
-          isInvalid: !!n || m === "invalid",
+          isInvalid: !!n || u === "invalid",
           "aria-describedby": l({
-            [x]: v,
+            [v]: x,
             [p]: t
           }) || void 0
         }
       ),
-      v && /* @__PURE__ */ o(k, { id: x, children: v })
+      x && /* @__PURE__ */ o(k, { id: v, children: x })
     ] });
   }
-), or = (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(se, { className: "text-orange snackbar-icon mr-4 self-start md:mr-8 md:text-2xl" }),
+), Xt = (e) => {
+  const { heading: r, children: t, closeSnackbar: n } = e, [a, s] = q(!1);
+  return /* @__PURE__ */ o("div", { className: "container max-w-[59rem]", children: /* @__PURE__ */ o("div", { className: "bg-orange-light px-8 py-4 max-md:p-4", children: /* @__PURE__ */ f("div", { className: "snackbar grid items-center", children: [
+    /* @__PURE__ */ o(ne, { className: "text-orange snackbar-icon mr-4 self-start md:mr-8 md:text-2xl" }),
     /* @__PURE__ */ o(
       "h3",
       {
@@ -1360,20 +1330,20 @@ const Qt = (e) => {
         children: r
       }
     ),
-    /* @__PURE__ */ b("div", { className: "snackbar-actions flex justify-end gap-4 max-md:mt-3 md:ml-4", children: [
+    /* @__PURE__ */ f("div", { className: "snackbar-actions flex justify-end gap-4 max-md:mt-3 md:ml-4", children: [
       /* @__PURE__ */ o(
-        te,
+        _,
         {
           "aria-expanded": a,
           onClick: () => s(!a),
           children: a ? "Les mindre" : "Les mer"
         }
       ),
-      /* @__PURE__ */ o(te, { onClick: n, children: "Ok" })
+      /* @__PURE__ */ o(_, { onClick: n, children: "Ok" })
     ] }),
     a && t
   ] }) }) });
-}, te = (e) => /* @__PURE__ */ o(
+}, _ = (e) => /* @__PURE__ */ o(
   "button",
   {
     className: l(
@@ -1383,21 +1353,21 @@ const Qt = (e) => {
     ...e,
     children: e.children
   }
-), sr = (e) => /* @__PURE__ */ o(
+), Yt = (e) => /* @__PURE__ */ o(
   "div",
   {
     className: "snackbar-content my-4 max-h-[50vh] max-w-prose overflow-y-auto",
     ...e,
     children: e.children
   }
-), ht = (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: X.map(t, (s) => Y(s, {
+  return /* @__PURE__ */ o("ol", { className: l(n, "flex flex-col gap-8 md:gap-12"), ...a, children: Z.map(t, (s) => W(s, {
     align: r
   })) });
-}, pt = (e) => {
+}, et = (e) => {
   const { className: r, children: t, bullet: n, align: a = "center", ...s } = e;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ f(
     "li",
     {
       className: l(
@@ -1407,12 +1377,12 @@ const Qt = (e) => {
       ),
       ...s,
       children: [
-        /* @__PURE__ */ o(At, { align: a, children: n }),
+        /* @__PURE__ */ o(tt, { align: a, children: n }),
         t
       ]
     }
   );
-}, At = ({ align: e, ...r }) => /* @__PURE__ */ o(
+}, tt = ({ align: e, ...r }) => /* @__PURE__ */ o(
   "span",
   {
     "aria-hidden": !0,
@@ -1426,8 +1396,8 @@ const Qt = (e) => {
     ...r
   }
 );
-ht.Item = pt;
-const ir = g(
+$e.Item = et;
+const Qt = h(
   (e, r) => {
     const {
       description: t,
@@ -1436,39 +1406,39 @@ const ir = g(
       label: s,
       disableValidation: i = !1,
       ...c
-    } = e, u = S(null), d = B(u, r), { validity: m, validationMessage: h } = L(
-      u,
+    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: g } = L(
+      m,
       !i
-    ), f = R(a), p = f + "help", x = f + "err", v = n || h;
-    return /* @__PURE__ */ b("div", { className: "grid gap-2", children: [
+    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
+    return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
-        V,
+        z,
         {
-          htmlFor: f,
+          htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || m === "invalid",
+          isInvalid: !!n || u === "invalid",
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(z, { id: p, children: t }),
+      t && /* @__PURE__ */ o(P, { id: p, children: t }),
       /* @__PURE__ */ o(
-        he,
+        ce,
         {
           as: "textarea",
           ref: d,
-          id: f,
+          id: b,
           ...c,
-          isInvalid: !!n || m === "invalid",
+          isInvalid: !!n || u === "invalid",
           "aria-describedby": l({
-            [x]: v,
+            [v]: x,
             [p]: t
           }) || void 0
         }
       ),
-      v && /* @__PURE__ */ o(k, { id: x, children: v })
+      x && /* @__PURE__ */ o(k, { id: v, children: x })
     ] });
   }
-), lr = g(
+), Ut = h(
   (e, r) => {
     const {
       description: t,
@@ -1477,99 +1447,99 @@ const ir = g(
       label: s,
       type: i = "text",
       disableValidation: c = !1,
-      ...u
-    } = e, d = S(null), { validity: m, validationMessage: h } = L(
+      ...m
+    } = e, d = E(null), { validity: u, validationMessage: g } = L(
       d,
       !c
-    ), f = R(a), p = f + "help", x = f + "err", v = n || h, O = B(d, r);
-    return /* @__PURE__ */ b("div", { className: "grid gap-2", children: [
+    ), b = R(a), p = b + "help", v = b + "err", x = n || g, F = K(d, r);
+    return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
-        V,
+        z,
         {
-          htmlFor: f,
+          htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || m === "invalid",
+          isInvalid: !!n || u === "invalid",
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(z, { id: p, children: t }),
+      t && /* @__PURE__ */ o(P, { id: p, children: t }),
       /* @__PURE__ */ o(
-        he,
+        ce,
         {
-          id: f,
-          ref: O,
+          id: b,
+          ref: F,
           type: i,
-          ...u,
-          isInvalid: !!n || m === "invalid",
+          ...m,
+          isInvalid: !!n || u === "invalid",
           "aria-describedby": l({
-            [x]: v,
+            [v]: x,
             [p]: t
           }) || void 0
         }
       ),
-      v && /* @__PURE__ */ o(k, { id: x, children: v })
+      x && /* @__PURE__ */ o(k, { id: v, children: x })
     ] });
   }
 );
 export {
-  U as Accordion,
-  Pe as AccordionContent,
-  Le as AccordionHeader,
-  Me as AccordionItem,
-  Et as Alert,
-  St as Banner,
-  Rt as BannerImage,
-  kt as Button,
-  P as ButtonColorContext,
-  qt as Campaign,
-  Mt as Card,
-  zt as CardContent,
-  Lt as CardImage,
-  Vt as CardLinkOverlay,
-  Pt as CardList,
-  Tt as Checkbox,
-  Ft as Chip,
-  Jt as Footer,
-  Ot as Form,
-  jt as FormError,
+  X as Accordion,
+  ke as AccordionContent,
+  Re as AccordionHeader,
+  Ee as AccordionItem,
+  dt as Alert,
+  mt as Banner,
+  ut as BannerImage,
+  bt as Button,
+  M as ButtonColorContext,
+  ft as Campaign,
+  gt as Card,
+  At as CardContent,
+  ht as CardImage,
+  xt as CardLinkOverlay,
+  pt as CardList,
+  vt as Checkbox,
+  Nt as Chip,
+  wt as Footer,
+  yt as Form,
+  It as FormError,
   k as FormErrorMessage,
-  _e as FormHeading,
-  z as FormHelperText,
-  V as FormLabel,
-  Kt as FormStep,
-  $e as FormStepHeader,
-  et as FormStepHeaderContent,
-  Wt as FormStepProvider,
-  Zt as FormSuccess,
-  Xt as Hero,
-  Ut as HeroActions,
-  Bt as HeroContent,
-  F as HeroContext,
-  Yt as HeroImage,
-  he as Input,
-  Qt as Link,
-  Ht as Navbar,
-  $t as NavbarCollapsible,
-  _t as NavbarContent,
-  er as NavbarExpandedMobileContent,
-  Gt as NavbarItem,
-  Dt as NavbarItems,
-  tr as Pagination,
-  rr as Radio,
-  nr as RadioGroup,
-  ar as Select,
-  or as Snackbar,
-  te as SnackbarButton,
-  sr as SnackbarContent,
-  ht as StepList,
-  pt as StepListItem,
-  ir as TextArea,
-  lr as TextField,
-  ce as useBlockBackgroundColor,
+  Ze as FormHeading,
+  P as FormHelperText,
+  z as FormLabel,
+  kt as FormStep,
+  We as FormStepHeader,
+  Ke as FormStepHeaderContent,
+  Rt as FormStepProvider,
+  Ct as FormSuccess,
+  St as Hero,
+  Mt as HeroActions,
+  Lt as HeroContent,
+  V as HeroContext,
+  qt as HeroImage,
+  ce as Input,
+  Pt as Link,
+  zt as Navbar,
+  Jt as NavbarCollapsible,
+  Ft as NavbarContent,
+  jt as NavbarExpandedMobileContent,
+  Tt as NavbarItem,
+  Vt as NavbarItems,
+  Ot as Pagination,
+  Zt as Radio,
+  Wt as RadioGroup,
+  Kt as Select,
+  Xt as Snackbar,
+  _ as SnackbarButton,
+  Yt as SnackbarContent,
+  $e as StepList,
+  et as StepListItem,
+  Qt as TextArea,
+  Ut as TextField,
+  se as useBlockBackgroundColor,
   R as useFallbackId,
+  Et as useFormContext,
   L as useFormControlValidity,
-  tt as useFormStepContext,
-  de as useMedia,
-  Ct as usePrefersReducedMotion,
-  We as useScreenMaxWidthMd
+  Xe as useFormStepContext,
+  ct as usePrefersReducedMotion,
+  Le as useScreenMaxWidthMd
 };