npm - @rws-aoa/react-library - Versions diffs - 4.0.0 → 5.0.0 - Mend

@rws-aoa/react-library 4.0.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

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

@@ -1,19 +1,19 @@
 import { jsx as o } from "react/jsx-runtime";
 import { CheckBoxOutlineBlank as t, CheckBox as l } from "@mui/icons-material";
-import { FormControlLabel as m, typographyClasses as i, Checkbox as c } from "@mui/material";
-import { m as a } from "../../../../chunks/index.DJYQ_-zP.js";
-import { memo as s } from "react";
+import { FormControlLabel as i, typographyClasses as m, Checkbox as s } from "@mui/material";
+import { l as a } from "../../../../chunks/lodash.DOeeRDpT.js";
+import { memo as c } from "react";
 import { FontNormalSxProps as n } from "../../../../_constants.js";
-const k = s(({ label: e, ...r }) => /* @__PURE__ */ o(
-  m,
+const k = c(({ label: e, ...r }) => /* @__PURE__ */ o(
+  i,
   {
     control: /* @__PURE__ */ o(
-      c,
+      s,
       {
         ...r,
         checkedIcon: /* @__PURE__ */ o(l, { color: "inherit", fontSize: "small" }),
         icon: /* @__PURE__ */ o(t, { color: "inherit", fontSize: "small" }),
-        sx: a(
+        sx: a.merge(
           {
             color: "var(--color-primary)",
             ":focus": {
@@ -30,7 +30,7 @@ const k = s(({ label: e, ...r }) => /* @__PURE__ */ o(
       }
     ),
     label: e,
-    sx: { [`.${i.root}`]: n }
+    sx: { [`.${m.root}`]: n }
   }
 ));
 export {

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

	@@ -1 +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 {\n Checkbox as MUICheckbox,\n FormControlLabel as MUIFormControlLabel,\n typographyClasses,\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={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n />\n );\n});\n"],"names":["AoaCheckbox","memo","label","props","jsx","MUIFormControlLabel","MUICheckbox","CheckBoxIcon","CheckBoxOutlineBlankIcon","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;;AAoCO,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,CAAC,IAAIQ,EAAkB,IAAI,EAAE,GAAGC,EAAkB;AAAA,EAAA;AAC1D,CAEH;"}
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 {\n Checkbox as MUICheckbox,\n FormControlLabel as MUIFormControlLabel,\n typographyClasses,\n type CheckboxProps as MUICheckboxProps\n} from '@mui/material';\nimport { merge } from 'lodash';\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={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n />\n );\n});\n"],"names":["AoaCheckbox","memo","label","props","jsx","MUIFormControlLabel","MUICheckbox","CheckBoxIcon","CheckBoxOutlineBlankIcon","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;;AAoCO,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,EAAA;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,CAAC,IAAIQ,EAAkB,IAAI,EAAE,GAAGC,EAAkB;AAAA,EAAA;AAC1D,CAEH;"}

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

@@ -1,16 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-import { FormControlLabel as m, typographyClasses as a, Radio as e } from "@mui/material";
-import { m as l } from "../../../../chunks/index.DJYQ_-zP.js";
-import { memo as s } from "react";
+import { FormControlLabel as a, typographyClasses as l, Radio as m } from "@mui/material";
+import { l as s } from "../../../../chunks/lodash.DOeeRDpT.js";
+import { memo as e } from "react";
 import { FontNormalSxProps as i } from "../../../../_constants.js";
-const n = s(({ label: t, ...o }) => /* @__PURE__ */ r(
-  m,
+const n = e(({ label: t, ...o }) => /* @__PURE__ */ r(
+  a,
   {
     control: /* @__PURE__ */ r(
-      e,
+      m,
       {
         ...o,
-        sx: l(
+        sx: s.merge(
           {
             color: "var(--color-primary)",
             ":focus": {
@@ -26,7 +26,7 @@ const n = s(({ label: t, ...o }) => /* @__PURE__ */ r(
       }
     ),
     label: t,
-    sx: { [`.${a.root}`]: i }
+    sx: { [`.${l.root}`]: i }
   }
 ));
 export {

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

	@@ -1 +1 @@
1	- {"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 typographyClasses,\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={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n />\n );\n});\n"],"names":["AoaRadioButton","memo","label","props","jsx","MUIFormControlLabel","MUIRadioButton","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;AAmCO,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,CAAC,IAAIM,EAAkB,IAAI,EAAE,GAAGC,EAAkB;AAAA,EAAA;AAC1D,CAEH;"}
1	+ {"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 typographyClasses,\n type RadioProps as MUIRadioButtonProps\n} from '@mui/material';\nimport { merge } from 'lodash';\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={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n />\n );\n});\n"],"names":["AoaRadioButton","memo","label","props","jsx","MUIFormControlLabel","MUIRadioButton","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;AAmCO,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,EAAA;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,CAAC,IAAIM,EAAkB,IAAI,EAAE,GAAGC,EAAkB;AAAA,EAAA;AAC1D,CAEH;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAGL,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"}
1	+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAGL,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,2CAiM1E;AAED,eAAO,MAAM,QAAQ,EAA+B,OAAO,kBAAkB,CAAC"}

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

@@ -1,41 +1,39 @@
 import { jsx as F } from "react/jsx-runtime";
-import { checkboxClasses as f, paginationItemClasses as P } from "@mui/material";
-import { DataGrid as I, gridClasses as o } from "@mui/x-data-grid";
-import { m as T } from "../../../chunks/index.DJYQ_-zP.js";
-import { memo as j, useState as i, useCallback as h, useEffect as C } from "react";
+import { checkboxClasses as h, paginationItemClasses as P } from "@mui/material";
+import { DataGrid as p, gridClasses as o } from "@mui/x-data-grid";
+import { l as T } from "../../../chunks/lodash.DOeeRDpT.js";
+import { memo as j, useState as l, useCallback as f, useEffect as x } from "react";
 import { FontNormalSxProps as H } from "../../../_constants.js";
-import { QuickSearchToolbar as L } from "./_QuickSearchToolbar.js";
-function p(e) {
-  var b, v, k;
-  const [S, u] = i(!1), [n, x] = i({
+import { QuickSearchToolbar as I } from "./_QuickSearchToolbar.js";
+function L(e) {
+  var m, k, v;
+  const [C, u] = l(!1), [i, S] = l({
     page: 0,
     pageSize: 10
-  }), [s, M] = i([]), [c, y] = i({
+  }), [n, M] = l([]), [s, y] = l({
     items: []
-  }), l = e.mode ?? "server", d = l === "server", $ = h((t) => {
+  }), r = e.mode ?? "server", c = r === "server", $ = f((t) => {
     M(t);
-  }, []), w = h((t) => {
+  }, []), w = f((t) => {
     y(t);
-  }, []), [R, g] = i(((b = e.data) == null ? void 0 : b.totalItems) || 0);
-  async function m(t, a, r) {
-    if (d && e.getData) {
+  }, []), [R, g] = l(((m = e.data) == null ? void 0 : m.totalItems) || 0);
+  async function b(t, a, d) {
+    if (c && e.getData) {
       const D = async () => {
-        await e.getData({ ...t, sortModel: a, filterModel: r });
+        await e.getData({ ...t, sortModel: a, filterModel: d });
       };
       u(!0), await D(), u(!1);
     }
   }
-  return C(() => {
-    g(
-      (t) => {
-        var a, r;
-        return ((a = e.data) == null ? void 0 : a.totalItems) === void 0 ? t : (r = e.data) == null ? void 0 : r.totalItems;
-      }
-    );
-  }, [(v = e.data) == null ? void 0 : v.totalItems, g]), C(() => {
-    m(n, s, c);
-  }, [n, s, c]), /* @__PURE__ */ F(
-    I,
+  return x(() => {
+    g((t) => {
+      var a;
+      return ((a = e.data) == null ? void 0 : a.totalItems) ?? t;
+    });
+  }, [(k = e.data) == null ? void 0 : k.totalItems, g]), x(() => {
+    b(i, n, s);
+  }, [i, n, s]), /* @__PURE__ */ F(
+    p,
     {
       columns: e.columns,
       "data-qa": e["data-qa"],
@@ -45,14 +43,14 @@ function p(e) {
       disableDensitySelector: !0,
       disableRowSelectionOnClick: !0,
       disableVirtualization: !0,
-      filterMode: l,
+      filterMode: r,
       getRowHeight: () => "auto",
       initialState: {
         sorting: {
           sortModel: e.initialSort ? [e.initialSort] : []
         }
       },
-      loading: S,
+      loading: C,
       localeText: e.localeText ?? {
         columnHeaderSortIconLabel: "Sorteren",
         toolbarQuickFilterPlaceholder: "Zoeken...",
@@ -61,35 +59,35 @@ function p(e) {
         noRowsLabel: "Geen regels beschikbaar",
         noResultsOverlayLabel: "Geen regels gevonden.",
         MuiTablePagination: {
-          labelDisplayedRows: ({ from: t, to: a, count: r }) => `${t} - ${a} van ${r}`,
+          labelDisplayedRows: ({ from: t, to: a, count: d }) => `${t} - ${a} van ${d}`,
           labelRowsPerPage: "Regels per pagina"
         },
         footerRowSelected: (t) => `${t} regels geselecteerd`
       },
       onFilterModelChange: w,
-      onPaginationModelChange: x,
+      onPaginationModelChange: S,
       onSortModelChange: $,
       pageSizeOptions: [5, 10, 20, 40, 80],
-      paginationMode: l,
-      paginationModel: n,
-      rowCount: d ? R : void 0,
-      rows: (k = e.data) == null ? void 0 : k.items,
+      paginationMode: r,
+      paginationModel: i,
+      rowCount: c ? R : void 0,
+      rows: (v = e.data) == null ? void 0 : v.items,
       slotProps: {
         toolbar: {
           showQuickFilter: !0,
           quickFilterProps: { debounceMs: 500 },
-          mode: l,
-          isServerMode: d,
-          getData: async () => m(n, s, c),
+          mode: r,
+          isServerMode: c,
+          getData: async () => b(i, n, s),
           actionButtons: e.actionButtons,
           localeText: e.localeText
         }
       },
       slots: {
-        toolbar: L
+        toolbar: I
       },
-      sortingMode: l,
-      sx: T(
+      sortingMode: r,
+      sx: T.merge(
         {
           border: 0,
           color: "var(--color-text)",
@@ -145,7 +143,7 @@ function p(e) {
           [`.${P.root}`]: {
             borderRadius: 0
           },
-          [`.${f.root}`]: {
+          [`.${h.root}`]: {
             color: "var(--color-primary)",
             ":focus": {
               outline: "2px dashed var(--color-text)",
@@ -156,7 +154,7 @@ function p(e) {
               color: "var(--color-disabled)"
             }
           },
-          [`.${o.columnHeader} .${f.root}`]: {
+          [`.${o.columnHeader} .${h.root}`]: {
             color: "white"
           }
         },
@@ -167,8 +165,8 @@ function p(e) {
     }
   );
 }
-const N = j(p);
+const E = j(L);
 export {
-  N as AoaTable
+  E as AoaTable
 };
 //# sourceMappingURL=Table.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { checkboxClasses, paginationItemClasses, type SxProps } from '@mui/material';\nimport {\n DataGrid,\n gridClasses,\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 [`&.${gridClasses['root--densityCompact']}`]: {\n [`.${gridClasses.cell}`]: {\n py: '8px'\n }\n },\n [`&.${gridClasses['root--densityStandard']}`]: {\n [`.${gridClasses.cell}`]: {\n py: '15px'\n }\n },\n [`&.${gridClasses['root--densityComfortable']}`]: {\n [`.${gridClasses.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 [`.${gridClasses.virtualScroller}`]: {\n minHeight: '150px',\n overflow: 'hidden',\n position: 'relative'\n },\n\n [`.${gridClasses.columnHeaders}`]: {\n '--DataGrid-containerBackground': 'var(--color-rijks-skyblue)',\n backgroundCcolor: 'var(--color-rijks-skyblue)',\n color: 'var(--color-text-light)'\n },\n\n [`.${gridClasses.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 [`.${gridClasses.columnHeader}, .${gridClasses.cell}, .MuiDataGrid-columnsContainer`]: {\n borderRight: '1px solid var(--color-rijks-grey-2)'\n },\n\n [`.${gridClasses.cell}`]: {\n color: 'var(--color-text)'\n },\n\n [`.${paginationItemClasses.root}`]: {\n borderRadius: 0\n },\n\n [`.${checkboxClasses.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 [`.${gridClasses.columnHeader} .${checkboxClasses.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","gridClasses","paginationItemClasses","checkboxClasses","FontNormalSxProps","AoaTable","memo"],"mappings":"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"}
1	+ {"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { checkboxClasses, paginationItemClasses, type SxProps } from '@mui/material';\nimport {\n DataGrid,\n gridClasses,\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';\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) => props.data?.totalItems ?? prevRowCountState);\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 [`&.${gridClasses['root--densityCompact']}`]: {\n [`.${gridClasses.cell}`]: {\n py: '8px'\n }\n },\n [`&.${gridClasses['root--densityStandard']}`]: {\n [`.${gridClasses.cell}`]: {\n py: '15px'\n }\n },\n [`&.${gridClasses['root--densityComfortable']}`]: {\n [`.${gridClasses.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 [`.${gridClasses.virtualScroller}`]: {\n minHeight: '150px',\n overflow: 'hidden',\n position: 'relative'\n },\n\n [`.${gridClasses.columnHeaders}`]: {\n '--DataGrid-containerBackground': 'var(--color-rijks-skyblue)',\n backgroundCcolor: 'var(--color-rijks-skyblue)',\n color: 'var(--color-text-light)'\n },\n\n [`.${gridClasses.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 [`.${gridClasses.columnHeader}, .${gridClasses.cell}, .MuiDataGrid-columnsContainer`]: {\n borderRight: '1px solid var(--color-rijks-grey-2)'\n },\n\n [`.${gridClasses.cell}`]: {\n color: 'var(--color-text)'\n },\n\n [`.${paginationItemClasses.root}`]: {\n borderRadius: 0\n },\n\n [`.${checkboxClasses.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 [`.${gridClasses.columnHeader} .${checkboxClasses.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","gridClasses","paginationItemClasses","checkboxClasses","FontNormalSxProps","AoaTable","memo"],"mappings":";;;;;;;AAwHA,SAASA,EAA2CC,GAAyB;;AAC3E,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAiBC,CAAkB,IAAIF,EAA0B;AAAA,IACtE,MAAM;AAAA,IACN,UAAU;AAAA,EAAA,CACX,GACK,CAACG,GAAWC,CAAY,IAAIJ,EAAwB,CAAA,CAAE,GACtD,CAACK,GAAaC,CAAc,IAAIN,EAA0B;AAAA,IAC9D,OAAO,CAAA;AAAA,EAAC,CACT,GAEKO,IAAOV,EAAM,QAAQ,UACrBW,IAAeD,MAAS,UAExBE,IAAwBC,EAAY,CAACP,MAA6B;AACtE,IAAAC,EAAaD,CAAS;AAAA,EACxB,GAAG,EAAE,GAECQ,IAAiBD,EAAY,CAACL,MAAiC;AACnE,IAAAC,EAAeD,CAAW;AAAA,EAC5B,GAAG,EAAE,GAEC,CAACO,GAAeC,CAAgB,IAAIb,IAASc,IAAAjB,EAAM,SAAN,gBAAAiB,EAAY,eAAc,CAAC;AAE/D,iBAAAC,EAAQd,GAAkCE,GAA0BE,GAA8B;AAC3G,QAAAG,KAAgBX,EAAM,SAAS;AACjC,YAAMmB,IAAY,YAAY;AACtB,cAAAnB,EAAM,QAAQ,EAAE,GAAGI,GAAiB,WAAAE,GAAW,aAAAE,GAAa;AAAA,MACpE;AAEA,MAAAN,EAAa,EAAI,GACjB,MAAMiB,EAAU,GAChBjB,EAAa,EAAK;AAAA,IAAA;AAAA,EACpB;AAGF,SAAAkB,EAAU,MAAM;AACd,IAAAJ,EAAiB,CAACK,MAAsB;;AAAA,eAAAJ,IAAAjB,EAAM,SAAN,gBAAAiB,EAAY,eAAcI;AAAA,KAAiB;AAAA,KAClF,EAACC,IAAAtB,EAAM,SAAN,gBAAAsB,EAAY,YAAYN,CAAgB,CAAC,GAE7CI,EAAU,MAAM;AACT,IAAAF,EAAQd,GAAiBE,GAAWE,CAAW;AAAA,EAInD,GAAA,CAACJ,GAAiBE,GAAWE,CAAW,CAAC,GAG1C,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASxB,EAAM;AAAA,MACf,WAASA,EAAM,SAAS;AAAA,MACxB,qBAAmB;AAAA,MACnB,mBAAiB;AAAA,MACjB,uBAAqB;AAAA,MACrB,wBAAsB;AAAA,MACtB,4BAA0B;AAAA,MAC1B,uBAAqB;AAAA,MACrB,YAAYU;AAAA,MACZ,cAAc,MAAM;AAAA,MACpB,cAAc;AAAA,QACZ,SAAS;AAAA,UACP,WAAWV,EAAM,cAAc,CAACA,EAAM,WAAW,IAAI,CAAA;AAAA,QAAC;AAAA,MAE1D;AAAA,MACA,SAASC;AAAA,MACT,YACED,EAAM,cAAc;AAAA,QAClB,2BAA2B;AAAA,QAC3B,+BAA+B;AAAA,QAC/B,yBAAyB;AAAA,QACzB,mCAAmC;AAAA,QACnC,aAAa;AAAA,QACb,uBAAuB;AAAA,QACvB,oBAAoB;AAAA,UAClB,oBAAoB,CAAC,EAAE,MAAAyB,GAAM,IAAAC,GAAI,OAAAC,EAAY,MAAA,GAAGF,CAAI,MAAMC,CAAE,QAAQC,CAAK;AAAA,UACzE,kBAAkB;AAAA,QACpB;AAAA,QACA,mBAAmB,CAACA,MAAU,GAAGA,CAAK;AAAA,MACxC;AAAA,MAEF,qBAAqBb;AAAA,MACrB,yBAAyBT;AAAA,MACzB,mBAAmBO;AAAA,MACnB,iBAAiB,CAAC,GAAG,IAAI,IAAI,IAAI,EAAE;AAAA,MACnC,gBAAgBF;AAAA,MAChB,iBAAAN;AAAA,MACA,UAAUO,IAAeI,IAAgB;AAAA,MACzC,OAAMa,IAAA5B,EAAM,SAAN,gBAAA4B,EAAY;AAAA,MAClB,WAAW;AAAA,QACT,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,kBAAkB,EAAE,YAAY,IAAI;AAAA,UACpC,MAAAlB;AAAA,UACA,cAAAC;AAAA,UACA,SAAS,YAAYO,EAAQd,GAAiBE,GAAWE,CAAW;AAAA,UACpE,eAAeR,EAAM;AAAA,UACrB,YAAYA,EAAM;AAAA,QAAA;AAAA,MAEtB;AAAA,MACA,OAAO;AAAA,QACL,SAAS6B;AAAA,MACX;AAAA,MACA,aAAanB;AAAA,MACb,IAAIoB,EAAA;AAAA,QACF;AAAA,UACE,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,eAAe;AAAA,UACf,WAAW;AAAA,UAEX,CAAC,KAAKC,EAAY,sBAAsB,CAAC,EAAE,GAAG;AAAA,YAC5C,CAAC,IAAIA,EAAY,IAAI,EAAE,GAAG;AAAA,cACxB,IAAI;AAAA,YAAA;AAAA,UAER;AAAA,UACA,CAAC,KAAKA,EAAY,uBAAuB,CAAC,EAAE,GAAG;AAAA,YAC7C,CAAC,IAAIA,EAAY,IAAI,EAAE,GAAG;AAAA,cACxB,IAAI;AAAA,YAAA;AAAA,UAER;AAAA,UACA,CAAC,KAAKA,EAAY,0BAA0B,CAAC,EAAE,GAAG;AAAA,YAChD,CAAC,IAAIA,EAAY,IAAI,EAAE,GAAG;AAAA,cACxB,IAAI;AAAA,YAAA;AAAA,UAER;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOA,CAAC,IAAIA,EAAY,eAAe,EAAE,GAAG;AAAA,YACnC,WAAW;AAAA,YACX,UAAU;AAAA,YACV,UAAU;AAAA,UACZ;AAAA,UAEA,CAAC,IAAIA,EAAY,aAAa,EAAE,GAAG;AAAA,YACjC,kCAAkC;AAAA,YAClC,kBAAkB;AAAA,YAClB,OAAO;AAAA,UACT;AAAA,UAEA,CAAC,IAAIA,EAAY,GAAG,EAAE,GAAG;AAAA,YACvB,UAAU;AAAA,cACR,iBAAiB;AAAA,YACnB;AAAA,YAEA,sBAAsB;AAAA,cACpB,iBAAiB;AAAA,cAEjB,UAAU;AAAA,gBACR,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAEJ;AAAA,UAEA,CAAC,IAAIA,EAAY,YAAY,MAAMA,EAAY,IAAI,iCAAiC,GAAG;AAAA,YACrF,aAAa;AAAA,UACf;AAAA,UAEA,CAAC,IAAIA,EAAY,IAAI,EAAE,GAAG;AAAA,YACxB,OAAO;AAAA,UACT;AAAA,UAEA,CAAC,IAAIC,EAAsB,IAAI,EAAE,GAAG;AAAA,YAClC,cAAc;AAAA,UAChB;AAAA,UAEA,CAAC,IAAIC,EAAgB,IAAI,EAAE,GAAG;AAAA,YAC5B,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,UAEA,CAAC,IAAIF,EAAY,YAAY,KAAKE,EAAgB,IAAI,EAAE,GAAG;AAAA,YACzD,OAAO;AAAA,UAAA;AAAA,QAEX;AAAA,QACAjC,EAAM;AAAA,QACNkC;AAAA,MACF;AAAA,MACC,GAAGlC,EAAM;AAAA,IAAA;AAAA,EACZ;AAEJ;AAEa,MAAAmC,IAAWC,EAAKrC,CAAkB;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"AAWA,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"}
1	+ {"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"AAWA,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,6CAoG5C,CAAC"}

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

@@ -21,6 +21,7 @@ const R = v(
         alignItems: "center",
         justifyContent: "flex-end",
         paddingBottom: "10px",
+        /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */
         "&.server-mode :nth-child(2)": {
           marginLeft: "auto"
         },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"_QuickSearchToolbar.js","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material';\nimport {\n Box,\n inputBaseClasses,\n inputClasses,\n formControlClasses,\n svgIconClasses,\n touchRippleClasses,\n textFieldClasses,\n buttonBaseClasses\n} 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 [`.${buttonBaseClasses.root}`]: {\n width: '48px',\n marginRight: '10px'\n },\n\n [`.${formControlClasses.root}.${textFieldClasses.root}`]: {\n paddingBottom: 0,\n\n [`.${inputClasses.root}`]: {\n position: 'relative',\n\n ':before, :after': {\n borderBottom: 'transparent'\n },\n\n [`.${svgIconClasses.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 [`.${inputBaseClasses.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 [`.${buttonBaseClasses.root}`]: {\n position: 'absolute',\n right: '48px',\n height: '24px',\n width: '24px',\n marginRight: '4px',\n\n [`.${svgIconClasses.root}`]: {\n color: 'var(--color-primary)',\n background: 'none'\n },\n\n ':hover, :active, :focus': {\n backgroundColor: 'transparent'\n },\n\n [`.${touchRippleClasses.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","buttonBaseClasses","formControlClasses","textFieldClasses","inputClasses","svgIconClasses","inputBaseClasses","touchRippleClasses","jsx","AoaIconButton","RefreshIcon","button","GridToolbarQuickFilter"],"mappings":";;;;;;AAgCO,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,CAAC,IAAIQ,EAAkB,IAAI,EAAE,GAAG;AAAA,UAC9B,OAAO;AAAA,UACP,aAAa;AAAA,QACf;AAAA,QAEA,CAAC,IAAIC,EAAmB,IAAI,IAAIC,EAAiB,IAAI,EAAE,GAAG;AAAA,UACxD,eAAe;AAAA,UAEf,CAAC,IAAIC,EAAa,IAAI,EAAE,GAAG;AAAA,YACzB,UAAU;AAAA,YAEV,mBAAmB;AAAA,cACjB,cAAc;AAAA,YAChB;AAAA,YAEA,CAAC,IAAIC,EAAe,IAAI,EAAE,GAAG;AAAA,cAC3B,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,CAAC,IAAIC,EAAiB,KAAK,EAAE,GAAG;AAAA,cAC9B,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,CAAC,IAAIL,EAAkB,IAAI,EAAE,GAAG;AAAA,cAC9B,UAAU;AAAA,cACV,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,aAAa;AAAA,cAEb,CAAC,IAAII,EAAe,IAAI,EAAE,GAAG;AAAA,gBAC3B,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEA,2BAA2B;AAAA,gBACzB,iBAAiB;AAAA,cACnB;AAAA,cAEA,CAAC,IAAIE,EAAmB,IAAI,EAAE,GAAG;AAAA,gBAC/B,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MAEJ;AAAA,MAEC,UAAA;AAAA,QACCb,KAAA,gBAAAc,EAACC,GAAc,EAAA,MAAO,gBAAAD,EAAAE,GAAA,CAAA,CAAY,GAAI,QAAOb,KAAA,gBAAAA,EAAY,iBAAgB,iBAAiB,SAASD,EAAS,CAAA;AAAA,QAE7GD,KAAA,gBAAAA,EAAe,IAAI,CAACgB,MAAwBA;AAAA,QAC7C,gBAAAH,EAACI,GAAwB,EAAA,GAAGd,EAAkB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
1	+ {"version":3,"file":"_QuickSearchToolbar.js","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material';\nimport {\n Box,\n inputBaseClasses,\n inputClasses,\n formControlClasses,\n svgIconClasses,\n touchRippleClasses,\n textFieldClasses,\n buttonBaseClasses\n} 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 /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */\n '&.server-mode :nth-child(2)': {\n marginLeft: 'auto'\n },\n\n [`.${buttonBaseClasses.root}`]: {\n width: '48px',\n marginRight: '10px'\n },\n\n [`.${formControlClasses.root}.${textFieldClasses.root}`]: {\n paddingBottom: 0,\n\n [`.${inputClasses.root}`]: {\n position: 'relative',\n\n ':before, :after': {\n borderBottom: 'transparent'\n },\n\n [`.${svgIconClasses.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 [`.${inputBaseClasses.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 [`.${buttonBaseClasses.root}`]: {\n position: 'absolute',\n right: '48px',\n height: '24px',\n width: '24px',\n marginRight: '4px',\n\n [`.${svgIconClasses.root}`]: {\n color: 'var(--color-primary)',\n background: 'none'\n },\n\n ':hover, :active, :focus': {\n backgroundColor: 'transparent'\n },\n\n [`.${touchRippleClasses.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","buttonBaseClasses","formControlClasses","textFieldClasses","inputClasses","svgIconClasses","inputBaseClasses","touchRippleClasses","jsx","AoaIconButton","RefreshIcon","button","GridToolbarQuickFilter"],"mappings":";;;;;;AAgCO,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;AAAA,QAGf,+BAA+B;AAAA,UAC7B,YAAY;AAAA,QACd;AAAA,QAEA,CAAC,IAAIQ,EAAkB,IAAI,EAAE,GAAG;AAAA,UAC9B,OAAO;AAAA,UACP,aAAa;AAAA,QACf;AAAA,QAEA,CAAC,IAAIC,EAAmB,IAAI,IAAIC,EAAiB,IAAI,EAAE,GAAG;AAAA,UACxD,eAAe;AAAA,UAEf,CAAC,IAAIC,EAAa,IAAI,EAAE,GAAG;AAAA,YACzB,UAAU;AAAA,YAEV,mBAAmB;AAAA,cACjB,cAAc;AAAA,YAChB;AAAA,YAEA,CAAC,IAAIC,EAAe,IAAI,EAAE,GAAG;AAAA,cAC3B,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,CAAC,IAAIC,EAAiB,KAAK,EAAE,GAAG;AAAA,cAC9B,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,CAAC,IAAIL,EAAkB,IAAI,EAAE,GAAG;AAAA,cAC9B,UAAU;AAAA,cACV,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,aAAa;AAAA,cAEb,CAAC,IAAII,EAAe,IAAI,EAAE,GAAG;AAAA,gBAC3B,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEA,2BAA2B;AAAA,gBACzB,iBAAiB;AAAA,cACnB;AAAA,cAEA,CAAC,IAAIE,EAAmB,IAAI,EAAE,GAAG;AAAA,gBAC/B,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MAEJ;AAAA,MAEC,UAAA;AAAA,QACCb,KAAA,gBAAAc,EAACC,GAAc,EAAA,MAAO,gBAAAD,EAAAE,GAAA,CAAA,CAAY,GAAI,QAAOb,KAAA,gBAAAA,EAAY,iBAAgB,iBAAiB,SAASD,EAAS,CAAA;AAAA,QAE7GD,KAAA,gBAAAA,EAAe,IAAI,CAACgB,MAAwBA;AAAA,QAC7C,gBAAAH,EAACI,GAAwB,EAAA,GAAGd,EAAkB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/dist/components/molecules/field-error/FieldError.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+export interface AoaFieldErrorProps {
+    readonly 'data-qa'?: string;
+}
+/**
+ * Constructs a custom error message for a field **using pre-defined Rijks styling**
+ *
+ * This component is intended for internal use only and should always be used through `<field.AoaFieldError />`
+ *
+ * @internal
+ * @param param0 - Props to pass to the field error
+ * @returns A custom error message for a field
+ * @example
+ * ```jsx
+ * <form.AppField name='name'>
+ *   {(field) => {
+ *     return <field.AoaFieldError />;
+ *   }}
+ * </form.AppField>
+ * ```
+ */
+export declare function AoaFieldError<TData>({ 'data-qa': dataQa }: AoaFieldErrorProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FieldError.d.ts.map

package/dist/components/molecules/field-error/FieldError.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"FieldError.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/field-error/FieldError.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,kBAAkB,kDAiB7E"}

package/dist/components/molecules/field-error/FieldError.js ADDED Viewed

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import { A as p } from "../../../chunks/FieldError.DAUtZvvC.js";
+import "../../atoms/notification/Notification.js";
+export {
+  p as AoaFieldError
+};
+//# sourceMappingURL=FieldError.js.map

package/dist/components/molecules/field-error/FieldError.js.map ADDED Viewed

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

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

@@ -1,7 +1,20 @@
-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>> {
+export interface AoaFormErrorProps {
     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;
+/**
+ * Constructs a custom error message for a form **using pre-defined Rijks styling**
+ *
+ * This component is intended for internal use only and should always be used through `<form.AoaFormError />`
+ *
+ * @internal
+ * @param param0 - Props to pass to the form error
+ * @returns A custom error message for a form
+ * @example
+ * ```jsx
+ * <form.AppForm>
+ *   <form.AoaFormError />
+ * </form.AppForm>
+ * ```
+ */
+export declare function AoaFormError({ 'data-qa': dataQa }: AoaFormErrorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FormError.d.ts.map

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

	@@ -1 +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,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~~"}
1	+ {"version":3,"file":"FormError.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/form-error/FormError.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAuBpE"}

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

@@ -1,13 +1,7 @@
-import { jsx as a } from "react/jsx-runtime";
-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, { "data-qa": o ?? "form-error", message: e, severity: "error" }) : null;
-  }
-  return null;
-}
+import "react/jsx-runtime";
+import { a as p } from "../../../chunks/FieldError.DAUtZvvC.js";
+import "../../atoms/notification/Notification.js";
 export {
-  i as AoaFormError
+  p as AoaFormError
 };
 //# sourceMappingURL=FormError.js.map

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

	@@ -1 +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 '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;"}
1	+ {"version":3,"file":"FormError.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

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

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

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

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