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

package/dist/Form/MultiStep/FormStepContext.d.ts

@@ -3,6 +3,7 @@ export type FieldValues = Record<string, unknown>;
 export declare function useFormContext(): {
     activeStep: number;
     formData: any;
+    setActiveStep: (step: number) => void;
 };
 export declare function useFormStepContext<FormStepData extends FieldValues>(formStep: number): {
     isActive: boolean;

package/dist/grunnmuren.mjs

@@ -1,16 +1,16 @@
 'use client';
 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 { createContext as y, 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 { useCollapse as ye } from "react-collapsed";
 import c from "clsx";
-import { useMediaQuery as ae, useUpdateEffect as ye } from "@react-hookz/web";
+import { useMediaQuery as ae, useUpdateEffect as we } from "@react-hookz/web";
 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: c(r, "flex flex-col gap-2"), ...t });
-}, Y = w({
+}, Y = y({
   isExpanded: !1,
   setExpanded: I,
   // @ts-expect-error noop
@@ -19,7 +19,7 @@ const I = () => {
   getToggleProps: I,
   onChange: I
 }), Ee = (e) => {
-  const { className: r, defaultOpen: t, onChange: n = I, open: a, ...s } = e, i = we({
+  const { className: r, defaultOpen: t, onChange: n = I, open: a, ...s } = e, i = ye({
     defaultExpanded: t,
     isExpanded: a,
     duration: Ie,
@@ -36,7 +36,7 @@ const I = () => {
       ...s
     }
   ) });
-}, Re = (e) => {
+}, Se = (e) => {
   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",
@@ -59,13 +59,13 @@ const I = () => {
       ]
     }
   ) });
-}, Se = (e) => {
+}, Re = (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: c(t, "p-5 pb-10"), ...n }) });
 }, oe = (e) => e + "toggle";
 X.Item = Ee;
-X.Header = Re;
-X.Content = Se;
+X.Header = Se;
+X.Content = Re;
 const ct = (e) => {
   const { className: r, children: t, heading: n, severity: a = "alert", ...s } = e;
   return /* @__PURE__ */ o(
@@ -107,8 +107,8 @@ function se(e) {
       return "bg-sky-light";
   }
 }
-const Le = (e) => ae("(max-width: 767.9px)", { initializeWithValue: e });
-function L(e, r = !0) {
+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(
@@ -130,7 +130,7 @@ function L(e, r = !0) {
     };
   }, [r, d]), { validity: t, validationMessage: a };
 }
-function R(e) {
+function S(e) {
   const r = $();
   return e ?? r;
 }
@@ -158,7 +158,7 @@ const mt = (e) => {
     className: "w-20 flex-none self-center md:w-32 md:self-start",
     ...e
   }
-), Pe = {
+), Le = {
   "standard-primary": "bg-green border-green text-white",
   "standard-secondary": "bg-white border-green text-black",
   "mint-primary": "bg-mint border-mint text-black",
@@ -177,7 +177,7 @@ const mt = (e) => {
     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;
+  } = e, m = A(L), b = Le[`${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",
     {
@@ -223,7 +223,7 @@ function ie(e) {
     return r;
   });
 }
-const P = w("standard"), le = w(!0), ze = (e, r) => {
+const L = y("standard"), le = y(!0), ze = (e, r) => {
   const {
     as: t = "div",
     body: n,
@@ -350,10 +350,10 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
       id: s,
       disableValidation: i = !1,
       ...d
-    } = e, u = E(null), { validity: l, validationMessage: m } = L(
+    } = e, u = E(null), { validity: l, validationMessage: m } = P(
       u,
       !i
-    ), g = R(s), b = g + "err", p = a || m;
+    ), 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__ */ o(
@@ -376,7 +376,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
         ),
         t
       ] }),
-      p && /* @__PURE__ */ o(S, { id: b, children: p })
+      p && /* @__PURE__ */ o(R, { id: b, children: p })
     ] });
   }
 ), je = {
@@ -417,9 +417,9 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
       ]
     }
   );
-}, wt = (e) => {
+}, yt = (e) => {
   const { className: r, children: t, ...n } = e;
-  return /* @__PURE__ */ o(P.Provider, { value: "white", children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(L.Provider, { value: "white", children: /* @__PURE__ */ o(
     "footer",
     {
       className: c(
@@ -431,7 +431,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
       children: /* @__PURE__ */ o("div", { className: "container", children: t })
     }
   ) });
-}, yt = (e) => {
+}, wt = (e) => {
   const { heading: r, children: t, className: n, ...a } = e;
   return /* @__PURE__ */ f(
     "form",
@@ -473,7 +473,7 @@ const P = 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."
     }
   );
-}, S = (e) => {
+}, R = (e) => {
   const { children: r, className: t, ...n } = e;
   return /* @__PURE__ */ f(
     "div",
@@ -628,7 +628,7 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
       ]
     }
   );
-}, Q = w([
+}, Q = y([
   {
     activeStep: 1,
     formData: {}
@@ -637,10 +637,11 @@ const P = w("standard"), le = w(!0), ze = (e, r) => {
   }
 ]);
 function Et() {
-  const [e] = A(Q);
+  const [e, r] = A(Q);
   return {
     activeStep: e.activeStep,
-    formData: e.formData
+    formData: e.formData,
+    setActiveStep: (t) => r({ type: "SET_STEP", step: t })
   };
 }
 function Xe(e) {
@@ -701,14 +702,14 @@ function Ye(e, r) {
       };
   }
 }
-function Rt({ children: e }) {
+function St({ children: e }) {
   const [r, t] = ge(Ye, {
     activeStep: 1,
     formData: {}
   }), n = C(() => [r, t], [r, t]);
   return /* @__PURE__ */ o(Q.Provider, { value: n, children: e });
 }
-const St = (e) => {
+const Rt = (e) => {
   const {
     children: r,
     heading: t,
@@ -721,7 +722,7 @@ const St = (e) => {
   } = 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(() => {
+  return we(() => {
     var x;
     l && ((x = b.current) == null || x.scrollIntoView({ behavior: "smooth" }));
   }, [l]), /* @__PURE__ */ f(
@@ -752,7 +753,7 @@ const St = (e) => {
 function ce(e) {
   return e !== "vertical-split" && e !== "below-center" && e !== "below-left";
 }
-const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), kt = h((e, r) => {
+const V = y({ bgColor: "white", contentPosition: "below-center", hasImage: !1 }), kt = h((e, r) => {
   const {
     bgColor: t = "white",
     children: n,
@@ -769,7 +770,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
     [t, l, u]
   );
   return /* @__PURE__ */ o(
-    P.Provider,
+    L.Provider,
     {
       value: t === "white" ? "standard" : "mint",
       children: /* @__PURE__ */ o(V.Provider, { value: m, children: /* @__PURE__ */ f(
@@ -822,7 +823,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), Lt = h(
+), 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);
     return /* @__PURE__ */ f(
@@ -866,7 +867,7 @@ const V = w({ bgColor: "white", contentPosition: "below-center", hasImage: !1 })
       }
     );
   }
-), Pt = h(
+), Lt = h(
   (e, r) => {
     const { className: t, ...n } = e, { contentPosition: a } = A(V);
     return /* @__PURE__ */ o(
@@ -941,7 +942,7 @@ const Mt = (e) => {
     e.icon,
     e.children
   ] });
-}, k = w({
+}, k = y({
   setIsExpanded: I,
   isExpanded: !1,
   collapsibleId: ""
@@ -950,7 +951,7 @@ const Mt = (e) => {
     () => ({ isExpanded: s, setIsExpanded: i, collapsibleId: a }),
     [s, a]
   );
-  return /* @__PURE__ */ o(P.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: d, children: /* @__PURE__ */ o(
     "div",
     {
       className: c(
@@ -1043,9 +1044,9 @@ const Mt = (e) => {
     }
   );
 }, jt = (e) => {
-  const { isExpanded: r } = A(k), t = Le(!1);
+  const { isExpanded: r } = A(k), t = Pe(!1);
   return !r || !t ? null : /* @__PURE__ */ o(O, { children: e.children });
-}, y = 2, T = w({ currentPage: 0, pageCount: 0 }), Ot = (e) => {
+}, w = 2, T = y({ currentPage: 0, pageCount: 0 }), Ot = (e) => {
   const {
     className: r,
     page: t,
@@ -1089,7 +1090,7 @@ const Mt = (e) => {
             selected: t === 1
           }
         ),
-        n > 2 + y * 2 && t > y + 2 && /* @__PURE__ */ o(He, {}),
+        n > 2 + w * 2 && t > w + 2 && /* @__PURE__ */ o(He, {}),
         /* @__PURE__ */ o(Ge, { children: (b) => /* @__PURE__ */ o(
           G,
           {
@@ -1153,18 +1154,18 @@ const Mt = (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),
+    Math.max(2 + w * 2, r + w),
     t
   );
   let a = Math.max(
-    Math.min(r - y, n - y * 2),
+    Math.min(r - w, n - w * 2),
     1
   );
-  return a - y === 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, 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 });
-}), me = w({
+}), me = y({
   defaultValue: void 0,
   isControlled: !1,
   name: void 0,
@@ -1223,7 +1224,7 @@ const Mt = (e) => {
         error: !!i
       }),
       [a, t, m, v, b, p, i]
-    ), J = R(d), B = `${J}:label`, D = `${J}:help`, H = J + "err", j = i;
+    ), J = S(d), B = `${J}:label`, D = `${J}:help`, H = J + "err", j = i;
     return /* @__PURE__ */ o(me.Provider, { value: F, children: /* @__PURE__ */ f(
       "div",
       {
@@ -1241,7 +1242,7 @@ const Mt = (e) => {
           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 })
+          j && /* @__PURE__ */ o(R, { id: H, children: j })
         ]
       }
     ) });
@@ -1284,10 +1285,10 @@ const Mt = (e) => {
       label: s,
       disableValidation: i = !1,
       ...d
-    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = L(
+    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = P(
       u,
       !i
-    ), b = R(a), p = b + "help", x = b + "err", v = n || g;
+    ), b = S(a), p = b + "help", x = b + "err", v = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
@@ -1312,7 +1313,7 @@ const Mt = (e) => {
           }) || void 0
         }
       ),
-      v && /* @__PURE__ */ o(S, { id: x, children: v })
+      v && /* @__PURE__ */ o(R, { id: x, children: v })
     ] });
   }
 ), Xt = (e) => {
@@ -1407,10 +1408,10 @@ const Qt = h(
       label: s,
       disableValidation: i = !1,
       ...d
-    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = L(
+    } = e, u = E(null), l = K([u, r]), { validity: m, validationMessage: g } = P(
       u,
       !i
-    ), b = R(a), p = b + "help", x = b + "err", v = n || g;
+    ), b = S(a), p = b + "help", x = b + "err", v = n || g;
     return /* @__PURE__ */ f("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ o(
         z,
@@ -1436,7 +1437,7 @@ const Qt = h(
           }) || void 0
         }
       ),
-      v && /* @__PURE__ */ o(S, { id: x, children: v })
+      v && /* @__PURE__ */ o(R, { id: x, children: v })
     ] });
   }
 ), Ut = h(
@@ -1449,10 +1450,10 @@ const Qt = h(
       type: i = "text",
       disableValidation: d = !1,
       ...u
-    } = e, l = E(null), { validity: m, validationMessage: g } = L(
+    } = e, l = E(null), { validity: m, validationMessage: g } = P(
       l,
       !d
-    ), b = R(a), p = b + "help", x = b + "err", v = n || g, F = K([l, r]);
+    ), b = S(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,
@@ -1478,20 +1479,20 @@ const Qt = h(
           }) || void 0
         }
       ),
-      v && /* @__PURE__ */ o(S, { id: x, children: v })
+      v && /* @__PURE__ */ o(R, { id: x, children: v })
     ] });
   }
 );
 export {
   X as Accordion,
-  Se as AccordionContent,
-  Re as AccordionHeader,
+  Re as AccordionContent,
+  Se as AccordionHeader,
   Ee as AccordionItem,
   ct as Alert,
   mt as Banner,
   ut as BannerImage,
   bt as Button,
-  P as ButtonColorContext,
+  L as ButtonColorContext,
   ft as Campaign,
   gt as Card,
   At as CardContent,
@@ -1500,21 +1501,21 @@ export {
   pt as CardList,
   vt as Checkbox,
   Nt as Chip,
-  wt as Footer,
-  yt as Form,
+  yt as Footer,
+  wt as Form,
   It as FormError,
-  S as FormErrorMessage,
+  R as FormErrorMessage,
   Ze as FormHeading,
   M as FormHelperText,
   z as FormLabel,
-  St as FormStep,
+  Rt as FormStep,
   We as FormStepHeader,
   Ke as FormStepHeaderContent,
-  Rt as FormStepProvider,
+  St as FormStepProvider,
   Ct as FormSuccess,
   kt as Hero,
-  Pt as HeroActions,
-  Lt as HeroContent,
+  Lt as HeroActions,
+  Pt as HeroContent,
   V as HeroContext,
   qt as HeroImage,
   de as Input,
@@ -1537,10 +1538,10 @@ export {
   Qt as TextArea,
   Ut as TextField,
   se as useBlockBackgroundColor,
-  R as useFallbackId,
+  S as useFallbackId,
   Et as useFormContext,
-  L as useFormControlValidity,
+  P as useFormControlValidity,
   Xe as useFormStepContext,
   dt as usePrefersReducedMotion,
-  Le as useScreenMaxWidthMd
+  Pe as useScreenMaxWidthMd
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.14.0-beta.5",
+  "version": "1.14.1",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,25 +17,25 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@storybook/addon-controls": "7.0.22",
-    "@storybook/addon-docs": "7.0.22",
-    "@storybook/addon-styling": "1.3.0",
-    "@storybook/builder-vite": "7.0.22",
-    "@storybook/react": "7.0.22",
-    "@storybook/react-vite": "7.0.22",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.2.5",
-    "@vitejs/plugin-react": "4.0.0",
+    "@storybook/addon-controls": "7.0.26",
+    "@storybook/addon-docs": "7.0.26",
+    "@storybook/addon-styling": "1.3.2",
+    "@storybook/builder-vite": "7.0.26",
+    "@storybook/react": "7.0.26",
+    "@storybook/react-vite": "7.0.26",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "@vitejs/plugin-react": "4.0.2",
     "autoprefixer": "10.4.14",
-    "postcss": "8.4.24",
+    "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "5.0.1",
-    "storybook": "7.0.22",
+    "storybook": "7.0.26",
     "tailwindcss": "3.3.2",
     "type-fest": "3.12.0",
-    "vite": "4.3.9",
+    "vite": "4.4.2",
     "@obosbbl/grunnmuren-tailwind": "0.9.1"
   },
   "dependencies": {