@rws-aoa/react-library 3.6.6 → 4.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 (37) hide show
  1. package/dist/components/atoms/_menu/menu-item/MenuItem.d.ts.map +1 -1
  2. package/dist/components/atoms/_menu/menu-item/MenuItem.js +37 -37
  3. package/dist/components/atoms/_menu/menu-item/MenuItem.js.map +1 -1
  4. package/dist/components/atoms/button/Button.d.ts.map +1 -1
  5. package/dist/components/atoms/button/Button.js +33 -33
  6. package/dist/components/atoms/button/Button.js.map +1 -1
  7. package/dist/components/atoms/input/Input.d.ts.map +1 -1
  8. package/dist/components/atoms/input/Input.js +60 -55
  9. package/dist/components/atoms/input/Input.js.map +1 -1
  10. package/dist/components/atoms/no-permission/NoPermission.d.ts.map +1 -1
  11. package/dist/components/atoms/no-permission/NoPermission.js +9 -9
  12. package/dist/components/atoms/no-permission/NoPermission.js.map +1 -1
  13. package/dist/components/atoms/notification/Notification.d.ts.map +1 -1
  14. package/dist/components/atoms/notification/Notification.js +22 -22
  15. package/dist/components/atoms/notification/Notification.js.map +1 -1
  16. package/dist/components/atoms/section-header/SectionHeader.d.ts.map +1 -1
  17. package/dist/components/atoms/section-header/SectionHeader.js +9 -9
  18. package/dist/components/atoms/section-header/SectionHeader.js.map +1 -1
  19. package/dist/components/atoms/selection-buttons/checkbox/Checkbox.d.ts.map +1 -1
  20. package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js +11 -11
  21. package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js.map +1 -1
  22. package/dist/components/atoms/selection-buttons/radio-button/RadioButton.d.ts.map +1 -1
  23. package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js +9 -9
  24. package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js.map +1 -1
  25. package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.d.ts.map +1 -1
  26. package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.js +10 -10
  27. package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.js.map +1 -1
  28. package/dist/components/atoms/table/Table.d.ts.map +1 -1
  29. package/dist/components/atoms/table/Table.js +64 -64
  30. package/dist/components/atoms/table/Table.js.map +1 -1
  31. package/dist/components/atoms/table/_QuickSearchToolbar.d.ts.map +1 -1
  32. package/dist/components/atoms/table/_QuickSearchToolbar.js +24 -24
  33. package/dist/components/atoms/table/_QuickSearchToolbar.js.map +1 -1
  34. package/dist/components/molecules/upload-button/UploadButton.d.ts.map +1 -1
  35. package/dist/components/molecules/upload-button/UploadButton.js +25 -23
  36. package/dist/components/molecules/upload-button/UploadButton.js.map +1 -1
  37. package/package.json +33 -33
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5G,UAAU,OAAO;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,KAAK,IAAI;AACP;;GAEG;AACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,8CAAgB,aAAa,KAAG,SAAS,CAuJ/D,CAAC"}
1
+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5G,UAAU,OAAO;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,KAAK,IAAI;AACP;;GAEG;AACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,8CAAgB,aAAa,KAAG,SAAS,CAuJ/D,CAAC"}
@@ -1,34 +1,34 @@
1
- import { jsxs as u, jsx as r } from "react/jsx-runtime";
2
- import { memo as C, useState as s, createElement as P } from "react";
3
- import { Home as I, KeyboardArrowDown as S } from "@mui/icons-material";
4
- import { MenuItem as x, Link as j, Typography as w, Popper as B } from "@mui/material";
5
- import { Link as b } from "@tanstack/react-router";
6
- import { m as h } from "../../../../chunks/index.DJYQ_-zP.js";
7
- import { FontNormalSxProps as p } from "../../../../_constants.js";
8
- const O = C((e) => {
9
- var i, g, d, m, c;
10
- const [v, a] = s(null), [t, n] = s(!1);
11
- function f(o) {
1
+ import { jsxs as c, jsx as r } from "react/jsx-runtime";
2
+ import { memo as w, useState as u, createElement as I } from "react";
3
+ import { Home as M, KeyboardArrowDown as S } from "@mui/icons-material";
4
+ import { MenuItem as x, Link as B, menuItemClasses as b, Typography as $, svgIconClasses as h, Popper as E } from "@mui/material";
5
+ import { Link as p } from "@tanstack/react-router";
6
+ import { m as v } from "../../../../chunks/index.DJYQ_-zP.js";
7
+ import { FontNormalSxProps as f } from "../../../../_constants.js";
8
+ const F = w((e) => {
9
+ var i, d, g, m, s;
10
+ const [k, a] = u(null), [t, n] = u(!1);
11
+ function y(o) {
12
12
  n(!0), a(o.currentTarget);
13
13
  }
14
14
  function l() {
15
15
  n(!1), a(null);
16
16
  }
17
- function k() {
17
+ function C() {
18
18
  return e.page.externalPath ? { href: e.page.to } : { to: e.page.to };
19
19
  }
20
- return /* @__PURE__ */ P(
20
+ return /* @__PURE__ */ I(
21
21
  x,
22
22
  {
23
- ...k(),
23
+ ...C(),
24
24
  "aria-controls": (i = e.page.subItems) != null && i.length && t ? "submenu" : void 0,
25
- "aria-expanded": (g = e.page.subItems) != null && g.length && t ? "true" : void 0,
26
- "aria-haspopup": (d = e.page.subItems) != null && d.length ? "true" : "false",
25
+ "aria-expanded": (d = e.page.subItems) != null && d.length && t ? "true" : void 0,
26
+ "aria-haspopup": (g = e.page.subItems) != null && g.length ? "true" : "false",
27
27
  "aria-label": e.page.label,
28
- component: e.page.to && !e.page.externalPath ? b : j,
28
+ component: e.page.to && !e.page.externalPath ? p : B,
29
29
  key: e.index,
30
30
  onClick: () => e.setSelectedPage(e.index),
31
- onMouseEnter: (o) => f(o),
31
+ onMouseEnter: (o) => y(o),
32
32
  onMouseLeave: () => l(),
33
33
  role: "menuitem",
34
34
  selected: e.selectedPage === e.index,
@@ -42,7 +42,7 @@ const O = C((e) => {
42
42
  textDecoration: "underline"
43
43
  }
44
44
  },
45
- "&.Mui-selected": {
45
+ [`&.${b.selected}`]: {
46
46
  backgroundColor: "var(--color-rijks-yellow-light)",
47
47
  borderBottomColor: "var(--color-rijks-skyblue)",
48
48
  ":hover": {
@@ -52,33 +52,33 @@ const O = C((e) => {
52
52
  },
53
53
  title: e.page.label
54
54
  },
55
- /* @__PURE__ */ u(
56
- w,
55
+ /* @__PURE__ */ c(
56
+ $,
57
57
  {
58
58
  "aria-hidden": !0,
59
59
  component: "span",
60
- sx: h(
60
+ sx: v(
61
61
  {
62
62
  display: "flex",
63
63
  alignItems: "center",
64
- "&.MuiSvgIcon-root": {
64
+ [`&.${h.root}`]: {
65
65
  marginRight: "5px"
66
66
  }
67
67
  },
68
- p
68
+ f
69
69
  ),
70
70
  variant: "body1",
71
71
  children: [
72
- e.index === 0 && /* @__PURE__ */ r(I, {}),
72
+ e.index === 0 && /* @__PURE__ */ r(M, {}),
73
73
  e.page.label,
74
74
  (m = e.page.subItems) != null && m.length ? /* @__PURE__ */ r(S, {}) : null
75
75
  ]
76
76
  }
77
77
  ),
78
78
  e.page.subItems && /* @__PURE__ */ r(
79
- B,
79
+ E,
80
80
  {
81
- anchorEl: v,
81
+ anchorEl: k,
82
82
  id: "submenu",
83
83
  open: t,
84
84
  placement: "bottom-start",
@@ -97,22 +97,22 @@ const O = C((e) => {
97
97
  rgb(0 0 0 / 5%) 0 4px 6px -2px
98
98
  `
99
99
  },
100
- children: (c = e.page.subItems) == null ? void 0 : c.map((o, y) => /* @__PURE__ */ u(
100
+ children: (s = e.page.subItems) == null ? void 0 : s.map((o, P) => /* @__PURE__ */ c(
101
101
  x,
102
102
  {
103
103
  "aria-label": o.label,
104
- component: b,
104
+ component: p,
105
105
  disableRipple: !0,
106
106
  divider: o.divider ?? !1,
107
- onClick: (M) => {
108
- M.stopPropagation(), e.setSelectedPage(e.index), l();
107
+ onClick: (j) => {
108
+ j.stopPropagation(), e.setSelectedPage(e.index), l();
109
109
  },
110
- sx: h(
110
+ sx: v(
111
111
  {
112
112
  ":active": {
113
113
  backgroundColor: "var(--color-bg-light)"
114
114
  },
115
- "&.MuiMenuItem-divider": {
115
+ [`&.${b.divider}`]: {
116
116
  borderBottom: "transparent",
117
117
  position: "relative",
118
118
  marginBottom: "16px",
@@ -125,13 +125,13 @@ const O = C((e) => {
125
125
  borderBottom: "1px solid rgba(0, 0, 0, 0.12)"
126
126
  }
127
127
  },
128
- "&.MuiSvgIcon-root": {
128
+ [`&.${h.root}`]: {
129
129
  fontSize: "var(--font-size-text)",
130
130
  color: "var(--color-rijks-grey-7)",
131
131
  marginRight: "12px"
132
132
  }
133
133
  },
134
- p
134
+ f
135
135
  ),
136
136
  to: o.to,
137
137
  children: [
@@ -139,13 +139,13 @@ const O = C((e) => {
139
139
  o.label
140
140
  ]
141
141
  },
142
- y
142
+ P
143
143
  ))
144
144
  }
145
145
  )
146
146
  );
147
147
  });
148
148
  export {
149
- O as AoaMenuItem
149
+ F as AoaMenuItem
150
150
  };
151
151
  //# sourceMappingURL=MenuItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"sourcesContent":["import { Home as HomeIcon, KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';\nimport { Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from '@mui/material';\nimport { Link } from '@tanstack/react-router';\nimport merge from 'lodash.merge';\nimport { memo, useState, type Dispatch, type MouseEvent, type ReactNode, type SetStateAction } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\ninterface SubMenu {\n /**\n * Optional divider to be shown below menu item\n */\n divider?: boolean;\n /**\n * Optional icon to be displayed in front of the label\n */\n icon?: JSX.Element;\n /**\n * The label of the menu item\n */\n label: string;\n /**\n * The path that the menu item links to on click\n */\n to: string;\n}\n\ntype Menu =\n /**\n * The path that the menu item links to on click and the subitems shown on hover\n */\n | { subItems: SubMenu[]; to: string }\n /**\n * Subitems are required when there is no path that the menu item links to on click\n */\n | { subItems: SubMenu[]; to?: never }\n /**\n * The path that the menu item links to on click is required when there are no subitems on hover\n */\n | { subItems?: never; to: string };\n\nexport type AoaPage = Menu & {\n /**\n * Optional boolean to indicate if it's an external \"to\" path\n */\n externalPath?: boolean;\n /**\n * The label of the menu item\n */\n label: string;\n};\n\ninterface MenuItemProps {\n /**\n * Index of the current menu item. Home === 0\n */\n readonly index: number;\n /**\n * The Page object for this menu item\n */\n readonly page: AoaPage;\n /**\n * The currently active menu item\n */\n readonly selectedPage: number;\n /**\n * The function to update the active menu item\n */\n readonly setSelectedPage: Dispatch<SetStateAction<number>>;\n}\n\n/**\n * Constructs a menu item using pre-defined Rijks styling\n *\n * @param props - Props to pass to the menu item\n * @example\n * ```jsx\n * <AoaMenuItem\n * index={index}\n * page={{\n * label: \"Products\",\n * to: \"/products\",\n * subItems: [\n * {\n * label: \"Books\",\n * to: \"/books\",\n * icon: <BookIcon />,\n * }\n * ]\n * }}\n * selectedPage={selectedPage}\n * setSelectedPage={setSelectedPage}\n * />\n * ```\n */\nexport const AoaMenuItem = memo((props: MenuItemProps): ReactNode => {\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n const [open, setOpen] = useState(false);\n\n function handleMenuOpen(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) {\n setOpen(true);\n setAnchorEl(event.currentTarget);\n }\n\n function handleMenuClose() {\n setOpen(false);\n setAnchorEl(null);\n }\n\n function linkProps() {\n if (props.page.externalPath) {\n return { href: props.page.to };\n } else {\n return { to: props.page.to };\n }\n }\n\n return (\n <MUIMenuItem\n {...linkProps()}\n aria-controls={props.page.subItems?.length && open ? 'submenu' : undefined}\n aria-expanded={props.page.subItems?.length && open ? 'true' : undefined}\n aria-haspopup={props.page.subItems?.length ? 'true' : 'false'}\n aria-label={props.page.label}\n component={props.page.to && !props.page.externalPath ? Link : MUILink}\n key={props.index}\n onClick={() => props.setSelectedPage(props.index)}\n onMouseEnter={(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => handleMenuOpen(event)}\n onMouseLeave={() => handleMenuClose()}\n role='menuitem'\n selected={props.selectedPage === props.index}\n sx={{\n height: '100%',\n borderBottom: '3px solid transparent',\n padding: '6px 20px 3px',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-yellow-hover)',\n ...(props.page.to && {\n textDecoration: 'underline'\n })\n },\n\n '&.Mui-selected': {\n backgroundColor: 'var(--color-rijks-yellow-light)',\n borderBottomColor: 'var(--color-rijks-skyblue)',\n ':hover': {\n backgroundColor: 'var(--color-rijks-yellow-hover)'\n }\n }\n }}\n title={props.page.label}\n >\n <Typography\n aria-hidden\n component='span'\n sx={merge(\n {\n display: 'flex',\n alignItems: 'center',\n\n '&.MuiSvgIcon-root': {\n marginRight: '5px'\n }\n },\n FontNormalSxProps\n )}\n variant='body1'\n >\n {props.index === 0 && <HomeIcon />}\n {props.page.label}\n {props.page.subItems?.length ? <KeyboardArrowDownIcon /> : null}\n </Typography>\n {props.page.subItems && (\n <Popper\n anchorEl={anchorEl}\n id='submenu'\n open={open}\n placement='bottom-start'\n role='menu'\n sx={{\n backgroundColor: 'var(--color-bg-light)',\n padding: '4px 0',\n borderRadius: '6px',\n marginTop: '8px',\n minWidth: '180px',\n color: 'var(--color-text)',\n boxShadow: `\n rgb(255 255 255) 0 0 0 0,\n rgb(0 0 0 / 5%) 0 0 0 1px,\n rgb(0 0 0 / 10%) 0 10px 15px -3px,\n rgb(0 0 0 / 5%) 0 4px 6px -2px\n `\n }}\n >\n {props.page.subItems?.map((subItem, index) => (\n <MUIMenuItem\n aria-label={subItem.label}\n component={Link}\n disableRipple\n divider={subItem.divider ?? false}\n key={index}\n onClick={(event) => {\n event.stopPropagation();\n props.setSelectedPage(props.index);\n handleMenuClose();\n }}\n sx={merge(\n {\n ':active': {\n backgroundColor: 'var(--color-bg-light)'\n },\n\n '&.MuiMenuItem-divider': {\n borderBottom: 'transparent',\n position: 'relative',\n marginBottom: '16px',\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n bottom: '-8px',\n left: '0',\n width: '100%',\n borderBottom: '1px solid rgba(0, 0, 0, 0.12)'\n }\n },\n\n '&.MuiSvgIcon-root': {\n fontSize: 'var(--font-size-text)',\n color: 'var(--color-rijks-grey-7)',\n marginRight: '12px'\n }\n },\n FontNormalSxProps\n )}\n to={subItem.to}\n >\n {subItem.icon}\n {subItem.label}\n </MUIMenuItem>\n ))}\n </Popper>\n )}\n </MUIMenuItem>\n );\n});\n"],"names":["AoaMenuItem","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","linkProps","createElement","MUIMenuItem","_a","_b","_c","Link","MUILink","jsxs","Typography","merge","FontNormalSxProps","jsx","HomeIcon","_d","KeyboardArrowDownIcon","Popper","subItem","index"],"mappings":"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"}
1
+ {"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"sourcesContent":["import { Home as HomeIcon, KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';\nimport {\n Link as MUILink,\n MenuItem as MUIMenuItem,\n menuItemClasses,\n svgIconClasses,\n Popper,\n Typography\n} from '@mui/material';\nimport { Link } from '@tanstack/react-router';\nimport merge from 'lodash.merge';\nimport { memo, useState, type Dispatch, type MouseEvent, type ReactNode, type SetStateAction } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\ninterface SubMenu {\n /**\n * Optional divider to be shown below menu item\n */\n divider?: boolean;\n /**\n * Optional icon to be displayed in front of the label\n */\n icon?: JSX.Element;\n /**\n * The label of the menu item\n */\n label: string;\n /**\n * The path that the menu item links to on click\n */\n to: string;\n}\n\ntype Menu =\n /**\n * The path that the menu item links to on click and the subitems shown on hover\n */\n | { subItems: SubMenu[]; to: string }\n /**\n * Subitems are required when there is no path that the menu item links to on click\n */\n | { subItems: SubMenu[]; to?: never }\n /**\n * The path that the menu item links to on click is required when there are no subitems on hover\n */\n | { subItems?: never; to: string };\n\nexport type AoaPage = Menu & {\n /**\n * Optional boolean to indicate if it's an external \"to\" path\n */\n externalPath?: boolean;\n /**\n * The label of the menu item\n */\n label: string;\n};\n\ninterface MenuItemProps {\n /**\n * Index of the current menu item. Home === 0\n */\n readonly index: number;\n /**\n * The Page object for this menu item\n */\n readonly page: AoaPage;\n /**\n * The currently active menu item\n */\n readonly selectedPage: number;\n /**\n * The function to update the active menu item\n */\n readonly setSelectedPage: Dispatch<SetStateAction<number>>;\n}\n\n/**\n * Constructs a menu item using pre-defined Rijks styling\n *\n * @param props - Props to pass to the menu item\n * @example\n * ```jsx\n * <AoaMenuItem\n * index={index}\n * page={{\n * label: \"Products\",\n * to: \"/products\",\n * subItems: [\n * {\n * label: \"Books\",\n * to: \"/books\",\n * icon: <BookIcon />,\n * }\n * ]\n * }}\n * selectedPage={selectedPage}\n * setSelectedPage={setSelectedPage}\n * />\n * ```\n */\nexport const AoaMenuItem = memo((props: MenuItemProps): ReactNode => {\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n const [open, setOpen] = useState(false);\n\n function handleMenuOpen(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) {\n setOpen(true);\n setAnchorEl(event.currentTarget);\n }\n\n function handleMenuClose() {\n setOpen(false);\n setAnchorEl(null);\n }\n\n function linkProps() {\n if (props.page.externalPath) {\n return { href: props.page.to };\n } else {\n return { to: props.page.to };\n }\n }\n\n return (\n <MUIMenuItem\n {...linkProps()}\n aria-controls={props.page.subItems?.length && open ? 'submenu' : undefined}\n aria-expanded={props.page.subItems?.length && open ? 'true' : undefined}\n aria-haspopup={props.page.subItems?.length ? 'true' : 'false'}\n aria-label={props.page.label}\n component={props.page.to && !props.page.externalPath ? Link : MUILink}\n key={props.index}\n onClick={() => props.setSelectedPage(props.index)}\n onMouseEnter={(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => handleMenuOpen(event)}\n onMouseLeave={() => handleMenuClose()}\n role='menuitem'\n selected={props.selectedPage === props.index}\n sx={{\n height: '100%',\n borderBottom: '3px solid transparent',\n padding: '6px 20px 3px',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-yellow-hover)',\n ...(props.page.to && {\n textDecoration: 'underline'\n })\n },\n\n [`&.${menuItemClasses.selected}`]: {\n backgroundColor: 'var(--color-rijks-yellow-light)',\n borderBottomColor: 'var(--color-rijks-skyblue)',\n ':hover': {\n backgroundColor: 'var(--color-rijks-yellow-hover)'\n }\n }\n }}\n title={props.page.label}\n >\n <Typography\n aria-hidden\n component='span'\n sx={merge(\n {\n display: 'flex',\n alignItems: 'center',\n\n [`&.${svgIconClasses.root}`]: {\n marginRight: '5px'\n }\n },\n FontNormalSxProps\n )}\n variant='body1'\n >\n {props.index === 0 && <HomeIcon />}\n {props.page.label}\n {props.page.subItems?.length ? <KeyboardArrowDownIcon /> : null}\n </Typography>\n {props.page.subItems && (\n <Popper\n anchorEl={anchorEl}\n id='submenu'\n open={open}\n placement='bottom-start'\n role='menu'\n sx={{\n backgroundColor: 'var(--color-bg-light)',\n padding: '4px 0',\n borderRadius: '6px',\n marginTop: '8px',\n minWidth: '180px',\n color: 'var(--color-text)',\n boxShadow: `\n rgb(255 255 255) 0 0 0 0,\n rgb(0 0 0 / 5%) 0 0 0 1px,\n rgb(0 0 0 / 10%) 0 10px 15px -3px,\n rgb(0 0 0 / 5%) 0 4px 6px -2px\n `\n }}\n >\n {props.page.subItems?.map((subItem, index) => (\n <MUIMenuItem\n aria-label={subItem.label}\n component={Link}\n disableRipple\n divider={subItem.divider ?? false}\n key={index}\n onClick={(event) => {\n event.stopPropagation();\n props.setSelectedPage(props.index);\n handleMenuClose();\n }}\n sx={merge(\n {\n ':active': {\n backgroundColor: 'var(--color-bg-light)'\n },\n\n [`&.${menuItemClasses.divider}`]: {\n borderBottom: 'transparent',\n position: 'relative',\n marginBottom: '16px',\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n bottom: '-8px',\n left: '0',\n width: '100%',\n borderBottom: '1px solid rgba(0, 0, 0, 0.12)'\n }\n },\n\n [`&.${svgIconClasses.root}`]: {\n fontSize: 'var(--font-size-text)',\n color: 'var(--color-rijks-grey-7)',\n marginRight: '12px'\n }\n },\n FontNormalSxProps\n )}\n to={subItem.to}\n >\n {subItem.icon}\n {subItem.label}\n </MUIMenuItem>\n ))}\n </Popper>\n )}\n </MUIMenuItem>\n );\n});\n"],"names":["AoaMenuItem","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","linkProps","createElement","MUIMenuItem","_a","_b","_c","Link","MUILink","menuItemClasses","jsxs","Typography","merge","svgIconClasses","FontNormalSxProps","jsx","HomeIcon","_d","KeyboardArrowDownIcon","Popper","subItem","index"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAE5G,OAAO,EAAQ,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,UAAU,WAAW;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;CACxC;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC7G,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACvE,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,+GACqD,cAAc,KAAG,SAAS,CA+JpG,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAQ,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,UAAU,WAAW;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;CACxC;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC7G,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACvE,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,+GACqD,cAAc,KAAG,SAAS,CA+JpG,CAAC"}
@@ -1,21 +1,21 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import { ChevronRight as c } from "@mui/icons-material";
3
- import { Button as d } from "@mui/material";
4
- import { m as v } from "../../../chunks/index.DJYQ_-zP.js";
5
- import { memo as u } from "react";
6
- import { FontNormalSxProps as b } from "../../../_constants.js";
7
- const f = u(
8
- ({ type: o, startIcon: a, "data-qa": l, children: i, buttonType: n, ...e }) => {
9
- let r = "contained";
10
- return o === "text" && (r = "text"), o === "secondary" && (r = "outlined"), /* @__PURE__ */ t(
11
- d,
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { ChevronRight as d } from "@mui/icons-material";
3
+ import { Button as v, buttonClasses as r } from "@mui/material";
4
+ import { m as b } from "../../../chunks/index.DJYQ_-zP.js";
5
+ import { memo as s } from "react";
6
+ import { FontNormalSxProps as m } from "../../../_constants.js";
7
+ const C = s(
8
+ ({ type: o, startIcon: t, "data-qa": i, children: c, buttonType: n, ...a }) => {
9
+ let e = "contained";
10
+ return o === "text" && (e = "text"), o === "secondary" && (e = "outlined"), /* @__PURE__ */ l(
11
+ v,
12
12
  {
13
- ...e,
14
- "data-qa": l,
13
+ ...a,
14
+ "data-qa": i,
15
15
  disableElevation: !0,
16
- endIcon: o === "text" && /* @__PURE__ */ t(c, {}),
17
- startIcon: o !== "text" && a,
18
- sx: v(
16
+ endIcon: o === "text" && /* @__PURE__ */ l(d, {}),
17
+ startIcon: o !== "text" && t,
18
+ sx: b(
19
19
  {
20
20
  // Styles that apply to all button types and colors
21
21
  appearance: "none",
@@ -39,22 +39,22 @@ const f = u(
39
39
  boxShadow: "none"
40
40
  },
41
41
  // Styles that apply to contained (type === primary)
42
- "&.MuiButton-contained": {
43
- "&.MuiButton-colorPrimary": {
42
+ [`&.${r.contained}`]: {
43
+ [`&.${r.colorPrimary}`]: {
44
44
  backgroundColor: "var(--color-primary)",
45
45
  borderColor: "var(--color-primary)",
46
46
  ":hover, :active, :focus": {
47
47
  backgroundColor: "var(--color-primary-hover)"
48
48
  }
49
49
  },
50
- "&.MuiButton-colorError": {
50
+ [`&.${r.colorError}`]: {
51
51
  backgroundColor: "var(--color-error)",
52
52
  borderColor: "var(--color-error)",
53
53
  ":hover, :active, :focus": {
54
54
  backgroundColor: "var(--color-error-hover)"
55
55
  }
56
56
  },
57
- "&.Mui-disabled": {
57
+ [`&.${r.disabled}`]: {
58
58
  backgroundColor: "var(--color-disabled)",
59
59
  borderColor: "var(--color-disabled)",
60
60
  color: "var(--color-text-disabled)"
@@ -64,11 +64,11 @@ const f = u(
64
64
  }
65
65
  },
66
66
  // Styles that apply to outlined (type === secondary)
67
- "&.MuiButton-outlined": {
67
+ [`&.${r.outlined}`]: {
68
68
  background: "none",
69
69
  border: "1px solid var(--color-primary)",
70
70
  boxSizing: "border-box",
71
- "&.MuiButton-colorPrimary": {
71
+ [`&.${r.colorPrimary}`]: {
72
72
  color: "var(--color-primary)",
73
73
  borderColor: "var(--color-primary)",
74
74
  ":hover, :active, :focus": {
@@ -76,7 +76,7 @@ const f = u(
76
76
  color: "var(--color-primary-hover)"
77
77
  }
78
78
  },
79
- "&.MuiButton-colorError": {
79
+ [`&.${r.colorError}`]: {
80
80
  color: "var(--color-error)",
81
81
  borderColor: "var(--color-error)",
82
82
  ":hover, :active, :focus": {
@@ -91,7 +91,7 @@ const f = u(
91
91
  }
92
92
  },
93
93
  // Styles that apply to text (type === text)
94
- "&.MuiButton-text": {
94
+ [`&.${r.text}`]: {
95
95
  background: "none",
96
96
  borderColor: "transparent",
97
97
  display: "inline-block",
@@ -99,19 +99,19 @@ const f = u(
99
99
  fontWeight: "bold",
100
100
  fontSize: "1.075rem",
101
101
  verticalAlign: "middle",
102
- "&.MuiButton-colorPrimary": {
102
+ [`&.${r.colorPrimary}`]: {
103
103
  color: "var(--color-primary)",
104
104
  ":hover": {
105
105
  backgroundColor: "var(--color-rijks-skyblue-light)"
106
106
  }
107
107
  },
108
- "&.MuiButton-colorError": {
108
+ [`&.${r.colorError}`]: {
109
109
  color: "var(--color-error)",
110
110
  ":hover": {
111
111
  backgroundColor: "var(--color-rijks-red-1-light)"
112
112
  }
113
113
  },
114
- ".MuiButton-endIcon": {
114
+ [`&.${r.endIcon}`]: {
115
115
  width: "1rem",
116
116
  height: "1rem",
117
117
  verticalAlign: "text-top"
@@ -119,23 +119,23 @@ const f = u(
119
119
  ":disabled": {
120
120
  backgroundColor: "transparent",
121
121
  color: "var(--color-text-disabled)",
122
- ".MuiButton-endIcon": {
122
+ [`&.${r.endIcon}`]: {
123
123
  fill: "var(--color-text-disabled)"
124
124
  }
125
125
  }
126
126
  }
127
127
  },
128
- e.sx,
129
- b
128
+ a.sx,
129
+ m
130
130
  ),
131
131
  type: n,
132
- variant: r,
133
- children: i
132
+ variant: e,
133
+ children: c
134
134
  }
135
135
  );
136
136
  }
137
137
  );
138
138
  export {
139
- f as AoaButton
139
+ C as AoaButton
140
140
  };
141
141
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../src/components/atoms/button/Button.tsx"],"sourcesContent":["import { ChevronRight } from '@mui/icons-material';\nimport { Button as MUIButton, type ButtonTypeMap, type ButtonProps as MUIButtonProps } from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\n\ninterface CommonProps {\n /**\n * Data-qa tag for E2E test purposes\n */\n 'data-qa'?: string;\n /**\n * Defines the colour and style of the button\n */\n type: 'primary' | 'secondary' | 'text';\n}\n\nexport type AoaButtonProps = Omit<MUIButtonProps<ButtonTypeMap['defaultComponent'], CommonProps>, 'variant'> & {\n readonly buttonType?: ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * Constructs a button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaButton onClick={() => console.log()} type='primary'>button</AoaButton>\n * ```\n */\n\nexport const AoaButton = memo(\n ({ type, startIcon, 'data-qa': dataQa, children, buttonType, ...props }: AoaButtonProps): ReactNode => {\n let variant: 'contained' | 'outlined' | 'text' = 'contained';\n\n if (type === 'text') {\n variant = 'text';\n }\n\n if (type === 'secondary') {\n variant = 'outlined';\n }\n\n return (\n <MUIButton\n {...props}\n data-qa={dataQa}\n disableElevation\n endIcon={type === 'text' && <ChevronRight />}\n startIcon={type !== 'text' && startIcon}\n sx={merge(\n {\n // Styles that apply to all button types and colors\n appearance: 'none',\n border: '1px solid',\n borderRadius: 0,\n boxSizing: 'border-box',\n color: 'var(--color-text-light)',\n cursor: 'pointer',\n display: 'inline-flex',\n lineHeight: 'var(--font-lineheight-text)',\n minHeight: 20,\n padding: '12px 16px',\n position: 'relative',\n textDecoration: 'none',\n textShadow: 'none',\n textTransform: 'none',\n verticalAlign: 'middle',\n\n ':focus': {\n outline: '2px dashed var(--color-text)',\n outlineOffset: '3px',\n boxShadow: 'none'\n },\n\n // Styles that apply to contained (type === primary)\n '&.MuiButton-contained': {\n '&.MuiButton-colorPrimary': {\n backgroundColor: 'var(--color-primary)',\n borderColor: 'var(--color-primary)',\n\n ':hover, :active, :focus': {\n backgroundColor: 'var(--color-primary-hover)'\n }\n },\n\n '&.MuiButton-colorError': {\n backgroundColor: 'var(--color-error)',\n borderColor: 'var(--color-error)',\n\n ':hover, :active, :focus': {\n backgroundColor: 'var(--color-error-hover)'\n }\n },\n\n '&.Mui-disabled': {\n backgroundColor: 'var(--color-disabled)',\n borderColor: 'var(--color-disabled)',\n color: 'var(--color-text-disabled)'\n },\n\n ':hover, :active, :focus': {\n color: 'var(--color-text-light)'\n }\n },\n\n // Styles that apply to outlined (type === secondary)\n '&.MuiButton-outlined': {\n background: 'none',\n border: '1px solid var(--color-primary)',\n boxSizing: 'border-box',\n\n '&.MuiButton-colorPrimary': {\n color: 'var(--color-primary)',\n borderColor: 'var(--color-primary)',\n\n ':hover, :active, :focus': {\n borderColor: 'var(--color-primary-hover)',\n color: 'var(--color-primary-hover)'\n }\n },\n\n '&.MuiButton-colorError': {\n color: 'var(--color-error)',\n borderColor: 'var(--color-error)',\n\n ':hover, :active, :focus': {\n borderColor: 'var(--color-error-hover)',\n color: 'var(--color-error-hover)'\n }\n },\n\n ':disabled': {\n backgroundColor: 'transparent',\n borderColor: 'var(--color-text-disabled)',\n color: 'var(--color-text-disabled)'\n }\n },\n\n // Styles that apply to text (type === text)\n '&.MuiButton-text': {\n background: 'none',\n borderColor: 'transparent',\n display: 'inline-block',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n fontSize: '1.075rem',\n verticalAlign: 'middle',\n\n '&.MuiButton-colorPrimary': {\n color: 'var(--color-primary)',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-skyblue-light)'\n }\n },\n\n '&.MuiButton-colorError': {\n color: 'var(--color-error)',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-red-1-light)'\n }\n },\n\n '.MuiButton-endIcon': {\n width: '1rem',\n height: '1rem',\n verticalAlign: 'text-top'\n },\n\n ':disabled': {\n backgroundColor: 'transparent',\n color: 'var(--color-text-disabled)',\n\n '.MuiButton-endIcon': {\n fill: 'var(--color-text-disabled)'\n }\n }\n }\n },\n props.sx,\n FontNormalSxProps\n )}\n type={buttonType}\n variant={variant}\n >\n {children}\n </MUIButton>\n );\n }\n);\n"],"names":["AoaButton","memo","type","startIcon","dataQa","children","buttonType","props","variant","jsx","MUIButton","ChevronRight","merge","FontNormalSxProps"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../src/components/atoms/button/Button.tsx"],"sourcesContent":["import { ChevronRight } from '@mui/icons-material';\nimport {\n Button as MUIButton,\n buttonClasses,\n type ButtonTypeMap,\n type ButtonProps as MUIButtonProps\n} from '@mui/material';\nimport merge from 'lodash.merge';\nimport { memo, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\n\ninterface CommonProps {\n /**\n * Data-qa tag for E2E test purposes\n */\n 'data-qa'?: string;\n /**\n * Defines the colour and style of the button\n */\n type: 'primary' | 'secondary' | 'text';\n}\n\nexport type AoaButtonProps = Omit<MUIButtonProps<ButtonTypeMap['defaultComponent'], CommonProps>, 'variant'> & {\n readonly buttonType?: ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * Constructs a button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaButton onClick={() => console.log()} type='primary'>button</AoaButton>\n * ```\n */\n\nexport const AoaButton = memo(\n ({ type, startIcon, 'data-qa': dataQa, children, buttonType, ...props }: AoaButtonProps): ReactNode => {\n let variant: 'contained' | 'outlined' | 'text' = 'contained';\n\n if (type === 'text') {\n variant = 'text';\n }\n\n if (type === 'secondary') {\n variant = 'outlined';\n }\n\n return (\n <MUIButton\n {...props}\n data-qa={dataQa}\n disableElevation\n endIcon={type === 'text' && <ChevronRight />}\n startIcon={type !== 'text' && startIcon}\n sx={merge(\n {\n // Styles that apply to all button types and colors\n appearance: 'none',\n border: '1px solid',\n borderRadius: 0,\n boxSizing: 'border-box',\n color: 'var(--color-text-light)',\n cursor: 'pointer',\n display: 'inline-flex',\n lineHeight: 'var(--font-lineheight-text)',\n minHeight: 20,\n padding: '12px 16px',\n position: 'relative',\n textDecoration: 'none',\n textShadow: 'none',\n textTransform: 'none',\n verticalAlign: 'middle',\n\n ':focus': {\n outline: '2px dashed var(--color-text)',\n outlineOffset: '3px',\n boxShadow: 'none'\n },\n\n // Styles that apply to contained (type === primary)\n [`&.${buttonClasses.contained}`]: {\n [`&.${buttonClasses.colorPrimary}`]: {\n backgroundColor: 'var(--color-primary)',\n borderColor: 'var(--color-primary)',\n\n ':hover, :active, :focus': {\n backgroundColor: 'var(--color-primary-hover)'\n }\n },\n\n [`&.${buttonClasses.colorError}`]: {\n backgroundColor: 'var(--color-error)',\n borderColor: 'var(--color-error)',\n\n ':hover, :active, :focus': {\n backgroundColor: 'var(--color-error-hover)'\n }\n },\n\n [`&.${buttonClasses.disabled}`]: {\n backgroundColor: 'var(--color-disabled)',\n borderColor: 'var(--color-disabled)',\n color: 'var(--color-text-disabled)'\n },\n\n ':hover, :active, :focus': {\n color: 'var(--color-text-light)'\n }\n },\n\n // Styles that apply to outlined (type === secondary)\n [`&.${buttonClasses.outlined}`]: {\n background: 'none',\n border: '1px solid var(--color-primary)',\n boxSizing: 'border-box',\n\n [`&.${buttonClasses.colorPrimary}`]: {\n color: 'var(--color-primary)',\n borderColor: 'var(--color-primary)',\n\n ':hover, :active, :focus': {\n borderColor: 'var(--color-primary-hover)',\n color: 'var(--color-primary-hover)'\n }\n },\n\n [`&.${buttonClasses.colorError}`]: {\n color: 'var(--color-error)',\n borderColor: 'var(--color-error)',\n\n ':hover, :active, :focus': {\n borderColor: 'var(--color-error-hover)',\n color: 'var(--color-error-hover)'\n }\n },\n\n ':disabled': {\n backgroundColor: 'transparent',\n borderColor: 'var(--color-text-disabled)',\n color: 'var(--color-text-disabled)'\n }\n },\n\n // Styles that apply to text (type === text)\n [`&.${buttonClasses.text}`]: {\n background: 'none',\n borderColor: 'transparent',\n display: 'inline-block',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n fontSize: '1.075rem',\n verticalAlign: 'middle',\n\n [`&.${buttonClasses.colorPrimary}`]: {\n color: 'var(--color-primary)',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-skyblue-light)'\n }\n },\n\n [`&.${buttonClasses.colorError}`]: {\n color: 'var(--color-error)',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-red-1-light)'\n }\n },\n\n [`&.${buttonClasses.endIcon}`]: {\n width: '1rem',\n height: '1rem',\n verticalAlign: 'text-top'\n },\n\n ':disabled': {\n backgroundColor: 'transparent',\n color: 'var(--color-text-disabled)',\n\n [`&.${buttonClasses.endIcon}`]: {\n fill: 'var(--color-text-disabled)'\n }\n }\n }\n },\n props.sx,\n FontNormalSxProps\n )}\n type={buttonType}\n variant={variant}\n >\n {children}\n </MUIButton>\n );\n }\n);\n"],"names":["AoaButton","memo","type","startIcon","dataQa","children","buttonType","props","variant","jsx","MUIButton","ChevronRight","merge","buttonClasses","FontNormalSxProps"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,+DAAiC,aAAa,KAAG,SAAS,CAgE7E,CAAC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,+DAAiC,aAAa,KAAG,SAAS,CAkE7E,CAAC"}
@@ -1,63 +1,68 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import { TextField as i } from "@mui/material";
3
- import { m as a } from "../../../chunks/index.DJYQ_-zP.js";
4
- import { memo as l } from "react";
5
- import { FontNormalSxProps as r } from "../../../_constants.js";
6
- const m = l(({ optional: e, ...o }) => /* @__PURE__ */ t(
7
- i,
8
- {
9
- ...o,
10
- InputLabelProps: { shrink: !1, ...o.InputLabelProps },
11
- required: !e,
12
- sx: a(
13
- {
14
- ".MuiInputBase-root": {
15
- ...r,
16
- marginTop: "35px",
17
- "&.MuiInputBase-multiline": {
18
- padding: 0
19
- },
20
- ":not(.Mui-error)::after": {
21
- borderColor: "var(--color-rijks-skyblue)"
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ import { TextField as s, inputLabelClasses as n, formHelperTextClasses as o, inputBaseClasses as e } from "@mui/material";
3
+ import { m as d } from "../../../chunks/index.DJYQ_-zP.js";
4
+ import { memo as p } from "react";
5
+ import { FontNormalSxProps as t } from "../../../_constants.js";
6
+ const u = p(({ optional: a, ...r }) => {
7
+ var l;
8
+ return /* @__PURE__ */ i(
9
+ s,
10
+ {
11
+ ...r,
12
+ required: !a,
13
+ slotProps: {
14
+ inputLabel: { shrink: !1, ...(l = r.slotProps) == null ? void 0 : l.inputLabel }
15
+ },
16
+ sx: d(
17
+ {
18
+ [`.${e.root}`]: {
19
+ ...t,
20
+ marginTop: "35px",
21
+ [`&.${e.multiline}`]: {
22
+ padding: 0
23
+ },
24
+ [`:not(.${o.error})::after`]: {
25
+ borderColor: "var(--color-rijks-skyblue)"
26
+ },
27
+ [`.${e.input}`]: {
28
+ padding: "17px 12px 16px",
29
+ ":disabled": {
30
+ backgroundColor: "var(--color-disabled)",
31
+ borderColor: "var(--color-disabled)"
32
+ }
33
+ }
22
34
  },
23
- ".MuiInputBase-input": {
24
- padding: "17px 12px 16px",
35
+ [`.${n.root}`]: {
36
+ ...t,
37
+ marginLeft: "-14px",
38
+ marginTop: "-10px",
25
39
  ":disabled": {
26
- backgroundColor: "var(--color-disabled)",
27
- borderColor: "var(--color-disabled)"
40
+ color: "var(--color-text-disabled)"
41
+ },
42
+ [`:focus:not(.${o.error})`]: {
43
+ color: "var(--color-rijks-skyblue)"
44
+ },
45
+ [`:not(.${o.required})::after`]: {
46
+ content: '"(optioneel)"',
47
+ marginLeft: "5px",
48
+ fontSize: "calc(var(--font-size-text) * 0.75)"
49
+ },
50
+ [`&.${o.error}`]: {
51
+ ...t,
52
+ fontWeight: "bold"
53
+ },
54
+ [`&.${o.disabled}`]: {
55
+ color: "var(--color-text-disabled)"
28
56
  }
29
57
  }
30
58
  },
31
- ".MuiInputLabel-root": {
32
- ...r,
33
- marginLeft: "-14px",
34
- marginTop: "-10px",
35
- ":disabled": {
36
- color: "var(--color-text-disabled)"
37
- },
38
- ":focus:not(.Mui-error)": {
39
- color: "var(--color-rijks-skyblue)"
40
- },
41
- ":not(.Mui-required)::after": {
42
- content: '"(optioneel)"',
43
- marginLeft: "5px",
44
- fontSize: "calc(var(--font-size-text) * 0.75)"
45
- },
46
- "&.Mui-error": {
47
- ...r,
48
- fontWeight: "bold"
49
- },
50
- "&.Mui-disabled": {
51
- color: "var(--color-text-disabled)"
52
- }
53
- }
54
- },
55
- o.sx
56
- ),
57
- variant: "outlined"
58
- }
59
- ));
59
+ r.sx
60
+ ),
61
+ variant: "outlined"
62
+ }
63
+ );
64
+ });
60
65
  export {
61
- m as AoaInput
66
+ u as AoaInput
62
67
  };
63
68
  //# sourceMappingURL=Input.js.map
@@ -1 +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;"}
1
+ {"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.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 required={!optional}\n slotProps={{\n inputLabel: { shrink: false, ...props.slotProps?.inputLabel }\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,MAC9D;AAAA,MACA,IAAIC;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;"}
@@ -1 +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"}
1
+ {"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"}
@@ -1,17 +1,17 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { Container as i, Box as o, Typography as r } from "@mui/material";
3
- import { m as n } from "../../../chunks/index.DJYQ_-zP.js";
4
- import { memo as x } from "react";
2
+ import { Container as o, Box as r, Typography as i, typographyClasses as n } from "@mui/material";
3
+ import { m as x } from "../../../chunks/index.DJYQ_-zP.js";
4
+ import { memo as s } from "react";
5
5
  import { FontNormalSxProps as a } from "../../../_constants.js";
6
- const h = x(
7
- ({ 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(
8
- r,
6
+ const C = s(
7
+ ({ children: m, TypographyProps: t }) => /* @__PURE__ */ e(o, { maxWidth: "md", sx: { height: "100%" }, children: /* @__PURE__ */ e(r, { sx: { height: "100%", placeContent: "center center", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
8
+ i,
9
9
  {
10
10
  ...t,
11
11
  color: "textPrimary",
12
- sx: n(
12
+ sx: x(
13
13
  {
14
- ".MuiTypography-root": a
14
+ [`.${n.root}`]: a
15
15
  },
16
16
  t == null ? void 0 : t.sx
17
17
  ),
@@ -21,6 +21,6 @@ const h = x(
21
21
  ) }) })
22
22
  );
23
23
  export {
24
- h as AoaNoPermission
24
+ C as AoaNoPermission
25
25
  };
26
26
  //# sourceMappingURL=NoPermission.js.map