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

package/dist/grunnmuren.mjs

@@ -3,13 +3,13 @@ import { jsx as o, jsxs as f, Fragment as O } from "react/jsx-runtime";
 import { createContext as w, useContext as A, useState as q, useCallback as N, useEffect as fe, useId as $, forwardRef as h, Children as Z, isValidElement as ee, cloneElement as W, useRef as E, useMemo as C, useReducer as ge } from "react";
 import { ChevronDown as te, Warning as re, InfoCircle as ne, LoadingSpinner as he, CheckCircle as pe, MenuAlt as Ae, Close as xe, ChevronRight as ve, ChevronLeft as Ne } from "@obosbbl/grunnmuren-icons";
 import { useCollapse as we } from "react-collapsed";
-import l from "clsx";
+import c from "clsx";
 import { useMediaQuery as ae, useUpdateEffect as ye } from "@react-hookz/web";
-import K from "@react-hook/merged-ref";
+import { mergeRefs as K } from "react-merge-refs";
 const I = () => {
 }, Ie = 300, Ce = "duration-300", X = (e) => {
   const { className: r, ...t } = e;
-  return /* @__PURE__ */ o("div", { className: l(r, "flex flex-col gap-2"), ...t });
+  return /* @__PURE__ */ o("div", { className: c(r, "flex flex-col gap-2"), ...t });
 }, Y = w({
   isExpanded: !1,
   setExpanded: I,
@@ -28,7 +28,7 @@ const I = () => {
   return /* @__PURE__ */ o(Y.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ o(
     "div",
     {
-      className: l(
+      className: c(
         r,
         "rounded-sm border-b-2 border-l-4 border-solid",
         i.isExpanded ? "border-l-green-dark" : "border-l-green"
@@ -37,17 +37,17 @@ const I = () => {
     }
   ) });
 }, Re = (e) => {
-  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: c } = A(Y), m = s({ onClick: () => i(!c) });
+  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: d } = A(Y), u = s({ onClick: () => i(!d) });
   return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ f(
     "button",
     {
-      className: l(
+      className: c(
         t,
         "focus-visible:outline-blue-dark aria-expanded:bg-green-dark group flex min-h-[4rem] w-full items-center justify-between px-5 py-4 text-left text-lg font-semibold focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 aria-expanded:text-white"
       ),
       ...a,
-      ...m,
-      id: oe(m["aria-controls"]),
+      ...u,
+      id: oe(u["aria-controls"]),
       children: [
         r,
         /* @__PURE__ */ o(
@@ -59,19 +59,19 @@ const I = () => {
       ]
     }
   ) });
-}, ke = (e) => {
+}, Se = (e) => {
   const { getCollapseProps: r } = A(Y), { className: t, ...n } = e, a = r();
-  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": oe(a.id), children: /* @__PURE__ */ o("div", { className: l(t, "p-5 pb-10"), ...n }) });
+  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": oe(a.id), children: /* @__PURE__ */ o("div", { className: c(t, "p-5 pb-10"), ...n }) });
 }, oe = (e) => e + "toggle";
 X.Item = Ee;
 X.Header = Re;
-X.Content = ke;
-const dt = (e) => {
+X.Content = Se;
+const ct = (e) => {
   const { className: r, children: t, heading: n, severity: a = "alert", ...s } = e;
   return /* @__PURE__ */ o(
     "section",
     {
-      className: l(r, "p-4 md:py-8", {
+      className: c(r, "p-4 md:py-8", {
         "bg-orange-light": a === "info",
         "bg-red-light": a === "alert"
       }),
@@ -79,7 +79,7 @@ const dt = (e) => {
       ...s,
       children: /* @__PURE__ */ f("div", { className: "flex justify-center", children: [
         /* @__PURE__ */ o(
-          Se,
+          ke,
           {
             className: "mr-4 flex-none md:mr-8 md:text-2xl",
             severity: a
@@ -92,7 +92,7 @@ const dt = (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 });
+}, ke = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(re, { className: c(r, "text-red") }) : /* @__PURE__ */ o(ne, { className: c(r, "text-orange") }), qe = "(prefers-reduced-motion: reduce)", dt = (e = !1) => ae(qe, { initializeWithValue: e });
 function se(e) {
   switch (e) {
     case "gray":
@@ -109,26 +109,26 @@ function se(e) {
 }
 const Le = (e) => ae("(max-width: 767.9px)", { initializeWithValue: e });
 function L(e, r = !0) {
-  const [t, n] = q("indeterminate"), [a, s] = q(), i = N((d) => {
-    d.target.checkValidity() && (n("valid"), s(void 0));
-  }, []), c = N(
-    (d) => {
-      t !== "indeterminate" && d.target.checkValidity() && (n("valid"), s(void 0));
+  const [t, n] = q("indeterminate"), [a, s] = q(), i = N((l) => {
+    l.target.checkValidity() && (n("valid"), s(void 0));
+  }, []), d = N(
+    (l) => {
+      t !== "indeterminate" && l.target.checkValidity() && (n("valid"), s(void 0));
     },
     [t]
-  ), m = N((d) => {
-    d.preventDefault();
-    const u = d.target.validationMessage;
-    s(u), n("invalid");
+  ), u = N((l) => {
+    l.preventDefault();
+    const m = l.target.validationMessage;
+    s(m), n("invalid");
   }, []);
   return fe(() => {
-    var u;
-    const { current: d } = e;
+    var m;
+    const { current: l } = e;
     return r && // @ts-expect-error respect the <form noValidate> attribute if we are rendered inside a form
-    ((u = 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);
+    ((m = l == null ? void 0 : l.form) == null ? void 0 : m.noValidate) !== !0 && (l == null || l.addEventListener("blur", i), l == null || l.addEventListener("input", d), l == null || l.addEventListener("invalid", u)), () => {
+      l == null || l.removeEventListener("blur", i), l == null || l.removeEventListener("input", d), l == null || l.removeEventListener("invalid", u);
     };
-  }, [r, c]), { validity: t, validationMessage: a };
+  }, [r, d]), { validity: t, validationMessage: a };
 }
 function R(e) {
   const r = $();
@@ -142,8 +142,8 @@ const mt = (e) => {
     heading: a,
     image: s,
     ...i
-  } = 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: [
+  } = e, d = se(r);
+  return /* @__PURE__ */ o("article", { className: c(t, d, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ f("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
     s,
     /* @__PURE__ */ f("div", { className: "max-w-prose", children: [
       a && /* @__PURE__ */ o("h2", { className: "h3 mb-4", children: a }),
@@ -158,7 +158,7 @@ const mt = (e) => {
     className: "w-20 flex-none self-center md:w-32 md:self-start",
     ...e
   }
-), Me = {
+), Pe = {
   "standard-primary": "bg-green border-green text-white",
   "standard-secondary": "bg-white border-green text-black",
   "mint-primary": "bg-mint border-mint text-black",
@@ -174,32 +174,32 @@ const mt = (e) => {
     color: a,
     href: s,
     loading: i,
-    type: c = "button",
-    variant: m = "primary",
-    ...d
-  } = e, u = A(M), b = Me[`${a ?? u}-${m}`], p = l(n, b, "button"), v = i ? /* @__PURE__ */ o(Pe, { children: t }) : t;
+    type: d = "button",
+    variant: u = "primary",
+    ...l
+  } = e, m = A(P), b = Pe[`${a ?? m}-${u}`], p = c(n, b, "button"), x = i ? /* @__PURE__ */ o(Me, { children: t }) : t;
   return /* @__PURE__ */ o(O, { children: s ? /* @__PURE__ */ o(
     "a",
     {
       "aria-busy": i ? !0 : void 0,
-      ...d,
+      ...l,
       href: s,
       ref: r,
       className: p,
-      children: v
+      children: x
     }
   ) : /* @__PURE__ */ o(
     "button",
     {
       "aria-busy": i ? !0 : void 0,
-      ...d,
-      type: c,
+      ...l,
+      type: d,
       ref: r,
       className: p,
-      children: v
+      children: x
     }
   ) });
-}), Pe = (e) => /* @__PURE__ */ f(O, { children: [
+}), Me = (e) => /* @__PURE__ */ f(O, { children: [
   ie(e.children),
   /* @__PURE__ */ o(
     "span",
@@ -223,23 +223,23 @@ function ie(e) {
     return r;
   });
 }
-const M = w("standard"), le = w(!0), ze = (e, r) => {
+const P = w("standard"), le = w(!0), ze = (e, r) => {
   const {
     as: t = "div",
     body: n,
     className: a,
     image: s,
     rightAlignBody: i = !0,
-    ...c
+    ...d
   } = e;
   return /* @__PURE__ */ f(
     t,
     {
-      className: l(
+      className: c(
         a,
         "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0"
       ),
-      ...c,
+      ...d,
       ref: r,
       children: [
         /* @__PURE__ */ o(le.Provider, { value: i, children: s }),
@@ -253,7 +253,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
     return /* @__PURE__ */ o(
       "div",
       {
-        className: l(t, "md:mx-18 self-center"),
+        className: c(t, "md:mx-18 self-center"),
         ref: r,
         ...n
       }
@@ -261,14 +261,14 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   }
 ), Fe = h(
   (e, r) => {
-    const { className: t, children: n, ...a } = e, s = A(le), i = l(
+    const { className: t, children: n, ...a } = e, s = A(le), i = c(
       t,
       "max-md:rounded-b-3xl w-full",
       s ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
     );
     if (ee(n)) {
-      const c = Z.only(n);
-      return W(c, {
+      const d = Z.only(n);
+      return W(d, {
         // @ts-expect-error assume className prop is allowed
         className: i,
         ref: r,
@@ -290,7 +290,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(
     t,
     {
-      className: l(n, "relative overflow-hidden rounded-3xl", {
+      className: c(n, "relative overflow-hidden rounded-3xl", {
         "border-2 border-solid bg-white": a === "white",
         "bg-gray-light": a === "gray"
       }),
@@ -304,7 +304,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
     return /* @__PURE__ */ o(
       "img",
       {
-        className: l(t, "w-full object-cover"),
+        className: c(t, "w-full object-cover"),
         loading: "lazy",
         ...n,
         ref: r
@@ -314,7 +314,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
 ), pt = h(
   (e, r) => {
     const { bgColor: t, className: n, ...a } = e, s = se(t);
-    return /* @__PURE__ */ o("div", { className: l(s, n), children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("div", { className: c(s, n), children: /* @__PURE__ */ o(
       "div",
       {
         className: "container grid grid-cols-1 gap-12 py-16 md:grid-cols-2 md:py-20 lg:py-24",
@@ -326,14 +326,14 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
 ), At = h(
   (e, r) => {
     const { className: t, ...n } = e;
-    return /* @__PURE__ */ o("div", { className: l(t, "p-8 md:px-10"), ...n, ref: r });
+    return /* @__PURE__ */ o("div", { className: c(t, "p-8 md:px-10"), ...n, ref: r });
   }
 ), xt = h((e, r) => {
   const { className: t, ...n } = e;
   return /* @__PURE__ */ o(
     "a",
     {
-      className: l(
+      className: c(
         t,
         "no-underline before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full hover:underline"
       ),
@@ -349,18 +349,18 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
       error: a,
       id: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), { validity: d, validationMessage: u } = L(
-      m,
+      ...d
+    } = e, u = E(null), { validity: l, validationMessage: m } = L(
+      u,
       !i
-    ), g = R(s), b = g + "err", p = a || u;
+    ), g = R(s), b = g + "err", p = a || m;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ f("label", { className: l(n, "flex cursor-pointer gap-2.5"), children: [
+      /* @__PURE__ */ f("label", { className: c(n, "flex cursor-pointer gap-2.5"), children: [
         /* @__PURE__ */ o(
           "input",
           {
             id: g,
-            className: l(
+            className: c(
               "checkbox checked:bg-green checked:border-green grid h-[1.25em] w-[1.25em] flex-none translate-y-[0.1em] cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2",
               {
                 "border-gray-dark focus:ring-black": !a,
@@ -369,14 +369,14 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
             ),
             ref: r,
             type: "checkbox",
-            ...c,
+            ...d,
             "aria-describedby": p ? b : void 0,
-            "aria-invalid": !!a || d === "invalid"
+            "aria-invalid": !!a || l === "invalid"
           }
         ),
         t
       ] }),
-      p && /* @__PURE__ */ o(k, { id: b, children: p })
+      p && /* @__PURE__ */ o(S, { id: b, children: p })
     ] });
   }
 ), je = {
@@ -394,21 +394,21 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   "green-light": "text-green",
   "blue-light": "text-blue-dark"
 }, Nt = (e) => {
-  const { className: r, color: t, icon: n, children: a, variant: s = "filled" } = e, i = t && je[t], c = t && Oe[t];
+  const { className: r, color: t, icon: n, children: a, variant: s = "filled" } = e, i = t && je[t], d = t && Oe[t];
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         "inline-flex items-center gap-0.5 overflow-hidden rounded-lg border-2 text-sm font-semibold",
         i,
         r
       ),
       children: [
-        n && /* @__PURE__ */ o("div", { className: l("px-3 py-2", c), children: n }),
+        n && /* @__PURE__ */ o("div", { className: c("px-3 py-2", d), children: n }),
         /* @__PURE__ */ o(
           "div",
           {
-            className: l("flex-1 px-4 py-2", {
+            className: c("flex-1 px-4 py-2", {
               "bg-white": s === "outline"
             }),
             children: a
@@ -419,10 +419,10 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   );
 }, wt = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ o(M.Provider, { value: "white", children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(
     "footer",
     {
-      className: l(
+      className: c(
         r,
         // calculated height for psuedo element fixes rendering artifict that sometimes occurs on specific screen sizes and zoom levels
         "bg-blue pt-18 relative pb-12 text-white before:absolute before:-top-px before:left-0 before:right-0 before:h-[calc(1.5rem_+_1px)] before:rounded-b-3xl before:bg-white "
@@ -436,7 +436,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "form",
     {
-      className: l(
+      className: c(
         n,
         "border-blue-dark block overflow-hidden rounded-b-lg rounded-t-3xl border-2"
       ),
@@ -452,7 +452,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(
     "h2",
     {
-      className: l(
+      className: c(
         r,
         "bg-blue-dark p-6 text-xl font-bold text-white md:px-10 md:py-8 md:text-2xl"
       ),
@@ -465,7 +465,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
     "div",
     {
       "aria-live": "polite",
-      className: l(
+      className: c(
         r,
         "border-red bg-red-light rounded-lg border-2 p-6 text-sm"
       ),
@@ -473,12 +473,12 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
       children: "Beklager! Noe gikk dessverre galt under innesendingen av skjemaet. Prøv gjerne igjen om en stund."
     }
   );
-}, k = (e) => {
+}, S = (e) => {
   const { children: r, className: t, ...n } = e;
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         t,
         "bg-red-light text-red flex items-center gap-2 rounded px-2 py-1 text-sm"
       ),
@@ -490,21 +490,21 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
       ]
     }
   );
-}, P = (e) => {
+}, M = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ o("div", { className: l(r, "text-gray-dark text-sm"), ...n, children: t });
+  return /* @__PURE__ */ o("div", { className: c(r, "text-gray-dark text-sm"), ...n, children: t });
 }, z = (e) => {
   const { className: r, children: t, isRequired: n, isInvalid: a, ...s } = e;
   return /* @__PURE__ */ f(
     "label",
     {
-      className: l(r, "block cursor-pointer font-semibold"),
+      className: c(r, "block cursor-pointer font-semibold"),
       ...s,
       children: [
         n && /* @__PURE__ */ o(
           "span",
           {
-            className: l(
+            className: c(
               "mr-1 select-none",
               a ? "text-red" : "text-blue"
             ),
@@ -520,7 +520,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         r,
         "bg-gray-lightest flex flex-col gap-8 p-8 text-center"
       ),
@@ -549,7 +549,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
       type: "button",
       "aria-disabled": t,
       onClick: a,
-      className: l(
+      className: c(
         r,
         "border-blue-dark w-full rounded-t-lg border-2 py-4 pl-4 md:py-8 ",
         {
@@ -592,7 +592,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "h2",
     {
-      className: l(
+      className: c(
         "grid grid-cols-[auto_1fr] grid-rows-[1fr_auto] items-center text-left text-xl font-bold md:text-2xl",
         {
           "text-white": !r
@@ -602,7 +602,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
         /* @__PURE__ */ o(
           "div",
           {
-            className: l(
+            className: c(
               "row-span-2 mr-4 flex h-10 w-10 items-center justify-center self-center rounded-full border-2 font-bold md:h-12 md:w-12",
               {
                 "border-white text-white": !r,
@@ -618,7 +618,7 @@ const M = w("standard"), le = w(!0), ze = (e, r) => {
         r && /* @__PURE__ */ o(
           "div",
           {
-            className: l(
+            className: c(
               "text-base font-normal",
               a === "completed" ? "text-white" : "text-black"
             ),
@@ -647,26 +647,26 @@ function Xe(e) {
   const [r, t] = A(Q), n = N(async () => {
     t({ type: "PREV_STEP" });
   }, [t]), a = N(
-    (c) => {
+    (d) => {
       t({
         type: "SET_FORM_STEP_DATA",
         formId: `form${e}`,
-        formValues: c
+        formValues: d
       });
     },
     [t, e]
   ), s = N(() => {
     t({ type: "NEXT_STEP" });
   }, [t]), i = N(
-    (c) => {
-      a(c), s();
+    (d) => {
+      a(d), s();
     },
     [s, a]
   );
   return {
     isActive: r.activeStep === e,
     activeStep: r.activeStep,
-    setActiveStep: (c) => t({ type: "SET_STEP", step: c }),
+    setActiveStep: (d) => t({ type: "SET_STEP", step: d }),
     previousFormStep: n,
     nextFormStep: s,
     submitAndNextFormStep: i,
@@ -708,7 +708,7 @@ function Rt({ children: e }) {
   }), n = C(() => [r, t], [r, t]);
   return /* @__PURE__ */ o(Q.Provider, { value: n, children: e });
 }
-const kt = (e) => {
+const St = (e) => {
   const {
     children: r,
     heading: t,
@@ -716,74 +716,75 @@ const kt = (e) => {
     formStatus: a = "blank",
     onSubmit: s,
     className: i,
-    ...c
-  } = e, { isActive: m, setActiveStep: d, activeStep: u } = Xe(n), g = E(null), b = N(() => {
-    n < u && d(n);
-  }, [u, n, d]);
+    onHeaderClick: d,
+    ...u
+  } = e, { isActive: l, setActiveStep: m, activeStep: g } = Xe(n), b = E(null), p = N(() => {
+    n < g && (d == null || d(n), m(n));
+  }, [g, n, m, d]);
   return ye(() => {
-    var p;
-    m && ((p = g.current) == null || p.scrollIntoView({ behavior: "smooth" }));
-  }, [m]), /* @__PURE__ */ f(
+    var x;
+    l && ((x = b.current) == null || x.scrollIntoView({ behavior: "smooth" }));
+  }, [l]), /* @__PURE__ */ f(
     "form",
     {
-      className: l("block", i, {
-        "border-none": a === "completed" && !m
+      className: c("block", i, {
+        "border-none": a === "completed" && !l
       }),
       onSubmit: s,
-      ref: g,
-      ...c,
+      ref: b,
+      ...u,
       children: [
         /* @__PURE__ */ o(
           We,
           {
             step: n,
             formStatus: a,
-            collapsed: !m,
-            onClick: b,
+            collapsed: !l,
+            onClick: p,
             children: t
           }
         ),
-        m && /* @__PURE__ */ o("div", { className: "border-blue-dark relative rounded-b-lg border-2 p-6 md:p-10", children: r })
+        l && /* @__PURE__ */ o("div", { className: "border-blue-dark relative rounded-b-lg border-2 p-6 md:p-10", children: r })
       ]
     }
   );
 };
-function de(e) {
+function ce(e) {
   return e !== "vertical-split" && e !== "below-center" && e !== "below-left";
 }
-const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), St = h((e, r) => {
+const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), kt = h((e, r) => {
   const {
     bgColor: t = "white",
     children: n,
     className: a,
     contentPosition: s = "below-center",
     image: i,
-    ...c
-  } = e, m = i != null, d = m ? s : "below-center", u = C(
+    ...d
+  } = e, u = i != null, l = u ? s : "below-center", m = C(
     () => ({
       bgColor: t,
-      contentPosition: d,
-      hasImage: m
+      contentPosition: l,
+      hasImage: u
     }),
-    [t, d, m]
+    [t, l, u]
   );
   return /* @__PURE__ */ o(
-    M.Provider,
+    P.Provider,
     {
       value: t === "white" ? "standard" : "mint",
-      children: /* @__PURE__ */ o(V.Provider, { value: u, children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ o(V.Provider, { value: m, children: /* @__PURE__ */ f(
         "div",
         {
-          className: l(
+          className: c(
             a,
             // disable padding on small screens so the hero image is flush with the screen edges
             "container px-0 md:grid lg:px-4",
             {
-              "md:grid-cols-[50%,50%]": d === "vertical-split"
+              "md:grid-cols-[50%,50%]": l === "vertical-split"
             }
           ),
-          style: de(d) ? { gridTemplateAreas: '"hero"' } : void 0,
-          ...c,
+          style: ce(l) ? { gridTemplateAreas: '"hero"' } : void 0,
+          ...d,
           ref: r,
           children: [
             i,
@@ -799,7 +800,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     return /* @__PURE__ */ f(
       "picture",
       {
-        className: l(e.className, "aspect-w-6 aspect-h-7 block", {
+        className: c(e.className, "aspect-w-6 aspect-h-7 block", {
           "sm:aspect-w-8 sm:aspect-h-4": t !== "vertical-split",
           // calculate a square aspect ratio
           "sm:aspect-w-8 sm:aspect-h-8": t === "vertical-split"
@@ -823,11 +824,11 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
   }
 ), Lt = h(
   (e, r) => {
-    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: c, description: m, ...d } = e, u = de(n);
+    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: d, description: u, ...l } = e, m = ce(n);
     return /* @__PURE__ */ f(
       "div",
       {
-        className: l(
+        className: c(
           i,
           "relative grid grid-flow-row grid-cols-[minmax(auto,_37rem)] content-center gap-6 rounded-3xl px-6 py-10 text-center max-md:mx-4 md:p-12",
           {
@@ -846,7 +847,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             // Below left style
             "md:-mt-32 md:ml-[8%] md:max-w-[58%] md:text-left": n === "below-left",
             // styles for when the contain is fully contained within the image
-            "md:mx-32 md:my-9 md:w-2/5": u,
+            "md:mx-32 md:my-9 md:w-2/5": m,
             "self-end justify-self-start": n === "bottom-left",
             "self-start justify-self-start": n === "top-left",
             "self-start justify-self-end": n === "top-right",
@@ -854,24 +855,24 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             "self-center justify-self-center": n === "center"
           }
         ),
-        ...d,
-        style: u ? { gridArea: "hero" } : void 0,
+        ...l,
+        style: m ? { gridArea: "hero" } : void 0,
         ref: r,
         children: [
-          /* @__PURE__ */ o("h1", { children: c }),
-          m && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: m }),
+          /* @__PURE__ */ o("h1", { children: d }),
+          u && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: u }),
           s
         ]
       }
     );
   }
-), Mt = h(
+), Pt = h(
   (e, r) => {
     const { className: t, ...n } = e, { contentPosition: a } = A(V);
     return /* @__PURE__ */ o(
       "div",
       {
-        className: l(
+        className: c(
           t,
           "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col",
           // Left align actions/buttons
@@ -884,21 +885,21 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), ce = h((e, r) => {
+), de = h((e, r) => {
   const {
     className: t,
     isInvalid: n,
     size: a,
     as: s,
     type: i,
-    rightAddon: c,
-    leftAddon: m,
-    ...d
-  } = e, u = s ?? "input", g = Qe(u, i);
+    rightAddon: d,
+    leftAddon: u,
+    ...l
+  } = e, m = s ?? "input", g = Qe(m, i);
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(
+      className: c(
         t,
         "relative flex items-center rounded-lg border border-b-[3px] focus-within:-ml-[2px] focus-within:-mt-[2px] focus-within:border-[3px] focus-within:shadow",
         {
@@ -906,24 +907,24 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
           "border-red focus-within:border-red": n,
           "w-fit": a != null,
           "w-full": a == null,
-          "pl-4": m,
-          "pr-4": c
+          "pl-4": u,
+          "pr-4": d
         }
       ),
       children: [
-        m,
+        u,
         /* @__PURE__ */ o(
-          u,
+          m,
           {
             "aria-invalid": n,
             ref: r,
             className: "focus:none placeholder-gray w-full rounded-lg border-none px-4 py-3.5 focus:outline-none",
             size: a,
             type: g,
-            ...d
+            ...l
           }
         ),
-        c
+        d
       ]
     }
   );
@@ -934,25 +935,25 @@ function Qe(e, r) {
   if (e === "input")
     return "text";
 }
-const Pt = (e) => {
+const Mt = (e) => {
   let r = "";
   return e.icon && (r = "inline-flex items-center gap-2"), /* @__PURE__ */ f("a", { className: r, href: e.href, children: [
     e.icon,
     e.children
   ] });
-}, S = w({
+}, k = w({
   setIsExpanded: I,
   isExpanded: !1,
   collapsibleId: ""
 }), zt = (e) => {
-  const { className: r, children: t, ...n } = e, a = $(), [s, i] = q(!1), c = C(
+  const { className: r, children: t, ...n } = e, a = $(), [s, i] = q(!1), d = C(
     () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
     [s, a]
   );
-  return /* @__PURE__ */ o(M.Provider, { value: "white", children: /* @__PURE__ */ o(S.Provider, { value: c, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(k.Provider, { value: d, children: /* @__PURE__ */ o(
     "div",
     {
-      className: l(
+      className: c(
         r,
         "bg-blue relative pb-12 pt-6 text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-6 before:rounded-t-3xl before:bg-white md:pb-14 md:pt-8"
       ),
@@ -961,11 +962,11 @@ const Pt = (e) => {
     }
   ) }) });
 }, Vt = (e) => {
-  const { className: r, children: t, ...n } = e, { isExpanded: a } = A(S);
+  const { className: r, children: t, ...n } = e, { isExpanded: a } = A(k);
   return /* @__PURE__ */ o(
     "nav",
     {
-      className: l(
+      className: c(
         r,
         "my-8 flex flex-col md:mb-0 md:flex md:flex-row md:flex-wrap md:gap-x-8",
         {
@@ -983,7 +984,7 @@ const Pt = (e) => {
       "a",
       {
         "aria-current": t ? "page" : void 0,
-        className: l(
+        className: c(
           n,
           "border-b border-[#0156E0] py-3 no-underline md:border-b-2 md:border-transparent md:py-2 md:hover:border-white",
           {
@@ -997,7 +998,7 @@ const Pt = (e) => {
     );
   }
 ), Ue = () => {
-  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(S);
+  const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(k);
   let n = Ae, a = "Meny";
   return e && (n = xe, a = "Lukk"), /* @__PURE__ */ f(
     "button",
@@ -1018,7 +1019,7 @@ const Pt = (e) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: l(r, "flex items-center justify-between gap-8"),
+      className: c(r, "flex items-center justify-between gap-8"),
       ...a,
       children: [
         n,
@@ -1028,13 +1029,13 @@ const Pt = (e) => {
     }
   );
 }, Jt = (e) => {
-  const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(S);
+  const { className: r, children: t, ...n } = e, { collapsibleId: a, isExpanded: s } = A(k);
   return /* @__PURE__ */ o(
     "div",
     {
       ...n,
       "aria-hidden": !s,
-      className: l(r, "md:-mb-8 md:block", {
+      className: c(r, "md:-mb-8 md:block", {
         hidden: !s
       }),
       id: a,
@@ -1042,7 +1043,7 @@ const Pt = (e) => {
     }
   );
 }, jt = (e) => {
-  const { isExpanded: r } = A(S), t = Le(!1);
+  const { isExpanded: r } = A(k), t = Le(!1);
   return !r || !t ? null : /* @__PURE__ */ o(O, { children: e.children });
 }, y = 2, T = w({ currentPage: 0, pageCount: 0 }), Ot = (e) => {
   const {
@@ -1052,10 +1053,10 @@ const Pt = (e) => {
     onChange: a,
     getItemHref: s,
     getItemAriaLabel: i,
-    nextPageAriaLabel: c,
-    prevPageAriaLabel: m,
-    ...d
-  } = e, u = C(
+    nextPageAriaLabel: d,
+    prevPageAriaLabel: u,
+    ...l
+  } = e, m = C(
     () => ({
       currentPage: Math.max(1, Math.min(t, n)),
       pageCount: Math.max(1, n)
@@ -1064,16 +1065,16 @@ const Pt = (e) => {
   ), g = (b) => (p) => {
     a && (p.preventDefault(), a(b));
   };
-  return /* @__PURE__ */ o(T.Provider, { value: u, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ o(T.Provider, { value: m, children: /* @__PURE__ */ f(
     "nav",
     {
-      className: l("flex justify-center gap-2 sm:gap-4", r),
-      ...d,
+      className: c("flex justify-center gap-2 sm:gap-4", r),
+      ...l,
       children: [
         /* @__PURE__ */ o(
-          He,
+          De,
           {
-            "aria-label": m,
+            "aria-label": u,
             href: s(t - 1),
             onClick: g(t - 1)
           }
@@ -1088,7 +1089,7 @@ const Pt = (e) => {
             selected: t === 1
           }
         ),
-        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(De, {}),
+        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(He, {}),
         /* @__PURE__ */ o(Ge, { children: (b) => /* @__PURE__ */ o(
           G,
           {
@@ -1103,7 +1104,7 @@ const Pt = (e) => {
         /* @__PURE__ */ o(
           Be,
           {
-            "aria-label": c,
+            "aria-label": d,
             href: s(t + 1),
             onClick: g(t + 1)
           }
@@ -1124,7 +1125,7 @@ const Pt = (e) => {
       children: /* @__PURE__ */ o(ve, {})
     }
   );
-}), He = h((e, r) => {
+}), De = h((e, r) => {
   const { currentPage: t } = A(T), n = t <= 1;
   return /* @__PURE__ */ o(
     U,
@@ -1142,7 +1143,7 @@ const Pt = (e) => {
   return /* @__PURE__ */ o(
     "a",
     {
-      className: l(
+      className: c(
         t,
         "aria-[current]:border-green hover:bg-gray-lightest flex h-9 w-9 items-center justify-center rounded-lg border-2 border-transparent no-underline sm:h-10 sm:w-10"
       ),
@@ -1150,7 +1151,7 @@ const Pt = (e) => {
       ...n
     }
   );
-}), De = () => /* @__PURE__ */ o("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), Ge = ({ children: e }) => {
+}), He = () => /* @__PURE__ */ o("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), Ge = ({ children: e }) => {
   const { currentPage: r, pageCount: t } = A(T), n = Math.min(
     Math.max(2 + y * 2, r + y),
     t
@@ -1159,7 +1160,7 @@ const Pt = (e) => {
     Math.min(r - y, n - y * 2),
     1
   );
-  return a - y === 0 && (a = a - 1), Array.from({ length: n - a }, (i, c) => a + c + 1).map((i) => e(i));
+  return a - y === 0 && (a = a - 1), Array.from({ length: n - a }, (i, d) => a + d + 1).map((i) => e(i));
 }, G = h((e, r) => {
   const { page: t, selected: n, ...a } = e;
   return /* @__PURE__ */ o(U, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
@@ -1172,17 +1173,17 @@ const Pt = (e) => {
   value: void 0,
   error: !1
 }), 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: [
+  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: d, onChange: u, required: l, value: m, error: g } = A(me);
+  return /* @__PURE__ */ f("label", { className: c(n, "flex cursor-pointer gap-2.5"), children: [
     /* @__PURE__ */ o(
       "input",
       {
-        className: l("radio", g && "border-red"),
+        className: c("radio", g && "border-red"),
         defaultChecked: i ? void 0 : a.value === s,
-        checked: i ? a.value === u : void 0,
-        name: c,
-        onChange: i ? m : void 0,
-        required: d,
+        checked: i ? a.value === m : void 0,
+        name: d,
+        onChange: i ? u : void 0,
+        required: l,
         type: "radio",
         ref: r,
         ...a
@@ -1197,15 +1198,15 @@ const Pt = (e) => {
       defaultValue: a,
       description: s,
       error: i,
-      id: c,
-      children: m,
-      label: d,
-      name: u,
+      id: d,
+      children: u,
+      label: l,
+      name: m,
       onChange: g,
       required: b,
       value: p,
-      ...v
-    } = e, x = N(
+      ...x
+    } = e, v = N(
       (ue) => {
         const be = ue.target.value;
         g == null || g(be);
@@ -1215,48 +1216,48 @@ const Pt = (e) => {
       () => ({
         defaultValue: a,
         isControlled: t,
-        name: u,
-        onChange: x,
+        name: m,
+        onChange: v,
         required: b,
         value: p,
         error: !!i
       }),
-      [a, t, u, x, b, p, i]
-    ), J = R(c), B = `${J}:label`, H = `${J}:help`, D = J + "err", j = i;
+      [a, t, m, v, b, p, i]
+    ), J = R(d), B = `${J}:label`, D = `${J}:help`, H = J + "err", j = i;
     return /* @__PURE__ */ o(me.Provider, { value: F, children: /* @__PURE__ */ f(
       "div",
       {
-        "aria-describedby": l({
-          [D]: j,
-          [H]: s
+        "aria-describedby": c({
+          [H]: j,
+          [D]: s
         }) || void 0,
         "aria-invalid": !!i,
-        "aria-labelledby": d ? B : void 0,
-        className: l(n, "flex flex-col gap-4"),
+        "aria-labelledby": l ? B : void 0,
+        className: c(n, "flex flex-col gap-4"),
         role: "radiogroup",
         ref: r,
-        ...v,
+        ...x,
         children: [
-          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 })
+          l && /* @__PURE__ */ o(z, { id: B, isRequired: b, isInvalid: !!i, children: l }),
+          s && /* @__PURE__ */ o(M, { id: D, children: s }),
+          u,
+          j && /* @__PURE__ */ o(S, { id: H, children: j })
         ]
       }
     ) });
   }
 ), _e = h(
   (e, r) => {
-    const { children: t, className: n, isInvalid: a, size: s, ...i } = e, c = s === "small";
-    return /* @__PURE__ */ f("div", { className: l(n, "relative", c && "text-sm"), children: [
+    const { children: t, className: n, isInvalid: a, size: s, ...i } = e, d = s === "small";
+    return /* @__PURE__ */ f("div", { className: c(n, "relative", d && "text-sm"), children: [
       /* @__PURE__ */ o(
         "select",
         {
           "aria-invalid": a,
           ...i,
-          className: l(
+          className: c(
             "w-full cursor-pointer appearance-none border border-b-[3px] bg-white focus:-ml-0.5 focus:-mt-0.5 focus:border-[3px] focus:shadow focus:outline-none",
-            c ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5",
+            d ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5",
             a ? "border-red focus:border-red" : "focus:border-blue-dark border-black"
           ),
           ref: r,
@@ -1266,9 +1267,9 @@ const Pt = (e) => {
       /* @__PURE__ */ o(
         te,
         {
-          className: l(
+          className: c(
             "pointer-events-none absolute bottom-0 top-0 my-auto",
-            c ? "right-3.5" : "right-4"
+            d ? "right-3.5" : "right-4"
           )
         }
       )
@@ -1282,36 +1283,36 @@ const Pt = (e) => {
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: g } = L(
-      m,
+      ...d
+    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = L(
+      u,
       !i
-    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
+    ), b = R(a), p = b + "help", x = b + "err", v = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
         {
           htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || u === "invalid",
+          isInvalid: !!n || m === "invalid",
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(P, { id: p, children: t }),
+      t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
         _e,
         {
           id: b,
-          ref: d,
-          ...c,
-          isInvalid: !!n || u === "invalid",
-          "aria-describedby": l({
-            [v]: x,
+          ref: l,
+          ...d,
+          isInvalid: !!n || m === "invalid",
+          "aria-describedby": c({
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ o(k, { id: v, children: x })
+      v && /* @__PURE__ */ o(S, { id: x, children: v })
     ] });
   }
 ), Xt = (e) => {
@@ -1321,7 +1322,7 @@ const Pt = (e) => {
     /* @__PURE__ */ o(
       "h3",
       {
-        className: l(
+        className: c(
           "snackbar-header min-w-0 max-w-prose text-base font-medium",
           {
             "overflow-hidden overflow-ellipsis whitespace-nowrap": !a
@@ -1346,7 +1347,7 @@ const Pt = (e) => {
 }, _ = (e) => /* @__PURE__ */ o(
   "button",
   {
-    className: l(
+    className: c(
       e.className,
       "focus-visible:ring-offset flex-shrink-0 underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black"
     ),
@@ -1362,7 +1363,7 @@ const Pt = (e) => {
   }
 ), $e = (e) => {
   const { align: r = "center", children: t, className: n, ...a } = e;
-  return /* @__PURE__ */ o("ol", { className: l(n, "flex flex-col gap-8 md:gap-12"), ...a, children: Z.map(t, (s) => W(s, {
+  return /* @__PURE__ */ o("ol", { className: c(n, "flex flex-col gap-8 md:gap-12"), ...a, children: Z.map(t, (s) => W(s, {
     align: r
   })) });
 }, et = (e) => {
@@ -1370,7 +1371,7 @@ const Pt = (e) => {
   return /* @__PURE__ */ f(
     "li",
     {
-      className: l(
+      className: c(
         r,
         "group relative flex gap-4 text-sm md:gap-8 md:text-base",
         { "items-center": a === "center" }
@@ -1386,7 +1387,7 @@ const Pt = (e) => {
   "span",
   {
     "aria-hidden": !0,
-    className: l(
+    className: c(
       "text-green after:bg-gray-light before:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-center rounded-full border-2 text-sm font-bold after:absolute after:bottom-0 after:w-0.5 after:translate-x-1/2 group-last:after:hidden md:h-20 md:w-20 md:text-xl",
       {
         "before:absolute before:bottom-1/2 before:top-0 before:w-0.5 before:-translate-y-5 before:translate-x-1/2 after:top-1/2 after:translate-y-5 group-first:before:hidden before:md:-translate-y-10 after:md:translate-y-10": e === "center",
@@ -1405,37 +1406,37 @@ const Qt = h(
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...c
-    } = e, m = E(null), d = K(m, r), { validity: u, validationMessage: g } = L(
-      m,
+      ...d
+    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = L(
+      u,
       !i
-    ), b = R(a), p = b + "help", v = b + "err", x = n || g;
+    ), b = R(a), p = b + "help", x = b + "err", v = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
         {
           htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || u === "invalid",
+          isInvalid: !!n || m === "invalid",
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(P, { id: p, children: t }),
+      t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
-        ce,
+        de,
         {
           as: "textarea",
-          ref: d,
+          ref: l,
           id: b,
-          ...c,
-          isInvalid: !!n || u === "invalid",
-          "aria-describedby": l({
-            [v]: x,
+          ...d,
+          isInvalid: !!n || m === "invalid",
+          "aria-describedby": c({
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ o(k, { id: v, children: x })
+      v && /* @__PURE__ */ o(S, { id: x, children: v })
     ] });
   }
 ), Ut = h(
@@ -1446,51 +1447,51 @@ const Qt = h(
       id: a,
       label: s,
       type: i = "text",
-      disableValidation: c = !1,
-      ...m
-    } = e, d = E(null), { validity: u, validationMessage: g } = L(
-      d,
-      !c
-    ), b = R(a), p = b + "help", v = b + "err", x = n || g, F = K(d, r);
+      disableValidation: d = !1,
+      ...u
+    } = e, l = E(null), { validity: m, validationMessage: g } = L(
+      l,
+      !d
+    ), b = R(a), p = b + "help", x = b + "err", v = n || g, F = K([l, r]);
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
         {
           htmlFor: b,
           isRequired: e.required,
-          isInvalid: !!n || u === "invalid",
+          isInvalid: !!n || m === "invalid",
           children: s
         }
       ),
-      t && /* @__PURE__ */ o(P, { id: p, children: t }),
+      t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
-        ce,
+        de,
         {
           id: b,
           ref: F,
           type: i,
-          ...m,
-          isInvalid: !!n || u === "invalid",
-          "aria-describedby": l({
-            [v]: x,
+          ...u,
+          isInvalid: !!n || m === "invalid",
+          "aria-describedby": c({
+            [x]: v,
             [p]: t
           }) || void 0
         }
       ),
-      x && /* @__PURE__ */ o(k, { id: v, children: x })
+      v && /* @__PURE__ */ o(S, { id: x, children: v })
     ] });
   }
 );
 export {
   X as Accordion,
-  ke as AccordionContent,
+  Se as AccordionContent,
   Re as AccordionHeader,
   Ee as AccordionItem,
-  dt as Alert,
+  ct as Alert,
   mt as Banner,
   ut as BannerImage,
   bt as Button,
-  M as ButtonColorContext,
+  P as ButtonColorContext,
   ft as Campaign,
   gt as Card,
   At as CardContent,
@@ -1502,22 +1503,22 @@ export {
   wt as Footer,
   yt as Form,
   It as FormError,
-  k as FormErrorMessage,
+  S as FormErrorMessage,
   Ze as FormHeading,
-  P as FormHelperText,
+  M as FormHelperText,
   z as FormLabel,
-  kt as FormStep,
+  St as FormStep,
   We as FormStepHeader,
   Ke as FormStepHeaderContent,
   Rt as FormStepProvider,
   Ct as FormSuccess,
-  St as Hero,
-  Mt as HeroActions,
+  kt as Hero,
+  Pt as HeroActions,
   Lt as HeroContent,
   V as HeroContext,
   qt as HeroImage,
-  ce as Input,
-  Pt as Link,
+  de as Input,
+  Mt as Link,
   zt as Navbar,
   Jt as NavbarCollapsible,
   Ft as NavbarContent,
@@ -1540,6 +1541,6 @@ export {
   Et as useFormContext,
   L as useFormControlValidity,
   Xe as useFormStepContext,
-  ct as usePrefersReducedMotion,
+  dt as usePrefersReducedMotion,
   Le as useScreenMaxWidthMd
 };