@obosbbl/grunnmuren-react 1.13.0 → 1.13.1

package/dist/grunnmuren.mjs

@@ -1,89 +1,12 @@
 'use client';
 import { jsx as a, jsxs as g, Fragment as Z } from "react/jsx-runtime";
-import he, { useState as k, useCallback as q, useEffect as pe, useId as ee, createContext as I, useContext as A, forwardRef as b, Children as W, isValidElement as te, cloneElement as K, useRef as L, useMemo as M } from "react";
+import he, { createContext as I, useContext as A, useState as k, useCallback as q, useEffect as pe, useId as ee, forwardRef as b, Children as W, isValidElement as te, cloneElement as K, useRef as L, useMemo as M } from "react";
 import { ChevronDown as re, Warning as ne, InfoCircle as ae, LoadingSpinner as Ae, MenuAlt as xe, Close as ve, ChevronRight as Ne, ChevronLeft as we } from "@obosbbl/grunnmuren-icons";
-import ye from "react-collapsed";
+import { useCollapse as ye } from "react-collapsed";
 import l from "clsx";
 import Y from "@react-hook/merged-ref";
 const y = () => {
-};
-var se = {}, N = {};
-Object.defineProperty(N, "__esModule", { value: !0 });
-N.isNavigator = N.isBrowser = N.off = N.on = N.noop = void 0;
-var Ie = function() {
-};
-N.noop = Ie;
-function Ce(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 = Ce;
-function Ee(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 = Ee;
-N.isBrowser = typeof window < "u";
-N.isNavigator = typeof navigator < "u";
-Object.defineProperty(se, "__esModule", { value: !0 });
-var D = he, Re = N, qe = function(e, r) {
-  return r !== void 0 ? r : Re.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);
-}, ke = function(e, r) {
-  var t = D.useState(qe(e, r)), n = t[0], s = t[1];
-  return D.useEffect(function() {
-    var o = !0, i = window.matchMedia(e), c = function() {
-      o && s(!!i.matches);
-    };
-    return i.addListener(c), s(i.matches), function() {
-      o = !1, i.removeListener(c);
-    };
-  }, [e]), n;
-}, oe = se.default = ke;
-const Le = "(prefers-reduced-motion: reduce)", Me = (e = !1) => oe(Le, e);
-function ie(e) {
-  switch (e) {
-    case "gray":
-      return "bg-gray-lightest";
-    case "green":
-    case "mint":
-      return "bg-mint-light";
-    case "yellow":
-      return "bg-yellow";
-    case "blue":
-    case "sky":
-      return "bg-sky-light";
-  }
-}
-const ze = (e) => oe("(max-width: 767.9px)", e);
-function z(e, r = !0) {
-  const [t, n] = k("indeterminate"), [s, o] = k(), i = q((d) => {
-    d.target.checkValidity() && (n("valid"), o(void 0));
-  }, []), c = q(
-    (d) => {
-      t !== "indeterminate" && d.target.checkValidity() && (n("valid"), o(void 0));
-    },
-    [t]
-  ), u = q((d) => {
-    d.preventDefault();
-    const m = d.target.validationMessage;
-    o(m), n("invalid");
-  }, []);
-  return pe(() => {
-    var m;
-    const { current: d } = e;
-    return r && // @ts-expect-error respect the <form noValidate> attribute if we are rendered inside a form
-    ((m = d == null ? void 0 : d.form) == null ? void 0 : m.noValidate) !== !0 && (d == null || d.addEventListener("blur", i), d == null || d.addEventListener("input", c), d == null || d.addEventListener("invalid", u)), () => {
-      d == null || d.removeEventListener("blur", i), d == null || d.removeEventListener("input", c), d == null || d.removeEventListener("invalid", u);
-    };
-  }, [r, c]), { validity: t, validationMessage: s };
-}
-function C(e) {
-  const r = ee();
-  return e ?? r;
-}
-const Pe = 300, Se = "duration-300", X = (e) => {
+}, Ie = 300, Ce = "duration-300", X = (e) => {
   const { className: r, ...t } = e;
   return /* @__PURE__ */ a("div", { className: l(r, "flex flex-col gap-2"), ...t });
 }, B = I({
@@ -94,26 +17,25 @@ const Pe = 300, Se = "duration-300", X = (e) => {
   // @ts-expect-error noop
   getToggleProps: y,
   onChange: y
-}), Ve = (e) => {
-  const r = Me(), { className: t, defaultOpen: n, onChange: s = y, open: o, ...i } = e, c = ye({
-    defaultExpanded: n,
-    isExpanded: o,
-    duration: Pe,
-    hasDisabledAnimation: r,
+}), Ee = (e) => {
+  const { className: r, defaultOpen: t, onChange: n = y, open: s, ...o } = e, i = ye({
+    defaultExpanded: t,
+    isExpanded: s,
+    duration: Ie,
     easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
   });
-  return /* @__PURE__ */ a(B.Provider, { value: { onChange: s, ...c }, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(B.Provider, { value: { onChange: n, ...i }, children: /* @__PURE__ */ a(
     "div",
     {
       className: l(
-        t,
+        r,
         "rounded-sm border-b-2 border-l-4 border-solid",
-        c.isExpanded ? "border-l-green-dark" : "border-l-green"
+        i.isExpanded ? "border-l-green-dark" : "border-l-green"
       ),
-      ...i
+      ...o
     }
   ) });
-}, Je = (e) => {
+}, Re = (e) => {
   const { children: r, className: t, as: n = "h3", ...s } = e, { getToggleProps: o, onChange: i, isExpanded: c } = A(B), u = o({ onClick: () => i(!c) });
   return /* @__PURE__ */ a(n, { children: /* @__PURE__ */ g(
     "button",
@@ -124,34 +46,26 @@ const Pe = 300, Se = "duration-300", X = (e) => {
       ),
       ...s,
       ...u,
-      id: le(u["aria-controls"]),
+      id: se(u["aria-controls"]),
       children: [
         r,
         /* @__PURE__ */ a(
           re,
           {
-            className: `shrink-0 text-sm ${Se} group-aria-expanded:rotate-180`
+            className: `shrink-0 text-sm ${Ce} group-aria-expanded:rotate-180`
           }
         )
       ]
     }
   ) });
-}, Oe = (e) => {
+}, qe = (e) => {
   const { getCollapseProps: r } = A(B), { className: t, ...n } = e, s = r();
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      ...s,
-      role: "region",
-      "aria-labelledby": le(s.id),
-      children: /* @__PURE__ */ a("div", { className: l(t, "p-5 pb-10"), ...n })
-    }
-  );
-}, le = (e) => e + "toggle";
-X.Item = Ve;
-X.Header = Je;
-X.Content = Oe;
-const mt = (e) => {
+  return /* @__PURE__ */ a("div", { ...s, "aria-labelledby": se(s.id), children: /* @__PURE__ */ a("div", { className: l(t, "p-5 pb-10"), ...n }) });
+}, se = (e) => e + "toggle";
+X.Item = Ee;
+X.Header = Re;
+X.Content = qe;
+const ct = (e) => {
   const { className: r, children: t, heading: n, severity: s = "alert", ...o } = e;
   return /* @__PURE__ */ a(
     "section",
@@ -164,7 +78,7 @@ const mt = (e) => {
       ...o,
       children: /* @__PURE__ */ g("div", { className: "flex justify-center", children: [
         /* @__PURE__ */ a(
-          Te,
+          ke,
           {
             className: "mr-4 flex-none md:mr-8 md:text-2xl",
             severity: s
@@ -177,7 +91,84 @@ const mt = (e) => {
       ] })
     }
   );
-}, Te = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ a(ne, { className: l(r, "text-red") }) : /* @__PURE__ */ a(ae, { className: l(r, "text-orange") }), ut = (e) => {
+}, ke = ({ severity: e, className: r }) => e === "alert" ? /* @__PURE__ */ a(ne, { className: l(r, "text-red") }) : /* @__PURE__ */ a(ae, { className: l(r, "text-orange") });
+var oe = {}, N = {};
+Object.defineProperty(N, "__esModule", { value: !0 });
+N.isNavigator = N.isBrowser = N.off = N.on = N.noop = void 0;
+var Le = function() {
+};
+N.noop = Le;
+function Me(e) {
+  for (var r = [], t = 1; t < arguments.length; t++)
+    r[t - 1] = arguments[t];
+  e && e.addEventListener && e.addEventListener.apply(e, r);
+}
+N.on = Me;
+function ze(e) {
+  for (var r = [], t = 1; t < arguments.length; t++)
+    r[t - 1] = arguments[t];
+  e && e.removeEventListener && e.removeEventListener.apply(e, r);
+}
+N.off = ze;
+N.isBrowser = typeof window < "u";
+N.isNavigator = typeof navigator < "u";
+Object.defineProperty(oe, "__esModule", { value: !0 });
+var D = he, Pe = N, Se = function(e, r) {
+  return r !== void 0 ? r : Pe.isBrowser ? window.matchMedia(e).matches : (process.env.NODE_ENV !== "production" && console.warn("`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."), !1);
+}, Ve = function(e, r) {
+  var t = D.useState(Se(e, r)), n = t[0], s = t[1];
+  return D.useEffect(function() {
+    var o = !0, i = window.matchMedia(e), c = function() {
+      o && s(!!i.matches);
+    };
+    return i.addListener(c), s(i.matches), function() {
+      o = !1, i.removeListener(c);
+    };
+  }, [e]), n;
+}, ie = oe.default = Ve;
+const Je = "(prefers-reduced-motion: reduce)", mt = (e = !1) => ie(Je, e);
+function le(e) {
+  switch (e) {
+    case "gray":
+      return "bg-gray-lightest";
+    case "green":
+    case "mint":
+      return "bg-mint-light";
+    case "yellow":
+      return "bg-yellow";
+    case "blue":
+    case "sky":
+      return "bg-sky-light";
+  }
+}
+const Oe = (e) => ie("(max-width: 767.9px)", e);
+function z(e, r = !0) {
+  const [t, n] = k("indeterminate"), [s, o] = k(), i = q((d) => {
+    d.target.checkValidity() && (n("valid"), o(void 0));
+  }, []), c = q(
+    (d) => {
+      t !== "indeterminate" && d.target.checkValidity() && (n("valid"), o(void 0));
+    },
+    [t]
+  ), u = q((d) => {
+    d.preventDefault();
+    const m = d.target.validationMessage;
+    o(m), n("invalid");
+  }, []);
+  return pe(() => {
+    var m;
+    const { current: d } = e;
+    return r && // @ts-expect-error respect the <form noValidate> attribute if we are rendered inside a form
+    ((m = d == null ? void 0 : d.form) == null ? void 0 : m.noValidate) !== !0 && (d == null || d.addEventListener("blur", i), d == null || d.addEventListener("input", c), d == null || d.addEventListener("invalid", u)), () => {
+      d == null || d.removeEventListener("blur", i), d == null || d.removeEventListener("input", c), d == null || d.removeEventListener("invalid", u);
+    };
+  }, [r, c]), { validity: t, validationMessage: s };
+}
+function C(e) {
+  const r = ee();
+  return e ?? r;
+}
+const ut = (e) => {
   const {
     bgColor: r,
     className: t,
@@ -185,7 +176,7 @@ const mt = (e) => {
     heading: s,
     image: o,
     ...i
-  } = e, c = ie(r);
+  } = e, c = le(r);
   return /* @__PURE__ */ a("article", { className: l(t, c, "px-4 py-8 md:py-14"), ...i, children: /* @__PURE__ */ g("div", { className: "container flex flex-col justify-center gap-4 md:flex-row md:gap-12", children: [
     o,
     /* @__PURE__ */ g("div", { className: "max-w-prose", children: [
@@ -201,7 +192,7 @@ const mt = (e) => {
     className: "w-20 flex-none self-center md:w-32 md:self-start",
     ...e
   }
-), je = {
+), Te = {
   "standard-primary": "bg-green border-green text-white",
   "standard-secondary": "bg-white border-green text-black",
   "mint-primary": "bg-mint border-mint text-black",
@@ -220,7 +211,7 @@ const mt = (e) => {
     type: c = "button",
     variant: u = "primary",
     ...d
-  } = e, m = A(P), f = je[`${s ?? m}-${u}`], p = l(n, f, "button"), v = i ? /* @__PURE__ */ a(Fe, { children: t }) : t;
+  } = e, m = A(P), f = Te[`${s ?? m}-${u}`], p = l(n, f, "button"), v = i ? /* @__PURE__ */ a(je, { children: t }) : t;
   return /* @__PURE__ */ a(Z, { children: o ? /* @__PURE__ */ a(
     "a",
     {
@@ -242,7 +233,7 @@ const mt = (e) => {
       children: v
     }
   ) });
-}), Fe = (e) => /* @__PURE__ */ g(Z, { children: [
+}), je = (e) => /* @__PURE__ */ g(Z, { children: [
   de(e.children),
   /* @__PURE__ */ a(
     "span",
@@ -266,7 +257,7 @@ function de(e) {
     return r;
   });
 }
-const P = I("standard"), ce = I(!0), Ze = (e, r) => {
+const P = I("standard"), ce = I(!0), Fe = (e, r) => {
   const {
     as: t = "div",
     body: n,
@@ -290,7 +281,7 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
       ]
     }
   );
-}, We = b(Ze), Ke = b(
+}, Ze = b(Fe), We = b(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ a(
@@ -302,7 +293,7 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
       }
     );
   }
-), Ye = b(
+), Ke = b(
   (e, r) => {
     const { className: t, children: n, ...s } = e, o = A(ce), i = l(
       t,
@@ -320,10 +311,10 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
     }
     return /* @__PURE__ */ a("img", { className: i, ref: r, ...s });
   }
-), bt = Object.assign({}, We, {
-  Body: Ke,
-  Image: Ye
-}), Xe = (e, r) => {
+), bt = Object.assign({}, Ze, {
+  Body: We,
+  Image: Ke
+}), Ye = (e, r) => {
   const {
     as: t = "div",
     className: n,
@@ -341,7 +332,7 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
       ref: r
     }
   );
-}, ht = b(Xe), pt = b(
+}, ht = b(Ye), pt = b(
   (e, r) => {
     const { className: t, ...n } = e;
     return /* @__PURE__ */ a(
@@ -356,7 +347,7 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
   }
 ), At = b(
   (e, r) => {
-    const { bgColor: t, className: n, ...s } = e, o = ie(t);
+    const { bgColor: t, className: n, ...s } = e, o = le(t);
     return /* @__PURE__ */ a("div", { className: l(o, n), children: /* @__PURE__ */ a(
       "div",
       {
@@ -422,14 +413,14 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
       p && /* @__PURE__ */ a(E, { id: f, children: p })
     ] });
   }
-), Be = {
+), Xe = {
   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"
-}, Qe = {
+}, Be = {
   sky: "text-blue-dark",
   "red-light": "text-red",
   mint: "text-green",
@@ -437,7 +428,7 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
   "green-light": "text-green",
   "blue-light": "text-blue-dark"
 }, wt = (e) => {
-  const { className: r, color: t, icon: n, children: s, variant: o = "filled" } = e, i = t && Be[t], c = t && Qe[t];
+  const { className: r, color: t, icon: n, children: s, variant: o = "filled" } = e, i = t && Xe[t], c = t && Be[t];
   return /* @__PURE__ */ g(
     "div",
     {
@@ -485,12 +476,12 @@ const P = I("standard"), ce = I(!0), Ze = (e, r) => {
       ),
       ...s,
       children: [
-        r && /* @__PURE__ */ a(Ue, { children: r }),
+        r && /* @__PURE__ */ a(Qe, { children: r }),
         /* @__PURE__ */ a("div", { className: "p-6 md:p-10", children: t })
       ]
     }
   );
-}, Ue = (e) => {
+}, Qe = (e) => {
   const { className: r, ...t } = e;
   return /* @__PURE__ */ a(
     "h2",
@@ -732,7 +723,7 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     rightAddon: c,
     leftAddon: u,
     ...d
-  } = e, m = o ?? "input", h = Ge(m, i);
+  } = e, m = o ?? "input", h = Ue(m, i);
   return /* @__PURE__ */ g(
     "div",
     {
@@ -766,7 +757,7 @@ const J = I({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     }
   );
 });
-function Ge(e, r) {
+function Ue(e, r) {
   if (r != null)
     return r;
   if (e === "input")
@@ -834,7 +825,7 @@ const Mt = (e) => {
       }
     );
   }
-), He = () => {
+), Ge = () => {
   const { isExpanded: e, setIsExpanded: r, collapsibleId: t } = A(R);
   let n = xe, s = "Meny";
   return e && (n = ve, s = "Lukk"), /* @__PURE__ */ g(
@@ -861,7 +852,7 @@ const Mt = (e) => {
       children: [
         n,
         /* @__PURE__ */ a("div", { className: "hidden md:block", children: t }),
-        /* @__PURE__ */ a(He, {})
+        /* @__PURE__ */ a(Ge, {})
       ]
     }
   );
@@ -880,7 +871,7 @@ const Mt = (e) => {
     }
   );
 }, Ot = (e) => {
-  const { isExpanded: r } = A(R), t = ze(!1);
+  const { isExpanded: r } = A(R), t = Oe(!1);
   return !r || !t ? null : /* @__PURE__ */ a(Z, { children: e.children });
 }, w = 2, O = I({ currentPage: 0, pageCount: 0 }), Tt = (e) => {
   const {
@@ -909,7 +900,7 @@ const Mt = (e) => {
       ...d,
       children: [
         /* @__PURE__ */ a(
-          _e,
+          De,
           {
             "aria-label": u,
             href: o(t - 1),
@@ -926,8 +917,8 @@ const Mt = (e) => {
             selected: t === 1
           }
         ),
-        n > 2 + w * 2 && t > w + 2 && /* @__PURE__ */ a($e, {}),
-        /* @__PURE__ */ a(et, { children: (f) => /* @__PURE__ */ a(
+        n > 2 + w * 2 && t > w + 2 && /* @__PURE__ */ a(_e, {}),
+        /* @__PURE__ */ a($e, { children: (f) => /* @__PURE__ */ a(
           _,
           {
             href: o(f),
@@ -939,7 +930,7 @@ const Mt = (e) => {
           f
         ) }),
         /* @__PURE__ */ a(
-          De,
+          He,
           {
             "aria-label": c,
             href: o(t + 1),
@@ -949,7 +940,7 @@ const Mt = (e) => {
       ]
     }
   ) });
-}, De = b((e, r) => {
+}, He = b((e, r) => {
   const { currentPage: t, pageCount: n } = A(O), s = t >= n;
   return /* @__PURE__ */ a(
     Q,
@@ -962,7 +953,7 @@ const Mt = (e) => {
       children: /* @__PURE__ */ a(Ne, {})
     }
   );
-}), _e = b((e, r) => {
+}), De = b((e, r) => {
   const { currentPage: t } = A(O), n = t <= 1;
   return /* @__PURE__ */ a(
     Q,
@@ -988,7 +979,7 @@ const Mt = (e) => {
       ...n
     }
   );
-}), $e = () => /* @__PURE__ */ a("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), et = ({ children: e }) => {
+}), _e = () => /* @__PURE__ */ a("span", { className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10", children: "..." }), $e = ({ children: e }) => {
   const { currentPage: r, pageCount: t } = A(O), n = Math.min(
     Math.max(2 + w * 2, r + w),
     t
@@ -1083,7 +1074,7 @@ const Mt = (e) => {
       }
     ) });
   }
-), tt = b(
+), et = b(
   (e, r) => {
     const { children: t, className: n, isInvalid: s, size: o, ...i } = e, c = o === "small";
     return /* @__PURE__ */ g("div", { className: l(n, "relative", c && "text-sm"), children: [
@@ -1137,7 +1128,7 @@ const Mt = (e) => {
       ),
       t && /* @__PURE__ */ a(S, { id: p, children: t }),
       /* @__PURE__ */ a(
-        tt,
+        et,
         {
           id: f,
           ref: d,
@@ -1198,12 +1189,12 @@ const Mt = (e) => {
     ...e,
     children: e.children
   }
-), rt = (e) => {
+), tt = (e) => {
   const { align: r = "center", children: t, className: n, ...s } = e;
   return /* @__PURE__ */ a("ol", { className: l(n, "flex flex-col gap-8 md:gap-12"), ...s, children: W.map(t, (o) => K(o, {
     align: r
   })) });
-}, nt = (e) => {
+}, rt = (e) => {
   const { className: r, children: t, bullet: n, align: s = "center", ...o } = e;
   return /* @__PURE__ */ g(
     "li",
@@ -1215,12 +1206,12 @@ const Mt = (e) => {
       ),
       ...o,
       children: [
-        /* @__PURE__ */ a(at, { align: s, children: n }),
+        /* @__PURE__ */ a(nt, { align: s, children: n }),
         t
       ]
     }
   );
-}, at = ({ align: e, ...r }) => /* @__PURE__ */ a(
+}, nt = ({ align: e, ...r }) => /* @__PURE__ */ a(
   "span",
   {
     "aria-hidden": !0,
@@ -1234,7 +1225,7 @@ const Mt = (e) => {
     ...r
   }
 );
-rt.Item = nt;
+tt.Item = rt;
 const Yt = b(
   (e, r) => {
     const {
@@ -1321,10 +1312,10 @@ const Yt = b(
 );
 export {
   X as Accordion,
-  Oe as AccordionContent,
-  Je as AccordionHeader,
-  Ve as AccordionItem,
-  mt as Alert,
+  qe as AccordionContent,
+  Re as AccordionHeader,
+  Ee as AccordionItem,
+  ct as Alert,
   ut as Banner,
   ft as BannerImage,
   gt as Button,
@@ -1341,7 +1332,7 @@ export {
   It as Form,
   Ct as FormError,
   E as FormErrorMessage,
-  Ue as FormHeading,
+  Qe as FormHeading,
   S as FormHelperText,
   V as FormLabel,
   Et as FormSuccess,
@@ -1365,14 +1356,14 @@ export {
   Wt as Snackbar,
   $ as SnackbarButton,
   Kt as SnackbarContent,
-  rt as StepList,
-  nt as StepListItem,
+  tt as StepList,
+  rt as StepListItem,
   Yt as TextArea,
   Xt as TextField,
-  ie as useBlockBackgroundColor,
+  le as useBlockBackgroundColor,
   C as useFallbackId,
   z as useFormControlValidity,
-  oe as useMedia,
-  Me as usePrefersReducedMotion,
-  ze as useScreenMaxWidthMd
+  ie as useMedia,
+  mt as usePrefersReducedMotion,
+  Oe as useScreenMaxWidthMd
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -41,7 +41,7 @@
   "dependencies": {
     "@react-hook/merged-ref": "1.3.2",
     "clsx": "1.2.1",
-    "react-collapsed": "3.5.0",
+    "react-collapsed": "4.0.2",
     "react-use": "17.4.0",
     "@obosbbl/grunnmuren-icons": "^0.6.0"
   },