@rws-aoa/react-library 5.1.2 → 6.0.1

package/dist/components/atoms/_menu/menu-item/MenuItem.js

@@ -1,34 +1,33 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { memo as w, useState as x, createElement as I } from "react";
-import { Home as M, KeyboardArrowDown as S } from "@mui/icons-material";
-import { MenuItem as u, Link as B, menuItemClasses as b, Typography as E, svgIconClasses as h, Popper as $ } from "@mui/material";
-import { Link as p } from "@tanstack/react-router";
-import { l as v } from "../../../../chunks/lodash.DOeeRDpT.js";
-import { FontNormalSxProps as f } from "../../../../_constants.js";
-const F = w((e) => {
-  var i, d, g, m, s;
-  const [k, a] = x(null), [t, n] = x(!1);
-  function y(o) {
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { memo as k, useState as d, createElement as y } from "react";
+import { Home as C, KeyboardArrowDown as P } from "@mui/icons-material";
+import { MenuItem as g, Link as j, menuItemClasses as m, Typography as w, svgIconClasses as s, Popper as I } from "@mui/material";
+import { Link as c } from "@tanstack/react-router";
+import { l as x } from "../../../../chunks/lodash.CA_K01A9.js";
+import { FontNormalSxProps as u } from "../../../../_constants.js";
+const A = k((e) => {
+  const [b, a] = d(null), [t, n] = d(!1);
+  function h(o) {
     n(!0), a(o.currentTarget);
   }
   function l() {
     n(!1), a(null);
   }
-  function C() {
+  function p() {
     return e.page.externalPath ? { href: e.page.to } : { to: e.page.to };
   }
-  return /* @__PURE__ */ I(
-    u,
+  return /* @__PURE__ */ y(
+    g,
     {
-      ...C(),
-      "aria-controls": (i = e.page.subItems) != null && i.length && t ? "submenu" : void 0,
-      "aria-expanded": (d = e.page.subItems) != null && d.length && t ? "true" : void 0,
-      "aria-haspopup": (g = e.page.subItems) != null && g.length ? "true" : "false",
+      ...p(),
+      "aria-controls": e.page.subItems?.length && t ? "submenu" : void 0,
+      "aria-expanded": e.page.subItems?.length && t ? "true" : void 0,
+      "aria-haspopup": e.page.subItems?.length ? "true" : "false",
       "aria-label": e.page.label,
-      component: e.page.to && !e.page.externalPath ? p : B,
+      component: e.page.to && !e.page.externalPath ? c : j,
       key: e.index,
       onClick: () => e.setSelectedPage(e.index),
-      onMouseEnter: (o) => y(o),
+      onMouseEnter: (o) => h(o),
       onMouseLeave: () => l(),
       role: "menuitem",
       selected: e.selectedPage === e.index,
@@ -42,7 +41,7 @@ const F = w((e) => {
             textDecoration: "underline"
           }
         },
-        [`&.${b.selected}`]: {
+        [`&.${m.selected}`]: {
           backgroundColor: "var(--color-rijks-yellow-light)",
           borderBottomColor: "var(--color-rijks-skyblue)",
           ":hover": {
@@ -52,33 +51,33 @@ const F = w((e) => {
       },
       title: e.page.label
     },
-    /* @__PURE__ */ c(
-      E,
+    /* @__PURE__ */ i(
+      w,
       {
         "aria-hidden": !0,
         component: "span",
-        sx: v.merge(
+        sx: x.merge(
           {
             display: "flex",
             alignItems: "center",
-            [`&.${h.root}`]: {
+            [`&.${s.root}`]: {
               marginRight: "5px"
             }
           },
-          f
+          u
         ),
         variant: "body1",
         children: [
-          e.index === 0 && /* @__PURE__ */ r(M, {}),
+          e.index === 0 && /* @__PURE__ */ r(C, {}),
           e.page.label,
-          (m = e.page.subItems) != null && m.length ? /* @__PURE__ */ r(S, {}) : null
+          e.page.subItems?.length ? /* @__PURE__ */ r(P, {}) : null
         ]
       }
     ),
     e.page.subItems && /* @__PURE__ */ r(
-      $,
+      I,
       {
-        anchorEl: k,
+        anchorEl: b,
         id: "submenu",
         open: t,
         placement: "bottom-start",
@@ -97,22 +96,22 @@ const F = w((e) => {
               rgb(0 0 0 / 5%) 0 4px 6px -2px
             `
         },
-        children: (s = e.page.subItems) == null ? void 0 : s.map((o, P) => /* @__PURE__ */ c(
-          u,
+        children: e.page.subItems?.map((o, v) => /* @__PURE__ */ i(
+          g,
           {
             "aria-label": o.label,
-            component: p,
+            component: c,
             disableRipple: !0,
             divider: o.divider ?? !1,
-            onClick: (j) => {
-              j.stopPropagation(), e.setSelectedPage(e.index), l();
+            onClick: (f) => {
+              f.stopPropagation(), e.setSelectedPage(e.index), l();
             },
-            sx: v.merge(
+            sx: x.merge(
               {
                 ":active": {
                   backgroundColor: "var(--color-bg-light)"
                 },
-                [`&.${b.divider}`]: {
+                [`&.${m.divider}`]: {
                   borderBottom: "transparent",
                   position: "relative",
                   marginBottom: "16px",
@@ -125,13 +124,13 @@ const F = w((e) => {
                     borderBottom: "1px solid rgba(0, 0, 0, 0.12)"
                   }
                 },
-                [`&.${h.root}`]: {
+                [`&.${s.root}`]: {
                   fontSize: "var(--font-size-text)",
                   color: "var(--color-rijks-grey-7)",
                   marginRight: "12px"
                 }
               },
-              f
+              u
             ),
             to: o.to,
             children: [
@@ -139,13 +138,13 @@ const F = w((e) => {
               o.label
             ]
           },
-          P
+          v
         ))
       }
     )
   );
 });
 export {
-  F as AoaMenuItem
+  A as AoaMenuItem
 };
 //# sourceMappingURL=MenuItem.js.map

package/dist/components/atoms/_menu/menu-item/MenuItem.js.map

@@ -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 {\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';\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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"}
+{"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';\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","Link","MUILink","menuItemClasses","jsxs","Typography","merge","svgIconClasses","FontNormalSxProps","jsx","HomeIcon","KeyboardArrowDownIcon","Popper","subItem","index"],"mappings":"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"}

package/dist/components/atoms/_menu/user-menu/UserMenu.js

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Box as h, Typography as f, MenuItem as l, Avatar as g, Popper as b, Link as v } from "@mui/material";
 import { Link as k } from "@tanstack/react-router";
-import { l as C } from "../../../../chunks/lodash.DOeeRDpT.js";
+import { l as C } from "../../../../chunks/lodash.CA_K01A9.js";
 import { memo as M, useState as p } from "react";
 import { FontNormalSxProps as s } from "../../../../_constants.js";
 const S = M((r) => {

package/dist/components/atoms/_menu/user-menu/UserMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.js","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"sourcesContent":["import { Avatar, Box, Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from '@mui/material';\nimport { Link } from '@tanstack/react-router';\nimport { merge } from 'lodash';\nimport { memo, useState, type MouseEvent, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\ntype Action =\n  /**\n   * The path that the menu item links to on click\n   */\n  | { onClick?: never; to: string }\n  /**\n   * The onClick function for situations where you don't want to navigate to another page (e.g. logout)\n   */\n  | { onClick(): void; to?: never };\n\nexport type AoaSetting = Action & {\n  /**\n   * Optional divider to be shown below menu item\n   */\n  divider?: boolean;\n  /**\n   * The label of the menu item\n   */\n  label: string;\n};\n\ninterface UserMenuProps {\n  /**\n   * A list of the user menu items\n   */\n  readonly settings: AoaSetting[];\n  /**\n   * Username to be displayed on the left of the settings menu icon\n   */\n  readonly username?: string;\n}\n\n/**\n * Constructs a user menu using pre-defined Rijks styling\n *\n * @param props - Props to pass to the user menu\n * @example\n * ```jsx\n * <AoaUserMenu\n *  settings={[\n *    { label: \"Logout\", onClick: () => console.log(\"Logout\") }\n *  ]}\n * />\n * ```\n */\n\nexport const AoaUserMenu = memo((props: UserMenuProps): ReactNode => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [open, setOpen] = useState(false);\n\n  function handleMenuOpen(event: MouseEvent<HTMLLIElement, globalThis.MouseEvent>) {\n    setOpen(true);\n    setAnchorEl(event.currentTarget);\n  }\n\n  function handleMenuClose() {\n    setOpen(false);\n    setAnchorEl(null);\n  }\n\n  return (\n    <Box alignItems='center' display='flex' role='menu' sx={{ flexGrow: 0, minWidth: 'fit-content' }}>\n      {props.username && (\n        <Typography component='span' sx={merge({ marginRight: '16px' }, FontNormalSxProps)}>\n          {props.username}\n        </Typography>\n      )}\n      <MUIMenuItem\n        aria-controls={open ? 'usermenu' : undefined}\n        aria-expanded={open ? 'true' : undefined}\n        aria-haspopup='true'\n        aria-label='User menu'\n        onMouseEnter={(event) => handleMenuOpen(event)}\n        onMouseLeave={() => handleMenuClose()}\n        sx={{\n          padding: 0,\n\n          ':hover': {\n            backgroundColor: 'transparent'\n          }\n        }}\n      >\n        <Avatar />\n        <Popper\n          anchorEl={anchorEl}\n          id='usermenu'\n          open={open}\n          placement='bottom-end'\n          sx={{\n            backgroundColor: 'var(--color-bg-light)',\n            padding: '4px 0',\n            borderRadius: '6px',\n            marginTop: '8px',\n            minWidth: '120px',\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.settings.map((setting, index) => (\n            <MUIMenuItem\n              component={setting.to ? Link : MUILink}\n              disableRipple\n              divider={setting.divider ?? false}\n              key={index}\n              onClick={(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => {\n                event.stopPropagation();\n                if (setting.onClick) {\n                  setting.onClick();\n                }\n\n                setOpen(false);\n              }}\n              sx={{ ...FontNormalSxProps }}\n              to={setting.to}\n            >\n              {setting.label}\n            </MUIMenuItem>\n          ))}\n        </Popper>\n      </MUIMenuItem>\n    </Box>\n  );\n});\n"],"names":["AoaUserMenu","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","jsxs","Box","jsx","Typography","merge","FontNormalSxProps","MUIMenuItem","Avatar","Popper","setting","index","Link","MUILink"],"mappings":";;;;;;AAoDa,MAAAA,IAAcC,EAAK,CAACC,MAAoC;AACnE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA6B,IAAI,GAC3D,CAACC,GAAMC,CAAO,IAAIF,EAAS,EAAK;AAEtC,WAASG,EAAeC,GAAyD;AAC/E,IAAAF,EAAQ,EAAI,GACZH,EAAYK,EAAM,aAAa;AAAA,EAAA;AAGjC,WAASC,IAAkB;AACzB,IAAAH,EAAQ,EAAK,GACbH,EAAY,IAAI;AAAA,EAAA;AAGlB,SACG,gBAAAO,EAAAC,GAAA,EAAI,YAAW,UAAS,SAAQ,QAAO,MAAK,QAAO,IAAI,EAAE,UAAU,GAAG,UAAU,cAC9E,GAAA,UAAA;AAAA,IAAAV,EAAM,YACL,gBAAAW,EAACC,GAAW,EAAA,WAAU,QAAO,IAAIC,EAAAA,MAAM,EAAE,aAAa,OAAO,GAAGC,CAAiB,GAC9E,YAAM,UACT;AAAA,IAEF,gBAAAL;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,iBAAeX,IAAO,aAAa;AAAA,QACnC,iBAAeA,IAAO,SAAS;AAAA,QAC/B,iBAAc;AAAA,QACd,cAAW;AAAA,QACX,cAAc,CAACG,MAAUD,EAAeC,CAAK;AAAA,QAC7C,cAAc,MAAMC,EAAgB;AAAA,QACpC,IAAI;AAAA,UACF,SAAS;AAAA,UAET,UAAU;AAAA,YACR,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAG,EAACK,GAAO,EAAA;AAAA,UACR,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,UAAAhB;AAAA,cACA,IAAG;AAAA,cACH,MAAAG;AAAA,cACA,WAAU;AAAA,cACV,IAAI;AAAA,gBACF,iBAAiB;AAAA,gBACjB,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMb;AAAA,cAEC,UAAMJ,EAAA,SAAS,IAAI,CAACkB,GAASC,MAC5B,gBAAAR;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,WAAWG,EAAQ,KAAKE,IAAOC;AAAAA,kBAC/B,eAAa;AAAA,kBACb,SAASH,EAAQ,WAAW;AAAA,kBAE5B,SAAS,CAACX,MAAgE;AACxE,oBAAAA,EAAM,gBAAgB,GAClBW,EAAQ,WACVA,EAAQ,QAAQ,GAGlBb,EAAQ,EAAK;AAAA,kBACf;AAAA,kBACA,IAAI,EAAE,GAAGS,EAAkB;AAAA,kBAC3B,IAAII,EAAQ;AAAA,kBAEX,UAAQA,EAAA;AAAA,gBAAA;AAAA,gBAZJC;AAAA,cAcR,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"UserMenu.js","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"sourcesContent":["import { Avatar, Box, Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from '@mui/material';\nimport { Link } from '@tanstack/react-router';\nimport { merge } from 'lodash';\nimport { memo, useState, type MouseEvent, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\ntype Action =\n  /**\n   * The path that the menu item links to on click\n   */\n  | { onClick?: never; to: string }\n  /**\n   * The onClick function for situations where you don't want to navigate to another page (e.g. logout)\n   */\n  | { onClick(): void; to?: never };\n\nexport type AoaSetting = Action & {\n  /**\n   * Optional divider to be shown below menu item\n   */\n  divider?: boolean;\n  /**\n   * The label of the menu item\n   */\n  label: string;\n};\n\ninterface UserMenuProps {\n  /**\n   * A list of the user menu items\n   */\n  readonly settings: AoaSetting[];\n  /**\n   * Username to be displayed on the left of the settings menu icon\n   */\n  readonly username?: string;\n}\n\n/**\n * Constructs a user menu using pre-defined Rijks styling\n *\n * @param props - Props to pass to the user menu\n * @example\n * ```jsx\n * <AoaUserMenu\n *  settings={[\n *    { label: \"Logout\", onClick: () => console.log(\"Logout\") }\n *  ]}\n * />\n * ```\n */\n\nexport const AoaUserMenu = memo((props: UserMenuProps): ReactNode => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [open, setOpen] = useState(false);\n\n  function handleMenuOpen(event: MouseEvent<HTMLLIElement, globalThis.MouseEvent>) {\n    setOpen(true);\n    setAnchorEl(event.currentTarget);\n  }\n\n  function handleMenuClose() {\n    setOpen(false);\n    setAnchorEl(null);\n  }\n\n  return (\n    <Box alignItems='center' display='flex' role='menu' sx={{ flexGrow: 0, minWidth: 'fit-content' }}>\n      {props.username && (\n        <Typography component='span' sx={merge({ marginRight: '16px' }, FontNormalSxProps)}>\n          {props.username}\n        </Typography>\n      )}\n      <MUIMenuItem\n        aria-controls={open ? 'usermenu' : undefined}\n        aria-expanded={open ? 'true' : undefined}\n        aria-haspopup='true'\n        aria-label='User menu'\n        onMouseEnter={(event) => handleMenuOpen(event)}\n        onMouseLeave={() => handleMenuClose()}\n        sx={{\n          padding: 0,\n\n          ':hover': {\n            backgroundColor: 'transparent'\n          }\n        }}\n      >\n        <Avatar />\n        <Popper\n          anchorEl={anchorEl}\n          id='usermenu'\n          open={open}\n          placement='bottom-end'\n          sx={{\n            backgroundColor: 'var(--color-bg-light)',\n            padding: '4px 0',\n            borderRadius: '6px',\n            marginTop: '8px',\n            minWidth: '120px',\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.settings.map((setting, index) => (\n            <MUIMenuItem\n              component={setting.to ? Link : MUILink}\n              disableRipple\n              divider={setting.divider ?? false}\n              key={index}\n              onClick={(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => {\n                event.stopPropagation();\n                if (setting.onClick) {\n                  setting.onClick();\n                }\n\n                setOpen(false);\n              }}\n              sx={{ ...FontNormalSxProps }}\n              to={setting.to}\n            >\n              {setting.label}\n            </MUIMenuItem>\n          ))}\n        </Popper>\n      </MUIMenuItem>\n    </Box>\n  );\n});\n"],"names":["AoaUserMenu","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","jsxs","Box","jsx","Typography","merge","FontNormalSxProps","MUIMenuItem","Avatar","Popper","setting","index","Link","MUILink"],"mappings":";;;;;;AAoDO,MAAMA,IAAcC,EAAK,CAACC,MAAoC;AACnE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA6B,IAAI,GAC3D,CAACC,GAAMC,CAAO,IAAIF,EAAS,EAAK;AAEtC,WAASG,EAAeC,GAAyD;AAC/E,IAAAF,EAAQ,EAAI,GACZH,EAAYK,EAAM,aAAa;AAAA,EAAA;AAGjC,WAASC,IAAkB;AACzB,IAAAH,EAAQ,EAAK,GACbH,EAAY,IAAI;AAAA,EAAA;AAGlB,SACE,gBAAAO,EAACC,GAAA,EAAI,YAAW,UAAS,SAAQ,QAAO,MAAK,QAAO,IAAI,EAAE,UAAU,GAAG,UAAU,iBAC9E,UAAA;AAAA,IAAAV,EAAM,YACL,gBAAAW,EAACC,GAAA,EAAW,WAAU,QAAO,IAAIC,EAAAA,MAAM,EAAE,aAAa,OAAA,GAAUC,CAAiB,GAC9E,YAAM,UACT;AAAA,IAEF,gBAAAL;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,iBAAeX,IAAO,aAAa;AAAA,QACnC,iBAAeA,IAAO,SAAS;AAAA,QAC/B,iBAAc;AAAA,QACd,cAAW;AAAA,QACX,cAAc,CAACG,MAAUD,EAAeC,CAAK;AAAA,QAC7C,cAAc,MAAMC,EAAA;AAAA,QACpB,IAAI;AAAA,UACF,SAAS;AAAA,UAET,UAAU;AAAA,YACR,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAG,EAACK,GAAA,EAAO;AAAA,UACR,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,UAAAhB;AAAA,cACA,IAAG;AAAA,cACH,MAAAG;AAAA,cACA,WAAU;AAAA,cACV,IAAI;AAAA,gBACF,iBAAiB;AAAA,gBACjB,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAA;AAAA,cAQZ,UAAAJ,EAAM,SAAS,IAAI,CAACkB,GAASC,MAC5B,gBAAAR;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,WAAWG,EAAQ,KAAKE,IAAOC;AAAAA,kBAC/B,eAAa;AAAA,kBACb,SAASH,EAAQ,WAAW;AAAA,kBAE5B,SAAS,CAACX,MAAgE;AACxE,oBAAAA,EAAM,gBAAA,GACFW,EAAQ,WACVA,EAAQ,QAAA,GAGVb,EAAQ,EAAK;AAAA,kBAAA;AAAA,kBAEf,IAAI,EAAE,GAAGS,EAAA;AAAA,kBACT,IAAII,EAAQ;AAAA,kBAEX,UAAAA,EAAQ;AAAA,gBAAA;AAAA,gBAZJC;AAAA,cAAA,CAcR;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,CAAC;"}

package/dist/components/atoms/button/Button.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { ChevronRight as d } from "@mui/icons-material";
 import { Button as v, buttonClasses as r } from "@mui/material";
-import { l as s } from "../../../chunks/lodash.DOeeRDpT.js";
+import { l as s } from "../../../chunks/lodash.CA_K01A9.js";
 import { memo as b } from "react";
 import { FontNormalSxProps as x } from "../../../_constants.js";
 const C = b(

package/dist/components/atoms/button/Button.js.map

@@ -1 +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';\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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"}
+{"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';\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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"}

package/dist/components/atoms/icon-button/IconButton.d.ts

@@ -1,5 +1,4 @@
 import { SxProps } from '@mui/material';
-import { ReactNode } from 'react';
 export interface AoaIconButtonProps {
     /**
      * Data-qa tag for E2E test purposes
@@ -39,5 +38,5 @@ export interface AoaIconButtonProps {
  * <AoaIconButton onClick={() => console.log()} label='Order a burger' icon={<Fastfood />} />
  * ```
  */
-export declare const AoaIconButton: import('react').MemoExoticComponent<(props: AoaIconButtonProps) => ReactNode>;
+export declare const AoaIconButton: import('react').ForwardRefExoticComponent<AoaIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/atoms/icon-button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,aAAa,8CAAgB,kBAAkB,KAAG,SAAS,CAqDtE,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAK1E,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,kHAsDxB,CAAC"}

package/dist/components/atoms/icon-button/IconButton.js

@@ -1,11 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
-import { IconButton as a } from "@mui/material";
-import { l } from "../../../chunks/lodash.DOeeRDpT.js";
-import { memo as t } from "react";
-import { AoaTooltip as i } from "../tooltip/Tooltip.js";
-const m = t((o) => {
-  const e = /* @__PURE__ */ r(
-    a,
+import { IconButton as l } from "@mui/material";
+import { l as t } from "../../../chunks/lodash.CA_K01A9.js";
+import { forwardRef as i } from "react";
+import { AoaTooltip as d } from "../tooltip/Tooltip.js";
+const f = i(function(o, e) {
+  const a = /* @__PURE__ */ r(
+    l,
     {
       "aria-label": o.label,
       "data-qa": o["data-qa"],
@@ -14,8 +14,9 @@ const m = t((o) => {
       disableTouchRipple: !0,
       disabled: o.disabled,
       onClick: o.onClick,
+      ref: e,
       role: "button",
-      sx: l.merge(
+      sx: t.merge(
         {
           color: "var(--color-primary)",
           border: "1px solid var(--color-primary)",
@@ -44,9 +45,9 @@ const m = t((o) => {
       children: o.icon
     }
   );
-  return /* @__PURE__ */ r(i, { title: o.label, children: o.disabled ? /* @__PURE__ */ r("span", { "aria-label": o.label, "data-testid": "disabled-span-wrapper", role: "tooltip", children: e }) : e });
+  return /* @__PURE__ */ r(d, { title: o.label, children: o.disabled ? /* @__PURE__ */ r("span", { "aria-label": o.label, "data-testid": "disabled-span-wrapper", role: "tooltip", children: a }) : a });
 });
 export {
-  m as AoaIconButton
+  f as AoaIconButton
 };
 //# sourceMappingURL=IconButton.js.map

package/dist/components/atoms/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/atoms/icon-button/IconButton.tsx"],"sourcesContent":["import { IconButton as MUIIconButton, type SxProps } from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { AoaTooltip } from '../tooltip/Tooltip';\n\nexport interface AoaIconButtonProps {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * Whether this button should be disabled\n   */\n  readonly disabled?: boolean;\n  /**\n   * The icon to be displayed as a button\n   */\n  readonly icon: JSX.Element;\n  /**\n   * Whether this button is being used inline\n   */\n  readonly inline?: boolean;\n  /**\n   * The label that is shown on hover\n   */\n  readonly label: string;\n  /**\n   * The action that should be triggered when clicking the button\n   */\n  onClick(this: void, ..._args: any[]): void;\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n}\n\n/**\n * Constructs an icon button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the icon button\n * @example\n * ```jsx\n * <AoaIconButton onClick={() => console.log()} label='Order a burger' icon={<Fastfood />} />\n * ```\n */\n\nexport const AoaIconButton = memo((props: AoaIconButtonProps): ReactNode => {\n  const Button = (\n    <MUIIconButton\n      aria-label={props.label}\n      data-qa={props['data-qa']}\n      disableFocusRipple\n      disableRipple\n      disableTouchRipple\n      disabled={props.disabled}\n      onClick={props.onClick}\n      role='button'\n      sx={merge(\n        {\n          color: 'var(--color-primary)',\n          border: '1px solid var(--color-primary)',\n          borderRadius: 0,\n          ':hover, :active, :focus': {\n            color: 'var(--color-primary-hover)',\n            borderColor: 'var(--color-primary-hover)'\n          },\n          ':disabled': {\n            backgroundColor: 'transparent',\n            borderColor: 'var(--color-text-disabled)',\n            color: 'var(--color-text-disabled)'\n          },\n          ':focus': {\n            outline: '2px dashed var(--color-text)',\n            outlineOffset: 3,\n            boxShadow: 'none'\n          },\n          ...(props.inline && {\n            border: 'none',\n            padding: 0\n          })\n        },\n        props.sx\n      )}\n    >\n      {props.icon}\n    </MUIIconButton>\n  );\n\n  return (\n    <AoaTooltip title={props.label}>\n      {props.disabled ? (\n        <span aria-label={props.label} data-testid='disabled-span-wrapper' role='tooltip'>\n          {Button}\n        </span>\n      ) : (\n        Button\n      )}\n    </AoaTooltip>\n  );\n});\n"],"names":["AoaIconButton","memo","props","Button","jsx","MUIIconButton","merge","AoaTooltip"],"mappings":";;;;;AA8Ca,MAAAA,IAAgBC,EAAK,CAACC,MAAyC;AAC1E,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,cAAYH,EAAM;AAAA,MAClB,WAASA,EAAM,SAAS;AAAA,MACxB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,oBAAkB;AAAA,MAClB,UAAUA,EAAM;AAAA,MAChB,SAASA,EAAM;AAAA,MACf,MAAK;AAAA,MACL,IAAII,EAAA;AAAA,QACF;AAAA,UACE,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,2BAA2B;AAAA,YACzB,OAAO;AAAA,YACP,aAAa;AAAA,UACf;AAAA,UACA,aAAa;AAAA,YACX,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,WAAW;AAAA,UACb;AAAA,UACA,GAAIJ,EAAM,UAAU;AAAA,YAClB,QAAQ;AAAA,YACR,SAAS;AAAA,UAAA;AAAA,QAEb;AAAA,QACAA,EAAM;AAAA,MACR;AAAA,MAEC,UAAMA,EAAA;AAAA,IAAA;AAAA,EACT;AAGF,2BACGK,GAAW,EAAA,OAAOL,EAAM,OACtB,UAAAA,EAAM,WACJ,gBAAAE,EAAA,QAAA,EAAK,cAAYF,EAAM,OAAO,eAAY,yBAAwB,MAAK,WACrE,UAAAC,GACH,IAEAA,EAEJ,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/atoms/icon-button/IconButton.tsx"],"sourcesContent":["import { IconButton as MUIIconButton, type SxProps } from '@mui/material';\nimport { merge } from 'lodash';\nimport { forwardRef } from 'react';\nimport { AoaTooltip } from '../tooltip/Tooltip';\n\nexport interface AoaIconButtonProps {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * Whether this button should be disabled\n   */\n  readonly disabled?: boolean;\n  /**\n   * The icon to be displayed as a button\n   */\n  readonly icon: JSX.Element;\n  /**\n   * Whether this button is being used inline\n   */\n  readonly inline?: boolean;\n  /**\n   * The label that is shown on hover\n   */\n  readonly label: string;\n  /**\n   * The action that should be triggered when clicking the button\n   */\n  onClick(this: void, ..._args: any[]): void;\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n}\n\n/**\n * Constructs an icon button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the icon button\n * @example\n * ```jsx\n * <AoaIconButton onClick={() => console.log()} label='Order a burger' icon={<Fastfood />} />\n * ```\n */\nexport const AoaIconButton = forwardRef<HTMLButtonElement, AoaIconButtonProps>(function IconButton(props, ref) {\n  const Button = (\n    <MUIIconButton\n      aria-label={props.label}\n      data-qa={props['data-qa']}\n      disableFocusRipple\n      disableRipple\n      disableTouchRipple\n      disabled={props.disabled}\n      onClick={props.onClick}\n      ref={ref}\n      role='button'\n      sx={merge(\n        {\n          color: 'var(--color-primary)',\n          border: '1px solid var(--color-primary)',\n          borderRadius: 0,\n          ':hover, :active, :focus': {\n            color: 'var(--color-primary-hover)',\n            borderColor: 'var(--color-primary-hover)'\n          },\n          ':disabled': {\n            backgroundColor: 'transparent',\n            borderColor: 'var(--color-text-disabled)',\n            color: 'var(--color-text-disabled)'\n          },\n          ':focus': {\n            outline: '2px dashed var(--color-text)',\n            outlineOffset: 3,\n            boxShadow: 'none'\n          },\n          ...(props.inline && {\n            border: 'none',\n            padding: 0\n          })\n        },\n        props.sx\n      )}\n    >\n      {props.icon}\n    </MUIIconButton>\n  );\n\n  return (\n    <AoaTooltip title={props.label}>\n      {props.disabled ? (\n        <span aria-label={props.label} data-testid='disabled-span-wrapper' role='tooltip'>\n          {Button}\n        </span>\n      ) : (\n        Button\n      )}\n    </AoaTooltip>\n  );\n});\n"],"names":["AoaIconButton","forwardRef","props","ref","Button","jsx","MUIIconButton","merge","AoaTooltip"],"mappings":";;;;;AA6CO,MAAMA,IAAgBC,EAAkD,SAAoBC,GAAOC,GAAK;AAC7G,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,cAAYJ,EAAM;AAAA,MAClB,WAASA,EAAM,SAAS;AAAA,MACxB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,oBAAkB;AAAA,MAClB,UAAUA,EAAM;AAAA,MAChB,SAASA,EAAM;AAAA,MACf,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,IAAII,EAAAA;AAAAA,QACF;AAAA,UACE,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,2BAA2B;AAAA,YACzB,OAAO;AAAA,YACP,aAAa;AAAA,UAAA;AAAA,UAEf,aAAa;AAAA,YACX,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UAAA;AAAA,UAET,UAAU;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,WAAW;AAAA,UAAA;AAAA,UAEb,GAAIL,EAAM,UAAU;AAAA,YAClB,QAAQ;AAAA,YACR,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAEFA,EAAM;AAAA,MAAA;AAAA,MAGP,UAAAA,EAAM;AAAA,IAAA;AAAA,EAAA;AAIX,2BACGM,GAAA,EAAW,OAAON,EAAM,OACtB,UAAAA,EAAM,WACL,gBAAAG,EAAC,QAAA,EAAK,cAAYH,EAAM,OAAO,eAAY,yBAAwB,MAAK,WACrE,UAAAE,GACH,IAEAA,EAAA,CAEJ;AAEJ,CAAC;"}

package/dist/components/atoms/input/Input.d.ts

@@ -1,5 +1,10 @@
 import { TextFieldProps } from '@mui/material';
 import { ReactNode } from 'react';
+declare module '@mui/material' {
+    interface BaseTextFieldProps {
+        'data-qa'?: string;
+    }
+}
 export interface AoaInputProps extends Omit<TextFieldProps, 'variant'> {
     /**
      * Data-qa tag for E2E test purposes

package/dist/components/atoms/input/Input.d.ts.map

@@ -1 +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,CAmE7E,CAAC"}
+{"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,OAAO,QAAQ,eAAe,CAAC;IAC7B,UAAiB,kBAAkB;QACjC,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;CACF;AAED,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,CAmE7E,CAAC"}

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

@@ -1,69 +1,66 @@
-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 { jsx as a } from "react/jsx-runtime";
+import { TextField as i, inputLabelClasses as s, formHelperTextClasses as o, inputBaseClasses as e } from "@mui/material";
+import { l as n } from "../../../chunks/lodash.CA_K01A9.js";
+import { memo as d } 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)"
-              }
-            }
+const f = d(({ optional: l, ...r }) => /* @__PURE__ */ a(
+  i,
+  {
+    ...r,
+    required: !l,
+    slotProps: {
+      inputLabel: { shrink: !1, ...r.slotProps?.inputLabel },
+      ...r.slotProps
+    },
+    sx: n.merge(
+      {
+        [`.${e.root}`]: {
+          ...t,
+          marginTop: "35px",
+          [`&.${e.multiline}`]: {
+            padding: 0
           },
-          [`.${n.root}`]: {
-            ...t,
-            marginLeft: "-14px",
-            marginTop: "-10px",
+          [`:not(.${o.error})::after`]: {
+            borderColor: "var(--color-rijks-skyblue)"
+          },
+          [`.${e.input}`]: {
+            padding: "17px 12px 16px",
             ":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)"
+              backgroundColor: "var(--color-disabled)",
+              borderColor: "var(--color-disabled)"
             }
           }
         },
-        r.sx
-      ),
-      variant: "outlined"
-    }
-  );
-});
+        [`.${s.root}`]: {
+          ...t,
+          marginLeft: "-14px",
+          marginTop: "-10px",
+          ":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)"
+          }
+        }
+      },
+      r.sx
+    ),
+    variant: "outlined"
+  }
+));
 export {
-  u as AoaInput
+  f 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 {\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;"}
+{"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\ndeclare module '@mui/material' {\n  export interface BaseTextFieldProps {\n    'data-qa'?: string;\n  }\n}\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","merge","inputBaseClasses","FontNormalSxProps","formHelperTextClasses","inputLabelClasses"],"mappings":";;;;;AAqCO,MAAMA,IAAWC,EAAK,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAEzC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,UAAU,CAACD;AAAA,IACX,WAAW;AAAA,MACT,YAAY,EAAE,QAAQ,IAAO,GAAGC,EAAM,WAAW,WAAA;AAAA,MACjD,GAAGA,EAAM;AAAA,IAAA;AAAA,IAEX,IAAIG,EAAAA;AAAAA,MACF;AAAA,QACE,CAAC,IAAIC,EAAiB,IAAI,EAAE,GAAG;AAAA,UAC7B,GAAGC;AAAA,UACH,WAAW;AAAA,UAEX,CAAC,KAAKD,EAAiB,SAAS,EAAE,GAAG;AAAA,YACnC,SAAS;AAAA,UAAA;AAAA,UAGX,CAAC,SAASE,EAAsB,KAAK,UAAU,GAAG;AAAA,YAChD,aAAa;AAAA,UAAA;AAAA,UAGf,CAAC,IAAIF,EAAiB,KAAK,EAAE,GAAG;AAAA,YAC9B,SAAS;AAAA,YAET,aAAa;AAAA,cACX,iBAAiB;AAAA,cACjB,aAAa;AAAA,YAAA;AAAA,UACf;AAAA,QACF;AAAA,QAGF,CAAC,IAAIG,EAAkB,IAAI,EAAE,GAAG;AAAA,UAC9B,GAAGF;AAAA,UACH,YAAY;AAAA,UACZ,WAAW;AAAA,UAEX,aAAa;AAAA,YACX,OAAO;AAAA,UAAA;AAAA,UAGT,CAAC,eAAeC,EAAsB,KAAK,GAAG,GAAG;AAAA,YAC/C,OAAO;AAAA,UAAA;AAAA,UAGT,CAAC,SAASA,EAAsB,QAAQ,UAAU,GAAG;AAAA,YACnD,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA,UAAA;AAAA,UAGZ,CAAC,KAAKA,EAAsB,KAAK,EAAE,GAAG;AAAA,YACpC,GAAGD;AAAA,YACH,YAAY;AAAA,UAAA;AAAA,UAGd,CAAC,KAAKC,EAAsB,QAAQ,EAAE,GAAG;AAAA,YACvC,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,MAEFN,EAAM;AAAA,IAAA;AAAA,IAER,SAAQ;AAAA,EAAA;AAAA,CAGb;"}