@australiangreens/ag-internal-components 0.0.27 → 0.0.29

package/dist/esm/index.js

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