@matteoaliano/forest-ui 1.0.0 → 1.1.0

package/dist/index.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   AnimatedLine: () => import_LineChart7.AnimatedLine,
   AppBar: () => import_AppBar.default,
   AppBarNavItem: () => AppBarNavItem,
+  AppShell: () => AppShell,
   AreaElement: () => import_LineChart4.AreaElement,
   AreaElementPath: () => import_LineChart4.AreaElementPath,
   AreaPlot: () => import_LineChart4.AreaPlot,
@@ -55,7 +56,7 @@ __export(src_exports, {
   BarPlot: () => import_BarChart3.BarPlot,
   BottomNavigation: () => import_BottomNavigation.default,
   BottomNavigationAction: () => import_BottomNavigationAction.default,
-  Box: () => Box3,
+  Box: () => Box5,
   Breadcrumbs: () => import_Breadcrumbs.default,
   Button: () => Button,
   ButtonBase: () => import_ButtonBase.default,
@@ -161,6 +162,7 @@ __export(src_exports, {
   MultiSelect: () => MultiSelect,
   NoSsr: () => import_NoSsr.default,
   OutlinedInput: () => import_OutlinedInput.default,
+  Page: () => Page,
   Pagination: () => import_Pagination.default,
   PaginationItem: () => import_PaginationItem.default,
   Paper: () => Paper,
@@ -275,7 +277,7 @@ __export(src_exports, {
   useAxisTooltip: () => import_ChartsTooltip4.useAxisTooltip,
   useChartColors: () => useChartColors,
   useChartId: () => import_hooks2.useChartId,
-  useColorScheme: () => import_styles11.useColorScheme,
+  useColorScheme: () => import_styles12.useColorScheme,
   useDrawingArea: () => import_hooks.useDrawingArea,
   useFormControl: () => import_material6.useFormControl,
   useGaugeState: () => import_Gauge4.useGaugeState,
@@ -4262,7 +4264,7 @@ function ForestProvider({
 }
 
 // src/index.ts
-var import_styles11 = require("@mui/material/styles");
+var import_styles12 = require("@mui/material/styles");
 var import_material3 = require("@mui/material");
 
 // src/components/Autocomplete/index.tsx
@@ -5332,9 +5334,215 @@ function SidebarItem({
   ] });
 }
 
-// src/components/Box/index.tsx
+// src/components/AppShell/index.tsx
+var import_react5 = require("react");
 var import_Box2 = __toESM(require("@mui/material/Box"));
-var Box3 = import_Box2.default;
+var import_Drawer3 = __toESM(require("@mui/material/Drawer"));
+var import_List2 = __toESM(require("@mui/material/List"));
+var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
+var import_styles4 = require("@mui/material/styles");
+var import_MenuOutlined = __toESM(require("@mui/icons-material/MenuOutlined"));
+var import_DarkModeOutlined = __toESM(require("@mui/icons-material/DarkModeOutlined"));
+var import_LightModeOutlined = __toESM(require("@mui/icons-material/LightModeOutlined"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ColorModeToggle() {
+  const { mode, systemMode, setMode } = (0, import_styles4.useColorScheme)();
+  const resolved = mode === "system" ? systemMode : mode;
+  const isDark = resolved === "dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tooltip, { title: isDark ? "Switch to light mode" : "Switch to dark mode", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    IconButton2,
+    {
+      size: "small",
+      color: "inherit",
+      "aria-label": "Toggle color mode",
+      onClick: () => setMode(isDark ? "light" : "dark"),
+      children: isDark ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_LightModeOutlined.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_DarkModeOutlined.default, { fontSize: "small" })
+    }
+  ) });
+}
+function ShellBrand({
+  product,
+  logoVariant
+}) {
+  const { mode, systemMode } = (0, import_styles4.useColorScheme)();
+  const dark = (mode === "system" ? systemMode : mode) === "dark";
+  if (logoVariant === "full") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Logo, { product, variant: "logo", color: dark ? "negative" : "positive" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Logo, { product, variant: "logomark", color: dark ? "negative" : "default" });
+}
+function AppShell({
+  navItems,
+  nav,
+  product = "studio",
+  logoVariant = "logomark",
+  brand,
+  search,
+  actions,
+  sidebarBehavior = "permanent",
+  defaultSidebarOpen = true,
+  children
+}) {
+  const theme = (0, import_styles4.useTheme)();
+  const isMobile = (0, import_useMediaQuery.default)(theme.breakpoints.down("sm"));
+  const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(defaultSidebarOpen);
+  const [mobileOpen, setMobileOpen] = (0, import_react5.useState)(false);
+  const navContent = nav != null ? nav : navItems && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_List2.default, { children: navItems.map(({ label, icon, active, endAdornment, ...link }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    SidebarItem,
+    {
+      icon,
+      label,
+      selected: active,
+      endAdornment,
+      ...link
+    },
+    label
+  )) });
+  const brandEl = brand != null ? brand : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ShellBrand, { product, logoVariant });
+  const wrapLogomark = !brand && logoVariant === "logomark" && !isMobile;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Box2.default, { sx: { display: "flex", flexDirection: "column", height: "100vh" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_AppBar.default,
+      {
+        position: "sticky",
+        elevation: 0,
+        sx: { zIndex: theme.zIndex.drawer + 1 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Toolbar.default, { variant: "dense", sx: { px: { xs: "16px", sm: "16px" } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 1 }, children: [
+            isMobile && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              IconButton2,
+              {
+                size: "small",
+                color: "inherit",
+                "aria-label": "Open navigation",
+                onClick: () => setMobileOpen(true),
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_MenuOutlined.default, { fontSize: "small" })
+              }
+            ),
+            wrapLogomark ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Box2.default, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Box2.default, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Search, { size: "small", placeholder: "Search\u2026", sx: { width: "100%", maxWidth: 480 } }) : search || null }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorModeToggle, {}),
+            actions
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Box2.default, { sx: { display: "flex", flexGrow: 1, overflow: "hidden" }, children: [
+      !isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        SidebarNav,
+        {
+          open: sidebarOpen,
+          onOpenChange: setSidebarOpen,
+          behavior: sidebarBehavior,
+          sx: {
+            height: "100%",
+            "& .MuiDrawer-paper": { position: "relative", height: "100%" }
+          },
+          children: navContent
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Box2.default, { component: "main", sx: { flexGrow: 1, overflow: "auto" }, children })
+    ] }),
+    isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_Drawer3.default,
+      {
+        open: mobileOpen,
+        onClose: () => setMobileOpen(false),
+        onClick: () => setMobileOpen(false),
+        sx: { "& .MuiDrawer-paper": { width: 240 } },
+        children: navContent
+      }
+    )
+  ] });
+}
+
+// src/components/Page/index.tsx
+var import_Box3 = __toESM(require("@mui/material/Box"));
+var import_Breadcrumbs2 = __toESM(require("@mui/material/Breadcrumbs"));
+var import_Link2 = __toESM(require("@mui/material/Link"));
+var import_Typography2 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime21 = (
+  // Current page: plain text, not a link.
+  require("react/jsx-runtime")
+);
+function Page({
+  title,
+  breadcrumbs,
+  actions,
+  disableGutters = false,
+  maxWidth,
+  sx,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_Box3.default,
+    {
+      component: "section",
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100%",
+          backgroundColor: "background.paper",
+          ...disableGutters ? {} : { p: 3 }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        import_Box3.default,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            width: "100%",
+            ...maxWidth ? { maxWidth, mx: "auto" } : {}
+          },
+          children: [
+            breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Breadcrumbs2.default, { "aria-label": "breadcrumb", sx: { mb: 1 }, children: breadcrumbs.map(
+              (crumb, i) => i === breadcrumbs.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography2.default, { variant: "body2", color: "text.primary", children: crumb.label }, crumb.label) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_Link2.default,
+                {
+                  variant: "body2",
+                  underline: "hover",
+                  color: "text.secondary",
+                  ...crumb.component ? { component: crumb.component } : {},
+                  ...crumb.href ? { href: crumb.href } : {},
+                  ...crumb.onClick ? { onClick: crumb.onClick } : {},
+                  children: crumb.label
+                },
+                crumb.label
+              )
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              import_Box3.default,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 2,
+                  mb: 3
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography2.default, { variant: "h5", children: title }),
+                  actions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box3.default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: actions })
+                ]
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Box/index.tsx
+var import_Box4 = __toESM(require("@mui/material/Box"));
+var Box5 = import_Box4.default;
 
 // src/components/Stack/index.tsx
 var import_Stack = __toESM(require("@mui/material/Stack"));
@@ -5393,12 +5601,12 @@ var import_TextareaAutosize = __toESM(require("@mui/material/TextareaAutosize"))
 
 // src/components/Charts/LineChart.tsx
 var import_LineChart = require("@mui/x-charts/LineChart");
-var import_styles6 = require("@mui/material/styles");
+var import_styles7 = require("@mui/material/styles");
 
 // src/components/Charts/useChartColors.ts
-var import_styles4 = require("@mui/material/styles");
+var import_styles5 = require("@mui/material/styles");
 function useChartColors(count) {
-  const theme = (0, import_styles4.useTheme)();
+  const theme = (0, import_styles5.useTheme)();
   const chart = theme.palette.chart;
   const colors2 = chart.series.map((s) => s.fg);
   return colors2.slice(0, Math.min(count, colors2.length));
@@ -5406,8 +5614,8 @@ function useChartColors(count) {
 
 // src/components/Charts/CustomTooltip.tsx
 var import_material2 = require("@mui/material");
-var import_styles5 = require("@mui/material/styles");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_styles6 = require("@mui/material/styles");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function formatDate(date) {
   if (!date) return "";
   const d = new Date(date);
@@ -5428,11 +5636,11 @@ function renderValue(val) {
 }
 function CustomTooltip(props) {
   const { series, axisValue, dataIndex } = props;
-  const theme = (0, import_styles5.useTheme)();
+  const theme = (0, import_styles6.useTheme)();
   if (dataIndex == null) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     import_material2.Box,
     {
       sx: {
@@ -5448,7 +5656,7 @@ function CustomTooltip(props) {
         border: `1px solid ${theme.palette.divider}`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           import_material2.Typography,
           {
             variant: "body2",
@@ -5465,8 +5673,8 @@ function CustomTooltip(props) {
           const color = typeof s.getColor === "function" ? s.getColor(dataIndex) : s.color;
           const value = s.data ? s.data[dataIndex] : null;
           if (value == null) return null;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material2.Box, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material2.Box, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               import_material2.Box,
               {
                 sx: {
@@ -5478,7 +5686,7 @@ function CustomTooltip(props) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               import_material2.Typography,
               {
                 variant: "body2",
@@ -5489,7 +5697,7 @@ function CustomTooltip(props) {
                   gap: "6px"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     import_material2.Box,
                     {
                       component: "span",
@@ -5517,10 +5725,10 @@ function CustomTooltip(props) {
 }
 
 // src/components/Charts/LineChart.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function LineChart({ series, colors: colors2, ...props }) {
   var _a, _b;
-  const theme = (0, import_styles6.useTheme)();
+  const theme = (0, import_styles7.useTheme)();
   const chart = theme.palette.chart;
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const modifiedSeries = series == null ? void 0 : series.map((s) => {
@@ -5531,7 +5739,7 @@ function LineChart({ series, colors: colors2, ...props }) {
       highlightScope: (_b2 = s.highlightScope) != null ? _b2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_LineChart.LineChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -5602,11 +5810,11 @@ function LineChart({ series, colors: colors2, ...props }) {
 
 // src/components/Charts/BarChart.tsx
 var import_BarChart = require("@mui/x-charts/BarChart");
-var import_styles7 = require("@mui/material/styles");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_styles8 = require("@mui/material/styles");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function BarChart({ series, colors: colors2, ...props }) {
   var _a, _b;
-  const theme = (0, import_styles7.useTheme)();
+  const theme = (0, import_styles8.useTheme)();
   const chart = theme.palette.chart;
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const resolvedColors = colors2 != null ? colors2 : seriesColors;
@@ -5621,7 +5829,7 @@ function BarChart({ series, colors: colors2, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_BarChart.BarChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -5681,10 +5889,10 @@ function BarChart({ series, colors: colors2, ...props }) {
         ...(_b = props.sx) != null ? _b : {}
       },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: series == null ? void 0 : series.map((s, idx) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("defs", { children: series == null ? void 0 : series.map((s, idx) => {
         if (s.variant !== "striped") return null;
         const baseColor = s.color || resolvedColors[idx % resolvedColors.length];
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "pattern",
           {
             id: `striped-pattern-${idx}`,
@@ -5693,8 +5901,8 @@ function BarChart({ series, colors: colors2, ...props }) {
             height: "8",
             patternTransform: "rotate(45)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
             ]
           },
           `striped-${idx}`
@@ -5706,11 +5914,11 @@ function BarChart({ series, colors: colors2, ...props }) {
 
 // src/components/Charts/PieChart.tsx
 var import_PieChart = require("@mui/x-charts/PieChart");
-var import_styles8 = require("@mui/material/styles");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_styles9 = require("@mui/material/styles");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function PieChart({ series, colors: colors2, ...props }) {
   var _a, _b, _c, _d;
-  const theme = (0, import_styles8.useTheme)();
+  const theme = (0, import_styles9.useTheme)();
   const chart = theme.palette.chart;
   const sliceCount = (_c = (_b = (_a = series == null ? void 0 : series[0]) == null ? void 0 : _a.data) == null ? void 0 : _b.length) != null ? _c : 0;
   const seriesColors = useChartColors(sliceCount);
@@ -5721,7 +5929,7 @@ function PieChart({ series, colors: colors2, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_PieChart.PieChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -5764,7 +5972,7 @@ function PieChart({ series, colors: colors2, ...props }) {
 
 // src/components/Charts/ScatterChart.tsx
 var import_ScatterChart = require("@mui/x-charts/ScatterChart");
-var import_styles9 = require("@mui/material/styles");
+var import_styles10 = require("@mui/material/styles");
 
 // src/components/Charts/chartSx.ts
 function getForestChartSx(theme) {
@@ -5820,10 +6028,10 @@ var forestLegendSlotProps = {
 };
 
 // src/components/Charts/ScatterChart.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ScatterChart({ series, colors: colors2, ...props }) {
   var _a, _b;
-  const theme = (0, import_styles9.useTheme)();
+  const theme = (0, import_styles10.useTheme)();
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const modifiedSeries = series == null ? void 0 : series.map((s) => {
     var _a2;
@@ -5832,7 +6040,7 @@ function ScatterChart({ series, colors: colors2, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_ScatterChart.ScatterChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -5850,12 +6058,12 @@ function ScatterChart({ series, colors: colors2, ...props }) {
 
 // src/components/Charts/Gauge.tsx
 var import_Gauge = require("@mui/x-charts/Gauge");
-var import_styles10 = require("@mui/material/styles");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_styles11 = require("@mui/material/styles");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Gauge(props) {
   var _a;
-  const theme = (0, import_styles10.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  const theme = (0, import_styles11.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_Gauge.Gauge,
     {
       ...props,
@@ -5945,6 +6153,7 @@ var import_material7 = require("@mui/material");
   AnimatedLine,
   AppBar,
   AppBarNavItem,
+  AppShell,
   AreaElement,
   AreaElementPath,
   AreaPlot,
@@ -6066,6 +6275,7 @@ var import_material7 = require("@mui/material");
   MultiSelect,
   NoSsr,
   OutlinedInput,
+  Page,
   Pagination,
   PaginationItem,
   Paper,