@obosbbl/grunnmuren-react 1.14.10 → 1.14.11

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 y, useContext as A, useState as q, useCallback as N, useEffect as fe, useId as ee, forwardRef as h, Children as Z, isValidElement as W, cloneElement as K, 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 ye } from "react-collapsed";
-import c from "clsx";
+import d from "clsx";
 import { useMediaQuery as ae, useUpdateEffect as we } from "@react-hookz/web";
 import { mergeRefs as X } from "react-merge-refs";
 const I = () => {
 }, Ie = 300, Ce = "duration-300", Y = (e) => {
   const { className: r, ...t } = e;
-  return /* @__PURE__ */ o("div", { className: c(r, "flex flex-col gap-2"), ...t });
+  return /* @__PURE__ */ o("div", { className: d(r, "flex flex-col gap-2"), ...t });
 }, Q = y({
   isExpanded: !1,
   setExpanded: I,
@@ -28,7 +28,7 @@ const I = () => {
   return /* @__PURE__ */ o(Q.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ o(
     "div",
     {
-      className: c(
+      className: d(
         r,
         "rounded-sm border-b-2 border-l-4 border-solid",
         i.isExpanded ? "border-l-green-dark" : "border-l-green"
@@ -37,11 +37,11 @@ const I = () => {
     }
   ) });
 }, Se = (e) => {
-  const { children: r, className: t, as: n = "h3", ...a } = e, { getToggleProps: s, onChange: i, isExpanded: d } = A(Q), u = s({ onClick: () => i(!d) });
+  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__ */ f(
     "button",
     {
-      className: c(
+      className: d(
         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"
       ),
@@ -61,17 +61,17 @@ const I = () => {
   ) });
 }, Re = (e) => {
   const { getCollapseProps: r } = A(Q), { className: t, ...n } = e, a = r();
-  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": oe(a.id), children: /* @__PURE__ */ o("div", { className: c(t, "p-5 pb-10"), ...n }) });
+  return /* @__PURE__ */ o("div", { ...a, "aria-labelledby": oe(a.id), children: /* @__PURE__ */ o("div", { className: d(t, "p-5 pb-10"), ...n }) });
 }, oe = (e) => e + "toggle";
 Y.Item = Ee;
 Y.Header = Se;
 Y.Content = Re;
-const ct = (e) => {
+const dt = (e) => {
   const { className: r, children: t, heading: n, severity: a = "alert", ...s } = e;
   return /* @__PURE__ */ o(
     "section",
     {
-      className: c(r, "p-4 md:py-8", {
+      className: d(r, "p-4 md:py-8", {
         "bg-orange-light": a === "info",
         "bg-red-light": a === "alert"
       }),
@@ -92,7 +92,7 @@ const ct = (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 });
+}, ke = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ o(re, { className: d(r, "text-red") }) : /* @__PURE__ */ o(ne, { className: d(r, "text-orange") }), qe = "(prefers-reduced-motion: reduce)", ct = (e = !1) => ae(qe, { initializeWithValue: e });
 function se(e) {
   switch (e) {
     case "gray":
@@ -111,7 +111,7 @@ const Pe = (e) => ae("(max-width: 767.9px)", { initializeWithValue: e });
 function P(e, r = !0) {
   const [t, n] = q("indeterminate"), [a, s] = q(), i = N((l) => {
     l.target.checkValidity() && (n("valid"), s(void 0));
-  }, []), d = N(
+  }, []), c = N(
     (l) => {
       t !== "indeterminate" && l.target.checkValidity() && (n("valid"), s(void 0));
     },
@@ -125,10 +125,10 @@ function P(e, r = !0) {
     var m;
     const { current: l } = e;
     return r && // @ts-expect-error respect the <form noValidate> attribute if we are rendered inside a form
-    ((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);
+    ((m = l == null ? void 0 : l.form) == null ? void 0 : m.noValidate) !== !0 && (l == null || l.addEventListener("blur", i), l == null || l.addEventListener("input", c), l == null || l.addEventListener("invalid", u)), () => {
+      l == null || l.removeEventListener("blur", i), l == null || l.removeEventListener("input", c), l == null || l.removeEventListener("invalid", u);
     };
-  }, [r, d]), { validity: t, validationMessage: a };
+  }, [r, c]), { validity: t, validationMessage: a };
 }
 function S(e) {
   const r = ee();
@@ -142,8 +142,8 @@ const mt = (e) => {
     heading: a,
     image: s,
     ...i
-  } = 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: [
+  } = e, c = se(r);
+  return /* @__PURE__ */ o("article", { className: d(t, c, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ f("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
     s,
     /* @__PURE__ */ f("div", { className: "max-w-prose", children: [
       a && /* @__PURE__ */ o("h2", { className: "h3 mb-4", children: a }),
@@ -174,10 +174,10 @@ const mt = (e) => {
     color: a,
     href: s,
     loading: i,
-    type: d = "button",
+    type: c = "button",
     variant: u = "primary",
     ...l
-  } = e, m = A(L), b = Le[`${a ?? m}-${u}`], p = c(n, b, "button"), x = i ? /* @__PURE__ */ o(Me, { children: t }) : t;
+  } = e, m = A(L), b = Le[`${a ?? m}-${u}`], p = d(n, b, "button"), x = i ? /* @__PURE__ */ o(Me, { children: t }) : t;
   return /* @__PURE__ */ o(O, { children: s ? /* @__PURE__ */ o(
     "a",
     {
@@ -193,7 +193,7 @@ const mt = (e) => {
     {
       "aria-busy": i ? !0 : void 0,
       ...l,
-      type: d,
+      type: c,
       ref: r,
       className: p,
       children: x
@@ -230,16 +230,16 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
     className: a,
     image: s,
     rightAlignBody: i = !0,
-    ...d
+    ...c
   } = e;
   return /* @__PURE__ */ f(
     t,
     {
-      className: c(
+      className: d(
         a,
         "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0"
       ),
-      ...d,
+      ...c,
       ref: r,
       children: [
         /* @__PURE__ */ o(le.Provider, { value: i, children: s }),
@@ -253,7 +253,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
     return /* @__PURE__ */ o(
       "div",
       {
-        className: c(t, "md:mx-18 self-center"),
+        className: d(t, "md:mx-18 self-center"),
         ref: r,
         ...n
       }
@@ -261,14 +261,14 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   }
 ), Fe = h(
   (e, r) => {
-    const { className: t, children: n, ...a } = e, s = A(le), i = c(
+    const { className: t, children: n, ...a } = e, s = A(le), i = d(
       t,
-      "max-md:rounded-b-3xl w-full",
-      s ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1"
+      "rounded-b-3xl w-full",
+      s ? "md:rounded-r-3xl md:rounded-l-none" : "md:rounded-l-3xl md:rounded-r-none md:order-1"
     );
     if (W(n)) {
-      const d = Z.only(n);
-      return K(d, {
+      const c = Z.only(n);
+      return K(c, {
         // @ts-expect-error assume className prop is allowed
         className: i,
         ref: r,
@@ -290,7 +290,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(
     t,
     {
-      className: c(n, "relative overflow-hidden rounded-3xl", {
+      className: d(n, "relative overflow-hidden rounded-3xl", {
         "border-2 border-solid bg-white": a === "white",
         "bg-gray-light": a === "gray"
       }),
@@ -304,7 +304,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
     return /* @__PURE__ */ o(
       "img",
       {
-        className: c(t, "w-full object-cover"),
+        className: d(t, "w-full object-cover"),
         loading: "lazy",
         ...n,
         ref: r
@@ -314,7 +314,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
 ), pt = h(
   (e, r) => {
     const { bgColor: t, className: n, ...a } = e, s = se(t);
-    return /* @__PURE__ */ o("div", { className: c(s, n), children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("div", { className: d(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 L = y("standard"), le = y(!0), ze = (e, r) => {
 ), At = h(
   (e, r) => {
     const { className: t, ...n } = e;
-    return /* @__PURE__ */ o("div", { className: c(t, "p-8 md:px-10"), ...n, ref: r });
+    return /* @__PURE__ */ o("div", { className: d(t, "p-8 md:px-10"), ...n, ref: r });
   }
 ), xt = h((e, r) => {
   const { className: t, ...n } = e;
   return /* @__PURE__ */ o(
     "a",
     {
-      className: c(
+      className: d(
         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 L = y("standard"), le = y(!0), ze = (e, r) => {
       error: a,
       id: s,
       disableValidation: i = !1,
-      ...d
+      ...c
     } = e, u = E(null), { validity: l, validationMessage: m } = P(
       u,
       !i
     ), g = S(s), b = g + "err", p = a || m;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ f("label", { className: c(n, "flex cursor-pointer gap-2.5"), children: [
+      /* @__PURE__ */ f("label", { className: d(n, "flex cursor-pointer gap-2.5"), children: [
         /* @__PURE__ */ o(
           "input",
           {
             id: g,
-            className: c(
+            className: d(
               "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,7 +369,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
             ),
             ref: r,
             type: "checkbox",
-            ...d,
+            ...c,
             "aria-describedby": p ? b : void 0,
             "aria-invalid": !!a || l === "invalid"
           }
@@ -394,21 +394,21 @@ const L = y("standard"), le = y(!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], d = t && Oe[t];
+  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: c(
+      className: d(
         "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: c("px-3 py-2", d), children: n }),
+        n && /* @__PURE__ */ o("div", { className: d("px-3 py-2", c), children: n }),
         /* @__PURE__ */ o(
           "div",
           {
-            className: c("flex-1 px-4 py-2", {
+            className: d("flex-1 px-4 py-2", {
               "bg-white": s === "outline"
             }),
             children: a
@@ -422,7 +422,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(L.Provider, { value: "white", children: /* @__PURE__ */ o(
     "footer",
     {
-      className: c(
+      className: d(
         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 L = y("standard"), le = y(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "form",
     {
-      className: c(
+      className: d(
         n,
         "border-blue-dark block overflow-hidden rounded-b-lg rounded-t-3xl border-2"
       ),
@@ -452,7 +452,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   return /* @__PURE__ */ o(
     "h2",
     {
-      className: c(
+      className: d(
         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 L = y("standard"), le = y(!0), ze = (e, r) => {
     "div",
     {
       "aria-live": "polite",
-      className: c(
+      className: d(
         r,
         "border-red bg-red-light rounded-lg border-2 p-6 text-sm"
       ),
@@ -478,7 +478,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: c(
+      className: d(
         t,
         "bg-red-light flex items-center gap-2 rounded px-2 py-1 text-sm text-[#C03850]"
       ),
@@ -492,19 +492,19 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   );
 }, M = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ o("div", { className: c(r, "text-gray-dark text-sm"), ...n, children: t });
+  return /* @__PURE__ */ o("div", { className: d(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: c(r, "block cursor-pointer font-semibold"),
+      className: d(r, "block cursor-pointer font-semibold"),
       ...s,
       children: [
         n && /* @__PURE__ */ o(
           "span",
           {
-            className: c(
+            className: d(
               "mr-1 select-none",
               a ? "text-red" : "text-blue"
             ),
@@ -520,7 +520,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: c(
+      className: d(
         r,
         "bg-gray-lightest flex flex-col gap-8 p-8 text-center"
       ),
@@ -549,7 +549,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
       type: "button",
       "aria-disabled": t,
       onClick: a,
-      className: c(
+      className: d(
         r,
         "border-blue-dark w-full rounded-t-lg border-2 py-4 pl-4 md:py-8 ",
         {
@@ -592,7 +592,7 @@ const L = y("standard"), le = y(!0), ze = (e, r) => {
   return /* @__PURE__ */ f(
     "h2",
     {
-      className: c(
+      className: d(
         "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 L = y("standard"), le = y(!0), ze = (e, r) => {
         /* @__PURE__ */ o(
           "div",
           {
-            className: c(
+            className: d(
               "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 L = y("standard"), le = y(!0), ze = (e, r) => {
         r && /* @__PURE__ */ o(
           "div",
           {
-            className: c(
+            className: d(
               "text-base font-normal",
               a === "completed" ? "text-white" : "text-black"
             ),
@@ -648,26 +648,26 @@ function Xe(e) {
   const [r, t] = A(U), n = N(async () => {
     t({ type: "PREV_STEP" });
   }, [t]), a = N(
-    (d) => {
+    (c) => {
       t({
         type: "SET_FORM_STEP_DATA",
         formId: `form${e}`,
-        formValues: d
+        formValues: c
       });
     },
     [t, e]
   ), s = N(() => {
     t({ type: "NEXT_STEP" });
   }, [t]), i = N(
-    (d) => {
-      a(d), s();
+    (c) => {
+      a(c), s();
     },
     [s, a]
   );
   return {
     isActive: r.activeStep === e,
     activeStep: r.activeStep,
-    setActiveStep: (d) => t({ type: "SET_STEP", step: d }),
+    setActiveStep: (c) => t({ type: "SET_STEP", step: c }),
     previousFormStep: n,
     nextFormStep: s,
     submitAndNextFormStep: i,
@@ -717,18 +717,18 @@ const Rt = (e) => {
     formStatus: a = "blank",
     onSubmit: s,
     className: i,
-    onHeaderClick: d,
+    onHeaderClick: c,
     ...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]);
+    n < g && (c == null || c(n), m(n));
+  }, [g, n, m, c]);
   return we(() => {
     var x;
     l && ((x = b.current) == null || x.scrollIntoView({ behavior: "smooth" }));
   }, [l]), /* @__PURE__ */ f(
     "form",
     {
-      className: c("block", i, {
+      className: d("block", i, {
         "border-none": a === "completed" && !l
       }),
       onSubmit: s,
@@ -750,7 +750,7 @@ const Rt = (e) => {
     }
   );
 };
-function ce(e) {
+function de(e) {
   return e !== "vertical-split" && e !== "below-center" && e !== "below-left";
 }
 const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), kt = h((e, r) => {
@@ -760,7 +760,7 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     className: a,
     contentPosition: s = "below-center",
     image: i,
-    ...d
+    ...c
   } = e, u = i != null, l = u ? s : "below-center", m = C(
     () => ({
       bgColor: t,
@@ -776,7 +776,7 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       children: /* @__PURE__ */ o(V.Provider, { value: m, children: /* @__PURE__ */ f(
         "div",
         {
-          className: c(
+          className: d(
             a,
             // disable padding on small screens so the hero image is flush with the screen edges
             "container px-0 md:grid lg:px-4",
@@ -784,8 +784,8 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
               "md:grid-cols-[50%,50%]": l === "vertical-split"
             }
           ),
-          style: ce(l) ? { gridTemplateAreas: '"hero"' } : void 0,
-          ...d,
+          style: de(l) ? { gridTemplateAreas: '"hero"' } : void 0,
+          ...c,
           ref: r,
           children: [
             i,
@@ -801,7 +801,7 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     return /* @__PURE__ */ f(
       "picture",
       {
-        className: c(e.className, "aspect-w-6 aspect-h-7 block", {
+        className: d(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"
@@ -825,28 +825,27 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
   }
 ), Pt = h(
   (e, r) => {
-    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: d, description: u, ...l } = e, m = ce(n);
+    const { bgColor: t, contentPosition: n, hasImage: a } = A(V), { children: s, className: i, heading: c, description: u, ...l } = e, m = de(n);
     return /* @__PURE__ */ f(
       "div",
       {
-        className: c(
+        className: d(
           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",
+          "relative mx-4 grid grid-flow-row grid-cols-[minmax(auto,_37rem)] content-center gap-6 rounded-3xl px-6 py-10 text-center md:p-12",
           {
             // On mobile we use negative margin on the content to pull the content up into the image
-            "max-md:-mt-18": a,
+            "-mt-18": a,
             "text-white": t !== "white",
             "bg-green-dark": t === "green",
             "bg-blue-dark": t === "blue",
             "bg-white": t === "white",
             // vertical split
             // vertically center the content, remove the border radius on the edge, add some negative margin to pull the image beneath the hero content, left align the content
-            "md:z-10 md:-order-1 md:-mr-5 md:mt-0 md:justify-center md:rounded-l-none md:text-left": n === "vertical-split",
+            "md:z-10 md:-order-1 md:-mr-5 md:ml-0 md:mt-0 md:justify-center md:rounded-l-none md:text-left": n === "vertical-split",
             // below center/content header
             "justify-center md:mx-auto md:w-4/5": n === "below-center",
-            "md:-mt-18": a && n === "below-center",
             // Below left style
-            "md:-mt-32 md:ml-[8%] md:max-w-[58%] md:text-left": n === "below-left",
+            "md:-mt-32 md:ml-[8%] md:mr-0 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,
             "self-end justify-self-start": n === "bottom-left",
@@ -860,7 +859,7 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
         style: m ? { gridArea: "hero" } : void 0,
         ref: r,
         children: [
-          /* @__PURE__ */ o("h1", { children: d }),
+          /* @__PURE__ */ o("h1", { children: c }),
           u && /* @__PURE__ */ o("p", { className: "text-lg font-semibold md:text-xl", children: u }),
           s
         ]
@@ -873,7 +872,7 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     return /* @__PURE__ */ o(
       "div",
       {
-        className: c(
+        className: d(
           t,
           "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col",
           // Left align actions/buttons
@@ -886,21 +885,21 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), de = h((e, r) => {
+), ce = h((e, r) => {
   const {
     className: t,
     isInvalid: n,
     size: a,
     as: s,
     type: i,
-    rightAddon: d,
+    rightAddon: c,
     leftAddon: u,
     ...l
   } = e, m = s ?? "input", g = Qe(m, i);
   return /* @__PURE__ */ f(
     "div",
     {
-      className: c(
+      className: d(
         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",
         {
@@ -909,7 +908,7 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
           "w-fit": a != null,
           "w-full": a == null,
           "pl-4": u,
-          "pr-4": d
+          "pr-4": c
         }
       ),
       children: [
@@ -925,7 +924,7 @@ const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
             ...l
           }
         ),
-        d
+        c
       ]
     }
   );
@@ -947,14 +946,14 @@ const Mt = (e) => {
   isExpanded: !1,
   collapsibleId: ""
 }), zt = (e) => {
-  const { className: r, children: t, ...n } = e, a = ee(), [s, i] = q(!1), d = C(
+  const { className: r, children: t, ...n } = e, a = ee(), [s, i] = q(!1), c = C(
     () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
     [s, a]
   );
-  return /* @__PURE__ */ o(L.Provider, { value: "white", children: /* @__PURE__ */ o(k.Provider, { value: d, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(L.Provider, { value: "white", children: /* @__PURE__ */ o(k.Provider, { value: c, children: /* @__PURE__ */ o(
     "div",
     {
-      className: c(
+      className: d(
         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"
       ),
@@ -967,7 +966,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ o(
     "nav",
     {
-      className: c(
+      className: d(
         r,
         "my-8 flex flex-col md:mb-0 md:flex md:flex-row md:flex-wrap md:gap-x-8",
         {
@@ -985,7 +984,7 @@ const Mt = (e) => {
       "a",
       {
         "aria-current": t ? "page" : void 0,
-        className: c(
+        className: d(
           n,
           "border-b border-[#0156E0] py-3 no-underline md:border-b-2 md:border-transparent md:py-2 md:hover:border-white",
           {
@@ -1020,7 +1019,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ f(
     "div",
     {
-      className: c(r, "flex items-center justify-between gap-8"),
+      className: d(r, "flex items-center justify-between gap-8"),
       ...a,
       children: [
         n,
@@ -1036,7 +1035,7 @@ const Mt = (e) => {
     {
       ...n,
       "aria-hidden": !s,
-      className: c(r, "md:-mb-8 md:block", {
+      className: d(r, "md:-mb-8 md:block", {
         hidden: !s
       }),
       id: a,
@@ -1054,7 +1053,7 @@ const Mt = (e) => {
     onChange: a,
     getItemHref: s,
     getItemAriaLabel: i,
-    nextPageAriaLabel: d,
+    nextPageAriaLabel: c,
     prevPageAriaLabel: u,
     ...l
   } = e, m = C(
@@ -1069,7 +1068,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ o(T.Provider, { value: m, children: /* @__PURE__ */ f(
     "nav",
     {
-      className: c("flex justify-center gap-2 sm:gap-4", r),
+      className: d("flex justify-center gap-2 sm:gap-4", r),
       ...l,
       children: [
         /* @__PURE__ */ o(
@@ -1105,7 +1104,7 @@ const Mt = (e) => {
         /* @__PURE__ */ o(
           Be,
           {
-            "aria-label": d,
+            "aria-label": c,
             href: s(t + 1),
             onClick: g(t + 1)
           }
@@ -1144,7 +1143,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ o(
     "a",
     {
-      className: c(
+      className: d(
         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"
       ),
@@ -1161,7 +1160,7 @@ const Mt = (e) => {
     Math.min(r - w, n - w * 2),
     1
   );
-  return a - w === 0 && (a = a - 1), Array.from({ length: n - a }, (i, d) => a + d + 1).map((i) => e(i));
+  return a - w === 0 && (a = a - 1), Array.from({ length: n - a }, (i, c) => a + c + 1).map((i) => e(i));
 }, _ = h((e, r) => {
   const { page: t, selected: n, ...a } = e;
   return /* @__PURE__ */ o(B, { "aria-current": n ? "page" : void 0, ref: r, ...a, children: t });
@@ -1174,15 +1173,15 @@ const Mt = (e) => {
   value: void 0,
   error: !1
 }), Zt = h((e, r) => {
-  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: d, onChange: u, required: l, value: m, error: g } = A(me);
-  return /* @__PURE__ */ f("label", { className: c(n, "flex cursor-pointer gap-2.5"), children: [
+  const { children: t, className: n, ...a } = e, { defaultValue: s, isControlled: i, name: c, onChange: u, required: l, value: m, error: g } = A(me);
+  return /* @__PURE__ */ f("label", { className: d(n, "flex cursor-pointer gap-2.5"), children: [
     /* @__PURE__ */ o(
       "input",
       {
-        className: c("radio", g && "border-red"),
+        className: d("radio", g && "border-red"),
         defaultChecked: i ? void 0 : a.value === s,
         checked: i ? a.value === m : void 0,
-        name: d,
+        name: c,
         onChange: i ? u : void 0,
         required: l,
         type: "radio",
@@ -1199,7 +1198,7 @@ const Mt = (e) => {
       defaultValue: a,
       description: s,
       error: i,
-      id: d,
+      id: c,
       children: u,
       label: l,
       name: m,
@@ -1224,17 +1223,17 @@ const Mt = (e) => {
         error: !!i
       }),
       [a, t, m, v, b, p, i]
-    ), J = S(d), D = `${J}:label`, H = `${J}:help`, G = J + "err", j = i;
+    ), J = S(c), D = `${J}:label`, H = `${J}:help`, G = J + "err", j = i;
     return /* @__PURE__ */ o(me.Provider, { value: F, children: /* @__PURE__ */ f(
       "div",
       {
-        "aria-describedby": c({
+        "aria-describedby": d({
           [G]: j,
           [H]: s
         }) || void 0,
         "aria-invalid": !!i,
         "aria-labelledby": l ? D : void 0,
-        className: c(n, "flex flex-col gap-4"),
+        className: d(n, "flex flex-col gap-4"),
         role: "radiogroup",
         ref: r,
         ...x,
@@ -1249,16 +1248,16 @@ const Mt = (e) => {
   }
 ), _e = h(
   (e, r) => {
-    const { children: t, className: n, isInvalid: a, size: s, ...i } = e, d = s === "small";
-    return /* @__PURE__ */ f("div", { className: c(n, "relative", d && "text-sm"), children: [
+    const { children: t, className: n, isInvalid: a, size: s, ...i } = e, c = s === "small";
+    return /* @__PURE__ */ f("div", { className: d(n, "relative", c && "text-sm"), children: [
       /* @__PURE__ */ o(
         "select",
         {
           "aria-invalid": a,
           ...i,
-          className: c(
+          className: d(
             "w-full cursor-pointer appearance-none border border-b-[3px] bg-white focus:-ml-0.5 focus:-mt-0.5 focus:border-[3px] focus:shadow focus:outline-none",
-            d ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5",
+            c ? "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,
@@ -1268,9 +1267,9 @@ const Mt = (e) => {
       /* @__PURE__ */ o(
         te,
         {
-          className: c(
+          className: d(
             "pointer-events-none absolute bottom-0 top-0 my-auto",
-            d ? "right-3.5" : "right-4"
+            c ? "right-3.5" : "right-4"
           )
         }
       )
@@ -1284,7 +1283,7 @@ const Mt = (e) => {
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...d
+      ...c
     } = e, u = E(null), l = X([u, r]), { validity: m, validationMessage: g } = P(
       u,
       !i
@@ -1305,9 +1304,9 @@ const Mt = (e) => {
         {
           id: b,
           ref: l,
-          ...d,
+          ...c,
           isInvalid: !!n || m === "invalid",
-          "aria-describedby": c({
+          "aria-describedby": d({
             [x]: v,
             [p]: t
           }) || void 0
@@ -1318,12 +1317,12 @@ const Mt = (e) => {
   }
 ), Xt = (e) => {
   const { heading: r, children: t, closeSnackbar: n } = e, [a, s] = q(!1);
-  return /* @__PURE__ */ o("div", { className: "container max-w-[59rem]", children: /* @__PURE__ */ o("div", { className: "bg-orange-light px-8 py-4 max-md:p-4", children: /* @__PURE__ */ f("div", { className: "snackbar grid items-center", children: [
+  return /* @__PURE__ */ o("div", { className: "container max-w-[59rem]", children: /* @__PURE__ */ o("div", { className: "bg-orange-light p-4 md:px-8", 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",
       {
-        className: c(
+        className: d(
           "snackbar-header min-w-0 max-w-prose text-base font-medium",
           {
             "overflow-hidden overflow-ellipsis whitespace-nowrap": !a
@@ -1332,7 +1331,7 @@ const Mt = (e) => {
         children: r
       }
     ),
-    /* @__PURE__ */ f("div", { className: "snackbar-actions flex justify-end gap-4 max-md:mt-3 md:ml-4", children: [
+    /* @__PURE__ */ f("div", { className: "snackbar-actions mt-3 flex justify-end gap-4 md:ml-4 md:mt-0", children: [
       /* @__PURE__ */ o(
         $,
         {
@@ -1348,7 +1347,7 @@ const Mt = (e) => {
 }, $ = (e) => /* @__PURE__ */ o(
   "button",
   {
-    className: c(
+    className: d(
       e.className,
       "focus-visible:ring-offset flex-shrink-0 underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black"
     ),
@@ -1364,7 +1363,7 @@ const Mt = (e) => {
   }
 ), $e = (e) => {
   const { align: r = "center", children: t, className: n, ...a } = e;
-  return /* @__PURE__ */ o("ol", { className: c(n, "flex flex-col gap-8 md:gap-12"), ...a, children: Z.map(t, (s) => {
+  return /* @__PURE__ */ o("ol", { className: d(n, "flex flex-col gap-8 md:gap-12"), ...a, children: Z.map(t, (s) => {
     if (W(s))
       return K(s, {
         align: r
@@ -1375,7 +1374,7 @@ const Mt = (e) => {
   return /* @__PURE__ */ f(
     "li",
     {
-      className: c(
+      className: d(
         r,
         "group relative flex gap-4 text-sm md:gap-8 md:text-base",
         { "items-center": a === "center" }
@@ -1391,7 +1390,7 @@ const Mt = (e) => {
   "span",
   {
     "aria-hidden": !0,
-    className: c(
+    className: d(
       "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",
@@ -1410,7 +1409,7 @@ const Qt = h(
       id: a,
       label: s,
       disableValidation: i = !1,
-      ...d
+      ...c
     } = e, u = E(null), l = X([u, r]), { validity: m, validationMessage: g } = P(
       u,
       !i
@@ -1427,14 +1426,14 @@ const Qt = h(
       ),
       t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
-        de,
+        ce,
         {
           as: "textarea",
           ref: l,
           id: b,
-          ...d,
+          ...c,
           isInvalid: !!n || m === "invalid",
-          "aria-describedby": c({
+          "aria-describedby": d({
             [x]: v,
             [p]: t
           }) || void 0
@@ -1451,11 +1450,11 @@ const Qt = h(
       id: a,
       label: s,
       type: i = "text",
-      disableValidation: d = !1,
+      disableValidation: c = !1,
       ...u
     } = e, l = E(null), { validity: m, validationMessage: g } = P(
       l,
-      !d
+      !c
     ), b = S(a), p = b + "help", x = b + "err", v = n || g, F = X([l, r]);
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
@@ -1469,14 +1468,14 @@ const Qt = h(
       ),
       t && /* @__PURE__ */ o(M, { id: p, children: t }),
       /* @__PURE__ */ o(
-        de,
+        ce,
         {
           id: b,
           ref: F,
           type: i,
           ...u,
           isInvalid: !!n || m === "invalid",
-          "aria-describedby": c({
+          "aria-describedby": d({
             [x]: v,
             [p]: t
           }) || void 0
@@ -1491,7 +1490,7 @@ export {
   Re as AccordionContent,
   Se as AccordionHeader,
   Ee as AccordionItem,
-  ct as Alert,
+  dt as Alert,
   mt as Banner,
   ut as BannerImage,
   bt as Button,
@@ -1523,7 +1522,7 @@ export {
   Pt as HeroContent,
   V as HeroContext,
   qt as HeroImage,
-  de as Input,
+  ce as Input,
   Mt as Link,
   zt as Navbar,
   Jt as NavbarCollapsible,
@@ -1547,6 +1546,6 @@ export {
   Et as useFormContext,
   P as useFormControlValidity,
   Xe as useFormStepContext,
-  dt as usePrefersReducedMotion,
+  ct as usePrefersReducedMotion,
   Pe as useScreenMaxWidthMd
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.14.10",
+  "version": "1.14.11",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {