@rws-aoa/react-library 3.6.5 → 3.6.6

package/dist/components/atoms/section-header/SectionHeader.js

@@ -2,45 +2,67 @@ import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { Box as m, Typography as i, Divider as s } from "@mui/material";
 import { m as c } from "../../../chunks/index.DJYQ_-zP.js";
 import { memo as p } from "react";
-const g = p(({ title: a, subtitle: t = "", children: n, ...r }) => /* @__PURE__ */ e(
-  m,
-  {
-    ...r,
-    sx: c(
-      {
-        marginRight: 0,
-        marginBottom: 2,
-        'breakpoints.down("sm")': {
-          flexBasis: "100%",
-          width: "100%",
+const g = p(
+  ({ title: a, subtitle: t = "", children: n, ...r }) => /* @__PURE__ */ e(
+    m,
+    {
+      ...r,
+      sx: c(
+        {
           marginRight: 0,
-          "&:not(:first-of-type)": {
-            marginTop: 3
+          marginBottom: 2,
+          'breakpoints.down("sm")': {
+            flexBasis: "100%",
+            width: "100%",
+            marginRight: 0,
+            "&:not(:first-of-type)": {
+              marginTop: 3
+            }
+          },
+          ".MuiTypography-root": {
+            fontFamily: "var(--font-text)"
           }
         },
-        ".MuiTypography-root": {
-          fontFamily: "var(--font-text)"
-        }
-      },
-      r.sx
-    ),
-    children: [
-      /* @__PURE__ */ o(i, { color: "textPrimary", component: "h1", "data-qa": "section-title", sx: { fontSize: "var(--font-size-h1)" }, variant: "h5", children: a }),
-      !!t && /* @__PURE__ */ o(i, { color: "textSecondary", component: "span", "data-qa": "section-subtitle", sx: { fontSize: "var(--font-size-text)" }, variant: "subtitle1", children: t }),
-      /* @__PURE__ */ o(
-        s,
-        {
-          sx: {
-            backgroundColor: "var(--color-rijks-skyblue)",
-            marginBottom: 3,
-            paddingBottom: 0.25
-          }
-        }
+        r.sx
       ),
-      n
-    ]
-  }
-));
+      children: [
+        /* @__PURE__ */ o(
+          i,
+          {
+            color: "textPrimary",
+            component: "h1",
+            "data-qa": "section-title",
+            sx: { fontSize: "var(--font-size-h1)" },
+            variant: "h5",
+            children: a
+          }
+        ),
+        !!t && /* @__PURE__ */ o(
+          i,
+          {
+            color: "textSecondary",
+            component: "span",
+            "data-qa": "section-subtitle",
+            sx: { fontSize: "var(--font-size-text)" },
+            variant: "subtitle1",
+            children: t
+          }
+        ),
+        /* @__PURE__ */ o(
+          s,
+          {
+            sx: {
+              backgroundColor: "var(--color-rijks-skyblue)",
+              marginBottom: 3,
+              paddingBottom: 0.25
+            }
+          }
+        ),
+        n
+      ]
+    }
+  )
+);
 export {
   g as AoaSectionHeader
 };

package/dist/components/atoms/section-header/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","sources":["../../../../src/components/atoms/section-header/SectionHeader.tsx"],"sourcesContent":["import { Box, Divider, Typography, type BoxProps } from \"@mui/material\";\nimport merge from \"lodash.merge\";\nimport { memo, type PropsWithChildren, type ReactNode } from \"react\";\n\nexport interface AoaSectionHeaderProps extends Omit<BoxProps, \"title\"> {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly \"data-qa\"?: string;\n  /**\n   * The content to show as subtitle, lighter grey and below the title\n   */\n  readonly subtitle?: ReactNode;\n  /**\n   * The title to show in the first Typography component\n   */\n  readonly title: ReactNode;\n}\n\n/**\n * Constructs a section header using pre-defined Rijks styling\n *\n * @param props - Props to pass to the section header\n * @example\n * ```jsx\n * <AoaSectionHeader title='This is a title' subtitle='And this is a subtitle' />\n * ```\n */\nexport const AoaSectionHeader = memo(({ title, subtitle = \"\", children, ...props }: PropsWithChildren<AoaSectionHeaderProps>) => {\n  return (\n    <Box\n      {...props}\n      sx={merge(\n        {\n          marginRight: 0,\n          marginBottom: 2,\n          'breakpoints.down(\"sm\")': {\n            flexBasis: \"100%\",\n            width: \"100%\",\n            marginRight: 0,\n\n            \"&:not(:first-of-type)\": {\n              marginTop: 3\n            }\n          },\n          \".MuiTypography-root\": {\n            fontFamily: \"var(--font-text)\"\n          }\n        },\n        props.sx\n      )}\n    >\n      <Typography color=\"textPrimary\" component=\"h1\" data-qa=\"section-title\" sx={{ fontSize: \"var(--font-size-h1)\" }} variant=\"h5\">\n        {title}\n      </Typography>\n      {Boolean(subtitle) && (\n        <Typography color=\"textSecondary\" component=\"span\" data-qa=\"section-subtitle\" sx={{ fontSize: \"var(--font-size-text)\" }} variant=\"subtitle1\">\n          {subtitle}\n        </Typography>\n      )}\n      <Divider\n        sx={{\n          backgroundColor: \"var(--color-rijks-skyblue)\",\n          marginBottom: 3,\n          paddingBottom: 0.25\n        }}\n      />\n      {children}\n    </Box>\n  );\n});\n"],"names":["AoaSectionHeader","memo","title","subtitle","children","props","jsxs","Box","merge","jsx","Typography","Divider"],"mappings":";;;;AA4Ba,MAAAA,IAAmBC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,IAAW,IAAI,UAAAC,GAAU,GAAGC,QAEvE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,IAAIG;AAAA,MACF;AAAA,QACE,aAAa;AAAA,QACb,cAAc;AAAA,QACd,0BAA0B;AAAA,UACxB,WAAW;AAAA,UACX,OAAO;AAAA,UACP,aAAa;AAAA,UAEb,yBAAyB;AAAA,YACvB,WAAW;AAAA,UAAA;AAAA,QAEf;AAAA,QACA,uBAAuB;AAAA,UACrB,YAAY;AAAA,QAAA;AAAA,MAEhB;AAAA,MACAH,EAAM;AAAA,IACR;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI,EAACC,GAAW,EAAA,OAAM,eAAc,WAAU,MAAK,WAAQ,iBAAgB,IAAI,EAAE,UAAU,sBAAyB,GAAA,SAAQ,MACrH,UACHR,GAAA;AAAA,MACC,EAAQC,uBACNO,GAAW,EAAA,OAAM,iBAAgB,WAAU,QAAO,WAAQ,oBAAmB,IAAI,EAAE,UAAU,2BAA2B,SAAQ,aAC9H,UACHP,GAAA;AAAA,MAEF,gBAAAM;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,iBAAiB;AAAA,YACjB,cAAc;AAAA,YACd,eAAe;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,MACCP;AAAA,IAAA;AAAA,EAAA;AACH,CAEH;"}
+{"version":3,"file":"SectionHeader.js","sources":["../../../../src/components/atoms/section-header/SectionHeader.tsx"],"sourcesContent":["import { Box, Divider, Typography, type BoxProps } from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type PropsWithChildren, type ReactNode } from 'react';\n\nexport interface AoaSectionHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The content to show as subtitle, lighter grey and below the title\n   */\n  readonly subtitle?: ReactNode;\n  /**\n   * The title to show in the first Typography component\n   */\n  readonly title: ReactNode;\n}\n\n/**\n * Constructs a section header using pre-defined Rijks styling\n *\n * @param props - Props to pass to the section header\n * @example\n * ```jsx\n * <AoaSectionHeader title='This is a title' subtitle='And this is a subtitle' />\n * ```\n */\nexport const AoaSectionHeader = memo(\n  ({ title, subtitle = '', children, ...props }: PropsWithChildren<AoaSectionHeaderProps>) => {\n    return (\n      <Box\n        {...props}\n        sx={merge(\n          {\n            marginRight: 0,\n            marginBottom: 2,\n            'breakpoints.down(\"sm\")': {\n              flexBasis: '100%',\n              width: '100%',\n              marginRight: 0,\n\n              '&:not(:first-of-type)': {\n                marginTop: 3\n              }\n            },\n            '.MuiTypography-root': {\n              fontFamily: 'var(--font-text)'\n            }\n          },\n          props.sx\n        )}\n      >\n        <Typography\n          color='textPrimary'\n          component='h1'\n          data-qa='section-title'\n          sx={{ fontSize: 'var(--font-size-h1)' }}\n          variant='h5'\n        >\n          {title}\n        </Typography>\n        {Boolean(subtitle) && (\n          <Typography\n            color='textSecondary'\n            component='span'\n            data-qa='section-subtitle'\n            sx={{ fontSize: 'var(--font-size-text)' }}\n            variant='subtitle1'\n          >\n            {subtitle}\n          </Typography>\n        )}\n        <Divider\n          sx={{\n            backgroundColor: 'var(--color-rijks-skyblue)',\n            marginBottom: 3,\n            paddingBottom: 0.25\n          }}\n        />\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["AoaSectionHeader","memo","title","subtitle","children","props","jsxs","Box","merge","jsx","Typography","Divider"],"mappings":";;;;AA4BO,MAAMA,IAAmBC;AAAA,EAC9B,CAAC,EAAE,OAAAC,GAAO,UAAAC,IAAW,IAAI,UAAAC,GAAU,GAAGC,QAElC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,IAAIG;AAAA,QACF;AAAA,UACE,aAAa;AAAA,UACb,cAAc;AAAA,UACd,0BAA0B;AAAA,YACxB,WAAW;AAAA,YACX,OAAO;AAAA,YACP,aAAa;AAAA,YAEb,yBAAyB;AAAA,cACvB,WAAW;AAAA,YAAA;AAAA,UAEf;AAAA,UACA,uBAAuB;AAAA,YACrB,YAAY;AAAA,UAAA;AAAA,QAEhB;AAAA,QACAH,EAAM;AAAA,MACR;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,sBAAsB;AAAA,YACtC,SAAQ;AAAA,YAEP,UAAAR;AAAA,UAAA;AAAA,QACH;AAAA,QACC,EAAQC,KACP,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,wBAAwB;AAAA,YACxC,SAAQ;AAAA,YAEP,UAAAP;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,gBAAAM;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QACF;AAAA,QACCP;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGN;"}

package/dist/components/atoms/selection-buttons/checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import { CheckboxProps as MUICheckboxProps } from '@mui/material';
 import { ReactNode } from 'react';
-export interface AoaCheckboxProps extends Omit<MUICheckboxProps, "checkedIcon" | "icon"> {
+export interface AoaCheckboxProps extends Omit<MUICheckboxProps, 'checkedIcon' | 'icon'> {
     /**
      * Whether this checkbox is checked
      */
@@ -8,7 +8,7 @@ export interface AoaCheckboxProps extends Omit<MUICheckboxProps, "checkedIcon" |
     /**
      * Data-qa tag for E2E test purposes
      */
-    readonly "data-qa"?: string;
+    readonly 'data-qa'?: string;
     /**
      * The label that is shown after the checkbox
      */

package/dist/components/atoms/selection-buttons/checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoE,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEzI,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,aAAa,GAAG,MAAM,CAAC;IACtF;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,WAAW,4DAA8B,gBAAgB,KAAG,SAAS,CA8BhF,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACvC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,aAAa,GAAG,MAAM,CAAC;IACtF;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,WAAW,4DAA8B,gBAAgB,KAAG,SAAS,CA8BhF,CAAC"}

package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { CheckBox as t, CheckBoxOutlineBlank as i } from "@mui/icons-material";
+import { CheckBoxOutlineBlank as t, CheckBox as i } from "@mui/icons-material";
 import { FormControlLabel as l, Checkbox as m } from "@mui/material";
 import { m as c } from "../../../../chunks/index.DJYQ_-zP.js";
 import { memo as a } from "react";
@@ -11,8 +11,8 @@ const u = a(({ label: e, ...r }) => /* @__PURE__ */ o(
       m,
       {
         ...r,
-        checkedIcon: /* @__PURE__ */ o(t, { color: "inherit", fontSize: "small" }),
-        icon: /* @__PURE__ */ o(i, { color: "inherit", fontSize: "small" }),
+        checkedIcon: /* @__PURE__ */ o(i, { color: "inherit", fontSize: "small" }),
+        icon: /* @__PURE__ */ o(t, { color: "inherit", fontSize: "small" }),
         sx: c(
           {
             color: "var(--color-primary)",

package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/atoms/selection-buttons/checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon } from \"@mui/icons-material\";\nimport { Checkbox as MUICheckbox, FormControlLabel as MUIFormControlLabel, type CheckboxProps as MUICheckboxProps } from \"@mui/material\";\nimport merge from \"lodash.merge\";\nimport { memo, type ReactNode } from \"react\";\nimport { FontNormalSxProps } from \"../../../../_constants\";\n\nexport interface AoaCheckboxProps extends Omit<MUICheckboxProps, \"checkedIcon\" | \"icon\"> {\n  /**\n   * Whether this checkbox is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly \"data-qa\"?: string;\n  /**\n   * The label that is shown after the checkbox\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a checkbox using pre-defined Rijks styling\n *\n * @param props - Props to pass to the checkbox\n * @example\n * ```jsx\n * <AoaCheckbox label=\"Demo checkbox\" checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaCheckbox = memo(({ label, ...props }: AoaCheckboxProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUICheckbox\n          {...props}\n          checkedIcon={<CheckBoxIcon color=\"inherit\" fontSize=\"small\" />}\n          icon={<CheckBoxOutlineBlankIcon color=\"inherit\" fontSize=\"small\" />}\n          sx={merge(\n            {\n              color: \"var(--color-primary)\",\n\n              \":focus\": {\n                outline: \"2px dashed var(--color-text)\",\n                outlineOffset: \"-9px\",\n                borderRadius: 0\n              },\n\n              \":disabled\": {\n                color: \"var(--color-disabled)\"\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ \".MuiTypography-root\": FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaCheckbox","memo","label","props","jsx","MUIFormControlLabel","MUICheckbox","CheckBoxIcon","CheckBoxOutlineBlankIcon","merge","FontNormalSxProps"],"mappings":";;;;;;AA+BO,MAAMA,IAAcC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAEzC,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,aAAc,gBAAAC,EAAAG,GAAA,EAAa,OAAM,WAAU,UAAS,SAAQ;AAAA,QAC5D,MAAO,gBAAAH,EAAAI,GAAA,EAAyB,OAAM,WAAU,UAAS,SAAQ;AAAA,QACjE,IAAIC;AAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,cAAc;AAAA,YAChB;AAAA,YAEA,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UAEX;AAAA,UACAN,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,IAEF,OAAAD;AAAA,IACA,IAAI,EAAE,uBAAuBQ,EAAkB;AAAA,EAAA;AACjD,CAEH;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/atoms/selection-buttons/checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon } from '@mui/icons-material';\nimport {\n  Checkbox as MUICheckbox,\n  FormControlLabel as MUIFormControlLabel,\n  type CheckboxProps as MUICheckboxProps\n} from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaCheckboxProps extends Omit<MUICheckboxProps, 'checkedIcon' | 'icon'> {\n  /**\n   * Whether this checkbox is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the checkbox\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a checkbox using pre-defined Rijks styling\n *\n * @param props - Props to pass to the checkbox\n * @example\n * ```jsx\n * <AoaCheckbox label=\"Demo checkbox\" checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaCheckbox = memo(({ label, ...props }: AoaCheckboxProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUICheckbox\n          {...props}\n          checkedIcon={<CheckBoxIcon color='inherit' fontSize='small' />}\n          icon={<CheckBoxOutlineBlankIcon color='inherit' fontSize='small' />}\n          sx={merge(\n            {\n              color: 'var(--color-primary)',\n\n              ':focus': {\n                outline: '2px dashed var(--color-text)',\n                outlineOffset: '-9px',\n                borderRadius: 0\n              },\n\n              ':disabled': {\n                color: 'var(--color-disabled)'\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ '.MuiTypography-root': FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaCheckbox","memo","label","props","jsx","MUIFormControlLabel","MUICheckbox","CheckBoxIcon","CheckBoxOutlineBlankIcon","merge","FontNormalSxProps"],"mappings":";;;;;;AAmCO,MAAMA,IAAcC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAEzC,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,aAAc,gBAAAC,EAAAG,GAAA,EAAa,OAAM,WAAU,UAAS,SAAQ;AAAA,QAC5D,MAAO,gBAAAH,EAAAI,GAAA,EAAyB,OAAM,WAAU,UAAS,SAAQ;AAAA,QACjE,IAAIC;AAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,cAAc;AAAA,YAChB;AAAA,YAEA,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UAEX;AAAA,UACAN,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,IAEF,OAAAD;AAAA,IACA,IAAI,EAAE,uBAAuBQ,EAAkB;AAAA,EAAA;AACjD,CAEH;"}

package/dist/components/atoms/selection-buttons/radio-button/RadioButton.d.ts

@@ -8,7 +8,7 @@ export interface AoaRadioButtonProps extends MUIRadioButtonProps {
     /**
      * Data-qa tag for E2E test purposes
      */
-    readonly "data-qa"?: string;
+    readonly 'data-qa'?: string;
     /**
      * The label that is shown after the radio button
      */

package/dist/components/atoms/selection-buttons/radio-button/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/radio-button/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoE,KAAK,UAAU,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzI,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,cAAc,4DAA8B,mBAAmB,KAAG,SAAS,CA2BtF,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/radio-button/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,IAAI,mBAAmB,EACvC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,cAAc,4DAA8B,mBAAmB,KAAG,SAAS,CA2BtF,CAAC"}

package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../../../src/components/atoms/selection-buttons/radio-button/RadioButton.tsx"],"sourcesContent":["import { FormControlLabel as MUIFormControlLabel, Radio as MUIRadioButton, type RadioProps as MUIRadioButtonProps } from \"@mui/material\";\nimport merge from \"lodash.merge\";\nimport { memo, type ReactNode } from \"react\";\nimport { FontNormalSxProps } from \"../../../../_constants\";\n\nexport interface AoaRadioButtonProps extends MUIRadioButtonProps {\n  /**\n   * Whether this radio button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly \"data-qa\"?: string;\n  /**\n   * The label that is shown after the radio button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a radio button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the radio button\n * @example\n * ```jsx\n * <AoaRadioButton label=\"Demo radio button\" />} />\n * ```\n */\n\nexport const AoaRadioButton = memo(({ label, ...props }: AoaRadioButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUIRadioButton\n          {...props}\n          sx={merge(\n            {\n              color: \"var(--color-primary)\",\n\n              \":focus\": {\n                outline: \"2px dashed var(--color-text)\",\n                outlineOffset: \"-8px\"\n              },\n\n              \":disabled\": {\n                color: \"var(--color-disabled)\"\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ \".MuiTypography-root\": FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaRadioButton","memo","label","props","jsx","MUIFormControlLabel","MUIRadioButton","merge","FontNormalSxProps"],"mappings":";;;;;AA8BO,MAAMA,IAAiBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE5C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,IAAII;AAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YAEA,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UAEX;AAAA,UACAJ,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,IAEF,OAAAD;AAAA,IACA,IAAI,EAAE,uBAAuBM,EAAkB;AAAA,EAAA;AACjD,CAEH;"}
+{"version":3,"file":"RadioButton.js","sources":["../../../../../src/components/atoms/selection-buttons/radio-button/RadioButton.tsx"],"sourcesContent":["import {\n  FormControlLabel as MUIFormControlLabel,\n  Radio as MUIRadioButton,\n  type RadioProps as MUIRadioButtonProps\n} from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaRadioButtonProps extends MUIRadioButtonProps {\n  /**\n   * Whether this radio button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the radio button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a radio button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the radio button\n * @example\n * ```jsx\n * <AoaRadioButton label=\"Demo radio button\" />} />\n * ```\n */\n\nexport const AoaRadioButton = memo(({ label, ...props }: AoaRadioButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUIRadioButton\n          {...props}\n          sx={merge(\n            {\n              color: 'var(--color-primary)',\n\n              ':focus': {\n                outline: '2px dashed var(--color-text)',\n                outlineOffset: '-8px'\n              },\n\n              ':disabled': {\n                color: 'var(--color-disabled)'\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ '.MuiTypography-root': FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaRadioButton","memo","label","props","jsx","MUIFormControlLabel","MUIRadioButton","merge","FontNormalSxProps"],"mappings":";;;;;AAkCO,MAAMA,IAAiBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE5C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,IAAII;AAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YAEA,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UAEX;AAAA,UACAJ,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,IAEF,OAAAD;AAAA,IACA,IAAI,EAAE,uBAAuBM,EAAkB;AAAA,EAAA;AACjD,CAEH;"}

package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.d.ts

@@ -8,7 +8,7 @@ export interface AoaSwitchButtonProps extends MUISwitchButtonProps {
     /**
      * Data-qa tag for E2E test purposes
      */
-    readonly "data-qa"?: string;
+    readonly 'data-qa'?: string;
     /**
      * The label that is shown after the switch button
      */

package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/switch-button/SwitchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsE,KAAK,WAAW,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC7I,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,eAAe,4DAA8B,oBAAoB,KAAG,SAAS,CA+BxF,CAAC"}
+{"version":3,"file":"SwitchButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/switch-button/SwitchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,IAAI,oBAAoB,EACzC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,eAAe,4DAA8B,oBAAoB,KAAG,SAAS,CA+BxF,CAAC"}

package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchButton.js","sources":["../../../../../src/components/atoms/selection-buttons/switch-button/SwitchButton.tsx"],"sourcesContent":["import { FormControlLabel as MUIFormControlLabel, Switch as MUISwitchButton, type SwitchProps as MUISwitchButtonProps } from \"@mui/material\";\nimport { memo, type ReactNode } from \"react\";\nimport { FontNormalSxProps } from \"../../../../_constants\";\n\nexport interface AoaSwitchButtonProps extends MUISwitchButtonProps {\n  /**\n   * Whether this switch button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly \"data-qa\"?: string;\n  /**\n   * The label that is shown after the switch button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a switch button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the switch button\n * @example\n * ```jsx\n * <AoaSwitchButton label=\"Demo switch button\"  checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaSwitchButton = memo(({ label, ...props }: AoaSwitchButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={<MUISwitchButton {...props} />}\n      label={label}\n      sx={{\n        \".MuiTypography-root\": FontNormalSxProps,\n        \".MuiSwitch-root\": {\n          color: \"var(--color-primary)\",\n          width: \"64px\",\n\n          \":focus\": {\n            outline: \"2px dashed var(--color-text)\",\n            outlineOffset: \"-9px\",\n            borderRadius: 0\n          },\n\n          \":disabled\": {\n            color: \"var(--color-disabled)\"\n          },\n\n          \".MuiSwitch-track\": {\n            height: \"22px\",\n            marginTop: \"-4px\",\n            marginLeft: \"-3px\",\n            borderRadius: \"11px\"\n          }\n        }\n      }}\n    />\n  );\n});\n"],"names":["AoaSwitchButton","memo","label","props","jsx","MUIFormControlLabel","MUISwitchButton","FontNormalSxProps"],"mappings":";;;;AA6BO,MAAMA,IAAkBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE7C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SAAS,gBAAAD,EAACE,GAAiB,EAAA,GAAGH,EAAO,CAAA;AAAA,IACrC,OAAAD;AAAA,IACA,IAAI;AAAA,MACF,uBAAuBK;AAAA,MACvB,mBAAmB;AAAA,QACjB,OAAO;AAAA,QACP,OAAO;AAAA,QAEP,UAAU;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,cAAc;AAAA,QAChB;AAAA,QAEA,aAAa;AAAA,UACX,OAAO;AAAA,QACT;AAAA,QAEA,oBAAoB;AAAA,UAClB,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AACF,CAEH;"}
+{"version":3,"file":"SwitchButton.js","sources":["../../../../../src/components/atoms/selection-buttons/switch-button/SwitchButton.tsx"],"sourcesContent":["import {\n  FormControlLabel as MUIFormControlLabel,\n  Switch as MUISwitchButton,\n  type SwitchProps as MUISwitchButtonProps\n} from '@mui/material';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaSwitchButtonProps extends MUISwitchButtonProps {\n  /**\n   * Whether this switch button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the switch button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a switch button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the switch button\n * @example\n * ```jsx\n * <AoaSwitchButton label=\"Demo switch button\"  checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaSwitchButton = memo(({ label, ...props }: AoaSwitchButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={<MUISwitchButton {...props} />}\n      label={label}\n      sx={{\n        '.MuiTypography-root': FontNormalSxProps,\n        '.MuiSwitch-root': {\n          color: 'var(--color-primary)',\n          width: '64px',\n\n          ':focus': {\n            outline: '2px dashed var(--color-text)',\n            outlineOffset: '-9px',\n            borderRadius: 0\n          },\n\n          ':disabled': {\n            color: 'var(--color-disabled)'\n          },\n\n          '.MuiSwitch-track': {\n            height: '22px',\n            marginTop: '-4px',\n            marginLeft: '-3px',\n            borderRadius: '11px'\n          }\n        }\n      }}\n    />\n  );\n});\n"],"names":["AoaSwitchButton","memo","label","props","jsx","MUIFormControlLabel","MUISwitchButton","FontNormalSxProps"],"mappings":";;;;AAiCO,MAAMA,IAAkBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE7C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SAAS,gBAAAD,EAACE,GAAiB,EAAA,GAAGH,EAAO,CAAA;AAAA,IACrC,OAAAD;AAAA,IACA,IAAI;AAAA,MACF,uBAAuBK;AAAA,MACvB,mBAAmB;AAAA,QACjB,OAAO;AAAA,QACP,OAAO;AAAA,QAEP,UAAU;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,cAAc;AAAA,QAChB;AAAA,QAEA,aAAa;AAAA,UACX,OAAO;AAAA,QACT;AAAA,QAEA,oBAAoB;AAAA,UAClB,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AACF,CAEH;"}

package/dist/components/atoms/table/Table.d.ts

@@ -35,7 +35,7 @@ type ModeProps =
  */
 {
     getData?: never;
-    mode: "client";
+    mode: 'client';
 }
 /**
  * The Redux action that takes PaginationModel as parameter to retrieve data from the server
@@ -60,17 +60,17 @@ export type AoaTableProps<T extends object = any> = ModeProps & {
     /**
      * Data-qa tag for E2E test purposes
      */
-    readonly "data-qa"?: string;
+    readonly 'data-qa'?: string;
     /**
      * Overwrite a safe selection of the {@link DataGrid} properties
      */
-    readonly dataGridOverridableProps?: Pick<DataGridProps<T>, "checkboxSelection" | "getRowId" | "ignoreDiacritics" | "isRowSelectable" | "loading" | "onRowSelectionModelChange" | "rowSelectionModel">;
+    readonly dataGridOverridableProps?: Pick<DataGridProps<T>, 'checkboxSelection' | 'getRowId' | 'ignoreDiacritics' | 'isRowSelectable' | 'loading' | 'onRowSelectionModelChange' | 'rowSelectionModel'>;
     /**
      * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting
      */
     readonly initialSort?: {
         field: string;
-        sort: "asc" | "desc";
+        sort: 'asc' | 'desc';
     };
     /**
      * Overwrites the default labels when you need a different language than Dutch

package/dist/components/atoms/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMhJ,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG;IAClD;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,WAAW,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;CAC1B;AAED,KAAK,SAAS;AACZ;;GAEG;AACD;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,OAAO,CAAC,YAAY,EAAE,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,SAAS,GAAG;IAC9D;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,wBAAwB,CAAC,EAAE,IAAI,CACtC,aAAa,CAAC,CAAC,CAAC,EAChB,mBAAmB,GAAG,UAAU,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,SAAS,GAAG,2BAA2B,GAAG,mBAAmB,CAC1I,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IAC/D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAOF;;;;;;;;;;;;GAYG;AAEH,iBAAS,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CAiM1E;AAED,eAAO,MAAM,QAAQ,EAA+B,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG;IAClD;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,WAAW,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;CAC1B;AAED,KAAK,SAAS;AACZ;;GAEG;AACD;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,OAAO,CAAC,YAAY,EAAE,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,SAAS,GAAG;IAC9D;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,wBAAwB,CAAC,EAAE,IAAI,CACtC,aAAa,CAAC,CAAC,CAAC,EACd,mBAAmB,GACnB,UAAU,GACV,kBAAkB,GAClB,iBAAiB,GACjB,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,CACtB,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IAC/D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAOF;;;;;;;;;;;;GAYG;AAEH,iBAAS,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CAmM1E;AAED,eAAO,MAAM,QAAQ,EAA+B,OAAO,kBAAkB,CAAC"}

package/dist/components/atoms/table/Table.js

@@ -2,18 +2,18 @@ import { jsx as w } from "react/jsx-runtime";
 import "@mui/material";
 import { DataGrid as R } from "@mui/x-data-grid";
 import { m as P } from "../../../chunks/index.DJYQ_-zP.js";
-import { memo as F, useState as i, useCallback as k, useEffect as f } from "react";
+import { memo as F, useState as i, useCallback as k, useEffect as v } from "react";
 import { FontNormalSxProps as I } from "../../../_constants.js";
 import { QuickSearchToolbar as T } from "./_QuickSearchToolbar.js";
 function j(e) {
   var b, m, M;
-  const [h, c] = i(!1), [l, v] = i({
+  const [h, c] = i(!1), [l, D] = i({
     page: 0,
     pageSize: 10
-  }), [n, D] = i([]), [d, x] = i({
+  }), [n, f] = i([]), [d, x] = i({
     items: []
   }), r = e.mode ?? "server", s = r === "server", S = k((o) => {
-    D(o);
+    f(o);
   }, []), C = k((o) => {
     x(o);
   }, []), [y, u] = i(((b = e.data) == null ? void 0 : b.totalItems) || 0);
@@ -25,12 +25,14 @@ function j(e) {
       c(!0), await G(), c(!1);
     }
   }
-  return f(() => {
-    u((o) => {
-      var t, a;
-      return ((t = e.data) == null ? void 0 : t.totalItems) === void 0 ? o : (a = e.data) == null ? void 0 : a.totalItems;
-    });
-  }, [(m = e.data) == null ? void 0 : m.totalItems, u]), f(() => {
+  return v(() => {
+    u(
+      (o) => {
+        var t, a;
+        return ((t = e.data) == null ? void 0 : t.totalItems) === void 0 ? o : (a = e.data) == null ? void 0 : a.totalItems;
+      }
+    );
+  }, [(m = e.data) == null ? void 0 : m.totalItems, u]), v(() => {
     g(l, n, d);
   }, [l, n, d]), /* @__PURE__ */ w(
     R,
@@ -65,7 +67,7 @@ function j(e) {
         footerRowSelected: (o) => `${o} regels geselecteerd`
       },
       onFilterModelChange: C,
-      onPaginationModelChange: v,
+      onPaginationModelChange: D,
       onSortModelChange: S,
       pageSizeOptions: [5, 10, 20, 40, 80],
       paginationMode: r,

package/dist/components/atoms/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { type SxProps } from \"@mui/material\";\nimport { DataGrid, type DataGridProps, type GridColDef, type GridFilterModel, type GridLocaleText, type GridSortModel } from \"@mui/x-data-grid\";\nimport merge from \"lodash.merge\";\nimport { memo, useCallback, useEffect, useState } from \"react\";\nimport { FontNormalSxProps } from \"../../../_constants\";\nimport { QuickSearchToolbar } from \"./_QuickSearchToolbar\";\n\nexport interface AoaTableData<T extends object = any> {\n  /**\n   * The paged, filtered and sorted items from the database\n   */\n  items: T[];\n  /**\n   * The total number of items present in the database table\n   */\n  totalItems: number;\n}\n\nexport type AoaTableColumns<T extends object = any> = GridColDef<T>[];\n\nexport interface AoaTableQueryOptions {\n  /**\n   * Material UI's GridFilterModel\n   */\n  filterModel: GridFilterModel;\n  /**\n   * The current page of the table\n   */\n  page: number;\n  /**\n   * The maximum number of items that are shown on a page\n   */\n  pageSize: number;\n  /**\n   * Material UI's GridSortModel\n   */\n  sortModel: GridSortModel;\n}\n\ntype ModeProps =\n  /**\n   * Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side\n   */\n  | { getData?: never; mode: \"client\" }\n  /**\n   * The Redux action that takes PaginationModel as parameter to retrieve data from the server\n   */\n  | { getData(queryOptions: AoaTableQueryOptions): Promise<void> | void; mode?: never };\n\nexport type AoaTableProps<T extends object = any> = ModeProps & {\n  /**\n   * Action buttons shown in the toolbar of the table\n   */\n  readonly actionButtons?: JSX.Element[];\n  /**\n   * The column structure to display the data\n   */\n  readonly columns: GridColDef<T>[];\n  /**\n   * The TableData object to be displayed in the table\n   */\n  readonly data: AoaTableData<T>;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly \"data-qa\"?: string;\n  /**\n   * Overwrite a safe selection of the {@link DataGrid} properties\n   */\n  readonly dataGridOverridableProps?: Pick<\n    DataGridProps<T>,\n    \"checkboxSelection\" | \"getRowId\" | \"ignoreDiacritics\" | \"isRowSelectable\" | \"loading\" | \"onRowSelectionModelChange\" | \"rowSelectionModel\"\n  >;\n  /**\n   * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting\n   */\n  readonly initialSort?: { field: string; sort: \"asc\" | \"desc\" };\n  /**\n   * Overwrites the default labels when you need a different language than Dutch\n   */\n  readonly localeText?: GridLocaleText & { refreshTable: string };\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n};\n\ninterface PaginationModel {\n  page: number;\n  pageSize: number;\n}\n\n/**\n * Constructs a table using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n *  getData={(queryOptions) => getMockData(queryOptions)}\n *  data={mockData}\n *  columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nfunction NonMemoizeAoaTable<T extends object = any>(props: AoaTableProps<T>) {\n  const [isLoading, setIsLoading] = useState(false);\n  const [paginationModel, setPaginationModel] = useState<PaginationModel>({\n    page: 0,\n    pageSize: 10\n  });\n  const [sortModel, setSortModel] = useState<GridSortModel>([]);\n  const [filterModel, setFilterModel] = useState<GridFilterModel>({\n    items: []\n  });\n\n  const mode = props.mode ?? \"server\";\n  const isServerMode = mode === \"server\";\n\n  const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n    setSortModel(sortModel);\n  }, []);\n\n  const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n    setFilterModel(filterModel);\n  }, []);\n\n  const [rowCountState, setRowCountState] = useState(props.data?.totalItems || 0);\n\n  async function getData(paginationModel: PaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) {\n    if (isServerMode && props.getData) {\n      const fetchData = async () => {\n        await props.getData({ ...paginationModel, sortModel, filterModel });\n      };\n\n      setIsLoading(true);\n      await fetchData();\n      setIsLoading(false);\n    }\n  }\n\n  useEffect(() => {\n    setRowCountState((prevRowCountState) => (props.data?.totalItems === undefined ? prevRowCountState : props.data?.totalItems));\n  }, [props.data?.totalItems, setRowCountState]);\n\n  useEffect(() => {\n    void getData(paginationModel, sortModel, filterModel);\n    // ESLint tells us here that we should add the `getData` function, however,\n    // doing so will cause the fetching to loop infinity until the JavaScript heap overflows.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [paginationModel, sortModel, filterModel]);\n\n  return (\n    <DataGrid\n      columns={props.columns}\n      data-qa={props[\"data-qa\"]}\n      disableColumnFilter\n      disableColumnMenu\n      disableColumnSelector\n      disableDensitySelector\n      disableRowSelectionOnClick\n      disableVirtualization\n      filterMode={mode}\n      getRowHeight={() => \"auto\"}\n      initialState={{\n        sorting: {\n          sortModel: props.initialSort ? [props.initialSort] : []\n        }\n      }}\n      loading={isLoading}\n      localeText={\n        props.localeText ?? {\n          columnHeaderSortIconLabel: \"Sorteren\",\n          toolbarQuickFilterPlaceholder: \"Zoeken...\",\n          toolbarQuickFilterLabel: \"Zoeken\",\n          toolbarQuickFilterDeleteIconLabel: \"Wissen\",\n          noRowsLabel: \"Geen regels beschikbaar\",\n          noResultsOverlayLabel: \"Geen regels gevonden.\",\n          MuiTablePagination: {\n            labelDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n            labelRowsPerPage: \"Regels per pagina\"\n          },\n          footerRowSelected: (count) => `${count} regels geselecteerd`\n        }\n      }\n      onFilterModelChange={onFilterChange}\n      onPaginationModelChange={setPaginationModel}\n      onSortModelChange={handleSortModelChange}\n      pageSizeOptions={[5, 10, 20, 40, 80]}\n      paginationMode={mode}\n      paginationModel={paginationModel}\n      rowCount={isServerMode ? rowCountState : undefined}\n      rows={props.data?.items}\n      slotProps={{\n        toolbar: {\n          showQuickFilter: true,\n          quickFilterProps: { debounceMs: 500 },\n          mode,\n          isServerMode,\n          getData: async () => getData(paginationModel, sortModel, filterModel),\n          actionButtons: props.actionButtons,\n          localeText: props.localeText\n        }\n      }}\n      slots={{\n        toolbar: QuickSearchToolbar\n      }}\n      sortingMode={mode}\n      sx={merge(\n        {\n          border: 0,\n          color: \"var(--color-text)\",\n          letterSpacing: \"normal\",\n          minHeight: \"300px\",\n\n          \"&.MuiDataGrid-root--densityCompact\": {\n            \".MuiDataGrid-cell\": {\n              py: \"8px\"\n            }\n          },\n          \"&.MuiDataGrid-root--densityStandard\": {\n            \".MuiDataGrid-cell\": {\n              py: \"15px\"\n            }\n          },\n          \"&.MuiDataGrid-root--densityComfortable\": {\n            \".MuiDataGrid-cell\": {\n              py: \"22px\"\n            }\n          },\n\n          /**\n           * The 'no results' message does not show if the DataGrid does not have a fixed height.\n           * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n           * the min-height of the virtualScroller to half of that height.\n           */\n          \".MuiDataGrid-virtualScroller\": {\n            minHeight: \"150px\",\n            overflow: \"hidden\",\n            position: \"relative\"\n          },\n\n          \".MuiDataGrid-columnHeaders\": {\n            \"--DataGrid-containerBackground\": \"var(--color-rijks-skyblue)\",\n            backgroundCcolor: \"var(--color-rijks-skyblue)\",\n            color: \"var(--color-text-light)\"\n          },\n\n          \".MuiDataGrid-row\": {\n            \":hover\": {\n              backgroundColor: \"var(--color-rijks-skyblue-light)\"\n            },\n\n            \":nth-of-type(even)\": {\n              backgroundColor: \"var(--color-rijks-grey-1)\",\n\n              \":hover\": {\n                backgroundColor: \"var(--color-rijks-skyblue-light)\"\n              }\n            }\n          },\n\n          \".MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-columnsContainer, .MuiDataGrid-cell\": {\n            borderRight: \"1px solid var(--color-rijks-grey-2)\"\n          },\n\n          \".MuiDataGrid-cell\": {\n            color: \"var(--color-text)\"\n          },\n\n          \".MuiPaginationItem-root\": {\n            borderRadius: 0\n          },\n\n          \".MuiCheckbox-root\": {\n            color: \"var(--color-primary)\",\n\n            \":focus\": {\n              outline: \"2px dashed var(--color-text)\",\n              outlineOffset: \"-9px\",\n              borderRadius: 0\n            },\n\n            \":disabled\": {\n              color: \"var(--color-disabled)\"\n            }\n          },\n\n          \".MuiDataGrid-columnHeader .MuiCheckbox-root\": {\n            color: \"white\"\n          }\n        },\n        props.sx,\n        FontNormalSxProps\n      )}\n      {...props.dataGridOverridableProps}\n    />\n  );\n}\n\nexport const AoaTable = memo(NonMemoizeAoaTable) as typeof NonMemoizeAoaTable;\n"],"names":["NonMemoizeAoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","_a","getData","fetchData","useEffect","prevRowCountState","_b","jsx","DataGrid","from","to","count","_c","QuickSearchToolbar","merge","FontNormalSxProps","AoaTable","memo"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { type SxProps } from '@mui/material';\nimport {\n  DataGrid,\n  type DataGridProps,\n  type GridColDef,\n  type GridFilterModel,\n  type GridLocaleText,\n  type GridSortModel\n} from '@mui/x-data-grid';\nimport merge from 'lodash.merge';\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { QuickSearchToolbar } from './_QuickSearchToolbar';\n\nexport interface AoaTableData<T extends object = any> {\n  /**\n   * The paged, filtered and sorted items from the database\n   */\n  items: T[];\n  /**\n   * The total number of items present in the database table\n   */\n  totalItems: number;\n}\n\nexport type AoaTableColumns<T extends object = any> = GridColDef<T>[];\n\nexport interface AoaTableQueryOptions {\n  /**\n   * Material UI's GridFilterModel\n   */\n  filterModel: GridFilterModel;\n  /**\n   * The current page of the table\n   */\n  page: number;\n  /**\n   * The maximum number of items that are shown on a page\n   */\n  pageSize: number;\n  /**\n   * Material UI's GridSortModel\n   */\n  sortModel: GridSortModel;\n}\n\ntype ModeProps =\n  /**\n   * Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side\n   */\n  | { getData?: never; mode: 'client' }\n  /**\n   * The Redux action that takes PaginationModel as parameter to retrieve data from the server\n   */\n  | { getData(queryOptions: AoaTableQueryOptions): Promise<void> | void; mode?: never };\n\nexport type AoaTableProps<T extends object = any> = ModeProps & {\n  /**\n   * Action buttons shown in the toolbar of the table\n   */\n  readonly actionButtons?: JSX.Element[];\n  /**\n   * The column structure to display the data\n   */\n  readonly columns: GridColDef<T>[];\n  /**\n   * The TableData object to be displayed in the table\n   */\n  readonly data: AoaTableData<T>;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * Overwrite a safe selection of the {@link DataGrid} properties\n   */\n  readonly dataGridOverridableProps?: Pick<\n    DataGridProps<T>,\n    | 'checkboxSelection'\n    | 'getRowId'\n    | 'ignoreDiacritics'\n    | 'isRowSelectable'\n    | 'loading'\n    | 'onRowSelectionModelChange'\n    | 'rowSelectionModel'\n  >;\n  /**\n   * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting\n   */\n  readonly initialSort?: { field: string; sort: 'asc' | 'desc' };\n  /**\n   * Overwrites the default labels when you need a different language than Dutch\n   */\n  readonly localeText?: GridLocaleText & { refreshTable: string };\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n};\n\ninterface PaginationModel {\n  page: number;\n  pageSize: number;\n}\n\n/**\n * Constructs a table using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n *  getData={(queryOptions) => getMockData(queryOptions)}\n *  data={mockData}\n *  columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nfunction NonMemoizeAoaTable<T extends object = any>(props: AoaTableProps<T>) {\n  const [isLoading, setIsLoading] = useState(false);\n  const [paginationModel, setPaginationModel] = useState<PaginationModel>({\n    page: 0,\n    pageSize: 10\n  });\n  const [sortModel, setSortModel] = useState<GridSortModel>([]);\n  const [filterModel, setFilterModel] = useState<GridFilterModel>({\n    items: []\n  });\n\n  const mode = props.mode ?? 'server';\n  const isServerMode = mode === 'server';\n\n  const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n    setSortModel(sortModel);\n  }, []);\n\n  const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n    setFilterModel(filterModel);\n  }, []);\n\n  const [rowCountState, setRowCountState] = useState(props.data?.totalItems || 0);\n\n  async function getData(paginationModel: PaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) {\n    if (isServerMode && props.getData) {\n      const fetchData = async () => {\n        await props.getData({ ...paginationModel, sortModel, filterModel });\n      };\n\n      setIsLoading(true);\n      await fetchData();\n      setIsLoading(false);\n    }\n  }\n\n  useEffect(() => {\n    setRowCountState((prevRowCountState) =>\n      props.data?.totalItems === undefined ? prevRowCountState : props.data?.totalItems\n    );\n  }, [props.data?.totalItems, setRowCountState]);\n\n  useEffect(() => {\n    void getData(paginationModel, sortModel, filterModel);\n    // ESLint tells us here that we should add the `getData` function, however,\n    // doing so will cause the fetching to loop infinity until the JavaScript heap overflows.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [paginationModel, sortModel, filterModel]);\n\n  return (\n    <DataGrid\n      columns={props.columns}\n      data-qa={props['data-qa']}\n      disableColumnFilter\n      disableColumnMenu\n      disableColumnSelector\n      disableDensitySelector\n      disableRowSelectionOnClick\n      disableVirtualization\n      filterMode={mode}\n      getRowHeight={() => 'auto'}\n      initialState={{\n        sorting: {\n          sortModel: props.initialSort ? [props.initialSort] : []\n        }\n      }}\n      loading={isLoading}\n      localeText={\n        props.localeText ?? {\n          columnHeaderSortIconLabel: 'Sorteren',\n          toolbarQuickFilterPlaceholder: 'Zoeken...',\n          toolbarQuickFilterLabel: 'Zoeken',\n          toolbarQuickFilterDeleteIconLabel: 'Wissen',\n          noRowsLabel: 'Geen regels beschikbaar',\n          noResultsOverlayLabel: 'Geen regels gevonden.',\n          MuiTablePagination: {\n            labelDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n            labelRowsPerPage: 'Regels per pagina'\n          },\n          footerRowSelected: (count) => `${count} regels geselecteerd`\n        }\n      }\n      onFilterModelChange={onFilterChange}\n      onPaginationModelChange={setPaginationModel}\n      onSortModelChange={handleSortModelChange}\n      pageSizeOptions={[5, 10, 20, 40, 80]}\n      paginationMode={mode}\n      paginationModel={paginationModel}\n      rowCount={isServerMode ? rowCountState : undefined}\n      rows={props.data?.items}\n      slotProps={{\n        toolbar: {\n          showQuickFilter: true,\n          quickFilterProps: { debounceMs: 500 },\n          mode,\n          isServerMode,\n          getData: async () => getData(paginationModel, sortModel, filterModel),\n          actionButtons: props.actionButtons,\n          localeText: props.localeText\n        }\n      }}\n      slots={{\n        toolbar: QuickSearchToolbar\n      }}\n      sortingMode={mode}\n      sx={merge(\n        {\n          border: 0,\n          color: 'var(--color-text)',\n          letterSpacing: 'normal',\n          minHeight: '300px',\n\n          '&.MuiDataGrid-root--densityCompact': {\n            '.MuiDataGrid-cell': {\n              py: '8px'\n            }\n          },\n          '&.MuiDataGrid-root--densityStandard': {\n            '.MuiDataGrid-cell': {\n              py: '15px'\n            }\n          },\n          '&.MuiDataGrid-root--densityComfortable': {\n            '.MuiDataGrid-cell': {\n              py: '22px'\n            }\n          },\n\n          /**\n           * The 'no results' message does not show if the DataGrid does not have a fixed height.\n           * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n           * the min-height of the virtualScroller to half of that height.\n           */\n          '.MuiDataGrid-virtualScroller': {\n            minHeight: '150px',\n            overflow: 'hidden',\n            position: 'relative'\n          },\n\n          '.MuiDataGrid-columnHeaders': {\n            '--DataGrid-containerBackground': 'var(--color-rijks-skyblue)',\n            backgroundCcolor: 'var(--color-rijks-skyblue)',\n            color: 'var(--color-text-light)'\n          },\n\n          '.MuiDataGrid-row': {\n            ':hover': {\n              backgroundColor: 'var(--color-rijks-skyblue-light)'\n            },\n\n            ':nth-of-type(even)': {\n              backgroundColor: 'var(--color-rijks-grey-1)',\n\n              ':hover': {\n                backgroundColor: 'var(--color-rijks-skyblue-light)'\n              }\n            }\n          },\n\n          '.MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {\n            borderRight: '1px solid var(--color-rijks-grey-2)'\n          },\n\n          '.MuiDataGrid-cell': {\n            color: 'var(--color-text)'\n          },\n\n          '.MuiPaginationItem-root': {\n            borderRadius: 0\n          },\n\n          '.MuiCheckbox-root': {\n            color: 'var(--color-primary)',\n\n            ':focus': {\n              outline: '2px dashed var(--color-text)',\n              outlineOffset: '-9px',\n              borderRadius: 0\n            },\n\n            ':disabled': {\n              color: 'var(--color-disabled)'\n            }\n          },\n\n          '.MuiDataGrid-columnHeader .MuiCheckbox-root': {\n            color: 'white'\n          }\n        },\n        props.sx,\n        FontNormalSxProps\n      )}\n      {...props.dataGridOverridableProps}\n    />\n  );\n}\n\nexport const AoaTable = memo(NonMemoizeAoaTable) as typeof NonMemoizeAoaTable;\n"],"names":["NonMemoizeAoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","_a","getData","fetchData","useEffect","prevRowCountState","_b","jsx","DataGrid","from","to","count","_c","QuickSearchToolbar","merge","FontNormalSxProps","AoaTable","memo"],"mappings":"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"}

package/dist/components/atoms/table/_QuickSearchToolbar.d.ts

@@ -1,5 +1,5 @@
 import { GridLocaleText, GridToolbarProps, ToolbarPropsOverrides } from '@mui/x-data-grid';
-declare module "@mui/x-data-grid" {
+declare module '@mui/x-data-grid' {
     interface ToolbarPropsOverrides {
         actionButtons?: JSX.Element[];
         getData(this: void): void;
@@ -7,7 +7,7 @@ declare module "@mui/x-data-grid" {
         localeText?: GridLocaleText & {
             refreshTable: string;
         };
-        mode: "client" | "server";
+        mode: 'client' | 'server';
     }
 }
 export declare const QuickSearchToolbar: import('react').MemoExoticComponent<({ mode, isServerMode, actionButtons, getData, localeText, quickFilterProps }: GridToolbarProps & ToolbarPropsOverrides) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/atoms/table/_QuickSearchToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAIlI,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAiB,qBAAqB;QACpC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAC1B,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,cAAc,GAAG;YAC5B,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;KAC3B;CACF;AAED,eAAO,MAAM,kBAAkB,qHACkD,gBAAgB,GAAG,qBAAqB,6CAiGxH,CAAC"}
+{"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAI1B,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAiB,qBAAqB;QACpC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAC1B,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,cAAc,GAAG;YAC5B,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;KAC3B;CACF;AAED,eAAO,MAAM,kBAAkB,qHAQ1B,gBAAgB,GAAG,qBAAqB,6CAmG5C,CAAC"}

package/dist/components/atoms/table/_QuickSearchToolbar.js

@@ -5,7 +5,14 @@ import { GridToolbarQuickFilter as l } from "@mui/x-data-grid";
 import { memo as h } from "react";
 import { AoaIconButton as m } from "../icon-button/IconButton.js";
 const k = h(
-  ({ mode: e, isServerMode: t, actionButtons: o, getData: n, localeText: r, quickFilterProps: p }) => /* @__PURE__ */ s(
+  ({
+    mode: e,
+    isServerMode: t,
+    actionButtons: o,
+    getData: n,
+    localeText: r,
+    quickFilterProps: p
+  }) => /* @__PURE__ */ s(
     x,
     {
       className: `${e}-mode`,

package/dist/components/atoms/table/_QuickSearchToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"_QuickSearchToolbar.js","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from \"@mui/icons-material\";\nimport { Box } from \"@mui/material\";\nimport { GridToolbarQuickFilter, type GridLocaleText, type GridToolbarProps, type ToolbarPropsOverrides } from \"@mui/x-data-grid\";\nimport { memo } from \"react\";\nimport { AoaIconButton } from \"../icon-button/IconButton\";\n\ndeclare module \"@mui/x-data-grid\" {\n  export interface ToolbarPropsOverrides {\n    actionButtons?: JSX.Element[];\n    getData(this: void): void;\n    isServerMode: boolean;\n    localeText?: GridLocaleText & {\n      refreshTable: string;\n    };\n    mode: \"client\" | \"server\";\n  }\n}\n\nexport const QuickSearchToolbar = memo(\n  ({ mode, isServerMode, actionButtons, getData, localeText, quickFilterProps }: GridToolbarProps & ToolbarPropsOverrides) => (\n    <Box\n      className={`${mode}-mode`}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"flex-end\",\n        paddingBottom: \"10px\",\n\n        \"&.server-mode :nth-child(2)\": {\n          marginLeft: \"auto\"\n        },\n\n        \".MuiButtonBase-root\": {\n          width: \"48px\",\n          marginRight: \"10px\"\n        },\n\n        \".MuiFormControl-root.MuiTextField-root\": {\n          paddingBottom: 0,\n\n          \".MuiInput-root\": {\n            position: \"relative\",\n\n            \":before, :after\": {\n              borderBottom: \"transparent\"\n            },\n\n            \".MuiSvgIcon-root\": {\n              position: \"absolute\",\n              right: \"-1px\",\n              width: \"24px\",\n              height: \"24px\",\n              padding: \"12px\",\n              background: \"#007bc7\",\n              color: \"#ffffff\",\n              fontWeight: \"700\",\n              overflow: \"hidden\",\n              whiteSpace: \"nowrap\",\n              boxSizing: \"content-box\"\n            },\n\n            \".MuiInputBase-input\": {\n              color: \"var(--color-text)\",\n              fontFamily: \"RijksoverheidSansText, Verdana, Arial, sans-serif\",\n              fontSize: \"1.125rem\",\n              boxSizing: \"border-box\",\n              flex: \"1 1\",\n              height: \"48px\",\n              margin: \"0\",\n              padding: \"0 85px 0 14px\",\n              background: \"var(--color-text-light)\",\n              border: \"1px solid var(--color-rijks-grey-3)\",\n              boxShadow: \"inset 1px 1px 3px hsl(0deg 0% 41% / 10%)\",\n              lineHeight: \"1.5\",\n              maxWidth: \"100%\",\n\n              \":focus\": {\n                borderColor: \"var(--color-rijks-skyblue)\",\n                outline: \"0 !important\",\n                boxShadow: `\n                    inset 1px 1px 3px hsl(0deg 0% 41% / 10%),\n                    inset 0 0 0 1px var(--color-rijks-skyblue),\n                    0 0 5px rgb(0 115 191 / 50%);\n                  `\n              }\n            },\n\n            \".MuiButtonBase-root\": {\n              position: \"absolute\",\n              right: \"48px\",\n              height: \"24px\",\n              width: \"24px\",\n              marginRight: \"4px\",\n\n              \".MuiSvgIcon-root\": {\n                color: \"var(--color-primary)\",\n                background: \"none\"\n              },\n\n              \":hover, :active, :focus\": {\n                backgroundColor: \"transparent\"\n              },\n\n              \".MuiTouchRipple-root\": {\n                display: \"none\"\n              }\n            }\n          }\n        }\n      }}\n    >\n      {isServerMode && <AoaIconButton icon={<RefreshIcon />} label={localeText?.refreshTable ?? \"Ververs tabel\"} onClick={getData} />}\n      {actionButtons?.map((button: JSX.Element) => button)}\n      <GridToolbarQuickFilter {...quickFilterProps} />\n    </Box>\n  )\n);\n"],"names":["QuickSearchToolbar","memo","mode","isServerMode","actionButtons","getData","localeText","quickFilterProps","jsxs","Box","jsx","AoaIconButton","RefreshIcon","button","GridToolbarQuickFilter"],"mappings":";;;;;;AAkBO,MAAMA,IAAqBC;AAAA,EAChC,CAAC,EAAE,MAAAC,GAAM,cAAAC,GAAc,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,QACzD,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGP,CAAI;AAAA,MAClB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,eAAe;AAAA,QAEf,+BAA+B;AAAA,UAC7B,YAAY;AAAA,QACd;AAAA,QAEA,uBAAuB;AAAA,UACrB,OAAO;AAAA,UACP,aAAa;AAAA,QACf;AAAA,QAEA,0CAA0C;AAAA,UACxC,eAAe;AAAA,UAEf,kBAAkB;AAAA,YAChB,UAAU;AAAA,YAEV,mBAAmB;AAAA,cACjB,cAAc;AAAA,YAChB;AAAA,YAEA,oBAAoB;AAAA,cAClB,UAAU;AAAA,cACV,OAAO;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,WAAW;AAAA,YACb;AAAA,YAEA,uBAAuB;AAAA,cACrB,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW;AAAA,cACX,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cAEV,UAAU;AAAA,gBACR,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAAA;AAAA,YAMf;AAAA,YAEA,uBAAuB;AAAA,cACrB,UAAU;AAAA,cACV,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,aAAa;AAAA,cAEb,oBAAoB;AAAA,gBAClB,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEA,2BAA2B;AAAA,gBACzB,iBAAiB;AAAA,cACnB;AAAA,cAEA,wBAAwB;AAAA,gBACtB,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MAEJ;AAAA,MAEC,UAAA;AAAA,QAAgBC,KAAA,gBAAAO,EAACC,GAAc,EAAA,MAAO,gBAAAD,EAAAE,GAAA,CAAA,CAAY,GAAI,QAAON,KAAA,gBAAAA,EAAY,iBAAgB,iBAAiB,SAASD,EAAS,CAAA;AAAA,QAC5HD,KAAA,gBAAAA,EAAe,IAAI,CAACS,MAAwBA;AAAA,QAC7C,gBAAAH,EAACI,GAAwB,EAAA,GAAGP,EAAkB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
+{"version":3,"file":"_QuickSearchToolbar.js","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material';\nimport { Box } from '@mui/material';\nimport {\n  GridToolbarQuickFilter,\n  type GridLocaleText,\n  type GridToolbarProps,\n  type ToolbarPropsOverrides\n} from '@mui/x-data-grid';\nimport { memo } from 'react';\nimport { AoaIconButton } from '../icon-button/IconButton';\n\ndeclare module '@mui/x-data-grid' {\n  export interface ToolbarPropsOverrides {\n    actionButtons?: JSX.Element[];\n    getData(this: void): void;\n    isServerMode: boolean;\n    localeText?: GridLocaleText & {\n      refreshTable: string;\n    };\n    mode: 'client' | 'server';\n  }\n}\n\nexport const QuickSearchToolbar = memo(\n  ({\n    mode,\n    isServerMode,\n    actionButtons,\n    getData,\n    localeText,\n    quickFilterProps\n  }: GridToolbarProps & ToolbarPropsOverrides) => (\n    <Box\n      className={`${mode}-mode`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'flex-end',\n        paddingBottom: '10px',\n\n        '&.server-mode :nth-child(2)': {\n          marginLeft: 'auto'\n        },\n\n        '.MuiButtonBase-root': {\n          width: '48px',\n          marginRight: '10px'\n        },\n\n        '.MuiFormControl-root.MuiTextField-root': {\n          paddingBottom: 0,\n\n          '.MuiInput-root': {\n            position: 'relative',\n\n            ':before, :after': {\n              borderBottom: 'transparent'\n            },\n\n            '.MuiSvgIcon-root': {\n              position: 'absolute',\n              right: '-1px',\n              width: '24px',\n              height: '24px',\n              padding: '12px',\n              background: '#007bc7',\n              color: '#ffffff',\n              fontWeight: '700',\n              overflow: 'hidden',\n              whiteSpace: 'nowrap',\n              boxSizing: 'content-box'\n            },\n\n            '.MuiInputBase-input': {\n              color: 'var(--color-text)',\n              fontFamily: 'RijksoverheidSansText, Verdana, Arial, sans-serif',\n              fontSize: '1.125rem',\n              boxSizing: 'border-box',\n              flex: '1 1',\n              height: '48px',\n              margin: '0',\n              padding: '0 85px 0 14px',\n              background: 'var(--color-text-light)',\n              border: '1px solid var(--color-rijks-grey-3)',\n              boxShadow: 'inset 1px 1px 3px hsl(0deg 0% 41% / 10%)',\n              lineHeight: '1.5',\n              maxWidth: '100%',\n\n              ':focus': {\n                borderColor: 'var(--color-rijks-skyblue)',\n                outline: '0 !important',\n                boxShadow: `\n                    inset 1px 1px 3px hsl(0deg 0% 41% / 10%),\n                    inset 0 0 0 1px var(--color-rijks-skyblue),\n                    0 0 5px rgb(0 115 191 / 50%);\n                  `\n              }\n            },\n\n            '.MuiButtonBase-root': {\n              position: 'absolute',\n              right: '48px',\n              height: '24px',\n              width: '24px',\n              marginRight: '4px',\n\n              '.MuiSvgIcon-root': {\n                color: 'var(--color-primary)',\n                background: 'none'\n              },\n\n              ':hover, :active, :focus': {\n                backgroundColor: 'transparent'\n              },\n\n              '.MuiTouchRipple-root': {\n                display: 'none'\n              }\n            }\n          }\n        }\n      }}\n    >\n      {isServerMode && (\n        <AoaIconButton icon={<RefreshIcon />} label={localeText?.refreshTable ?? 'Ververs tabel'} onClick={getData} />\n      )}\n      {actionButtons?.map((button: JSX.Element) => button)}\n      <GridToolbarQuickFilter {...quickFilterProps} />\n    </Box>\n  )\n);\n"],"names":["QuickSearchToolbar","memo","mode","isServerMode","actionButtons","getData","localeText","quickFilterProps","jsxs","Box","jsx","AoaIconButton","RefreshIcon","button","GridToolbarQuickFilter"],"mappings":";;;;;;AAuBO,MAAMA,IAAqBC;AAAA,EAChC,CAAC;AAAA,IACC,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,MAEA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGP,CAAI;AAAA,MAClB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,eAAe;AAAA,QAEf,+BAA+B;AAAA,UAC7B,YAAY;AAAA,QACd;AAAA,QAEA,uBAAuB;AAAA,UACrB,OAAO;AAAA,UACP,aAAa;AAAA,QACf;AAAA,QAEA,0CAA0C;AAAA,UACxC,eAAe;AAAA,UAEf,kBAAkB;AAAA,YAChB,UAAU;AAAA,YAEV,mBAAmB;AAAA,cACjB,cAAc;AAAA,YAChB;AAAA,YAEA,oBAAoB;AAAA,cAClB,UAAU;AAAA,cACV,OAAO;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,WAAW;AAAA,YACb;AAAA,YAEA,uBAAuB;AAAA,cACrB,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW;AAAA,cACX,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cAEV,UAAU;AAAA,gBACR,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAAA;AAAA,YAMf;AAAA,YAEA,uBAAuB;AAAA,cACrB,UAAU;AAAA,cACV,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,aAAa;AAAA,cAEb,oBAAoB;AAAA,gBAClB,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEA,2BAA2B;AAAA,gBACzB,iBAAiB;AAAA,cACnB;AAAA,cAEA,wBAAwB;AAAA,gBACtB,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MAEJ;AAAA,MAEC,UAAA;AAAA,QACCC,KAAA,gBAAAO,EAACC,GAAc,EAAA,MAAO,gBAAAD,EAAAE,GAAA,CAAA,CAAY,GAAI,QAAON,KAAA,gBAAAA,EAAY,iBAAgB,iBAAiB,SAASD,EAAS,CAAA;AAAA,QAE7GD,KAAA,gBAAAA,EAAe,IAAI,CAACS,MAAwBA;AAAA,QAC7C,gBAAAH,EAACI,GAAwB,EAAA,GAAGP,EAAkB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/dist/components/atoms/zero-width-space/ZeroWidthSpace.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZeroWidthSpace.js","sources":["../../../../src/components/atoms/zero-width-space/ZeroWidthSpace.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from \"@mui/material\";\nimport { memo, type ReactNode } from \"react\";\n\n/**\n * Inserts a Zero Width Space as a React component\n *\n * @param props - Props to pass to the Zero-Width Space component\n * @example\n * ```jsx\n * <AoaZeroWidthSpace />\n * ```\n */\nexport const AoaZeroWidthSpace = memo(\n  ({ variant, style, ...props }: TypographyProps): ReactNode => (\n    <Typography {...props} style={style} variant={variant ?? \"caption\"}>\n      &#8203;\n    </Typography>\n  )\n);\n"],"names":["AoaZeroWidthSpace","memo","variant","style","props","jsx","Typography"],"mappings":";;;AAYO,MAAMA,IAAoBC;AAAA,EAC/B,CAAC,EAAE,SAAAC,GAAS,OAAAC,GAAO,GAAGC,EAAM,MACzB,gBAAAC,EAAAC,GAAA,EAAY,GAAGF,GAAO,OAAAD,GAAc,SAASD,KAAW,WAAW,UAEpE,IAAA,CAAA;AAEJ;"}
+{"version":3,"file":"ZeroWidthSpace.js","sources":["../../../../src/components/atoms/zero-width-space/ZeroWidthSpace.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from '@mui/material';\nimport { memo, type ReactNode } from 'react';\n\n/**\n * Inserts a Zero Width Space as a React component\n *\n * @param props - Props to pass to the Zero-Width Space component\n * @example\n * ```jsx\n * <AoaZeroWidthSpace />\n * ```\n */\nexport const AoaZeroWidthSpace = memo(\n  ({ variant, style, ...props }: TypographyProps): ReactNode => (\n    <Typography {...props} style={style} variant={variant ?? 'caption'}>\n      &#8203;\n    </Typography>\n  )\n);\n"],"names":["AoaZeroWidthSpace","memo","variant","style","props","jsx","Typography"],"mappings":";;;AAYO,MAAMA,IAAoBC;AAAA,EAC/B,CAAC,EAAE,SAAAC,GAAS,OAAAC,GAAO,GAAGC,EAAM,MACzB,gBAAAC,EAAAC,GAAA,EAAY,GAAGF,GAAO,OAAAD,GAAc,SAASD,KAAW,WAAW,UAEpE,IAAA,CAAA;AAEJ;"}

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":"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"}
+{"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,2CAoGxE"}

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

@@ -7,19 +7,22 @@ import { isExtensionAllowed as W } from "../../../_constants.js";
 function A(e) {
   var d, r;
   const o = f(() => {
-    g(e.maxUploadSizeExceededWarning ?? `U heeft meer dan ${e.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`, {
-      type: "warning"
-    });
+    g(
+      e.maxUploadSizeExceededWarning ?? `U heeft meer dan ${e.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`,
+      {
+        type: "warning"
+      }
+    );
   }, [e.maxUploadFiles, e.maxUploadSizeExceededWarning]), u = f(
-    (a, i) => {
+    (a, n) => {
       var m, s;
-      i.length > 0 && (i.every((n) => n.errors.every((l) => l.code === "too-many-files")) ? o() : g(e.extensionWarning, { type: "warning" }));
+      n.length > 0 && (n.every((i) => i.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((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)
+      for (const i of a) {
+        const l = t.findIndex((U) => U.file.name === i.name);
+        l === -1 ? t.push({ file: i, ...(m = e.perFileProperties) == null ? void 0 : m.call(e, i) }) : t.splice(l, 1, {
+          file: i,
+          ...(s = e.perFileProperties) == null ? void 0 : s.call(e, i)
         });
       }
       e.maxUploadFiles && t.length > e.maxUploadFiles ? o() : e.storeFiles(t);
@@ -27,8 +30,8 @@ function A(e) {
     [o, e]
   );
   function F(a) {
-    var i;
-    return (i = e.customFileValidator) != null && i.call(e, a) ? {
+    var n;
+    return (n = e.customFileValidator) != null && n.call(e, a) ? {
       code: "custom-validator",
       message: e.extensionWarning
     } : W(e.extensionRegex, a.name) ? null : {
@@ -54,7 +57,15 @@ function A(e) {
         }
       },
       children: [
-        /* @__PURE__ */ c("input", { ...b(), "data-qa": ((r = e.dataQas) == null ? void 0 : r.input) ?? "file-drop-input" }),
+        /* @__PURE__ */ c(
+          "input",
+          {
+            ...b(),
+            "aria-label": "File drop",
+            "data-qa": ((r = e.dataQas) == null ? void 0 : r.input) ?? "file-drop-input",
+            "data-testid": "file-drop-input"
+          }
+        ),
         /* @__PURE__ */ c(
           x,
           {