@rws-aoa/react-library 3.6.6 → 5.0.0

package/dist/components/atoms/input/Input.js

@@ -1,63 +1,69 @@
-import { jsx as t } from "react/jsx-runtime";
-import { TextField as i } from "@mui/material";
-import { m as a } from "../../../chunks/index.DJYQ_-zP.js";
-import { memo as l } from "react";
-import { FontNormalSxProps as r } from "../../../_constants.js";
-const m = l(({ optional: e, ...o }) => /* @__PURE__ */ t(
-  i,
-  {
-    ...o,
-    InputLabelProps: { shrink: !1, ...o.InputLabelProps },
-    required: !e,
-    sx: a(
-      {
-        ".MuiInputBase-root": {
-          ...r,
-          marginTop: "35px",
-          "&.MuiInputBase-multiline": {
-            padding: 0
-          },
-          ":not(.Mui-error)::after": {
-            borderColor: "var(--color-rijks-skyblue)"
+import { jsx as i } from "react/jsx-runtime";
+import { TextField as s, inputLabelClasses as n, formHelperTextClasses as o, inputBaseClasses as e } from "@mui/material";
+import { l as d } from "../../../chunks/lodash.DOeeRDpT.js";
+import { memo as p } from "react";
+import { FontNormalSxProps as t } from "../../../_constants.js";
+const u = p(({ optional: a, ...r }) => {
+  var l;
+  return /* @__PURE__ */ i(
+    s,
+    {
+      ...r,
+      required: !a,
+      slotProps: {
+        inputLabel: { shrink: !1, ...(l = r.slotProps) == null ? void 0 : l.inputLabel },
+        ...r.slotProps
+      },
+      sx: d.merge(
+        {
+          [`.${e.root}`]: {
+            ...t,
+            marginTop: "35px",
+            [`&.${e.multiline}`]: {
+              padding: 0
+            },
+            [`:not(.${o.error})::after`]: {
+              borderColor: "var(--color-rijks-skyblue)"
+            },
+            [`.${e.input}`]: {
+              padding: "17px 12px 16px",
+              ":disabled": {
+                backgroundColor: "var(--color-disabled)",
+                borderColor: "var(--color-disabled)"
+              }
+            }
           },
-          ".MuiInputBase-input": {
-            padding: "17px 12px 16px",
+          [`.${n.root}`]: {
+            ...t,
+            marginLeft: "-14px",
+            marginTop: "-10px",
             ":disabled": {
-              backgroundColor: "var(--color-disabled)",
-              borderColor: "var(--color-disabled)"
+              color: "var(--color-text-disabled)"
+            },
+            [`:focus:not(.${o.error})`]: {
+              color: "var(--color-rijks-skyblue)"
+            },
+            [`:not(.${o.required})::after`]: {
+              content: '"(optioneel)"',
+              marginLeft: "5px",
+              fontSize: "calc(var(--font-size-text) * 0.75)"
+            },
+            [`&.${o.error}`]: {
+              ...t,
+              fontWeight: "bold"
+            },
+            [`&.${o.disabled}`]: {
+              color: "var(--color-text-disabled)"
             }
           }
         },
-        ".MuiInputLabel-root": {
-          ...r,
-          marginLeft: "-14px",
-          marginTop: "-10px",
-          ":disabled": {
-            color: "var(--color-text-disabled)"
-          },
-          ":focus:not(.Mui-error)": {
-            color: "var(--color-rijks-skyblue)"
-          },
-          ":not(.Mui-required)::after": {
-            content: '"(optioneel)"',
-            marginLeft: "5px",
-            fontSize: "calc(var(--font-size-text) * 0.75)"
-          },
-          "&.Mui-error": {
-            ...r,
-            fontWeight: "bold"
-          },
-          "&.Mui-disabled": {
-            color: "var(--color-text-disabled)"
-          }
-        }
-      },
-      o.sx
-    ),
-    variant: "outlined"
-  }
-));
+        r.sx
+      ),
+      variant: "outlined"
+    }
+  );
+});
 export {
-  m as AoaInput
+  u as AoaInput
 };
 //# sourceMappingURL=Input.js.map

package/dist/components/atoms/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/atoms/input/Input.tsx"],"sourcesContent":["import { TextField, type TextFieldProps } from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\n\nexport interface AoaInputProps extends Omit<TextFieldProps, 'variant'> {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * Whether this input field is optional\n   */\n  readonly optional?: boolean;\n}\n\n/**\n * Constructs an input field using pre-defined Rijks styling\n *\n * @param props - Props to pass to the input field\n * @example\n * ```jsx\n * <AoaInput label=\"User name\" value={value} onChange={() => handleOnChange} />\n * ```\n */\nexport const AoaInput = memo(({ optional, ...props }: AoaInputProps): ReactNode => {\n  return (\n    <TextField\n      {...props}\n      InputLabelProps={{ shrink: false, ...props.InputLabelProps }}\n      required={!optional}\n      sx={merge(\n        {\n          '.MuiInputBase-root': {\n            ...FontNormalSxProps,\n            marginTop: '35px',\n\n            '&.MuiInputBase-multiline': {\n              padding: 0\n            },\n\n            ':not(.Mui-error)::after': {\n              borderColor: 'var(--color-rijks-skyblue)'\n            },\n\n            '.MuiInputBase-input': {\n              padding: '17px 12px 16px',\n\n              ':disabled': {\n                backgroundColor: 'var(--color-disabled)',\n                borderColor: 'var(--color-disabled)'\n              }\n            }\n          },\n\n          '.MuiInputLabel-root': {\n            ...FontNormalSxProps,\n            marginLeft: '-14px',\n            marginTop: '-10px',\n\n            ':disabled': {\n              color: 'var(--color-text-disabled)'\n            },\n\n            ':focus:not(.Mui-error)': {\n              color: 'var(--color-rijks-skyblue)'\n            },\n\n            ':not(.Mui-required)::after': {\n              content: '\"(optioneel)\"',\n              marginLeft: '5px',\n              fontSize: 'calc(var(--font-size-text) * 0.75)'\n            },\n\n            '&.Mui-error': {\n              ...FontNormalSxProps,\n              fontWeight: 'bold'\n            },\n\n            '&.Mui-disabled': {\n              color: 'var(--color-text-disabled)'\n            }\n          }\n        },\n        props.sx\n      )}\n      variant='outlined'\n    />\n  );\n});\n"],"names":["AoaInput","memo","optional","props","jsx","TextField","merge","FontNormalSxProps"],"mappings":";;;;;AAyBO,MAAMA,IAAWC,EAAK,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAEzC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,iBAAiB,EAAE,QAAQ,IAAO,GAAGA,EAAM,gBAAgB;AAAA,IAC3D,UAAU,CAACD;AAAA,IACX,IAAII;AAAA,MACF;AAAA,QACE,sBAAsB;AAAA,UACpB,GAAGC;AAAA,UACH,WAAW;AAAA,UAEX,4BAA4B;AAAA,YAC1B,SAAS;AAAA,UACX;AAAA,UAEA,2BAA2B;AAAA,YACzB,aAAa;AAAA,UACf;AAAA,UAEA,uBAAuB;AAAA,YACrB,SAAS;AAAA,YAET,aAAa;AAAA,cACX,iBAAiB;AAAA,cACjB,aAAa;AAAA,YAAA;AAAA,UACf;AAAA,QAEJ;AAAA,QAEA,uBAAuB;AAAA,UACrB,GAAGA;AAAA,UACH,YAAY;AAAA,UACZ,WAAW;AAAA,UAEX,aAAa;AAAA,YACX,OAAO;AAAA,UACT;AAAA,UAEA,0BAA0B;AAAA,YACxB,OAAO;AAAA,UACT;AAAA,UAEA,8BAA8B;AAAA,YAC5B,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UAEA,eAAe;AAAA,YACb,GAAGA;AAAA,YACH,YAAY;AAAA,UACd;AAAA,UAEA,kBAAkB;AAAA,YAChB,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MAEJ;AAAA,MACAJ,EAAM;AAAA,IACR;AAAA,IACA,SAAQ;AAAA,EAAA;AACV,CAEH;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/atoms/input/Input.tsx"],"sourcesContent":["import {\n  TextField,\n  type TextFieldProps,\n  inputBaseClasses,\n  inputLabelClasses,\n  formHelperTextClasses\n} from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\n\nexport interface AoaInputProps extends Omit<TextFieldProps, 'variant'> {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * Whether this input field is optional\n   */\n  readonly optional?: boolean;\n}\n\n/**\n * Constructs an input field using pre-defined Rijks styling\n *\n * @param props - Props to pass to the input field\n * @example\n * ```jsx\n * <AoaInput label=\"User name\" value={value} onChange={() => handleOnChange} />\n * ```\n */\nexport const AoaInput = memo(({ optional, ...props }: AoaInputProps): ReactNode => {\n  return (\n    <TextField\n      {...props}\n      required={!optional}\n      slotProps={{\n        inputLabel: { shrink: false, ...props.slotProps?.inputLabel },\n        ...props.slotProps\n      }}\n      sx={merge(\n        {\n          [`.${inputBaseClasses.root}`]: {\n            ...FontNormalSxProps,\n            marginTop: '35px',\n\n            [`&.${inputBaseClasses.multiline}`]: {\n              padding: 0\n            },\n\n            [`:not(.${formHelperTextClasses.error})::after`]: {\n              borderColor: 'var(--color-rijks-skyblue)'\n            },\n\n            [`.${inputBaseClasses.input}`]: {\n              padding: '17px 12px 16px',\n\n              ':disabled': {\n                backgroundColor: 'var(--color-disabled)',\n                borderColor: 'var(--color-disabled)'\n              }\n            }\n          },\n\n          [`.${inputLabelClasses.root}`]: {\n            ...FontNormalSxProps,\n            marginLeft: '-14px',\n            marginTop: '-10px',\n\n            ':disabled': {\n              color: 'var(--color-text-disabled)'\n            },\n\n            [`:focus:not(.${formHelperTextClasses.error})`]: {\n              color: 'var(--color-rijks-skyblue)'\n            },\n\n            [`:not(.${formHelperTextClasses.required})::after`]: {\n              content: '\"(optioneel)\"',\n              marginLeft: '5px',\n              fontSize: 'calc(var(--font-size-text) * 0.75)'\n            },\n\n            [`&.${formHelperTextClasses.error}`]: {\n              ...FontNormalSxProps,\n              fontWeight: 'bold'\n            },\n\n            [`&.${formHelperTextClasses.disabled}`]: {\n              color: 'var(--color-text-disabled)'\n            }\n          }\n        },\n        props.sx\n      )}\n      variant='outlined'\n    />\n  );\n});\n"],"names":["AoaInput","memo","optional","props","jsx","TextField","_a","merge","inputBaseClasses","FontNormalSxProps","formHelperTextClasses","inputLabelClasses"],"mappings":";;;;;AA+BO,MAAMA,IAAWC,EAAK,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAAsC;;AAE/E,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,UAAU,CAACD;AAAA,MACX,WAAW;AAAA,QACT,YAAY,EAAE,QAAQ,IAAO,IAAGI,IAAAH,EAAM,cAAN,gBAAAG,EAAiB,WAAW;AAAA,QAC5D,GAAGH,EAAM;AAAA,MACX;AAAA,MACA,IAAII,EAAA;AAAA,QACF;AAAA,UACE,CAAC,IAAIC,EAAiB,IAAI,EAAE,GAAG;AAAA,YAC7B,GAAGC;AAAA,YACH,WAAW;AAAA,YAEX,CAAC,KAAKD,EAAiB,SAAS,EAAE,GAAG;AAAA,cACnC,SAAS;AAAA,YACX;AAAA,YAEA,CAAC,SAASE,EAAsB,KAAK,UAAU,GAAG;AAAA,cAChD,aAAa;AAAA,YACf;AAAA,YAEA,CAAC,IAAIF,EAAiB,KAAK,EAAE,GAAG;AAAA,cAC9B,SAAS;AAAA,cAET,aAAa;AAAA,gBACX,iBAAiB;AAAA,gBACjB,aAAa;AAAA,cAAA;AAAA,YACf;AAAA,UAEJ;AAAA,UAEA,CAAC,IAAIG,EAAkB,IAAI,EAAE,GAAG;AAAA,YAC9B,GAAGF;AAAA,YACH,YAAY;AAAA,YACZ,WAAW;AAAA,YAEX,aAAa;AAAA,cACX,OAAO;AAAA,YACT;AAAA,YAEA,CAAC,eAAeC,EAAsB,KAAK,GAAG,GAAG;AAAA,cAC/C,OAAO;AAAA,YACT;AAAA,YAEA,CAAC,SAASA,EAAsB,QAAQ,UAAU,GAAG;AAAA,cACnD,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,UAAU;AAAA,YACZ;AAAA,YAEA,CAAC,KAAKA,EAAsB,KAAK,EAAE,GAAG;AAAA,cACpC,GAAGD;AAAA,cACH,YAAY;AAAA,YACd;AAAA,YAEA,CAAC,KAAKC,EAAsB,QAAQ,EAAE,GAAG;AAAA,cACvC,OAAO;AAAA,YAAA;AAAA,UACT;AAAA,QAEJ;AAAA,QACAP,EAAM;AAAA,MACR;AAAA,MACA,SAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}

package/dist/components/atoms/no-permission/NoPermission.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoPermission.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/no-permission/NoPermission.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAEjF,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,GAAG;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,sEACM,oBAAoB,KAAG,SAAS,CAmBjE,CAAC"}
+{"version":3,"file":"NoPermission.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/no-permission/NoPermission.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,eAAe,EAAqB,MAAM,eAAe,CAAC;AAEpG,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,GAAG;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,sEACM,oBAAoB,KAAG,SAAS,CAmBjE,CAAC"}

package/dist/components/atoms/no-permission/NoPermission.js

@@ -1,26 +1,26 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Container as i, Box as o, Typography as r } from "@mui/material";
-import { m as n } from "../../../chunks/index.DJYQ_-zP.js";
+import { Container as m, Box as r, Typography as i, typographyClasses as n } from "@mui/material";
+import { l as s } from "../../../chunks/lodash.DOeeRDpT.js";
 import { memo as x } from "react";
-import { FontNormalSxProps as a } from "../../../_constants.js";
-const h = x(
-  ({ children: m, TypographyProps: t }) => /* @__PURE__ */ e(i, { maxWidth: "md", sx: { height: "100%" }, children: /* @__PURE__ */ e(o, { sx: { height: "100%", placeContent: "center center", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
-    r,
+import { FontNormalSxProps as l } from "../../../_constants.js";
+const C = x(
+  ({ children: o, TypographyProps: t }) => /* @__PURE__ */ e(m, { maxWidth: "md", sx: { height: "100%" }, children: /* @__PURE__ */ e(r, { sx: { height: "100%", placeContent: "center center", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
+    i,
     {
       ...t,
       color: "textPrimary",
-      sx: n(
+      sx: s.merge(
         {
-          ".MuiTypography-root": a
+          [`.${n.root}`]: l
         },
         t == null ? void 0 : t.sx
       ),
       variant: "h4",
-      children: m
+      children: o
     }
   ) }) })
 );
 export {
-  h as AoaNoPermission
+  C as AoaNoPermission
 };
 //# sourceMappingURL=NoPermission.js.map

package/dist/components/atoms/no-permission/NoPermission.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoPermission.js","sources":["../../../../src/components/atoms/no-permission/NoPermission.tsx"],"sourcesContent":["import { Box, Container, Typography, type TypographyProps } from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\n\nexport interface AoaNoPermissionProps {\n  /**\n   * Additional props for the {@link Typography} component\n   */\n  readonly TypographyProps?: TypographyProps & { 'data-qa'?: string };\n  /**\n   * The 'no permission' message to display to the user\n   */\n  readonly children: ReactNode;\n}\n\n/**\n * Creates a 'no permission' message for unauthorized users\n *\n * @param props - Props to pass to the No Permission component\n * @example\n * ```jsx\n * <AoaNoPermission>\n *   This is a message\n * </AoaNoPermission>\n * ```\n */\nexport const AoaNoPermission = memo(\n  ({ children, TypographyProps }: AoaNoPermissionProps): ReactNode => (\n    <Container maxWidth='md' sx={{ height: '100%' }}>\n      <Box sx={{ height: '100%', placeContent: 'center center', display: 'flex', alignItems: 'center' }}>\n        <Typography\n          {...TypographyProps}\n          color='textPrimary'\n          sx={merge(\n            {\n              '.MuiTypography-root': FontNormalSxProps\n            },\n            TypographyProps?.sx\n          )}\n          variant='h4'\n        >\n          {children}\n        </Typography>\n      </Box>\n    </Container>\n  )\n);\n"],"names":["AoaNoPermission","memo","children","TypographyProps","jsx","Container","Box","Typography","merge","FontNormalSxProps"],"mappings":";;;;;AA2BO,MAAMA,IAAkBC;AAAA,EAC7B,CAAC,EAAE,UAAAC,GAAU,iBAAAC,QACV,gBAAAC,EAAAC,GAAA,EAAU,UAAS,MAAK,IAAI,EAAE,QAAQ,UACrC,UAAC,gBAAAD,EAAAE,GAAA,EAAI,IAAI,EAAE,QAAQ,QAAQ,cAAc,iBAAiB,SAAS,QAAQ,YAAY,SACrF,GAAA,UAAA,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,OAAM;AAAA,MACN,IAAIK;AAAA,QACF;AAAA,UACE,uBAAuBC;AAAA,QACzB;AAAA,QACAN,KAAA,gBAAAA,EAAiB;AAAA,MACnB;AAAA,MACA,SAAQ;AAAA,MAEP,UAAAD;AAAA,IAAA;AAAA,KAEL,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"NoPermission.js","sources":["../../../../src/components/atoms/no-permission/NoPermission.tsx"],"sourcesContent":["import { Box, Container, Typography, type TypographyProps, typographyClasses } from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\n\nexport interface AoaNoPermissionProps {\n  /**\n   * Additional props for the {@link Typography} component\n   */\n  readonly TypographyProps?: TypographyProps & { 'data-qa'?: string };\n  /**\n   * The 'no permission' message to display to the user\n   */\n  readonly children: ReactNode;\n}\n\n/**\n * Creates a 'no permission' message for unauthorized users\n *\n * @param props - Props to pass to the No Permission component\n * @example\n * ```jsx\n * <AoaNoPermission>\n *   This is a message\n * </AoaNoPermission>\n * ```\n */\nexport const AoaNoPermission = memo(\n  ({ children, TypographyProps }: AoaNoPermissionProps): ReactNode => (\n    <Container maxWidth='md' sx={{ height: '100%' }}>\n      <Box sx={{ height: '100%', placeContent: 'center center', display: 'flex', alignItems: 'center' }}>\n        <Typography\n          {...TypographyProps}\n          color='textPrimary'\n          sx={merge(\n            {\n              [`.${typographyClasses.root}`]: FontNormalSxProps\n            },\n            TypographyProps?.sx\n          )}\n          variant='h4'\n        >\n          {children}\n        </Typography>\n      </Box>\n    </Container>\n  )\n);\n"],"names":["AoaNoPermission","memo","children","TypographyProps","jsx","Container","Box","Typography","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;AA2BO,MAAMA,IAAkBC;AAAA,EAC7B,CAAC,EAAE,UAAAC,GAAU,iBAAAC,QACV,gBAAAC,EAAAC,GAAA,EAAU,UAAS,MAAK,IAAI,EAAE,QAAQ,UACrC,UAAC,gBAAAD,EAAAE,GAAA,EAAI,IAAI,EAAE,QAAQ,QAAQ,cAAc,iBAAiB,SAAS,QAAQ,YAAY,SACrF,GAAA,UAAA,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,OAAM;AAAA,MACN,IAAIK,EAAA;AAAA,QACF;AAAA,UACE,CAAC,IAAIC,EAAkB,IAAI,EAAE,GAAGC;AAAA,QAClC;AAAA,QACAP,KAAA,gBAAAA,EAAiB;AAAA,MACnB;AAAA,MACA,SAAQ;AAAA,MAEP,UAAAD;AAAA,IAAA;AAAA,KAEL,EACF,CAAA;AAEJ;"}

package/dist/components/atoms/notification/Notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO7C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,eAAe,8CAAgB,oBAAoB,KAAG,SAAS,CAsC1E,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAgB,MAAM,eAAe,CAAC;AAElE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO7C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,eAAe,8CAAgB,oBAAoB,KAAG,SAAS,CAsC1E,CAAC"}

package/dist/components/atoms/notification/Notification.js

@@ -1,46 +1,46 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Alert as i } from "@mui/material";
-import { m as t } from "../../../chunks/index.DJYQ_-zP.js";
-import { memo as n } from "react";
-import { FontNormalSxProps as a } from "../../../_constants.js";
-import { IconError as c } from "./_icons/Error.js";
+import { Alert as i, alertClasses as o } from "@mui/material";
+import { l as n } from "../../../chunks/lodash.DOeeRDpT.js";
+import { memo as t } from "react";
+import { FontNormalSxProps as c } from "../../../_constants.js";
+import { IconError as s } from "./_icons/Error.js";
 import { IconInfo as e } from "./_icons/Info.js";
-import { IconSuccess as m } from "./_icons/Success.js";
-import { IconWarning as s } from "./_icons/Warning.js";
-const A = n((o) => /* @__PURE__ */ r(
+import { IconSuccess as l } from "./_icons/Success.js";
+import { IconWarning as m } from "./_icons/Warning.js";
+const I = t((a) => /* @__PURE__ */ r(
   i,
   {
-    "data-qa": o["data-qa"],
+    "data-qa": a["data-qa"],
     iconMapping: {
-      error: /* @__PURE__ */ r(c, {}),
-      warning: /* @__PURE__ */ r(s, {}),
+      error: /* @__PURE__ */ r(s, {}),
+      warning: /* @__PURE__ */ r(m, {}),
       info: /* @__PURE__ */ r(e, {}),
-      success: /* @__PURE__ */ r(m, {})
+      success: /* @__PURE__ */ r(l, {})
     },
-    severity: o.severity,
-    sx: t(
+    severity: a.severity,
+    sx: n.merge(
       {
         color: "var(--color-text)",
-        "&.MuiAlert-standardSuccess": {
+        [`&.${o.standard}.${o.colorSuccess}`]: {
           backgroundColor: "var(--color-rijks-notification-green)"
         },
-        "&.MuiAlert-standardError": {
+        [`&.${o.standard}.${o.colorError}`]: {
           backgroundColor: "var(--color-rijks-notification-red)"
         },
-        "&.MuiAlert-standardWarning": {
+        [`&.${o.standard}.${o.colorWarning}`]: {
           backgroundColor: "var(--color-rijks-notification-yellow)"
         },
-        "&.MuiAlert-standardInfo": {
+        [`&.${o.standard}.${o.colorInfo}`]: {
           backgroundColor: "var(--color-rijks-notification-blue)"
         }
       },
-      a,
-      o.sx
+      c,
+      a.sx
     ),
-    children: o.message
+    children: a.message
   }
 ));
 export {
-  A as AoaNotification
+  I as AoaNotification
 };
 //# sourceMappingURL=Notification.js.map

package/dist/components/atoms/notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../../src/components/atoms/notification/Notification.tsx"],"sourcesContent":["import { Alert, type SxProps } from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { IconError } from './_icons/Error';\nimport { IconInfo } from './_icons/Info';\nimport { IconSuccess } from './_icons/Success';\nimport { IconWarning } from './_icons/Warning';\n\nexport type Severity = 'error' | 'info' | 'success' | 'warning';\n\nexport interface AoaNotificationProps {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The message to be displayed in the notification\n   */\n  readonly message: string;\n  /**\n   * The type of notification\n   */\n  readonly severity: Severity;\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n}\n\n/**\n * Constructs an alert using pre-defined Rijks styling\n *\n * @param props - Props to pass to the alert\n * @example\n * ```jsx\n * <AoaNotification message=\"wrong password\" severity=\"error\" />\n * ```\n */\n\nexport const AoaNotification = memo((props: AoaNotificationProps): ReactNode => {\n  return (\n    <Alert\n      data-qa={props['data-qa']}\n      iconMapping={{\n        error: <IconError />,\n        warning: <IconWarning />,\n        info: <IconInfo />,\n        success: <IconSuccess />\n      }}\n      severity={props.severity}\n      sx={merge(\n        {\n          color: 'var(--color-text)',\n\n          '&.MuiAlert-standardSuccess': {\n            backgroundColor: 'var(--color-rijks-notification-green)'\n          },\n\n          '&.MuiAlert-standardError': {\n            backgroundColor: 'var(--color-rijks-notification-red)'\n          },\n\n          '&.MuiAlert-standardWarning': {\n            backgroundColor: 'var(--color-rijks-notification-yellow)'\n          },\n\n          '&.MuiAlert-standardInfo': {\n            backgroundColor: 'var(--color-rijks-notification-blue)'\n          }\n        },\n        FontNormalSxProps,\n        props.sx\n      )}\n    >\n      {props.message}\n    </Alert>\n  );\n});\n"],"names":["AoaNotification","memo","props","jsx","Alert","IconError","IconWarning","IconInfo","IconSuccess","merge","FontNormalSxProps"],"mappings":";;;;;;;;;AAwCa,MAAAA,IAAkBC,EAAK,CAACC,MAEjC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAASF,EAAM,SAAS;AAAA,IACxB,aAAa;AAAA,MACX,yBAAQG,GAAU,EAAA;AAAA,MAClB,2BAAUC,GAAY,EAAA;AAAA,MACtB,wBAAOC,GAAS,EAAA;AAAA,MAChB,2BAAUC,GAAY,CAAA,CAAA;AAAA,IACxB;AAAA,IACA,UAAUN,EAAM;AAAA,IAChB,IAAIO;AAAA,MACF;AAAA,QACE,OAAO;AAAA,QAEP,8BAA8B;AAAA,UAC5B,iBAAiB;AAAA,QACnB;AAAA,QAEA,4BAA4B;AAAA,UAC1B,iBAAiB;AAAA,QACnB;AAAA,QAEA,8BAA8B;AAAA,UAC5B,iBAAiB;AAAA,QACnB;AAAA,QAEA,2BAA2B;AAAA,UACzB,iBAAiB;AAAA,QAAA;AAAA,MAErB;AAAA,MACAC;AAAA,MACAR,EAAM;AAAA,IACR;AAAA,IAEC,UAAMA,EAAA;AAAA,EAAA;AACT,CAEH;"}
+{"version":3,"file":"Notification.js","sources":["../../../../src/components/atoms/notification/Notification.tsx"],"sourcesContent":["import { Alert, type SxProps, alertClasses } from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { IconError } from './_icons/Error';\nimport { IconInfo } from './_icons/Info';\nimport { IconSuccess } from './_icons/Success';\nimport { IconWarning } from './_icons/Warning';\n\nexport type Severity = 'error' | 'info' | 'success' | 'warning';\n\nexport interface AoaNotificationProps {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The message to be displayed in the notification\n   */\n  readonly message: string;\n  /**\n   * The type of notification\n   */\n  readonly severity: Severity;\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n}\n\n/**\n * Constructs an alert using pre-defined Rijks styling\n *\n * @param props - Props to pass to the alert\n * @example\n * ```jsx\n * <AoaNotification message=\"wrong password\" severity=\"error\" />\n * ```\n */\n\nexport const AoaNotification = memo((props: AoaNotificationProps): ReactNode => {\n  return (\n    <Alert\n      data-qa={props['data-qa']}\n      iconMapping={{\n        error: <IconError />,\n        warning: <IconWarning />,\n        info: <IconInfo />,\n        success: <IconSuccess />\n      }}\n      severity={props.severity}\n      sx={merge(\n        {\n          color: 'var(--color-text)',\n\n          [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {\n            backgroundColor: 'var(--color-rijks-notification-green)'\n          },\n\n          [`&.${alertClasses.standard}.${alertClasses.colorError}`]: {\n            backgroundColor: 'var(--color-rijks-notification-red)'\n          },\n\n          [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {\n            backgroundColor: 'var(--color-rijks-notification-yellow)'\n          },\n\n          [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {\n            backgroundColor: 'var(--color-rijks-notification-blue)'\n          }\n        },\n        FontNormalSxProps,\n        props.sx\n      )}\n    >\n      {props.message}\n    </Alert>\n  );\n});\n"],"names":["AoaNotification","memo","props","jsx","Alert","IconError","IconWarning","IconInfo","IconSuccess","merge","alertClasses","FontNormalSxProps"],"mappings":";;;;;;;;;AAwCa,MAAAA,IAAkBC,EAAK,CAACC,MAEjC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAASF,EAAM,SAAS;AAAA,IACxB,aAAa;AAAA,MACX,yBAAQG,GAAU,EAAA;AAAA,MAClB,2BAAUC,GAAY,EAAA;AAAA,MACtB,wBAAOC,GAAS,EAAA;AAAA,MAChB,2BAAUC,GAAY,CAAA,CAAA;AAAA,IACxB;AAAA,IACA,UAAUN,EAAM;AAAA,IAChB,IAAIO,EAAA;AAAA,MACF;AAAA,QACE,OAAO;AAAA,QAEP,CAAC,KAAKC,EAAa,QAAQ,IAAIA,EAAa,YAAY,EAAE,GAAG;AAAA,UAC3D,iBAAiB;AAAA,QACnB;AAAA,QAEA,CAAC,KAAKA,EAAa,QAAQ,IAAIA,EAAa,UAAU,EAAE,GAAG;AAAA,UACzD,iBAAiB;AAAA,QACnB;AAAA,QAEA,CAAC,KAAKA,EAAa,QAAQ,IAAIA,EAAa,YAAY,EAAE,GAAG;AAAA,UAC3D,iBAAiB;AAAA,QACnB;AAAA,QAEA,CAAC,KAAKA,EAAa,QAAQ,IAAIA,EAAa,SAAS,EAAE,GAAG;AAAA,UACxD,iBAAiB;AAAA,QAAA;AAAA,MAErB;AAAA,MACAC;AAAA,MACAT,EAAM;AAAA,IACR;AAAA,IAEC,UAAMA,EAAA;AAAA,EAAA;AACT,CAEH;"}

package/dist/components/atoms/section-header/SectionHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/section-header/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAQ,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,gFACoB,iBAAiB,CAAC,qBAAqB,CAAC,6CAuDxF,CAAC"}
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/section-header/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAQ,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,gFACoB,iBAAiB,CAAC,qBAAqB,CAAC,6CAuDxF,CAAC"}

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

@@ -1,13 +1,13 @@
-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,
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { Box as s, Typography as a, Divider as m, typographyClasses as l } from "@mui/material";
+import { l as p } from "../../../chunks/lodash.DOeeRDpT.js";
+import { memo as x } from "react";
+const h = x(
+  ({ title: i, subtitle: t = "", children: e, ...r }) => /* @__PURE__ */ n(
+    s,
     {
       ...r,
-      sx: c(
+      sx: p.merge(
         {
           marginRight: 0,
           marginBottom: 2,
@@ -19,7 +19,7 @@ const g = p(
               marginTop: 3
             }
           },
-          ".MuiTypography-root": {
+          [`.${l.root}`]: {
             fontFamily: "var(--font-text)"
           }
         },
@@ -27,18 +27,18 @@ const g = p(
       ),
       children: [
         /* @__PURE__ */ o(
-          i,
+          a,
           {
             color: "textPrimary",
             component: "h1",
             "data-qa": "section-title",
             sx: { fontSize: "var(--font-size-h1)" },
             variant: "h5",
-            children: a
+            children: i
           }
         ),
         !!t && /* @__PURE__ */ o(
-          i,
+          a,
           {
             color: "textSecondary",
             component: "span",
@@ -49,7 +49,7 @@ const g = p(
           }
         ),
         /* @__PURE__ */ o(
-          s,
+          m,
           {
             sx: {
               backgroundColor: "var(--color-rijks-skyblue)",
@@ -58,12 +58,12 @@ const g = p(
             }
           }
         ),
-        n
+        e
       ]
     }
   )
 );
 export {
-  g as AoaSectionHeader
+  h as AoaSectionHeader
 };
 //# sourceMappingURL=SectionHeader.js.map

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(\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;"}
+{"version":3,"file":"SectionHeader.js","sources":["../../../../src/components/atoms/section-header/SectionHeader.tsx"],"sourcesContent":["import { Box, Divider, Typography, typographyClasses, type BoxProps } from '@mui/material';\nimport { merge } from 'lodash';\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            [`.${typographyClasses.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","typographyClasses","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,EAAA;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,CAAC,IAAIC,EAAkB,IAAI,EAAE,GAAG;AAAA,YAC9B,YAAY;AAAA,UAAA;AAAA,QAEhB;AAAA,QACAJ,EAAM;AAAA,MACR;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,sBAAsB;AAAA,YACtC,SAAQ;AAAA,YAEP,UAAAT;AAAA,UAAA;AAAA,QACH;AAAA,QACC,EAAQC,KACP,gBAAAO;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,wBAAwB;AAAA,YACxC,SAAQ;AAAA,YAEP,UAAAR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QACF;AAAA,QACCR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGN;"}

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,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"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,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,19 +1,19 @@
 import { jsx as o } from "react/jsx-runtime";
-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";
+import { CheckBoxOutlineBlank as t, CheckBox as l } from "@mui/icons-material";
+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 u = a(({ label: e, ...r }) => /* @__PURE__ */ o(
-  l,
+const k = c(({ label: e, ...r }) => /* @__PURE__ */ o(
+  i,
   {
     control: /* @__PURE__ */ o(
-      m,
+      s,
       {
         ...r,
-        checkedIcon: /* @__PURE__ */ o(i, { color: "inherit", fontSize: "small" }),
+        checkedIcon: /* @__PURE__ */ o(l, { color: "inherit", fontSize: "small" }),
         icon: /* @__PURE__ */ o(t, { color: "inherit", fontSize: "small" }),
-        sx: c(
+        sx: a.merge(
           {
             color: "var(--color-primary)",
             ":focus": {
@@ -30,10 +30,10 @@ const u = a(({ label: e, ...r }) => /* @__PURE__ */ o(
       }
     ),
     label: e,
-    sx: { ".MuiTypography-root": n }
+    sx: { [`.${m.root}`]: n }
   }
 ));
 export {
-  u as AoaCheckbox
+  k as AoaCheckbox
 };
 //# sourceMappingURL=Checkbox.js.map

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 {\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;"}
+{"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.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,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"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/radio-button/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,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

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

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 {\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;"}
+{"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/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,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"}
+{"version":3,"file":"SwitchButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/selection-buttons/switch-button/SwitchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,IAAI,oBAAoB,EAEzC,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

@@ -1,15 +1,15 @@
 import { jsx as o } from "react/jsx-runtime";
-import { FormControlLabel as i, Switch as p } from "@mui/material";
-import { memo as a } from "react";
-import { FontNormalSxProps as e } from "../../../../_constants.js";
-const d = a(({ label: r, ...t }) => /* @__PURE__ */ o(
+import { FormControlLabel as i, switchClasses as r, typographyClasses as s, Switch as e } from "@mui/material";
+import { memo as p } from "react";
+import { FontNormalSxProps as l } from "../../../../_constants.js";
+const n = p(({ label: t, ...a }) => /* @__PURE__ */ o(
   i,
   {
-    control: /* @__PURE__ */ o(p, { ...t }),
-    label: r,
+    control: /* @__PURE__ */ o(e, { ...a }),
+    label: t,
     sx: {
-      ".MuiTypography-root": e,
-      ".MuiSwitch-root": {
+      [`.${s.root}`]: l,
+      [`.${r.root}`]: {
         color: "var(--color-primary)",
         width: "64px",
         ":focus": {
@@ -20,7 +20,7 @@ const d = a(({ label: r, ...t }) => /* @__PURE__ */ o(
         ":disabled": {
           color: "var(--color-disabled)"
         },
-        ".MuiSwitch-track": {
+        [`.${r.track}`]: {
           height: "22px",
           marginTop: "-4px",
           marginLeft: "-3px",
@@ -31,6 +31,6 @@ const d = a(({ label: r, ...t }) => /* @__PURE__ */ o(
   }
 ));
 export {
-  d as AoaSwitchButton
+  n as AoaSwitchButton
 };
 //# sourceMappingURL=SwitchButton.js.map

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 {\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;"}
+{"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  typographyClasses,\n  type SwitchProps as MUISwitchButtonProps,\n  switchClasses\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        [`.${typographyClasses.root}`]: FontNormalSxProps,\n        [`.${switchClasses.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          [`.${switchClasses.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","typographyClasses","FontNormalSxProps","switchClasses"],"mappings":";;;;AAmCO,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,CAAC,IAAIK,EAAkB,IAAI,EAAE,GAAGC;AAAA,MAChC,CAAC,IAAIC,EAAc,IAAI,EAAE,GAAG;AAAA,QAC1B,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,CAAC,IAAIA,EAAc,KAAK,EAAE,GAAG;AAAA,UAC3B,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AACF,CAEH;"}