@australiangreens/ag-internal-components 0.0.28 → 0.0.30

package/dist/esm/index.js

@@ -1,146 +1,139 @@
-var Gt = Object.defineProperty, Ut = Object.defineProperties;
-var qt = Object.getOwnPropertyDescriptors;
-var W = Object.getOwnPropertySymbols;
-var dt = Object.prototype.hasOwnProperty, ct = Object.prototype.propertyIsEnumerable;
-var J = (t, e, n) => e in t ? Gt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, r = (t, e) => {
-  for (var n in e || (e = {}))
-    dt.call(e, n) && J(t, n, e[n]);
-  if (W)
-    for (var n of W(e))
-      ct.call(e, n) && J(t, n, e[n]);
-  return t;
-}, C = (t, e) => Ut(t, qt(e));
-var pt = (t, e) => {
+var Je = Object.defineProperty, Ze = Object.defineProperties;
+var et = Object.getOwnPropertyDescriptors;
+var V = Object.getOwnPropertySymbols;
+var fe = Object.prototype.hasOwnProperty, xe = Object.prototype.propertyIsEnumerable;
+var ie = (e, t, n) => t in e ? Je(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, r = (e, t) => {
+  for (var n in t || (t = {}))
+    fe.call(t, n) && ie(e, n, t[n]);
+  if (V)
+    for (var n of V(t))
+      xe.call(t, n) && ie(e, n, t[n]);
+  return e;
+}, h = (e, t) => Ze(e, et(t));
+var Be = (e, t) => {
   var n = {};
-  for (var o in t)
-    dt.call(t, o) && e.indexOf(o) < 0 && (n[o] = t[o]);
-  if (t != null && W)
-    for (var o of W(t))
-      e.indexOf(o) < 0 && ct.call(t, o) && (n[o] = t[o]);
+  for (var i in e)
+    fe.call(e, i) && t.indexOf(i) < 0 && (n[i] = e[i]);
+  if (e != null && V)
+    for (var i of V(e))
+      t.indexOf(i) < 0 && xe.call(e, i) && (n[i] = e[i]);
   return n;
 };
-var ut = (t, e, n) => (J(t, typeof e != "symbol" ? e + "" : e, n), n);
-import { jsxs as c, Fragment as U, jsx as i } from "react/jsx-runtime";
-import { useState as S, createContext as Bt, useCallback as nt, useContext as Ot, useEffect as gt, useRef as Y } from "react";
-import Xt from "@mui/material/Button";
-import Vt from "@mui/material/Paper";
-import D from "@mui/material/Typography";
-import jt from "@mui/material/CssBaseline";
-import { styled as rt, createTheme as Tt, alpha as Z, ThemeProvider as Qt } from "@mui/material/styles";
-import St from "@mui/material/Drawer";
-import { AgError as Kt } from "@australiangreens/ag-error";
-import { createHelper as bt } from "souvlaki";
-import Jt from "@mui/material/List";
-import { styled as L, Box as yt, IconButton as ft } from "@mui/material";
-import It from "@mui/icons-material/ArrowForward";
-import Ft from "@mui/icons-material/ArrowBack";
-import Yt from "@mui/material/Box";
-import ht from "@mui/material/IconButton";
-import Zt from "@mui/material/Container";
-import te from "@mui/material/Snackbar";
-import ee from "@mui/material/Alert";
-import ne from "@mui/material/LinearProgress";
-import re from "@mui/material/CircularProgress";
-function Ze({ text: t }) {
-  const [e, n] = S(0);
-  return /* @__PURE__ */ c(U, { children: [
-    /* @__PURE__ */ i(D, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
-    /* @__PURE__ */ i(D, { variant: "caption", display: "block", children: /* @__PURE__ */ i("span", { children: "Just ensuring MUI is working as planned as a peer dependency. v0.0.11" }) }),
-    /* @__PURE__ */ i(
-      Xt,
+var we = (e, t, n) => (ie(e, typeof t != "symbol" ? t + "" : t, n), n);
+import { jsxs as l, Fragment as Q, jsx as o } from "react/jsx-runtime";
+import { useState as $, createContext as le, useCallback as Y, useContext as ce, useEffect as K, useReducer as tt, useMemo as nt, useRef as ae } from "react";
+import { Typography as A, Button as rt, Paper as pe, styled as W, Box as O, IconButton as M, Drawer as ot, Container as Se, Divider as Te, CssBaseline as it, Snackbar as at, Alert as st, CircularProgress as dt, LinearProgress as lt } from "@mui/material";
+import ct from "@mui/material/CssBaseline";
+import { styled as E } from "@mui/material/styles";
+import Le from "@mui/material/Drawer";
+import { AgError as pt } from "@australiangreens/ag-error";
+import { createHelper as Ae } from "souvlaki";
+import Ee from "@mui/material/List";
+import { ArrowForward as Pe, ArrowBack as ke, ViewHeadline as ut } from "@mui/icons-material";
+function hn({ text: e }) {
+  const [t, n] = $(0);
+  return /* @__PURE__ */ l(Q, { children: [
+    /* @__PURE__ */ o(A, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
+    /* @__PURE__ */ o(A, { 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(
+      rt,
       {
         variant: "outlined",
-        onClick: () => n((o) => o + 1),
+        onClick: () => n((i) => i + 1),
         "aria-label": "Increment",
         children: "Hello I am a button"
       }
     ),
-    /* @__PURE__ */ c("p", { children: [
+    /* @__PURE__ */ l("p", { children: [
       "This is some text: ",
-      /* @__PURE__ */ i("span", { children: t })
+      /* @__PURE__ */ o("span", { children: e })
     ] }),
-    /* @__PURE__ */ c(Vt, { children: [
+    /* @__PURE__ */ l(pe, { children: [
       "This number will incremember when button pressed: ",
-      e
+      t
     ] })
   ] });
 }
-const At = 330, Pt = 73, O = "Navbar", A = {
-  root: `${O}-root`,
-  menuButton: `${O}-menuButton`,
-  hide: `${O}-hide`,
-  content: `${O}-content`,
-  userInfoHolder: `${O}-userInfoHolder`,
-  settings: `${O}-settings`,
-  pieChartIcon: `${O}-pieChartIcon`
-}, oe = rt("div", { name: "NavBar" })(({ theme: t }) => ({
-  [`&.${A.root}`]: {
+const De = 330, _e = 73, I = "Navbar", L = {
+  root: `${I}-root`,
+  menuButton: `${I}-menuButton`,
+  hide: `${I}-hide`,
+  content: `${I}-content`,
+  userInfoHolder: `${I}-userInfoHolder`,
+  settings: `${I}-settings`,
+  pieChartIcon: `${I}-pieChartIcon`
+}, ht = E("div", { name: "NavBar" })(({ theme: e }) => ({
+  [`&.${L.root}`]: {
     display: "flex"
   },
-  [`& .${A.menuButton}`]: {
+  [`& .${L.menuButton}`]: {
     marginRight: 36
   },
-  [`& .${A.hide}`]: {
+  [`& .${L.hide}`]: {
     display: "none"
   },
-  [`& .${A.content}`]: {
+  [`& .${L.content}`]: {
     flexGrow: 1,
-    padding: t.spacing(3)
+    padding: e.spacing(3)
   },
-  [`& .${A.userInfoHolder}`]: {
+  [`& .${L.userInfoHolder}`]: {
     height: "148px",
     marginTop: "64px",
     marginBottom: "16px"
   }
-})), kt = () => ({
+})), He = () => ({
   position: "absolute",
   height: "100%",
   overflowX: "hidden",
   overflowY: "hidden",
   color: "white",
   backgroundColor: "black"
-}), ie = () => r({
-  width: At
-}, kt()), ae = () => r({
-  width: Pt
-}, kt()), se = rt(St, {
-  shouldForwardProp: (t) => t !== "open"
-})(({ theme: t, open: e }) => r(r({
-  width: e ? At : Pt,
+  // backgroundColor: '#e8e8e8',
+}), gt = () => r({
+  width: De
+}, He()), vt = () => r({
+  width: _e
+}, He()), ft = E(Le, {
+  shouldForwardProp: (e) => e !== "open"
+})(({ theme: e, open: t }) => r(r({
+  width: t ? De : _e,
   flexShrink: 0,
   whiteSpace: "nowrap",
   boxSizing: "border-box",
-  zIndex: t.zIndex.drawer + 100
-}, e && {
-  "& .MuiDrawer-paper": ie()
-}), !e && {
-  "& .MuiDrawer-paper": ae()
+  zIndex: e.zIndex.drawer + 100
+}, t && {
+  "& .MuiDrawer-paper": gt()
+}), !t && {
+  "& .MuiDrawer-paper": vt()
 }));
-class ot extends Kt {
+class J extends pt {
 }
-ut(ot, "errorName", "ContextError");
-const Et = Bt(null), le = {}, de = {}, ce = ({
-  overrideState: t = le,
-  overrideActions: e = de,
+we(J, "errorName", "ContextError");
+const Re = le(null), xt = {}, Bt = {}, wt = ({
+  overrideState: e = xt,
+  overrideActions: t = Bt,
   children: n
 }) => {
-  const [{ open: o }, l] = S({ open: !0 }), g = nt((x) => {
-    l({ open: x });
+  const [{ open: i }, a] = $({ open: !0 }), v = Y((u) => {
+    a({ open: u });
+  }, []), g = Y(() => {
+    a((u) => h(r({}, u), { open: !u.open }));
   }, []), f = r(r({
-    open: o,
-    setOpen: g
-  }, t), e);
-  return /* @__PURE__ */ i(Et.Provider, { value: f, children: n });
-}, pe = () => {
-  const t = Ot(Et);
-  if (t === null)
-    throw new ot("Error: Tried to useNavBar outside of a <NavBarProvider>");
-  return t;
-}, ue = (t = {}) => r({
+    open: i,
+    setOpen: v,
+    toggleOpen: g
+  }, e), t);
+  return /* @__PURE__ */ o(Re.Provider, { value: f, children: n });
+}, Tt = () => {
+  const e = ce(Re);
+  if (e === null)
+    throw new J("Error: Tried to useNavBar outside of a <NavBarProvider>");
+  return e;
+}, Ot = (e = {}) => r({
   open: !0
-}, t), tn = bt(
-  (t = ue(), e = {}) => ({ children: n }) => /* @__PURE__ */ i(ce, { overrideState: t, overrideActions: e, children: n })
-), mt = 7, en = rt(Jt)(({ theme: t }) => ({
+}, e), gn = Ae(
+  (e = Ot(), t = {}) => ({ children: n }) => /* @__PURE__ */ o(wt, { overrideState: e, overrideActions: t, children: n })
+), Oe = 7, vn = E(Ee)(({ theme: e }) => ({
   backgroundColor: "black",
   color: "white",
   "& .MuiListItem-root": {
@@ -149,143 +142,181 @@ const Et = Bt(null), le = {}, de = {}, ce = ({
   "& .MuiListItemButton-root": {
     " .MuiListItemIcon-root": {
       color: "white",
-      padding: `${mt}px`
+      padding: `${Oe}px`
     },
     // Focus state
     "&.Mui-focusVisible": {
-      backgroundColor: t.palette.grey[700]
+      backgroundColor: e.palette.grey[700]
     },
     // Selected state
     "&.Mui-selected": {
       borderLeftStyle: "solid",
       borderLeftWidth: "7px",
-      borderLeftColor: t.palette.primary.main,
-      paddingLeft: `calc(${t.spacing(2)} - ${mt}px)`
+      borderLeftColor: e.palette.primary.main,
+      paddingLeft: `calc(${e.spacing(2)} - ${Oe}px)`
     },
     // Hover state
     "&:hover": {
-      backgroundColor: t.palette.primary.dark
+      backgroundColor: e.palette.primary.dark
     },
     // Focus+Selected state
     "&.Mui-selected.Mui-focusVisible": {
-      backgroundColor: t.palette.grey[700]
+      backgroundColor: e.palette.grey[700]
     },
     // Hover+Selected state
     "&.Mui-selected:hover": {
-      backgroundColor: t.palette.primary.dark
+      backgroundColor: e.palette.primary.dark
+    }
+    // Focus+Hover+Selected state doesn't need to be specified
+    // '&.Mui-selected.Mui-focusVisible:hover': {
+    // },
+  }
+})), ye = 7, fn = E(Ee)(({ theme: e }) => ({
+  backgroundColor: "#e8e8e8",
+  color: "inherit",
+  "& .MuiListItem-root": {
+    padding: "unset"
+  },
+  "& .MuiListItemButton-root": {
+    " .MuiListItemIcon-root": {
+      color: "inherit",
+      padding: `${ye}px`
+    },
+    // Focus state
+    "&.Mui-focusVisible": {
+      backgroundColor: e.palette.grey[700]
+    },
+    // Selected state
+    "&.Mui-selected": {
+      borderLeftStyle: "solid",
+      borderLeftWidth: "7px",
+      borderLeftColor: e.palette.primary.main,
+      paddingLeft: `calc(${e.spacing(2)} - ${ye}px)`
+    },
+    // Hover state
+    "&:hover": {
+      backgroundColor: e.palette.primary.dark
+    },
+    // Focus+Selected state
+    "&.Mui-selected.Mui-focusVisible": {
+      backgroundColor: e.palette.grey[700]
+    },
+    // Hover+Selected state
+    "&.Mui-selected:hover": {
+      backgroundColor: e.palette.primary.dark
     }
     // Focus+Hover+Selected state doesn't need to be specified
     // '&.Mui-selected.Mui-focusVisible:hover': {
     // },
   }
 }));
-function nn({
-  "data-testid": t,
-  children: e
+function xn({
+  "data-testid": e,
+  children: t
 }) {
-  const { open: n } = pe();
-  return /* @__PURE__ */ c(oe, { className: A.root, "data-testid": t, children: [
-    /* @__PURE__ */ i(jt, {}),
-    /* @__PURE__ */ i(
-      se,
+  const { open: n } = Tt();
+  return /* @__PURE__ */ l(ht, { className: L.root, "data-testid": e, children: [
+    /* @__PURE__ */ o(ct, {}),
+    /* @__PURE__ */ o(
+      ft,
       {
         variant: "permanent",
         anchor: "left",
         transitionDuration: null,
         open: n,
-        children: e
+        children: t
       }
     )
   ] });
 }
-const ge = 24, fe = 64, T = "TopBar", u = {
-  topStripe: `${T}-topStripe`,
-  titleBar: `${T}-titleBar`,
-  titleSlider: `${T}-titleSlider`,
-  titleText: `${T}-titleText`,
-  leftPanelButton: `${T}-leftPanelButton`,
-  rightPanelButton: `${T}-leftPanelButton`
-}, he = L("div", {
-  shouldForwardProp: (t) => !["leftPanel", "rightPanel"].includes(t),
-  name: T
-})(({ theme: t, leftPanel: e, rightPanel: n }) => {
-  var o, l;
+const yt = 24, Ct = 64, N = "TopBar", T = {
+  topStripe: `${N}-topStripe`,
+  titleBar: `${N}-titleBar`,
+  titleSlider: `${N}-titleSlider`,
+  titleText: `${N}-titleText`,
+  leftPanelButton: `${N}-leftPanelButton`,
+  rightPanelButton: `${N}-leftPanelButton`
+}, mt = W("div", {
+  shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
+  name: N
+})(({ theme: e, leftPanel: t, rightPanel: n }) => {
+  var i, a;
   return {
     width: "100%",
-    [`& .${u.topStripe}`]: {
+    [`& .${T.topStripe}`]: {
       width: "100%",
-      height: `${ge}px`,
-      backgroundColor: t.palette.primary.main
+      height: `${yt}px`,
+      backgroundColor: e.palette.primary.main
     },
-    [`& .${u.titleBar}`]: {
-      backgroundColor: t.palette.primary.light,
-      height: `${fe}px`,
-      padding: t.spacing(0, 3),
+    [`& .${T.titleBar}`]: {
+      backgroundColor: e.palette.primary.light,
+      height: `${Ct}px`,
+      padding: e.spacing(0, 3),
       width: "100%"
     },
-    [`& .${u.titleSlider}`]: r(r({
+    [`& .${T.titleSlider}`]: r(r({
       height: "100%",
       display: "flex",
       alignItems: "center",
       color: "white",
-      transition: t.transitions.create("margin", {
-        easing: t.transitions.easing.sharp,
-        duration: t.transitions.duration.leavingScreen
+      transition: e.transitions.create("margin", {
+        easing: e.transitions.easing.sharp,
+        duration: e.transitions.duration.leavingScreen
       }),
-      [`& .${u.leftPanelButton}`]: {
-        marginRight: t.spacing(2),
+      [`& .${T.leftPanelButton}`]: {
+        marginRight: e.spacing(2),
         flexGrow: 0
       },
-      [`& .${u.titleText}`]: {
+      [`& .${T.titleText}`]: {
         flexGrow: 1
       },
-      [`& .${u.rightPanelButton}`]: {
+      [`& .${T.rightPanelButton}`]: {
         flexGrow: 0
       }
-    }, (e == null ? void 0 : e.open) && {
-      transition: t.transitions.create("margin", {
-        easing: t.transitions.easing.easeOut,
-        duration: t.transitions.duration.enteringScreen
+    }, (t == null ? void 0 : t.open) && {
+      transition: e.transitions.create("margin", {
+        easing: e.transitions.easing.easeOut,
+        duration: e.transitions.duration.enteringScreen
       }),
-      marginLeft: `${(o = e == null ? void 0 : e.width) != null ? o : 0}px`
+      marginLeft: `${(i = t == null ? void 0 : t.width) != null ? i : 0}px`
     }), (n == null ? void 0 : n.open) && {
-      transition: t.transitions.create("margin", {
-        easing: t.transitions.easing.easeOut,
-        duration: t.transitions.duration.enteringScreen
+      transition: e.transitions.create("margin", {
+        easing: e.transitions.easing.easeOut,
+        duration: e.transitions.duration.enteringScreen
       }),
-      marginRight: `${(l = n == null ? void 0 : n.width) != null ? l : 0}px`
+      marginRight: `${(a = n == null ? void 0 : n.width) != null ? a : 0}px`
     })
   };
 });
-function me({
-  titleText: t = "",
-  leftPanel: e,
+function bt({
+  titleText: e = "",
+  leftPanel: t,
   rightPanel: n,
-  "data-testid": o
+  "data-testid": i
 }) {
-  return /* @__PURE__ */ c(he, { leftPanel: e, rightPanel: n, "data-testid": o, children: [
-    /* @__PURE__ */ i("div", { className: u.topStripe }),
-    /* @__PURE__ */ i("div", { className: u.titleBar, children: /* @__PURE__ */ c(yt, { className: u.titleSlider, children: [
-      e !== void 0 && !e.open && e.showOpenArrow && /* @__PURE__ */ c(
-        ft,
+  return /* @__PURE__ */ l(mt, { leftPanel: t, rightPanel: n, "data-testid": i, children: [
+    /* @__PURE__ */ o("div", { className: T.topStripe }),
+    /* @__PURE__ */ o("div", { className: T.titleBar, children: /* @__PURE__ */ l(O, { className: T.titleSlider, children: [
+      t !== void 0 && !t.open && t.showOpenArrow && /* @__PURE__ */ l(
+        M,
         {
-          className: u.leftPanelButton,
+          className: T.leftPanelButton,
           color: "inherit",
           "aria-label": "Open left side panel",
-          onClick: e == null ? void 0 : e.onOpen,
+          onClick: t == null ? void 0 : t.onOpen,
           edge: "start",
           size: "large",
           children: [
             " ",
-            /* @__PURE__ */ i(It, {})
+            /* @__PURE__ */ o(Pe, {})
           ]
         }
       ),
-      /* @__PURE__ */ i(D, { className: u.titleText, variant: "h6", noWrap: !0, children: t }),
-      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ c(
-        ft,
+      /* @__PURE__ */ o(A, { className: T.titleText, variant: "h6", noWrap: !0, children: e }),
+      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ l(
+        M,
         {
-          className: u.rightPanelButton,
+          className: T.rightPanelButton,
           color: "inherit",
           "aria-label": "Open right side panel",
           onClick: n == null ? void 0 : n.onOpen,
@@ -293,15 +324,15 @@ function me({
           size: "large",
           children: [
             " ",
-            /* @__PURE__ */ i(Ft, {})
+            /* @__PURE__ */ o(ke, {})
           ]
         }
       )
     ] }) })
   ] });
 }
-const Nt = 400, ve = L(St, {
-  shouldForwardProp: (t) => (
+const Me = 400, It = W(ot, {
+  shouldForwardProp: (e) => (
     // Note we do want anchor to be forwarded to the Drawer component
     ![
       "width",
@@ -310,35 +341,35 @@ const Nt = 400, ve = L(St, {
       "navBarOpen",
       "navBarWidthOpen",
       "navBarWidthClosed"
-    ].includes(t)
+    ].includes(e)
   ),
   name: "SidePanelDrawer"
 })(
-  ({ width: t, debugOpacity: e = !1, anchor: n, navBarOpen: o, navBarWidthOpen: l, navBarWidthClosed: g }) => ({
-    width: t,
+  ({ width: e, debugOpacity: t = !1, anchor: n, navBarOpen: i, navBarWidthOpen: a, navBarWidthClosed: v }) => ({
+    width: e,
     "& .MuiDrawer-paper": r(r({
       position: "absolute",
-      width: t,
+      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)"
-    }, e && {
+    }, t && {
       opacity: "50%"
     }), n === "left" && r({
-      marginLeft: `${g}px`
-    }, o && {
-      marginLeft: `${l}px`
+      marginLeft: `${v}px`
+    }, i && {
+      marginLeft: `${a}px`
     }))
   })
-), xe = L(Yt, {
-  shouldForwardProp: (t) => !["anchor"].includes(t)
-})(({ theme: t, anchor: e }) => C(r({
+), Nt = W(O, {
+  shouldForwardProp: (e) => !["anchor"].includes(e)
+})(({ theme: e, anchor: t }) => h(r({
   display: "flex",
   alignItems: "center",
-  padding: t.spacing(2)
-}, t.mixins.toolbar), {
-  justifyContent: e === "left" ? "space-between" : "flex-start",
-  backgroundColor: t.palette.primary.light,
+  padding: e.spacing(2)
+}, e.mixins.toolbar), {
+  justifyContent: t === "left" ? "space-between" : "flex-start",
+  backgroundColor: e.palette.primary.light,
   height: "88px",
   "&,*": {
     color: "white"
@@ -347,495 +378,632 @@ const Nt = 400, ve = L(St, {
     fontSize: "22px"
   },
   " .MuiButtonBase-root": {
-    marginRight: e === "right" ? t.spacing(2) : 0
+    marginRight: t === "right" ? e.spacing(2) : 0
   }
 }));
-function vt({
-  children: t,
-  anchor: e = "left",
+function Ce({
+  children: e,
+  anchor: t = "left",
   open: n,
-  onClose: o = () => {
+  onClose: i = () => {
   },
-  titleText: l = "",
-  width: g = Nt,
-  showCloseArrow: f = !0,
-  debugOpacity: x = !1,
-  headerBoxProps: h = {},
-  onOpened: d,
-  onClosed: m,
+  titleText: a = "",
+  width: v = Me,
+  showCloseArrow: g = !0,
+  debugOpacity: f = !1,
+  headerBoxProps: u = {},
+  onOpened: s,
+  onClosed: B,
   "data-testid": w,
-  navBarOpen: b = !1,
-  navBarWidthOpen: p = 0,
-  navBarWidthClosed: y = 0
+  navBarOpen: d = !1,
+  navBarWidthOpen: x = 0,
+  navBarWidthClosed: C = 0
 }) {
-  return /* @__PURE__ */ c(
-    ve,
+  return /* @__PURE__ */ l(
+    It,
     {
       SlideProps: {
-        onEntered: () => d == null ? void 0 : d(),
-        onExited: () => m == null ? void 0 : m()
+        onEntered: () => s == null ? void 0 : s(),
+        onExited: () => B == null ? void 0 : B()
       },
       variant: "persistent",
-      anchor: e,
+      anchor: t,
       open: n,
-      width: g,
-      debugOpacity: x,
+      width: v,
+      debugOpacity: f,
       "data-testid": w,
-      navBarOpen: b,
-      navBarWidthOpen: p,
-      navBarWidthClosed: y,
+      navBarOpen: d,
+      navBarWidthOpen: x,
+      navBarWidthClosed: C,
       children: [
-        /* @__PURE__ */ i(xe, C(r({ anchor: e }, h), { children: e === "left" ? /* @__PURE__ */ c(U, { children: [
-          /* @__PURE__ */ i(D, { variant: "h6", color: "inherit", component: "div", children: l }),
-          f && /* @__PURE__ */ c(ht, { onClick: o, size: "large", "aria-label": "Close left side panel", children: [
-            /* @__PURE__ */ i(Ft, { "data-testid": "arrowbackicon" }),
+        /* @__PURE__ */ o(Nt, h(r({ anchor: t }, u), { children: t === "left" ? /* @__PURE__ */ l(Q, { children: [
+          /* @__PURE__ */ o(A, { variant: "h6", color: "inherit", component: "div", children: a }),
+          g && /* @__PURE__ */ l(M, { onClick: i, size: "large", "aria-label": "Close left side panel", children: [
+            /* @__PURE__ */ o(ke, { "data-testid": "arrowbackicon" }),
             " "
           ] })
-        ] }) : /* @__PURE__ */ c(U, { children: [
-          f && /* @__PURE__ */ c(ht, { onClick: o, size: "large", "aria-label": "Close right side panel", children: [
-            /* @__PURE__ */ i(It, {}),
+        ] }) : /* @__PURE__ */ l(Q, { children: [
+          g && /* @__PURE__ */ l(M, { onClick: i, size: "large", "aria-label": "Close right side panel", children: [
+            /* @__PURE__ */ o(Pe, {}),
             " "
           ] }),
-          /* @__PURE__ */ i(D, { variant: "h6", color: "inherit", component: "div", children: l })
+          /* @__PURE__ */ o(A, { variant: "h6", color: "inherit", component: "div", children: a })
         ] }) })),
-        t
+        e
       ]
     }
   );
 }
-const we = L("div", {
-  shouldForwardProp: (t) => !["leftPanel", "rightPanel"].includes(t),
+const $t = W("div", {
+  shouldForwardProp: (e) => !["leftPanel", "rightPanel"].includes(e),
   name: "PanelAwareMargins"
-})(({ theme: t, leftPanel: e, rightPanel: n }) => {
-  var o, l;
+})(({ theme: e, leftPanel: t, rightPanel: n }) => {
+  var i, a;
   return r(r({
-    transition: t.transitions.create("margin", {
-      easing: t.transitions.easing.sharp,
-      duration: t.transitions.duration.leavingScreen
+    transition: e.transitions.create("margin", {
+      easing: e.transitions.easing.sharp,
+      duration: e.transitions.duration.leavingScreen
     })
-  }, (e == null ? void 0 : e.open) && {
-    transition: t.transitions.create("margin", {
-      easing: t.transitions.easing.easeOut,
-      duration: t.transitions.duration.enteringScreen
+  }, (t == null ? void 0 : t.open) && {
+    transition: e.transitions.create("margin", {
+      easing: e.transitions.easing.easeOut,
+      duration: e.transitions.duration.enteringScreen
     }),
-    marginLeft: `${(o = e == null ? void 0 : e.width) != null ? o : 0}px`
+    marginLeft: `${(i = t == null ? void 0 : t.width) != null ? i : 0}px`
   }), (n == null ? void 0 : n.open) && {
-    transition: t.transitions.create("margin", {
-      easing: t.transitions.easing.easeOut,
-      duration: t.transitions.duration.enteringScreen
+    transition: e.transitions.create("margin", {
+      easing: e.transitions.easing.easeOut,
+      duration: e.transitions.duration.enteringScreen
     }),
-    marginRight: `${(l = n == null ? void 0 : n.width) != null ? l : 0}px`
+    marginRight: `${(a = n == null ? void 0 : n.width) != null ? a : 0}px`
   });
-}), Ce = L(Zt, {
+}), St = W(Se, {
   name: "PageContainer"
-})(({ theme: t }) => ({
+})(({ theme: e }) => ({
   // Horizontal padding comes from the Container's gutter
-  paddingTop: t.spacing(3),
-  paddingBottom: t.spacing(3)
-})), tt = !1, et = !1, G = {
+  paddingTop: e.spacing(3),
+  paddingBottom: e.spacing(3)
+})), se = !1, de = !1, q = {
   titleText: "",
   flavour: "push",
-  width: Nt,
+  width: Me,
   arrowButtons: "both",
   startOpen: !1,
   open: void 0,
   onChangeOpen: void 0,
-  content: /* @__PURE__ */ i(U, {}),
+  content: /* @__PURE__ */ o(Q, {}),
   onOpened: void 0,
   onClosed: void 0,
   dataTestId: void 0
 };
-function rn({
-  children: t,
-  titleText: e = "",
+function Bn({
+  children: e,
+  titleText: t = "",
   leftPanel: n,
-  rightPanel: o,
-  sidePanelsAreMutuallyExclusive: l = !0,
-  debugOpacity: g = !1,
-  pageContainerProps: f,
-  pageContentDataTestId: x,
-  topBarDataTestId: h,
-  navBarOpen: d,
-  navBarWidthOpen: m,
+  rightPanel: i,
+  sidePanelsAreMutuallyExclusive: a = !0,
+  debugOpacity: v = !1,
+  pageContainerProps: g,
+  pageContentDataTestId: f,
+  topBarDataTestId: u,
+  navBarOpen: s,
+  navBarWidthOpen: B,
   navBarWidthClosed: w
 }) {
-  const [b, p] = S(tt), [y, I] = S(et), [q, M] = S(tt), [X, P] = S(et), k = n !== void 0, E = o !== void 0, {
-    titleText: v,
-    content: R,
-    flavour: _,
-    open: N,
-    onChangeOpen: $,
-    width: a,
-    arrowButtons: s,
-    startOpen: F,
-    onOpened: Dt,
-    onClosed: Lt,
-    dataTestId: Mt
-  } = n ? r(r({}, G), n) : r({}, G), {
-    titleText: Rt,
-    content: _t,
-    flavour: it,
-    open: V,
-    onChangeOpen: at,
-    width: j,
-    arrowButtons: H,
-    startOpen: z,
-    onOpened: Ht,
-    onClosed: zt,
-    dataTestId: Wt
-  } = o ? r(r({}, G), o) : r({}, G);
-  gt(() => {
-    F !== tt && (p(F), M(F));
-  }, [F]), gt(() => {
-    z !== et && (I(z), P(z));
-  }, [z]);
-  const Q = N === void 0 ? b : N, K = V === void 0 ? y : V, st = (B) => {
-    N === void 0 && (p(B), l && E && (B ? (I(!1), P(y)) : I(X))), $ && $(B);
-  }, lt = (B) => {
-    V === void 0 && (I(B), l && k && (B ? (p(!1), M(b)) : p(q))), at && at(B);
+  const [d, x] = $(se), [C, m] = $(de), [Z, F] = $(se), [ee, P] = $(de), k = n !== void 0, D = i !== void 0, {
+    titleText: y,
+    content: z,
+    flavour: G,
+    open: _,
+    onChangeOpen: H,
+    width: c,
+    arrowButtons: p,
+    startOpen: S,
+    onOpened: Ue,
+    onClosed: Xe,
+    dataTestId: Ve
+  } = n ? r(r({}, q), n) : r({}, q), {
+    titleText: qe,
+    content: je,
+    flavour: ue,
+    open: te,
+    onChangeOpen: he,
+    width: ne,
+    arrowButtons: U,
+    startOpen: X,
+    onOpened: Qe,
+    onClosed: Ye,
+    dataTestId: Ke
+  } = i ? r(r({}, q), i) : r({}, q);
+  K(() => {
+    S !== se && (x(S), F(S));
+  }, [S]), K(() => {
+    X !== de && (m(X), P(X));
+  }, [X]);
+  const re = _ === void 0 ? d : _, oe = te === void 0 ? C : te, ge = (b) => {
+    _ === void 0 && (x(b), a && D && (b ? (m(!1), P(C)) : m(ee))), H && H(b);
+  }, ve = (b) => {
+    te === void 0 && (m(b), a && k && (b ? (x(!1), F(d)) : x(Z))), he && he(b);
   };
-  return /* @__PURE__ */ c(yt, { children: [
-    k && /* @__PURE__ */ i(
-      vt,
+  return /* @__PURE__ */ l(O, { children: [
+    k && /* @__PURE__ */ o(
+      Ce,
       {
-        "data-testid": Mt,
+        "data-testid": Ve,
         anchor: "left",
-        open: Q,
-        onClose: () => st(!1),
-        width: a,
-        titleText: v,
-        debugOpacity: g,
-        showCloseArrow: s === "both" || s === "close",
-        onOpened: Dt,
-        onClosed: Lt,
-        navBarOpen: d,
-        navBarWidthOpen: m,
+        open: re,
+        onClose: () => ge(!1),
+        width: c,
+        titleText: y,
+        debugOpacity: v,
+        showCloseArrow: p === "both" || p === "close",
+        onOpened: Ue,
+        onClosed: Xe,
+        navBarOpen: s,
+        navBarWidthOpen: B,
         navBarWidthClosed: w,
-        children: R
+        children: z
       }
     ),
-    E && /* @__PURE__ */ i(
-      vt,
+    D && /* @__PURE__ */ o(
+      Ce,
       {
-        "data-testid": Wt,
+        "data-testid": Ke,
         anchor: "right",
-        open: K,
-        onClose: () => lt(!1),
-        width: j,
-        titleText: Rt,
-        debugOpacity: g,
-        showCloseArrow: H === "both" || H === "close",
-        onOpened: Ht,
-        onClosed: zt,
-        navBarOpen: d,
-        navBarWidthOpen: m,
+        open: oe,
+        onClose: () => ve(!1),
+        width: ne,
+        titleText: qe,
+        debugOpacity: v,
+        showCloseArrow: U === "both" || U === "close",
+        onOpened: Qe,
+        onClosed: Ye,
+        navBarOpen: s,
+        navBarWidthOpen: B,
         navBarWidthClosed: w,
-        children: _t
+        children: je
       }
     ),
-    /* @__PURE__ */ i(
-      me,
+    /* @__PURE__ */ o(
+      bt,
       r(r({
-        titleText: e,
-        "data-testid": h
-      }, k && _ === "push" ? {
+        titleText: t,
+        "data-testid": u
+      }, k && G === "push" ? {
         leftPanel: {
-          open: Q,
-          width: a,
-          onOpen: () => st(!0),
-          showOpenArrow: s === "both" || s === "open"
+          open: re,
+          width: c,
+          onOpen: () => ge(!0),
+          showOpenArrow: p === "both" || p === "open"
         }
-      } : {}), E && it === "push" ? {
+      } : {}), D && ue === "push" ? {
         rightPanel: {
-          open: K,
-          width: j,
-          onOpen: () => lt(!0),
-          showOpenArrow: H === "both" || H === "open"
+          open: oe,
+          width: ne,
+          onOpen: () => ve(!0),
+          showOpenArrow: U === "both" || U === "open"
         }
       } : {})
     ),
-    /* @__PURE__ */ i(
-      we,
-      C(r(r({}, _ === "push" ? {
+    /* @__PURE__ */ o(
+      $t,
+      h(r(r({}, G === "push" ? {
         leftPanel: {
-          open: Q,
-          width: a
+          open: re,
+          width: c
         }
-      } : {}), it === "push" ? {
+      } : {}), ue === "push" ? {
         rightPanel: {
-          open: K,
-          width: j
+          open: oe,
+          width: ne
         }
       } : {}), {
-        children: /* @__PURE__ */ i(Ce, C(r({ "data-testid": x }, f), { children: t }))
+        children: /* @__PURE__ */ o(St, h(r({ "data-testid": f }, g), { children: e }))
       })
     )
   ] });
 }
-const Be = Tt({
-  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"
+const Lt = 64, At = 64, Et = 256, Pt = {
+  navBarOpen: !0,
+  titleText: "",
+  navBarWidthOpen: Et,
+  navBarWidthClosed: At,
+  topBarHeight: Lt,
+  navBarTop: void 0
+};
+function kt(e, t) {
+  switch (t.type) {
+    case "toggleNavBarOpen":
+      return h(r({}, e), {
+        navBarOpen: !e.navBarOpen
+      });
+    case "setNavBarOpen":
+      return h(r({}, e), {
+        navBarOpen: t.payload
+      });
+    case "setTitleText":
+      return h(r({}, e), {
+        titleText: t.payload
+      });
+    case "setNavBarWidthOpen":
+      return h(r({}, e), {
+        navBarWidthOpen: t.payload
+      });
+    case "setTopBarHeight":
+      return h(r({}, e), {
+        topBarHeight: t.payload
+      });
+    case "setNavBarTop":
+      return h(r({}, e), {
+        navBarTop: t.payload
+      });
+    default:
+      throw new Error("Invalid action.type");
+  }
+}
+const We = le(null), Dt = {}, _t = {}, Ht = ({
+  overrideState: e = Dt,
+  overrideActions: t = _t,
+  children: n
+}) => {
+  const [
+    { titleText: i, topBarHeight: a, navBarOpen: v, navBarWidthOpen: g, navBarWidthClosed: f, navBarTop: u },
+    s
+  ] = tt(kt, Pt), B = nt(
+    () => ({
+      toggleNavBarOpen: () => s({ type: "toggleNavBarOpen" }),
+      setNavBarOpen: (d) => s({ type: "setNavBarOpen", payload: d }),
+      setNavBarWidthOpen: (d) => s({ type: "setNavBarWidthOpen", payload: d }),
+      setNavBarWidthClosed: (d) => s({ type: "setNavBarWidthClosed", payload: d }),
+      setTitleText: (d) => s({ type: "setTitleText", payload: d }),
+      setTopBarHeight: (d) => s({ type: "setTopBarHeight", payload: d }),
+      setNavBarTop: (d) => s({ type: "setNavBarTop", payload: d }),
+      clearNavBarTop: () => s({ type: "setNavBarTop", payload: void 0 })
+    }),
+    []
+  ), w = r(r(r({
+    navBarOpen: v,
+    navBarWidthOpen: g,
+    navBarWidthClosed: f,
+    titleText: i,
+    topBarHeight: a,
+    navBarTop: u
+  }, B), e), t);
+  return /* @__PURE__ */ o(We.Provider, { value: w, children: n });
+}, Fe = () => {
+  const e = ce(We);
+  if (e === null)
+    throw new J("Error: Tried to call useAppLayout() outside of a <AppLayoutProvider>");
+  return e;
+}, Rt = "TopBar", Mt = {
+  titleText: `${Rt}-titleText`
+};
+function Wt({ titleText: e = "", height: t, "data-testid": n }) {
+  const { toggleNavBarOpen: i } = Fe();
+  return /* @__PURE__ */ o("header", { "data-testid": n, children: /* @__PURE__ */ l(
+    pe,
+    {
+      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
+      },
+      children: [
+        /* @__PURE__ */ o(M, { size: "medium", color: "inherit", sx: { padding: 1.5 }, onClick: i, children: /* @__PURE__ */ o(ut, { fontSize: "medium" }) }),
+        /* @__PURE__ */ o(A, { className: Mt.titleText, variant: "h6", children: e })
+      ]
     }
+  ) });
+}
+const j = "Navbar", R = {
+  root: `${j}-root`,
+  menuButton: `${j}-menuButton`,
+  hide: `${j}-hide`,
+  content: `${j}-content`
+  // userInfoHolder: `${PREFIX}-userInfoHolder`,
+  // settings: `${PREFIX}-settings`,
+  // pieChartIcon: `${PREFIX}-pieChartIcon`,
+}, Ft = E("div", { name: "NavBar" })(({ theme: e }) => ({
+  [`&.${R.root}`]: {
+    display: "flex"
   },
-  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: t }) => ({
-          "&.Mui-selected": {
-            backgroundColor: Z(
-              t.palette.secondary.main,
-              t.palette.action.selectedOpacity
-            ),
-            "&:hover": {
-              backgroundColor: Z(
-                t.palette.secondary.main,
-                t.palette.action.selectedOpacity
-              )
-            },
-            "&.Mui-focusVisible": {
-              backgroundColor: Z(
-                t.palette.secondary.main,
-                t.palette.action.focusOpacity
-              )
-            }
-          }
-        })
-      }
-    }
+  [`& .${R.menuButton}`]: {
+    marginRight: 36
   },
-  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
-    }
+  [`& .${R.hide}`]: {
+    display: "none"
+  },
+  [`& .${R.content}`]: {
+    flexGrow: 1,
+    padding: e.spacing(3)
   }
-}), Oe = Tt({
-  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"
+  // [`& .${classes.userInfoHolder}`]: {
+  //   height: '148px',
+  //   marginTop: '64px',
+  //   marginBottom: '16px',
+  // },
+})), ze = (e, t) => {
+  var n, i;
+  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"
+    // Provide default so tests don't need to wrap theme provider
+  };
+}, me = (e, t, n) => r({
+  width: t,
+  transition: e.transitions.create("width", {
+    easing: e.transitions.easing.sharp,
+    duration: e.transitions.duration.enteringScreen
+  })
+}, ze(e, n)), be = (e, t, n) => r({
+  width: t,
+  transition: e.transitions.create("width", {
+    easing: e.transitions.easing.sharp,
+    duration: e.transitions.duration.leavingScreen
+  }),
+  overflowX: "hidden"
+}, ze(e, n)), zt = E(Le, {
+  shouldForwardProp: (e) => !["open", "widthOpen", "widthClosed", "offsetTop"].includes(e)
+})(({ theme: e, open: t, widthOpen: n, widthClosed: i, offsetTop: a }) => r(r({
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box"
+}, t && h(r({}, me(e, n, a)), {
+  "& .MuiDrawer-paper": me(e, n, a)
+})), !t && h(r({}, be(e, i, a)), {
+  "& .MuiDrawer-paper": be(e, i, a)
+})));
+function Gt({ links: e }) {
+  return /* @__PURE__ */ o("div", { children: "LinksMenu not implemented yet" });
+}
+function Ut({
+  open: e,
+  offsetTop: t = 0,
+  widthOpen: n,
+  widthClosed: i,
+  "data-testid": a,
+  top: v,
+  middle: g,
+  bottom: f
+}) {
+  return /* @__PURE__ */ o(Ft, { className: R.root, "data-testid": a, children: /* @__PURE__ */ o(
+    zt,
+    {
+      variant: "permanent",
+      anchor: "left",
+      open: e,
+      widthOpen: n,
+      widthClosed: i,
+      offsetTop: t,
+      children: /* @__PURE__ */ l(O, { component: "nav", sx: {}, children: [
+        v && /* @__PURE__ */ l(O, { sx: { flexGrow: 1 }, children: [
+          v,
+          /* @__PURE__ */ o(Te, { variant: "middle" })
+        ] }),
+        Array.isArray(g) ? /* @__PURE__ */ o(Gt, { links: g }) : g,
+        f && /* @__PURE__ */ l(O, { sx: {}, children: [
+          /* @__PURE__ */ o(Te, { variant: "middle" }),
+          f
+        ] })
+      ] })
     }
-  },
-  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"
+  ) });
+}
+function Xt({ children: e, topBarHeight: t }) {
+  return /* @__PURE__ */ o(
+    O,
+    {
+      sx: {
+        overflow: "auto",
+        height: `calc(100vh - ${t}px)`,
+        scrollbarGutter: "stable",
+        // scrollbarGutter: 'stable both-edges',
+        flexGrow: 1
+      },
+      children: /* @__PURE__ */ o(
+        Se,
+        {
+          component: "main",
+          id: "main-content",
+          sx: { paddingTop: 3, paddingBottom: 3, flexGrow: 1 },
+          children: e
+        }
+      )
     }
-  }
-});
-function on({
-  name: t = "internal",
-  children: e
+  );
+}
+function Vt({
+  children: e,
+  initialTitleText: t,
+  initialNavBarOpen: n,
+  pageContainerProps: i,
+  pageContentDataTestId: a,
+  topBarDataTestId: v,
+  navBarDataTestId: g,
+  navBarMiddle: f
 }) {
-  return /* @__PURE__ */ i(Qt, { theme: t === "internal" ? Be : t === "fed21" ? Oe : void 0, children: e });
+  const {
+    navBarOpen: u,
+    setNavBarOpen: s,
+    titleText: B,
+    setTitleText: w,
+    topBarHeight: d,
+    navBarWidthOpen: x,
+    navBarWidthClosed: C,
+    navBarTop: m
+  } = Fe();
+  return K(() => {
+    t !== void 0 && w(t);
+  }, [t, w]), K(() => {
+    console.log(n), n !== void 0 && s(n);
+  }, [n, s]), /* @__PURE__ */ l(O, { children: [
+    /* @__PURE__ */ o(it, {}),
+    /* @__PURE__ */ o(Wt, { titleText: B, "data-testid": v, height: d }),
+    /* @__PURE__ */ l(O, { sx: { display: "flex" }, children: [
+      /* @__PURE__ */ o(
+        Ut,
+        {
+          open: u,
+          top: m,
+          middle: f,
+          bottom: /* @__PURE__ */ o(O, { sx: { padding: 2 }, children: /* @__PURE__ */ o(pe, { 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" }) }),
+          widthOpen: x,
+          widthClosed: C,
+          offsetTop: d,
+          "data-testid": g
+        }
+      ),
+      /* @__PURE__ */ o(
+        Xt,
+        h(r({
+          "data-testid": a,
+          topBarHeight: d
+        }, i), {
+          children: e
+        })
+      )
+    ] })
+  ] });
+}
+function wn(e) {
+  return /* @__PURE__ */ o(Ht, { children: /* @__PURE__ */ o(Vt, r({}, e)) });
 }
-const Te = {
+const qt = {
   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
-}, Se = {
-  shouldClose: (t, e) => e !== "clickaway"
-}, xt = {
+}, jt = {
+  shouldClose: (e, t) => t !== "clickaway"
+}, Ie = {
   message: "",
   severity: "info",
   variant: "standard",
   progressIndicator: void 0
   // Can use 'circular' or 'linear'
-}, wt = 100, Ct = 2e3, be = 2e3, ye = (() => {
-  let t = 0;
-  return () => (t += 1, t);
-})(), Ie = {
+}, Ne = 100, $e = 2e3, Qt = 2e3, Yt = (() => {
+  let e = 0;
+  return () => (e += 1, e);
+})(), Kt = {
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px"
-}, Fe = {}, Ae = {}, $t = Bt(null);
-function Pe(g) {
-  var f = g, {
-    overrideState: t = Fe,
-    overrideActions: e = Ae,
-    shouldClose: n = Se.shouldClose,
-    children: o
-  } = f, l = pt(f, [
+}, Jt = {}, Zt = {}, Ge = le(null);
+function en(v) {
+  var g = v, {
+    overrideState: e = Jt,
+    overrideActions: t = Zt,
+    shouldClose: n = jt.shouldClose,
+    children: i
+  } = g, a = Be(g, [
     "overrideState",
     "overrideActions",
     "shouldClose",
     "children"
   ]);
-  var $;
-  const [{ open: x }, h] = S({ open: !1 }), d = Y([]), m = Y(Date.now()), w = Y(0), b = nt((a) => {
-    h({ open: a });
-  }, []), p = nt((a = {}) => {
-    w.current += 1, d.current.length >= wt && Date.now() - m.current >= Ct && (m.current = Date.now(), console.error(
-      `SaladBarProvider: MAX_QUEUE_LENGTH (${wt}) hit ${w.current} times in last ${Ct}ms)`
+  var H;
+  const [{ open: f }, u] = $({ open: !1 }), s = ae([]), B = ae(Date.now()), w = ae(0), d = Y((c) => {
+    u({ open: c });
+  }, []), x = Y((c = {}) => {
+    w.current += 1, s.current.length >= Ne && Date.now() - B.current >= $e && (B.current = Date.now(), console.error(
+      `SaladBarProvider: MAX_QUEUE_LENGTH (${Ne}) hit ${w.current} times in last ${$e}ms)`
     ), w.current = 0);
-    const s = r(C(r({}, xt), {
-      key: ye()
-    }), a);
-    return d.current.push(s), d.current.length === 1 && h({ open: !0 }), s.key;
-  }, []), y = (a = "", s = {}) => p(r({ message: a, severity: "success" }, s)), I = (a = "", s = {}) => p(r({ message: a, severity: "info" }, s)), q = (a = "", s = {}) => p(r({ message: a, severity: "warning" }, s)), M = (a = "", s = {}) => p(r({ message: a, severity: "error" }, s)), X = (a) => {
-    const s = d.current.findIndex((F) => F.key === a);
-    if (s !== -1)
-      return s === 0 ? (h({ open: !1 }), d.current[0]) : d.current.splice(s, 1);
-  }, P = (a, s) => {
-    n(a, s) && h({ open: !1 });
+    const p = r(h(r({}, Ie), {
+      key: Yt()
+    }), c);
+    return s.current.push(p), s.current.length === 1 && u({ open: !0 }), p.key;
+  }, []), C = (c = "", p = {}) => x(r({ message: c, severity: "success" }, p)), m = (c = "", p = {}) => x(r({ message: c, severity: "info" }, p)), Z = (c = "", p = {}) => x(r({ message: c, severity: "warning" }, p)), F = (c = "", p = {}) => x(r({ message: c, severity: "error" }, p)), ee = (c) => {
+    const p = s.current.findIndex((S) => S.key === c);
+    if (p !== -1)
+      return p === 0 ? (u({ open: !1 }), s.current[0]) : s.current.splice(p, 1);
+  }, P = (c, p) => {
+    n(c, p) && u({ open: !1 });
   }, k = () => {
-  }, E = () => {
-    d.current.shift(), d.current.length > 0 && h({ open: !0 });
-  }, v = ($ = d.current[0]) != null ? $ : r({}, xt), R = {};
-  "autoHideDuration" in v && (R.autoHideDuration = v.autoHideDuration);
-  const _ = r(r({}, Te), l), N = r(r({
-    open: x,
-    setOpen: b,
-    enqueueNotification: p,
-    enqueueSuccessNotification: y,
-    enqueueInfoNotification: I,
-    enqueueWarningNotification: q,
-    enqueueErrorNotification: M,
-    removeNotification: X
-  }, t), e);
-  return /* @__PURE__ */ c($t.Provider, { value: N, children: [
-    o,
-    /* @__PURE__ */ i(
-      te,
-      C(r(r({}, _), R), {
-        open: x,
+  }, D = () => {
+    s.current.shift(), s.current.length > 0 && u({ open: !0 });
+  }, y = (H = s.current[0]) != null ? H : r({}, Ie), z = {};
+  "autoHideDuration" in y && (z.autoHideDuration = y.autoHideDuration);
+  const G = r(r({}, qt), a), _ = r(r({
+    open: f,
+    setOpen: d,
+    enqueueNotification: x,
+    enqueueSuccessNotification: C,
+    enqueueInfoNotification: m,
+    enqueueWarningNotification: Z,
+    enqueueErrorNotification: F,
+    removeNotification: ee
+  }, e), t);
+  return /* @__PURE__ */ l(Ge.Provider, { value: _, children: [
+    i,
+    /* @__PURE__ */ o(
+      at,
+      h(r(r({}, G), z), {
+        open: f,
         onClose: P,
         TransitionProps: {
-          onExited: E,
+          onExited: D,
           onExit: k
         },
-        sx: { zIndex: be },
-        children: /* @__PURE__ */ c("div", { children: [
-          /* @__PURE__ */ i(
-            ee,
+        sx: { zIndex: Qt },
+        children: /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ o(
+            st,
             {
-              onClose: (a) => P(a, "closeAlert"),
-              severity: v.severity,
+              onClose: (c) => P(c, "closeAlert"),
+              severity: y.severity,
               variant: "filled",
-              icon: v.progressIndicator === "circular" ? /* @__PURE__ */ i(re, { size: "1em" }) : void 0,
-              style: v.progressIndicator === "linear" ? Ie : void 0,
-              children: v.message
+              icon: y.progressIndicator === "circular" ? /* @__PURE__ */ o(dt, { size: "1em" }) : void 0,
+              style: y.progressIndicator === "linear" ? Kt : void 0,
+              children: y.message
             }
           ),
-          v.progressIndicator === "linear" && /* @__PURE__ */ i(ne, { color: "primary" })
+          y.progressIndicator === "linear" && /* @__PURE__ */ o(lt, { color: "primary" })
         ] })
       })
     )
   ] });
 }
-function an() {
-  const t = Ot($t);
-  if (t === null)
-    throw new ot("Error: Tried to useSaladBar outside of a <SaladBarProvider>");
-  return t;
+function Tn() {
+  const e = ce(Ge);
+  if (e === null)
+    throw new J("Error: Tried to useSaladBar outside of a <SaladBarProvider>");
+  return e;
 }
-const sn = bt(
-  (t = { autoHideDuration: 1 }, e = {}, n = {}) => ({ children: o }) => /* @__PURE__ */ i(Pe, C(r({}, t), { overrideState: e, overrideActions: n, children: o }))
+const On = Ae(
+  (e = { autoHideDuration: 1 }, t = {}, n = {}) => ({ children: i }) => /* @__PURE__ */ o(en, h(r({}, e), { overrideState: t, overrideActions: n, children: i }))
 );
 export {
-  on as AgThemeProvider,
-  $t as Context,
-  ot as ContextError,
-  Ze as ExampleComponent,
-  Pt as NAVBAR_WIDTH_CLOSED,
-  At as NAVBAR_WIDTH_OPENED,
-  nn as NavBar,
-  en as NavBarDarkStyledList,
-  ce as NavBarProvider,
-  rn as PageLayout,
-  Pe as SaladBarProvider,
-  ue as buildNavBarState,
-  A as navBarClasses,
-  pe as useNavBar,
-  an as useSaladBar,
-  tn as withNavBarProvider,
-  sn as withSaladBarProvider
+  wn as AppLayout,
+  Ht as AppLayoutProvider,
+  Ge as Context,
+  J as ContextError,
+  hn as ExampleComponent,
+  _e as NAVBAR_WIDTH_CLOSED,
+  De as NAVBAR_WIDTH_OPENED,
+  xn as NavBar,
+  vn as NavBarDarkStyledList,
+  fn as NavBarLightStyledList,
+  wt as NavBarProvider,
+  Bn as PageLayout,
+  en as SaladBarProvider,
+  Ot as buildNavBarState,
+  L as navBarClasses,
+  Fe as useAppLayout,
+  Tt as useNavBar,
+  Tn as useSaladBar,
+  gn as withNavBarProvider,
+  On as withSaladBarProvider
 };
 //# sourceMappingURL=index.js.map