@rws-aoa/react-library 3.6.2 → 3.6.4

package/dist/components/molecules/file-dropzone/FileDropzone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAe,KAAK,MAAM,EAAsC,MAAM,gBAAgB,CAAC;AAI9F,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,aAAa,IAAI,MAAM,GAAG;IACnE,gCAAgC;IAChC,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,aAAa,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC;IACvG,sFAAsF;IACtF,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACjC,+FAA+F;IAC/F,cAAc,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;IAC1C,qGAAqG;IACrG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,iBAAiB,CAAC,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,CAAC;IAC/C,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAS,aAAa,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC,EACjG,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,2CA2FxE"}
+{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAe,KAAK,MAAM,EAAsC,MAAM,gBAAgB,CAAC;AAI9F,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,MAAM,IAAI,MAAM,GAAG;IAC5D;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC;IAChG;;OAEG;IACH,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB;;;;;OAKG;IACH,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC;;OAEG;IACH,iBAAiB,CAAC,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,CAAC;IAC/C;;;;;OAKG;IACH,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC,EAC1F,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,2CA2FxE"}

package/dist/components/molecules/file-dropzone/FileDropzone.js

@@ -1,33 +1,32 @@
 import { jsxs as y, jsx as c } from "react/jsx-runtime";
-import { Box as f } from "@mui/material";
-import { useCallback as D } from "react";
-import { useDropzone as U } from "react-dropzone";
-import { toast as x } from "react-toastify";
+import { Box as x } from "@mui/material";
+import { useCallback as f } from "react";
+import { useDropzone as D } from "react-dropzone";
+import { toast as g } from "react-toastify";
 import { isExtensionAllowed as W } from "../../../_constants.js";
 function A(e) {
-  var r, d;
-  function o() {
-    x(e.maxUploadSizeExceededWarning ?? `U heeft meer dan ${e.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`, {
+  var d, r;
+  const o = f(() => {
+    g(e.maxUploadSizeExceededWarning ?? `U heeft meer dan ${e.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`, {
       type: "warning"
     });
-  }
-  const g = D(
+  }, [e.maxUploadFiles, e.maxUploadSizeExceededWarning]), u = f(
     (a, i) => {
-      var s, m;
-      i.length > 0 && (i.every((n) => n.errors.every((l) => l.code === "too-many-files")) ? o() : x(e.extensionWarning, { type: "warning" }));
+      var m, s;
+      i.length > 0 && (i.every((n) => n.errors.every((l) => l.code === "too-many-files")) ? o() : g(e.extensionWarning, { type: "warning" }));
       const t = [...e.currentFiles];
       for (const n of a) {
-        const l = t.findIndex((b) => b.file.name === n.name);
-        l !== -1 ? t.splice(l, 1, {
+        const l = t.findIndex((U) => U.file.name === n.name);
+        l === -1 ? t.push({ file: n, ...(m = e.perFileProperties) == null ? void 0 : m.call(e, n) }) : t.splice(l, 1, {
           file: n,
-          ...((s = e.perFileProperties) == null ? void 0 : s.call(e, n)) ?? {}
-        }) : t.push({ file: n, ...((m = e.perFileProperties) == null ? void 0 : m.call(e, n)) ?? {} });
+          ...(s = e.perFileProperties) == null ? void 0 : s.call(e, n)
+        });
       }
       e.maxUploadFiles && t.length > e.maxUploadFiles ? o() : e.storeFiles(t);
     },
-    [e.extensionWarning, e.currentFiles, e.perFileProperties, e.storeFiles]
+    [o, e]
   );
-  function u(a) {
+  function F(a) {
     var i;
     return (i = e.customFileValidator) != null && i.call(e, a) ? {
       code: "custom-validator",
@@ -37,27 +36,27 @@ function A(e) {
       message: e.extensionWarning
     };
   }
-  const { getRootProps: F, getInputProps: h } = U({
-    onDrop: g,
+  const { getRootProps: h, getInputProps: b } = D({
+    onDrop: u,
     disabled: e.isDisabled,
     accept: e.extensions,
     maxFiles: e.maxUploadFiles,
-    validator: u
+    validator: F
   });
   return /* @__PURE__ */ y(
-    f,
+    x,
     {
-      ...F(),
+      ...h(),
+      "data-qa": ((d = e.dataQas) == null ? void 0 : d.root) ?? "file-dropzone-root",
       sx: {
         "&:focus": {
           outline: "none"
         }
       },
-      "data-qa": ((r = e.dataQas) == null ? void 0 : r.root) ?? "file-dropzone-root",
       children: [
-        /* @__PURE__ */ c("input", { ...h(), "data-qa": ((d = e.dataQas) == null ? void 0 : d.input) ?? "file-drop-input" }),
+        /* @__PURE__ */ c("input", { ...b(), "data-qa": ((r = e.dataQas) == null ? void 0 : r.input) ?? "file-drop-input" }),
         /* @__PURE__ */ c(
-          f,
+          x,
           {
             sx: {
               backgroundColor: "var(--color-rijks-grey-2)",

package/dist/components/molecules/file-dropzone/FileDropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropzone.js","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\nimport { Box } from \"@mui/material\";\nimport type { NonNullObject } from \"@sapphire/utilities\";\nimport { useCallback, type PropsWithChildren, type ReactNode } from \"react\";\nimport { useDropzone, type Accept, type FileError, type FileRejection } from \"react-dropzone\";\nimport { toast } from \"react-toastify\";\nimport { isExtensionAllowed } from \"../../../_constants\";\n\nexport type AoaDropableFile<TProps extends NonNullObject> = TProps & {\n  /** The file that was dropped */\n  file: File;\n};\n\nexport interface AoaFileDropzoneDataQas {\n  /** The data-qa tag for the root element */\n  root: string;\n  /** The data-qa tag for the input */\n  input: string;\n}\n\nexport interface AoaFileDropzoneProps<TProps extends NonNullObject, TFile extends AoaDropableFile<TProps>> {\n  /** The current set of files that are already dropped, coming from Redux or Zustand */\n  currentFiles: TFile[];\n  /**\n   * The function to overwrite the files in the client store.\n   * This should overwrite all files, not merge with current, which is handled in this component\n   * @param files - The new set of files to be stored\n   */\n  storeFiles(files: TFile[]): void;\n  /** The regular expression that validates if the dropped file should be accepted or rejected */\n  extensionRegex: RegExp;\n  /** The extension map to be passed to the dropzone component */\n  extensions: Accept;\n  /** The toast warning message to be shown when a file is rejection */\n  extensionWarning: string;\n  /**\n   * The toast warning message to be shown when the files to be uploaded exceeds the maximum,\n   * required if {@link AoaFileDropzoneProps.maxUploadFiles maxUploadFiles} is specified.\n   */\n  maxUploadSizeExceededWarning?: string;\n  /** The children to show inside the box where files can be dropped */\n  fileDropChildren?: ReactNode;\n  /**\n   * A custom function that can perform extra checks when validating files.\n   * This should return `true` if the file should be rejected or `false` if it should be accepted\n   * @param file - The file to be validated\n   */\n  customFileValidator?(file: File): boolean;\n  /** A maximum count of files that should be accepted, if exceeded no save action will be performed */\n  maxUploadFiles?: number;\n  /** Additional properties to set for every file that is to be saved */\n  perFileProperties?(acceptedFile: File): TProps;\n  /** Whether the dropzone should be disabled or not */\n  isDisabled?: boolean;\n  /** data-qa tags for testing */\n  dataQas?: AoaFileDropzoneDataQas;\n}\n\nexport function AoaFileDropzone<TProps extends NonNullObject, TFile extends AoaDropableFile<TProps>>(\n  props: Readonly<PropsWithChildren<AoaFileDropzoneProps<TProps, TFile>>>\n) {\n  function showMaxUploadFilesWarning() {\n    toast(props.maxUploadSizeExceededWarning ?? `U heeft meer dan ${props.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`, {\n      type: \"warning\"\n    });\n  }\n\n  const handleDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      if (fileRejections.length > 0) {\n        if (fileRejections.every((file) => file.errors.every((error) => error.code === \"too-many-files\"))) {\n          showMaxUploadFilesWarning();\n        } else {\n          toast(props.extensionWarning, { type: \"warning\" });\n        }\n      }\n\n      const filesClone = [...props.currentFiles];\n      for (const acceptedFile of acceptedFiles) {\n        const existingFileIndex = filesClone.findIndex((file) => file.file.name === acceptedFile.name);\n        if (existingFileIndex !== -1) {\n          filesClone.splice(existingFileIndex, 1, {\n            file: acceptedFile,\n            ...(props.perFileProperties?.(acceptedFile) ?? {})\n          } as TFile & TProps);\n        } else {\n          filesClone.push({ file: acceptedFile, ...(props.perFileProperties?.(acceptedFile) ?? {}) } as TFile & TProps);\n        }\n      }\n\n      if (props.maxUploadFiles && filesClone.length > props.maxUploadFiles) {\n        showMaxUploadFilesWarning();\n      } else {\n        props.storeFiles(filesClone);\n      }\n    },\n    [props.extensionWarning, props.currentFiles, props.perFileProperties, props.storeFiles]\n  );\n\n  function fileValidator(file: File): FileError | null {\n    if (props.customFileValidator?.(file)) {\n      return {\n        code: \"custom-validator\",\n        message: props.extensionWarning\n      };\n    }\n\n    if (isExtensionAllowed(props.extensionRegex, file.name)) {\n      return null;\n    }\n\n    return {\n      code: \"name-not-ok\",\n      message: props.extensionWarning\n    };\n  }\n\n  const { getRootProps, getInputProps } = useDropzone({\n    onDrop: handleDrop,\n    disabled: props.isDisabled,\n    accept: props.extensions,\n    maxFiles: props.maxUploadFiles,\n    validator: fileValidator\n  });\n\n  return (\n    <Box\n      {...getRootProps()}\n      sx={{\n        \"&:focus\": {\n          outline: \"none\"\n        }\n      }}\n      data-qa={props.dataQas?.root ?? \"file-dropzone-root\"}\n    >\n      <input {...getInputProps()} data-qa={props.dataQas?.input ?? \"file-drop-input\"} />\n      <Box\n        sx={{\n          backgroundColor: \"var(--color-rijks-grey-2)\",\n          borderWidth: 1,\n          borderStyle: \"dashed\",\n          borderColor: \"black\",\n          marginBottom: 0.5,\n          textAlign: \"center\"\n        }}\n      >\n        {props.fileDropChildren}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["AoaFileDropzone","props","showMaxUploadFilesWarning","toast","handleDrop","useCallback","acceptedFiles","fileRejections","file","error","filesClone","acceptedFile","existingFileIndex","_a","_b","fileValidator","isExtensionAllowed","getRootProps","getInputProps","useDropzone","jsxs","Box","jsx"],"mappings":";;;;;;AA0DO,SAASA,EACdC,GACA;;AACA,WAASC,IAA4B;AACnC,IAAAC,EAAMF,EAAM,gCAAgC,oBAAoBA,EAAM,cAAc,sDAAsD;AAAA,MACxI,MAAM;AAAA,IAAA,CACP;AAAA,EACH;AAEA,QAAMG,IAAaC;AAAA,IACjB,CAACC,GAAuBC,MAAoC;;AACtD,MAAAA,EAAe,SAAS,MACtBA,EAAe,MAAM,CAACC,MAASA,EAAK,OAAO,MAAM,CAACC,MAAUA,EAAM,SAAS,gBAAgB,CAAC,IACpEP,MAE1BC,EAAMF,EAAM,kBAAkB,EAAE,MAAM,UAAW,CAAA;AAIrD,YAAMS,IAAa,CAAC,GAAGT,EAAM,YAAY;AACzC,iBAAWU,KAAgBL,GAAe;AAClC,cAAAM,IAAoBF,EAAW,UAAU,CAACF,MAASA,EAAK,KAAK,SAASG,EAAa,IAAI;AAC7F,QAAIC,MAAsB,KACbF,EAAA,OAAOE,GAAmB,GAAG;AAAA,UACtC,MAAMD;AAAA,UACN,KAAIE,IAAAZ,EAAM,sBAAN,gBAAAY,EAAA,KAAAZ,GAA0BU,OAAiB,CAAC;AAAA,QAAA,CAC/B,IAERD,EAAA,KAAK,EAAE,MAAMC,GAAc,KAAIG,IAAAb,EAAM,sBAAN,gBAAAa,EAAA,KAAAb,GAA0BU,OAAiB,CAAC,EAAA,CAAsB;AAAA,MAEhH;AAEA,MAAIV,EAAM,kBAAkBS,EAAW,SAAST,EAAM,iBAC1BC,MAE1BD,EAAM,WAAWS,CAAU;AAAA,IAE/B;AAAA,IACA,CAACT,EAAM,kBAAkBA,EAAM,cAAcA,EAAM,mBAAmBA,EAAM,UAAU;AAAA,EAAA;AAGxF,WAASc,EAAcP,GAA8B;;AAC/C,YAAAK,IAAAZ,EAAM,wBAAN,QAAAY,EAAA,KAAAZ,GAA4BO,KACvB;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IAAA,IAIfe,EAAmBf,EAAM,gBAAgBO,EAAK,IAAI,IAC7C,OAGF;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IAAA;AAAA,EAEnB;AAEA,QAAM,EAAE,cAAAgB,GAAc,eAAAC,EAAc,IAAIC,EAAY;AAAA,IAClD,QAAQf;AAAA,IACR,UAAUH,EAAM;AAAA,IAChB,QAAQA,EAAM;AAAA,IACd,UAAUA,EAAM;AAAA,IAChB,WAAWc;AAAA,EAAA,CACZ;AAGC,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAa;AAAA,MACjB,IAAI;AAAA,QACF,WAAW;AAAA,UACT,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,aAASJ,IAAAZ,EAAM,YAAN,gBAAAY,EAAe,SAAQ;AAAA,MAEhC,UAAA;AAAA,QAAC,gBAAAS,EAAA,SAAA,EAAO,GAAGJ,EAAc,GAAG,aAASJ,IAAAb,EAAM,YAAN,gBAAAa,EAAe,UAAS,mBAAmB;AAAA,QAChF,gBAAAQ;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,cAAc;AAAA,cACd,WAAW;AAAA,YACb;AAAA,YAEC,UAAMpB,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"FileDropzone.js","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport { useCallback, type PropsWithChildren, type ReactNode } from \"react\";\nimport { useDropzone, type Accept, type FileError, type FileRejection } from \"react-dropzone\";\nimport { toast } from \"react-toastify\";\nimport { isExtensionAllowed } from \"../../../_constants\";\n\nexport type AoaDropableFile<TProps extends object> = TProps & {\n  /**\n   * The file that was dropped\n   */\n  file: File;\n};\n\nexport interface AoaFileDropzoneDataQas {\n  /**\n   * The data-qa tag for the input\n   */\n  input: string;\n  /**\n   * The data-qa tag for the root element\n   */\n  root: string;\n}\n\nexport interface AoaFileDropzoneProps<TProps extends object, TFile extends AoaDropableFile<TProps>> {\n  /**\n   * The current set of files that are already dropped, coming from Redux or Zustand\n   */\n  currentFiles: TFile[];\n  /**\n   * A custom function that can perform extra checks when validating files.\n   * This should return `true` if the file should be rejected or `false` if it should be accepted\n   *\n   * @param file - The file to be validated\n   */\n  customFileValidator?(file: File): boolean;\n  /**\n   * data-qa tags for testing\n   */\n  dataQas?: AoaFileDropzoneDataQas;\n  /**\n   * The regular expression that validates if the dropped file should be accepted or rejected\n   */\n  extensionRegex: RegExp;\n  /**\n   * The toast warning message to be shown when a file is rejection\n   */\n  extensionWarning: string;\n  /**\n   * The extension map to be passed to the dropzone component\n   */\n  extensions: Accept;\n  /**\n   * The children to show inside the box where files can be dropped\n   */\n  fileDropChildren?: ReactNode;\n  /**\n   * Whether the dropzone should be disabled or not\n   */\n  isDisabled?: boolean;\n  /**\n   * A maximum count of files that should be accepted, if exceeded no save action will be performed\n   */\n  maxUploadFiles?: number;\n  /**\n   * The toast warning message to be shown when the files to be uploaded exceeds the maximum,\n   * required if {@link AoaFileDropzoneProps.maxUploadFiles | maxUploadFiles} is specified.\n   */\n  maxUploadSizeExceededWarning?: string;\n  /**\n   * Additional properties to set for every file that is to be saved\n   */\n  perFileProperties?(acceptedFile: File): TProps;\n  /**\n   * The function to overwrite the files in the client store.\n   * This should overwrite all files, not merge with current, which is handled in this component\n   *\n   * @param files - The new set of files to be stored\n   */\n  storeFiles(files: TFile[]): void;\n}\n\nexport function AoaFileDropzone<TProps extends object, TFile extends AoaDropableFile<TProps>>(\n  props: Readonly<PropsWithChildren<AoaFileDropzoneProps<TProps, TFile>>>\n) {\n  const showMaxUploadFilesWarning = useCallback(() => {\n    toast(props.maxUploadSizeExceededWarning ?? `U heeft meer dan ${props.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`, {\n      type: \"warning\"\n    });\n  }, [props.maxUploadFiles, props.maxUploadSizeExceededWarning]);\n\n  const handleDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      if (fileRejections.length > 0) {\n        if (fileRejections.every((file) => file.errors.every((error) => error.code === \"too-many-files\"))) {\n          showMaxUploadFilesWarning();\n        } else {\n          toast(props.extensionWarning, { type: \"warning\" });\n        }\n      }\n\n      const filesClone = [...props.currentFiles];\n      for (const acceptedFile of acceptedFiles) {\n        const existingFileIndex = filesClone.findIndex((file) => file.file.name === acceptedFile.name);\n        if (existingFileIndex === -1) {\n          filesClone.push({ file: acceptedFile, ...props.perFileProperties?.(acceptedFile) } as TFile & TProps);\n        } else {\n          filesClone.splice(existingFileIndex, 1, {\n            file: acceptedFile,\n            ...props.perFileProperties?.(acceptedFile)\n          } as TFile & TProps);\n        }\n      }\n\n      if (props.maxUploadFiles && filesClone.length > props.maxUploadFiles) {\n        showMaxUploadFilesWarning();\n      } else {\n        props.storeFiles(filesClone);\n      }\n    },\n    [showMaxUploadFilesWarning, props]\n  );\n\n  function fileValidator(file: File): FileError | null {\n    if (props.customFileValidator?.(file)) {\n      return {\n        code: \"custom-validator\",\n        message: props.extensionWarning\n      };\n    }\n\n    if (isExtensionAllowed(props.extensionRegex, file.name)) {\n      return null;\n    }\n\n    return {\n      code: \"name-not-ok\",\n      message: props.extensionWarning\n    };\n  }\n\n  const { getRootProps, getInputProps } = useDropzone({\n    onDrop: handleDrop,\n    disabled: props.isDisabled,\n    accept: props.extensions,\n    maxFiles: props.maxUploadFiles,\n    validator: fileValidator\n  });\n\n  return (\n    <Box\n      {...getRootProps()}\n      data-qa={props.dataQas?.root ?? \"file-dropzone-root\"}\n      sx={{\n        \"&:focus\": {\n          outline: \"none\"\n        }\n      }}\n    >\n      <input {...getInputProps()} data-qa={props.dataQas?.input ?? \"file-drop-input\"} />\n      <Box\n        sx={{\n          backgroundColor: \"var(--color-rijks-grey-2)\",\n          borderWidth: 1,\n          borderStyle: \"dashed\",\n          borderColor: \"black\",\n          marginBottom: 0.5,\n          textAlign: \"center\"\n        }}\n      >\n        {props.fileDropChildren}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["AoaFileDropzone","props","showMaxUploadFilesWarning","useCallback","toast","handleDrop","acceptedFiles","fileRejections","file","error","filesClone","acceptedFile","existingFileIndex","_a","_b","fileValidator","isExtensionAllowed","getRootProps","getInputProps","useDropzone","jsxs","Box","jsx"],"mappings":";;;;;;AAkFO,SAASA,EACdC,GACA;;AACM,QAAAC,IAA4BC,EAAY,MAAM;AAClD,IAAAC,EAAMH,EAAM,gCAAgC,oBAAoBA,EAAM,cAAc,sDAAsD;AAAA,MACxI,MAAM;AAAA,IAAA,CACP;AAAA,KACA,CAACA,EAAM,gBAAgBA,EAAM,4BAA4B,CAAC,GAEvDI,IAAaF;AAAA,IACjB,CAACG,GAAuBC,MAAoC;;AACtD,MAAAA,EAAe,SAAS,MACtBA,EAAe,MAAM,CAACC,MAASA,EAAK,OAAO,MAAM,CAACC,MAAUA,EAAM,SAAS,gBAAgB,CAAC,IACpEP,EAAA,IAE1BE,EAAMH,EAAM,kBAAkB,EAAE,MAAM,WAAW;AAIrD,YAAMS,IAAa,CAAC,GAAGT,EAAM,YAAY;AACzC,iBAAWU,KAAgBL,GAAe;AAClC,cAAAM,IAAoBF,EAAW,UAAU,CAACF,MAASA,EAAK,KAAK,SAASG,EAAa,IAAI;AAC7F,QAAIC,MAAsB,KACbF,EAAA,KAAK,EAAE,MAAMC,GAAc,IAAGE,IAAAZ,EAAM,sBAAN,gBAAAY,EAAA,KAAAZ,GAA0BU,IAAiC,IAEzFD,EAAA,OAAOE,GAAmB,GAAG;AAAA,UACtC,MAAMD;AAAA,UACN,IAAGG,IAAAb,EAAM,sBAAN,gBAAAa,EAAA,KAAAb,GAA0BU;AAAA,QAAY,CACxB;AAAA,MACrB;AAGF,MAAIV,EAAM,kBAAkBS,EAAW,SAAST,EAAM,iBAC1BC,EAAA,IAE1BD,EAAM,WAAWS,CAAU;AAAA,IAE/B;AAAA,IACA,CAACR,GAA2BD,CAAK;AAAA,EACnC;AAEA,WAASc,EAAcP,GAA8B;;AAC/C,YAAAK,IAAAZ,EAAM,wBAAN,QAAAY,EAAA,KAAAZ,GAA4BO,KACvB;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IACjB,IAGEe,EAAmBf,EAAM,gBAAgBO,EAAK,IAAI,IAC7C,OAGF;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IACjB;AAAA,EAAA;AAGF,QAAM,EAAE,cAAAgB,GAAc,eAAAC,EAAc,IAAIC,EAAY;AAAA,IAClD,QAAQd;AAAA,IACR,UAAUJ,EAAM;AAAA,IAChB,QAAQA,EAAM;AAAA,IACd,UAAUA,EAAM;AAAA,IAChB,WAAWc;AAAA,EAAA,CACZ;AAGC,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAa;AAAA,MACjB,aAASJ,IAAAZ,EAAM,YAAN,gBAAAY,EAAe,SAAQ;AAAA,MAChC,IAAI;AAAA,QACF,WAAW;AAAA,UACT,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAS,EAAA,SAAA,EAAO,GAAGJ,EAAc,GAAG,aAASJ,IAAAb,EAAM,YAAN,gBAAAa,EAAe,UAAS,mBAAmB;AAAA,QAChF,gBAAAQ;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,cAAc;AAAA,cACd,WAAW;AAAA,YACb;AAAA,YAEC,UAAMpB,EAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACT;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/molecules/file-table/FileTable.d.ts

@@ -1,20 +1,28 @@
 import { DataGridProps, GridColDef, GridValidRowModel } from '@mui/x-data-grid';
-import { NonNullObject } from '../../../_constants';
-
 export interface AoaFileTableProps<T extends GridValidRowModel = any> {
-    /** The TableData object to be displayed in the table */
-    data: T[];
-    /** The column structure to display the data */
+    /**
+     * The column structure to display the data
+     */
     columns: GridColDef<T>[];
-    /** Data-qa tag for E2E test purposes */
+    /**
+     * The TableData object to be displayed in the table
+     */
+    data: T[];
+    /**
+     * Data-qa tag for E2E test purposes
+     */
     "data-qa"?: string;
-    /** Sets the initial sortModel in case the required sorting differs from the back-end's default sorting */
+    /**
+     * Overwrite a safe selection of the {@link DataGrid} properties
+     */
+    dataGridOverridableProps?: Pick<DataGridProps<T>, "getRowId" | "ignoreDiacritics">;
+    /**
+     * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting
+     */
     initialSort?: {
         field: string;
         sort: "asc" | "desc";
     };
-    /** Overwrite a safe selection of the {@link DataGrid} properties */
-    dataGridOverridableProps?: Pick<DataGridProps<T>, "ignoreDiacritics" | "getRowId">;
 }
-export declare function AoaFileTable<T extends NonNullObject = any>({ data, columns, initialSort, dataGridOverridableProps, "data-qa": dataQa }: Readonly<AoaFileTableProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function AoaFileTable<T extends object = any>({ data, columns, initialSort, dataGridOverridableProps, "data-qa": dataQa }: Readonly<AoaFileTableProps<T>>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FileTable.d.ts.map

package/dist/components/molecules/file-table/FileTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileTable.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-table/FileTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,GAAG,GAAG;IAClE,wDAAwD;IACxD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,+CAA+C;IAC/C,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0GAA0G;IAC1G,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;KACtB,CAAC;IACF,oEAAoE;IACpE,wBAAwB,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,GAAG,UAAU,CAAC,CAAC;CACpF;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,EAAE,EAC1D,IAAI,EACJ,OAAO,EACP,WAAW,EACX,wBAAwB,EACxB,SAAS,EAAE,MAAM,EAClB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,2CAchC"}
+{"version":3,"file":"FileTable.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-table/FileTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGrF,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,GAAG,GAAG;IAClE;;OAEG;IACH,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,wBAAwB,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,kBAAkB,CAAC,CAAC;IACnF;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;KACtB,CAAC;CACH;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,EAAE,EACnD,IAAI,EACJ,OAAO,EACP,WAAW,EACX,wBAAwB,EACxB,SAAS,EAAE,MAAM,EAClB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,2CAchC"}

package/dist/components/molecules/file-table/FileTable.js

@@ -10,15 +10,15 @@ function d({
   return /* @__PURE__ */ r(
     i,
     {
-      mode: "client",
+      columns: a,
       data: {
         items: t ?? [],
         totalItems: t.length ?? 0
       },
-      initialSort: e,
       "data-qa": m,
-      columns: a,
-      dataGridOverridableProps: o
+      dataGridOverridableProps: o,
+      initialSort: e,
+      mode: "client"
     }
   );
 }

package/dist/components/molecules/file-table/FileTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTable.js","sources":["../../../../src/components/molecules/file-table/FileTable.tsx"],"sourcesContent":["import type { DataGridProps, GridColDef, GridValidRowModel } from \"@mui/x-data-grid\";\nimport type { NonNullObject } from \"../../../_constants\";\nimport { AoaTable } from \"../../atoms/table/Table\";\n\nexport interface AoaFileTableProps<T extends GridValidRowModel = any> {\n  /** The TableData object to be displayed in the table */\n  data: T[];\n  /** The column structure to display the data */\n  columns: GridColDef<T>[];\n  /** Data-qa tag for E2E test purposes */\n  \"data-qa\"?: string;\n  /** Sets the initial sortModel in case the required sorting differs from the back-end's default sorting */\n  initialSort?: {\n    field: string;\n    sort: \"asc\" | \"desc\";\n  };\n  /** Overwrite a safe selection of the {@link DataGrid} properties */\n  dataGridOverridableProps?: Pick<DataGridProps<T>, \"ignoreDiacritics\" | \"getRowId\">;\n}\n\nexport function AoaFileTable<T extends NonNullObject = any>({\n  data,\n  columns,\n  initialSort,\n  dataGridOverridableProps,\n  \"data-qa\": dataQa\n}: Readonly<AoaFileTableProps<T>>) {\n  return (\n    <AoaTable<T>\n      mode=\"client\"\n      data={{\n        items: data ?? [],\n        totalItems: data.length ?? 0\n      }}\n      initialSort={initialSort}\n      data-qa={dataQa}\n      columns={columns}\n      dataGridOverridableProps={dataGridOverridableProps}\n    />\n  );\n}\n"],"names":["AoaFileTable","data","columns","initialSort","dataGridOverridableProps","dataQa","jsx","AoaTable"],"mappings":";;AAoBO,SAASA,EAA4C;AAAA,EAC1D,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,WAAWC;AACb,GAAmC;AAE/B,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM;AAAA,QACJ,OAAON,KAAQ,CAAC;AAAA,QAChB,YAAYA,EAAK,UAAU;AAAA,MAC7B;AAAA,MACA,aAAAE;AAAA,MACA,WAASE;AAAA,MACT,SAAAH;AAAA,MACA,0BAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"FileTable.js","sources":["../../../../src/components/molecules/file-table/FileTable.tsx"],"sourcesContent":["import type { DataGridProps, GridColDef, GridValidRowModel } from \"@mui/x-data-grid\";\nimport { AoaTable } from \"../../atoms/table/Table\";\n\nexport interface AoaFileTableProps<T extends GridValidRowModel = any> {\n  /**\n   * The column structure to display the data\n   */\n  columns: GridColDef<T>[];\n  /**\n   * The TableData object to be displayed in the table\n   */\n  data: T[];\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  \"data-qa\"?: string;\n  /**\n   * Overwrite a safe selection of the {@link DataGrid} properties\n   */\n  dataGridOverridableProps?: Pick<DataGridProps<T>, \"getRowId\" | \"ignoreDiacritics\">;\n  /**\n   * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting\n   */\n  initialSort?: {\n    field: string;\n    sort: \"asc\" | \"desc\";\n  };\n}\n\nexport function AoaFileTable<T extends object = any>({\n  data,\n  columns,\n  initialSort,\n  dataGridOverridableProps,\n  \"data-qa\": dataQa\n}: Readonly<AoaFileTableProps<T>>) {\n  return (\n    <AoaTable<T>\n      columns={columns}\n      data={{\n        items: data ?? [],\n        totalItems: data.length ?? 0\n      }}\n      data-qa={dataQa}\n      dataGridOverridableProps={dataGridOverridableProps}\n      initialSort={initialSort}\n      mode=\"client\"\n    />\n  );\n}\n"],"names":["AoaFileTable","data","columns","initialSort","dataGridOverridableProps","dataQa","jsx","AoaTable"],"mappings":";;AA6BO,SAASA,EAAqC;AAAA,EACnD,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,WAAWC;AACb,GAAmC;AAE/B,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,MAAM;AAAA,QACJ,OAAOD,KAAQ,CAAC;AAAA,QAChB,YAAYA,EAAK,UAAU;AAAA,MAC7B;AAAA,MACA,WAASI;AAAA,MACT,0BAAAD;AAAA,MACA,aAAAD;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,EACP;AAEJ;"}

package/dist/components/molecules/form-error/FormError.d.ts

@@ -1,8 +1,7 @@
 import { DeepKeys, DeepValue, FieldApi, Validator } from '@tanstack/react-form';
-
 export interface AoaFormErrorProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
-    readonly field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
     readonly "data-qa"?: string;
+    readonly field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
 }
 export declare function AoaFormError<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ field, "data-qa": dataQa }: AoaFormErrorProps<TParentData, TName, TFieldValidator, TFormValidator, TData>): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=FormError.d.ts.map

package/dist/components/molecules/form-error/FormError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormError.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/form-error/FormError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGrF,MAAM,WAAW,iBAAiB,CAChC,WAAW,EACX,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,EACnC,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC;IAE3E,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;IACrF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAC1B,WAAW,EACX,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,EACnC,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAC3E,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,kDAW5G"}
+{"version":3,"file":"FormError.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/form-error/FormError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGrF,MAAM,WAAW,iBAAiB,CAChC,WAAW,EACX,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,EACnC,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC;IAE3E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;CACtF;AAED,wBAAgB,YAAY,CAC1B,WAAW,EACX,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,EACnC,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAC3E,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,kDAW5G"}

package/dist/components/molecules/form-error/FormError.js

@@ -3,7 +3,7 @@ import { AoaNotification as s } from "../../atoms/notification/Notification.js";
 function i({ field: r, "data-qa": o }) {
   if (r.state.meta.isTouched && r.state.meta.errors.length) {
     const t = r.state.meta.errors.at(0), e = typeof t == "string" ? t : "";
-    return e ? /* @__PURE__ */ a(s, { message: e, severity: "error", "data-qa": o ?? "form-error" }) : null;
+    return e ? /* @__PURE__ */ a(s, { "data-qa": o ?? "form-error", message: e, severity: "error" }) : null;
   }
   return null;
 }

package/dist/components/molecules/form-error/FormError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormError.js","sources":["../../../../src/components/molecules/form-error/FormError.tsx"],"sourcesContent":["import type { DeepKeys, DeepValue, FieldApi, Validator } from \"@tanstack/react-form\";\nimport { AoaNotification } from \"../../atoms/notification/Notification\";\n\nexport interface AoaFormErrorProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,\n  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>\n> {\n  readonly field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;\n  readonly \"data-qa\"?: string;\n}\n\nexport function AoaFormError<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,\n  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>\n>({ field, \"data-qa\": dataQa }: AoaFormErrorProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {\n  if (field.state.meta.isTouched && field.state.meta.errors.length) {\n    const message = field.state.meta.errors.at(0);\n    const stringMessage = typeof message === \"string\" ? message : \"\";\n\n    if (!stringMessage) return null;\n\n    return <AoaNotification message={stringMessage} severity=\"error\" data-qa={dataQa ?? \"form-error\"} />;\n  }\n\n  return null;\n}\n"],"names":["AoaFormError","field","dataQa","message","stringMessage","jsx","AoaNotification"],"mappings":";;AAcO,SAASA,EAMd,EAAE,OAAAC,GAAO,WAAWC,KAAyF;AACzG,MAAAD,EAAM,MAAM,KAAK,aAAaA,EAAM,MAAM,KAAK,OAAO,QAAQ;AAChE,UAAME,IAAUF,EAAM,MAAM,KAAK,OAAO,GAAG,CAAC,GACtCG,IAAgB,OAAOD,KAAY,WAAWA,IAAU;AAE1D,WAACC,IAEE,gBAAAC,EAACC,KAAgB,SAASF,GAAe,UAAS,SAAQ,WAASF,KAAU,aAAc,CAAA,IAFvE;AAAA,EAG7B;AAEO,SAAA;AACT;"}
+{"version":3,"file":"FormError.js","sources":["../../../../src/components/molecules/form-error/FormError.tsx"],"sourcesContent":["import type { DeepKeys, DeepValue, FieldApi, Validator } from \"@tanstack/react-form\";\nimport { AoaNotification } from \"../../atoms/notification/Notification\";\n\nexport interface AoaFormErrorProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,\n  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>\n> {\n  readonly \"data-qa\"?: string;\n  readonly field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;\n}\n\nexport function AoaFormError<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,\n  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>\n>({ field, \"data-qa\": dataQa }: AoaFormErrorProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {\n  if (field.state.meta.isTouched && field.state.meta.errors.length) {\n    const message = field.state.meta.errors.at(0);\n    const stringMessage = typeof message === \"string\" ? message : \"\";\n\n    if (!stringMessage) return null;\n\n    return <AoaNotification data-qa={dataQa ?? \"form-error\"} message={stringMessage} severity=\"error\" />;\n  }\n\n  return null;\n}\n"],"names":["AoaFormError","field","dataQa","message","stringMessage","jsx","AoaNotification"],"mappings":";;AAcO,SAASA,EAMd,EAAE,OAAAC,GAAO,WAAWC,KAAyF;AACzG,MAAAD,EAAM,MAAM,KAAK,aAAaA,EAAM,MAAM,KAAK,OAAO,QAAQ;AAChE,UAAME,IAAUF,EAAM,MAAM,KAAK,OAAO,GAAG,CAAC,GACtCG,IAAgB,OAAOD,KAAY,WAAWA,IAAU;AAE1D,WAACC,IAEE,gBAAAC,EAACC,KAAgB,WAASJ,KAAU,cAAc,SAASE,GAAe,UAAS,SAAQ,IAFvE;AAAA,EAEuE;AAG7F,SAAA;AACT;"}

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

@@ -1,16 +1,23 @@
 import { FormApi, Validator } from '@tanstack/react-form';
 import { AoaButtonProps } from '../../atoms/button/Button';
-import { AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';
 import { AoaModalProps } from '../modal/Modal';
-
+import { AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';
 export interface AoaFormModalQAs {
-    /** Data-qa tag applied to the HTML `form` element */
-    form?: string;
-    /** Data-qa tag applied to the `DialogActions` component */
-    dialogActions?: string;
-    /** Data-qa tag applied to the "cancel" button */
+    /**
+     * Data-qa tag applied to the "cancel" button
+     */
     cancelButton?: string;
-    /** Data-qa tag applied to the "submit" button */
+    /**
+     * Data-qa tag applied to the `DialogActions` component
+     */
+    dialogActions?: string;
+    /**
+     * Data-qa tag applied to the HTML `form` element
+     */
+    form?: string;
+    /**
+     * Data-qa tag applied to the "submit" button
+     */
     submitButton?: string;
 }
 export interface AoaFormModalLabels {
@@ -18,6 +25,10 @@ export interface AoaFormModalLabels {
     submit: string;
 }
 export interface AoaFormModalProps extends Omit<AoaModalProps, "dialogActions">, AoaModalCloseButtonProps {
+    /**
+     * Additional properties to provide to the {@link AoaButton | submit button}
+     */
+    AoaSubmitButtonProps?: Omit<AoaButtonProps, "buttonType" | "data-qa" | "onClick" | "type">;
     /**
      * The tanstack form instance
      *
@@ -26,21 +37,25 @@ export interface AoaFormModalProps extends Omit<AoaModalProps, "dialogActions">,
      * exact types are also not necessary here
      */
     form: FormApi<any, Validator<any>>;
-    /** Labels for the buttons in {@link DialogActions} */
+    /**
+     * Labels for the buttons in {@link DialogActions}
+     */
     formLabels: AoaFormModalLabels;
-    /** data-qa tags for the components in the form section of the modal */
+    /**
+     * data-qa tags for the components in the form section of the modal
+     */
     formModalQas?: AoaFormModalQAs;
-    /** Optionally the `name` property for the HTML form element */
+    /**
+     * Optionally the `name` property for the HTML form element
+     */
     formName?: string;
-    /** Additional properties to provide to the {@link AoaButton submit button} */
-    AoaSubmitButtonProps?: Omit<AoaButtonProps, "data-qa" | "type" | "buttonType" | "onClick">;
 }
 /**
  * Constructs a modal **for holding a Form** using pre-defined Rijks styling
  *
  * For a modal without a form see `AoaModal`
  *
- * @param props Props to pass to the modal - {@link ModalProps}
+ * @param props - Props to pass to the modal - {@link ModalProps}
  * @example
  * ```jsx
  *    <AoaFormModal

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,EAAuB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAC5G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,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;;;;;;OAMG;IACH,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IACnC,sDAAsD;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,uEAAuE;IACvE,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC,CAAC;CAC5F;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,2CA+C7B"}
+{"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,2CA8C7B"}

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

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { Dialog as S, DialogTitle as T, DialogContent as k, DialogActions as v } from "@mui/material";
-import { m as F } from "../../../chunks/index.CtmQWjvP.js";
+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({
@@ -18,17 +18,17 @@ function G({
   dialogContent: j,
   closeAction: h
 }) {
-  return /* @__PURE__ */ c(S, { ...b, open: !!g, "data-qa": (i == null ? void 0 : i.modal) ?? "modal", children: [
-    /* @__PURE__ */ e(T, { ...y, "data-qa": (i == null ? void 0 : i.title) ?? "modal-title", sx: { m: 0, p: 2 }, maxWidth: "sm", children: A }),
+  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: (r) => {
-          r.preventDefault(), r.stopPropagation(), u.handleSubmit();
+        onSubmit: async (r) => {
+          r.preventDefault(), r.stopPropagation(), await u.handleSubmit();
         },
-        "data-qa": (t == null ? void 0 : t.form) ?? "form",
         children: [
           /* @__PURE__ */ e(
             k,
@@ -44,19 +44,19 @@ function G({
               children: j
             }
           ),
-          /* @__PURE__ */ c(v, { "data-qa": (t == null ? void 0 : t.dialogActions) ?? "dialog-actions", children: [
+          /* @__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",
-                type: "secondary",
                 onClick: () => {
                   u.reset(), h();
                 },
+                type: "secondary",
                 children: p.cancel
               }
             ),
-            /* @__PURE__ */ e(q, { ...B, "data-qa": (t == null ? void 0 : t.submitButton) ?? "submit-form", buttonType: "submit", type: "primary", children: p.submit })
+            /* @__PURE__ */ e(q, { ...B, buttonType: "submit", "data-qa": (t == null ? void 0 : t.submitButton) ?? "submit-form", type: "primary", children: p.submit })
           ] })
         ]
       }

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 { AoaModalCloseButton, type AoaModalCloseButtonProps } from \"../modal-close-button/ModalCloseButton\";\nimport type { AoaModalProps } from \"../modal/Modal\";\n\nexport interface AoaFormModalQAs {\n  /** Data-qa tag applied to the HTML `form` element */\n  form?: string;\n  /** Data-qa tag applied to the `DialogActions` component */\n  dialogActions?: string;\n  /** Data-qa tag applied to the \"cancel\" button */\n  cancelButton?: string;\n  /** Data-qa tag applied to the \"submit\" button */\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   * 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  /** Labels for the buttons in {@link DialogActions} */\n  formLabels: AoaFormModalLabels;\n  /** data-qa tags for the components in the form section of the modal */\n  formModalQas?: AoaFormModalQAs;\n  /** Optionally the `name` property for the HTML form element */\n  formName?: string;\n  /** Additional properties to provide to the {@link AoaButton submit button} */\n  AoaSubmitButtonProps?: Omit<AoaButtonProps, \"data-qa\" | \"type\" | \"buttonType\" | \"onClick\">;\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} open={Boolean(open)} data-qa={modalQas?.modal ?? \"modal\"}>\n      <DialogTitle {...DialogTitleProps} data-qa={modalQas?.title ?? \"modal-title\"} sx={{ m: 0, p: 2 }} maxWidth=\"sm\">\n        {topic}\n      </DialogTitle>\n      <AoaModalCloseButton closeAction={closeAction} />\n\n      <form\n        name={formName}\n        onSubmit={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          form.handleSubmit();\n        }}\n        data-qa={formModalQas?.form ?? \"form\"}\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            type=\"secondary\"\n            onClick={() => {\n              form.reset();\n              closeAction();\n            }}\n          >\n            {formLabels.cancel}\n          </AoaButton>\n          <AoaButton {...AoaSubmitButtonProps} data-qa={formModalQas?.submitButton ?? \"submit-form\"} buttonType=\"submit\" type=\"primary\">\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","e","DialogContent","merge","DialogActions","AoaButton"],"mappings":";;;;;AA2EO,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,MAAM,EAAQK,GAAO,YAASD,KAAA,gBAAAA,EAAU,UAAS,SACxE,UAAA;AAAA,IAAA,gBAAAO,EAACC,KAAa,GAAGX,GAAkB,YAASG,KAAA,gBAAAA,EAAU,UAAS,eAAe,IAAI,EAAE,GAAG,GAAG,GAAG,EAAK,GAAA,UAAS,MACxG,UACHE,GAAA;AAAA,IACA,gBAAAK,EAACE,KAAoB,aAAAL,GAA0B;AAAA,IAE/C,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAMV;AAAA,QACN,UAAU,CAACe,MAAM;AACf,UAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAClBlB,EAAK,aAAa;AAAA,QACpB;AAAA,QACA,YAASC,KAAA,gBAAAA,EAAc,SAAQ;AAAA,QAE/B,UAAA;AAAA,UAAA,gBAAAc;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,MAAK;AAAA,gBACL,SAAS,MAAM;AACb,kBAAAD,EAAK,MAAM,GACCY;gBACd;AAAA,gBAEC,UAAWV,EAAA;AAAA,cAAA;AAAA,YACd;AAAA,YACC,gBAAAa,EAAAO,GAAA,EAAW,GAAGf,GAAsB,YAASN,KAAA,gBAAAA,EAAc,iBAAgB,eAAe,YAAW,UAAS,MAAK,WACjH,YAAW,QACd;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"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 {...AoaSubmitButtonProps} buttonType=\"submit\" data-qa={formModalQas?.submitButton ?? \"submit-form\"} type=\"primary\">\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,YACC,gBAAAa,EAAAO,GAAA,EAAW,GAAGf,GAAsB,YAAW,UAAS,YAASN,KAAA,gBAAAA,EAAc,iBAAgB,eAAe,MAAK,WACjH,YAAW,OACd,CAAA;AAAA,UAAA,EACF,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/molecules/modal/Modal.d.ts

@@ -1,36 +1,58 @@
 import { DialogContentProps, DialogProps, DialogTitleProps } from '@mui/material';
 import { ReactNode } from 'react';
 import { AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';
-
 export interface AoaModalQAs {
-    /** Data-qa tag applied to the main modal */
+    /**
+     * Data-qa tag applied to the content
+     */
+    content?: string;
+    /**
+     * Data-qa tag applied to the main modal
+     */
     modal?: string;
-    /** Data-qa tag applied to the title */
+    /**
+     * Data-qa tag applied to the title
+     */
     title?: string;
-    /** Data-qa tag applied to the content */
-    content?: string;
 }
 export interface AoaModalProps {
-    /** Title for the modal */
-    topic: string;
-    /** Whether the modal should be opened or not */
-    open: boolean;
-    /** The content to show in the modal */
-    dialogContent: ReactNode;
-    /** Optional for adding dialog actions below the content */
-    dialogActions?: ReactNode;
-    /** Object of data-qa tags to pass to the modal */
-    modalQas?: AoaModalQAs;
-    /** Any other props passed to the {@link Dialog} */
-    DialogProps?: Omit<DialogProps, "open">;
-    /** Any other props passed to the {@link DialogTitle} */
-    DialogTitleProps?: DialogTitleProps;
-    /** Any other props passed to the {@link DialogContent} */
-    DialogContentProps?: DialogContentProps;
+    /**
+     * Any other props passed to the {@link DialogContent}
+     */
+    readonly DialogContentProps?: DialogContentProps;
+    /**
+     * Any other props passed to the {@link Dialog}
+     */
+    readonly DialogProps?: Omit<DialogProps, "open">;
+    /**
+     * Any other props passed to the {@link DialogTitle}
+     */
+    readonly DialogTitleProps?: DialogTitleProps;
+    /**
+     * Optional for adding dialog actions below the content
+     */
+    readonly dialogActions?: ReactNode;
+    /**
+     * The content to show in the modal
+     */
+    readonly dialogContent: ReactNode;
+    /**
+     * Object of data-qa tags to pass to the modal
+     */
+    readonly modalQas?: AoaModalQAs;
+    /**
+     * Whether the modal should be opened or not
+     */
+    readonly open: boolean;
+    /**
+     * Title for the modal
+     */
+    readonly topic: string;
 }
 /**
  * Constructs a modal using pre-defined Rijkswaterstaat styling
- * @param props Props to pass to the modal - {@link ModalProps}
+ *
+ * @param props - Props to pass to the modal - {@link ModalProps}
  * @example
  * ```jsx
  * <AoaModal
@@ -45,5 +67,5 @@ export interface AoaModalProps {
  * />
  * ```
  */
-export declare const AoaModal: import('react').MemoExoticComponent<({ DialogProps, DialogTitleProps, DialogContentProps, modalQas, open, topic, dialogContent, dialogActions, closeAction }: AoaModalProps & AoaModalCloseButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const AoaModal: import('react').MemoExoticComponent<({ DialogProps, DialogTitleProps, DialogContentProps, modalQas, open, topic, dialogContent, dialogActions, closeAction }: AoaModalCloseButtonProps & AoaModalProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/components/molecules/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,kBAAkB,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAErI,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAE5G,MAAM,WAAW,WAAW;IAC1B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,uCAAuC;IACvC,aAAa,EAAE,SAAS,CAAC;IACzB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,mDAAmD;IACnD,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACxC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,gKAWhB,aAAa,GAAG,wBAAwB,6CAgD5C,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,kBAAkB,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAErI,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAE5G,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACjD;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAC7C;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,gKAWhB,wBAAwB,GAAG,aAAa,6CAgD5C,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsxs as u, jsx as n } from "react/jsx-runtime";
 import { Dialog as v, DialogTitle as b, DialogContent as j } from "@mui/material";
-import { m as x } from "../../../chunks/index.CtmQWjvP.js";
+import { m as x } from "../../../chunks/index.DJYQ_-zP.js";
 import { memo as q } from "react";
 import { AoaModalCloseButton as A } from "../modal-close-button/ModalCloseButton.js";
 const z = q(
@@ -18,8 +18,8 @@ const z = q(
     v,
     {
       ...r,
-      open: !!c,
       "data-qa": (e == null ? void 0 : e.modal) ?? "modal",
+      open: !!c,
       sx: x(
         {
           "> div > div": {

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/molecules/modal/Modal.tsx"],"sourcesContent":["import { Dialog, DialogContent, DialogTitle, type DialogContentProps, type DialogProps, type DialogTitleProps } 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  /** Data-qa tag applied to the main modal */\n  modal?: string;\n  /** Data-qa tag applied to the title */\n  title?: string;\n  /** Data-qa tag applied to the content */\n  content?: string;\n}\n\nexport interface AoaModalProps {\n  /** Title for the modal */\n  topic: string;\n  /** Whether the modal should be opened or not */\n  open: boolean;\n  /** The content to show in the modal */\n  dialogContent: ReactNode;\n  /** Optional for adding dialog actions below the content */\n  dialogActions?: ReactNode;\n  /** Object of data-qa tags to pass to the modal */\n  modalQas?: AoaModalQAs;\n  /** Any other props passed to the {@link Dialog} */\n  DialogProps?: Omit<DialogProps, \"open\">;\n  /** Any other props passed to the {@link DialogTitle} */\n  DialogTitleProps?: DialogTitleProps;\n  /** Any other props passed to the {@link DialogContent} */\n  DialogContentProps?: DialogContentProps;\n}\n\n/**\n * Constructs a modal using pre-defined Rijkswaterstaat styling\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  }: AoaModalProps & AoaModalCloseButtonProps) => {\n    return (\n      <Dialog\n        {...DialogProps}\n        open={Boolean(open)}\n        data-qa={modalQas?.modal ?? \"modal\"}\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":";;;;;AAkDO,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,MAAM,EAAQI;AAAA,MACd,YAASD,KAAA,gBAAAA,EAAU,UAAS;AAAA,MAC5B,IAAIQ;AAAA,QACF;AAAA,UACE,eAAe;AAAA,YACb,cAAc;AAAA,YACd,UAAU;AAAA,UACZ;AAAA,QACF;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,EAAA;AAIT;"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/molecules/modal/Modal.tsx"],"sourcesContent":["import { Dialog, DialogContent, DialogTitle, type DialogContentProps, type DialogProps, type DialogTitleProps } 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":";;;;;AAyEO,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;"}