@australiangreens/ag-internal-components 0.0.25 → 0.0.27

package/dist/esm/index.js

@@ -1,50 +1,53 @@
-var Et = Object.defineProperty, kt = Object.defineProperties;
-var Nt = Object.getOwnPropertyDescriptors;
-var M = Object.getOwnPropertySymbols;
-var at = Object.prototype.hasOwnProperty, st = Object.prototype.propertyIsEnumerable;
-var V = (t, e, n) => e in t ? Et(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, r = (t, e) => {
+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) => {
   for (var n in e || (e = {}))
-    at.call(e, n) && V(t, n, e[n]);
-  if (M)
-    for (var n of M(e))
-      st.call(e, n) && V(t, n, e[n]);
+    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]);
   return t;
-}, v = (t, e) => kt(t, Nt(e));
-var ct = (t, e) => {
+}, B = (t, e) => Ut(t, qt(e));
+var pt = (t, e) => {
   var n = {};
   for (var o in t)
-    at.call(t, o) && e.indexOf(o) < 0 && (n[o] = t[o]);
-  if (t != null && M)
-    for (var o of M(t))
-      e.indexOf(o) < 0 && st.call(t, o) && (n[o] = t[o]);
+    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]);
   return n;
 };
-var lt = (t, e, n) => (V(t, typeof e != "symbol" ? e + "" : e, n), n);
-import { jsxs as l, Fragment as q, jsx as i } from "react/jsx-runtime";
-import { useState as b, useEffect as dt, createContext as Dt, useRef as K, useContext as Lt } from "react";
-import $t from "@mui/material/Button";
-import Rt from "@mui/material/Paper";
-import E from "@mui/material/Typography";
-import { styled as k, Box as xt, IconButton as pt } from "@mui/material";
-import wt from "@mui/icons-material/ArrowForward";
-import vt from "@mui/icons-material/ArrowBack";
-import _t from "@mui/material/Drawer";
-import Ht from "@mui/material/Box";
-import ut from "@mui/material/IconButton";
-import Mt from "@mui/material/Container";
-import { createTheme as Ct, alpha as J, ThemeProvider as zt } from "@mui/material/styles";
-import qt from "@mui/material/Snackbar";
-import Gt from "@mui/material/Alert";
-import Ut from "@mui/material/LinearProgress";
-import Wt from "@mui/material/CircularProgress";
-import { AgError as Xt } from "@australiangreens/ag-error";
-function Pe({ text: t }) {
+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__ */ l(q, { children: [
-    /* @__PURE__ */ i(E, { variant: "h6", color: "inherit", component: "div", sx: { fontSize: "22px" }, children: "Hello world" }),
-    /* @__PURE__ */ i(E, { variant: "caption", display: "block", children: /* @__PURE__ */ i("span", { children: "Just ensuring MUI is working as planned as a peer dependency. v0.0.11" }) }),
+  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(
-      $t,
+      Xt,
       {
         variant: "outlined",
         onClick: () => n((o) => o + 1),
@@ -52,38 +55,171 @@ function Pe({ text: t }) {
         children: "Hello I am a button"
       }
     ),
-    /* @__PURE__ */ l("p", { children: [
+    /* @__PURE__ */ d("p", { children: [
       "This is some text: ",
       /* @__PURE__ */ i("span", { children: t })
     ] }),
-    /* @__PURE__ */ l(Rt, { children: [
+    /* @__PURE__ */ d(Vt, { children: [
       "This number will incremember when button pressed: ",
       e
     ] })
   ] });
 }
-const jt = 24, Qt = 64, C = "TopBar", u = {
-  topStripe: `${C}-topStripe`,
-  titleBar: `${C}-titleBar`,
-  titleSlider: `${C}-titleSlider`,
-  titleText: `${C}-titleText`,
-  leftPanelButton: `${C}-leftPanelButton`,
-  rightPanelButton: `${C}-leftPanelButton`
-}, Vt = k("div", {
+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}`]: {
+    display: "flex"
+  },
+  [`& .${A.menuButton}`]: {
+    marginRight: 36
+  },
+  [`& .${A.hide}`]: {
+    display: "none"
+  },
+  [`& .${A.content}`]: {
+    flexGrow: 1,
+    padding: t.spacing(3)
+  },
+  [`& .${A.userInfoHolder}`]: {
+    height: "148px",
+    marginTop: "64px",
+    marginBottom: "16px"
+  }
+})), kt = () => ({
+  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, {
+  shouldForwardProp: (t) => t !== "open"
+})(({ theme: t, open: e }) => r(r({
+  width: e ? At : Pt,
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
+  zIndex: t.zIndex.drawer + 100
+}, e && {
+  "& .MuiDrawer-paper": ie()
+}), !e && {
+  "& .MuiDrawer-paper": ae()
+}));
+class ot extends Kt {
+}
+ut(ot, "errorName", "ContextError");
+const Et = Bt(null), le = {}, ce = {}, de = ({
+  overrideState: t = le,
+  overrideActions: e = ce,
+  children: n
+}) => {
+  const [{ open: o }, l] = b({ open: !0 }), g = nt((x) => {
+    l({ open: x });
+  }, []), 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: !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 }) => ({
+  backgroundColor: "black",
+  color: "white",
+  "& .MuiListItem-root": {
+    padding: "unset"
+  },
+  "& .MuiListItemButton-root": {
+    " .MuiListItemIcon-root": {
+      color: "white",
+      padding: `${mt}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)} - ${mt}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 nn({
+  "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,
+      {
+        variant: "permanent",
+        anchor: "left",
+        transitionDuration: null,
+        open: n,
+        children: e
+      }
+    )
+  ] });
+}
+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: C
+  name: T
 })(({ theme: t, leftPanel: e, rightPanel: n }) => {
-  var o, c;
+  var o, l;
   return {
     width: "100%",
     [`& .${u.topStripe}`]: {
       width: "100%",
-      height: `${jt}px`,
+      height: `${ge}px`,
       backgroundColor: t.palette.primary.main
     },
     [`& .${u.titleBar}`]: {
       backgroundColor: t.palette.primary.light,
-      height: `${Qt}px`,
+      height: `${fe}px`,
       padding: t.spacing(0, 3),
       width: "100%"
     },
@@ -117,21 +253,21 @@ const jt = 24, Qt = 64, C = "TopBar", u = {
         easing: t.transitions.easing.easeOut,
         duration: t.transitions.duration.enteringScreen
       }),
-      marginRight: `${(c = n == null ? void 0 : n.width) != null ? c : 0}px`
+      marginRight: `${(l = n == null ? void 0 : n.width) != null ? l : 0}px`
     })
   };
 });
-function Kt({
+function me({
   titleText: t = "",
   leftPanel: e,
   rightPanel: n,
   "data-testid": o
 }) {
-  return /* @__PURE__ */ l(Vt, { leftPanel: e, rightPanel: n, "data-testid": o, children: [
+  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__ */ l(xt, { className: u.titleSlider, children: [
-      e !== void 0 && !e.open && e.showOpenArrow && /* @__PURE__ */ l(
-        pt,
+    /* @__PURE__ */ i("div", { className: u.titleBar, children: /* @__PURE__ */ d(It, { className: u.titleSlider, children: [
+      e !== void 0 && !e.open && e.showOpenArrow && /* @__PURE__ */ d(
+        ft,
         {
           className: u.leftPanelButton,
           color: "inherit",
@@ -141,13 +277,13 @@ function Kt({
           size: "large",
           children: [
             " ",
-            /* @__PURE__ */ i(wt, {})
+            /* @__PURE__ */ i(St, {})
           ]
         }
       ),
-      /* @__PURE__ */ i(E, { className: u.titleText, variant: "h6", noWrap: !0, children: t }),
-      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ l(
-        pt,
+      /* @__PURE__ */ i(D, { className: u.titleText, variant: "h6", noWrap: !0, children: t }),
+      n !== void 0 && !n.open && n.showOpenArrow && /* @__PURE__ */ d(
+        ft,
         {
           className: u.rightPanelButton,
           color: "inherit",
@@ -157,14 +293,14 @@ function Kt({
           size: "large",
           children: [
             " ",
-            /* @__PURE__ */ i(vt, {})
+            /* @__PURE__ */ i(Ft, {})
           ]
         }
       )
     ] }) })
   ] });
 }
-const Ft = 400, Jt = k(_t, {
+const Nt = 400, ve = L(bt, {
   shouldForwardProp: (t) => (
     // Note we do want anchor to be forwarded to the Drawer component
     ![
@@ -178,7 +314,7 @@ const Ft = 400, Jt = k(_t, {
   ),
   name: "SidePanelDrawer"
 })(
-  ({ width: t, debugOpacity: e = !1, anchor: n, navBarOpen: o, navBarWidthOpen: c, navBarWidthClosed: m }) => ({
+  ({ width: t, debugOpacity: e = !1, anchor: n, navBarOpen: o, navBarWidthOpen: l, navBarWidthClosed: g }) => ({
     width: t,
     "& .MuiDrawer-paper": r(r({
       position: "absolute",
@@ -189,14 +325,14 @@ const Ft = 400, Jt = k(_t, {
     }, e && {
       opacity: "50%"
     }), n === "left" && r({
-      marginLeft: `${m}px`
+      marginLeft: `${g}px`
     }, o && {
-      marginLeft: `${c}px`
+      marginLeft: `${l}px`
     }))
   })
-), Yt = k(Ht, {
+), xe = L(Yt, {
   shouldForwardProp: (t) => !["anchor"].includes(t)
-})(({ theme: t, anchor: e }) => v(r({
+})(({ theme: t, anchor: e }) => B(r({
   display: "flex",
   alignItems: "center",
   padding: t.spacing(2)
@@ -214,64 +350,64 @@ const Ft = 400, Jt = k(_t, {
     marginRight: e === "right" ? t.spacing(2) : 0
   }
 }));
-function ft({
+function vt({
   children: t,
   anchor: e = "left",
   open: n,
   onClose: o = () => {
   },
-  titleText: c = "",
-  width: m = Ft,
-  showCloseArrow: h = !0,
-  debugOpacity: d = !1,
-  headerBoxProps: F = {},
-  onOpened: f,
-  onClosed: p,
-  "data-testid": O,
-  navBarOpen: T = !1,
-  navBarWidthOpen: x = 0,
-  navBarWidthClosed: y = 0
+  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
 }) {
-  return /* @__PURE__ */ l(
-    Jt,
+  return /* @__PURE__ */ d(
+    ve,
     {
       SlideProps: {
-        onEntered: () => f == null ? void 0 : f(),
-        onExited: () => p == null ? void 0 : p()
+        onEntered: () => c == null ? void 0 : c(),
+        onExited: () => m == null ? void 0 : m()
       },
       variant: "persistent",
       anchor: e,
       open: n,
-      width: m,
-      debugOpacity: d,
-      "data-testid": O,
-      navBarOpen: T,
-      navBarWidthOpen: x,
-      navBarWidthClosed: y,
+      width: g,
+      debugOpacity: x,
+      "data-testid": w,
+      navBarOpen: y,
+      navBarWidthOpen: p,
+      navBarWidthClosed: I,
       children: [
-        /* @__PURE__ */ i(Yt, v(r({ anchor: e }, F), { children: e === "left" ? /* @__PURE__ */ l(q, { children: [
-          /* @__PURE__ */ i(E, { variant: "h6", color: "inherit", component: "div", children: c }),
-          h && /* @__PURE__ */ l(ut, { onClick: o, size: "large", "aria-label": "Close left side panel", children: [
-            /* @__PURE__ */ i(vt, { "data-testid": "arrowbackicon" }),
+        /* @__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__ */ l(q, { children: [
-          h && /* @__PURE__ */ l(ut, { onClick: o, size: "large", "aria-label": "Close right side panel", children: [
-            /* @__PURE__ */ i(wt, {}),
+        ] }) : /* @__PURE__ */ d(U, { children: [
+          f && /* @__PURE__ */ d(ht, { onClick: o, size: "large", "aria-label": "Close right side panel", children: [
+            /* @__PURE__ */ i(St, {}),
             " "
           ] }),
-          /* @__PURE__ */ i(E, { variant: "h6", color: "inherit", component: "div", children: c })
+          /* @__PURE__ */ i(D, { variant: "h6", color: "inherit", component: "div", children: l })
         ] }) })),
         t
       ]
     }
   );
 }
-const Zt = k("div", {
+const we = L("div", {
   shouldForwardProp: (t) => !["leftPanel", "rightPanel"].includes(t),
   name: "PanelAwareMargins"
 })(({ theme: t, leftPanel: e, rightPanel: n }) => {
-  var o, c;
+  var o, l;
   return r(r({
     transition: t.transitions.create("margin", {
       easing: t.transitions.easing.sharp,
@@ -288,155 +424,155 @@ const Zt = k("div", {
       easing: t.transitions.easing.easeOut,
       duration: t.transitions.duration.enteringScreen
     }),
-    marginRight: `${(c = n == null ? void 0 : n.width) != null ? c : 0}px`
+    marginRight: `${(l = n == null ? void 0 : n.width) != null ? l : 0}px`
   });
-}), te = k(Mt, {
+}), Ce = L(Zt, {
   name: "PageContainer"
 })(({ theme: t }) => ({
   // Horizontal padding comes from the Container's gutter
   paddingTop: t.spacing(3),
   paddingBottom: t.spacing(3)
-})), Y = !1, Z = !1, z = {
+})), tt = !1, et = !1, G = {
   titleText: "",
   flavour: "push",
-  width: Ft,
+  width: Nt,
   arrowButtons: "both",
   startOpen: !1,
   open: void 0,
   onChangeOpen: void 0,
-  content: /* @__PURE__ */ i(q, {}),
+  content: /* @__PURE__ */ i(U, {}),
   onOpened: void 0,
   onClosed: void 0,
   dataTestId: void 0
 };
-function Ae({
+function rn({
   children: t,
   titleText: e = "",
   leftPanel: n,
   rightPanel: o,
-  sidePanelsAreMutuallyExclusive: c = !0,
-  debugOpacity: m = !1,
-  pageContainerProps: h,
-  pageContentDataTestId: d,
-  topBarDataTestId: F,
-  navBarOpen: f,
-  navBarWidthOpen: p,
-  navBarWidthClosed: O
+  sidePanelsAreMutuallyExclusive: l = !0,
+  debugOpacity: g = !1,
+  pageContainerProps: f,
+  pageContentDataTestId: x,
+  topBarDataTestId: h,
+  navBarOpen: c,
+  navBarWidthOpen: m,
+  navBarWidthClosed: w
 }) {
-  const [T, x] = b(Y), [y, S] = b(Z), [N, D] = b(Y), [G, g] = b(Z), B = n !== void 0, I = o !== void 0, {
-    titleText: L,
-    content: s,
-    flavour: a,
-    open: P,
-    onChangeOpen: et,
-    width: U,
-    arrowButtons: $,
-    startOpen: R,
-    onOpened: Tt,
-    onClosed: yt,
-    dataTestId: St
-  } = n ? r(r({}, z), n) : r({}, z), {
-    titleText: Bt,
-    content: bt,
-    flavour: nt,
-    open: W,
-    onChangeOpen: rt,
-    width: X,
-    arrowButtons: _,
-    startOpen: H,
-    onOpened: It,
-    onClosed: Pt,
-    dataTestId: At
-  } = o ? r(r({}, z), o) : r({}, z);
-  dt(() => {
-    R !== Y && (x(R), D(R));
-  }, [R]), dt(() => {
-    H !== Z && (S(H), g(H));
-  }, [H]);
-  const j = P === void 0 ? T : P, Q = W === void 0 ? y : W, ot = (w) => {
-    P === void 0 && (x(w), c && I && (w ? (S(!1), g(y)) : S(G))), et && et(w);
-  }, it = (w) => {
-    W === void 0 && (S(w), c && B && (w ? (x(!1), D(T)) : x(N))), rt && rt(w);
+  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);
   };
-  return /* @__PURE__ */ l(xt, { children: [
-    B && /* @__PURE__ */ i(
-      ft,
+  return /* @__PURE__ */ d(It, { children: [
+    k && /* @__PURE__ */ i(
+      vt,
       {
-        "data-testid": St,
+        "data-testid": Mt,
         anchor: "left",
-        open: j,
-        onClose: () => ot(!1),
-        width: U,
-        titleText: L,
-        debugOpacity: m,
-        showCloseArrow: $ === "both" || $ === "close",
-        onOpened: Tt,
-        onClosed: yt,
-        navBarOpen: f,
-        navBarWidthOpen: p,
-        navBarWidthClosed: O,
-        children: s
+        open: Q,
+        onClose: () => st(!1),
+        width: a,
+        titleText: v,
+        debugOpacity: g,
+        showCloseArrow: s === "both" || s === "close",
+        onOpened: Dt,
+        onClosed: Lt,
+        navBarOpen: c,
+        navBarWidthOpen: m,
+        navBarWidthClosed: w,
+        children: R
       }
     ),
-    I && /* @__PURE__ */ i(
-      ft,
+    E && /* @__PURE__ */ i(
+      vt,
       {
-        "data-testid": At,
+        "data-testid": Wt,
         anchor: "right",
-        open: Q,
-        onClose: () => it(!1),
-        width: X,
-        titleText: Bt,
-        debugOpacity: m,
-        showCloseArrow: _ === "both" || _ === "close",
-        onOpened: It,
-        onClosed: Pt,
-        navBarOpen: f,
-        navBarWidthOpen: p,
-        navBarWidthClosed: O,
-        children: bt
+        open: K,
+        onClose: () => lt(!1),
+        width: j,
+        titleText: Rt,
+        debugOpacity: g,
+        showCloseArrow: H === "both" || H === "close",
+        onOpened: Ht,
+        onClosed: zt,
+        navBarOpen: c,
+        navBarWidthOpen: m,
+        navBarWidthClosed: w,
+        children: _t
       }
     ),
     /* @__PURE__ */ i(
-      Kt,
+      me,
       r(r({
         titleText: e,
-        "data-testid": F
-      }, B && a === "push" ? {
+        "data-testid": h
+      }, k && _ === "push" ? {
         leftPanel: {
-          open: j,
-          width: U,
-          onOpen: () => ot(!0),
-          showOpenArrow: $ === "both" || $ === "open"
+          open: Q,
+          width: a,
+          onOpen: () => st(!0),
+          showOpenArrow: s === "both" || s === "open"
         }
-      } : {}), I && nt === "push" ? {
+      } : {}), E && it === "push" ? {
         rightPanel: {
-          open: Q,
-          width: X,
-          onOpen: () => it(!0),
-          showOpenArrow: _ === "both" || _ === "open"
+          open: K,
+          width: j,
+          onOpen: () => lt(!0),
+          showOpenArrow: H === "both" || H === "open"
         }
       } : {})
     ),
     /* @__PURE__ */ i(
-      Zt,
-      v(r(r({}, a === "push" ? {
+      we,
+      B(r(r({}, _ === "push" ? {
         leftPanel: {
-          open: j,
-          width: U
+          open: Q,
+          width: a
         }
-      } : {}), nt === "push" ? {
+      } : {}), it === "push" ? {
         rightPanel: {
-          open: Q,
-          width: X
+          open: K,
+          width: j
         }
       } : {}), {
-        children: /* @__PURE__ */ i(te, v(r({ "data-testid": d }, h), { children: t }))
+        children: /* @__PURE__ */ i(Ce, B(r({ "data-testid": x }, f), { children: t }))
       })
     )
   ] });
 }
-const ee = Ct({
+const Be = Tt({
   palette: {
     primary: {
       main: "#007236",
@@ -490,18 +626,18 @@ const ee = Ct({
       styleOverrides: {
         root: ({ theme: t }) => ({
           "&.Mui-selected": {
-            backgroundColor: J(
+            backgroundColor: Z(
               t.palette.secondary.main,
               t.palette.action.selectedOpacity
             ),
             "&:hover": {
-              backgroundColor: J(
+              backgroundColor: Z(
                 t.palette.secondary.main,
                 t.palette.action.selectedOpacity
               )
             },
             "&.Mui-focusVisible": {
-              backgroundColor: J(
+              backgroundColor: Z(
                 t.palette.secondary.main,
                 t.palette.action.focusOpacity
               )
@@ -524,7 +660,7 @@ const ee = Ct({
       fontWeight: 700
     }
   }
-}), ne = Ct({
+}), Oe = Tt({
   palette: {
     primary: {
       dark: "#00A651",
@@ -573,133 +709,131 @@ const ee = Ct({
     }
   }
 });
-function Ee({
+function on({
   name: t = "internal",
   children: e
 }) {
-  return /* @__PURE__ */ i(zt, { theme: t === "internal" ? ee : t === "fed21" ? ne : void 0, children: e });
+  return /* @__PURE__ */ i(Qt, { theme: t === "internal" ? Be : t === "fed21" ? Oe : void 0, children: e });
 }
-class tt extends Xt {
-}
-lt(tt, "errorName", "ContextError");
-const A = () => {
-  throw new tt("SaladBarContext can only be used in a child of a <SaladBarProvider>");
-}, re = (t) => {
-  throw new tt("SaladBarContext can only be used in a child of a <SaladBarProvider>");
-}, oe = {
-  enqueueNotification: A,
-  enqueueSuccessNotification: A,
-  enqueueInfoNotification: A,
-  enqueueWarningNotification: A,
-  enqueueErrorNotification: A,
-  removeNotification: re
-}, Ot = Dt(oe), ie = {
+const Te = {
   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
-}, ae = {
+}, be = {
   shouldClose: (t, e) => e !== "clickaway"
-}, gt = {
+}, xt = {
   message: "",
   severity: "info",
   variant: "standard",
   progressIndicator: void 0
   // Can use 'circular' or 'linear'
-}, ht = 100, mt = 2e3, se = 2e3, ce = (() => {
+}, wt = 100, Ct = 2e3, ye = 2e3, Ie = (() => {
   let t = 0;
   return () => (t += 1, t);
-})(), le = {
+})(), Se = {
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px"
-};
-function ke(o) {
-  var c = o, {
-    children: t,
-    shouldClose: e = ae.shouldClose
-  } = c, n = ct(c, [
-    "children",
-    "shouldClose"
+}, 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, [
+    "overrideState",
+    "overrideActions",
+    "shouldClose",
+    "children"
   ]);
-  var L;
-  const [m, h] = b(!1), d = K([]), F = K(Date.now()), f = K(0), p = (s = {}) => {
-    f.current += 1, d.current.length >= ht && Date.now() - F.current >= mt && (F.current = Date.now(), console.error(
-      `SaladBarProvider: MAX_QUEUE_LENGTH (${ht}) hit ${f.current} times in last ${mt}ms)`
-    ), f.current = 0);
-    const a = r(v(r({}, gt), {
-      key: ce()
-    }), s);
-    return d.current.push(a), d.current.length === 1 && h(!0), a.key;
-  }, O = (s = "", a = {}) => p(r({ message: s, severity: "success" }, a)), T = (s = "", a = {}) => p(r({ message: s, severity: "info" }, a)), x = (s = "", a = {}) => p(r({ message: s, severity: "warning" }, a)), y = (s = "", a = {}) => p(r({ message: s, severity: "error" }, a)), S = (s) => {
-    const a = d.current.findIndex((P) => P.key === s);
-    if (a !== -1)
-      return a === 0 ? (h(!1), d.current[0]) : d.current.splice(a, 1);
-  }, N = (s, a) => {
-    e(s, a) && h(!1);
-  }, D = () => {
-  }, G = () => {
-    d.current.shift(), d.current.length > 0 && h(!0);
-  }, g = (L = d.current[0]) != null ? L : r({}, gt), B = {};
-  "autoHideDuration" in g && (B.autoHideDuration = g.autoHideDuration);
-  const I = r(r({}, ie), n);
-  return (
-    // Should be resolved when we move to React >= 18
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    /* @__PURE__ */ l(
-      Ot.Provider,
-      {
-        value: {
-          enqueueNotification: p,
-          enqueueSuccessNotification: O,
-          enqueueInfoNotification: T,
-          enqueueWarningNotification: x,
-          enqueueErrorNotification: y,
-          removeNotification: S
+  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
+  }, t), e);
+  return /* @__PURE__ */ d($t.Provider, { value: N, children: [
+    o,
+    /* @__PURE__ */ i(
+      te,
+      B(r(r({}, _), R), {
+        open: x,
+        onClose: P,
+        TransitionProps: {
+          onExited: E,
+          onExit: k
         },
-        children: [
-          t,
+        sx: { zIndex: ye },
+        children: /* @__PURE__ */ d("div", { children: [
           /* @__PURE__ */ i(
-            qt,
-            v(r(r({}, I), B), {
-              open: m,
-              onClose: N,
-              TransitionProps: {
-                onExited: G,
-                onExit: D
-              },
-              sx: { zIndex: se },
-              children: /* @__PURE__ */ l("div", { children: [
-                /* @__PURE__ */ i(
-                  Gt,
-                  {
-                    onClose: (s) => N(s, "closeAlert"),
-                    severity: g.severity,
-                    variant: "filled",
-                    icon: g.progressIndicator === "circular" ? /* @__PURE__ */ i(Wt, { size: "1em" }) : void 0,
-                    style: g.progressIndicator === "linear" ? le : void 0,
-                    children: g.message
-                  }
-                ),
-                g.progressIndicator === "linear" && /* @__PURE__ */ i(Ut, { color: "primary" })
-              ] })
-            })
-          )
-        ]
-      }
+            ee,
+            {
+              onClose: (a) => P(a, "closeAlert"),
+              severity: v.severity,
+              variant: "filled",
+              icon: v.progressIndicator === "circular" ? /* @__PURE__ */ i(re, { size: "1em" }) : void 0,
+              style: v.progressIndicator === "linear" ? Se : void 0,
+              children: v.message
+            }
+          ),
+          v.progressIndicator === "linear" && /* @__PURE__ */ i(ne, { color: "primary" })
+        ] })
+      })
     )
-  );
+  ] });
 }
-function Ne() {
-  return Lt(Ot);
+function an() {
+  const t = Ot($t);
+  if (t === null)
+    throw new ot("Error: Tried to useSaladBar outside of a <SaladBarProvider>");
+  return t;
 }
+const sn = yt(() => ({ children: t }) => /* @__PURE__ */ i(Pe, { children: t }));
 export {
-  Ee as AgThemeProvider,
-  tt as ContextError,
-  Pe as ExampleComponent,
-  Ae as PageLayout,
-  ke as SaladBarProvider,
-  Ne as useSaladBar
+  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
 };
 //# sourceMappingURL=index.js.map