@rws-aoa/react-library 6.0.1 → 7.0.1

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

@@ -1,80 +1,80 @@
-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.CA_K01A9.js";
-import { memo as M, useState as p } from "react";
-import { FontNormalSxProps as s } from "../../../../_constants.js";
-const S = M((r) => {
-  const [m, i] = p(null), [n, a] = p(!1);
-  function d(o) {
-    a(!0), i(o.currentTarget);
-  }
-  function u() {
-    a(!1), i(null);
-  }
-  return /* @__PURE__ */ t(h, { alignItems: "center", display: "flex", role: "menu", sx: { flexGrow: 0, minWidth: "fit-content" }, children: [
-    r.username && /* @__PURE__ */ e(f, { component: "span", sx: C.merge({ marginRight: "16px" }, s), children: r.username }),
-    /* @__PURE__ */ t(
-      l,
-      {
-        "aria-controls": n ? "usermenu" : void 0,
-        "aria-expanded": n ? "true" : void 0,
-        "aria-haspopup": "true",
-        "aria-label": "User menu",
-        onMouseEnter: (o) => d(o),
-        onMouseLeave: () => u(),
-        sx: {
-          padding: 0,
-          ":hover": {
-            backgroundColor: "transparent"
-          }
-        },
-        children: [
-          /* @__PURE__ */ e(g, {}),
-          /* @__PURE__ */ e(
-            b,
-            {
-              anchorEl: m,
-              id: "usermenu",
-              open: n,
-              placement: "bottom-end",
-              sx: {
-                backgroundColor: "var(--color-bg-light)",
-                padding: "4px 0",
-                borderRadius: "6px",
-                marginTop: "8px",
-                minWidth: "120px",
-                color: "var(--color-text)",
-                boxShadow: `
+import { jsx as g, jsxs as M } from "react/jsx-runtime";
+import { c as T } from "../../../../chunks/compiler-runtime.hDcrsMwn.js";
+import { Typography as j, Avatar as w, MenuItem as C, Link as I, Popper as U, Box as W } from "@mui/material";
+import { Link as $ } from "@tanstack/react-router";
+import { l as B } from "../../../../chunks/lodash.CA_K01A9.js";
+import { useState as E } from "react";
+import { FontNormalSxProps as L } from "../../../../_constants.js";
+function J(n) {
+  const e = T.c(24), [_, k] = E(null), [s, y] = E(!1);
+  let m;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (m = function(t) {
+    y(!0), k(t.currentTarget);
+  }, e[0] = m) : m = e[0];
+  const R = m;
+  let c;
+  e[1] === Symbol.for("react.memo_cache_sentinel") ? (c = function() {
+    y(!1), k(null);
+  }, e[1] = c) : c = e[1];
+  const A = c;
+  let p;
+  e[2] === Symbol.for("react.memo_cache_sentinel") ? (p = {
+    flexGrow: 0,
+    minWidth: "fit-content"
+  }, e[2] = p) : p = e[2];
+  let r;
+  e[3] !== n.username ? (r = n.username && /* @__PURE__ */ g(j, { component: "span", sx: B.merge({
+    marginRight: "16px"
+  }, L), children: n.username }), e[3] = n.username, e[4] = r) : r = e[4];
+  const S = s ? "usermenu" : void 0, v = s ? "true" : void 0;
+  let f, u;
+  e[5] === Symbol.for("react.memo_cache_sentinel") ? (f = (o) => R(o), u = () => A(), e[5] = f, e[6] = u) : (f = e[5], u = e[6]);
+  let d, x;
+  e[7] === Symbol.for("react.memo_cache_sentinel") ? (d = {
+    padding: 0,
+    ":hover": {
+      backgroundColor: "transparent"
+    }
+  }, x = /* @__PURE__ */ g(w, {}), e[7] = d, e[8] = x) : (d = e[7], x = e[8]);
+  let h;
+  e[9] === Symbol.for("react.memo_cache_sentinel") ? (h = {
+    backgroundColor: "var(--color-bg-light)",
+    padding: "4px 0",
+    borderRadius: "6px",
+    marginTop: "8px",
+    minWidth: "120px",
+    color: "var(--color-text)",
+    boxShadow: `
               rgb(255 255 255) 0 0 0 0,
               rgb(0 0 0 / 5%) 0 0 0 1px,
               rgb(0 0 0 / 10%) 0 10px 15px -3px,
               rgb(0 0 0 / 5%) 0 4px 6px -2px
             `
-              },
-              children: r.settings.map((o, x) => /* @__PURE__ */ e(
-                l,
-                {
-                  component: o.to ? k : v,
-                  disableRipple: !0,
-                  divider: o.divider ?? !1,
-                  onClick: (c) => {
-                    c.stopPropagation(), o.onClick && o.onClick(), a(!1);
-                  },
-                  sx: { ...s },
-                  to: o.to,
-                  children: o.label
-                },
-                x
-              ))
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
+  }, e[9] = h) : h = e[9];
+  let l;
+  if (e[10] !== n.settings) {
+    let o;
+    e[12] === Symbol.for("react.memo_cache_sentinel") ? (o = (t, O) => /* @__PURE__ */ g(C, { component: t.to ? $ : I, disableRipple: !0, divider: t.divider ?? !1, onClick: (P) => {
+      P.stopPropagation(), t.onClick && t.onClick(), y(!1);
+    }, sx: {
+      ...L
+    }, to: t.to, children: t.label }, O), e[12] = o) : o = e[12], l = n.settings.map(o), e[10] = n.settings, e[11] = l;
+  } else
+    l = e[11];
+  let a;
+  e[13] !== _ || e[14] !== s || e[15] !== l ? (a = /* @__PURE__ */ g(U, { anchorEl: _, id: "usermenu", open: s, placement: "bottom-end", sx: h, children: l }), e[13] = _, e[14] = s, e[15] = l, e[16] = a) : a = e[16];
+  let i;
+  e[17] !== a || e[18] !== S || e[19] !== v ? (i = /* @__PURE__ */ M(C, { "aria-controls": S, "aria-expanded": v, "aria-haspopup": "true", "aria-label": "User menu", onMouseEnter: f, onMouseLeave: u, sx: d, children: [
+    x,
+    a
+  ] }), e[17] = a, e[18] = S, e[19] = v, e[20] = i) : i = e[20];
+  let b;
+  return e[21] !== i || e[22] !== r ? (b = /* @__PURE__ */ M(W, { alignItems: "center", display: "flex", role: "menu", sx: p, children: [
+    r,
+    i
+  ] }), e[21] = i, e[22] = r, e[23] = b) : b = e[23], b;
+}
 export {
-  S as AoaUserMenu
+  J as AoaUserMenu
 };
 //# sourceMappingURL=UserMenu.js.map

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":";;;;;;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;"}
+{"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 { useState, type MouseEvent } 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 function AoaUserMenu(props: UserMenuProps) {\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","props","$","_c","anchorEl","setAnchorEl","useState","open","setOpen","t0","Symbol","for","event","currentTarget","handleMenuOpen","t1","handleMenuClose","t2","flexGrow","minWidth","t3","username","jsx","Typography","merge","marginRight","FontNormalSxProps","t4","undefined","t5","t6","t7","event_0","t8","t9","padding","backgroundColor","Avatar","t10","borderRadius","marginTop","color","boxShadow","t11","settings","t12","setting","index","MUIMenuItem","to","Link","MUILink","divider","event_1","stopPropagation","onClick","label","map","Popper","t13","jsxs","t14","Box"],"mappings":"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"}

package/dist/components/atoms/button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ButtonTypeMap, ButtonProps as MUIButtonProps } from '@mui/material';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 interface CommonProps {
     /**
      * Data-qa tag for E2E test purposes
@@ -22,6 +22,6 @@ export type AoaButtonProps = Omit<MUIButtonProps<ButtonTypeMap['defaultComponent
  * <AoaButton onClick={() => console.log()} type='primary'>button</AoaButton>
  * ```
  */
-export declare const AoaButton: import('react').MemoExoticComponent<({ type, startIcon, "data-qa": dataQa, children, buttonType, ...props }: AoaButtonProps) => ReactNode>;
+export declare function AoaButton({ type, startIcon, 'data-qa': dataQa, children, buttonType, ...props }: AoaButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/atoms/button/Button.d.ts.map

@@ -1 +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"}
+{"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,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,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,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CA8J/G"}

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

@@ -2,140 +2,127 @@ 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.CA_K01A9.js";
-import { memo as b } from "react";
-import { FontNormalSxProps as x } from "../../../_constants.js";
-const C = b(
-  ({ type: o, startIcon: t, "data-qa": i, children: c, buttonType: n, ...l }) => {
-    let e = "contained";
-    return o === "text" && (e = "text"), o === "secondary" && (e = "outlined"), /* @__PURE__ */ a(
-      v,
-      {
-        ...l,
-        "data-qa": i,
-        disableElevation: !0,
-        endIcon: o === "text" && /* @__PURE__ */ a(d, {}),
-        startIcon: o !== "text" && t,
-        sx: s.merge(
-          {
-            // Styles that apply to all button types and colors
-            appearance: "none",
-            border: "1px solid",
-            borderRadius: 0,
-            boxSizing: "border-box",
-            color: "var(--color-text-light)",
-            cursor: "pointer",
-            display: "inline-flex",
-            lineHeight: "var(--font-lineheight-text)",
-            minHeight: 20,
-            padding: "12px 16px",
-            position: "relative",
-            textDecoration: "none",
-            textShadow: "none",
-            textTransform: "none",
-            verticalAlign: "middle",
-            ":focus": {
-              outline: "2px dashed var(--color-text)",
-              outlineOffset: "3px",
-              boxShadow: "none"
-            },
-            // Styles that apply to contained (type === primary)
-            [`&.${r.contained}`]: {
-              [`&.${r.colorPrimary}`]: {
-                backgroundColor: "var(--color-primary)",
-                borderColor: "var(--color-primary)",
-                ":hover, :active, :focus": {
-                  backgroundColor: "var(--color-primary-hover)"
-                }
-              },
-              [`&.${r.colorError}`]: {
-                backgroundColor: "var(--color-error)",
-                borderColor: "var(--color-error)",
-                ":hover, :active, :focus": {
-                  backgroundColor: "var(--color-error-hover)"
-                }
-              },
-              [`&.${r.disabled}`]: {
-                backgroundColor: "var(--color-disabled)",
-                borderColor: "var(--color-disabled)",
-                color: "var(--color-text-disabled)"
-              },
-              ":hover, :active, :focus": {
-                color: "var(--color-text-light)"
-              }
-            },
-            // Styles that apply to outlined (type === secondary)
-            [`&.${r.outlined}`]: {
-              background: "none",
-              border: "1px solid var(--color-primary)",
-              boxSizing: "border-box",
-              [`&.${r.colorPrimary}`]: {
-                color: "var(--color-primary)",
-                borderColor: "var(--color-primary)",
-                ":hover, :active, :focus": {
-                  borderColor: "var(--color-primary-hover)",
-                  color: "var(--color-primary-hover)"
-                }
-              },
-              [`&.${r.colorError}`]: {
-                color: "var(--color-error)",
-                borderColor: "var(--color-error)",
-                ":hover, :active, :focus": {
-                  borderColor: "var(--color-error-hover)",
-                  color: "var(--color-error-hover)"
-                }
-              },
-              ":disabled": {
-                backgroundColor: "transparent",
-                borderColor: "var(--color-text-disabled)",
-                color: "var(--color-text-disabled)"
-              }
-            },
-            // Styles that apply to text (type === text)
-            [`&.${r.text}`]: {
-              background: "none",
-              borderColor: "transparent",
-              display: "inline-block",
-              textTransform: "uppercase",
-              fontWeight: "bold",
-              fontSize: "1.075rem",
-              verticalAlign: "middle",
-              [`&.${r.colorPrimary}`]: {
-                color: "var(--color-primary)",
-                ":hover": {
-                  backgroundColor: "var(--color-rijks-skyblue-light)"
-                }
-              },
-              [`&.${r.colorError}`]: {
-                color: "var(--color-error)",
-                ":hover": {
-                  backgroundColor: "var(--color-rijks-red-1-light)"
-                }
-              },
-              [`&.${r.endIcon}`]: {
-                width: "1rem",
-                height: "1rem",
-                verticalAlign: "text-top"
-              },
-              ":disabled": {
-                backgroundColor: "transparent",
-                color: "var(--color-text-disabled)",
-                [`&.${r.endIcon}`]: {
-                  fill: "var(--color-text-disabled)"
-                }
-              }
-            }
-          },
-          l.sx,
-          x
-        ),
-        type: n,
-        variant: e,
-        children: c
+import { FontNormalSxProps as b } from "../../../_constants.js";
+function g({
+  type: o,
+  startIcon: t,
+  "data-qa": i,
+  children: c,
+  buttonType: n,
+  ...l
+}) {
+  let e = "contained";
+  return o === "text" && (e = "text"), o === "secondary" && (e = "outlined"), /* @__PURE__ */ a(v, { ...l, "data-qa": i, disableElevation: !0, endIcon: o === "text" && /* @__PURE__ */ a(d, {}), startIcon: o !== "text" && t, sx: s.merge({
+    // Styles that apply to all button types and colors
+    appearance: "none",
+    border: "1px solid",
+    borderRadius: 0,
+    boxSizing: "border-box",
+    color: "var(--color-text-light)",
+    cursor: "pointer",
+    display: "inline-flex",
+    lineHeight: "var(--font-lineheight-text)",
+    minHeight: 20,
+    padding: "12px 16px",
+    position: "relative",
+    textDecoration: "none",
+    textShadow: "none",
+    textTransform: "none",
+    verticalAlign: "middle",
+    ":focus": {
+      outline: "2px dashed var(--color-text)",
+      outlineOffset: "3px",
+      boxShadow: "none"
+    },
+    // Styles that apply to contained (type === primary)
+    [`&.${r.contained}`]: {
+      [`&.${r.colorPrimary}`]: {
+        backgroundColor: "var(--color-primary)",
+        borderColor: "var(--color-primary)",
+        ":hover, :active, :focus": {
+          backgroundColor: "var(--color-primary-hover)"
+        }
+      },
+      [`&.${r.colorError}`]: {
+        backgroundColor: "var(--color-error)",
+        borderColor: "var(--color-error)",
+        ":hover, :active, :focus": {
+          backgroundColor: "var(--color-error-hover)"
+        }
+      },
+      [`&.${r.disabled}`]: {
+        backgroundColor: "var(--color-disabled)",
+        borderColor: "var(--color-disabled)",
+        color: "var(--color-text-disabled)"
+      },
+      ":hover, :active, :focus": {
+        color: "var(--color-text-light)"
       }
-    );
-  }
-);
+    },
+    // Styles that apply to outlined (type === secondary)
+    [`&.${r.outlined}`]: {
+      background: "none",
+      border: "1px solid var(--color-primary)",
+      boxSizing: "border-box",
+      [`&.${r.colorPrimary}`]: {
+        color: "var(--color-primary)",
+        borderColor: "var(--color-primary)",
+        ":hover, :active, :focus": {
+          borderColor: "var(--color-primary-hover)",
+          color: "var(--color-primary-hover)"
+        }
+      },
+      [`&.${r.colorError}`]: {
+        color: "var(--color-error)",
+        borderColor: "var(--color-error)",
+        ":hover, :active, :focus": {
+          borderColor: "var(--color-error-hover)",
+          color: "var(--color-error-hover)"
+        }
+      },
+      ":disabled": {
+        backgroundColor: "transparent",
+        borderColor: "var(--color-text-disabled)",
+        color: "var(--color-text-disabled)"
+      }
+    },
+    // Styles that apply to text (type === text)
+    [`&.${r.text}`]: {
+      background: "none",
+      borderColor: "transparent",
+      display: "inline-block",
+      textTransform: "uppercase",
+      fontWeight: "bold",
+      fontSize: "1.075rem",
+      verticalAlign: "middle",
+      [`&.${r.colorPrimary}`]: {
+        color: "var(--color-primary)",
+        ":hover": {
+          backgroundColor: "var(--color-rijks-skyblue-light)"
+        }
+      },
+      [`&.${r.colorError}`]: {
+        color: "var(--color-error)",
+        ":hover": {
+          backgroundColor: "var(--color-rijks-red-1-light)"
+        }
+      },
+      [`&.${r.endIcon}`]: {
+        width: "1rem",
+        height: "1rem",
+        verticalAlign: "text-top"
+      },
+      ":disabled": {
+        backgroundColor: "transparent",
+        color: "var(--color-text-disabled)",
+        [`&.${r.endIcon}`]: {
+          fill: "var(--color-text-disabled)"
+        }
+      }
+    }
+  }, l.sx, b), type: n, variant: e, children: c });
+}
 export {
-  C as AoaButton
+  g as AoaButton
 };
 //# sourceMappingURL=Button.js.map

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 type { ButtonHTMLAttributes } 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 function AoaButton({ type, startIcon, 'data-qa': dataQa, children, buttonType, ...props }: AoaButtonProps) {\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"],"names":["AoaButton","type","startIcon","dataQa","children","buttonType","props","variant","MUIButton","jsx","ChevronRight","merge","appearance","border","borderRadius","boxSizing","color","cursor","display","lineHeight","minHeight","padding","position","textDecoration","textShadow","textTransform","verticalAlign","outline","outlineOffset","boxShadow","buttonClasses","contained","colorPrimary","backgroundColor","borderColor","colorError","disabled","outlined","background","text","fontWeight","fontSize","endIcon","width","height","fill","sx","FontNormalSxProps"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { SxProps } from '@mui/material';
+import { JSX, Ref } from 'react';
 export interface AoaIconButtonProps {
     /**
      * Data-qa tag for E2E test purposes
@@ -24,6 +25,10 @@ export interface AoaIconButtonProps {
      * The action that should be triggered when clicking the button
      */
     onClick(this: void, ..._args: any[]): void;
+    /**
+     * The ref to the button element
+     */
+    readonly ref?: Ref<HTMLButtonElement> | undefined;
     /**
      * Material UI's property to apply styling
      */
@@ -38,5 +43,5 @@ export interface AoaIconButtonProps {
  * <AoaIconButton onClick={() => console.log()} label='Order a burger' icon={<Fastfood />} />
  * ```
  */
-export declare const AoaIconButton: import('react').ForwardRefExoticComponent<AoaIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare function AoaIconButton({ ref, ...props }: AoaIconButtonProps): import("react/jsx-runtime").JSX.Element;
 //# 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;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"}
+{"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,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGtC,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,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAsDlE"}