@rws-aoa/react-library 3.6.6 → 5.0.0

package/dist/components/molecules/form-modal/FormModal.d.ts

@@ -1,4 +1,3 @@
-import { FormApi, Validator } from '@tanstack/react-form';
 import { AoaButtonProps } from '../../atoms/button/Button';
 import { AoaModalProps } from '../modal/Modal';
 import { AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';
@@ -28,15 +27,9 @@ export interface AoaFormModalProps extends Omit<AoaModalProps, 'dialogActions'>,
     /**
      * Additional properties to provide to the {@link AoaButton | submit button}
      */
-    AoaSubmitButtonProps?: Omit<AoaButtonProps, 'buttonType' | 'data-qa' | 'onClick' | 'type'>;
-    /**
-     * The tanstack form instance
-     *
-     * @remarks
-     * - The `any`'s here are intentional, otherwise type instantiation can become excessively deep and possibly infinite,
-     * exact types are also not necessary here
-     */
-    form: FormApi<any, Validator<any>>;
+    AoaSubmitButtonProps?: Omit<AoaButtonProps, 'buttonType' | 'data-qa' | 'disabled' | 'onClick' | 'type'> & {
+        disableWithFormState?: boolean;
+    };
     /**
      * Labels for the buttons in {@link DialogActions}
      */
@@ -55,33 +48,37 @@ export interface AoaFormModalProps extends Omit<AoaModalProps, 'dialogActions'>,
  *
  * For a modal without a form see `AoaModal`
  *
+ * This component is intended for internal use only and should always be used through `<form.AoaFormModal />`
+ *
+ * @internal
  * @param props - Props to pass to the modal - {@link ModalProps}
  * @example
  * ```jsx
- *    <AoaFormModal
- *      open={true}
- *      form={form}
- *      formLabels={{
- *        submit: 'submit',
- *        cancel: 'cancel'
- *      }}
- *      formModalQas={{
- *        cancelButton: 'cancel-button',
- *        dialogActions: 'dialog-actions,
- *        form: 'form',
- *        submitButton: 'confirm-button'
- *      }}
- *      closeAction={handleClose}
- *      topic='topic'
- *      modalQas={{
- *        modal: 'modal',
- *        content: 'modal-content',
- *        title: 'modal-title'
- *      }}
- *      formName='form'
- *      dialogContent={content}
- *    />
+ * <form.AppForm>
+ *   <form.AoaFormModal
+ *     open={true}
+ *     formLabels={{
+ *       submit: 'submit',
+ *       cancel: 'cancel'
+ *     }}
+ *     formModalQas={{
+ *       cancelButton: 'cancel-button',
+ *       dialogActions: 'dialog-actions,
+ *       form: 'form',
+ *       submitButton: 'confirm-button'
+ *     }}
+ *     closeAction={handleClose}
+ *     topic='topic'
+ *     modalQas={{
+ *       modal: 'modal',
+ *       content: 'modal-content',
+ *       title: 'modal-title'
+ *     }}
+ *     formName='form'
+ *     dialogContent={content}
+ *   />
+ * </form.AppForm>
  * ```
  */
-export declare function AoaFormModal({ form, formModalQas, formLabels, formName, DialogProps, DialogTitleProps, DialogContentProps, AoaSubmitButtonProps, modalQas, open, topic, dialogContent, closeAction }: Readonly<AoaFormModalProps>): import("react/jsx-runtime").JSX.Element;
+export declare function AoaFormModal({ formModalQas, formLabels, formName, DialogProps, DialogTitleProps, DialogContentProps, AoaSubmitButtonProps: { disableWithFormState, ...AoaSubmitButtonProps }, modalQas, open, topic, dialogContent, closeAction }: Readonly<AoaFormModalProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FormModal.d.ts.map

package/dist/components/molecules/form-modal/FormModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/form-modal/FormModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAE5G,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC,EAAE,wBAAwB;IACvG;;OAEG;IACH,oBAAoB,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;IAC3F;;;;;;OAMG;IACH,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IACnC;;OAEG;IACH,UAAU,EAAE,kBAAkB,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,aAAa,EACb,WAAW,EACZ,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAmD7B"}
+{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/form-modal/FormModal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAE5G,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC,EAAE,wBAAwB;IACvG;;OAEG;IACH,oBAAoB,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,GAAG;QACxG,oBAAoB,CAAC,EAAE,OAAO,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,EAAE,kBAAkB,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,YAAY,CAAC,EAC3B,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EAAE,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,EAAO,EAC5E,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,aAAa,EACb,WAAW,EACZ,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAwE7B"}

package/dist/components/molecules/form-modal/FormModal.js

@@ -1,78 +1,10 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { Dialog as S, DialogTitle as T, DialogContent as k, DialogActions as w } from "@mui/material";
-import { m as F } from "../../../chunks/index.DJYQ_-zP.js";
-import { AoaButton as q } from "../../atoms/button/Button.js";
-import { AoaModalCloseButton as W } from "../modal-close-button/ModalCloseButton.js";
-function G({
-  form: u,
-  formModalQas: t,
-  formLabels: p,
-  formName: x,
-  DialogProps: b,
-  DialogTitleProps: y,
-  DialogContentProps: n,
-  AoaSubmitButtonProps: B,
-  modalQas: i,
-  open: g,
-  topic: A,
-  dialogContent: j,
-  closeAction: h
-}) {
-  return /* @__PURE__ */ c(S, { ...b, "data-qa": (i == null ? void 0 : i.modal) ?? "modal", open: !!g, children: [
-    /* @__PURE__ */ e(T, { ...y, "data-qa": (i == null ? void 0 : i.title) ?? "modal-title", maxWidth: "sm", sx: { m: 0, p: 2 }, children: A }),
-    /* @__PURE__ */ e(W, { closeAction: h }),
-    /* @__PURE__ */ c(
-      "form",
-      {
-        "data-qa": (t == null ? void 0 : t.form) ?? "form",
-        name: x,
-        onSubmit: async (r) => {
-          r.preventDefault(), r.stopPropagation(), await u.handleSubmit();
-        },
-        children: [
-          /* @__PURE__ */ e(
-            k,
-            {
-              ...n,
-              "data-qa": (i == null ? void 0 : i.content) ?? "modal-content",
-              sx: F(
-                {
-                  padding: "0 3rem 2rem"
-                },
-                n == null ? void 0 : n.sx
-              ),
-              children: j
-            }
-          ),
-          /* @__PURE__ */ c(w, { "data-qa": (t == null ? void 0 : t.dialogActions) ?? "dialog-actions", children: [
-            /* @__PURE__ */ e(
-              q,
-              {
-                "data-qa": (t == null ? void 0 : t.cancelButton) ?? "cancel-form",
-                onClick: () => {
-                  u.reset(), h();
-                },
-                type: "secondary",
-                children: p.cancel
-              }
-            ),
-            /* @__PURE__ */ e(
-              q,
-              {
-                ...B,
-                buttonType: "submit",
-                "data-qa": (t == null ? void 0 : t.submitButton) ?? "submit-form",
-                type: "primary",
-                children: p.submit
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
+import "react/jsx-runtime";
+import "@mui/material";
+import "../../../chunks/lodash.DOeeRDpT.js";
+import { b } from "../../../chunks/FieldError.DAUtZvvC.js";
+import "../../atoms/button/Button.js";
+import "../modal-close-button/ModalCloseButton.js";
 export {
-  G as AoaFormModal
+  b as AoaFormModal
 };
 //# sourceMappingURL=FormModal.js.map

package/dist/components/molecules/form-modal/FormModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormModal.js","sources":["../../../../src/components/molecules/form-modal/FormModal.tsx"],"sourcesContent":["import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';\nimport type { FormApi, Validator } from '@tanstack/react-form';\nimport merge from 'lodash.merge';\nimport { AoaButton, type AoaButtonProps } from '../../atoms/button/Button';\nimport type { AoaModalProps } from '../modal/Modal';\nimport { AoaModalCloseButton, type AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';\n\nexport interface AoaFormModalQAs {\n  /**\n   * Data-qa tag applied to the \"cancel\" button\n   */\n  cancelButton?: string;\n  /**\n   * Data-qa tag applied to the `DialogActions` component\n   */\n  dialogActions?: string;\n  /**\n   * Data-qa tag applied to the HTML `form` element\n   */\n  form?: string;\n  /**\n   * Data-qa tag applied to the \"submit\" button\n   */\n  submitButton?: string;\n}\n\nexport interface AoaFormModalLabels {\n  cancel: string;\n  submit: string;\n}\n\nexport interface AoaFormModalProps extends Omit<AoaModalProps, 'dialogActions'>, AoaModalCloseButtonProps {\n  /**\n   * Additional properties to provide to the {@link AoaButton | submit button}\n   */\n  AoaSubmitButtonProps?: Omit<AoaButtonProps, 'buttonType' | 'data-qa' | 'onClick' | 'type'>;\n  /**\n   * The tanstack form instance\n   *\n   * @remarks\n   * - The `any`'s here are intentional, otherwise type instantiation can become excessively deep and possibly infinite,\n   * exact types are also not necessary here\n   */\n  form: FormApi<any, Validator<any>>;\n  /**\n   * Labels for the buttons in {@link DialogActions}\n   */\n  formLabels: AoaFormModalLabels;\n  /**\n   * data-qa tags for the components in the form section of the modal\n   */\n  formModalQas?: AoaFormModalQAs;\n  /**\n   * Optionally the `name` property for the HTML form element\n   */\n  formName?: string;\n}\n\n/**\n * Constructs a modal **for holding a Form** using pre-defined Rijks styling\n *\n * For a modal without a form see `AoaModal`\n *\n * @param props - Props to pass to the modal - {@link ModalProps}\n * @example\n * ```jsx\n *    <AoaFormModal\n *      open={true}\n *      form={form}\n *      formLabels={{\n *        submit: 'submit',\n *        cancel: 'cancel'\n *      }}\n *      formModalQas={{\n *        cancelButton: 'cancel-button',\n *        dialogActions: 'dialog-actions,\n *        form: 'form',\n *        submitButton: 'confirm-button'\n *      }}\n *      closeAction={handleClose}\n *      topic='topic'\n *      modalQas={{\n *        modal: 'modal',\n *        content: 'modal-content',\n *        title: 'modal-title'\n *      }}\n *      formName='form'\n *      dialogContent={content}\n *    />\n * ```\n */\nexport function AoaFormModal({\n  form,\n  formModalQas,\n  formLabels,\n  formName,\n  DialogProps,\n  DialogTitleProps,\n  DialogContentProps,\n  AoaSubmitButtonProps,\n  modalQas,\n  open,\n  topic,\n  dialogContent,\n  closeAction\n}: Readonly<AoaFormModalProps>) {\n  return (\n    <Dialog {...DialogProps} data-qa={modalQas?.modal ?? 'modal'} open={Boolean(open)}>\n      <DialogTitle {...DialogTitleProps} data-qa={modalQas?.title ?? 'modal-title'} maxWidth='sm' sx={{ m: 0, p: 2 }}>\n        {topic}\n      </DialogTitle>\n      <AoaModalCloseButton closeAction={closeAction} />\n      <form\n        data-qa={formModalQas?.form ?? 'form'}\n        name={formName}\n        onSubmit={async (event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          await form.handleSubmit();\n        }}\n      >\n        <DialogContent\n          {...DialogContentProps}\n          data-qa={modalQas?.content ?? 'modal-content'}\n          sx={merge(\n            {\n              padding: '0 3rem 2rem'\n            },\n            DialogContentProps?.sx\n          )}\n        >\n          {dialogContent}\n        </DialogContent>\n        <DialogActions data-qa={formModalQas?.dialogActions ?? 'dialog-actions'}>\n          <AoaButton\n            data-qa={formModalQas?.cancelButton ?? 'cancel-form'}\n            onClick={() => {\n              form.reset();\n              closeAction();\n            }}\n            type='secondary'\n          >\n            {formLabels.cancel}\n          </AoaButton>\n          <AoaButton\n            {...AoaSubmitButtonProps}\n            buttonType='submit'\n            data-qa={formModalQas?.submitButton ?? 'submit-form'}\n            type='primary'\n          >\n            {formLabels.submit}\n          </AoaButton>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n}\n"],"names":["AoaFormModal","form","formModalQas","formLabels","formName","DialogProps","DialogTitleProps","DialogContentProps","AoaSubmitButtonProps","modalQas","open","topic","dialogContent","closeAction","jsxs","Dialog","jsx","DialogTitle","AoaModalCloseButton","event","DialogContent","merge","DialogActions","AoaButton"],"mappings":";;;;;AA2FO,SAASA,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AACF,GAAgC;AAE5B,SAAA,gBAAAC,EAACC,GAAQ,EAAA,GAAGV,GAAa,YAASI,KAAA,gBAAAA,EAAU,UAAS,SAAS,MAAM,EAAQC,GAC1E,UAAA;AAAA,IAAA,gBAAAM,EAACC,KAAa,GAAGX,GAAkB,YAASG,KAAA,gBAAAA,EAAU,UAAS,eAAe,UAAS,MAAK,IAAI,EAAE,GAAG,GAAG,GAAG,KACxG,UACHE,GAAA;AAAA,IACA,gBAAAK,EAACE,KAAoB,aAAAL,GAA0B;AAAA,IAC/C,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAASZ,KAAA,gBAAAA,EAAc,SAAQ;AAAA,QAC/B,MAAME;AAAA,QACN,UAAU,OAAOe,MAAU;AACzB,UAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACtB,MAAMlB,EAAK,aAAa;AAAA,QAC1B;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAe;AAAA,YAACI;AAAA,YAAA;AAAA,cACE,GAAGb;AAAA,cACJ,YAASE,KAAA,gBAAAA,EAAU,YAAW;AAAA,cAC9B,IAAIY;AAAA,gBACF;AAAA,kBACE,SAAS;AAAA,gBACX;AAAA,gBACAd,KAAA,gBAAAA,EAAoB;AAAA,cACtB;AAAA,cAEC,UAAAK;AAAA,YAAA;AAAA,UACH;AAAA,UACC,gBAAAE,EAAAQ,GAAA,EAAc,YAASpB,KAAA,gBAAAA,EAAc,kBAAiB,kBACrD,UAAA;AAAA,YAAA,gBAAAc;AAAA,cAACO;AAAA,cAAA;AAAA,gBACC,YAASrB,KAAA,gBAAAA,EAAc,iBAAgB;AAAA,gBACvC,SAAS,MAAM;AACb,kBAAAD,EAAK,MAAM,GACCY,EAAA;AAAA,gBACd;AAAA,gBACA,MAAK;AAAA,gBAEJ,UAAWV,EAAA;AAAA,cAAA;AAAA,YACd;AAAA,YACA,gBAAAa;AAAA,cAACO;AAAA,cAAA;AAAA,gBACE,GAAGf;AAAA,gBACJ,YAAW;AAAA,gBACX,YAASN,KAAA,gBAAAA,EAAc,iBAAgB;AAAA,gBACvC,MAAK;AAAA,gBAEJ,UAAWC,EAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACd,EACF,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"FormModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/molecules/modal/Modal.js

@@ -1,6 +1,6 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { jsxs as u, jsx as x } from "react/jsx-runtime";
 import { Dialog as v, DialogTitle as b, DialogContent as j } from "@mui/material";
-import { m as x } from "../../../chunks/index.DJYQ_-zP.js";
+import { l as d } from "../../../chunks/lodash.DOeeRDpT.js";
 import { memo as q } from "react";
 import { AoaModalCloseButton as A } from "../modal-close-button/ModalCloseButton.js";
 const z = q(
@@ -9,8 +9,8 @@ const z = q(
     DialogTitleProps: t,
     DialogContentProps: m,
     modalQas: e,
-    open: c,
-    topic: d,
+    open: n,
+    topic: c,
     dialogContent: f,
     dialogActions: h,
     closeAction: i
@@ -19,8 +19,8 @@ const z = q(
     {
       ...r,
       "data-qa": (e == null ? void 0 : e.modal) ?? "modal",
-      open: !!c,
-      sx: x(
+      open: !!n,
+      sx: d.merge(
         {
           "> div > div": {
             borderRadius: 0,
@@ -30,12 +30,12 @@ const z = q(
         r == null ? void 0 : r.sx
       ),
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ x(
           b,
           {
             ...t,
             "data-qa": (e == null ? void 0 : e.title) ?? "modal-title",
-            sx: x(
+            sx: d.merge(
               {
                 padding: "3rem 3rem 1rem",
                 color: "var(--color-rijks-logoblue)",
@@ -44,16 +44,16 @@ const z = q(
               },
               t == null ? void 0 : t.sx
             ),
-            children: d
+            children: c
           }
         ),
-        /* @__PURE__ */ n(A, { closeAction: i }),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ x(A, { closeAction: i }),
+        /* @__PURE__ */ x(
           j,
           {
             ...m,
             "data-qa": (e == null ? void 0 : e.content) ?? "modal-content",
-            sx: x(
+            sx: d.merge(
               {
                 padding: "0 3rem 2rem"
               },

package/dist/components/molecules/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/molecules/modal/Modal.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  type DialogContentProps,\n  type DialogProps,\n  type DialogTitleProps\n} from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ReactNode } from 'react';\nimport { AoaModalCloseButton, type AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';\n\nexport interface AoaModalQAs {\n  /**\n   * Data-qa tag applied to the content\n   */\n  content?: string;\n  /**\n   * Data-qa tag applied to the main modal\n   */\n  modal?: string;\n  /**\n   * Data-qa tag applied to the title\n   */\n  title?: string;\n}\n\nexport interface AoaModalProps {\n  /**\n   * Any other props passed to the {@link DialogContent}\n   */\n  readonly DialogContentProps?: DialogContentProps;\n  /**\n   * Any other props passed to the {@link Dialog}\n   */\n  readonly DialogProps?: Omit<DialogProps, 'open'>;\n  /**\n   * Any other props passed to the {@link DialogTitle}\n   */\n  readonly DialogTitleProps?: DialogTitleProps;\n  /**\n   * Optional for adding dialog actions below the content\n   */\n  readonly dialogActions?: ReactNode;\n  /**\n   * The content to show in the modal\n   */\n  readonly dialogContent: ReactNode;\n  /**\n   * Object of data-qa tags to pass to the modal\n   */\n  readonly modalQas?: AoaModalQAs;\n  /**\n   * Whether the modal should be opened or not\n   */\n  readonly open: boolean;\n  /**\n   * Title for the modal\n   */\n  readonly topic: string;\n}\n\n/**\n * Constructs a modal using pre-defined Rijkswaterstaat styling\n *\n * @param props - Props to pass to the modal - {@link ModalProps}\n * @example\n * ```jsx\n * <AoaModal\n *   topic='topic'\n *   modalQas={{\n *     modal: 'modal',\n *     content: 'content',\n *     title: 'title',\n *   }}\n *   dialogContent={<div>SAMPLE</div>}\n *   open={true}\n * />\n * ```\n */\nexport const AoaModal = memo(\n  ({\n    DialogProps,\n    DialogTitleProps,\n    DialogContentProps,\n    modalQas,\n    open,\n    topic,\n    dialogContent,\n    dialogActions,\n    closeAction\n  }: AoaModalCloseButtonProps & AoaModalProps) => {\n    return (\n      <Dialog\n        {...DialogProps}\n        data-qa={modalQas?.modal ?? 'modal'}\n        open={Boolean(open)}\n        sx={merge(\n          {\n            '> div > div': {\n              borderRadius: 0,\n              minWidth: '45vw'\n            }\n          },\n          DialogProps?.sx\n        )}\n      >\n        <DialogTitle\n          {...DialogTitleProps}\n          data-qa={modalQas?.title ?? 'modal-title'}\n          sx={merge(\n            {\n              padding: '3rem 3rem 1rem',\n              color: 'var(--color-rijks-logoblue)',\n              fontSize: '1.1rem',\n              fontWeight: 'bolder'\n            },\n            DialogTitleProps?.sx\n          )}\n        >\n          {topic}\n        </DialogTitle>\n        <AoaModalCloseButton closeAction={closeAction} />\n        <DialogContent\n          {...DialogContentProps}\n          data-qa={modalQas?.content ?? 'modal-content'}\n          sx={merge(\n            {\n              padding: '0 3rem 2rem'\n            },\n            DialogContentProps?.sx\n          )}\n        >\n          {dialogContent}\n        </DialogContent>\n        {dialogActions}\n      </Dialog>\n    );\n  }\n);\n"],"names":["AoaModal","memo","DialogProps","DialogTitleProps","DialogContentProps","modalQas","open","topic","dialogContent","dialogActions","closeAction","jsxs","Dialog","merge","jsx","DialogTitle","AoaModalCloseButton","DialogContent"],"mappings":";;;;;AAgFO,MAAMA,IAAWC;AAAA,EACtB,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,MAGE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGV;AAAA,MACJ,YAASG,KAAA,gBAAAA,EAAU,UAAS;AAAA,MAC5B,MAAM,EAAQC;AAAA,MACd,IAAIO;AAAA,QACF;AAAA,UACE,eAAe;AAAA,YACb,cAAc;AAAA,YACd,UAAU;AAAA,UAAA;AAAA,QAEd;AAAA,QACAX,KAAA,gBAAAA,EAAa;AAAA,MACf;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGZ;AAAA,YACJ,YAASE,KAAA,gBAAAA,EAAU,UAAS;AAAA,YAC5B,IAAIQ;AAAA,cACF;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cACAV,KAAA,gBAAAA,EAAkB;AAAA,YACpB;AAAA,YAEC,UAAAI;AAAA,UAAA;AAAA,QACH;AAAA,QACA,gBAAAO,EAACE,KAAoB,aAAAN,GAA0B;AAAA,QAC/C,gBAAAI;AAAA,UAACG;AAAA,UAAA;AAAA,YACE,GAAGb;AAAA,YACJ,YAASC,KAAA,gBAAAA,EAAU,YAAW;AAAA,YAC9B,IAAIQ;AAAA,cACF;AAAA,gBACE,SAAS;AAAA,cACX;AAAA,cACAT,KAAA,gBAAAA,EAAoB;AAAA,YACtB;AAAA,YAEC,UAAAI;AAAA,UAAA;AAAA,QACH;AAAA,QACCC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGN;"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/molecules/modal/Modal.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  type DialogContentProps,\n  type DialogProps,\n  type DialogTitleProps\n} from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { AoaModalCloseButton, type AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';\n\nexport interface AoaModalQAs {\n  /**\n   * Data-qa tag applied to the content\n   */\n  content?: string;\n  /**\n   * Data-qa tag applied to the main modal\n   */\n  modal?: string;\n  /**\n   * Data-qa tag applied to the title\n   */\n  title?: string;\n}\n\nexport interface AoaModalProps {\n  /**\n   * Any other props passed to the {@link DialogContent}\n   */\n  readonly DialogContentProps?: DialogContentProps;\n  /**\n   * Any other props passed to the {@link Dialog}\n   */\n  readonly DialogProps?: Omit<DialogProps, 'open'>;\n  /**\n   * Any other props passed to the {@link DialogTitle}\n   */\n  readonly DialogTitleProps?: DialogTitleProps;\n  /**\n   * Optional for adding dialog actions below the content\n   */\n  readonly dialogActions?: ReactNode;\n  /**\n   * The content to show in the modal\n   */\n  readonly dialogContent: ReactNode;\n  /**\n   * Object of data-qa tags to pass to the modal\n   */\n  readonly modalQas?: AoaModalQAs;\n  /**\n   * Whether the modal should be opened or not\n   */\n  readonly open: boolean;\n  /**\n   * Title for the modal\n   */\n  readonly topic: string;\n}\n\n/**\n * Constructs a modal using pre-defined Rijkswaterstaat styling\n *\n * @param props - Props to pass to the modal - {@link ModalProps}\n * @example\n * ```jsx\n * <AoaModal\n *   topic='topic'\n *   modalQas={{\n *     modal: 'modal',\n *     content: 'content',\n *     title: 'title',\n *   }}\n *   dialogContent={<div>SAMPLE</div>}\n *   open={true}\n * />\n * ```\n */\nexport const AoaModal = memo(\n  ({\n    DialogProps,\n    DialogTitleProps,\n    DialogContentProps,\n    modalQas,\n    open,\n    topic,\n    dialogContent,\n    dialogActions,\n    closeAction\n  }: AoaModalCloseButtonProps & AoaModalProps) => {\n    return (\n      <Dialog\n        {...DialogProps}\n        data-qa={modalQas?.modal ?? 'modal'}\n        open={Boolean(open)}\n        sx={merge(\n          {\n            '> div > div': {\n              borderRadius: 0,\n              minWidth: '45vw'\n            }\n          },\n          DialogProps?.sx\n        )}\n      >\n        <DialogTitle\n          {...DialogTitleProps}\n          data-qa={modalQas?.title ?? 'modal-title'}\n          sx={merge(\n            {\n              padding: '3rem 3rem 1rem',\n              color: 'var(--color-rijks-logoblue)',\n              fontSize: '1.1rem',\n              fontWeight: 'bolder'\n            },\n            DialogTitleProps?.sx\n          )}\n        >\n          {topic}\n        </DialogTitle>\n        <AoaModalCloseButton closeAction={closeAction} />\n        <DialogContent\n          {...DialogContentProps}\n          data-qa={modalQas?.content ?? 'modal-content'}\n          sx={merge(\n            {\n              padding: '0 3rem 2rem'\n            },\n            DialogContentProps?.sx\n          )}\n        >\n          {dialogContent}\n        </DialogContent>\n        {dialogActions}\n      </Dialog>\n    );\n  }\n);\n"],"names":["AoaModal","memo","DialogProps","DialogTitleProps","DialogContentProps","modalQas","open","topic","dialogContent","dialogActions","closeAction","jsxs","Dialog","merge","jsx","DialogTitle","AoaModalCloseButton","DialogContent"],"mappings":";;;;;AAgFO,MAAMA,IAAWC;AAAA,EACtB,CAAC;AAAA,IACC,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,MAGE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGV;AAAA,MACJ,YAASG,KAAA,gBAAAA,EAAU,UAAS;AAAA,MAC5B,MAAM,EAAQC;AAAA,MACd,IAAIO,EAAA;AAAA,QACF;AAAA,UACE,eAAe;AAAA,YACb,cAAc;AAAA,YACd,UAAU;AAAA,UAAA;AAAA,QAEd;AAAA,QACAX,KAAA,gBAAAA,EAAa;AAAA,MACf;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGZ;AAAA,YACJ,YAASE,KAAA,gBAAAA,EAAU,UAAS;AAAA,YAC5B,IAAIQ,EAAA;AAAA,cACF;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cACAV,KAAA,gBAAAA,EAAkB;AAAA,YACpB;AAAA,YAEC,UAAAI;AAAA,UAAA;AAAA,QACH;AAAA,QACA,gBAAAO,EAACE,KAAoB,aAAAN,GAA0B;AAAA,QAC/C,gBAAAI;AAAA,UAACG;AAAA,UAAA;AAAA,YACE,GAAGb;AAAA,YACJ,YAASC,KAAA,gBAAAA,EAAU,YAAW;AAAA,YAC9B,IAAIQ,EAAA;AAAA,cACF;AAAA,gBACE,SAAS;AAAA,cACX;AAAA,cACAT,KAAA,gBAAAA,EAAoB;AAAA,YACtB;AAAA,YAEC,UAAAI;AAAA,UAAA;AAAA,QACH;AAAA,QACCC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGN;"}

package/dist/components/molecules/navigation-bar/NavigationBar.js

@@ -1,22 +1,22 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { AppBar as c, Toolbar as n, Box as d } from "@mui/material";
-import { m } from "../../../chunks/index.DJYQ_-zP.js";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { AppBar as b, Toolbar as n, Box as d } from "@mui/material";
+import { l as m } from "../../../chunks/lodash.DOeeRDpT.js";
 import { memo as g, useState as u, useEffect as s } from "react";
 import { FontNormalSxProps as x } from "../../../_constants.js";
 import { AoaMenuItem as l } from "../../atoms/_menu/menu-item/MenuItem.js";
-import { AoaUserMenu as w } from "../../atoms/_menu/user-menu/UserMenu.js";
-const I = g((r) => {
-  const [o, a] = u(0);
+import { AoaUserMenu as h } from "../../atoms/_menu/user-menu/UserMenu.js";
+const R = g((r) => {
+  const [e, a] = u(0);
   return s(() => {
     const t = window.sessionStorage.getItem("activeMenuTab");
     t && a(JSON.parse(t));
   }, []), s(() => {
-    window.sessionStorage.setItem("activeMenuTab", o.toString());
-  }, [o]), /* @__PURE__ */ e(
-    c,
+    window.sessionStorage.setItem("activeMenuTab", e.toString());
+  }, [e]), /* @__PURE__ */ o(
+    b,
     {
       position: "static",
-      sx: m(
+      sx: m.merge(
         {
           color: "var(--color-text)",
           backgroundColor: "var(--color-rijks-yellow)",
@@ -25,7 +25,7 @@ const I = g((r) => {
         },
         x
       ),
-      children: /* @__PURE__ */ b(
+      children: /* @__PURE__ */ c(
         n,
         {
           role: "menu",
@@ -39,7 +39,7 @@ const I = g((r) => {
               borderRadius: "4px",
               width: "6px",
               height: "6px",
-              "-webkit-border-radius": "4px"
+              WebkitBorderRadius: "4px"
             },
             "::-webkit-scrollbar:hover": {
               background: "#c5c5c5;"
@@ -50,7 +50,7 @@ const I = g((r) => {
             "::-webkit-scrollbar-track": {
               opacity: 0,
               transition: "all 0.5s",
-              "-webkit-transition": "all .5s"
+              WebkitTransition: "all .5s"
             },
             "::-webkit-scrollbar-thumb": {
               overflow: "visible",
@@ -60,35 +60,35 @@ const I = g((r) => {
             },
             "::-webkit-scrollbar-thumb:vertical": {
               background: "rgba(100, 100, 100, .5)",
-              "-webkit-border-radius": "100px"
+              WebkitBorderRadius: "100px"
             },
             "::-webkit-scrollbar-thumb:vertical:active": {
               background: "rgba(100, 100, 100, .61)",
-              "-webkit-border-radius": "100px"
+              WebkitBorderRadius: "100px"
             }
           },
           tabIndex: 0,
           children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ o(
               l,
               {
                 index: 0,
                 page: { label: r.name, to: r.homePath ?? "/" },
-                selectedPage: o,
+                selectedPage: e,
                 setSelectedPage: a
               }
             ),
-            /* @__PURE__ */ e(d, { sx: { flexGrow: 1, display: "flex", height: "100%" }, children: r.pages.map((t, i) => /* @__PURE__ */ e(
+            /* @__PURE__ */ o(d, { sx: { flexGrow: 1, display: "flex", height: "100%" }, children: r.pages.map((t, i) => /* @__PURE__ */ o(
               l,
               {
                 index: i + 1,
                 page: t,
-                selectedPage: o,
+                selectedPage: e,
                 setSelectedPage: a
               },
               i
             )) }),
-            /* @__PURE__ */ e(w, { settings: r.settings, username: r.username })
+            /* @__PURE__ */ o(h, { settings: r.settings, username: r.username })
           ]
         }
       )
@@ -96,6 +96,6 @@ const I = g((r) => {
   );
 });
 export {
-  I as AoaNavigationBar
+  R as AoaNavigationBar
 };
 //# sourceMappingURL=NavigationBar.js.map

package/dist/components/molecules/navigation-bar/NavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationBar.js","sources":["../../../../src/components/molecules/navigation-bar/NavigationBar.tsx"],"sourcesContent":["import { AppBar, Box, Toolbar } from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, useEffect, useState, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { AoaMenuItem, type AoaPage } from '../../atoms/_menu/menu-item/MenuItem';\nimport { AoaUserMenu, type AoaSetting } from '../../atoms/_menu/user-menu/UserMenu';\n\nexport interface AoaNavigationBarProps {\n  /**\n   * If your home page is not on the root url, use this prop to set the home path\n   */\n  readonly homePath?: string;\n  /**\n   * The name of the application that will be used for the Home tab\n   */\n  readonly name: string;\n  /**\n   * A list of all the pages and optional subpages to be shown in the menu\n   */\n  readonly pages: AoaPage[];\n  /**\n   * A list of all the settings to be shown in the menu\n   */\n  readonly settings: AoaSetting[];\n  /**\n   * Optional username to be displayed next to the settings menu\n   */\n  readonly username?: string;\n}\n\n/**\n * Constructs a navigation bar using pre-defined Rijks styling\n *\n * @param props - Props to pass to the navigation bar\n * @example\n * ```jsx\n * <AoaNavigationBar\n *  name=\"Demo App\"\n *  pages={\n *    [\n *      {\n *        label: \"Products\",\n *        to: \"/products\",\n *        subItems: [\n *          {\n *            label: \"Books\",\n *            to: \"/books\",\n *            icon: <BookIcon />\n *          }\n *        ]\n *      }\n *    ]\n *  }\n * settings={[{ label: \"Logout\", onClick: () => console.log(\"Logout\") }]}\n * />\n * ```\n */\n\nexport const AoaNavigationBar = memo((props: AoaNavigationBarProps): ReactNode => {\n  const [selectedPage, setSelectedPage] = useState<number>(0);\n\n  useEffect(() => {\n    const sessionStorage = window.sessionStorage.getItem('activeMenuTab');\n    if (sessionStorage) {\n      setSelectedPage(JSON.parse(sessionStorage));\n    }\n  }, []);\n\n  useEffect(() => {\n    window.sessionStorage.setItem('activeMenuTab', selectedPage.toString());\n  }, [selectedPage]);\n\n  return (\n    <AppBar\n      position='static'\n      sx={merge(\n        {\n          color: 'var(--color-text)',\n          backgroundColor: 'var(--color-rijks-yellow)',\n          height: '70px',\n          boxShadow: 'none'\n        },\n        FontNormalSxProps\n      )}\n    >\n      <Toolbar\n        role='menu'\n        sx={{\n          height: '100%',\n          overflowX: 'scroll',\n          scrollbarWidth: 'thin',\n          scrollbarColor: '#c5c5c5 #f6f6f6',\n\n          '::-webkit-scrollbar': {\n            overflow: 'visible',\n            borderRadius: '4px',\n            width: '6px',\n            height: '6px',\n            '-webkit-border-radius': '4px'\n          },\n\n          '::-webkit-scrollbar:hover': {\n            background: '#c5c5c5;'\n          },\n\n          '::-webkit-scrollbar-corner': {\n            background: 'rgba(0,0,0,0.5)'\n          },\n\n          '::-webkit-scrollbar-track': {\n            opacity: 0,\n            transition: 'all 0.5s',\n            '-webkit-transition': 'all .5s'\n          },\n\n          '::-webkit-scrollbar-thumb': {\n            overflow: 'visible',\n            backgroundColor: '#c5c5c5;',\n            borderRadius: '4px',\n            border: '3px solid #f6f6f6'\n          },\n\n          '::-webkit-scrollbar-thumb:vertical': {\n            background: 'rgba(100, 100, 100, .5)',\n            '-webkit-border-radius': '100px'\n          },\n\n          '::-webkit-scrollbar-thumb:vertical:active': {\n            background: 'rgba(100, 100, 100, .61)',\n            '-webkit-border-radius': '100px'\n          }\n        }}\n        tabIndex={0}\n      >\n        <AoaMenuItem\n          index={0}\n          page={{ label: props.name, to: props.homePath ?? '/' }}\n          selectedPage={selectedPage}\n          setSelectedPage={setSelectedPage}\n        />\n        <Box sx={{ flexGrow: 1, display: 'flex', height: '100%' }}>\n          {props.pages.map((page, index) => (\n            <AoaMenuItem\n              index={index + 1}\n              key={index}\n              page={page}\n              selectedPage={selectedPage}\n              setSelectedPage={setSelectedPage}\n            />\n          ))}\n        </Box>\n        <AoaUserMenu settings={props.settings} username={props.username} />\n      </Toolbar>\n    </AppBar>\n  );\n});\n"],"names":["AoaNavigationBar","memo","props","selectedPage","setSelectedPage","useState","useEffect","sessionStorage","jsx","AppBar","merge","FontNormalSxProps","jsxs","Toolbar","AoaMenuItem","Box","page","index","AoaUserMenu"],"mappings":";;;;;;;AA0Da,MAAAA,IAAmBC,EAAK,CAACC,MAA4C;AAChF,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiB,CAAC;AAE1D,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAiB,OAAO,eAAe,QAAQ,eAAe;AACpE,IAAIA,KACcH,EAAA,KAAK,MAAMG,CAAc,CAAC;AAAA,EAE9C,GAAG,EAAE,GAELD,EAAU,MAAM;AACd,WAAO,eAAe,QAAQ,iBAAiBH,EAAa,UAAU;AAAA,EAAA,GACrE,CAACA,CAAY,CAAC,GAGf,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,IAAIC;AAAA,QACF;AAAA,UACE,OAAO;AAAA,UACP,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,WAAW;AAAA,QACb;AAAA,QACAC;AAAA,MACF;AAAA,MAEA,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,YACF,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,gBAAgB;AAAA,YAChB,gBAAgB;AAAA,YAEhB,uBAAuB;AAAA,cACrB,UAAU;AAAA,cACV,cAAc;AAAA,cACd,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,yBAAyB;AAAA,YAC3B;AAAA,YAEA,6BAA6B;AAAA,cAC3B,YAAY;AAAA,YACd;AAAA,YAEA,8BAA8B;AAAA,cAC5B,YAAY;AAAA,YACd;AAAA,YAEA,6BAA6B;AAAA,cAC3B,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,sBAAsB;AAAA,YACxB;AAAA,YAEA,6BAA6B;AAAA,cAC3B,UAAU;AAAA,cACV,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,QAAQ;AAAA,YACV;AAAA,YAEA,sCAAsC;AAAA,cACpC,YAAY;AAAA,cACZ,yBAAyB;AAAA,YAC3B;AAAA,YAEA,6CAA6C;AAAA,cAC3C,YAAY;AAAA,cACZ,yBAAyB;AAAA,YAAA;AAAA,UAE7B;AAAA,UACA,UAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,MAAM,EAAE,OAAOZ,EAAM,MAAM,IAAIA,EAAM,YAAY,IAAI;AAAA,gBACrD,cAAAC;AAAA,gBACA,iBAAAC;AAAA,cAAA;AAAA,YACF;AAAA,8BACCW,GAAI,EAAA,IAAI,EAAE,UAAU,GAAG,SAAS,QAAQ,QAAQ,UAC9C,UAAMb,EAAA,MAAM,IAAI,CAACc,GAAMC,MACtB,gBAAAT;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,OAAOG,IAAQ;AAAA,gBAEf,MAAAD;AAAA,gBACA,cAAAb;AAAA,gBACA,iBAAAC;AAAA,cAAA;AAAA,cAHKa;AAAA,YAKR,CAAA,GACH;AAAA,8BACCC,GAAY,EAAA,UAAUhB,EAAM,UAAU,UAAUA,EAAM,SAAU,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACnE;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"NavigationBar.js","sources":["../../../../src/components/molecules/navigation-bar/NavigationBar.tsx"],"sourcesContent":["import { AppBar, Box, Toolbar } from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, useEffect, useState, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { AoaMenuItem, type AoaPage } from '../../atoms/_menu/menu-item/MenuItem';\nimport { AoaUserMenu, type AoaSetting } from '../../atoms/_menu/user-menu/UserMenu';\n\nexport interface AoaNavigationBarProps {\n  /**\n   * If your home page is not on the root url, use this prop to set the home path\n   */\n  readonly homePath?: string;\n  /**\n   * The name of the application that will be used for the Home tab\n   */\n  readonly name: string;\n  /**\n   * A list of all the pages and optional subpages to be shown in the menu\n   */\n  readonly pages: AoaPage[];\n  /**\n   * A list of all the settings to be shown in the menu\n   */\n  readonly settings: AoaSetting[];\n  /**\n   * Optional username to be displayed next to the settings menu\n   */\n  readonly username?: string;\n}\n\n/**\n * Constructs a navigation bar using pre-defined Rijks styling\n *\n * @param props - Props to pass to the navigation bar\n * @example\n * ```jsx\n * <AoaNavigationBar\n *  name=\"Demo App\"\n *  pages={\n *    [\n *      {\n *        label: \"Products\",\n *        to: \"/products\",\n *        subItems: [\n *          {\n *            label: \"Books\",\n *            to: \"/books\",\n *            icon: <BookIcon />\n *          }\n *        ]\n *      }\n *    ]\n *  }\n * settings={[{ label: \"Logout\", onClick: () => console.log(\"Logout\") }]}\n * />\n * ```\n */\n\nexport const AoaNavigationBar = memo((props: AoaNavigationBarProps): ReactNode => {\n  const [selectedPage, setSelectedPage] = useState<number>(0);\n\n  useEffect(() => {\n    const sessionStorage = window.sessionStorage.getItem('activeMenuTab');\n    if (sessionStorage) {\n      setSelectedPage(JSON.parse(sessionStorage));\n    }\n  }, []);\n\n  useEffect(() => {\n    window.sessionStorage.setItem('activeMenuTab', selectedPage.toString());\n  }, [selectedPage]);\n\n  return (\n    <AppBar\n      position='static'\n      sx={merge(\n        {\n          color: 'var(--color-text)',\n          backgroundColor: 'var(--color-rijks-yellow)',\n          height: '70px',\n          boxShadow: 'none'\n        },\n        FontNormalSxProps\n      )}\n    >\n      <Toolbar\n        role='menu'\n        sx={{\n          height: '100%',\n          overflowX: 'scroll',\n          scrollbarWidth: 'thin',\n          scrollbarColor: '#c5c5c5 #f6f6f6',\n\n          '::-webkit-scrollbar': {\n            overflow: 'visible',\n            borderRadius: '4px',\n            width: '6px',\n            height: '6px',\n            WebkitBorderRadius: '4px'\n          },\n\n          '::-webkit-scrollbar:hover': {\n            background: '#c5c5c5;'\n          },\n\n          '::-webkit-scrollbar-corner': {\n            background: 'rgba(0,0,0,0.5)'\n          },\n\n          '::-webkit-scrollbar-track': {\n            opacity: 0,\n            transition: 'all 0.5s',\n            WebkitTransition: 'all .5s'\n          },\n\n          '::-webkit-scrollbar-thumb': {\n            overflow: 'visible',\n            backgroundColor: '#c5c5c5;',\n            borderRadius: '4px',\n            border: '3px solid #f6f6f6'\n          },\n\n          '::-webkit-scrollbar-thumb:vertical': {\n            background: 'rgba(100, 100, 100, .5)',\n            WebkitBorderRadius: '100px'\n          },\n\n          '::-webkit-scrollbar-thumb:vertical:active': {\n            background: 'rgba(100, 100, 100, .61)',\n            WebkitBorderRadius: '100px'\n          }\n        }}\n        tabIndex={0}\n      >\n        <AoaMenuItem\n          index={0}\n          page={{ label: props.name, to: props.homePath ?? '/' }}\n          selectedPage={selectedPage}\n          setSelectedPage={setSelectedPage}\n        />\n        <Box sx={{ flexGrow: 1, display: 'flex', height: '100%' }}>\n          {props.pages.map((page, index) => (\n            <AoaMenuItem\n              index={index + 1}\n              key={index}\n              page={page}\n              selectedPage={selectedPage}\n              setSelectedPage={setSelectedPage}\n            />\n          ))}\n        </Box>\n        <AoaUserMenu settings={props.settings} username={props.username} />\n      </Toolbar>\n    </AppBar>\n  );\n});\n"],"names":["AoaNavigationBar","memo","props","selectedPage","setSelectedPage","useState","useEffect","sessionStorage","jsx","AppBar","merge","FontNormalSxProps","jsxs","Toolbar","AoaMenuItem","Box","page","index","AoaUserMenu"],"mappings":";;;;;;;AA0Da,MAAAA,IAAmBC,EAAK,CAACC,MAA4C;AAChF,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiB,CAAC;AAE1D,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAiB,OAAO,eAAe,QAAQ,eAAe;AACpE,IAAIA,KACcH,EAAA,KAAK,MAAMG,CAAc,CAAC;AAAA,EAE9C,GAAG,EAAE,GAELD,EAAU,MAAM;AACd,WAAO,eAAe,QAAQ,iBAAiBH,EAAa,UAAU;AAAA,EAAA,GACrE,CAACA,CAAY,CAAC,GAGf,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,IAAIC,EAAA;AAAA,QACF;AAAA,UACE,OAAO;AAAA,UACP,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,WAAW;AAAA,QACb;AAAA,QACAC;AAAA,MACF;AAAA,MAEA,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,YACF,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,gBAAgB;AAAA,YAChB,gBAAgB;AAAA,YAEhB,uBAAuB;AAAA,cACrB,UAAU;AAAA,cACV,cAAc;AAAA,cACd,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,oBAAoB;AAAA,YACtB;AAAA,YAEA,6BAA6B;AAAA,cAC3B,YAAY;AAAA,YACd;AAAA,YAEA,8BAA8B;AAAA,cAC5B,YAAY;AAAA,YACd;AAAA,YAEA,6BAA6B;AAAA,cAC3B,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,kBAAkB;AAAA,YACpB;AAAA,YAEA,6BAA6B;AAAA,cAC3B,UAAU;AAAA,cACV,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,QAAQ;AAAA,YACV;AAAA,YAEA,sCAAsC;AAAA,cACpC,YAAY;AAAA,cACZ,oBAAoB;AAAA,YACtB;AAAA,YAEA,6CAA6C;AAAA,cAC3C,YAAY;AAAA,cACZ,oBAAoB;AAAA,YAAA;AAAA,UAExB;AAAA,UACA,UAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,MAAM,EAAE,OAAOZ,EAAM,MAAM,IAAIA,EAAM,YAAY,IAAI;AAAA,gBACrD,cAAAC;AAAA,gBACA,iBAAAC;AAAA,cAAA;AAAA,YACF;AAAA,8BACCW,GAAI,EAAA,IAAI,EAAE,UAAU,GAAG,SAAS,QAAQ,QAAQ,UAC9C,UAAMb,EAAA,MAAM,IAAI,CAACc,GAAMC,MACtB,gBAAAT;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,OAAOG,IAAQ;AAAA,gBAEf,MAAAD;AAAA,gBACA,cAAAb;AAAA,gBACA,iBAAAC;AAAA,cAAA;AAAA,cAHKa;AAAA,YAKR,CAAA,GACH;AAAA,8BACCC,GAAY,EAAA,UAAUhB,EAAM,UAAU,UAAUA,EAAM,SAAU,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACnE;AAAA,EACF;AAEJ,CAAC;"}

package/dist/components/molecules/upload-button/UploadButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/upload-button/UploadButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,WAAW,oBAAoB,CAAC,KAAK,CAAE,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC;IAC1G;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAEpD;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,EACrC,WAAW,EACX,UAAU,EACV,QAAQ,EACR,EAAE,EACF,eAAe,EACf,IAAI,EACJ,KAAK,EACL,cAAc,EACd,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,2CAgBhD"}
+{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/upload-button/UploadButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,WAAW,oBAAoB,CAAC,KAAK,CAAE,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC;IAC1G;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAEpD;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,EACrC,WAAW,EACX,UAAU,EACV,QAAQ,EACR,EAAE,EACF,eAAe,EACf,IAAI,EACJ,KAAK,EACL,cAAc,EACd,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,2CAkBhD"}

package/dist/components/molecules/upload-button/UploadButton.js

@@ -1,35 +1,37 @@
-import { jsx as o } from "react/jsx-runtime";
-import { CircularProgress as f } from "@mui/material";
-import { m as g } from "../../../chunks/index.DJYQ_-zP.js";
-import { AoaButton as b } from "../../atoms/button/Button.js";
-function h({
-  isUploading: t,
-  isDisabled: e,
-  children: a,
-  sx: m,
+import { jsx as t } from "react/jsx-runtime";
+import { CircularProgress as g } from "@mui/material";
+import { l as f } from "../../../chunks/lodash.DOeeRDpT.js";
+import { AoaButton as u } from "../../atoms/button/Button.js";
+function B({
+  isUploading: o,
+  isDisabled: a,
+  children: e,
+  sx: i,
   isNeverDisabled: s,
-  type: i,
-  files: p,
-  setIsUploading: l,
+  type: m,
+  files: l,
+  setIsUploading: n,
   onClick: r,
-  ...n
+  ...p
 }) {
-  return /* @__PURE__ */ o(
-    b,
+  return /* @__PURE__ */ t(
+    u,
     {
-      ...n,
-      disabled: s ? !1 : !!e || t || Object.keys(p ?? []).length < 1,
-      onClick: (u) => {
-        l(!0), r == null || r(u);
+      ...p,
+      disabled: s ? !1 : !!a || o || Object.keys(l ?? []).length < 1,
+      loading: o,
+      loadingIndicator: /* @__PURE__ */ t(g, { "aria-label": "Uploading...", size: 20 }),
+      loadingPosition: "start",
+      onClick: (d) => {
+        n(!0), r == null || r(d);
       },
-      startIcon: t ? /* @__PURE__ */ o(f, { "aria-label": "Uploading...", size: 20 }) : null,
-      sx: g({ marginRight: 0 }, m),
-      type: i ?? "primary",
-      children: a
+      sx: f.merge({ marginRight: 0 }, i),
+      type: m ?? "primary",
+      children: e
     }
   );
 }
 export {
-  h as AoaUploadButton
+  B as AoaUploadButton
 };
 //# sourceMappingURL=UploadButton.js.map

package/dist/components/molecules/upload-button/UploadButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.js","sources":["../../../../src/components/molecules/upload-button/UploadButton.tsx"],"sourcesContent":["import { CircularProgress } from '@mui/material';\nimport merge from 'lodash.merge';\nimport type { PropsWithChildren } from 'react';\nimport { AoaButton, type AoaButtonProps } from '../../atoms/button/Button';\n\nexport interface AoaUploadButtonProps<TData> extends Omit<AoaButtonProps, 'disabled' | 'startIcon' | 'type'> {\n  /**\n   * The files that should be checked, required if {@link AoaUploadButtonProps.noFilesAllowed} is `false`\n   */\n  readonly files?: TData[];\n  /**\n   * Whether the button should be disabled\n   */\n  readonly isDisabled?: boolean;\n  /**\n   * Whether the button should never be disabled.\n   * - If `true` the button never goes into a `disabled` state, regardless of other conditions\n   * - If `false` the button will be disabled if there are no files provided\n   * (through {@link AoaUploadButtonProps.files | `files`}), or the upload progress is running\n   */\n  readonly isNeverDisabled?: boolean;\n\n  /**\n   * Whether the upload process is running. This controls whether a spinner is shown and the button is disabled\n   */\n  readonly isUploading: boolean;\n  /**\n   * The action to change {@link AoaUploadButtonProps.isUploading | `isUploading`} to `true`\n   *\n   * @param newState - The new state of the `isUploading` flag\n   */\n  setIsUploading(this: void, newState: boolean): void;\n\n  /**\n   * The type of the button. This _cannot_ be a `text` style button like the base {@link AoaButton}\n   */\n  readonly type?: 'primary' | 'secondary';\n}\n\nexport function AoaUploadButton<TData>({\n  isUploading,\n  isDisabled,\n  children,\n  sx,\n  isNeverDisabled,\n  type,\n  files,\n  setIsUploading,\n  onClick,\n  ...props\n}: PropsWithChildren<AoaUploadButtonProps<TData>>) {\n  return (\n    <AoaButton\n      {...props}\n      disabled={isNeverDisabled ? false : Boolean(isDisabled) || isUploading || Object.keys(files ?? []).length < 1}\n      onClick={(event) => {\n        setIsUploading(true);\n        onClick?.(event);\n      }}\n      startIcon={isUploading ? <CircularProgress aria-label='Uploading...' size={20} /> : null}\n      sx={merge({ marginRight: 0 }, sx)}\n      type={type ?? 'primary'}\n    >\n      {children}\n    </AoaButton>\n  );\n}\n"],"names":["AoaUploadButton","isUploading","isDisabled","children","sx","isNeverDisabled","type","files","setIsUploading","onClick","props","jsx","AoaButton","event","CircularProgress","merge"],"mappings":";;;;AAuCO,SAASA,EAAuB;AAAA,EACrC,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAmD;AAE/C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,UAAUL,IAAkB,KAAQ,EAAQH,KAAeD,KAAe,OAAO,KAAKM,KAAS,EAAE,EAAE,SAAS;AAAA,MAC5G,SAAS,CAACM,MAAU;AAClB,QAAAL,EAAe,EAAI,GACnBC,KAAA,QAAAA,EAAUI;AAAA,MACZ;AAAA,MACA,WAAWZ,IAAe,gBAAAU,EAAAG,GAAA,EAAiB,cAAW,gBAAe,MAAM,GAAI,CAAA,IAAK;AAAA,MACpF,IAAIC,EAAM,EAAE,aAAa,EAAA,GAAKX,CAAE;AAAA,MAChC,MAAME,KAAQ;AAAA,MAEb,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"UploadButton.js","sources":["../../../../src/components/molecules/upload-button/UploadButton.tsx"],"sourcesContent":["import { CircularProgress } from '@mui/material';\nimport { merge } from 'lodash';\nimport type { PropsWithChildren } from 'react';\nimport { AoaButton, type AoaButtonProps } from '../../atoms/button/Button';\n\nexport interface AoaUploadButtonProps<TData> extends Omit<AoaButtonProps, 'disabled' | 'startIcon' | 'type'> {\n  /**\n   * The files that should be checked, required if {@link AoaUploadButtonProps.noFilesAllowed} is `false`\n   */\n  readonly files?: TData[];\n  /**\n   * Whether the button should be disabled\n   */\n  readonly isDisabled?: boolean;\n  /**\n   * Whether the button should never be disabled.\n   * - If `true` the button never goes into a `disabled` state, regardless of other conditions\n   * - If `false` the button will be disabled if there are no files provided\n   * (through {@link AoaUploadButtonProps.files | `files`}), or the upload progress is running\n   */\n  readonly isNeverDisabled?: boolean;\n\n  /**\n   * Whether the upload process is running. This controls whether a spinner is shown and the button is disabled\n   */\n  readonly isUploading: boolean;\n  /**\n   * The action to change {@link AoaUploadButtonProps.isUploading | `isUploading`} to `true`\n   *\n   * @param newState - The new state of the `isUploading` flag\n   */\n  setIsUploading(this: void, newState: boolean): void;\n\n  /**\n   * The type of the button. This _cannot_ be a `text` style button like the base {@link AoaButton}\n   */\n  readonly type?: 'primary' | 'secondary';\n}\n\nexport function AoaUploadButton<TData>({\n  isUploading,\n  isDisabled,\n  children,\n  sx,\n  isNeverDisabled,\n  type,\n  files,\n  setIsUploading,\n  onClick,\n  ...props\n}: PropsWithChildren<AoaUploadButtonProps<TData>>) {\n  return (\n    <AoaButton\n      {...props}\n      disabled={isNeverDisabled ? false : Boolean(isDisabled) || isUploading || Object.keys(files ?? []).length < 1}\n      loading={isUploading}\n      loadingIndicator={<CircularProgress aria-label='Uploading...' size={20} />}\n      loadingPosition='start'\n      onClick={(event) => {\n        setIsUploading(true);\n        onClick?.(event);\n      }}\n      sx={merge({ marginRight: 0 }, sx)}\n      type={type ?? 'primary'}\n    >\n      {children}\n    </AoaButton>\n  );\n}\n"],"names":["AoaUploadButton","isUploading","isDisabled","children","sx","isNeverDisabled","type","files","setIsUploading","onClick","props","jsx","AoaButton","CircularProgress","event","merge"],"mappings":";;;;AAuCO,SAASA,EAAuB;AAAA,EACrC,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAmD;AAE/C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,UAAUL,IAAkB,KAAQ,EAAQH,KAAeD,KAAe,OAAO,KAAKM,KAAS,EAAE,EAAE,SAAS;AAAA,MAC5G,SAASN;AAAA,MACT,kBAAmB,gBAAAU,EAAAE,GAAA,EAAiB,cAAW,gBAAe,MAAM,IAAI;AAAA,MACxE,iBAAgB;AAAA,MAChB,SAAS,CAACC,MAAU;AAClB,QAAAN,EAAe,EAAI,GACnBC,KAAA,QAAAA,EAAUK;AAAA,MACZ;AAAA,MACA,IAAIC,EAAAA,MAAM,EAAE,aAAa,EAAA,GAAKX,CAAE;AAAA,MAChC,MAAME,KAAQ;AAAA,MAEb,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/contexts/TanstackFormContext.d.ts

@@ -0,0 +1,29 @@
+import { AoaFieldError } from '../components/molecules/field-error/FieldError';
+import { AoaFormError } from '../components/molecules/form-error/FormError';
+import { AoaFormModal } from '../components/molecules/form-modal/FormModal';
+export declare const aoaFieldContext: import('react').Context<import('@tanstack/form-core').AnyFieldApi>, aoaFormContext: import('react').Context<import('@tanstack/form-core').AnyFormApi>, useAoaFieldContext: <TData>() => import('@tanstack/form-core').FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useAoaFormContext: () => import('@tanstack/react-form').ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any>;
+export declare const useAoaAppForm: <TFormData, TOnMount extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import('@tanstack/form-core').FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>) => import('@tanstack/form-core').FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & import('@tanstack/react-form').ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & NoInfer<{
+    readonly AoaFormModal: typeof AoaFormModal;
+    readonly AoaFormError: typeof AoaFormError;
+}> & {
+    AppField: import('@tanstack/react-form').FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, NoInfer<{
+        readonly AoaFieldError: typeof AoaFieldError;
+    }>>;
+    AppForm: import('react').ComponentType<import('react').PropsWithChildren>;
+}, withAoaForm: <TFormData, TOnMount extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends Record<string, unknown> = {}>({ render, props, }: import('@tanstack/react-form').WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, {
+    readonly AoaFieldError: typeof AoaFieldError;
+}, {
+    readonly AoaFormModal: typeof AoaFormModal;
+    readonly AoaFormError: typeof AoaFormError;
+}, TRenderProps>) => (props: import('react').PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+    form: import('@tanstack/form-core').FormApi<[unknown] extends [TFormData] ? any : TFormData, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta> & import('@tanstack/react-form').ReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta> & NoInfer<{
+        readonly AoaFormModal: typeof AoaFormModal;
+        readonly AoaFormError: typeof AoaFormError;
+    }> & {
+        AppField: import('@tanstack/react-form').FieldComponent<[unknown] extends [TFormData] ? any : TFormData, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, NoInfer<{
+            readonly AoaFieldError: typeof AoaFieldError;
+        }>>;
+        AppForm: import('react').ComponentType<import('react').PropsWithChildren>;
+    };
+}>) => import("react").JSX.Element;
+//# sourceMappingURL=TanstackFormContext.d.ts.map

package/dist/contexts/TanstackFormContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanstackFormContext.d.ts","sourceRoot":"","sources":["../../src/contexts/TanstackFormContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAE5E,eAAO,MACS,eAAe,sEAChB,cAAc,qEACV,kBAAkB,2JACnB,iBAAiB,+HACP,CAAC;AAE7B,eAAO,MAAoB,aAAa;;;;;;;;GAAY,WAAW;;;;;;;;;;;;;;;kCAU7D,CAAC"}

package/dist/contexts/TanstackFormContext.js

@@ -0,0 +1,11 @@
+import "@tanstack/react-form";
+import { c as t, d as s, u as r, e as m, f as F, w as x } from "../chunks/FieldError.DAUtZvvC.js";
+export {
+  t as aoaFieldContext,
+  s as aoaFormContext,
+  r as useAoaAppForm,
+  m as useAoaFieldContext,
+  F as useAoaFormContext,
+  x as withAoaForm
+};
+//# sourceMappingURL=TanstackFormContext.js.map

package/dist/contexts/TanstackFormContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanstackFormContext.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { AoaRadioButton, type AoaRadioButtonProps } from './components/atoms/sel
 export { AoaSwitchButton, type AoaSwitchButtonProps } from './components/atoms/selection-buttons/switch-button/SwitchButton';
 export { AoaTable, type AoaTableColumns, type AoaTableData, type AoaTableProps, type AoaTableQueryOptions } from './components/atoms/table/Table';
 export { AoaZeroWidthSpace } from './components/atoms/zero-width-space/ZeroWidthSpace';
+export { AoaFieldError, type AoaFieldErrorProps } from './components/molecules/field-error/FieldError';
 export { AoaFileDropzone, type AoaDropableFile, type AoaFileDropzoneDataQas, type AoaFileDropzoneProps } from './components/molecules/file-dropzone/FileDropzone';
 export { AoaFileTable, type AoaFileTableProps } from './components/molecules/file-table/FileTable';
 export { AoaFormError, type AoaFormErrorProps } from './components/molecules/form-error/FormError';
@@ -21,4 +22,5 @@ export { AoaModal, type AoaModalProps, type AoaModalQAs } from './components/mol
 export { AoaNavigationBar, type AoaNavigationBarProps } from './components/molecules/navigation-bar/NavigationBar';
 export { AoaUploadButton, type AoaUploadButtonProps } from './components/molecules/upload-button/UploadButton';
 export { AoaContentPage as AoaContentTemplate, type AoaContentPageProps as AoaContentTemplateProps } from './components/organisms/content-page/ContentPage';
+export { aoaFieldContext, aoaFormContext, useAoaAppForm, useAoaFieldContext, useAoaFormContext, withAoaForm } from './contexts/TanstackFormContext';
 //# sourceMappingURL=index.d.ts.map