@australiangreens/ag-internal-components 0.0.88 → 0.0.89

package/dist/esm/index.js

@@ -37,25 +37,24 @@ var N = (e, t, n) => new Promise((i, r) => {
   d((n = n.apply(e, t)).next());
 });
 import { jsxs as p, Fragment as M, jsx as o } from "react/jsx-runtime";
-import { useState as E, createContext as Qe, useCallback as ne, useContext as Ye, createElement as Ce, useEffect as oe, useRef as he } from "react";
-import { Typography as P, Button as ie, Paper as Ke, Box as $, Drawer as ve, Dialog as Je, LinearProgress as Ze, DialogTitle as je, DialogContent as et, DialogActions as tt, Autocomplete as we, TextField as Ae, CircularProgress as be, Chip as _t, Tooltip as Mt, Stack as Rt, styled as Se, IconButton as Y, Container as nt, useTheme as ae, useMediaQuery as Ht, Collapse as Wt, Avatar as Fe, Fade as zt, Skeleton as Pe, Toolbar as Ut, Divider as Ne, CssBaseline as Gt, Snackbar as Vt, Alert as qt, FormHelperText as Xt } from "@mui/material";
+import { useState as E, createContext as Qe, useCallback as ne, useContext as Ye, useEffect as oe, createElement as Ce, useRef as he } from "react";
+import { Typography as P, Button as ie, Paper as Ke, Box as $, Drawer as ve, styled as we, IconButton as Y, Container as Je, useTheme as ae, useMediaQuery as _t, Collapse as Mt, Avatar as Fe, Fade as Rt, Skeleton as Pe, Toolbar as Ht, Divider as Ne, CssBaseline as Wt, Dialog as Ze, LinearProgress as je, DialogTitle as et, DialogContent as tt, DialogActions as nt, Autocomplete as Ae, TextField as be, CircularProgress as Se, Chip as zt, Tooltip as Ut, Stack as Gt, Snackbar as Vt, Alert as qt, FormHelperText as Xt } from "@mui/material";
 import Qt from "@mui/material/CssBaseline";
 import { styled as H, createTheme as ot, alpha as ge } from "@mui/material/styles";
 import { AgError as Yt } from "@australiangreens/ag-error";
 import { createHelper as X } from "souvlaki";
 import { BrowserRouter as Kt } from "react-router-dom";
 import it from "@mui/material/List";
-import { Cancel as Jt, ArrowDropDown as Zt, ArrowForward as rt, ArrowBack as at, ViewHeadline as jt } from "@mui/icons-material";
+import { ArrowForward as rt, ArrowBack as at, ViewHeadline as Jt, Cancel as Zt, ArrowDropDown as jt } from "@mui/icons-material";
 import { atom as R, useSetAtom as st, useAtomValue as Le, useAtom as V, getDefaultStore as en, Provider as lt } from "jotai";
-import "src/layouts";
+import { useHydrateAtoms as ct } from "jotai/utils";
 import tn from "autosuggest-highlight/match";
 import nn from "autosuggest-highlight/parse";
 import { useQuery as on, QueryClient as rn, QueryClientProvider as an } from "@tanstack/react-query";
-import { useAuth0 as ct } from "@auth0/auth0-react";
+import { useAuth0 as dt } from "@auth0/auth0-react";
 import { Buffer as sn } from "buffer";
 import ln from "@mui/material/Skeleton";
-import { useHydrateAtoms as dt } from "jotai/utils";
-function Io({ text: e }) {
+function $o({ text: e }) {
   const [t, n] = E(0);
   return /* @__PURE__ */ p(M, { children: [
     /* @__PURE__ */ o(P, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
@@ -158,9 +157,9 @@ const gt = Qe(null), hn = {}, gn = {}, fn = ({
   return e;
 }, Cn = (e = {}) => s({
   open: !0
-}, e), To = X(
+}, e), Io = X(
   (e = Cn(), t = {}) => ({ children: n }) => /* @__PURE__ */ o(fn, { overrideState: e, overrideActions: t, children: n })
-), Oo = X(() => ({ children: e }) => /* @__PURE__ */ o(Kt, { children: e })), _e = 7, Bo = H(it)(({ theme: e }) => ({
+), To = X(() => ({ children: e }) => /* @__PURE__ */ o(Kt, { children: e })), _e = 7, Oo = H(it)(({ theme: e }) => ({
   backgroundColor: "black",
   color: "white",
   "& .MuiListItem-root": {
@@ -198,7 +197,7 @@ const gt = Qe(null), hn = {}, gn = {}, fn = ({
     // '&.Mui-selected.Mui-focusVisible:hover': {
     // },
   }
-})), Me = 7, Eo = H(it)(({ theme: e }) => ({
+})), Me = 7, Bo = H(it)(({ theme: e }) => ({
   backgroundColor: "#e8e8e8",
   color: "inherit",
   "& .MuiListItem-root": {
@@ -237,7 +236,7 @@ const gt = Qe(null), hn = {}, gn = {}, fn = ({
     // },
   }
 }));
-function Fo({
+function Eo({
   "data-testid": e,
   children: t
 }) {
@@ -256,591 +255,212 @@ function Fo({
     )
   ] });
 }
-const ft = ({
-  isOpen: e,
-  dialogTitle: t,
-  children: n,
-  maxWidth: i,
-  primaryButton: r,
-  secondaryButton: a,
-  onClose: c,
-  sx: d,
-  "data-testid": l,
-  disableCloseOnBackdropOrEscape: u = !1,
-  isLoading: v = !1
-}) => {
-  var g, D;
-  const [C, w] = E(!1);
+const xn = 24, vn = 64, G = "TopBar", B = {
+  topStripe: `${G}-topStripe`,
+  titleBar: `${G}-titleBar`,
+  titleSlider: `${G}-titleSlider`,
+  titleText: `${G}-titleText`,
+  leftPanelButton: `${G}-leftPanelButton`,
+  rightPanelButton: `${G}-leftPanelButton`
+}, wn = we("div", {
+  shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
+  name: G
+})(({ theme: e, leftPanel: t, rightPanel: n }) => {
+  var i, r;
+  return {
+    width: "100%",
+    [`& .${B.topStripe}`]: {
+      width: "100%",
+      height: `${xn}px`,
+      backgroundColor: e.palette.primary.main
+    },
+    [`& .${B.titleBar}`]: {
+      backgroundColor: e.palette.primary.light,
+      height: `${vn}px`,
+      padding: e.spacing(0, 3),
+      width: "100%"
+    },
+    [`& .${B.titleSlider}`]: s(s({
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      color: "white",
+      transition: e.transitions.create("margin", {
+        easing: e.transitions.easing.sharp,
+        duration: e.transitions.duration.leavingScreen
+      }),
+      [`& .${B.leftPanelButton}`]: {
+        marginRight: e.spacing(2),
+        flexGrow: 0
+      },
+      [`& .${B.titleText}`]: {
+        flexGrow: 1
+      },
+      [`& .${B.rightPanelButton}`]: {
+        flexGrow: 0
+      }
+    }, (t == null ? void 0 : t.open) && {
+      transition: e.transitions.create("margin", {
+        easing: e.transitions.easing.easeOut,
+        duration: e.transitions.duration.enteringScreen
+      }),
+      marginLeft: `${(i = t == null ? void 0 : t.width) != null ? i : 0}px`
+    }), (n == null ? void 0 : n.open) && {
+      transition: e.transitions.create("margin", {
+        easing: e.transitions.easing.easeOut,
+        duration: e.transitions.duration.enteringScreen
+      }),
+      marginRight: `${(r = n == null ? void 0 : n.width) != null ? r : 0}px`
+    })
+  };
+});
+function An({
+  titleText: e = "",
+  leftPanel: t,
+  rightPanel: n,
+  "data-testid": i
+}) {
+  return /* @__PURE__ */ p(wn, { leftPanel: t, rightPanel: n, "data-testid": i, children: [
+    /* @__PURE__ */ o("div", { className: B.topStripe }),
+    /* @__PURE__ */ o("div", { className: B.titleBar, children: /* @__PURE__ */ p($, { className: B.titleSlider, children: [
+      t !== void 0 && !t.open && t.showOpenArrow && /* @__PURE__ */ p(
+        Y,
+        {
+          className: B.leftPanelButton,
+          color: "inherit",
+          "aria-label": "Open left side panel",
+          onClick: t == null ? void 0 : t.onOpen,
+          edge: "start",
+          size: "large",
+          children: [
+            " ",
+            /* @__PURE__ */ o(rt, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(P, { className: B.titleText, variant: "h6", noWrap: !0, children: e }),
+      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ p(
+        Y,
+        {
+          className: B.rightPanelButton,
+          color: "inherit",
+          "aria-label": "Open right side panel",
+          onClick: n == null ? void 0 : n.onOpen,
+          edge: "end",
+          size: "large",
+          children: [
+            " ",
+            /* @__PURE__ */ o(at, {})
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+const ft = 400, bn = we(ve, {
+  shouldForwardProp: (e) => (
+    // Note we do want anchor to be forwarded to the Drawer component
+    ![
+      "width",
+      "debug",
+      "debugOpacity",
+      "navBarOpen",
+      "navBarWidthOpen",
+      "navBarWidthClosed"
+    ].includes(e)
+  ),
+  name: "SidePanelDrawer"
+})(
+  ({ width: e, debugOpacity: t = !1, anchor: n, navBarOpen: i, navBarWidthOpen: r, navBarWidthClosed: a }) => ({
+    width: e,
+    "& .MuiDrawer-paper": s(s({
+      position: "absolute",
+      width: e,
+      boxSizing: "border-box",
+      border: "unset",
+      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" && s({
+      marginLeft: `${a}px`
+    }, i && {
+      marginLeft: `${r}px`
+    }))
+  })
+), Sn = we($, {
+  shouldForwardProp: (e) => !["anchor"].includes(e)
+})(({ theme: e, anchor: t }) => S(s({
+  display: "flex",
+  alignItems: "center",
+  padding: e.spacing(2)
+}, e.mixins.toolbar), {
+  justifyContent: t === "left" ? "space-between" : "flex-start",
+  backgroundColor: e.palette.primary.light,
+  height: "88px",
+  "&,*": {
+    color: "white"
+  },
+  " .MuiTypography-root": {
+    fontSize: "22px"
+  },
+  " .MuiButtonBase-root": {
+    marginRight: t === "right" ? e.spacing(2) : 0
+  }
+}));
+function Re({
+  children: e,
+  anchor: t = "left",
+  open: n,
+  onClose: i = () => {
+  },
+  titleText: r = "",
+  width: a = ft,
+  showCloseArrow: c = !0,
+  debugOpacity: d = !1,
+  headerBoxProps: l = {},
+  onOpened: u,
+  onClosed: v,
+  "data-testid": C,
+  navBarOpen: w = !1,
+  navBarWidthOpen: g = 0,
+  navBarWidthClosed: D = 0
+}) {
   return /* @__PURE__ */ p(
-    Je,
+    bn,
     {
-      open: e,
-      onClose: (A, k) => N(void 0, null, function* () {
-        u && (k === "backdropClick" || k === "escapeKeyDown") || C || (a != null && a.onClick ? yield a.onClick() : c());
-      }),
-      fullWidth: !0,
-      maxWidth: i != null ? i : "xs",
-      "data-testid": l,
-      sx: d,
+      SlideProps: {
+        onEntered: () => u == null ? void 0 : u(),
+        onExited: () => v == null ? void 0 : v()
+      },
+      variant: "persistent",
+      anchor: t,
+      open: n,
+      width: a,
+      debugOpacity: d,
+      "data-testid": C,
+      navBarOpen: w,
+      navBarWidthOpen: g,
+      navBarWidthClosed: D,
       children: [
-        v && /* @__PURE__ */ o(Ze, { sx: { height: "4px", marginBottom: "-4px" } }),
-        /* @__PURE__ */ o(je, { children: t }),
-        /* @__PURE__ */ o(et, { sx: { "& > :last-child": { marginBottom: 0 } }, children: n }),
-        /* @__PURE__ */ p(tt, { children: [
-          /* @__PURE__ */ o(
-            ie,
-            {
-              onClick: (g = a == null ? void 0 : a.onClick) != null ? g : c,
-              "data-testid": a == null ? void 0 : a.testId,
-              disabled: (a == null ? void 0 : a.disabled) || C,
-              color: a == null ? void 0 : a.buttonColor,
-              children: (D = a == null ? void 0 : a.text) != null ? D : "Cancel"
-            }
-          ),
-          r && /* @__PURE__ */ o(
-            ie,
-            {
-              onClick: () => N(void 0, null, function* () {
-                var A;
-                w(!0), yield (A = r.onClick) == null ? void 0 : A.call(r), w(!1);
-              }),
-              "data-testid": r.testId,
-              disabled: r.disabled || C,
-              color: r == null ? void 0 : r.buttonColor,
-              children: r.text
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}, mt = ({
-  minLength: e,
-  preLoadedOptions: t,
-  lookup: n,
-  label: i,
-  inputValue: r
-}) => on({
-  queryFn: () => e && r.length < e ? t != null ? t : [] : t ? t.filter(
-    (a) => a.label.toLowerCase().includes(r.toLowerCase())
-  ) : n(r),
-  queryKey: ["autocomplete", i, r]
-});
-function Po({
-  lookup: e = () => N(this, null, function* () {
-  }),
-  enableHighlighting: t = !0,
-  onChange: n,
-  minLength: i = 0,
-  label: r,
-  value: a,
-  "data-testid": c,
-  sx: d,
-  boxSx: l,
-  textFieldColor: u,
-  textFieldVariant: v = "filled",
-  loadingText: C = "Loading...",
-  noOptionsText: w = "No options",
-  popupIcon: g = /* @__PURE__ */ o(Zt, {}),
-  error: D = !1,
-  helperText: A = "",
-  preLoadedOptions: k = void 0,
-  disablePortal: I = !1
-}) {
-  const [T, b] = E(""), y = (h, f) => {
-    const F = a.filter((m) => m.id !== f);
-    n(F, "delete", h);
-  }, { data: L, isLoading: O } = mt({
-    inputValue: T,
-    label: r,
-    lookup: e,
-    minLength: i,
-    preLoadedOptions: k
-  }), W = T.length >= i;
-  return /* @__PURE__ */ p("div", { "data-testid": c, children: [
-    /* @__PURE__ */ o(
-      we,
-      {
-        sx: d,
-        "data-testid": c ? `${c}:Autocomplete` : void 0,
-        disablePortal: I,
-        multiple: !0,
-        getOptionLabel: (h) => typeof h == "string" ? h : h.label,
-        loading: W ? O : !1,
-        options: [...a, ...L != null ? L : []],
-        filterSelectedOptions: !0,
-        includeInputInList: !0,
-        value: a,
-        onChange: (h, f, F) => {
-          n(f, F, h);
-        },
-        onInputChange: (h, f) => b(f),
-        noOptionsText: W ? w : "Start typing to search",
-        loadingText: C,
-        popupIcon: g,
-        renderInput: (h) => /* @__PURE__ */ o(
-          Ae,
-          S(s({}, h), {
-            label: r,
-            fullWidth: !0,
-            variant: v,
-            error: D,
-            helperText: A,
-            InputProps: S(s({}, h.InputProps), {
-              endAdornment: /* @__PURE__ */ p(M, { children: [
-                O ? /* @__PURE__ */ o(be, { color: "inherit", size: 20 }) : null,
-                h.InputProps.endAdornment
-              ] })
-            }),
-            "data-testid": c ? `${c}:Autocomplete:TextField` : void 0,
-            onKeyDown: (f) => {
-              (f.key === "Backspace" || f.key === "Delete") && f.stopPropagation();
-            },
-            color: u
-          })
-        ),
-        renderTags: () => null,
-        isOptionEqualToValue: (h, f) => h.id === f.id,
-        renderOption: (h, f, F) => {
-          if (t) {
-            const m = tn(f.label, F.inputValue, {
-              insideWords: !0,
-              findAllOccurrences: !0
-            }), x = nn(f.label, m);
-            return /* @__PURE__ */ Ce(
-              "li",
-              S(s({}, h), {
-                key: f.id,
-                "data-testid": c ? `${c}:Autocomplete:option(${f.id.toString()})` : void 0
-              }),
-              /* @__PURE__ */ o("div", { children: x.map((_, se) => /* @__PURE__ */ o(
-                "span",
-                {
-                  style: {
-                    fontWeight: _.highlight ? 700 : 400
-                  },
-                  children: _.text
-                },
-                se
-              )) })
-            );
-          } else
-            return /* @__PURE__ */ Ce(
-              "li",
-              S(s({}, h), {
-                key: f.id,
-                "data-testid": c ? `${c}:option(${f.id.toString()})` : void 0
-              }),
-              f.label
-            );
-        }
-      }
-    ),
-    a.length > 0 && /* @__PURE__ */ o($, { sx: l, children: a.map((h) => /* @__PURE__ */ o(
-      _t,
-      {
-        sx: {
-          marginTop: 1,
-          marginRight: 1,
-          height: "auto"
-        },
-        label: /* @__PURE__ */ o(
-          Mt,
-          {
-            title: h.tooltipContent || "",
-            placement: "bottom-start",
-            PopperProps: {
-              modifiers: [
-                {
-                  name: "offset",
-                  options: {
-                    offset: [115, -15]
-                  }
-                }
-              ]
-            },
-            children: /* @__PURE__ */ o(P, { style: { whiteSpace: "normal" }, children: h.chipLabel ? h.chipLabel : h.label })
-          }
-        ),
-        "data-testid": c ? `${c}:Chip(${h.id.toString()})` : void 0,
-        onDelete: (f) => y(f, h.id),
-        deleteIcon: /* @__PURE__ */ o(
-          Jt,
-          {
-            "data-testid": c ? `${c}:Chip(${h.id.toString()}):deleteIcon` : void 0
-          }
-        )
-      },
-      h.id
-    )) })
-  ] });
-}
-const No = ({
-  lookup: e = () => N(void 0, null, function* () {
-  }),
-  onChange: t,
-  label: n,
-  value: i,
-  sx: r,
-  textFieldColor: a,
-  textFieldVariant: c = "filled",
-  "data-testid": d,
-  noOptionsText: l = "No options",
-  minLength: u = 3,
-  disablePortal: v = !1,
-  preLoadedOptions: C,
-  helperText: w = "",
-  disabled: g
-}) => {
-  const [D, A] = E(""), { data: k, isLoading: I } = mt({
-    inputValue: D,
-    label: n,
-    lookup: e,
-    minLength: u != null ? u : 0,
-    preLoadedOptions: C
-  }), T = D.length >= u;
-  return /* @__PURE__ */ o("div", { "data-testid": d, children: /* @__PURE__ */ o(Rt, { direction: "row", spacing: 1, children: /* @__PURE__ */ o(
-    we,
-    {
-      sx: r,
-      "data-testid": d ? `${d}:Autocomplete` : void 0,
-      loading: T ? I : !1,
-      options: k != null ? k : [],
-      onChange: (b, y) => {
-        t(b, y);
-      },
-      disablePortal: v,
-      filterOptions: (b) => b,
-      value: i,
-      noOptionsText: T ? l : "Start typing to search",
-      getOptionLabel: (b) => b.label,
-      renderInput: (b) => /* @__PURE__ */ o(
-        Ae,
-        S(s({
-          "data-testid": d ? `${d}:Autocomplete:TextField` : void 0
-        }, b), {
-          variant: c,
-          label: n,
-          color: a,
-          helperText: w
-        })
-      ),
-      isOptionEqualToValue: (b, y) => b.id === y.id,
-      onInputChange: (b, y) => {
-        A(y);
-      },
-      renderOption: (b, y) => /* @__PURE__ */ Ce(
-        "li",
-        S(s({}, b), {
-          key: y.id,
-          "data-testid": d ? `${d}:Autocomplete:option(${y.id.toString()})` : void 0
-        }),
-        y.label
-      ),
-      disabled: g
-    }
-  ) }) });
-}, xn = (e) => {
-  if (!e)
-    return -1;
-  try {
-    const n = e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"), i = decodeURIComponent(
-      sn.from(n, "base64").toString("utf8").split("").map(function(a) {
-        return "%" + ("00" + a.charCodeAt(0).toString(16)).slice(-2);
-      }).join("")
-    ), r = JSON.parse(i);
-    return r != null && r.exp ? r.exp : -1;
-  } catch (t) {
-    return -1;
-  }
-}, Lo = ({
-  open: e = !1,
-  closeHandler: t,
-  setAuth0ExpiryTime: n
-}) => {
-  const { logout: i, getAccessTokenSilently: r } = ct(), [a, c] = E(0), d = () => N(void 0, null, function* () {
-    i({ logoutParams: { returnTo: `${window.location.origin}` } });
-  }), l = () => N(void 0, null, function* () {
-    c(a + 1), t();
-  });
-  return oe(() => {
-    (() => N(void 0, null, function* () {
-      if (a > 0) {
-        const w = yield r({ cacheMode: "off" }), g = xn(w) * 1e3;
-        n(g);
-      }
-    }))();
-  }, [a, r, n]), /* @__PURE__ */ o(
-    ft,
-    {
-      isOpen: e,
-      primaryButton: {
-        text: "Continue",
-        onClick: l,
-        disabled: !1,
-        testId: "PreferencesDialog",
-        buttonColor: "secondary"
-      },
-      secondaryButton: {
-        text: "Log out",
-        onClick: d,
-        disabled: !1,
-        testId: "PreferencesDialog",
-        buttonColor: "secondary"
-      },
-      onClose: t,
-      dialogTitle: "Session expiry",
-      disableCloseOnBackdropOrEscape: !0,
-      children: /* @__PURE__ */ o("p", { style: { marginBottom: 0 }, children: "Your session is about to time out due to inactivity. Do you want to continue?" })
-    }
-  );
-};
-function vn(e) {
-  return "error" in e;
-}
-function wn(e) {
-  return e.error === "access_denied";
-}
-function An(e) {
-  var i;
-  const t = e.error, n = (i = e == null ? void 0 : e.error_description) != null ? i : "";
-  return t === "access_denied" && n.startsWith("You do not have the required authorization");
-}
-function bn(e) {
-  var i;
-  const t = e.error, n = (i = e == null ? void 0 : e.error_description) != null ? i : "";
-  return t === "access_denied" && n.startsWith("User did not authorize the request");
-}
-function _o({
-  children: e,
-  appName: t = "the app"
-}) {
-  const { isAuthenticated: n, isLoading: i, error: r, loginWithRedirect: a, logout: c } = ct();
-  if (oe(() => {
-    if (i || n || r)
-      return;
-    const d = {
-      appState: {
-        returnTo: `${window.location.pathname}${window.location.search}`
-      }
-    };
-    a(d);
-  }, [i, n, r, a]), r && vn(r)) {
-    let d = "Auth error", l = "An unknown Auth0 error occurred.";
-    return An(r) ? (d = "Unauthorised", l = `You are not authorised to access ${t}.`) : bn(r) ? (d = "App not authorised", l = `You have not authorised ${t} to access your user profile. This is necessary to use ${t}.`) : wn(r) && (d = "Unauthorised", l = "Authorisation with auth0 failed for an unknown reason."), /* @__PURE__ */ p(Je, { open: !0, children: [
-      /* @__PURE__ */ o(je, { children: d }),
-      /* @__PURE__ */ o(et, { children: /* @__PURE__ */ o(P, { children: l }) }),
-      /* @__PURE__ */ o(tt, { children: /* @__PURE__ */ o(ie, { onClick: () => c({ logoutParams: { returnTo: window.location.origin } }), children: "Logout" }) })
-    ] });
-  }
-  return n ? /* @__PURE__ */ o(M, { children: e }) : /* @__PURE__ */ o(ln, { variant: "rectangular", animation: "pulse", height: "100vh", width: "100vw" });
-}
-const Sn = 24, kn = 64, G = "TopBar", B = {
-  topStripe: `${G}-topStripe`,
-  titleBar: `${G}-titleBar`,
-  titleSlider: `${G}-titleSlider`,
-  titleText: `${G}-titleText`,
-  leftPanelButton: `${G}-leftPanelButton`,
-  rightPanelButton: `${G}-leftPanelButton`
-}, Dn = Se("div", {
-  shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
-  name: G
-})(({ theme: e, leftPanel: t, rightPanel: n }) => {
-  var i, r;
-  return {
-    width: "100%",
-    [`& .${B.topStripe}`]: {
-      width: "100%",
-      height: `${Sn}px`,
-      backgroundColor: e.palette.primary.main
-    },
-    [`& .${B.titleBar}`]: {
-      backgroundColor: e.palette.primary.light,
-      height: `${kn}px`,
-      padding: e.spacing(0, 3),
-      width: "100%"
-    },
-    [`& .${B.titleSlider}`]: s(s({
-      height: "100%",
-      display: "flex",
-      alignItems: "center",
-      color: "white",
-      transition: e.transitions.create("margin", {
-        easing: e.transitions.easing.sharp,
-        duration: e.transitions.duration.leavingScreen
-      }),
-      [`& .${B.leftPanelButton}`]: {
-        marginRight: e.spacing(2),
-        flexGrow: 0
-      },
-      [`& .${B.titleText}`]: {
-        flexGrow: 1
-      },
-      [`& .${B.rightPanelButton}`]: {
-        flexGrow: 0
-      }
-    }, (t == null ? void 0 : t.open) && {
-      transition: e.transitions.create("margin", {
-        easing: e.transitions.easing.easeOut,
-        duration: e.transitions.duration.enteringScreen
-      }),
-      marginLeft: `${(i = t == null ? void 0 : t.width) != null ? i : 0}px`
-    }), (n == null ? void 0 : n.open) && {
-      transition: e.transitions.create("margin", {
-        easing: e.transitions.easing.easeOut,
-        duration: e.transitions.duration.enteringScreen
-      }),
-      marginRight: `${(r = n == null ? void 0 : n.width) != null ? r : 0}px`
-    })
-  };
-});
-function yn({
-  titleText: e = "",
-  leftPanel: t,
-  rightPanel: n,
-  "data-testid": i
-}) {
-  return /* @__PURE__ */ p(Dn, { leftPanel: t, rightPanel: n, "data-testid": i, children: [
-    /* @__PURE__ */ o("div", { className: B.topStripe }),
-    /* @__PURE__ */ o("div", { className: B.titleBar, children: /* @__PURE__ */ p($, { className: B.titleSlider, children: [
-      t !== void 0 && !t.open && t.showOpenArrow && /* @__PURE__ */ p(
-        Y,
-        {
-          className: B.leftPanelButton,
-          color: "inherit",
-          "aria-label": "Open left side panel",
-          onClick: t == null ? void 0 : t.onOpen,
-          edge: "start",
-          size: "large",
-          children: [
-            " ",
-            /* @__PURE__ */ o(rt, {})
-          ]
-        }
-      ),
-      /* @__PURE__ */ o(P, { className: B.titleText, variant: "h6", noWrap: !0, children: e }),
-      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ p(
-        Y,
-        {
-          className: B.rightPanelButton,
-          color: "inherit",
-          "aria-label": "Open right side panel",
-          onClick: n == null ? void 0 : n.onOpen,
-          edge: "end",
-          size: "large",
-          children: [
-            " ",
-            /* @__PURE__ */ o(at, {})
-          ]
-        }
-      )
-    ] }) })
-  ] });
-}
-const Ct = 400, $n = Se(ve, {
-  shouldForwardProp: (e) => (
-    // Note we do want anchor to be forwarded to the Drawer component
-    ![
-      "width",
-      "debug",
-      "debugOpacity",
-      "navBarOpen",
-      "navBarWidthOpen",
-      "navBarWidthClosed"
-    ].includes(e)
-  ),
-  name: "SidePanelDrawer"
-})(
-  ({ width: e, debugOpacity: t = !1, anchor: n, navBarOpen: i, navBarWidthOpen: r, navBarWidthClosed: a }) => ({
-    width: e,
-    "& .MuiDrawer-paper": s(s({
-      position: "absolute",
-      width: e,
-      boxSizing: "border-box",
-      border: "unset",
-      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" && s({
-      marginLeft: `${a}px`
-    }, i && {
-      marginLeft: `${r}px`
-    }))
-  })
-), In = Se($, {
-  shouldForwardProp: (e) => !["anchor"].includes(e)
-})(({ theme: e, anchor: t }) => S(s({
-  display: "flex",
-  alignItems: "center",
-  padding: e.spacing(2)
-}, e.mixins.toolbar), {
-  justifyContent: t === "left" ? "space-between" : "flex-start",
-  backgroundColor: e.palette.primary.light,
-  height: "88px",
-  "&,*": {
-    color: "white"
-  },
-  " .MuiTypography-root": {
-    fontSize: "22px"
-  },
-  " .MuiButtonBase-root": {
-    marginRight: t === "right" ? e.spacing(2) : 0
-  }
-}));
-function Re({
-  children: e,
-  anchor: t = "left",
-  open: n,
-  onClose: i = () => {
-  },
-  titleText: r = "",
-  width: a = Ct,
-  showCloseArrow: c = !0,
-  debugOpacity: d = !1,
-  headerBoxProps: l = {},
-  onOpened: u,
-  onClosed: v,
-  "data-testid": C,
-  navBarOpen: w = !1,
-  navBarWidthOpen: g = 0,
-  navBarWidthClosed: D = 0
-}) {
-  return /* @__PURE__ */ p(
-    $n,
-    {
-      SlideProps: {
-        onEntered: () => u == null ? void 0 : u(),
-        onExited: () => v == null ? void 0 : v()
-      },
-      variant: "persistent",
-      anchor: t,
-      open: n,
-      width: a,
-      debugOpacity: d,
-      "data-testid": C,
-      navBarOpen: w,
-      navBarWidthOpen: g,
-      navBarWidthClosed: D,
-      children: [
-        /* @__PURE__ */ o(In, S(s({ anchor: t }, l), { children: t === "left" ? /* @__PURE__ */ p(M, { children: [
-          /* @__PURE__ */ o(P, { variant: "h6", color: "inherit", component: "div", children: r }),
-          c && /* @__PURE__ */ p(Y, { onClick: i, size: "large", "aria-label": "Close left side panel", children: [
-            /* @__PURE__ */ o(at, { "data-testid": "arrowbackicon" }),
-            " "
-          ] })
-        ] }) : /* @__PURE__ */ p(M, { children: [
-          c && /* @__PURE__ */ p(Y, { onClick: i, size: "large", "aria-label": "Close right side panel", children: [
-            /* @__PURE__ */ o(rt, {}),
-            " "
-          ] }),
-          /* @__PURE__ */ o(P, { variant: "h6", color: "inherit", component: "div", children: r })
-        ] }) })),
-        e
+        /* @__PURE__ */ o(Sn, S(s({ anchor: t }, l), { children: t === "left" ? /* @__PURE__ */ p(M, { children: [
+          /* @__PURE__ */ o(P, { variant: "h6", color: "inherit", component: "div", children: r }),
+          c && /* @__PURE__ */ p(Y, { onClick: i, size: "large", "aria-label": "Close left side panel", children: [
+            /* @__PURE__ */ o(at, { "data-testid": "arrowbackicon" }),
+            " "
+          ] })
+        ] }) : /* @__PURE__ */ p(M, { children: [
+          c && /* @__PURE__ */ p(Y, { onClick: i, size: "large", "aria-label": "Close right side panel", children: [
+            /* @__PURE__ */ o(rt, {}),
+            " "
+          ] }),
+          /* @__PURE__ */ o(P, { variant: "h6", color: "inherit", component: "div", children: r })
+        ] }) })),
+        e
       ]
     }
   );
 }
-const Tn = H($, {
+const kn = H($, {
   shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
   name: "PanelAwareMargins"
 })(({ theme: e, leftPanel: t, rightPanel: n }) => {
@@ -863,7 +483,7 @@ const Tn = H($, {
     }),
     marginRight: `${(r = n == null ? void 0 : n.width) != null ? r : 0}px`
   });
-}), On = H(nt, {
+}), Dn = H(Je, {
   name: "PageContainer"
 })(({ theme: e }) => ({
   // Horizontal padding comes from the Container's gutter
@@ -873,7 +493,7 @@ const Tn = H($, {
 })), fe = !1, me = !1, ee = {
   titleText: "",
   flavour: "push",
-  width: Ct,
+  width: ft,
   arrowButtons: "both",
   startOpen: !1,
   open: void 0,
@@ -883,7 +503,7 @@ const Tn = H($, {
   onClosed: void 0,
   dataTestId: void 0
 };
-function Mo({
+function Fo({
   children: e,
   titleText: t = "",
   leftPanel: n,
@@ -972,7 +592,7 @@ function Mo({
       }
     ),
     /* @__PURE__ */ o(
-      yn,
+      An,
       s(s({
         titleText: t,
         "data-testid": l
@@ -993,7 +613,7 @@ function Mo({
       } : {})
     ),
     /* @__PURE__ */ o(
-      Tn,
+      kn,
       S(s(s({}, h === "push" ? {
         leftPanel: {
           open: de,
@@ -1005,16 +625,16 @@ function Mo({
           width: ce
         }
       } : {}), {
-        children: /* @__PURE__ */ o(On, S(s({ "data-testid": d }, c), { children: e }))
+        children: /* @__PURE__ */ o(Dn, S(s({ "data-testid": d }, c), { children: e }))
       })
     )
   ] });
 }
-const xt = () => {
+const mt = () => {
   const e = ae();
-  return Ht(e.breakpoints.down("sm"));
-}, Bn = 64, En = 72, Fn = 256, K = R(!0), vt = R(Fn), wt = R(En), xe = R(""), Pn = R(void 0), At = R(Bn), bt = R(void 0);
-function Nn({ links: e }) {
+  return _t(e.breakpoints.down("sm"));
+}, yn = 64, $n = 72, In = 256, K = R(!0), Ct = R(In), xt = R($n), xe = R(""), Tn = R(void 0), vt = R(yn), wt = R(void 0);
+function On({ links: e }) {
   return /* @__PURE__ */ o("div", { children: "LinksMenu not implemented yet" });
 }
 const te = "Navbar", Q = {
@@ -1025,7 +645,7 @@ const te = "Navbar", Q = {
   // userInfoHolder: `${PREFIX}-userInfoHolder`,
   // settings: `${PREFIX}-settings`,
   // pieChartIcon: `${PREFIX}-pieChartIcon`,
-}, Ln = H($, { name: "NavBar" })(({ theme: e }) => ({
+}, Bn = H($, { name: "NavBar" })(({ theme: e }) => ({
   [`&.${Q.root}`]: {
     display: "flex"
   },
@@ -1047,10 +667,10 @@ const te = "Navbar", Q = {
 })), re = (e, t, n) => e.transitions.create(t, {
   easing: e.transitions.easing.sharp,
   duration: n === "leaving" ? e.transitions.duration.leavingScreen : e.transitions.duration.enteringScreen
-}), _n = (e) => {
+}), En = (e) => {
   const t = ae();
   return /* @__PURE__ */ o(
-    Wt,
+    Mt,
     s({
       easing: t.transitions.easing.sharp,
       timeout: {
@@ -1059,7 +679,7 @@ const te = "Navbar", Q = {
       }
     }, e)
   );
-}, St = (e) => {
+}, At = (e) => {
   var t, n;
   return {
     overflowX: "hidden",
@@ -1070,10 +690,10 @@ const te = "Navbar", Q = {
 }, He = (e, t) => s({
   width: t,
   transition: re(e, "width", "entering")
-}, St(e)), We = (e, t) => s({
+}, At(e)), We = (e, t) => s({
   width: t,
   transition: re(e, "width", "leaving")
-}, St(e)), Mn = H(ve, {
+}, At(e)), Fn = H(ve, {
   shouldForwardProp: (e) => !["widthOpen", "widthClosed", "isSmallScreen"].includes(e)
 })(({ theme: e, open: t, widthOpen: n, widthClosed: i, isSmallScreen: r }) => s(s({
   flexShrink: 0,
@@ -1088,7 +708,7 @@ const te = "Navbar", Q = {
   backgroundColor: "",
   "& .MuiDrawer-paper": We(e, r ? n : i)
 })));
-function Rn(e) {
+function Pn(e) {
   let t = 0;
   for (let n = 0, i = e.length; n < i; n++) {
     const r = e.charCodeAt(n);
@@ -1096,222 +716,601 @@ function Rn(e) {
   }
   return t;
 }
-const ze = ["#A62A21", "#7e3794", "#0B51C1", "#3A6024", "#A81563", "#B3003C"], Hn = (e) => e.split(/\s/).map((t) => t.substring(0, 1).toUpperCase()).filter((t) => !!t).slice(0, 2).join("").toUpperCase();
-function Wn({ user: e, domainCode: t, open: n }) {
-  const i = ae();
+const ze = ["#A62A21", "#7e3794", "#0B51C1", "#3A6024", "#A81563", "#B3003C"], Nn = (e) => e.split(/\s/).map((t) => t.substring(0, 1).toUpperCase()).filter((t) => !!t).slice(0, 2).join("").toUpperCase();
+function Ln({ user: e, domainCode: t, open: n }) {
+  const i = ae();
+  return /* @__PURE__ */ p(
+    $,
+    {
+      sx: {
+        paddingTop: 3,
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        gap: "0.5rem"
+      },
+      children: [
+        /* @__PURE__ */ o(
+          $,
+          {
+            sx: {
+              width: n ? "5rem" : "2rem",
+              transition: n ? re(i, ["width", "height"], "entering") : re(i, ["width", "height"], "leaving"),
+              aspectRatio: 1
+            },
+            children: e != null && e.name ? /* @__PURE__ */ o(
+              Fe,
+              {
+                src: e == null ? void 0 : e.picture,
+                sx: {
+                  width: "100%",
+                  height: "100%",
+                  bgcolor: ze[Math.abs(Pn(e.name)) % ze.length]
+                },
+                children: Nn(e.name)
+              }
+            ) : /* @__PURE__ */ o(Fe, { sx: { width: "100%", height: "100%" } })
+          }
+        ),
+        /* @__PURE__ */ o(En, { sx: { width: "100%" }, in: n, children: /* @__PURE__ */ o(Rt, { in: n, children: /* @__PURE__ */ p($, { width: "100%", display: "flex", flexDirection: "column", alignItems: "center", children: [
+          e != null && e.name ? /* @__PURE__ */ o(P, { children: e.name }) : /* @__PURE__ */ o(Pe, { animation: !1, width: "50%" }),
+          t ? /* @__PURE__ */ o(P, { children: t.toUpperCase() }) : /* @__PURE__ */ o(Pe, { animation: !1, width: "25%" })
+        ] }) }) })
+      ]
+    }
+  );
+}
+function _n({
+  open: e,
+  widthClosed: t,
+  widthOpen: n,
+  "data-testid": i,
+  top: r,
+  middle: a,
+  bottom: c,
+  user: d,
+  domainCode: l
+}) {
+  const u = mt(), v = st(K);
+  return /* @__PURE__ */ o(Bn, { className: Q.root, "data-testid": i, children: /* @__PURE__ */ p(
+    Fn,
+    {
+      open: e,
+      widthOpen: n,
+      widthClosed: t,
+      anchor: "left",
+      variant: u ? "temporary" : "permanent",
+      PaperProps: {
+        component: "nav"
+      },
+      onClose: () => {
+        v(!1);
+      },
+      isSmallScreen: u,
+      children: [
+        !u && /* @__PURE__ */ o(Ht, {}),
+        r && /* @__PURE__ */ p($, { flexGrow: "0", children: [
+          r,
+          /* @__PURE__ */ o(Ne, { variant: "middle", sx: { marginY: "0.5rem" } })
+        ] }),
+        /* @__PURE__ */ o($, { flexGrow: "1", children: Array.isArray(a) ? /* @__PURE__ */ o(On, { links: a }) : a }),
+        /* @__PURE__ */ p($, { flexGrow: "0", children: [
+          /* @__PURE__ */ o(Ne, { variant: "middle", sx: { marginY: "0.5rem" } }),
+          /* @__PURE__ */ o(Ln, { user: d, domainCode: l, open: e }),
+          c && /* @__PURE__ */ o(M, { children: c })
+        ] })
+      ]
+    }
+  ) });
+}
+function Mn({
+  children: e,
+  topBarHeight: t,
+  maxWidth: n = !1,
+  noPadding: i
+}) {
+  return /* @__PURE__ */ o(
+    $,
+    {
+      sx: {
+        overflow: "auto",
+        height: `calc(100vh - ${t}px)`,
+        scrollbarGutter: "stable",
+        // scrollbarGutter: 'stable both-edges',
+        flexGrow: 1
+      },
+      children: i ? /* @__PURE__ */ o($, { component: "main", id: "main-content", height: "inherit", children: e }) : /* @__PURE__ */ o(
+        Je,
+        {
+          component: "main",
+          id: "main-content",
+          maxWidth: n,
+          sx: { paddingTop: 3, paddingBottom: 3, flexGrow: 1 },
+          children: e
+        }
+      )
+    }
+  );
+}
+const Rn = "TopBar", Hn = {
+  titleText: `${Rn}-titleText`
+};
+function Wn({
+  titleText: e = "",
+  height: t,
+  "data-testid": n,
+  middle: i
+}) {
+  const r = st(K), a = () => r((l) => !l), c = ae(), d = mt();
+  return /* @__PURE__ */ o("header", { "data-testid": n, children: /* @__PURE__ */ p(
+    Ke,
+    {
+      square: !0,
+      elevation: 0,
+      sx: {
+        width: "100%",
+        position: "sticky",
+        color: "primary.contrastText",
+        backgroundColor: "primary.main",
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        flexShrink: 0,
+        height: t,
+        zIndex: d ? 0 : c.zIndex.drawer + 1
+      },
+      children: [
+        /* @__PURE__ */ o(
+          Y,
+          {
+            size: "medium",
+            color: "inherit",
+            sx: { padding: 1.5, marginLeft: "12px" },
+            onClick: a,
+            children: /* @__PURE__ */ o(Jt, { fontSize: "medium" })
+          }
+        ),
+        /* @__PURE__ */ o(P, { className: Hn.titleText, variant: "h6", children: e }),
+        i
+      ]
+    }
+  ) });
+}
+function Po({
+  children: e,
+  initialTitleText: t,
+  initialNavBarOpen: n,
+  pageContainerProps: i,
+  pageContentDataTestId: r,
+  topBarDataTestId: a,
+  navBarDataTestId: c,
+  navBarMiddle: d,
+  navBarBottom: l,
+  user: u,
+  domainCode: v
+}) {
+  ct([
+    [K, n != null ? n : !0],
+    [xe, t != null ? t : ""]
+  ]);
+  const C = Le(K), [w] = V(Ct), [g] = V(xt), D = Le(xe), [A] = V(vt), [k] = V(Tn), [I] = V(wt);
+  return /* @__PURE__ */ p($, { children: [
+    /* @__PURE__ */ o(Wt, {}),
+    /* @__PURE__ */ o(
+      Wn,
+      {
+        titleText: D,
+        "data-testid": a,
+        height: A,
+        middle: k
+      }
+    ),
+    /* @__PURE__ */ p($, { sx: { display: "flex" }, children: [
+      /* @__PURE__ */ o(
+        _n,
+        {
+          open: C,
+          top: I,
+          middle: d,
+          bottom: l,
+          user: u,
+          domainCode: v,
+          widthOpen: w,
+          widthClosed: g,
+          offsetTop: A,
+          "data-testid": c
+        }
+      ),
+      /* @__PURE__ */ o(
+        Mn,
+        S(s({
+          "data-testid": r,
+          topBarHeight: A
+        }, i), {
+          children: e
+        })
+      )
+    ] })
+  ] });
+}
+const bt = ({
+  isOpen: e,
+  dialogTitle: t,
+  children: n,
+  maxWidth: i,
+  primaryButton: r,
+  secondaryButton: a,
+  onClose: c,
+  sx: d,
+  "data-testid": l,
+  disableCloseOnBackdropOrEscape: u = !1,
+  isLoading: v = !1
+}) => {
+  var g, D;
+  const [C, w] = E(!1);
   return /* @__PURE__ */ p(
-    $,
+    Ze,
     {
-      sx: {
-        paddingTop: 3,
-        display: "flex",
-        alignItems: "center",
-        flexDirection: "column",
-        gap: "0.5rem"
-      },
+      open: e,
+      onClose: (A, k) => N(void 0, null, function* () {
+        u && (k === "backdropClick" || k === "escapeKeyDown") || C || (a != null && a.onClick ? yield a.onClick() : c());
+      }),
+      fullWidth: !0,
+      maxWidth: i != null ? i : "xs",
+      "data-testid": l,
+      sx: d,
       children: [
-        /* @__PURE__ */ o(
-          $,
-          {
-            sx: {
-              width: n ? "5rem" : "2rem",
-              transition: n ? re(i, ["width", "height"], "entering") : re(i, ["width", "height"], "leaving"),
-              aspectRatio: 1
-            },
-            children: e != null && e.name ? /* @__PURE__ */ o(
-              Fe,
-              {
-                src: e == null ? void 0 : e.picture,
-                sx: {
-                  width: "100%",
-                  height: "100%",
-                  bgcolor: ze[Math.abs(Rn(e.name)) % ze.length]
-                },
-                children: Hn(e.name)
-              }
-            ) : /* @__PURE__ */ o(Fe, { sx: { width: "100%", height: "100%" } })
-          }
-        ),
-        /* @__PURE__ */ o(_n, { sx: { width: "100%" }, in: n, children: /* @__PURE__ */ o(zt, { in: n, children: /* @__PURE__ */ p($, { width: "100%", display: "flex", flexDirection: "column", alignItems: "center", children: [
-          e != null && e.name ? /* @__PURE__ */ o(P, { children: e.name }) : /* @__PURE__ */ o(Pe, { animation: !1, width: "50%" }),
-          t ? /* @__PURE__ */ o(P, { children: t.toUpperCase() }) : /* @__PURE__ */ o(Pe, { animation: !1, width: "25%" })
-        ] }) }) })
+        v && /* @__PURE__ */ o(je, { sx: { height: "4px", marginBottom: "-4px" } }),
+        /* @__PURE__ */ o(et, { children: t }),
+        /* @__PURE__ */ o(tt, { sx: { "& > :last-child": { marginBottom: 0 } }, children: n }),
+        /* @__PURE__ */ p(nt, { children: [
+          /* @__PURE__ */ o(
+            ie,
+            {
+              onClick: (g = a == null ? void 0 : a.onClick) != null ? g : c,
+              "data-testid": a == null ? void 0 : a.testId,
+              disabled: (a == null ? void 0 : a.disabled) || C,
+              color: a == null ? void 0 : a.buttonColor,
+              children: (D = a == null ? void 0 : a.text) != null ? D : "Cancel"
+            }
+          ),
+          r && /* @__PURE__ */ o(
+            ie,
+            {
+              onClick: () => N(void 0, null, function* () {
+                var A;
+                w(!0), yield (A = r.onClick) == null ? void 0 : A.call(r), w(!1);
+              }),
+              "data-testid": r.testId,
+              disabled: r.disabled || C,
+              color: r == null ? void 0 : r.buttonColor,
+              children: r.text
+            }
+          )
+        ] })
       ]
     }
   );
-}
-function zn({
-  open: e,
-  widthClosed: t,
-  widthOpen: n,
-  "data-testid": i,
-  top: r,
-  middle: a,
-  bottom: c,
-  user: d,
-  domainCode: l
+}, St = ({
+  minLength: e,
+  preLoadedOptions: t,
+  lookup: n,
+  label: i,
+  inputValue: r
+}) => on({
+  queryFn: () => e && r.length < e ? t != null ? t : [] : t ? t.filter(
+    (a) => a.label.toLowerCase().includes(r.toLowerCase())
+  ) : n(r),
+  queryKey: ["autocomplete", i, r]
+});
+function No({
+  lookup: e = () => N(this, null, function* () {
+  }),
+  enableHighlighting: t = !0,
+  onChange: n,
+  minLength: i = 0,
+  label: r,
+  value: a,
+  "data-testid": c,
+  sx: d,
+  boxSx: l,
+  textFieldColor: u,
+  textFieldVariant: v = "filled",
+  loadingText: C = "Loading...",
+  noOptionsText: w = "No options",
+  popupIcon: g = /* @__PURE__ */ o(jt, {}),
+  error: D = !1,
+  helperText: A = "",
+  preLoadedOptions: k = void 0,
+  disablePortal: I = !1
 }) {
-  const u = xt(), v = st(K);
-  return /* @__PURE__ */ o(Ln, { className: Q.root, "data-testid": i, children: /* @__PURE__ */ p(
-    Mn,
+  const [T, b] = E(""), y = (h, f) => {
+    const F = a.filter((m) => m.id !== f);
+    n(F, "delete", h);
+  }, { data: L, isLoading: O } = St({
+    inputValue: T,
+    label: r,
+    lookup: e,
+    minLength: i,
+    preLoadedOptions: k
+  }), W = T.length >= i;
+  return /* @__PURE__ */ p("div", { "data-testid": c, children: [
+    /* @__PURE__ */ o(
+      Ae,
+      {
+        sx: d,
+        "data-testid": c ? `${c}:Autocomplete` : void 0,
+        disablePortal: I,
+        multiple: !0,
+        getOptionLabel: (h) => typeof h == "string" ? h : h.label,
+        loading: W ? O : !1,
+        options: [...a, ...L != null ? L : []],
+        filterSelectedOptions: !0,
+        includeInputInList: !0,
+        value: a,
+        onChange: (h, f, F) => {
+          n(f, F, h);
+        },
+        onInputChange: (h, f) => b(f),
+        noOptionsText: W ? w : "Start typing to search",
+        loadingText: C,
+        popupIcon: g,
+        renderInput: (h) => /* @__PURE__ */ o(
+          be,
+          S(s({}, h), {
+            label: r,
+            fullWidth: !0,
+            variant: v,
+            error: D,
+            helperText: A,
+            InputProps: S(s({}, h.InputProps), {
+              endAdornment: /* @__PURE__ */ p(M, { children: [
+                O ? /* @__PURE__ */ o(Se, { color: "inherit", size: 20 }) : null,
+                h.InputProps.endAdornment
+              ] })
+            }),
+            "data-testid": c ? `${c}:Autocomplete:TextField` : void 0,
+            onKeyDown: (f) => {
+              (f.key === "Backspace" || f.key === "Delete") && f.stopPropagation();
+            },
+            color: u
+          })
+        ),
+        renderTags: () => null,
+        isOptionEqualToValue: (h, f) => h.id === f.id,
+        renderOption: (h, f, F) => {
+          if (t) {
+            const m = tn(f.label, F.inputValue, {
+              insideWords: !0,
+              findAllOccurrences: !0
+            }), x = nn(f.label, m);
+            return /* @__PURE__ */ Ce(
+              "li",
+              S(s({}, h), {
+                key: f.id,
+                "data-testid": c ? `${c}:Autocomplete:option(${f.id.toString()})` : void 0
+              }),
+              /* @__PURE__ */ o("div", { children: x.map((_, se) => /* @__PURE__ */ o(
+                "span",
+                {
+                  style: {
+                    fontWeight: _.highlight ? 700 : 400
+                  },
+                  children: _.text
+                },
+                se
+              )) })
+            );
+          } else
+            return /* @__PURE__ */ Ce(
+              "li",
+              S(s({}, h), {
+                key: f.id,
+                "data-testid": c ? `${c}:option(${f.id.toString()})` : void 0
+              }),
+              f.label
+            );
+        }
+      }
+    ),
+    a.length > 0 && /* @__PURE__ */ o($, { sx: l, children: a.map((h) => /* @__PURE__ */ o(
+      zt,
+      {
+        sx: {
+          marginTop: 1,
+          marginRight: 1,
+          height: "auto"
+        },
+        label: /* @__PURE__ */ o(
+          Ut,
+          {
+            title: h.tooltipContent || "",
+            placement: "bottom-start",
+            PopperProps: {
+              modifiers: [
+                {
+                  name: "offset",
+                  options: {
+                    offset: [115, -15]
+                  }
+                }
+              ]
+            },
+            children: /* @__PURE__ */ o(P, { style: { whiteSpace: "normal" }, children: h.chipLabel ? h.chipLabel : h.label })
+          }
+        ),
+        "data-testid": c ? `${c}:Chip(${h.id.toString()})` : void 0,
+        onDelete: (f) => y(f, h.id),
+        deleteIcon: /* @__PURE__ */ o(
+          Zt,
+          {
+            "data-testid": c ? `${c}:Chip(${h.id.toString()}):deleteIcon` : void 0
+          }
+        )
+      },
+      h.id
+    )) })
+  ] });
+}
+const Lo = ({
+  lookup: e = () => N(void 0, null, function* () {
+  }),
+  onChange: t,
+  label: n,
+  value: i,
+  sx: r,
+  textFieldColor: a,
+  textFieldVariant: c = "filled",
+  "data-testid": d,
+  noOptionsText: l = "No options",
+  minLength: u = 3,
+  disablePortal: v = !1,
+  preLoadedOptions: C,
+  helperText: w = "",
+  disabled: g
+}) => {
+  const [D, A] = E(""), { data: k, isLoading: I } = St({
+    inputValue: D,
+    label: n,
+    lookup: e,
+    minLength: u != null ? u : 0,
+    preLoadedOptions: C
+  }), T = D.length >= u;
+  return /* @__PURE__ */ o("div", { "data-testid": d, children: /* @__PURE__ */ o(Gt, { direction: "row", spacing: 1, children: /* @__PURE__ */ o(
+    Ae,
     {
-      open: e,
-      widthOpen: n,
-      widthClosed: t,
-      anchor: "left",
-      variant: u ? "temporary" : "permanent",
-      PaperProps: {
-        component: "nav"
+      sx: r,
+      "data-testid": d ? `${d}:Autocomplete` : void 0,
+      loading: T ? I : !1,
+      options: k != null ? k : [],
+      onChange: (b, y) => {
+        t(b, y);
       },
-      onClose: () => {
-        v(!1);
+      disablePortal: v,
+      filterOptions: (b) => b,
+      value: i,
+      noOptionsText: T ? l : "Start typing to search",
+      getOptionLabel: (b) => b.label,
+      renderInput: (b) => /* @__PURE__ */ o(
+        be,
+        S(s({
+          "data-testid": d ? `${d}:Autocomplete:TextField` : void 0
+        }, b), {
+          variant: c,
+          label: n,
+          color: a,
+          helperText: w
+        })
+      ),
+      isOptionEqualToValue: (b, y) => b.id === y.id,
+      onInputChange: (b, y) => {
+        A(y);
       },
-      isSmallScreen: u,
-      children: [
-        !u && /* @__PURE__ */ o(Ut, {}),
-        r && /* @__PURE__ */ p($, { flexGrow: "0", children: [
-          r,
-          /* @__PURE__ */ o(Ne, { variant: "middle", sx: { marginY: "0.5rem" } })
-        ] }),
-        /* @__PURE__ */ o($, { flexGrow: "1", children: Array.isArray(a) ? /* @__PURE__ */ o(Nn, { links: a }) : a }),
-        /* @__PURE__ */ p($, { flexGrow: "0", children: [
-          /* @__PURE__ */ o(Ne, { variant: "middle", sx: { marginY: "0.5rem" } }),
-          /* @__PURE__ */ o(Wn, { user: d, domainCode: l, open: e }),
-          c && /* @__PURE__ */ o(M, { children: c })
-        ] })
-      ]
+      renderOption: (b, y) => /* @__PURE__ */ Ce(
+        "li",
+        S(s({}, b), {
+          key: y.id,
+          "data-testid": d ? `${d}:Autocomplete:option(${y.id.toString()})` : void 0
+        }),
+        y.label
+      ),
+      disabled: g
     }
-  ) });
-}
-function Un({
-  children: e,
-  topBarHeight: t,
-  maxWidth: n = !1,
-  noPadding: i
-}) {
-  return /* @__PURE__ */ o(
-    $,
+  ) }) });
+}, zn = (e) => {
+  if (!e)
+    return -1;
+  try {
+    const n = e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"), i = decodeURIComponent(
+      sn.from(n, "base64").toString("utf8").split("").map(function(a) {
+        return "%" + ("00" + a.charCodeAt(0).toString(16)).slice(-2);
+      }).join("")
+    ), r = JSON.parse(i);
+    return r != null && r.exp ? r.exp : -1;
+  } catch (t) {
+    return -1;
+  }
+}, _o = ({
+  open: e = !1,
+  closeHandler: t,
+  setAuth0ExpiryTime: n
+}) => {
+  const { logout: i, getAccessTokenSilently: r } = dt(), [a, c] = E(0), d = () => N(void 0, null, function* () {
+    i({ logoutParams: { returnTo: `${window.location.origin}` } });
+  }), l = () => N(void 0, null, function* () {
+    c(a + 1), t();
+  });
+  return oe(() => {
+    (() => N(void 0, null, function* () {
+      if (a > 0) {
+        const w = yield r({ cacheMode: "off" }), g = zn(w) * 1e3;
+        n(g);
+      }
+    }))();
+  }, [a, r, n]), /* @__PURE__ */ o(
+    bt,
     {
-      sx: {
-        overflow: "auto",
-        height: `calc(100vh - ${t}px)`,
-        scrollbarGutter: "stable",
-        // scrollbarGutter: 'stable both-edges',
-        flexGrow: 1
+      isOpen: e,
+      primaryButton: {
+        text: "Continue",
+        onClick: l,
+        disabled: !1,
+        testId: "PreferencesDialog",
+        buttonColor: "secondary"
       },
-      children: i ? /* @__PURE__ */ o($, { component: "main", id: "main-content", height: "inherit", children: e }) : /* @__PURE__ */ o(
-        nt,
-        {
-          component: "main",
-          id: "main-content",
-          maxWidth: n,
-          sx: { paddingTop: 3, paddingBottom: 3, flexGrow: 1 },
-          children: e
-        }
-      )
+      secondaryButton: {
+        text: "Log out",
+        onClick: d,
+        disabled: !1,
+        testId: "PreferencesDialog",
+        buttonColor: "secondary"
+      },
+      onClose: t,
+      dialogTitle: "Session expiry",
+      disableCloseOnBackdropOrEscape: !0,
+      children: /* @__PURE__ */ o("p", { style: { marginBottom: 0 }, children: "Your session is about to time out due to inactivity. Do you want to continue?" })
     }
   );
-}
-const Gn = "TopBar", Vn = {
-  titleText: `${Gn}-titleText`
 };
-function qn({
-  titleText: e = "",
-  height: t,
-  "data-testid": n,
-  middle: i
-}) {
-  const r = st(K), a = () => r((l) => !l), c = ae(), d = xt();
-  return /* @__PURE__ */ o("header", { "data-testid": n, children: /* @__PURE__ */ p(
-    Ke,
-    {
-      square: !0,
-      elevation: 0,
-      sx: {
-        width: "100%",
-        position: "sticky",
-        color: "primary.contrastText",
-        backgroundColor: "primary.main",
-        display: "flex",
-        alignItems: "center",
-        gap: 2,
-        flexShrink: 0,
-        height: t,
-        zIndex: d ? 0 : c.zIndex.drawer + 1
-      },
-      children: [
-        /* @__PURE__ */ o(
-          Y,
-          {
-            size: "medium",
-            color: "inherit",
-            sx: { padding: 1.5, marginLeft: "12px" },
-            onClick: a,
-            children: /* @__PURE__ */ o(jt, { fontSize: "medium" })
-          }
-        ),
-        /* @__PURE__ */ o(P, { className: Vn.titleText, variant: "h6", children: e }),
-        i
-      ]
-    }
-  ) });
+function Un(e) {
+  return "error" in e;
+}
+function Gn(e) {
+  return e.error === "access_denied";
+}
+function Vn(e) {
+  var i;
+  const t = e.error, n = (i = e == null ? void 0 : e.error_description) != null ? i : "";
+  return t === "access_denied" && n.startsWith("You do not have the required authorization");
+}
+function qn(e) {
+  var i;
+  const t = e.error, n = (i = e == null ? void 0 : e.error_description) != null ? i : "";
+  return t === "access_denied" && n.startsWith("User did not authorize the request");
 }
-function Ro({
+function Mo({
   children: e,
-  initialTitleText: t,
-  initialNavBarOpen: n,
-  pageContainerProps: i,
-  pageContentDataTestId: r,
-  topBarDataTestId: a,
-  navBarDataTestId: c,
-  navBarMiddle: d,
-  navBarBottom: l,
-  user: u,
-  domainCode: v
+  appName: t = "the app"
 }) {
-  dt([
-    [K, n != null ? n : !0],
-    [xe, t != null ? t : ""]
-  ]);
-  const C = Le(K), [w] = V(vt), [g] = V(wt), D = Le(xe), [A] = V(At), [k] = V(Pn), [I] = V(bt);
-  return /* @__PURE__ */ p($, { children: [
-    /* @__PURE__ */ o(Gt, {}),
-    /* @__PURE__ */ o(
-      qn,
-      {
-        titleText: D,
-        "data-testid": a,
-        height: A,
-        middle: k
+  const { isAuthenticated: n, isLoading: i, error: r, loginWithRedirect: a, logout: c } = dt();
+  if (oe(() => {
+    if (i || n || r)
+      return;
+    const d = {
+      appState: {
+        returnTo: `${window.location.pathname}${window.location.search}`
       }
-    ),
-    /* @__PURE__ */ p($, { sx: { display: "flex" }, children: [
-      /* @__PURE__ */ o(
-        zn,
-        {
-          open: C,
-          top: I,
-          middle: d,
-          bottom: l,
-          user: u,
-          domainCode: v,
-          widthOpen: w,
-          widthClosed: g,
-          offsetTop: A,
-          "data-testid": c
-        }
-      ),
-      /* @__PURE__ */ o(
-        Un,
-        S(s({
-          "data-testid": r,
-          topBarHeight: A
-        }, i), {
-          children: e
-        })
-      )
-    ] })
-  ] });
+    };
+    a(d);
+  }, [i, n, r, a]), r && Un(r)) {
+    let d = "Auth error", l = "An unknown Auth0 error occurred.";
+    return Vn(r) ? (d = "Unauthorised", l = `You are not authorised to access ${t}.`) : qn(r) ? (d = "App not authorised", l = `You have not authorised ${t} to access your user profile. This is necessary to use ${t}.`) : Gn(r) && (d = "Unauthorised", l = "Authorisation with auth0 failed for an unknown reason."), /* @__PURE__ */ p(Ze, { open: !0, children: [
+      /* @__PURE__ */ o(et, { children: d }),
+      /* @__PURE__ */ o(tt, { children: /* @__PURE__ */ o(P, { children: l }) }),
+      /* @__PURE__ */ o(nt, { children: /* @__PURE__ */ o(ie, { onClick: () => c({ logoutParams: { returnTo: window.location.origin } }), children: "Logout" }) })
+    ] });
+  }
+  return n ? /* @__PURE__ */ o(M, { children: e }) : /* @__PURE__ */ o(ln, { variant: "rectangular", animation: "pulse", height: "100vh", width: "100vw" });
 }
 const Xn = {
   autoHideDuration: 6e3,
@@ -1397,12 +1396,12 @@ function eo(a) {
               onClose: (m) => b(m, "closeAlert"),
               severity: O.severity,
               variant: "filled",
-              icon: O.progressIndicator === "circular" ? /* @__PURE__ */ o(be, { size: "1em" }) : void 0,
+              icon: O.progressIndicator === "circular" ? /* @__PURE__ */ o(Se, { size: "1em" }) : void 0,
               style: O.progressIndicator === "linear" ? Jn : void 0,
               children: O.message
             }
           ),
-          O.progressIndicator === "linear" && /* @__PURE__ */ o(Ze, { color: "primary" })
+          O.progressIndicator === "linear" && /* @__PURE__ */ o(je, { color: "primary" })
         ] })
       })
     )
@@ -1414,9 +1413,9 @@ function to() {
     throw new ke("Error: Tried to useSaladBar outside of a <SaladBarProvider>");
   return e;
 }
-const Ho = X(
+const Ro = X(
   (e = { autoHideDuration: 1 }, t = {}, n = {}) => ({ children: i }) => /* @__PURE__ */ o(eo, S(s({}, e), { overrideState: t, overrideActions: n, children: i }))
-), no = en(), Wo = ({
+), no = en(), Ho = ({
   children: e,
   store: t
 }) => /* @__PURE__ */ o(lt, { store: t != null ? t : no, children: e }), Dt = "domainCode";
@@ -1443,7 +1442,7 @@ const qe = R(
 }, io = (e) => {
   var t;
   return e === null ? "N/A" : (t = oo[e]) != null ? t : "";
-}, zo = ({
+}, Wo = ({
   isLoading: e,
   isOpen: t,
   onClose: n,
@@ -1458,7 +1457,7 @@ const qe = R(
   });
   let k;
   return C ? k = "Unable to retrieve your active organisations. Try logging in again." : w && (k = "You no longer have any roles in your chosen organisation. Please choose another."), /* @__PURE__ */ p(
-    ft,
+    bt,
     {
       isOpen: t,
       dialogTitle: "Select an organisation",
@@ -1481,7 +1480,7 @@ const qe = R(
           "."
         ] }),
         /* @__PURE__ */ o(
-          we,
+          Ae,
           {
             loading: e,
             multiple: !1,
@@ -1491,13 +1490,13 @@ const qe = R(
             getOptionLabel: io,
             options: [...i],
             renderInput: (I) => /* @__PURE__ */ o(
-              Ae,
+              be,
               S(s({}, I), {
                 variant: "filled",
                 label: "Select organisation",
                 InputProps: S(s({}, I.InputProps), {
                   endAdornment: /* @__PURE__ */ p(M, { children: [
-                    e ? /* @__PURE__ */ o(be, { color: "inherit", size: 20, sx: { marginTop: "-20px" } }) : null,
+                    e ? /* @__PURE__ */ o(Se, { color: "inherit", size: 20, sx: { marginTop: "-20px" } }) : null,
                     I.InputProps.endAdornment
                   ] })
                 })
@@ -1509,7 +1508,7 @@ const qe = R(
       ]
     }
   );
-}, Uo = ot({
+}, zo = ot({
   palette: {
     primary: {
       dark: "#00A651",
@@ -1560,7 +1559,7 @@ const qe = R(
   navBar: {
     backgroundColor: "#E8E8E8"
   }
-}), Go = ot({
+}), Uo = ot({
   palette: {
     primary: {
       main: "#007236",
@@ -1654,15 +1653,15 @@ const qe = R(
 }), ro = {
   domainCode: yt,
   navBarOpen: K,
-  navBarWidthOpen: vt,
-  navBarWidthClosed: wt,
+  navBarWidthOpen: Ct,
+  navBarWidthClosed: xt,
   titleText: xe,
-  topBarHeight: At,
-  navBarTop: bt
-}, Vo = X(() => ({ children: e }) => /* @__PURE__ */ o(lt, { children: e })), ao = ({
+  topBarHeight: vt,
+  navBarTop: wt
+}, Go = X(() => ({ children: e }) => /* @__PURE__ */ o(lt, { children: e })), ao = ({
   initialValues: e,
   children: t
-}) => (dt(e), /* @__PURE__ */ o(M, { children: t })), qo = X(
+}) => (ct(e), /* @__PURE__ */ o(M, { children: t })), Vo = X(
   (e) => ({ children: t }) => /* @__PURE__ */ o(
     ao,
     {
@@ -1675,53 +1674,53 @@ const qe = R(
       children: t
     }
   )
-), Xo = X(() => ({ children: e }) => {
+), qo = X(() => ({ children: e }) => {
   const t = new rn();
   return /* @__PURE__ */ o(an, { client: t, children: e });
 });
 export {
-  ft as AgDialog,
-  Ro as AppLayout,
-  Wo as AtomProvider,
-  _o as AuthGuard,
+  bt as AgDialog,
+  Po as AppLayout,
+  Ho as AtomProvider,
+  Mo as AuthGuard,
   kt as Context,
   ke as ContextError,
-  zo as DomainCodeDialog,
-  Io as ExampleComponent,
-  Po as FetchAutocomplete,
+  Wo as DomainCodeDialog,
+  $o as ExampleComponent,
+  No as FetchAutocomplete,
   ao as HydrateAtoms,
   pt as NAVBAR_WIDTH_CLOSED,
   ut as NAVBAR_WIDTH_OPENED,
-  Fo as NavBar,
-  Bo as NavBarDarkStyledList,
-  Eo as NavBarLightStyledList,
+  Eo as NavBar,
+  Oo as NavBarDarkStyledList,
+  Bo as NavBarLightStyledList,
   fn as NavBarProvider,
-  Mo as PageLayout,
+  Fo as PageLayout,
   eo as SaladBarProvider,
-  Lo as SessionExpiryDialog,
-  No as SingleAutocomplete,
+  _o as SessionExpiryDialog,
+  Lo as SingleAutocomplete,
   no as atomStore,
   Cn as buildNavBarState,
   yt as domainCodeAtom,
-  Uo as fed21Theme,
-  xn as getAuth0Expiry,
-  Go as internalAgSystemsTheme,
+  zo as fed21Theme,
+  zn as getAuth0Expiry,
+  Uo as internalAgSystemsTheme,
   q as navBarClasses,
   K as navBarOpenAtom,
-  bt as navBarTopAtom,
-  wt as navBarWidthClosedAtom,
-  vt as navBarWidthOpenAtom,
+  wt as navBarTopAtom,
+  xt as navBarWidthClosedAtom,
+  Ct as navBarWidthOpenAtom,
   xe as titleTextAtom,
-  At as topBarHeightAtom,
-  Pn as topBarMiddleAtom,
-  mt as useAutocompleteOptions,
+  vt as topBarHeightAtom,
+  Tn as topBarMiddleAtom,
+  St as useAutocompleteOptions,
   mn as useNavBar,
   to as useSaladBar,
-  Vo as withAtomProvider,
-  Oo as withBrowserRouter,
-  To as withNavBarProvider,
-  qo as withOverrideDefaults,
-  Xo as withQueryClient,
-  Ho as withSaladBarProvider
+  Go as withAtomProvider,
+  To as withBrowserRouter,
+  Io as withNavBarProvider,
+  Vo as withOverrideDefaults,
+  qo as withQueryClient,
+  Ro as withSaladBarProvider
 };
 //# sourceMappingURL=index.js.map