@australiangreens/ag-internal-components 0.0.32 → 0.0.34

package/dist/esm/index.js

@@ -1,110 +1,109 @@
-var nt = Object.defineProperty, rt = Object.defineProperties;
-var ot = Object.getOwnPropertyDescriptors;
-var q = Object.getOwnPropertySymbols;
-var we = Object.prototype.hasOwnProperty, Ce = Object.prototype.propertyIsEnumerable;
-var ie = (e, t, n) => t in e ? nt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, r = (e, t) => {
+var lt = Object.defineProperty, dt = Object.defineProperties;
+var ct = Object.getOwnPropertyDescriptors;
+var Y = Object.getOwnPropertySymbols;
+var Ce = Object.prototype.hasOwnProperty, we = Object.prototype.propertyIsEnumerable;
+var se = (e, t, n) => t in e ? lt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, o = (e, t) => {
   for (var n in t || (t = {}))
-    we.call(t, n) && ie(e, n, t[n]);
-  if (q)
-    for (var n of q(t))
-      Ce.call(t, n) && ie(e, n, t[n]);
+    Ce.call(t, n) && se(e, n, t[n]);
+  if (Y)
+    for (var n of Y(t))
+      we.call(t, n) && se(e, n, t[n]);
   return e;
-}, v = (e, t) => rt(e, ot(t));
-var me = (e, t) => {
+}, x = (e, t) => dt(e, ct(t));
+var Te = (e, t) => {
   var n = {};
-  for (var i in e)
-    we.call(e, i) && t.indexOf(i) < 0 && (n[i] = e[i]);
-  if (e != null && q)
-    for (var i of q(e))
-      t.indexOf(i) < 0 && Ce.call(e, i) && (n[i] = e[i]);
+  for (var a in e)
+    Ce.call(e, a) && t.indexOf(a) < 0 && (n[a] = e[a]);
+  if (e != null && Y)
+    for (var a of Y(e))
+      t.indexOf(a) < 0 && we.call(e, a) && (n[a] = e[a]);
   return n;
 };
-var Te = (e, t, n) => (ie(e, typeof t != "symbol" ? t + "" : t, n), n);
-var ae = (e, t, n) => new Promise((i, a) => {
-  var l = (d) => {
+var Be = (e, t, n) => (se(e, typeof t != "symbol" ? t + "" : t, n), n);
+var Q = (e, t, n) => new Promise((a, i) => {
+  var d = (s) => {
     try {
-      u(n.next(d));
-    } catch (s) {
-      a(s);
+      g(n.next(s));
+    } catch (l) {
+      i(l);
     }
-  }, p = (d) => {
+  }, c = (s) => {
     try {
-      u(n.throw(d));
-    } catch (s) {
-      a(s);
+      g(n.throw(s));
+    } catch (l) {
+      i(l);
     }
-  }, u = (d) => d.done ? i(d.value) : Promise.resolve(d.value).then(l, p);
-  u((n = n.apply(e, t)).next());
+  }, g = (s) => s.done ? a(s.value) : Promise.resolve(s.value).then(d, c);
+  g((n = n.apply(e, t)).next());
 });
-import { jsxs as c, Fragment as M, jsx as o } from "react/jsx-runtime";
-import { useState as B, createContext as ce, useCallback as Y, useContext as pe, useEffect as K, useReducer as it, useMemo as at, useRef as se } from "react";
-import { Typography as y, Button as st, Paper as ue, styled as F, Box as T, IconButton as W, Drawer as dt, Container as De, Divider as Oe, CssBaseline as lt, Snackbar as ct, Alert as pt, CircularProgress as Ee, LinearProgress as ut, Autocomplete as ht, TextField as gt } from "@mui/material";
-import ft from "@mui/material/CssBaseline";
-import { styled as D } from "@mui/material/styles";
-import Pe from "@mui/material/Drawer";
-import { AgError as vt } from "@australiangreens/ag-error";
-import { createHelper as ke } from "souvlaki";
-import _e from "@mui/material/List";
-import Be from "@mui/material/Button";
-import xt from "@mui/material/Dialog";
-import wt from "@mui/material/DialogActions";
-import Ct from "@mui/material/DialogContent";
-import mt from "@mui/material/DialogTitle";
-import { ArrowForward as Re, ArrowBack as He, ViewHeadline as Tt } from "@mui/icons-material";
-import { useAtom as Ot, useAtomValue as Bt, useSetAtom as bt } from "jotai";
-import { atomWithStorage as It, RESET as Nt } from "jotai/utils";
-function Hn({ text: e }) {
-  const [t, n] = B(0);
-  return /* @__PURE__ */ c(M, { children: [
-    /* @__PURE__ */ o(y, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
-    /* @__PURE__ */ o(y, { 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(
-      st,
+import { jsxs as u, Fragment as W, jsx as r } from "react/jsx-runtime";
+import { useState as y, createContext as ue, useCallback as J, useContext as ge, useEffect as Z, useReducer as pt, useMemo as ut, useRef as le } from "react";
+import { Typography as $, Button as gt, Paper as ee, styled as G, Box as B, IconButton as z, Drawer as ht, Container as Fe, Divider as be, CssBaseline as ft, Snackbar as vt, Alert as xt, CircularProgress as Pe, LinearProgress as mt, Autocomplete as Ct, TextField as wt, FormHelperText as Tt } from "@mui/material";
+import Bt from "@mui/material/CssBaseline";
+import { styled as L, createTheme as _e, alpha as de } from "@mui/material/styles";
+import Me from "@mui/material/Drawer";
+import { AgError as bt } from "@australiangreens/ag-error";
+import { createHelper as He } from "souvlaki";
+import Re from "@mui/material/List";
+import Oe from "@mui/material/Button";
+import Ot from "@mui/material/Dialog";
+import yt from "@mui/material/DialogActions";
+import At from "@mui/material/DialogContent";
+import It from "@mui/material/DialogTitle";
+import { ArrowForward as We, ArrowBack as ze, ViewHeadline as St } from "@mui/icons-material";
+import { atom as Ge, useAtom as Dt, useAtomValue as Nt, useSetAtom as $t } from "jotai";
+function Gn({ text: e }) {
+  const [t, n] = y(0);
+  return /* @__PURE__ */ u(W, { children: [
+    /* @__PURE__ */ r($, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
+    /* @__PURE__ */ r($, { variant: "caption", display: "block", children: /* @__PURE__ */ r("span", { children: "Just ensuring MUI is working as planned as a peer dependency. v0.0.11" }) }),
+    /* @__PURE__ */ r(
+      gt,
       {
         variant: "outlined",
-        onClick: () => n((i) => i + 1),
+        onClick: () => n((a) => a + 1),
         "aria-label": "Increment",
         children: "Hello I am a button"
       }
     ),
-    /* @__PURE__ */ c("p", { children: [
+    /* @__PURE__ */ u("p", { children: [
       "This is some text: ",
-      /* @__PURE__ */ o("span", { children: e })
+      /* @__PURE__ */ r("span", { children: e })
     ] }),
-    /* @__PURE__ */ c(ue, { children: [
+    /* @__PURE__ */ u(ee, { children: [
       "This number will incremember when button pressed: ",
       t
     ] })
   ] });
 }
-const Me = 330, We = 73, S = "Navbar", L = {
-  root: `${S}-root`,
-  menuButton: `${S}-menuButton`,
-  hide: `${S}-hide`,
-  content: `${S}-content`,
-  userInfoHolder: `${S}-userInfoHolder`,
-  settings: `${S}-settings`,
-  pieChartIcon: `${S}-pieChartIcon`
-}, St = D("div", { name: "NavBar" })(({ theme: e }) => ({
-  [`&.${L.root}`]: {
+const Ue = 330, Ve = 73, D = "Navbar", E = {
+  root: `${D}-root`,
+  menuButton: `${D}-menuButton`,
+  hide: `${D}-hide`,
+  content: `${D}-content`,
+  userInfoHolder: `${D}-userInfoHolder`,
+  settings: `${D}-settings`,
+  pieChartIcon: `${D}-pieChartIcon`
+}, kt = L("div", { name: "NavBar" })(({ theme: e }) => ({
+  [`&.${E.root}`]: {
     display: "flex"
   },
-  [`& .${L.menuButton}`]: {
+  [`& .${E.menuButton}`]: {
     marginRight: 36
   },
-  [`& .${L.hide}`]: {
+  [`& .${E.hide}`]: {
     display: "none"
   },
-  [`& .${L.content}`]: {
+  [`& .${E.content}`]: {
     flexGrow: 1,
     padding: e.spacing(3)
   },
-  [`& .${L.userInfoHolder}`]: {
+  [`& .${E.userInfoHolder}`]: {
     height: "148px",
     marginTop: "64px",
     marginBottom: "16px"
   }
-})), Fe = () => ({
+})), Xe = () => ({
   position: "absolute",
   height: "100%",
   overflowX: "hidden",
@@ -112,51 +111,51 @@ const Me = 330, We = 73, S = "Navbar", L = {
   color: "white",
   backgroundColor: "black"
   // backgroundColor: '#e8e8e8',
-}), At = () => r({
-  width: Me
-}, Fe()), $t = () => r({
-  width: We
-}, Fe()), Lt = D(Pe, {
+}), Et = () => o({
+  width: Ue
+}, Xe()), Lt = () => o({
+  width: Ve
+}, Xe()), Ft = L(Me, {
   shouldForwardProp: (e) => e !== "open"
-})(({ theme: e, open: t }) => r(r({
-  width: t ? Me : We,
+})(({ theme: e, open: t }) => o(o({
+  width: t ? Ue : Ve,
   flexShrink: 0,
   whiteSpace: "nowrap",
   boxSizing: "border-box",
   zIndex: e.zIndex.drawer + 100
 }, t && {
-  "& .MuiDrawer-paper": At()
+  "& .MuiDrawer-paper": Et()
 }), !t && {
-  "& .MuiDrawer-paper": $t()
+  "& .MuiDrawer-paper": Lt()
 }));
-class J extends vt {
+class te extends bt {
 }
-Te(J, "errorName", "ContextError");
-const ze = ce(null), yt = {}, Dt = {}, Et = ({
-  overrideState: e = yt,
-  overrideActions: t = Dt,
+Be(te, "errorName", "ContextError");
+const qe = ue(null), Pt = {}, _t = {}, Mt = ({
+  overrideState: e = Pt,
+  overrideActions: t = _t,
   children: n
 }) => {
-  const [{ open: i }, a] = B({ open: !0 }), l = Y((d) => {
-    a({ open: d });
-  }, []), p = Y(() => {
-    a((d) => v(r({}, d), { open: !d.open }));
-  }, []), u = r(r({
-    open: i,
-    setOpen: l,
-    toggleOpen: p
+  const [{ open: a }, i] = y({ open: !0 }), d = J((s) => {
+    i({ open: s });
+  }, []), c = J(() => {
+    i((s) => x(o({}, s), { open: !s.open }));
+  }, []), g = o(o({
+    open: a,
+    setOpen: d,
+    toggleOpen: c
   }, e), t);
-  return /* @__PURE__ */ o(ze.Provider, { value: u, children: n });
-}, Pt = () => {
-  const e = pe(ze);
+  return /* @__PURE__ */ r(qe.Provider, { value: g, children: n });
+}, Ht = () => {
+  const e = ge(qe);
   if (e === null)
-    throw new J("Error: Tried to useNavBar outside of a <NavBarProvider>");
+    throw new te("Error: Tried to useNavBar outside of a <NavBarProvider>");
   return e;
-}, kt = (e = {}) => r({
+}, Rt = (e = {}) => o({
   open: !0
-}, e), Mn = ke(
-  (e = kt(), t = {}) => ({ children: n }) => /* @__PURE__ */ o(Et, { overrideState: e, overrideActions: t, children: n })
-), be = 7, Wn = D(_e)(({ theme: e }) => ({
+}, e), Un = He(
+  (e = Rt(), t = {}) => ({ children: n }) => /* @__PURE__ */ r(Mt, { overrideState: e, overrideActions: t, children: n })
+), ye = 7, Vn = L(Re)(({ theme: e }) => ({
   backgroundColor: "black",
   color: "white",
   "& .MuiListItem-root": {
@@ -165,7 +164,7 @@ const ze = ce(null), yt = {}, Dt = {}, Et = ({
   "& .MuiListItemButton-root": {
     " .MuiListItemIcon-root": {
       color: "white",
-      padding: `${be}px`
+      padding: `${ye}px`
     },
     // Focus state
     "&.Mui-focusVisible": {
@@ -176,7 +175,7 @@ const ze = ce(null), yt = {}, Dt = {}, Et = ({
       borderLeftStyle: "solid",
       borderLeftWidth: "7px",
       borderLeftColor: e.palette.primary.main,
-      paddingLeft: `calc(${e.spacing(2)} - ${be}px)`
+      paddingLeft: `calc(${e.spacing(2)} - ${ye}px)`
     },
     // Hover state
     "&:hover": {
@@ -194,7 +193,7 @@ const ze = ce(null), yt = {}, Dt = {}, Et = ({
     // '&.Mui-selected.Mui-focusVisible:hover': {
     // },
   }
-})), Ie = 7, Fn = D(_e)(({ theme: e }) => ({
+})), Ae = 7, Xn = L(Re)(({ theme: e }) => ({
   backgroundColor: "#e8e8e8",
   color: "inherit",
   "& .MuiListItem-root": {
@@ -203,7 +202,7 @@ const ze = ce(null), yt = {}, Dt = {}, Et = ({
   "& .MuiListItemButton-root": {
     " .MuiListItemIcon-root": {
       color: "inherit",
-      padding: `${Ie}px`
+      padding: `${Ae}px`
     },
     // Focus state
     "&.Mui-focusVisible": {
@@ -214,7 +213,7 @@ const ze = ce(null), yt = {}, Dt = {}, Et = ({
       borderLeftStyle: "solid",
       borderLeftWidth: "7px",
       borderLeftColor: e.palette.primary.main,
-      paddingLeft: `calc(${e.spacing(2)} - ${Ie}px)`
+      paddingLeft: `calc(${e.spacing(2)} - ${Ae}px)`
     },
     // Hover state
     "&:hover": {
@@ -233,15 +232,15 @@ const ze = ce(null), yt = {}, Dt = {}, Et = ({
     // },
   }
 }));
-function zn({
+function qn({
   "data-testid": e,
   children: t
 }) {
-  const { open: n } = Pt();
-  return /* @__PURE__ */ c(St, { className: L.root, "data-testid": e, children: [
-    /* @__PURE__ */ o(ft, {}),
-    /* @__PURE__ */ o(
-      Lt,
+  const { open: n } = Ht();
+  return /* @__PURE__ */ u(kt, { className: E.root, "data-testid": e, children: [
+    /* @__PURE__ */ r(Bt, {}),
+    /* @__PURE__ */ r(
+      Ft,
       {
         variant: "permanent",
         anchor: "left",
@@ -252,81 +251,81 @@ function zn({
     )
   ] });
 }
-const _t = ({
+const Wt = ({
   isOpen: e,
   dialogTitle: t,
   children: n,
-  maxWidth: i,
-  primaryButton: a,
-  secondaryButton: l,
-  onClose: p
+  maxWidth: a,
+  primaryButton: i,
+  secondaryButton: d,
+  onClose: c
 }) => {
-  var s, x;
-  const [u, d] = B(!1);
-  return /* @__PURE__ */ c(
-    xt,
+  var l, m;
+  const [g, s] = y(!1);
+  return /* @__PURE__ */ u(
+    Ot,
     {
       open: e,
       onClose: () => {
-        u || p();
+        g || c();
       },
       fullWidth: !0,
-      maxWidth: i != null ? i : "xs",
+      maxWidth: a != null ? a : "xs",
       children: [
-        /* @__PURE__ */ o(mt, { children: t }),
-        /* @__PURE__ */ o(Ct, { sx: { "& > :last-child": { marginBottom: 0 } }, children: n }),
-        /* @__PURE__ */ c(wt, { children: [
-          /* @__PURE__ */ o(
-            Be,
+        /* @__PURE__ */ r(It, { children: t }),
+        /* @__PURE__ */ r(At, { sx: { "& > :last-child": { marginBottom: 0 } }, children: n }),
+        /* @__PURE__ */ u(yt, { children: [
+          /* @__PURE__ */ r(
+            Oe,
             {
-              onClick: (s = l == null ? void 0 : l.onClick) != null ? s : p,
-              "data-testid": l == null ? void 0 : l.testId,
-              disabled: (l == null ? void 0 : l.disabled) || u,
-              children: (x = l == null ? void 0 : l.text) != null ? x : "Cancel"
+              onClick: (l = d == null ? void 0 : d.onClick) != null ? l : c,
+              "data-testid": d == null ? void 0 : d.testId,
+              disabled: (d == null ? void 0 : d.disabled) || g,
+              children: (m = d == null ? void 0 : d.text) != null ? m : "Cancel"
             }
           ),
-          a && /* @__PURE__ */ o(
-            Be,
+          i && /* @__PURE__ */ r(
+            Oe,
             {
-              onClick: () => ae(void 0, null, function* () {
-                var w;
-                d(!0), yield (w = a.onClick) == null ? void 0 : w.call(a), d(!1);
+              onClick: () => Q(void 0, null, function* () {
+                var h;
+                s(!0), yield (h = i.onClick) == null ? void 0 : h.call(i), s(!1);
               }),
-              "data-testid": a.testId,
-              disabled: a.disabled || u,
-              children: a.text
+              "data-testid": i.testId,
+              disabled: i.disabled || g,
+              children: i.text
             }
           )
         ] })
       ]
     }
   );
-}, Rt = 24, Ht = 64, A = "TopBar", m = {
-  topStripe: `${A}-topStripe`,
-  titleBar: `${A}-titleBar`,
-  titleSlider: `${A}-titleSlider`,
-  titleText: `${A}-titleText`,
-  leftPanelButton: `${A}-leftPanelButton`,
-  rightPanelButton: `${A}-leftPanelButton`
-}, Mt = F("div", {
+}, zt = 24, Gt = 64, N = "TopBar", T = {
+  topStripe: `${N}-topStripe`,
+  titleBar: `${N}-titleBar`,
+  titleSlider: `${N}-titleSlider`,
+  titleText: `${N}-titleText`,
+  leftPanelButton: `${N}-leftPanelButton`,
+  rightPanelButton: `${N}-leftPanelButton`
+}, Ut = G("div", {
   shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
-  name: A
+  name: N
 })(({ theme: e, leftPanel: t, rightPanel: n }) => {
-  var i, a;
+  var a, i;
   return {
     width: "100%",
-    [`& .${m.topStripe}`]: {
+    [`& .${T.topStripe}`]: {
       width: "100%",
-      height: `${Rt}px`,
+      height: `${zt}px`,
       backgroundColor: e.palette.primary.main
     },
-    [`& .${m.titleBar}`]: {
+    [`& .${T.titleBar}`]: {
       backgroundColor: e.palette.primary.light,
-      height: `${Ht}px`,
+      height: `${Gt}px`,
       padding: e.spacing(0, 3),
       width: "100%"
     },
-    [`& .${m.titleSlider}`]: r(r({
+    [`& .${T.titleSlider}`]: o(o({
       height: "100%",
       display: "flex",
       alignItems: "center",
@@ -335,14 +334,14 @@ const _t = ({
         easing: e.transitions.easing.sharp,
         duration: e.transitions.duration.leavingScreen
       }),
-      [`& .${m.leftPanelButton}`]: {
+      [`& .${T.leftPanelButton}`]: {
         marginRight: e.spacing(2),
         flexGrow: 0
       },
-      [`& .${m.titleText}`]: {
+      [`& .${T.titleText}`]: {
         flexGrow: 1
       },
-      [`& .${m.rightPanelButton}`]: {
+      [`& .${T.rightPanelButton}`]: {
         flexGrow: 0
       }
     }, (t == null ? void 0 : t.open) && {
@@ -350,29 +349,29 @@ const _t = ({
         easing: e.transitions.easing.easeOut,
         duration: e.transitions.duration.enteringScreen
       }),
-      marginLeft: `${(i = t == null ? void 0 : t.width) != null ? i : 0}px`
+      marginLeft: `${(a = t == null ? void 0 : t.width) != null ? a : 0}px`
     }), (n == null ? void 0 : n.open) && {
       transition: e.transitions.create("margin", {
         easing: e.transitions.easing.easeOut,
         duration: e.transitions.duration.enteringScreen
       }),
-      marginRight: `${(a = n == null ? void 0 : n.width) != null ? a : 0}px`
+      marginRight: `${(i = n == null ? void 0 : n.width) != null ? i : 0}px`
     })
   };
 });
-function Wt({
+function Vt({
   titleText: e = "",
   leftPanel: t,
   rightPanel: n,
-  "data-testid": i
+  "data-testid": a
 }) {
-  return /* @__PURE__ */ c(Mt, { leftPanel: t, rightPanel: n, "data-testid": i, children: [
-    /* @__PURE__ */ o("div", { className: m.topStripe }),
-    /* @__PURE__ */ o("div", { className: m.titleBar, children: /* @__PURE__ */ c(T, { className: m.titleSlider, children: [
-      t !== void 0 && !t.open && t.showOpenArrow && /* @__PURE__ */ c(
-        W,
+  return /* @__PURE__ */ u(Ut, { leftPanel: t, rightPanel: n, "data-testid": a, children: [
+    /* @__PURE__ */ r("div", { className: T.topStripe }),
+    /* @__PURE__ */ r("div", { className: T.titleBar, children: /* @__PURE__ */ u(B, { className: T.titleSlider, children: [
+      t !== void 0 && !t.open && t.showOpenArrow && /* @__PURE__ */ u(
+        z,
         {
-          className: m.leftPanelButton,
+          className: T.leftPanelButton,
           color: "inherit",
           "aria-label": "Open left side panel",
           onClick: t == null ? void 0 : t.onOpen,
@@ -380,15 +379,15 @@ function Wt({
           size: "large",
           children: [
             " ",
-            /* @__PURE__ */ o(Re, {})
+            /* @__PURE__ */ r(We, {})
           ]
         }
       ),
-      /* @__PURE__ */ o(y, { className: m.titleText, variant: "h6", noWrap: !0, children: e }),
-      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ c(
-        W,
+      /* @__PURE__ */ r($, { className: T.titleText, variant: "h6", noWrap: !0, children: e }),
+      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ u(
+        z,
         {
-          className: m.rightPanelButton,
+          className: T.rightPanelButton,
           color: "inherit",
           "aria-label": "Open right side panel",
           onClick: n == null ? void 0 : n.onOpen,
@@ -396,14 +395,14 @@ function Wt({
           size: "large",
           children: [
             " ",
-            /* @__PURE__ */ o(He, {})
+            /* @__PURE__ */ r(ze, {})
           ]
         }
       )
     ] }) })
   ] });
 }
-const Ge = 400, Ft = F(dt, {
+const Ye = 400, Xt = G(ht, {
   shouldForwardProp: (e) => (
     // Note we do want anchor to be forwarded to the Drawer component
     ![
@@ -417,9 +416,9 @@ const Ge = 400, Ft = F(dt, {
   ),
   name: "SidePanelDrawer"
 })(
-  ({ width: e, debugOpacity: t = !1, anchor: n, navBarOpen: i, navBarWidthOpen: a, navBarWidthClosed: l }) => ({
+  ({ width: e, debugOpacity: t = !1, anchor: n, navBarOpen: a, navBarWidthOpen: i, navBarWidthClosed: d }) => ({
     width: e,
-    "& .MuiDrawer-paper": r(r({
+    "& .MuiDrawer-paper": o(o({
       position: "absolute",
       width: e,
       boxSizing: "border-box",
@@ -427,15 +426,15 @@ const Ge = 400, Ft = F(dt, {
       boxShadow: "0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2)"
     }, t && {
       opacity: "50%"
-    }), n === "left" && r({
-      marginLeft: `${l}px`
-    }, i && {
-      marginLeft: `${a}px`
+    }), n === "left" && o({
+      marginLeft: `${d}px`
+    }, a && {
+      marginLeft: `${i}px`
     }))
   })
-), zt = F(T, {
+), qt = G(B, {
   shouldForwardProp: (e) => !["anchor"].includes(e)
-})(({ theme: e, anchor: t }) => v(r({
+})(({ theme: e, anchor: t }) => x(o({
   display: "flex",
   alignItems: "center",
   padding: e.spacing(2)
@@ -453,65 +452,65 @@ const Ge = 400, Ft = F(dt, {
     marginRight: t === "right" ? e.spacing(2) : 0
   }
 }));
-function Ne({
+function Ie({
   children: e,
   anchor: t = "left",
   open: n,
-  onClose: i = () => {
+  onClose: a = () => {
   },
-  titleText: a = "",
-  width: l = Ge,
-  showCloseArrow: p = !0,
-  debugOpacity: u = !1,
-  headerBoxProps: d = {},
-  onOpened: s,
-  onClosed: x,
-  "data-testid": w,
-  navBarOpen: h = !1,
+  titleText: i = "",
+  width: d = Ye,
+  showCloseArrow: c = !0,
+  debugOpacity: g = !1,
+  headerBoxProps: s = {},
+  onOpened: l,
+  onClosed: m,
+  "data-testid": h,
+  navBarOpen: p = !1,
   navBarWidthOpen: C = 0,
   navBarWidthClosed: b = 0
 }) {
-  return /* @__PURE__ */ c(
-    Ft,
+  return /* @__PURE__ */ u(
+    Xt,
     {
       SlideProps: {
-        onEntered: () => s == null ? void 0 : s(),
-        onExited: () => x == null ? void 0 : x()
+        onEntered: () => l == null ? void 0 : l(),
+        onExited: () => m == null ? void 0 : m()
       },
       variant: "persistent",
       anchor: t,
       open: n,
-      width: l,
-      debugOpacity: u,
-      "data-testid": w,
-      navBarOpen: h,
+      width: d,
+      debugOpacity: g,
+      "data-testid": h,
+      navBarOpen: p,
       navBarWidthOpen: C,
       navBarWidthClosed: b,
       children: [
-        /* @__PURE__ */ o(zt, v(r({ anchor: t }, d), { children: t === "left" ? /* @__PURE__ */ c(M, { children: [
-          /* @__PURE__ */ o(y, { variant: "h6", color: "inherit", component: "div", children: a }),
-          p && /* @__PURE__ */ c(W, { onClick: i, size: "large", "aria-label": "Close left side panel", children: [
-            /* @__PURE__ */ o(He, { "data-testid": "arrowbackicon" }),
+        /* @__PURE__ */ r(qt, x(o({ anchor: t }, s), { children: t === "left" ? /* @__PURE__ */ u(W, { children: [
+          /* @__PURE__ */ r($, { variant: "h6", color: "inherit", component: "div", children: i }),
+          c && /* @__PURE__ */ u(z, { onClick: a, size: "large", "aria-label": "Close left side panel", children: [
+            /* @__PURE__ */ r(ze, { "data-testid": "arrowbackicon" }),
             " "
           ] })
-        ] }) : /* @__PURE__ */ c(M, { children: [
-          p && /* @__PURE__ */ c(W, { onClick: i, size: "large", "aria-label": "Close right side panel", children: [
-            /* @__PURE__ */ o(Re, {}),
+        ] }) : /* @__PURE__ */ u(W, { children: [
+          c && /* @__PURE__ */ u(z, { onClick: a, size: "large", "aria-label": "Close right side panel", children: [
+            /* @__PURE__ */ r(We, {}),
             " "
           ] }),
-          /* @__PURE__ */ o(y, { variant: "h6", color: "inherit", component: "div", children: a })
+          /* @__PURE__ */ r($, { variant: "h6", color: "inherit", component: "div", children: i })
         ] }) })),
         e
       ]
     }
   );
 }
-const Gt = F("div", {
+const Yt = G("div", {
   shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
   name: "PanelAwareMargins"
 })(({ theme: e, leftPanel: t, rightPanel: n }) => {
-  var i, a;
-  return r(r({
+  var a, i;
+  return o(o({
     transition: e.transitions.create("margin", {
       easing: e.transitions.easing.sharp,
       duration: e.transitions.duration.leavingScreen
@@ -521,239 +520,239 @@ const Gt = F("div", {
       easing: e.transitions.easing.easeOut,
       duration: e.transitions.duration.enteringScreen
     }),
-    marginLeft: `${(i = t == null ? void 0 : t.width) != null ? i : 0}px`
+    marginLeft: `${(a = t == null ? void 0 : t.width) != null ? a : 0}px`
   }), (n == null ? void 0 : n.open) && {
     transition: e.transitions.create("margin", {
       easing: e.transitions.easing.easeOut,
       duration: e.transitions.duration.enteringScreen
     }),
-    marginRight: `${(a = n == null ? void 0 : n.width) != null ? a : 0}px`
+    marginRight: `${(i = n == null ? void 0 : n.width) != null ? i : 0}px`
   });
-}), Ut = F(De, {
+}), Qt = G(Fe, {
   name: "PageContainer"
 })(({ theme: e }) => ({
   // Horizontal padding comes from the Container's gutter
   paddingTop: e.spacing(3),
   paddingBottom: e.spacing(3)
-})), de = !1, le = !1, Q = {
+})), ce = !1, pe = !1, j = {
   titleText: "",
   flavour: "push",
-  width: Ge,
+  width: Ye,
   arrowButtons: "both",
   startOpen: !1,
   open: void 0,
   onChangeOpen: void 0,
-  content: /* @__PURE__ */ o(M, {}),
+  content: /* @__PURE__ */ r(W, {}),
   onOpened: void 0,
   onClosed: void 0,
   dataTestId: void 0
 };
-function Gn({
+function Yn({
   children: e,
   titleText: t = "",
   leftPanel: n,
-  rightPanel: i,
-  sidePanelsAreMutuallyExclusive: a = !0,
-  debugOpacity: l = !1,
-  pageContainerProps: p,
-  pageContentDataTestId: u,
-  topBarDataTestId: d,
-  navBarOpen: s,
-  navBarWidthOpen: x,
-  navBarWidthClosed: w
+  rightPanel: a,
+  sidePanelsAreMutuallyExclusive: i = !0,
+  debugOpacity: d = !1,
+  pageContainerProps: c,
+  pageContentDataTestId: g,
+  topBarDataTestId: s,
+  navBarOpen: l,
+  navBarWidthOpen: m,
+  navBarWidthClosed: h
 }) {
-  const [h, C] = B(de), [b, I] = B(le), [Z, z] = B(de), [ee, E] = B(le), P = n !== void 0, k = i !== void 0, {
+  const [p, C] = y(ce), [b, w] = y(pe), [A, I] = y(ce), [ne, F] = y(pe), P = n !== void 0, _ = a !== void 0, {
     titleText: O,
-    content: G,
-    flavour: U,
-    open: _,
-    onChangeOpen: R,
-    width: g,
-    arrowButtons: f,
-    startOpen: $,
-    onOpened: Qe,
-    onClosed: je,
-    dataTestId: Ye
-  } = n ? r(r({}, Q), n) : r({}, Q), {
-    titleText: Ke,
-    content: Je,
-    flavour: ge,
-    open: te,
-    onChangeOpen: fe,
-    width: ne,
-    arrowButtons: V,
-    startOpen: X,
-    onOpened: Ze,
-    onClosed: et,
-    dataTestId: tt
-  } = i ? r(r({}, Q), i) : r({}, Q);
-  K(() => {
-    $ !== de && (C($), z($));
-  }, [$]), K(() => {
-    X !== le && (I(X), E(X));
-  }, [X]);
-  const re = _ === void 0 ? h : _, oe = te === void 0 ? b : te, ve = (N) => {
-    _ === void 0 && (C(N), a && k && (N ? (I(!1), E(b)) : I(ee))), R && R(N);
-  }, xe = (N) => {
-    te === void 0 && (I(N), a && P && (N ? (C(!1), z(h)) : C(Z))), fe && fe(N);
+    content: U,
+    flavour: V,
+    open: M,
+    onChangeOpen: H,
+    width: f,
+    arrowButtons: v,
+    startOpen: k,
+    onOpened: et,
+    onClosed: tt,
+    dataTestId: nt
+  } = n ? o(o({}, j), n) : o({}, j), {
+    titleText: ot,
+    content: rt,
+    flavour: fe,
+    open: oe,
+    onChangeOpen: ve,
+    width: re,
+    arrowButtons: X,
+    startOpen: q,
+    onOpened: at,
+    onClosed: it,
+    dataTestId: st
+  } = a ? o(o({}, j), a) : o({}, j);
+  Z(() => {
+    k !== ce && (C(k), I(k));
+  }, [k]), Z(() => {
+    q !== pe && (w(q), F(q));
+  }, [q]);
+  const ae = M === void 0 ? p : M, ie = oe === void 0 ? b : oe, xe = (S) => {
+    M === void 0 && (C(S), i && _ && (S ? (w(!1), F(b)) : w(ne))), H && H(S);
+  }, me = (S) => {
+    oe === void 0 && (w(S), i && P && (S ? (C(!1), I(p)) : C(A))), ve && ve(S);
   };
-  return /* @__PURE__ */ c(T, { children: [
-    P && /* @__PURE__ */ o(
-      Ne,
+  return /* @__PURE__ */ u(B, { children: [
+    P && /* @__PURE__ */ r(
+      Ie,
       {
-        "data-testid": Ye,
+        "data-testid": nt,
         anchor: "left",
-        open: re,
-        onClose: () => ve(!1),
-        width: g,
+        open: ae,
+        onClose: () => xe(!1),
+        width: f,
         titleText: O,
-        debugOpacity: l,
-        showCloseArrow: f === "both" || f === "close",
-        onOpened: Qe,
-        onClosed: je,
-        navBarOpen: s,
-        navBarWidthOpen: x,
-        navBarWidthClosed: w,
-        children: G
+        debugOpacity: d,
+        showCloseArrow: v === "both" || v === "close",
+        onOpened: et,
+        onClosed: tt,
+        navBarOpen: l,
+        navBarWidthOpen: m,
+        navBarWidthClosed: h,
+        children: U
       }
     ),
-    k && /* @__PURE__ */ o(
-      Ne,
+    _ && /* @__PURE__ */ r(
+      Ie,
       {
-        "data-testid": tt,
+        "data-testid": st,
         anchor: "right",
-        open: oe,
-        onClose: () => xe(!1),
-        width: ne,
-        titleText: Ke,
-        debugOpacity: l,
-        showCloseArrow: V === "both" || V === "close",
-        onOpened: Ze,
-        onClosed: et,
-        navBarOpen: s,
-        navBarWidthOpen: x,
-        navBarWidthClosed: w,
-        children: Je
+        open: ie,
+        onClose: () => me(!1),
+        width: re,
+        titleText: ot,
+        debugOpacity: d,
+        showCloseArrow: X === "both" || X === "close",
+        onOpened: at,
+        onClosed: it,
+        navBarOpen: l,
+        navBarWidthOpen: m,
+        navBarWidthClosed: h,
+        children: rt
       }
     ),
-    /* @__PURE__ */ o(
-      Wt,
-      r(r({
+    /* @__PURE__ */ r(
+      Vt,
+      o(o({
         titleText: t,
-        "data-testid": d
-      }, P && U === "push" ? {
+        "data-testid": s
+      }, P && V === "push" ? {
         leftPanel: {
-          open: re,
-          width: g,
-          onOpen: () => ve(!0),
-          showOpenArrow: f === "both" || f === "open"
+          open: ae,
+          width: f,
+          onOpen: () => xe(!0),
+          showOpenArrow: v === "both" || v === "open"
         }
-      } : {}), k && ge === "push" ? {
+      } : {}), _ && fe === "push" ? {
         rightPanel: {
-          open: oe,
-          width: ne,
-          onOpen: () => xe(!0),
-          showOpenArrow: V === "both" || V === "open"
+          open: ie,
+          width: re,
+          onOpen: () => me(!0),
+          showOpenArrow: X === "both" || X === "open"
         }
       } : {})
     ),
-    /* @__PURE__ */ o(
-      Gt,
-      v(r(r({}, U === "push" ? {
+    /* @__PURE__ */ r(
+      Yt,
+      x(o(o({}, V === "push" ? {
         leftPanel: {
-          open: re,
-          width: g
+          open: ae,
+          width: f
         }
-      } : {}), ge === "push" ? {
+      } : {}), fe === "push" ? {
         rightPanel: {
-          open: oe,
-          width: ne
+          open: ie,
+          width: re
         }
       } : {}), {
-        children: /* @__PURE__ */ o(Ut, v(r({ "data-testid": u }, p), { children: e }))
+        children: /* @__PURE__ */ r(Qt, x(o({ "data-testid": g }, c), { children: e }))
       })
     )
   ] });
 }
-const Vt = 64, Xt = 64, qt = 256, Qt = {
+const jt = 64, Kt = 64, Jt = 256, Zt = {
   navBarOpen: !0,
   titleText: "",
-  navBarWidthOpen: qt,
-  navBarWidthClosed: Xt,
-  topBarHeight: Vt,
+  navBarWidthOpen: Jt,
+  navBarWidthClosed: Kt,
+  topBarHeight: jt,
   navBarTop: void 0
 };
-function jt(e, t) {
+function en(e, t) {
   switch (t.type) {
     case "toggleNavBarOpen":
-      return v(r({}, e), {
+      return x(o({}, e), {
         navBarOpen: !e.navBarOpen
       });
     case "setNavBarOpen":
-      return v(r({}, e), {
+      return x(o({}, e), {
         navBarOpen: t.payload
       });
     case "setTitleText":
-      return v(r({}, e), {
+      return x(o({}, e), {
         titleText: t.payload
       });
     case "setNavBarWidthOpen":
-      return v(r({}, e), {
+      return x(o({}, e), {
         navBarWidthOpen: t.payload
       });
     case "setTopBarHeight":
-      return v(r({}, e), {
+      return x(o({}, e), {
         topBarHeight: t.payload
       });
     case "setNavBarTop":
-      return v(r({}, e), {
+      return x(o({}, e), {
         navBarTop: t.payload
       });
     default:
       throw new Error("Invalid action.type");
   }
 }
-const Ue = ce(null), Yt = {}, Kt = {}, Jt = ({
-  overrideState: e = Yt,
-  overrideActions: t = Kt,
+const Qe = ue(null), tn = {}, nn = {}, on = ({
+  overrideState: e = tn,
+  overrideActions: t = nn,
   children: n
 }) => {
   const [
-    { titleText: i, topBarHeight: a, navBarOpen: l, navBarWidthOpen: p, navBarWidthClosed: u, navBarTop: d },
-    s
-  ] = it(jt, Qt), x = at(
+    { titleText: a, topBarHeight: i, navBarOpen: d, navBarWidthOpen: c, navBarWidthClosed: g, navBarTop: s },
+    l
+  ] = pt(en, Zt), m = ut(
     () => ({
-      toggleNavBarOpen: () => s({ type: "toggleNavBarOpen" }),
-      setNavBarOpen: (h) => s({ type: "setNavBarOpen", payload: h }),
-      setNavBarWidthOpen: (h) => s({ type: "setNavBarWidthOpen", payload: h }),
-      setNavBarWidthClosed: (h) => s({ type: "setNavBarWidthClosed", payload: h }),
-      setTitleText: (h) => s({ type: "setTitleText", payload: h }),
-      setTopBarHeight: (h) => s({ type: "setTopBarHeight", payload: h }),
-      setNavBarTop: (h) => s({ type: "setNavBarTop", payload: h }),
-      clearNavBarTop: () => s({ type: "setNavBarTop", payload: void 0 })
+      toggleNavBarOpen: () => l({ type: "toggleNavBarOpen" }),
+      setNavBarOpen: (p) => l({ type: "setNavBarOpen", payload: p }),
+      setNavBarWidthOpen: (p) => l({ type: "setNavBarWidthOpen", payload: p }),
+      setNavBarWidthClosed: (p) => l({ type: "setNavBarWidthClosed", payload: p }),
+      setTitleText: (p) => l({ type: "setTitleText", payload: p }),
+      setTopBarHeight: (p) => l({ type: "setTopBarHeight", payload: p }),
+      setNavBarTop: (p) => l({ type: "setNavBarTop", payload: p }),
+      clearNavBarTop: () => l({ type: "setNavBarTop", payload: void 0 })
     }),
     []
-  ), w = r(r(r({
-    navBarOpen: l,
-    navBarWidthOpen: p,
-    navBarWidthClosed: u,
-    titleText: i,
-    topBarHeight: a,
-    navBarTop: d
-  }, x), e), t);
-  return /* @__PURE__ */ o(Ue.Provider, { value: w, children: n });
-}, Ve = () => {
-  const e = pe(Ue);
+  ), h = o(o(o({
+    navBarOpen: d,
+    navBarWidthOpen: c,
+    navBarWidthClosed: g,
+    titleText: a,
+    topBarHeight: i,
+    navBarTop: s
+  }, m), e), t);
+  return /* @__PURE__ */ r(Qe.Provider, { value: h, children: n });
+}, je = () => {
+  const e = ge(Qe);
   if (e === null)
-    throw new J("Error: Tried to call useAppLayout() outside of a <AppLayoutProvider>");
+    throw new te("Error: Tried to call useAppLayout() outside of a <AppLayoutProvider>");
   return e;
-}, Zt = "TopBar", en = {
-  titleText: `${Zt}-titleText`
+}, rn = "TopBar", an = {
+  titleText: `${rn}-titleText`
 };
-function tn({ titleText: e = "", height: t, "data-testid": n }) {
-  const { toggleNavBarOpen: i } = Ve();
-  return /* @__PURE__ */ o("header", { "data-testid": n, children: /* @__PURE__ */ c(
-    ue,
+function sn({ titleText: e = "", height: t, "data-testid": n }) {
+  const { toggleNavBarOpen: a } = je();
+  return /* @__PURE__ */ r("header", { "data-testid": n, children: /* @__PURE__ */ u(
+    ee,
     {
       square: !0,
       elevation: 0,
@@ -769,31 +768,31 @@ function tn({ titleText: e = "", height: t, "data-testid": n }) {
         height: t
       },
       children: [
-        /* @__PURE__ */ o(W, { size: "medium", color: "inherit", sx: { padding: 1.5 }, onClick: i, children: /* @__PURE__ */ o(Tt, { fontSize: "medium" }) }),
-        /* @__PURE__ */ o(y, { className: en.titleText, variant: "h6", children: e })
+        /* @__PURE__ */ r(z, { size: "medium", color: "inherit", sx: { padding: 1.5 }, onClick: a, children: /* @__PURE__ */ r(St, { fontSize: "medium" }) }),
+        /* @__PURE__ */ r($, { className: an.titleText, variant: "h6", children: e })
       ]
     }
   ) });
 }
-const j = "Navbar", H = {
-  root: `${j}-root`,
-  menuButton: `${j}-menuButton`,
-  hide: `${j}-hide`,
-  content: `${j}-content`
+const K = "Navbar", R = {
+  root: `${K}-root`,
+  menuButton: `${K}-menuButton`,
+  hide: `${K}-hide`,
+  content: `${K}-content`
   // userInfoHolder: `${PREFIX}-userInfoHolder`,
   // settings: `${PREFIX}-settings`,
   // pieChartIcon: `${PREFIX}-pieChartIcon`,
-}, nn = D("div", { name: "NavBar" })(({ theme: e }) => ({
-  [`&.${H.root}`]: {
+}, ln = L("div", { name: "NavBar" })(({ theme: e }) => ({
+  [`&.${R.root}`]: {
     display: "flex"
   },
-  [`& .${H.menuButton}`]: {
+  [`& .${R.menuButton}`]: {
     marginRight: 36
   },
-  [`& .${H.hide}`]: {
+  [`& .${R.hide}`]: {
     display: "none"
   },
-  [`& .${H.content}`]: {
+  [`& .${R.content}`]: {
     flexGrow: 1,
     padding: e.spacing(3)
   }
@@ -802,80 +801,80 @@ const j = "Navbar", H = {
   //   marginTop: '64px',
   //   marginBottom: '16px',
   // },
-})), Xe = (e, t) => {
-  var n, i;
+})), Ke = (e, t) => {
+  var n, a;
   return {
     height: `calc(100vh - ${t})`,
     top: t,
     overflowX: "hidden",
     overflowY: "hidden",
     color: "inherit",
-    backgroundColor: (i = (n = e == null ? void 0 : e.navBar) == null ? void 0 : n.backgroundColor) != null ? i : "white"
+    backgroundColor: (a = (n = e == null ? void 0 : e.navBar) == null ? void 0 : n.backgroundColor) != null ? a : "white"
     // Provide default so tests don't need to wrap theme provider
   };
-}, Se = (e, t, n) => r({
+}, Se = (e, t, n) => o({
   width: t,
   transition: e.transitions.create("width", {
     easing: e.transitions.easing.sharp,
     duration: e.transitions.duration.enteringScreen
   })
-}, Xe(e, n)), Ae = (e, t, n) => r({
+}, Ke(e, n)), De = (e, t, n) => o({
   width: t,
   transition: e.transitions.create("width", {
     easing: e.transitions.easing.sharp,
     duration: e.transitions.duration.leavingScreen
   }),
   overflowX: "hidden"
-}, Xe(e, n)), rn = D(Pe, {
+}, Ke(e, n)), dn = L(Me, {
   shouldForwardProp: (e) => !["open", "widthOpen", "widthClosed", "offsetTop"].includes(e)
-})(({ theme: e, open: t, widthOpen: n, widthClosed: i, offsetTop: a }) => r(r({
+})(({ theme: e, open: t, widthOpen: n, widthClosed: a, offsetTop: i }) => o(o({
   flexShrink: 0,
   whiteSpace: "nowrap",
   boxSizing: "border-box"
-}, t && v(r({}, Se(e, n, a)), {
-  "& .MuiDrawer-paper": Se(e, n, a)
-})), !t && v(r({}, Ae(e, i, a)), {
-  "& .MuiDrawer-paper": Ae(e, i, a)
+}, t && x(o({}, Se(e, n, i)), {
+  "& .MuiDrawer-paper": Se(e, n, i)
+})), !t && x(o({}, De(e, a, i)), {
+  "& .MuiDrawer-paper": De(e, a, i)
 })));
-function on({ links: e }) {
-  return /* @__PURE__ */ o("div", { children: "LinksMenu not implemented yet" });
+function cn({ links: e }) {
+  return /* @__PURE__ */ r("div", { children: "LinksMenu not implemented yet" });
 }
-function an({
+function pn({
   open: e,
   offsetTop: t = 0,
   widthOpen: n,
-  widthClosed: i,
-  "data-testid": a,
-  top: l,
-  middle: p,
-  bottom: u
+  widthClosed: a,
+  "data-testid": i,
+  top: d,
+  middle: c,
+  bottom: g
 }) {
-  return /* @__PURE__ */ o(nn, { className: H.root, "data-testid": a, children: /* @__PURE__ */ o(
-    rn,
+  return /* @__PURE__ */ r(ln, { className: R.root, "data-testid": i, children: /* @__PURE__ */ r(
+    dn,
     {
       variant: "permanent",
       anchor: "left",
       open: e,
       widthOpen: n,
-      widthClosed: i,
+      widthClosed: a,
       offsetTop: t,
-      children: /* @__PURE__ */ c(T, { component: "nav", sx: {}, children: [
-        l && /* @__PURE__ */ c(T, { sx: { flexGrow: 1 }, children: [
-          l,
-          /* @__PURE__ */ o(Oe, { variant: "middle" })
+      children: /* @__PURE__ */ u(B, { component: "nav", sx: {}, children: [
+        d && /* @__PURE__ */ u(B, { sx: { flexGrow: 1 }, children: [
+          d,
+          /* @__PURE__ */ r(be, { variant: "middle" })
         ] }),
-        Array.isArray(p) ? /* @__PURE__ */ o(on, { links: p }) : p,
-        u && /* @__PURE__ */ c(T, { sx: {}, children: [
-          /* @__PURE__ */ o(Oe, { variant: "middle" }),
-          u
+        Array.isArray(c) ? /* @__PURE__ */ r(cn, { links: c }) : c,
+        g && /* @__PURE__ */ u(B, { sx: {}, children: [
+          /* @__PURE__ */ r(be, { variant: "middle" }),
+          g
         ] })
       ] })
     }
   ) });
 }
-function sn({ children: e, topBarHeight: t }) {
-  return /* @__PURE__ */ o(
-    T,
+function un({ children: e, topBarHeight: t }) {
+  return /* @__PURE__ */ r(
+    B,
     {
       sx: {
         overflow: "auto",
@@ -884,8 +883,8 @@ function sn({ children: e, topBarHeight: t }) {
         // scrollbarGutter: 'stable both-edges',
         flexGrow: 1
       },
-      children: /* @__PURE__ */ o(
-        De,
+      children: /* @__PURE__ */ r(
+        Fe,
         {
           component: "main",
           id: "main-content",
@@ -896,169 +895,178 @@ function sn({ children: e, topBarHeight: t }) {
     }
   );
 }
-function dn({
+function gn({
   children: e,
   initialTitleText: t,
   initialNavBarOpen: n,
-  pageContainerProps: i,
-  pageContentDataTestId: a,
-  topBarDataTestId: l,
-  navBarDataTestId: p,
-  navBarMiddle: u
+  pageContainerProps: a,
+  pageContentDataTestId: i,
+  topBarDataTestId: d,
+  navBarDataTestId: c,
+  navBarMiddle: g
 }) {
   const {
-    navBarOpen: d,
-    setNavBarOpen: s,
-    titleText: x,
-    setTitleText: w,
-    topBarHeight: h,
+    navBarOpen: s,
+    setNavBarOpen: l,
+    titleText: m,
+    setTitleText: h,
+    topBarHeight: p,
     navBarWidthOpen: C,
     navBarWidthClosed: b,
-    navBarTop: I
-  } = Ve();
-  return K(() => {
-    t !== void 0 && w(t);
-  }, [t, w]), K(() => {
-    console.log(n), n !== void 0 && s(n);
-  }, [n, s]), /* @__PURE__ */ c(T, { children: [
-    /* @__PURE__ */ o(lt, {}),
-    /* @__PURE__ */ o(tn, { titleText: x, "data-testid": l, height: h }),
-    /* @__PURE__ */ c(T, { sx: { display: "flex" }, children: [
-      /* @__PURE__ */ o(
-        an,
+    navBarTop: w
+  } = je();
+  return Z(() => {
+    t !== void 0 && h(t);
+  }, [t, h]), Z(() => {
+    console.log(n), n !== void 0 && l(n);
+  }, [n, l]), /* @__PURE__ */ u(B, { children: [
+    /* @__PURE__ */ r(ft, {}),
+    /* @__PURE__ */ r(sn, { titleText: m, "data-testid": d, height: p }),
+    /* @__PURE__ */ u(B, { sx: { display: "flex" }, children: [
+      /* @__PURE__ */ r(
+        pn,
         {
-          open: d,
-          top: I,
-          middle: u,
-          bottom: /* @__PURE__ */ o(T, { sx: { padding: 2 }, children: /* @__PURE__ */ o(ue, { sx: { padding: 2, textWrap: "initial" }, variant: "outlined", children: "Placeholder for standard user settings, domain selector etc. It should be at the very bottom, but WIP" }) }),
+          open: s,
+          top: w,
+          middle: g,
+          bottom: s ? /* @__PURE__ */ r(B, { sx: { padding: 2 }, children: /* @__PURE__ */ r(ee, { sx: { padding: 2, textWrap: "initial" }, variant: "outlined", children: "Placeholder for standard user settings, domain selector etc. It should be at the very bottom, but WIP" }) }) : /* @__PURE__ */ r(B, { sx: { paddingTop: 2 }, children: /* @__PURE__ */ r(ee, { sx: { padding: 2, textWrap: "initial" }, variant: "outlined", children: "WIP" }) }),
           widthOpen: C,
           widthClosed: b,
-          offsetTop: h,
-          "data-testid": p
+          offsetTop: p,
+          "data-testid": c
         }
       ),
-      /* @__PURE__ */ o(
-        sn,
-        v(r({
-          "data-testid": a,
-          topBarHeight: h
-        }, i), {
+      /* @__PURE__ */ r(
+        un,
+        x(o({
+          "data-testid": i,
+          topBarHeight: p
+        }, a), {
           children: e
         })
       )
     ] })
   ] });
 }
-function Un(e) {
-  return /* @__PURE__ */ o(Jt, { children: /* @__PURE__ */ o(dn, r({}, e)) });
+function Qn(e) {
+  return /* @__PURE__ */ r(on, { children: /* @__PURE__ */ r(gn, o({}, e)) });
 }
-const ln = {
+const hn = {
   autoHideDuration: 6e3,
   anchorOrigin: { vertical: "top", horizontal: "center" },
   // The default is false. If we prefer timer to continue when window loses
   // focus, change to true
   disableWindowBlurListener: !1
-}, cn = {
+}, fn = {
   shouldClose: (e, t) => t !== "clickaway"
-}, $e = {
+}, Ne = {
   message: "",
   severity: "info",
   variant: "standard",
   progressIndicator: void 0
   // Can use 'circular' or 'linear'
-}, Le = 100, ye = 2e3, pn = 2e3, un = (() => {
+}, $e = 100, ke = 2e3, vn = 2e3, xn = (() => {
   let e = 0;
   return () => (e += 1, e);
-})(), hn = {
+})(), mn = {
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px"
-}, gn = {}, fn = {}, qe = ce(null);
-function vn(l) {
-  var p = l, {
-    overrideState: e = gn,
-    overrideActions: t = fn,
-    shouldClose: n = cn.shouldClose,
-    children: i
-  } = p, a = me(p, [
+}, Cn = {}, wn = {}, Je = ue(null);
+function Tn(d) {
+  var c = d, {
+    overrideState: e = Cn,
+    overrideActions: t = wn,
+    shouldClose: n = fn.shouldClose,
+    children: a
+  } = c, i = Te(c, [
     "overrideState",
     "overrideActions",
     "shouldClose",
     "children"
   ]);
-  var R;
-  const [{ open: u }, d] = B({ open: !1 }), s = se([]), x = se(Date.now()), w = se(0), h = Y((g) => {
-    d({ open: g });
-  }, []), C = Y((g = {}) => {
-    w.current += 1, s.current.length >= Le && Date.now() - x.current >= ye && (x.current = Date.now(), console.error(
-      `SaladBarProvider: MAX_QUEUE_LENGTH (${Le}) hit ${w.current} times in last ${ye}ms)`
-    ), w.current = 0);
-    const f = r(v(r({}, $e), {
-      key: un()
-    }), g);
-    return s.current.push(f), s.current.length === 1 && d({ open: !0 }), f.key;
-  }, []), b = (g = "", f = {}) => C(r({ message: g, severity: "success" }, f)), I = (g = "", f = {}) => C(r({ message: g, severity: "info" }, f)), Z = (g = "", f = {}) => C(r({ message: g, severity: "warning" }, f)), z = (g = "", f = {}) => C(r({ message: g, severity: "error" }, f)), ee = (g) => {
-    const f = s.current.findIndex(($) => $.key === g);
-    if (f !== -1)
-      return f === 0 ? (d({ open: !1 }), s.current[0]) : s.current.splice(f, 1);
-  }, E = (g, f) => {
-    n(g, f) && d({ open: !1 });
+  var H;
+  const [{ open: g }, s] = y({ open: !1 }), l = le([]), m = le(Date.now()), h = le(0), p = J((f) => {
+    s({ open: f });
+  }, []), C = J((f = {}) => {
+    h.current += 1, l.current.length >= $e && Date.now() - m.current >= ke && (m.current = Date.now(), console.error(
+      `SaladBarProvider: MAX_QUEUE_LENGTH (${$e}) hit ${h.current} times in last ${ke}ms)`
+    ), h.current = 0);
+    const v = o(x(o({}, Ne), {
+      key: xn()
+    }), f);
+    return l.current.push(v), l.current.length === 1 && s({ open: !0 }), v.key;
+  }, []), b = (f = "", v = {}) => C(o({ message: f, severity: "success" }, v)), w = (f = "", v = {}) => C(o({ message: f, severity: "info" }, v)), A = (f = "", v = {}) => C(o({ message: f, severity: "warning" }, v)), I = (f = "", v = {}) => C(o({ message: f, severity: "error" }, v)), ne = (f) => {
+    const v = l.current.findIndex((k) => k.key === f);
+    if (v !== -1)
+      return v === 0 ? (s({ open: !1 }), l.current[0]) : l.current.splice(v, 1);
+  }, F = (f, v) => {
+    n(f, v) && s({ open: !1 });
   }, P = () => {
-  }, k = () => {
-    s.current.shift(), s.current.length > 0 && d({ open: !0 });
-  }, O = (R = s.current[0]) != null ? R : r({}, $e), G = {};
-  "autoHideDuration" in O && (G.autoHideDuration = O.autoHideDuration);
-  const U = r(r({}, ln), a), _ = r(r({
-    open: u,
-    setOpen: h,
+  }, _ = () => {
+    l.current.shift(), l.current.length > 0 && s({ open: !0 });
+  }, O = (H = l.current[0]) != null ? H : o({}, Ne), U = {};
+  "autoHideDuration" in O && (U.autoHideDuration = O.autoHideDuration);
+  const V = o(o({}, hn), i), M = o(o({
+    open: g,
+    setOpen: p,
     enqueueNotification: C,
     enqueueSuccessNotification: b,
-    enqueueInfoNotification: I,
-    enqueueWarningNotification: Z,
-    enqueueErrorNotification: z,
-    removeNotification: ee
+    enqueueInfoNotification: w,
+    enqueueWarningNotification: A,
+    enqueueErrorNotification: I,
+    removeNotification: ne
   }, e), t);
-  return /* @__PURE__ */ c(qe.Provider, { value: _, children: [
-    i,
-    /* @__PURE__ */ o(
-      ct,
-      v(r(r({}, U), G), {
-        open: u,
-        onClose: E,
+  return /* @__PURE__ */ u(Je.Provider, { value: M, children: [
+    a,
+    /* @__PURE__ */ r(
+      vt,
+      x(o(o({}, V), U), {
+        open: g,
+        onClose: F,
         TransitionProps: {
-          onExited: k,
+          onExited: _,
           onExit: P
         },
-        sx: { zIndex: pn },
-        children: /* @__PURE__ */ c("div", { children: [
-          /* @__PURE__ */ o(
-            pt,
+        sx: { zIndex: vn },
+        children: /* @__PURE__ */ u("div", { children: [
+          /* @__PURE__ */ r(
+            xt,
             {
-              onClose: (g) => E(g, "closeAlert"),
+              onClose: (f) => F(f, "closeAlert"),
               severity: O.severity,
               variant: "filled",
-              icon: O.progressIndicator === "circular" ? /* @__PURE__ */ o(Ee, { size: "1em" }) : void 0,
-              style: O.progressIndicator === "linear" ? hn : void 0,
+              icon: O.progressIndicator === "circular" ? /* @__PURE__ */ r(Pe, { size: "1em" }) : void 0,
+              style: O.progressIndicator === "linear" ? mn : void 0,
               children: O.message
             }
           ),
-          O.progressIndicator === "linear" && /* @__PURE__ */ o(ut, { color: "primary" })
+          O.progressIndicator === "linear" && /* @__PURE__ */ r(mt, { color: "primary" })
         ] })
       })
     )
   ] });
 }
-function Vn() {
-  const e = pe(qe);
+function Bn() {
+  const e = ge(Je);
   if (e === null)
-    throw new J("Error: Tried to useSaladBar outside of a <SaladBarProvider>");
+    throw new te("Error: Tried to useSaladBar outside of a <SaladBarProvider>");
   return e;
 }
-const Xn = ke(
-  (e = { autoHideDuration: 1 }, t = {}, n = {}) => ({ children: i }) => /* @__PURE__ */ o(vn, v(r({}, e), { overrideState: t, overrideActions: n, children: i }))
-), he = It("domainCode", "ag"), xn = () => {
-  const [e, t] = Ot(he);
-  return [e, t, () => t(Nt)];
-}, qn = () => Bt(he), Qn = () => bt(he), wn = {
+const jn = He(
+  (e = { autoHideDuration: 1 }, t = {}, n = {}) => ({ children: a }) => /* @__PURE__ */ r(Tn, x(o({}, e), { overrideState: t, overrideActions: n, children: a }))
+), Ze = "domainCode";
+var Le;
+const Ee = Ge(
+  (Le = localStorage.getItem(Ze)) != null ? Le : ""
+), he = Ge(
+  (e) => e(Ee),
+  (e, t, n) => {
+    t(Ee, n), localStorage.setItem(Ze, n);
+  }
+), bn = () => {
+  const [e, t] = Dt(he);
+  return [e, t, () => t("")];
+}, Kn = () => Nt(he), Jn = () => $t(he), On = {
   act: "ACT",
   nsw: "NSW",
   nt: "NT",
@@ -1070,84 +1078,243 @@ const Xn = ke(
   ag: "AG",
   fedmps: "Fedmps",
   "": ""
-}, Cn = (e) => {
+}, yn = (e) => {
   var t;
-  return e === null ? "N/A" : (t = wn[e]) != null ? t : "";
-}, jn = ({
+  return e === null ? "N/A" : (t = On[e]) != null ? t : "";
+}, Zn = ({
   isLoading: e,
   isOpen: t,
   onClose: n,
-  domainOptions: i
+  domainOptions: a,
+  applicationName: i,
+  handleLogout: d
 }) => {
-  const [a, l] = xn(), [p, u] = B(a);
-  return /* @__PURE__ */ c(
-    _t,
+  const [c, g] = bn(), [s, l] = y(c), { enqueueSuccessNotification: m } = Bn(), h = a.length === 0, p = !!c && !a.includes(c) && !!s && !a.includes(s), C = () => Q(void 0, null, function* () {
+    s ? (g(s), m(`Set domain to ${s}`), n()) : g("");
+  }), b = () => Q(void 0, null, function* () {
+    c && !h && !p ? (l(c), n()) : (!c || h || p) && d();
+  });
+  let w;
+  return h ? w = "Unable to retrieve your active organisations. Try logging in again." : p && (w = "You no longer have any roles in your chosen organisation. Please choose another."), /* @__PURE__ */ u(
+    Wt,
     {
       isOpen: t,
       dialogTitle: "Select an organisation",
       primaryButton: {
         text: "Confirm",
-        onClick: () => ae(void 0, null, function* () {
-          l(p), n();
-        })
+        onClick: C,
+        disabled: !s || h || p
+      },
+      secondaryButton: {
+        text: !s || h || p ? "Logout" : "Cancel",
+        onClick: b
       },
       onClose: n,
       children: [
-        /* @__PURE__ */ o("p", { children: "Select the default organisation that you want to use with the List Manager." }),
-        /* @__PURE__ */ o(
-          ht,
+        /* @__PURE__ */ u($, { marginBottom: 2, children: [
+          "Select the default organisation that you want to use with the ",
+          i,
+          "."
+        ] }),
+        /* @__PURE__ */ r(
+          Ct,
           {
             loading: e,
             multiple: !1,
             disableClearable: !1,
-            value: p,
-            onChange: (d, s) => u(s != null ? s : ""),
-            getOptionLabel: Cn,
-            options: i,
-            renderInput: (d) => /* @__PURE__ */ o(
-              gt,
-              v(r({}, d), {
+            value: s,
+            onChange: (A, I) => l(I != null ? I : ""),
+            getOptionLabel: yn,
+            options: a,
+            renderInput: (A) => /* @__PURE__ */ r(
+              wt,
+              x(o({}, A), {
                 variant: "filled",
                 label: "Select organisation",
-                InputProps: v(r({}, d.InputProps), {
-                  endAdornment: /* @__PURE__ */ c(M, { children: [
-                    e ? /* @__PURE__ */ o(Ee, { color: "inherit", size: 20 }) : null,
-                    d.InputProps.endAdornment
+                InputProps: x(o({}, A.InputProps), {
+                  endAdornment: /* @__PURE__ */ u(W, { children: [
+                    e ? /* @__PURE__ */ r(Pe, { color: "inherit", size: 20 }) : null,
+                    A.InputProps.endAdornment
                   ] })
                 })
               })
             )
           }
-        )
+        ),
+        w && /* @__PURE__ */ r(Tt, { error: !0, children: w })
       ]
     }
   );
-};
+}, eo = _e({
+  palette: {
+    primary: {
+      dark: "#00A651",
+      light: "#A3D39C",
+      main: "#007236",
+      contrastText: "#FFF"
+    },
+    warning: {
+      main: "#F5871F",
+      light: "#FCC589",
+      dark: "#A2590A",
+      contrastText: "#FFF"
+    },
+    secondary: {
+      main: "#662D91",
+      light: "#BD8CBF",
+      dark: "#440E62",
+      contrastText: "#FFF"
+    },
+    error: {
+      main: "#D43C95",
+      light: "#8F2064",
+      dark: "#F9CDE0",
+      contrastText: "#FFF"
+    },
+    info: {
+      main: "#00A88D",
+      light: "#ADDCCF",
+      dark: "#005243",
+      contrastText: "#FFF"
+    },
+    success: {
+      main: "#00A651",
+      light: "#A3D39C",
+      dark: "#007236",
+      contrastText: "#FFF"
+    }
+  },
+  typography: {
+    // I couldn't think of what to call this. It is an attempt to match
+    // https://www.figma.com/file/atonRPl2YD9A1NCntbDtKR/List-Filter-and-Product-Concept?node-id=1187%3A43730
+    // but not sure if line height should be changed
+    explainer: {
+      fontSize: "14px",
+      marginBlockStart: "1em"
+    }
+  },
+  navBar: {
+    backgroundColor: "#E8E8E8"
+  }
+}), to = _e({
+  palette: {
+    primary: {
+      main: "#007236",
+      dark: "#005221",
+      light: "#00A04E",
+      contrastText: "#FFFFFF"
+    },
+    secondary: {
+      main: "#662D91",
+      dark: "#440E62",
+      light: "#93268F",
+      contrastText: "#FFFFFF"
+    },
+    error: {
+      main: "#D32F2F",
+      dark: "#C62828",
+      light: "#EF5350"
+    },
+    info: {
+      main: "#0288D1",
+      dark: "#01579B",
+      light: "#03A9F4"
+    },
+    success: {
+      main: "#0288D1",
+      dark: "#01579B",
+      light: "#03A9F4"
+    }
+  },
+  components: {
+    MuiTextField: {
+      defaultProps: { color: "secondary" }
+    },
+    MuiToggleButtonGroup: {
+      defaultProps: { color: "secondary" }
+    },
+    MuiCheckbox: {
+      defaultProps: { color: "secondary" }
+    },
+    MuiSelect: {
+      defaultProps: { color: "secondary" }
+    },
+    MuiSwitch: {
+      defaultProps: { color: "secondary" }
+    },
+    MuiFormControl: {
+      defaultProps: { color: "secondary" }
+    },
+    MuiMenuItem: {
+      // Setting defaultProps for color on MenuItem does not work, so update manually
+      styleOverrides: {
+        root: ({ theme: e }) => ({
+          "&.Mui-selected": {
+            backgroundColor: de(
+              e.palette.secondary.main,
+              e.palette.action.selectedOpacity
+            ),
+            "&:hover": {
+              backgroundColor: de(
+                e.palette.secondary.main,
+                e.palette.action.selectedOpacity
+              )
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: de(
+                e.palette.secondary.main,
+                e.palette.action.focusOpacity
+              )
+            }
+          }
+        })
+      }
+    }
+  },
+  typography: {
+    // I couldn't think of what to call this. It is an attempt to match
+    // https://www.figma.com/file/atonRPl2YD9A1NCntbDtKR/List-Filter-and-Product-Concept?node-id=1187%3A43730
+    // but not sure if line height should be changed
+    explainer: {
+      fontSize: "14px",
+      marginBlockStart: "1em"
+    },
+    h3: {
+      fontSize: "1rem",
+      fontWeight: 700
+    }
+  },
+  navBar: {
+    backgroundColor: "#E8E8E8"
+  }
+});
 export {
-  _t as AgDialog,
-  Un as AppLayout,
-  Jt as AppLayoutProvider,
-  qe as Context,
-  J as ContextError,
-  jn as DomainCodeDialog,
-  Hn as ExampleComponent,
-  We as NAVBAR_WIDTH_CLOSED,
-  Me as NAVBAR_WIDTH_OPENED,
-  zn as NavBar,
-  Wn as NavBarDarkStyledList,
-  Fn as NavBarLightStyledList,
-  Et as NavBarProvider,
-  Gn as PageLayout,
-  vn as SaladBarProvider,
-  kt as buildNavBarState,
-  L as navBarClasses,
-  Ve as useAppLayout,
-  xn as useDomainCode,
-  qn as useDomainCodeValue,
-  Pt as useNavBar,
-  Vn as useSaladBar,
-  Qn as useSetDomainCode,
-  Mn as withNavBarProvider,
-  Xn as withSaladBarProvider
+  Wt as AgDialog,
+  Qn as AppLayout,
+  on as AppLayoutProvider,
+  Je as Context,
+  te as ContextError,
+  Zn as DomainCodeDialog,
+  Gn as ExampleComponent,
+  Ve as NAVBAR_WIDTH_CLOSED,
+  Ue as NAVBAR_WIDTH_OPENED,
+  qn as NavBar,
+  Vn as NavBarDarkStyledList,
+  Xn as NavBarLightStyledList,
+  Mt as NavBarProvider,
+  Yn as PageLayout,
+  Tn as SaladBarProvider,
+  Rt as buildNavBarState,
+  eo as fed21Theme,
+  to as internalAgSystemsTheme,
+  E as navBarClasses,
+  je as useAppLayout,
+  bn as useDomainCode,
+  Kn as useDomainCodeValue,
+  Ht as useNavBar,
+  Bn as useSaladBar,
+  Jn as useSetDomainCode,
+  Un as withNavBarProvider,
+  jn as withSaladBarProvider
 };
 //# sourceMappingURL=index.js.map