@australiangreens/ag-internal-components 0.0.81 → 0.0.83

package/dist/esm/index.js

@@ -20,7 +20,7 @@ var Oe = (e, t) => {
   return n;
 };
 var Ee = (e, t, n) => (ue(e, typeof t != "symbol" ? t + "" : t, n), n);
-var F = (e, t, n) => new Promise((i, r) => {
+var P = (e, t, n) => new Promise((i, r) => {
   var a = (l) => {
     try {
       d(n.next(l));
@@ -36,11 +36,11 @@ var F = (e, t, n) => new Promise((i, r) => {
   }, d = (l) => l.done ? i(l.value) : Promise.resolve(l.value).then(a, c);
   d((n = n.apply(e, t)).next());
 });
-import { jsxs as p, Fragment as L, jsx as o } from "react/jsx-runtime";
-import { useState as O, createContext as Xe, useCallback as ne, useContext as Qe, createElement as me, useEffect as oe, useRef as pe } from "react";
-import { Typography as B, Button as ie, Paper as Ye, Box as y, Drawer as xe, Dialog as Ke, DialogTitle as Je, DialogContent as Ze, DialogActions as je, Autocomplete as ve, TextField as we, CircularProgress as Ae, Chip as Lt, Tooltip as _t, Stack as Mt, styled as be, IconButton as Q, Container as et, useTheme as ae, useMediaQuery as Rt, Collapse as Ht, Avatar as Be, Fade as Wt, Skeleton as Fe, Toolbar as zt, Divider as Pe, CssBaseline as Ut, Snackbar as Gt, Alert as Vt, LinearProgress as qt, FormHelperText as Xt } from "@mui/material";
+import { jsxs as p, Fragment as _, jsx as o } from "react/jsx-runtime";
+import { useState as E, createContext as Xe, useCallback as ne, useContext as Qe, createElement as me, useEffect as oe, useRef as pe } from "react";
+import { Typography as F, Button as ie, Paper as Ye, Box as $, Drawer as xe, Dialog as Ke, DialogTitle as Je, DialogContent as Ze, DialogActions as je, Autocomplete as ve, TextField as we, CircularProgress as Ae, Chip as Lt, Tooltip as _t, Stack as Mt, styled as be, IconButton as Q, Container as et, useTheme as ae, useMediaQuery as Rt, Collapse as Ht, Avatar as Be, Fade as Wt, Skeleton as Fe, Toolbar as zt, Divider as Pe, CssBaseline as Ut, Snackbar as Gt, Alert as Vt, LinearProgress as qt, FormHelperText as Xt } from "@mui/material";
 import Qt from "@mui/material/CssBaseline";
-import { styled as H, createTheme as tt, alpha as he } from "@mui/material/styles";
+import { styled as W, createTheme as tt, alpha as he } from "@mui/material/styles";
 import { AgError as Yt } from "@australiangreens/ag-error";
 import { createHelper as K } from "souvlaki";
 import nt from "@mui/material/List";
@@ -51,13 +51,13 @@ import { useQuery as tn, QueryClient as nn, QueryClientProvider as on } from "@t
 import { useAuth0 as rt } from "@auth0/auth0-react";
 import { Buffer as rn } from "buffer";
 import an from "@mui/material/Skeleton";
-import { atom as _, useSetAtom as at, useAtomValue as Ne, useAtom as V, getDefaultStore as sn, Provider as st } from "jotai";
+import { atom as M, useSetAtom as at, useAtomValue as Ne, useAtom as V, getDefaultStore as sn, Provider as st } from "jotai";
 import { useHydrateAtoms as lt } from "jotai/utils";
 function Do({ text: e }) {
-  const [t, n] = O(0);
-  return /* @__PURE__ */ p(L, { children: [
-    /* @__PURE__ */ o(B, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
-    /* @__PURE__ */ o(B, { variant: "caption", display: "block", children: /* @__PURE__ */ o("span", { children: "Just ensuring MUI is working as planned as a peer dependency. v0.0.11" }) }),
+  const [t, n] = E(0);
+  return /* @__PURE__ */ p(_, { children: [
+    /* @__PURE__ */ o(F, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
+    /* @__PURE__ */ o(F, { variant: "caption", display: "block", children: /* @__PURE__ */ o("span", { children: "Just ensuring MUI is working as planned as a peer dependency. v0.0.11" }) }),
     /* @__PURE__ */ o(
       ie,
       {
@@ -85,7 +85,7 @@ const ct = 330, dt = 73, U = "Navbar", q = {
   userInfoHolder: `${U}-userInfoHolder`,
   settings: `${U}-settings`,
   pieChartIcon: `${U}-pieChartIcon`
-}, ln = H(y, {
+}, ln = W($, {
   name: "NavBar"
 })(({ theme: e }) => ({
   [`&.${q.root}`]: {
@@ -118,7 +118,7 @@ const ct = 330, dt = 73, U = "Navbar", q = {
   width: ct
 }, ut()), dn = () => s({
   width: dt
-}, ut()), un = H(xe, {
+}, ut()), un = W(xe, {
   shouldForwardProp: (e) => e !== "open"
 })(({ theme: e, open: t }) => s(s({
   width: t ? ct : dt,
@@ -139,7 +139,7 @@ const pt = Xe(null), pn = {}, hn = {}, gn = ({
   overrideActions: t = hn,
   children: n
 }) => {
-  const [{ open: i }, r] = O({ open: !0 }), a = ne((l) => {
+  const [{ open: i }, r] = E({ open: !0 }), a = ne((l) => {
     r({ open: l });
   }, []), c = ne(() => {
     r((l) => S(s({}, l), { open: !l.open }));
@@ -158,7 +158,7 @@ const pt = Xe(null), pn = {}, hn = {}, gn = ({
   open: !0
 }, e), yo = K(
   (e = mn(), t = {}) => ({ children: n }) => /* @__PURE__ */ o(gn, { overrideState: e, overrideActions: t, children: n })
-), Le = 7, $o = H(nt)(({ theme: e }) => ({
+), Le = 7, $o = W(nt)(({ theme: e }) => ({
   backgroundColor: "black",
   color: "white",
   "& .MuiListItem-root": {
@@ -196,7 +196,7 @@ const pt = Xe(null), pn = {}, hn = {}, gn = ({
     // '&.Mui-selected.Mui-focusVisible:hover': {
     // },
   }
-})), _e = 7, Io = H(nt)(({ theme: e }) => ({
+})), _e = 7, Io = W(nt)(({ theme: e }) => ({
   backgroundColor: "#e8e8e8",
   color: "inherit",
   "& .MuiListItem-root": {
@@ -267,13 +267,13 @@ const ht = ({
   disableCloseOnBackdropOrEscape: u = !1
 }) => {
   var w, g;
-  const [C, v] = O(!1);
+  const [m, x] = E(!1);
   return /* @__PURE__ */ p(
     Ke,
     {
       open: e,
-      onClose: (b, k) => F(void 0, null, function* () {
-        u && (k === "backdropClick" || k === "escapeKeyDown") || C || (a != null && a.onClick ? yield a.onClick() : c());
+      onClose: (k, b) => P(void 0, null, function* () {
+        u && (b === "backdropClick" || b === "escapeKeyDown") || m || (a != null && a.onClick ? yield a.onClick() : c());
       }),
       fullWidth: !0,
       maxWidth: i != null ? i : "xs",
@@ -288,7 +288,7 @@ const ht = ({
             {
               onClick: (w = a == null ? void 0 : a.onClick) != null ? w : c,
               "data-testid": a == null ? void 0 : a.testId,
-              disabled: (a == null ? void 0 : a.disabled) || C,
+              disabled: (a == null ? void 0 : a.disabled) || m,
               color: a == null ? void 0 : a.buttonColor,
               children: (g = a == null ? void 0 : a.text) != null ? g : "Cancel"
             }
@@ -296,12 +296,12 @@ const ht = ({
           r && /* @__PURE__ */ o(
             ie,
             {
-              onClick: () => F(void 0, null, function* () {
-                var b;
-                v(!0), yield (b = r.onClick) == null ? void 0 : b.call(r), v(!1);
+              onClick: () => P(void 0, null, function* () {
+                var k;
+                x(!0), yield (k = r.onClick) == null ? void 0 : k.call(r), x(!1);
               }),
               "data-testid": r.testId,
-              disabled: r.disabled || C,
+              disabled: r.disabled || m,
               color: r == null ? void 0 : r.buttonColor,
               children: r.text
             }
@@ -323,7 +323,7 @@ const ht = ({
   queryKey: ["autocomplete", i, r]
 });
 function Oo({
-  lookup: e = () => F(this, null, function* () {
+  lookup: e = () => P(this, null, function* () {
   }),
   enableHighlighting: t = !0,
   onChange: n,
@@ -334,44 +334,44 @@ function Oo({
   sx: d,
   textFieldColor: l,
   textFieldVariant: u = "filled",
-  loadingText: C = "Loading...",
-  noOptionsText: v = "No options",
+  loadingText: m = "Loading...",
+  noOptionsText: x = "No options",
   popupIcon: w = /* @__PURE__ */ o(Jt, {}),
   error: g = !1,
-  helperText: b = "",
-  preLoadedOptions: k = void 0,
-  disablePortal: $ = !1
+  helperText: k = "",
+  preLoadedOptions: b = void 0,
+  disablePortal: I = !1
 }) {
-  const [f, D] = O(""), W = (h, m) => {
-    const E = a.filter((N) => N.id !== m);
-    n(E, "delete", h);
-  }, { data: P, isLoading: M } = gt({
-    inputValue: f,
+  const [D, A] = E(""), y = (h, f) => {
+    const B = a.filter((L) => L.id !== f);
+    n(B, "delete", h);
+  }, { data: N, isLoading: R } = gt({
+    inputValue: D,
     label: r,
     lookup: e,
     minLength: i,
-    preLoadedOptions: k
-  }), I = f.length >= i;
+    preLoadedOptions: b
+  }), T = D.length >= i;
   return /* @__PURE__ */ p("div", { "data-testid": c, children: [
     /* @__PURE__ */ o(
       ve,
       {
         sx: d,
         "data-testid": c ? `${c}:Autocomplete` : void 0,
-        disablePortal: $,
+        disablePortal: I,
         multiple: !0,
         getOptionLabel: (h) => typeof h == "string" ? h : h.label,
-        loading: I ? M : !1,
-        options: [...a, ...P != null ? P : []],
+        loading: T ? R : !1,
+        options: [...a, ...N != null ? N : []],
         filterSelectedOptions: !0,
         includeInputInList: !0,
         value: a,
-        onChange: (h, m, E) => {
-          n(m, E, h);
+        onChange: (h, f, B) => {
+          n(f, B, h);
         },
-        onInputChange: (h, m) => D(m),
-        noOptionsText: I ? v : "Start typing to search",
-        loadingText: C,
+        onInputChange: (h, f) => A(f),
+        noOptionsText: T ? x : "Start typing to search",
+        loadingText: m,
         popupIcon: w,
         renderInput: (h) => /* @__PURE__ */ o(
           we,
@@ -380,58 +380,58 @@ function Oo({
             fullWidth: !0,
             variant: u,
             error: g,
-            helperText: b,
+            helperText: k,
             InputProps: S(s({}, h.InputProps), {
-              endAdornment: /* @__PURE__ */ p(L, { children: [
-                M ? /* @__PURE__ */ o(Ae, { color: "inherit", size: 20 }) : null,
+              endAdornment: /* @__PURE__ */ p(_, { children: [
+                R ? /* @__PURE__ */ o(Ae, { color: "inherit", size: 20 }) : null,
                 h.InputProps.endAdornment
               ] })
             }),
             "data-testid": c ? `${c}:Autocomplete:TextField` : void 0,
-            onKeyDown: (m) => {
-              (m.key === "Backspace" || m.key === "Delete") && m.stopPropagation();
+            onKeyDown: (f) => {
+              (f.key === "Backspace" || f.key === "Delete") && f.stopPropagation();
             },
             color: l
           })
         ),
         renderTags: () => null,
-        isOptionEqualToValue: (h, m) => h.id === m.id,
-        renderOption: (h, m, E) => {
+        isOptionEqualToValue: (h, f) => h.id === f.id,
+        renderOption: (h, f, B) => {
           if (t) {
-            const N = jt(m.label, E.inputValue, {
+            const L = jt(f.label, B.inputValue, {
               insideWords: !0,
               findAllOccurrences: !0
-            }), A = en(m.label, N);
+            }), v = en(f.label, L);
             return /* @__PURE__ */ me(
               "li",
               S(s({}, h), {
-                key: m.id,
-                "data-testid": c ? `${c}:Autocomplete:option(${m.id.toString()})` : void 0
+                key: f.id,
+                "data-testid": c ? `${c}:Autocomplete:option(${f.id.toString()})` : void 0
               }),
-              /* @__PURE__ */ o("div", { children: A.map((x, R) => /* @__PURE__ */ o(
+              /* @__PURE__ */ o("div", { children: v.map((C, H) => /* @__PURE__ */ o(
                 "span",
                 {
                   style: {
-                    fontWeight: x.highlight ? 700 : 400
+                    fontWeight: C.highlight ? 700 : 400
                   },
-                  children: x.text
+                  children: C.text
                 },
-                R
+                H
               )) })
             );
           } else
             return /* @__PURE__ */ me(
               "li",
               S(s({}, h), {
-                key: m.id,
-                "data-testid": c ? `${c}:option(${m.id.toString()})` : void 0
+                key: f.id,
+                "data-testid": c ? `${c}:option(${f.id.toString()})` : void 0
               }),
-              m.label
+              f.label
             );
         }
       }
     ),
-    a.length > 0 && /* @__PURE__ */ o(y, { children: a.map((h) => /* @__PURE__ */ o(
+    a.length > 0 && /* @__PURE__ */ o($, { children: a.map((h) => /* @__PURE__ */ o(
       Lt,
       {
         sx: {
@@ -454,11 +454,11 @@ function Oo({
                 }
               ]
             },
-            children: /* @__PURE__ */ o(B, { style: { whiteSpace: "normal" }, children: h.chipLabel ? h.chipLabel : h.label })
+            children: /* @__PURE__ */ o(F, { style: { whiteSpace: "normal" }, children: h.chipLabel ? h.chipLabel : h.label })
           }
         ),
         "data-testid": c ? `${c}:Chip(${h.id.toString()})` : void 0,
-        onDelete: (m) => W(m, h.id),
+        onDelete: (f) => y(f, h.id),
         deleteIcon: /* @__PURE__ */ o(
           Kt,
           {
@@ -471,7 +471,7 @@ function Oo({
   ] });
 }
 const Eo = ({
-  lookup: e = () => F(void 0, null, function* () {
+  lookup: e = () => P(void 0, null, function* () {
   }),
   onChange: t,
   label: n,
@@ -482,52 +482,54 @@ const Eo = ({
   "data-testid": d,
   noOptionsText: l = "No options",
   minLength: u = 3,
-  disablePortal: C = !1,
-  preLoadedOptions: v
+  disablePortal: m = !1,
+  preLoadedOptions: x,
+  helperText: w = ""
 }) => {
-  const [w, g] = O(""), { data: b, isLoading: k } = gt({
-    inputValue: w,
+  const [g, k] = E(""), { data: b, isLoading: I } = gt({
+    inputValue: g,
     label: n,
     lookup: e,
     minLength: u != null ? u : 0,
-    preLoadedOptions: v
-  }), $ = w.length >= u;
+    preLoadedOptions: x
+  }), D = g.length >= u;
   return /* @__PURE__ */ o("div", { "data-testid": d, children: /* @__PURE__ */ o(Mt, { direction: "row", spacing: 1, children: /* @__PURE__ */ o(
     ve,
     {
       sx: r,
       "data-testid": d ? `${d}:Autocomplete` : void 0,
-      loading: $ ? k : !1,
+      loading: D ? I : !1,
       options: b != null ? b : [],
-      onChange: (f, D) => {
-        t(f, D);
+      onChange: (A, y) => {
+        t(A, y);
       },
-      disablePortal: C,
-      filterOptions: (f) => f,
+      disablePortal: m,
+      filterOptions: (A) => A,
       value: i,
-      noOptionsText: $ ? l : "Start typing to search",
-      getOptionLabel: (f) => f.label,
-      renderInput: (f) => /* @__PURE__ */ o(
+      noOptionsText: D ? l : "Start typing to search",
+      getOptionLabel: (A) => A.label,
+      renderInput: (A) => /* @__PURE__ */ o(
         we,
         S(s({
           "data-testid": d ? `${d}:Autocomplete:TextField` : void 0
-        }, f), {
+        }, A), {
           variant: c,
           label: n,
-          color: a
+          color: a,
+          helperText: w
         })
       ),
-      isOptionEqualToValue: (f, D) => f.id === D.id,
-      onInputChange: (f, D) => {
-        g(D);
+      isOptionEqualToValue: (A, y) => A.id === y.id,
+      onInputChange: (A, y) => {
+        k(y);
       },
-      renderOption: (f, D) => /* @__PURE__ */ me(
+      renderOption: (A, y) => /* @__PURE__ */ me(
         "li",
-        S(s({}, f), {
-          key: D.id,
-          "data-testid": d ? `${d}:Autocomplete:option(${D.id.toString()})` : void 0
+        S(s({}, A), {
+          key: y.id,
+          "data-testid": d ? `${d}:Autocomplete:option(${y.id.toString()})` : void 0
         }),
-        D.label
+        y.label
       )
     }
   ) }) });
@@ -549,13 +551,13 @@ const Eo = ({
   closeHandler: t,
   setAuth0ExpiryTime: n
 }) => {
-  const { logout: i, getAccessTokenSilently: r } = rt(), [a, c] = O(0), d = () => F(void 0, null, function* () {
+  const { logout: i, getAccessTokenSilently: r } = rt(), [a, c] = E(0), d = () => P(void 0, null, function* () {
     i({ logoutParams: { returnTo: `${window.location.origin}` } });
-  }), l = () => F(void 0, null, function* () {
+  }), l = () => P(void 0, null, function* () {
     c(a + 1), t();
   });
   return oe(() => {
-    (() => F(void 0, null, function* () {
+    (() => P(void 0, null, function* () {
       if (a > 0) {
         const w = yield r({ cacheMode: "off" }), g = Cn(w) * 1e3;
         n(g);
@@ -620,13 +622,13 @@ function Fo({
     let d = "Auth error", l = "An unknown Auth0 error occurred.";
     return wn(r) ? (d = "Unauthorised", l = `You are not authorised to access ${t}.`) : An(r) ? (d = "App not authorised", l = `You have not authorised ${t} to access your user profile. This is necessary to use ${t}.`) : vn(r) && (d = "Unauthorised", l = "Authorisation with auth0 failed for an unknown reason."), /* @__PURE__ */ p(Ke, { open: !0, children: [
       /* @__PURE__ */ o(Je, { children: d }),
-      /* @__PURE__ */ o(Ze, { children: /* @__PURE__ */ o(B, { children: l }) }),
+      /* @__PURE__ */ o(Ze, { children: /* @__PURE__ */ o(F, { children: l }) }),
       /* @__PURE__ */ o(je, { children: /* @__PURE__ */ o(ie, { onClick: () => c({ logoutParams: { returnTo: window.location.origin } }), children: "Logout" }) })
     ] });
   }
-  return n ? /* @__PURE__ */ o(L, { children: e }) : /* @__PURE__ */ o(an, { variant: "rectangular", animation: "pulse", height: "100vh", width: "100vw" });
+  return n ? /* @__PURE__ */ o(_, { children: e }) : /* @__PURE__ */ o(an, { variant: "rectangular", animation: "pulse", height: "100vh", width: "100vw" });
 }
-const bn = 24, Sn = 64, G = "TopBar", T = {
+const bn = 24, Sn = 64, G = "TopBar", O = {
   topStripe: `${G}-topStripe`,
   titleBar: `${G}-titleBar`,
   titleSlider: `${G}-titleSlider`,
@@ -640,18 +642,18 @@ const bn = 24, Sn = 64, G = "TopBar", T = {
   var i, r;
   return {
     width: "100%",
-    [`& .${T.topStripe}`]: {
+    [`& .${O.topStripe}`]: {
       width: "100%",
       height: `${bn}px`,
       backgroundColor: e.palette.primary.main
     },
-    [`& .${T.titleBar}`]: {
+    [`& .${O.titleBar}`]: {
       backgroundColor: e.palette.primary.light,
       height: `${Sn}px`,
       padding: e.spacing(0, 3),
       width: "100%"
     },
-    [`& .${T.titleSlider}`]: s(s({
+    [`& .${O.titleSlider}`]: s(s({
       height: "100%",
       display: "flex",
       alignItems: "center",
@@ -660,14 +662,14 @@ const bn = 24, Sn = 64, G = "TopBar", T = {
         easing: e.transitions.easing.sharp,
         duration: e.transitions.duration.leavingScreen
       }),
-      [`& .${T.leftPanelButton}`]: {
+      [`& .${O.leftPanelButton}`]: {
         marginRight: e.spacing(2),
         flexGrow: 0
       },
-      [`& .${T.titleText}`]: {
+      [`& .${O.titleText}`]: {
         flexGrow: 1
       },
-      [`& .${T.rightPanelButton}`]: {
+      [`& .${O.rightPanelButton}`]: {
         flexGrow: 0
       }
     }, (t == null ? void 0 : t.open) && {
@@ -692,12 +694,12 @@ function Dn({
   "data-testid": i
 }) {
   return /* @__PURE__ */ p(kn, { leftPanel: t, rightPanel: n, "data-testid": i, children: [
-    /* @__PURE__ */ o("div", { className: T.topStripe }),
-    /* @__PURE__ */ o("div", { className: T.titleBar, children: /* @__PURE__ */ p(y, { className: T.titleSlider, children: [
+    /* @__PURE__ */ o("div", { className: O.topStripe }),
+    /* @__PURE__ */ o("div", { className: O.titleBar, children: /* @__PURE__ */ p($, { className: O.titleSlider, children: [
       t !== void 0 && !t.open && t.showOpenArrow && /* @__PURE__ */ p(
         Q,
         {
-          className: T.leftPanelButton,
+          className: O.leftPanelButton,
           color: "inherit",
           "aria-label": "Open left side panel",
           onClick: t == null ? void 0 : t.onOpen,
@@ -709,11 +711,11 @@ function Dn({
           ]
         }
       ),
-      /* @__PURE__ */ o(B, { className: T.titleText, variant: "h6", noWrap: !0, children: e }),
+      /* @__PURE__ */ o(F, { className: O.titleText, variant: "h6", noWrap: !0, children: e }),
       n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ p(
         Q,
         {
-          className: T.rightPanelButton,
+          className: O.rightPanelButton,
           color: "inherit",
           "aria-label": "Open right side panel",
           onClick: n == null ? void 0 : n.onOpen,
@@ -758,7 +760,7 @@ const ft = 400, yn = be(xe, {
       marginLeft: `${r}px`
     }))
   })
-), $n = be(y, {
+), $n = be($, {
   shouldForwardProp: (e) => !["anchor"].includes(e)
 })(({ theme: e, anchor: t }) => S(s({
   display: "flex",
@@ -790,48 +792,48 @@ function Me({
   debugOpacity: d = !1,
   headerBoxProps: l = {},
   onOpened: u,
-  onClosed: C,
-  "data-testid": v,
+  onClosed: m,
+  "data-testid": x,
   navBarOpen: w = !1,
   navBarWidthOpen: g = 0,
-  navBarWidthClosed: b = 0
+  navBarWidthClosed: k = 0
 }) {
   return /* @__PURE__ */ p(
     yn,
     {
       SlideProps: {
         onEntered: () => u == null ? void 0 : u(),
-        onExited: () => C == null ? void 0 : C()
+        onExited: () => m == null ? void 0 : m()
       },
       variant: "persistent",
       anchor: t,
       open: n,
       width: a,
       debugOpacity: d,
-      "data-testid": v,
+      "data-testid": x,
       navBarOpen: w,
       navBarWidthOpen: g,
-      navBarWidthClosed: b,
+      navBarWidthClosed: k,
       children: [
-        /* @__PURE__ */ o($n, S(s({ anchor: t }, l), { children: t === "left" ? /* @__PURE__ */ p(L, { children: [
-          /* @__PURE__ */ o(B, { variant: "h6", color: "inherit", component: "div", children: r }),
+        /* @__PURE__ */ o($n, S(s({ anchor: t }, l), { children: t === "left" ? /* @__PURE__ */ p(_, { children: [
+          /* @__PURE__ */ o(F, { variant: "h6", color: "inherit", component: "div", children: r }),
           c && /* @__PURE__ */ p(Q, { onClick: i, size: "large", "aria-label": "Close left side panel", children: [
             /* @__PURE__ */ o(it, { "data-testid": "arrowbackicon" }),
             " "
           ] })
-        ] }) : /* @__PURE__ */ p(L, { children: [
+        ] }) : /* @__PURE__ */ p(_, { children: [
           c && /* @__PURE__ */ p(Q, { onClick: i, size: "large", "aria-label": "Close right side panel", children: [
             /* @__PURE__ */ o(ot, {}),
             " "
           ] }),
-          /* @__PURE__ */ o(B, { variant: "h6", color: "inherit", component: "div", children: r })
+          /* @__PURE__ */ o(F, { variant: "h6", color: "inherit", component: "div", children: r })
         ] }) })),
         e
       ]
     }
   );
 }
-const In = H(y, {
+const In = W($, {
   shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
   name: "PanelAwareMargins"
 })(({ theme: e, leftPanel: t, rightPanel: n }) => {
@@ -854,7 +856,7 @@ const In = H(y, {
     }),
     marginRight: `${(r = n == null ? void 0 : n.width) != null ? r : 0}px`
   });
-}), Tn = H(et, {
+}), Tn = W(et, {
   name: "PageContainer"
 })(({ theme: e }) => ({
   // Horizontal padding comes from the Container's gutter
@@ -869,7 +871,7 @@ const In = H(y, {
   startOpen: !1,
   open: void 0,
   onChangeOpen: void 0,
-  content: /* @__PURE__ */ o(L, {}),
+  content: /* @__PURE__ */ o(_, {}),
   onOpened: void 0,
   onClosed: void 0,
   dataTestId: void 0
@@ -885,18 +887,18 @@ function Po({
   pageContentDataTestId: d,
   topBarDataTestId: l,
   navBarOpen: u,
-  navBarWidthOpen: C,
-  navBarWidthClosed: v
+  navBarWidthOpen: m,
+  navBarWidthClosed: x
 }) {
-  const [w, g] = O(ge), [b, k] = O(fe), [$, f] = O(ge), [D, W] = O(fe), P = n !== void 0, M = i !== void 0, {
-    titleText: I,
+  const [w, g] = E(ge), [k, b] = E(fe), [I, D] = E(ge), [A, y] = E(fe), N = n !== void 0, R = i !== void 0, {
+    titleText: T,
     content: h,
-    flavour: m,
-    open: E,
-    onChangeOpen: N,
-    width: A,
-    arrowButtons: x,
-    startOpen: R,
+    flavour: f,
+    open: B,
+    onChangeOpen: L,
+    width: v,
+    arrowButtons: C,
+    startOpen: H,
     onOpened: Dt,
     onClosed: yt,
     dataTestId: $t
@@ -914,36 +916,36 @@ function Po({
     dataTestId: Bt
   } = i ? s(s({}, ee), i) : s({}, ee);
   oe(() => {
-    R !== ge && (g(R), f(R));
-  }, [R]), oe(() => {
-    Z !== fe && (k(Z), W(Z));
+    H !== ge && (g(H), D(H));
+  }, [H]), oe(() => {
+    Z !== fe && (b(Z), y(Z));
   }, [Z]);
-  const ce = E === void 0 ? w : E, de = se === void 0 ? b : se, ye = (z) => {
-    E === void 0 && (g(z), r && M && (z ? (k(!1), W(b)) : k(D))), N && N(z);
+  const ce = B === void 0 ? w : B, de = se === void 0 ? k : se, ye = (z) => {
+    B === void 0 && (g(z), r && R && (z ? (b(!1), y(k)) : b(A))), L && L(z);
   }, $e = (z) => {
-    se === void 0 && (k(z), r && P && (z ? (g(!1), f(w)) : g($))), De && De(z);
+    se === void 0 && (b(z), r && N && (z ? (g(!1), D(w)) : g(I))), De && De(z);
   };
-  return /* @__PURE__ */ p(y, { children: [
-    P && /* @__PURE__ */ o(
+  return /* @__PURE__ */ p($, { children: [
+    N && /* @__PURE__ */ o(
       Me,
       {
         "data-testid": $t,
         anchor: "left",
         open: ce,
         onClose: () => ye(!1),
-        width: A,
-        titleText: I,
+        width: v,
+        titleText: T,
         debugOpacity: a,
-        showCloseArrow: x === "both" || x === "close",
+        showCloseArrow: C === "both" || C === "close",
         onOpened: Dt,
         onClosed: yt,
         navBarOpen: u,
-        navBarWidthOpen: C,
-        navBarWidthClosed: v,
+        navBarWidthOpen: m,
+        navBarWidthClosed: x,
         children: h
       }
     ),
-    M && /* @__PURE__ */ o(
+    R && /* @__PURE__ */ o(
       Me,
       {
         "data-testid": Bt,
@@ -957,8 +959,8 @@ function Po({
         onOpened: Ot,
         onClosed: Et,
         navBarOpen: u,
-        navBarWidthOpen: C,
-        navBarWidthClosed: v,
+        navBarWidthOpen: m,
+        navBarWidthClosed: x,
         children: Tt
       }
     ),
@@ -967,14 +969,14 @@ function Po({
       s(s({
         titleText: t,
         "data-testid": l
-      }, P && m === "push" ? {
+      }, N && f === "push" ? {
         leftPanel: {
           open: ce,
-          width: A,
+          width: v,
           onOpen: () => ye(!0),
-          showOpenArrow: x === "both" || x === "open"
+          showOpenArrow: C === "both" || C === "open"
         }
-      } : {}), M && ke === "push" ? {
+      } : {}), R && ke === "push" ? {
         rightPanel: {
           open: de,
           width: le,
@@ -985,10 +987,10 @@ function Po({
     ),
     /* @__PURE__ */ o(
       In,
-      S(s(s({}, m === "push" ? {
+      S(s(s({}, f === "push" ? {
         leftPanel: {
           open: ce,
-          width: A
+          width: v
         }
       } : {}), ke === "push" ? {
         rightPanel: {
@@ -1004,7 +1006,7 @@ function Po({
 const mt = () => {
   const e = ae();
   return Rt(e.breakpoints.down("sm"));
-}, On = 64, En = 64, Bn = 256, Y = _(!0), Ct = _(Bn), xt = _(En), Ce = _(""), Fn = _(void 0), vt = _(On), wt = _(void 0);
+}, On = 64, En = 72, Bn = 256, Y = M(!0), Ct = M(Bn), xt = M(En), Ce = M(""), Fn = M(void 0), vt = M(On), wt = M(void 0);
 function Pn({ links: e }) {
   return /* @__PURE__ */ o("div", { children: "LinksMenu not implemented yet" });
 }
@@ -1016,7 +1018,7 @@ const te = "Navbar", X = {
   // userInfoHolder: `${PREFIX}-userInfoHolder`,
   // settings: `${PREFIX}-settings`,
   // pieChartIcon: `${PREFIX}-pieChartIcon`,
-}, Nn = H(y, { name: "NavBar" })(({ theme: e }) => ({
+}, Nn = W($, { name: "NavBar" })(({ theme: e }) => ({
   [`&.${X.root}`]: {
     display: "flex"
   },
@@ -1064,7 +1066,7 @@ const te = "Navbar", X = {
 }, At(e)), He = (e, t) => s({
   width: t,
   transition: re(e, "width", "leaving")
-}, At(e)), _n = H(xe, {
+}, At(e)), _n = W(xe, {
   shouldForwardProp: (e) => !["widthOpen", "widthClosed", "isSmallScreen"].includes(e)
 })(({ theme: e, open: t, widthOpen: n, widthClosed: i, isSmallScreen: r }) => s(s({
   flexShrink: 0,
@@ -1091,7 +1093,7 @@ const We = ["#A62A21", "#7e3794", "#0B51C1", "#3A6024", "#A81563", "#B3003C"], R
 function Hn({ user: e, domainCode: t, open: n }) {
   const i = ae();
   return /* @__PURE__ */ p(
-    y,
+    $,
     {
       sx: {
         paddingTop: 3,
@@ -1102,7 +1104,7 @@ function Hn({ user: e, domainCode: t, open: n }) {
       },
       children: [
         /* @__PURE__ */ o(
-          y,
+          $,
           {
             sx: {
               width: n ? "5rem" : "2rem",
@@ -1123,9 +1125,9 @@ function Hn({ user: e, domainCode: t, open: n }) {
             ) : /* @__PURE__ */ o(Be, { sx: { width: "100%", height: "100%" } })
           }
         ),
-        /* @__PURE__ */ o(Ln, { sx: { width: "100%" }, in: n, children: /* @__PURE__ */ o(Wt, { in: n, children: /* @__PURE__ */ p(y, { width: "100%", display: "flex", flexDirection: "column", alignItems: "center", children: [
-          e != null && e.name ? /* @__PURE__ */ o(B, { children: e.name }) : /* @__PURE__ */ o(Fe, { animation: !1, width: "50%" }),
-          t ? /* @__PURE__ */ o(B, { children: t.toUpperCase() }) : /* @__PURE__ */ o(Fe, { animation: !1, width: "25%" })
+        /* @__PURE__ */ o(Ln, { sx: { width: "100%" }, in: n, children: /* @__PURE__ */ o(Wt, { in: n, children: /* @__PURE__ */ p($, { width: "100%", display: "flex", flexDirection: "column", alignItems: "center", children: [
+          e != null && e.name ? /* @__PURE__ */ o(F, { children: e.name }) : /* @__PURE__ */ o(Fe, { animation: !1, width: "50%" }),
+          t ? /* @__PURE__ */ o(F, { children: t.toUpperCase() }) : /* @__PURE__ */ o(Fe, { animation: !1, width: "25%" })
         ] }) }) })
       ]
     }
@@ -1142,7 +1144,7 @@ function Wn({
   user: d,
   domainCode: l
 }) {
-  const u = mt(), C = at(Y);
+  const u = mt(), m = at(Y);
   return /* @__PURE__ */ o(Nn, { className: X.root, "data-testid": i, children: /* @__PURE__ */ p(
     _n,
     {
@@ -1155,20 +1157,20 @@ function Wn({
         component: "nav"
       },
       onClose: () => {
-        C(!1);
+        m(!1);
       },
       isSmallScreen: u,
       children: [
         !u && /* @__PURE__ */ o(zt, {}),
-        r && /* @__PURE__ */ p(y, { flexGrow: "0", children: [
+        r && /* @__PURE__ */ p($, { flexGrow: "0", children: [
           r,
-          /* @__PURE__ */ o(Pe, { variant: "middle" })
+          /* @__PURE__ */ o(Pe, { variant: "middle", sx: { marginY: "0.5rem" } })
         ] }),
-        /* @__PURE__ */ o(y, { flexGrow: "1", children: Array.isArray(a) ? /* @__PURE__ */ o(Pn, { links: a }) : a }),
-        /* @__PURE__ */ p(y, { flexGrow: "0", children: [
-          /* @__PURE__ */ o(Pe, { variant: "middle" }),
+        /* @__PURE__ */ o($, { flexGrow: "1", children: Array.isArray(a) ? /* @__PURE__ */ o(Pn, { links: a }) : a }),
+        /* @__PURE__ */ p($, { flexGrow: "0", children: [
+          /* @__PURE__ */ o(Pe, { variant: "middle", sx: { marginY: "0.5rem" } }),
           /* @__PURE__ */ o(Hn, { user: d, domainCode: l, open: e }),
-          c && /* @__PURE__ */ o(L, { children: c })
+          c && /* @__PURE__ */ o(_, { children: c })
         ] })
       ]
     }
@@ -1180,7 +1182,7 @@ function zn({
   maxWidth: n = !1
 }) {
   return /* @__PURE__ */ o(
-    y,
+    $,
     {
       sx: {
         overflow: "auto",
@@ -1230,8 +1232,17 @@ function Vn({
         zIndex: d ? 0 : c.zIndex.drawer + 1
       },
       children: [
-        /* @__PURE__ */ o(Q, { size: "medium", color: "inherit", sx: { padding: 1.5 }, onClick: a, children: /* @__PURE__ */ o(Zt, { fontSize: "medium" }) }),
-        /* @__PURE__ */ o(B, { className: Gn.titleText, variant: "h6", children: e }),
+        /* @__PURE__ */ o(
+          Q,
+          {
+            size: "medium",
+            color: "inherit",
+            sx: { padding: 1.5, marginLeft: "12px" },
+            onClick: a,
+            children: /* @__PURE__ */ o(Zt, { fontSize: "medium" })
+          }
+        ),
+        /* @__PURE__ */ o(F, { className: Gn.titleText, variant: "h6", children: e }),
         i
       ]
     }
@@ -1248,37 +1259,37 @@ function No({
   navBarMiddle: d,
   navBarBottom: l,
   user: u,
-  domainCode: C
+  domainCode: m
 }) {
   lt([
     [Y, n != null ? n : !0],
     [Ce, t != null ? t : ""]
   ]);
-  const v = Ne(Y), [w] = V(Ct), [g] = V(xt), b = Ne(Ce), [k] = V(vt), [$] = V(Fn), [f] = V(wt);
-  return /* @__PURE__ */ p(y, { children: [
+  const x = Ne(Y), [w] = V(Ct), [g] = V(xt), k = Ne(Ce), [b] = V(vt), [I] = V(Fn), [D] = V(wt);
+  return /* @__PURE__ */ p($, { children: [
     /* @__PURE__ */ o(Ut, {}),
     /* @__PURE__ */ o(
       Vn,
       {
-        titleText: b,
+        titleText: k,
         "data-testid": a,
-        height: k,
-        middle: $
+        height: b,
+        middle: I
       }
     ),
-    /* @__PURE__ */ p(y, { sx: { display: "flex" }, children: [
+    /* @__PURE__ */ p($, { sx: { display: "flex" }, children: [
       /* @__PURE__ */ o(
         Wn,
         {
-          open: v,
-          top: f,
+          open: x,
+          top: D,
           middle: d,
           bottom: l,
           user: u,
-          domainCode: C,
+          domainCode: m,
           widthOpen: w,
           widthClosed: g,
-          offsetTop: k,
+          offsetTop: b,
           "data-testid": c
         }
       ),
@@ -1286,7 +1297,7 @@ function No({
         zn,
         S(s({
           "data-testid": r,
-          topBarHeight: k
+          topBarHeight: b
         }, i), {
           children: e
         })
@@ -1327,63 +1338,63 @@ function jn(a) {
     "shouldClose",
     "children"
   ]);
-  var N;
-  const [{ open: d }, l] = O({ open: !1 }), u = pe([]), C = pe(Date.now()), v = pe(0), w = ne((A) => {
-    l({ open: A });
-  }, []), g = ne((A = {}) => {
-    v.current += 1, u.current.length >= Ue && Date.now() - C.current >= Ge && (C.current = Date.now(), console.error(
-      `SaladBarProvider: MAX_QUEUE_LENGTH (${Ue}) hit ${v.current} times in last ${Ge}ms)`
-    ), v.current = 0);
-    const x = s(S(s({}, ze), {
+  var L;
+  const [{ open: d }, l] = E({ open: !1 }), u = pe([]), m = pe(Date.now()), x = pe(0), w = ne((v) => {
+    l({ open: v });
+  }, []), g = ne((v = {}) => {
+    x.current += 1, u.current.length >= Ue && Date.now() - m.current >= Ge && (m.current = Date.now(), console.error(
+      `SaladBarProvider: MAX_QUEUE_LENGTH (${Ue}) hit ${x.current} times in last ${Ge}ms)`
+    ), x.current = 0);
+    const C = s(S(s({}, ze), {
       key: Yn()
-    }), A);
-    return u.current.push(x), u.current.length === 1 && l({ open: !0 }), x.key;
-  }, []), b = (A = "", x = {}) => g(s({ message: A, severity: "success" }, x)), k = (A = "", x = {}) => g(s({ message: A, severity: "info" }, x)), $ = (A = "", x = {}) => g(s({ message: A, severity: "warning" }, x)), f = (A = "", x = {}) => g(s({ message: A, severity: "error" }, x)), D = (A) => {
-    const x = u.current.findIndex((R) => R.key === A);
-    if (x !== -1)
-      return x === 0 ? (l({ open: !1 }), u.current[0]) : u.current.splice(x, 1);
-  }, W = (A, x) => {
-    n(A, x) && l({ open: !1 });
-  }, P = () => {
-  }, M = () => {
+    }), v);
+    return u.current.push(C), u.current.length === 1 && l({ open: !0 }), C.key;
+  }, []), k = (v = "", C = {}) => g(s({ message: v, severity: "success" }, C)), b = (v = "", C = {}) => g(s({ message: v, severity: "info" }, C)), I = (v = "", C = {}) => g(s({ message: v, severity: "warning" }, C)), D = (v = "", C = {}) => g(s({ message: v, severity: "error" }, C)), A = (v) => {
+    const C = u.current.findIndex((H) => H.key === v);
+    if (C !== -1)
+      return C === 0 ? (l({ open: !1 }), u.current[0]) : u.current.splice(C, 1);
+  }, y = (v, C) => {
+    n(v, C) && l({ open: !1 });
+  }, N = () => {
+  }, R = () => {
     u.current.shift(), u.current.length > 0 && l({ open: !0 });
-  }, I = (N = u.current[0]) != null ? N : s({}, ze), h = {};
-  "autoHideDuration" in I && (h.autoHideDuration = I.autoHideDuration);
-  const m = s(s({}, qn), r), E = s(s({
+  }, T = (L = u.current[0]) != null ? L : s({}, ze), h = {};
+  "autoHideDuration" in T && (h.autoHideDuration = T.autoHideDuration);
+  const f = s(s({}, qn), r), B = s(s({
     open: d,
     setOpen: w,
     enqueueNotification: g,
-    enqueueSuccessNotification: b,
-    enqueueInfoNotification: k,
-    enqueueWarningNotification: $,
-    enqueueErrorNotification: f,
-    removeNotification: D
+    enqueueSuccessNotification: k,
+    enqueueInfoNotification: b,
+    enqueueWarningNotification: I,
+    enqueueErrorNotification: D,
+    removeNotification: A
   }, e), t);
-  return /* @__PURE__ */ p(bt.Provider, { value: E, children: [
+  return /* @__PURE__ */ p(bt.Provider, { value: B, children: [
     i,
     /* @__PURE__ */ o(
       Gt,
-      S(s(s({}, m), h), {
+      S(s(s({}, f), h), {
         open: d,
-        onClose: W,
+        onClose: y,
         TransitionProps: {
-          onExited: M,
-          onExit: P
+          onExited: R,
+          onExit: N
         },
         sx: { zIndex: Qn },
         children: /* @__PURE__ */ p("div", { children: [
           /* @__PURE__ */ o(
             Vt,
             {
-              onClose: (A) => W(A, "closeAlert"),
-              severity: I.severity,
+              onClose: (v) => y(v, "closeAlert"),
+              severity: T.severity,
               variant: "filled",
-              icon: I.progressIndicator === "circular" ? /* @__PURE__ */ o(Ae, { size: "1em" }) : void 0,
-              style: I.progressIndicator === "linear" ? Kn : void 0,
-              children: I.message
+              icon: T.progressIndicator === "circular" ? /* @__PURE__ */ o(Ae, { size: "1em" }) : void 0,
+              style: T.progressIndicator === "linear" ? Kn : void 0,
+              children: T.message
             }
           ),
-          I.progressIndicator === "linear" && /* @__PURE__ */ o(qt, { color: "primary" })
+          T.progressIndicator === "linear" && /* @__PURE__ */ o(qt, { color: "primary" })
         ] })
       })
     )
@@ -1402,9 +1413,9 @@ const Lo = K(
   store: t
 }) => /* @__PURE__ */ o(st, { store: t != null ? t : to, children: e }), St = "domainCode";
 var qe;
-const Ve = _(
+const Ve = M(
   JSON.parse((qe = localStorage.getItem(St)) != null ? qe : '{"domainCode": ""}').domainCode
-), kt = _(
+), kt = M(
   (e) => e(Ve),
   (e, t, n) => {
     t(Ve, n), localStorage.setItem(St, JSON.stringify({ domainCode: n }));
@@ -1432,31 +1443,31 @@ const Ve = _(
   applicationName: r,
   handleLogout: a
 }) => {
-  const [c, d] = V(kt), [l, u] = O(c), { enqueueSuccessNotification: C } = eo(), v = i.length === 0, w = !!c && !i.includes(c) && !i.includes(l), g = !c || v || w, b = () => F(void 0, null, function* () {
-    l ? (d(l), C(`Set domain to ${l}`), n()) : d("");
-  }), k = () => F(void 0, null, function* () {
-    c && !v && !w ? (u(c), n()) : g && a();
+  const [c, d] = V(kt), [l, u] = E(c), { enqueueSuccessNotification: m } = eo(), x = i.length === 0, w = !!c && !i.includes(c) && !i.includes(l), g = !c || x || w, k = () => P(void 0, null, function* () {
+    l ? (d(l), m(`Set domain to ${l}`), n()) : d("");
+  }), b = () => P(void 0, null, function* () {
+    c && !x && !w ? (u(c), n()) : g && a();
   });
-  let $;
-  return v ? $ = "Unable to retrieve your active organisations. Try logging in again." : w && ($ = "You no longer have any roles in your chosen organisation. Please choose another."), /* @__PURE__ */ p(
+  let I;
+  return x ? I = "Unable to retrieve your active organisations. Try logging in again." : w && (I = "You no longer have any roles in your chosen organisation. Please choose another."), /* @__PURE__ */ p(
     ht,
     {
       isOpen: t,
       dialogTitle: "Select an organisation",
       primaryButton: {
         text: "Confirm",
-        onClick: b,
-        disabled: !l || v || w,
+        onClick: k,
+        disabled: !l || x || w,
         buttonColor: "primary"
       },
       secondaryButton: {
         text: g ? "Logout" : "Cancel",
-        onClick: k
+        onClick: b
       },
       onClose: g ? () => {
       } : n,
       children: [
-        /* @__PURE__ */ p(B, { marginBottom: 2, children: [
+        /* @__PURE__ */ p(F, { marginBottom: 2, children: [
           "Select the default organisation that you want to use with the ",
           r,
           "."
@@ -1468,25 +1479,25 @@ const Ve = _(
             multiple: !1,
             disableClearable: !1,
             value: l !== "" ? l : null,
-            onChange: (f, D) => u(D != null ? D : ""),
+            onChange: (D, A) => u(A != null ? A : ""),
             getOptionLabel: oo,
             options: [...i],
-            renderInput: (f) => /* @__PURE__ */ o(
+            renderInput: (D) => /* @__PURE__ */ o(
               we,
-              S(s({}, f), {
+              S(s({}, D), {
                 variant: "filled",
                 label: "Select organisation",
-                InputProps: S(s({}, f.InputProps), {
-                  endAdornment: /* @__PURE__ */ p(L, { children: [
+                InputProps: S(s({}, D.InputProps), {
+                  endAdornment: /* @__PURE__ */ p(_, { children: [
                     e ? /* @__PURE__ */ o(Ae, { color: "inherit", size: 20, sx: { marginTop: "-20px" } }) : null,
-                    f.InputProps.endAdornment
+                    D.InputProps.endAdornment
                   ] })
                 })
               })
             )
           }
         ),
-        $ && /* @__PURE__ */ o(Xt, { error: !0, children: $ })
+        I && /* @__PURE__ */ o(Xt, { error: !0, children: I })
       ]
     }
   );
@@ -1643,7 +1654,7 @@ const Ve = _(
 }, Wo = K(() => ({ children: e }) => /* @__PURE__ */ o(st, { children: e })), ro = ({
   initialValues: e,
   children: t
-}) => (lt(e), /* @__PURE__ */ o(L, { children: t })), zo = K(
+}) => (lt(e), /* @__PURE__ */ o(_, { children: t })), zo = K(
   (e) => ({ children: t }) => /* @__PURE__ */ o(
     ro,
     {