@matteoaliano/forest-ui 0.8.9 → 1.1.0

package/dist/index.mjs

@@ -18,10 +18,7 @@ import {
   fontFamilyMono,
   fontSize,
   fontWeight,
-  forestAgencyPreset,
   forestAlkemyPlusPreset,
-  forestExternalPreset,
-  forestInternalPreset,
   forestTheme,
   forestThemeOptions,
   getAvailablePresets,
@@ -41,7 +38,7 @@ import {
   toggleColors,
   warning,
   widths
-} from "./chunk-2XQSGP7X.mjs";
+} from "./chunk-XJYBU6LC.mjs";
 
 // src/provider/ForestProvider.tsx
 import { useMemo } from "react";
@@ -52,7 +49,7 @@ function ForestProvider({
   children,
   theme,
   preset,
-  variant,
+  defaultMode = "light",
   disableCssBaseline = false
 }) {
   const resolvedTheme = useMemo(() => {
@@ -64,71 +61,53 @@ function ForestProvider({
         `[ForestProvider] Unknown preset "${preset}". Available presets: use getAvailablePresets() to see registered presets.`
       );
     }
-    const variantName = variant != null ? variant : presetConfig.defaultVariant;
-    const variantConfig = presetConfig.variants[variantName];
-    if (!variantConfig) {
-      throw new Error(
-        `[ForestProvider] Unknown variant "${variantName}" for preset "${preset}". Available variants: ${Object.keys(presetConfig.variants).join(", ")}.`
-      );
-    }
-    return buildTheme(variantConfig.tokens);
-  }, [theme, preset, variant]);
-  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: resolvedTheme, children: [
-    !disableCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}),
+    return buildTheme(presetConfig.tokens, presetConfig.tokensDark);
+  }, [theme, preset]);
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: resolvedTheme, defaultMode, children: [
+    !disableCssBaseline && /* @__PURE__ */ jsx(CssBaseline, { enableColorScheme: true }),
     children
   ] });
 }
 
+// src/index.ts
+import { useColorScheme as useColorScheme2 } from "@mui/material/styles";
+import { InitColorSchemeScript } from "@mui/material";
+
 // src/components/Autocomplete/index.tsx
-import MuiAutocomplete from "@mui/material/Autocomplete";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Autocomplete(props) {
-  return /* @__PURE__ */ jsx2(MuiAutocomplete, { ...props });
-}
+import { default as default2 } from "@mui/material/Autocomplete";
 
 // src/components/Button/index.tsx
 import MuiButton from "@mui/material/Button";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Button({ variant = "contained", ...props }) {
-  return /* @__PURE__ */ jsx3(MuiButton, { variant, ...props });
+  return /* @__PURE__ */ jsx2(MuiButton, { variant, ...props });
 }
 
 // src/components/ButtonGroup/index.tsx
 import MuiButtonGroup from "@mui/material/ButtonGroup";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function ButtonGroup({ variant = "contained", ...props }) {
-  return /* @__PURE__ */ jsx4(MuiButtonGroup, { variant, ...props });
+  return /* @__PURE__ */ jsx3(MuiButtonGroup, { variant, ...props });
 }
 
 // src/components/Checkbox/index.tsx
-import MuiCheckbox from "@mui/material/Checkbox";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function Checkbox(props) {
-  return /* @__PURE__ */ jsx5(MuiCheckbox, { ...props });
-}
+import { default as default3 } from "@mui/material/Checkbox";
 
 // src/components/Fab/index.tsx
 import MuiFab from "@mui/material/Fab";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Fab({ color = "primary", ...props }) {
-  return /* @__PURE__ */ jsx6(MuiFab, { color, ...props });
+  return /* @__PURE__ */ jsx4(MuiFab, { color, ...props });
 }
 
 // src/components/RadioGroup/index.tsx
-import MuiRadioGroup from "@mui/material/RadioGroup";
-import MuiRadio from "@mui/material/Radio";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function RadioGroup(props) {
-  return /* @__PURE__ */ jsx7(MuiRadioGroup, { ...props });
-}
-function Radio(props) {
-  return /* @__PURE__ */ jsx7(MuiRadio, { ...props });
-}
+import { default as default4 } from "@mui/material/RadioGroup";
+import { default as default5 } from "@mui/material/Radio";
 
 // src/components/Select/index.tsx
 import MuiSelect from "@mui/material/Select";
-import MuiMenuItem from "@mui/material/MenuItem";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { default as default6 } from "@mui/material/MenuItem";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Select({ onClose, ...props }) {
   const handleClose = (e) => {
     onClose == null ? void 0 : onClose(e);
@@ -138,21 +117,18 @@ function Select({ onClose, ...props }) {
       }
     });
   };
-  return /* @__PURE__ */ jsx8(MuiSelect, { onClose: handleClose, ...props });
-}
-function MenuItem(props) {
-  return /* @__PURE__ */ jsx8(MuiMenuItem, { ...props });
+  return /* @__PURE__ */ jsx5(MuiSelect, { onClose: handleClose, ...props });
 }
 
 // src/components/MultiSelect/index.tsx
 import MuiSelect2 from "@mui/material/Select";
-import MuiMenuItem2 from "@mui/material/MenuItem";
-import MuiCheckbox2 from "@mui/material/Checkbox";
+import MuiMenuItem from "@mui/material/MenuItem";
+import MuiCheckbox from "@mui/material/Checkbox";
 import MuiListItemText from "@mui/material/ListItemText";
 import MuiFormControl from "@mui/material/FormControl";
 import MuiInputLabel from "@mui/material/InputLabel";
 import MuiButton2 from "@mui/material/Button";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function MultiSelect({
   options,
   value,
@@ -187,7 +163,7 @@ function MultiSelect({
       color: rest.color,
       variant: rest.variant,
       children: [
-        label && /* @__PURE__ */ jsx9(MuiInputLabel, { id: labelId, shrink: value.length > 0, children: label }),
+        label && /* @__PURE__ */ jsx6(MuiInputLabel, { id: labelId, shrink: value.length > 0, children: label }),
         /* @__PURE__ */ jsxs2(
           MuiSelect2,
           {
@@ -201,7 +177,7 @@ function MultiSelect({
             renderValue: renderValue2,
             ...rest,
             children: [
-              selectAll && /* @__PURE__ */ jsx9(
+              selectAll && /* @__PURE__ */ jsx6(
                 "li",
                 {
                   onMouseDown: (e) => e.preventDefault(),
@@ -209,12 +185,12 @@ function MultiSelect({
                     e.stopPropagation();
                     handleSelectAll();
                   },
-                  children: /* @__PURE__ */ jsx9(MuiButton2, { size: "small", variant: "text", children: allSelected ? "Deselect All" : selectAllLabel })
+                  children: /* @__PURE__ */ jsx6(MuiButton2, { size: "small", variant: "text", children: allSelected ? "Deselect All" : selectAllLabel })
                 }
               ),
-              options.map((option) => /* @__PURE__ */ jsxs2(MuiMenuItem2, { value: option.value, children: [
-                /* @__PURE__ */ jsx9(MuiCheckbox2, { checked: value.includes(option.value) }),
-                /* @__PURE__ */ jsx9(MuiListItemText, { primary: option.label })
+              options.map((option) => /* @__PURE__ */ jsxs2(MuiMenuItem, { value: option.value, children: [
+                /* @__PURE__ */ jsx6(MuiCheckbox, { checked: value.includes(option.value) }),
+                /* @__PURE__ */ jsx6(MuiListItemText, { primary: option.label })
               ] }, option.value))
             ]
           }
@@ -226,26 +202,22 @@ function MultiSelect({
 
 // src/components/Switch/index.tsx
 import MuiSwitch from "@mui/material/Switch";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Switch(props) {
-  return /* @__PURE__ */ jsx10(MuiSwitch, { ...props });
+  return /* @__PURE__ */ jsx7(MuiSwitch, { ...props });
 }
 
 // src/components/TextField/index.tsx
-import MuiTextField from "@mui/material/TextField";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function TextField(props) {
-  return /* @__PURE__ */ jsx11(MuiTextField, { ...props });
-}
+import { default as default7 } from "@mui/material/TextField";
 
 // src/components/Search/index.tsx
 import { useState, useCallback } from "react";
-import MuiTextField2 from "@mui/material/TextField";
+import MuiTextField from "@mui/material/TextField";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Search({
   value: controlledValue,
   onChange,
@@ -269,8 +241,8 @@ function Search({
     if (!isControlled) setInternalValue("");
     onClear == null ? void 0 : onClear();
   }, [isControlled, onClear]);
-  return /* @__PURE__ */ jsx12(
-    MuiTextField2,
+  return /* @__PURE__ */ jsx8(
+    MuiTextField,
     {
       variant,
       placeholder,
@@ -285,15 +257,15 @@ function Search({
             gap: 0,
             "& .MuiOutlinedInput-input": { pl: "8px" }
           },
-          startAdornment: /* @__PURE__ */ jsx12(InputAdornment, { position: "start", sx: { mr: 0 }, children: /* @__PURE__ */ jsx12(SearchIcon, { sx: { fontSize: 20, color: "text.placeholder" } }) }),
-          endAdornment: currentValue ? /* @__PURE__ */ jsx12(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx12(
+          startAdornment: /* @__PURE__ */ jsx8(InputAdornment, { position: "start", sx: { mr: 0 }, children: /* @__PURE__ */ jsx8(SearchIcon, { sx: { fontSize: 20, color: "text.placeholder" } }) }),
+          endAdornment: currentValue ? /* @__PURE__ */ jsx8(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx8(
             IconButton,
             {
               "aria-label": "clear search",
               onClick: handleClear,
               edge: "end",
               size: "small",
-              children: /* @__PURE__ */ jsx12(ClearIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx8(ClearIcon, { fontSize: "small" })
             }
           ) }) : null,
           ...typeof (slotProps == null ? void 0 : slotProps.input) === "object" ? slotProps.input : {}
@@ -305,17 +277,18 @@ function Search({
 }
 
 // src/components/Input/index.tsx
-import MuiInputBase from "@mui/material/InputBase";
-import { jsx as jsx13 } from "react/jsx-runtime";
-function Input({ ...props }) {
-  return /* @__PURE__ */ jsx13(MuiInputBase, { ...props });
-}
+import { default as default8 } from "@mui/material/InputBase";
 
 // src/components/IconButton/index.tsx
 import MuiIconButton from "@mui/material/IconButton";
-import { jsx as jsx14 } from "react/jsx-runtime";
-function IconButton2(props) {
-  return /* @__PURE__ */ jsx14(MuiIconButton, { ...props });
+import { jsx as jsx9 } from "react/jsx-runtime";
+function IconButton2({
+  variant = "text",
+  className,
+  ...props
+}) {
+  const cls = variant === "text" ? className : ["ForestIconButton", `ForestIconButton-${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx9(MuiIconButton, { className: cls, ...props });
 }
 
 // src/components/Logo/index.tsx
@@ -578,7 +551,7 @@ function scopeArtworkIds(inner, id) {
 }
 
 // src/components/Logo/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function resolveArtwork(product, variant, color) {
   const variantArt = PRODUCT_ARTWORK[product][variant];
   if (variant === "logomark") {
@@ -598,7 +571,7 @@ var Logo = forwardRef(
       () => artwork ? scopeArtworkIds(artwork.inner, id) : "",
       [artwork, id]
     );
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx10(
       Box,
       {
         component: "svg",
@@ -621,138 +594,106 @@ var Logo = forwardRef(
 Logo.displayName = "Logo";
 
 // src/components/ToggleButton/index.tsx
-import MuiToggleButton from "@mui/material/ToggleButton";
-import MuiToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import { jsx as jsx16 } from "react/jsx-runtime";
-function ToggleButton(props) {
-  return /* @__PURE__ */ jsx16(MuiToggleButton, { ...props });
-}
-function ToggleButtonGroup(props) {
-  return /* @__PURE__ */ jsx16(MuiToggleButtonGroup, { ...props });
-}
+import { default as default9 } from "@mui/material/ToggleButton";
+import { default as default10 } from "@mui/material/ToggleButtonGroup";
 
 // src/components/DatePicker/index.tsx
 import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function DatePicker(props) {
-  return /* @__PURE__ */ jsx17(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx17(MuiDatePicker, { ...props }) });
+  return /* @__PURE__ */ jsx11(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx11(MuiDatePicker, { ...props }) });
 }
 
 // src/components/FormControl/index.tsx
-import MuiFormControl2 from "@mui/material/FormControl";
-import MuiFormControlLabel from "@mui/material/FormControlLabel";
-import MuiFormGroup from "@mui/material/FormGroup";
-import MuiFormHelperText from "@mui/material/FormHelperText";
-import MuiFormLabel from "@mui/material/FormLabel";
-import { jsx as jsx18 } from "react/jsx-runtime";
-function FormControl(props) {
-  return /* @__PURE__ */ jsx18(MuiFormControl2, { ...props });
-}
-function FormControlLabel(props) {
-  return /* @__PURE__ */ jsx18(MuiFormControlLabel, { ...props });
-}
-function FormGroup(props) {
-  return /* @__PURE__ */ jsx18(MuiFormGroup, { ...props });
-}
-function FormHelperText(props) {
-  return /* @__PURE__ */ jsx18(MuiFormHelperText, { ...props });
-}
-function FormLabel(props) {
-  return /* @__PURE__ */ jsx18(MuiFormLabel, { ...props });
-}
+import { default as default11 } from "@mui/material/FormControl";
+import { default as default12 } from "@mui/material/FormControlLabel";
+import { default as default13 } from "@mui/material/FormGroup";
+import { default as default14 } from "@mui/material/FormHelperText";
+import { default as default15 } from "@mui/material/FormLabel";
 
 // src/components/InputAdornment/index.tsx
-import MuiInputAdornment from "@mui/material/InputAdornment";
-import { jsx as jsx19 } from "react/jsx-runtime";
-function InputAdornment2(props) {
-  return /* @__PURE__ */ jsx19(MuiInputAdornment, { ...props });
-}
+import { default as default16 } from "@mui/material/InputAdornment";
 
 // src/components/InputBase/index.tsx
-import MuiInputBase2 from "@mui/material/InputBase";
-import { jsx as jsx20 } from "react/jsx-runtime";
-function InputBase(props) {
-  return /* @__PURE__ */ jsx20(MuiInputBase2, { ...props });
-}
+import { default as default17 } from "@mui/material/InputBase";
 
 // src/components/InputLabel/index.tsx
-import MuiInputLabel2 from "@mui/material/InputLabel";
-import { jsx as jsx21 } from "react/jsx-runtime";
-function InputLabel(props) {
-  return /* @__PURE__ */ jsx21(MuiInputLabel2, { ...props });
-}
+import { default as default18 } from "@mui/material/InputLabel";
 
 // src/components/OutlinedInput/index.tsx
-import MuiOutlinedInput from "@mui/material/OutlinedInput";
-import MuiFilledInput from "@mui/material/FilledInput";
-import { jsx as jsx22 } from "react/jsx-runtime";
-function OutlinedInput(props) {
-  return /* @__PURE__ */ jsx22(MuiOutlinedInput, { ...props });
-}
-function FilledInput(props) {
-  return /* @__PURE__ */ jsx22(MuiFilledInput, { ...props });
-}
+import { default as default19 } from "@mui/material/OutlinedInput";
+import { default as default20 } from "@mui/material/FilledInput";
 
 // src/components/Avatar/index.tsx
-import MuiAvatar from "@mui/material/Avatar";
-import MuiAvatarGroup from "@mui/material/AvatarGroup";
-import { jsx as jsx23 } from "react/jsx-runtime";
-function Avatar(props) {
-  return /* @__PURE__ */ jsx23(MuiAvatar, { ...props });
-}
-function AvatarGroup(props) {
-  return /* @__PURE__ */ jsx23(MuiAvatarGroup, { ...props });
-}
+import { default as default21 } from "@mui/material/Avatar";
+import { default as default22 } from "@mui/material/AvatarGroup";
 
 // src/components/Badge/index.tsx
-import MuiBadge from "@mui/material/Badge";
-import { jsx as jsx24 } from "react/jsx-runtime";
-function Badge(props) {
-  return /* @__PURE__ */ jsx24(MuiBadge, { ...props });
-}
+import { default as default23 } from "@mui/material/Badge";
 
 // src/components/Chip/index.tsx
 import MuiChip from "@mui/material/Chip";
 import CloseIcon from "@mui/icons-material/CloseOutlined";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var customChipColors = {
-  teal: { bg: misc.teal[50], color: misc.teal[700], deleteIcon: misc.teal[400] },
-  orange: { bg: misc.orange[50], color: misc.orange[700], deleteIcon: misc.orange[400] },
-  purple: { bg: misc.purple[50], color: misc.purple[700], deleteIcon: misc.purple[400] },
-  pink: { bg: misc.pink[50], color: misc.pink[700], deleteIcon: misc.pink[400] },
-  fuchsia: { bg: misc.fuchsia[50], color: misc.fuchsia[700], deleteIcon: misc.fuchsia[400] },
-  orangeDark: { bg: misc.orangeDark[50], color: misc.orangeDark[700], deleteIcon: misc.orangeDark[400] },
-  green: { bg: misc.green[50], color: misc.green[700], deleteIcon: misc.green[400] },
-  indigo: { bg: misc.indigo[50], color: misc.indigo[700], deleteIcon: misc.indigo[400] },
-  rose: { bg: misc.rose[50], color: misc.rose[700], deleteIcon: misc.rose[400] },
-  blueLight: { bg: misc.blueLight[50], color: misc.blueLight[700], deleteIcon: misc.blueLight[400] }
+import { alpha as alpha2 } from "@mui/material/styles";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var customChipScales = {
+  teal: misc.teal,
+  orange: misc.orange,
+  purple: misc.purple,
+  pink: misc.pink,
+  fuchsia: misc.fuchsia,
+  orangeDark: misc.orangeDark,
+  green: misc.green,
+  indigo: misc.indigo,
+  rose: misc.rose,
+  blueLight: misc.blueLight
 };
-function Chip({ color, deleteIcon = /* @__PURE__ */ jsx25(CloseIcon, {}), sx, ...props }) {
-  const custom = color && typeof color === "string" ? customChipColors[color] : void 0;
-  if (custom) {
-    return /* @__PURE__ */ jsx25(
+function Chip({ color, deleteIcon = /* @__PURE__ */ jsx12(CloseIcon, {}), sx, ...props }) {
+  const scale = color && typeof color === "string" ? customChipScales[color] : void 0;
+  if (scale) {
+    return /* @__PURE__ */ jsx12(
       MuiChip,
       {
         deleteIcon,
         ...props,
         sx: [
           {
-            "&.MuiChip-root": {
-              backgroundColor: custom.bg,
-              color: custom.color,
+            "&.MuiChip-filled": {
+              backgroundColor: scale[50],
+              color: scale[700],
+              "& .MuiChip-deleteIcon": {
+                color: scale[400]
+              }
+            },
+            // Same recipe MUI applies to semantic outlined chips (error,
+            // warning, …): transparent face, text = 600, border/delete = 600
+            // at 70%. Holds in both modes, so no dark branch needed.
+            "&.MuiChip-outlined": {
+              borderColor: alpha2(scale[600], 0.7),
+              color: scale[600],
               "& .MuiChip-deleteIcon": {
-                color: custom.deleteIcon
+                color: alpha2(scale[600], 0.7)
               }
             }
           },
+          // Dark: deep face + light text, same hue (filled only).
+          (theme) => theme.applyStyles("dark", {
+            "&.MuiChip-filled": {
+              backgroundColor: scale[900],
+              color: scale[300],
+              "& .MuiChip-deleteIcon": {
+                color: scale[400]
+              }
+            }
+          }),
           ...Array.isArray(sx) ? sx : [sx]
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx12(
     MuiChip,
     {
       color,
@@ -764,159 +705,61 @@ function Chip({ color, deleteIcon = /* @__PURE__ */ jsx25(CloseIcon, {}), sx, ..
 }
 
 // src/components/Divider/index.tsx
-import MuiDivider from "@mui/material/Divider";
-import { jsx as jsx26 } from "react/jsx-runtime";
-function Divider(props) {
-  return /* @__PURE__ */ jsx26(MuiDivider, { ...props });
-}
+import { default as default24 } from "@mui/material/Divider";
 
 // src/components/ImageList/index.tsx
-import MuiImageList from "@mui/material/ImageList";
-import MuiImageListItem from "@mui/material/ImageListItem";
-import MuiImageListItemBar from "@mui/material/ImageListItemBar";
-import { jsx as jsx27 } from "react/jsx-runtime";
-function ImageList(props) {
-  return /* @__PURE__ */ jsx27(MuiImageList, { ...props });
-}
-function ImageListItem(props) {
-  return /* @__PURE__ */ jsx27(MuiImageListItem, { ...props });
-}
-function ImageListItemBar(props) {
-  return /* @__PURE__ */ jsx27(MuiImageListItemBar, { ...props });
-}
+import { default as default25 } from "@mui/material/ImageList";
+import { default as default26 } from "@mui/material/ImageListItem";
+import { default as default27 } from "@mui/material/ImageListItemBar";
 
 // src/components/List/index.tsx
-import MuiList from "@mui/material/List";
-import MuiListItem from "@mui/material/ListItem";
-import MuiListItemButton from "@mui/material/ListItemButton";
-import MuiListItemIcon from "@mui/material/ListItemIcon";
-import MuiListItemText2 from "@mui/material/ListItemText";
-import MuiListItemAvatar from "@mui/material/ListItemAvatar";
-import MuiListSubheader from "@mui/material/ListSubheader";
-import MuiListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
-import { jsx as jsx28 } from "react/jsx-runtime";
-function List(props) {
-  return /* @__PURE__ */ jsx28(MuiList, { ...props });
-}
-function ListItem(props) {
-  return /* @__PURE__ */ jsx28(MuiListItem, { ...props });
-}
-function ListItemButton(props) {
-  return /* @__PURE__ */ jsx28(MuiListItemButton, { ...props });
-}
-function ListItemIcon(props) {
-  return /* @__PURE__ */ jsx28(MuiListItemIcon, { ...props });
-}
-function ListItemText(props) {
-  return /* @__PURE__ */ jsx28(MuiListItemText2, { ...props });
-}
-function ListItemAvatar(props) {
-  return /* @__PURE__ */ jsx28(MuiListItemAvatar, { ...props });
-}
-function ListSubheader(props) {
-  return /* @__PURE__ */ jsx28(MuiListSubheader, { ...props });
-}
-function ListItemSecondaryAction(props) {
-  return /* @__PURE__ */ jsx28(MuiListItemSecondaryAction, { ...props });
-}
+import { default as default28 } from "@mui/material/List";
+import { default as default29 } from "@mui/material/ListItem";
+import { default as default30 } from "@mui/material/ListItemButton";
+import { default as default31 } from "@mui/material/ListItemIcon";
+import { default as default32 } from "@mui/material/ListItemText";
+import { default as default33 } from "@mui/material/ListItemAvatar";
+import { default as default34 } from "@mui/material/ListSubheader";
+import { default as default35 } from "@mui/material/ListItemSecondaryAction";
 
 // src/components/Rating/index.tsx
-import MuiRating from "@mui/material/Rating";
-import { jsx as jsx29 } from "react/jsx-runtime";
-function Rating(props) {
-  return /* @__PURE__ */ jsx29(MuiRating, { ...props });
-}
+import { default as default36 } from "@mui/material/Rating";
 
 // src/components/Table/index.tsx
-import MuiTable from "@mui/material/Table";
-import MuiTableBody from "@mui/material/TableBody";
-import MuiTableCell from "@mui/material/TableCell";
-import MuiTableContainer from "@mui/material/TableContainer";
-import MuiTableHead from "@mui/material/TableHead";
-import MuiTableRow from "@mui/material/TableRow";
-import MuiTableFooter from "@mui/material/TableFooter";
-import MuiTablePagination from "@mui/material/TablePagination";
-import MuiTableSortLabel from "@mui/material/TableSortLabel";
-import { jsx as jsx30 } from "react/jsx-runtime";
-function Table(props) {
-  return /* @__PURE__ */ jsx30(MuiTable, { ...props });
-}
-function TableBody(props) {
-  return /* @__PURE__ */ jsx30(MuiTableBody, { ...props });
-}
-function TableCell(props) {
-  return /* @__PURE__ */ jsx30(MuiTableCell, { ...props });
-}
-function TableContainer(props) {
-  return /* @__PURE__ */ jsx30(MuiTableContainer, { ...props });
-}
-function TableHead(props) {
-  return /* @__PURE__ */ jsx30(MuiTableHead, { ...props });
-}
-function TableRow(props) {
-  return /* @__PURE__ */ jsx30(MuiTableRow, { ...props });
-}
-function TableFooter(props) {
-  return /* @__PURE__ */ jsx30(MuiTableFooter, { ...props });
-}
-function TablePagination(props) {
-  return /* @__PURE__ */ jsx30(MuiTablePagination, { ...props });
-}
-function TableSortLabel(props) {
-  return /* @__PURE__ */ jsx30(MuiTableSortLabel, { ...props });
-}
+import { default as default37 } from "@mui/material/Table";
+import { default as default38 } from "@mui/material/TableBody";
+import { default as default39 } from "@mui/material/TableCell";
+import { default as default40 } from "@mui/material/TableContainer";
+import { default as default41 } from "@mui/material/TableHead";
+import { default as default42 } from "@mui/material/TableRow";
+import { default as default43 } from "@mui/material/TableFooter";
+import { default as default44 } from "@mui/material/TablePagination";
+import { default as default45 } from "@mui/material/TableSortLabel";
 
 // src/components/DataGrid/index.tsx
-import { DataGrid as MuiDataGrid } from "@mui/x-data-grid";
-import { jsx as jsx31 } from "react/jsx-runtime";
-function DataGrid(props) {
-  return /* @__PURE__ */ jsx31(MuiDataGrid, { ...props });
-}
+import { DataGrid } from "@mui/x-data-grid";
 
 // src/components/Tooltip/index.tsx
 import MuiTooltip from "@mui/material/Tooltip";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Tooltip({ arrow = true, ...props }) {
-  return /* @__PURE__ */ jsx32(MuiTooltip, { arrow, ...props });
+  return /* @__PURE__ */ jsx13(MuiTooltip, { arrow, ...props });
 }
 
 // src/components/Typography/index.tsx
-import MuiTypography from "@mui/material/Typography";
-import { jsx as jsx33 } from "react/jsx-runtime";
-function Typography(props) {
-  return /* @__PURE__ */ jsx33(MuiTypography, { ...props });
-}
+import { default as default46 } from "@mui/material/Typography";
 
 // src/components/Accordion/index.tsx
-import MuiAccordion from "@mui/material/Accordion";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import MuiAccordionActions from "@mui/material/AccordionActions";
-import { jsx as jsx34 } from "react/jsx-runtime";
-function Accordion(props) {
-  return /* @__PURE__ */ jsx34(MuiAccordion, { ...props });
-}
-function AccordionSummary(props) {
-  return /* @__PURE__ */ jsx34(MuiAccordionSummary, { ...props });
-}
-function AccordionDetails(props) {
-  return /* @__PURE__ */ jsx34(MuiAccordionDetails, { ...props });
-}
-function AccordionActions(props) {
-  return /* @__PURE__ */ jsx34(MuiAccordionActions, { ...props });
-}
+import { default as default47 } from "@mui/material/Accordion";
+import { default as default48 } from "@mui/material/AccordionSummary";
+import { default as default49 } from "@mui/material/AccordionDetails";
+import { default as default50 } from "@mui/material/AccordionActions";
 
 // src/components/AppBar/index.tsx
-import MuiAppBar from "@mui/material/AppBar";
-import MuiToolbar from "@mui/material/Toolbar";
 import MuiButton3 from "@mui/material/Button";
-import { jsx as jsx35 } from "react/jsx-runtime";
-function AppBar(props) {
-  return /* @__PURE__ */ jsx35(MuiAppBar, { ...props });
-}
-function Toolbar(props) {
-  return /* @__PURE__ */ jsx35(MuiToolbar, { ...props });
-}
+import { default as default51 } from "@mui/material/AppBar";
+import { default as default52 } from "@mui/material/Toolbar";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function AppBarNavItem({
   label,
   icon,
@@ -925,7 +768,7 @@ function AppBarNavItem({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx14(
     MuiButton3,
     {
       variant: "text",
@@ -972,13 +815,13 @@ function AppBarNavItem({
 
 // src/components/Card/index.tsx
 import MuiCard from "@mui/material/Card";
-import MuiCardContent from "@mui/material/CardContent";
-import MuiCardHeader from "@mui/material/CardHeader";
-import MuiCardActions from "@mui/material/CardActions";
-import MuiCardMedia from "@mui/material/CardMedia";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { default as default53 } from "@mui/material/CardContent";
+import { default as default54 } from "@mui/material/CardHeader";
+import { default as default55 } from "@mui/material/CardActions";
+import { default as default56 } from "@mui/material/CardMedia";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Card({ color = "primary", sx, ...props }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx15(
     MuiCard,
     {
       ...props,
@@ -989,116 +832,54 @@ function Card({ color = "primary", sx, ...props }) {
     }
   );
 }
-function CardContent(props) {
-  return /* @__PURE__ */ jsx36(MuiCardContent, { ...props });
-}
-function CardHeader(props) {
-  return /* @__PURE__ */ jsx36(MuiCardHeader, { ...props });
-}
-function CardActions(props) {
-  return /* @__PURE__ */ jsx36(MuiCardActions, { ...props });
-}
-function CardMedia(props) {
-  return /* @__PURE__ */ jsx36(MuiCardMedia, { ...props });
-}
 
 // src/components/CardActionArea/index.tsx
-import MuiCardActionArea from "@mui/material/CardActionArea";
-import { jsx as jsx37 } from "react/jsx-runtime";
-function CardActionArea(props) {
-  return /* @__PURE__ */ jsx37(MuiCardActionArea, { ...props });
-}
+import { default as default57 } from "@mui/material/CardActionArea";
 
 // src/components/Drawer/index.tsx
 import MuiDrawer from "@mui/material/Drawer";
-import MuiSwipeableDrawer from "@mui/material/SwipeableDrawer";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { default as default58 } from "@mui/material/SwipeableDrawer";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Drawer({ anchor = "right", hideBackdrop = true, ...props }) {
-  return /* @__PURE__ */ jsx38(MuiDrawer, { anchor, hideBackdrop, ...props });
-}
-function SwipeableDrawer(props) {
-  return /* @__PURE__ */ jsx38(MuiSwipeableDrawer, { ...props });
+  return /* @__PURE__ */ jsx16(MuiDrawer, { anchor, hideBackdrop, ...props });
 }
 
 // src/components/Paper/index.tsx
 import MuiPaper from "@mui/material/Paper";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Paper(props) {
-  return /* @__PURE__ */ jsx39(MuiPaper, { ...props });
+  return /* @__PURE__ */ jsx17(MuiPaper, { ...props });
 }
 
 // src/components/Alert/index.tsx
-import React2 from "react";
-import MuiAlert from "@mui/material/Alert";
-import MuiAlertTitle from "@mui/material/AlertTitle";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var Alert = React2.forwardRef(function Alert2(props, ref) {
-  return /* @__PURE__ */ jsx40(MuiAlert, { ref, ...props });
-});
-function AlertTitle(props) {
-  return /* @__PURE__ */ jsx40(MuiAlertTitle, { ...props });
-}
+import { default as default59 } from "@mui/material/Alert";
+import { default as default60 } from "@mui/material/AlertTitle";
 
 // src/components/Backdrop/index.tsx
-import MuiBackdrop from "@mui/material/Backdrop";
-import { jsx as jsx41 } from "react/jsx-runtime";
-function Backdrop(props) {
-  return /* @__PURE__ */ jsx41(MuiBackdrop, { ...props });
-}
+import { default as default61 } from "@mui/material/Backdrop";
 
 // src/components/Dialog/index.tsx
-import MuiDialog from "@mui/material/Dialog";
-import MuiDialogTitle from "@mui/material/DialogTitle";
-import MuiDialogContent from "@mui/material/DialogContent";
-import MuiDialogActions from "@mui/material/DialogActions";
-import MuiDialogContentText from "@mui/material/DialogContentText";
-import { jsx as jsx42 } from "react/jsx-runtime";
-function Dialog(props) {
-  return /* @__PURE__ */ jsx42(MuiDialog, { ...props });
-}
-function DialogTitle(props) {
-  return /* @__PURE__ */ jsx42(MuiDialogTitle, { ...props });
-}
-function DialogContent(props) {
-  return /* @__PURE__ */ jsx42(MuiDialogContent, { ...props });
-}
-function DialogActions(props) {
-  return /* @__PURE__ */ jsx42(MuiDialogActions, { ...props });
-}
-function DialogContentText(props) {
-  return /* @__PURE__ */ jsx42(MuiDialogContentText, { ...props });
-}
+import { default as default62 } from "@mui/material/Dialog";
+import { default as default63 } from "@mui/material/DialogTitle";
+import { default as default64 } from "@mui/material/DialogContent";
+import { default as default65 } from "@mui/material/DialogActions";
+import { default as default66 } from "@mui/material/DialogContentText";
 
 // src/components/Progress/index.tsx
-import MuiLinearProgress from "@mui/material/LinearProgress";
-import MuiCircularProgress from "@mui/material/CircularProgress";
-import { jsx as jsx43 } from "react/jsx-runtime";
-function LinearProgress(props) {
-  return /* @__PURE__ */ jsx43(MuiLinearProgress, { ...props });
-}
-function CircularProgress(props) {
-  return /* @__PURE__ */ jsx43(MuiCircularProgress, { ...props });
-}
+import { default as default67 } from "@mui/material/LinearProgress";
+import { default as default68 } from "@mui/material/CircularProgress";
 
 // src/components/Skeleton/index.tsx
-import MuiSkeleton from "@mui/material/Skeleton";
-import { jsx as jsx44 } from "react/jsx-runtime";
-function Skeleton(props) {
-  return /* @__PURE__ */ jsx44(MuiSkeleton, { ...props });
-}
+import { default as default69 } from "@mui/material/Skeleton";
 
 // src/components/Modal/index.tsx
-import MuiModal from "@mui/material/Modal";
-import { jsx as jsx45 } from "react/jsx-runtime";
-function Modal(props) {
-  return /* @__PURE__ */ jsx45(MuiModal, { ...props });
-}
+import { default as default70 } from "@mui/material/Modal";
 
 // src/components/Popover/index.tsx
 import MuiPopover from "@mui/material/Popover";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Popover({ slotProps, ...props }) {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx18(
     MuiPopover,
     {
       ...props,
@@ -1114,152 +895,66 @@ function Popover({ slotProps, ...props }) {
 }
 
 // src/components/Snackbar/index.tsx
-import MuiSnackbar from "@mui/material/Snackbar";
-import { jsx as jsx47 } from "react/jsx-runtime";
-function Snackbar(props) {
-  return /* @__PURE__ */ jsx47(MuiSnackbar, { ...props });
-}
+import { default as default71 } from "@mui/material/Snackbar";
 
 // src/components/SnackbarContent/index.tsx
-import MuiSnackbarContent from "@mui/material/SnackbarContent";
-import { jsx as jsx48 } from "react/jsx-runtime";
-function SnackbarContent(props) {
-  return /* @__PURE__ */ jsx48(MuiSnackbarContent, { ...props });
-}
+import { default as default72 } from "@mui/material/SnackbarContent";
 
 // src/components/BottomNavigation/index.tsx
-import MuiBottomNavigation from "@mui/material/BottomNavigation";
-import MuiBottomNavigationAction from "@mui/material/BottomNavigationAction";
-import { jsx as jsx49 } from "react/jsx-runtime";
-function BottomNavigation(props) {
-  return /* @__PURE__ */ jsx49(MuiBottomNavigation, { ...props });
-}
-function BottomNavigationAction(props) {
-  return /* @__PURE__ */ jsx49(MuiBottomNavigationAction, { ...props });
-}
+import { default as default73 } from "@mui/material/BottomNavigation";
+import { default as default74 } from "@mui/material/BottomNavigationAction";
 
 // src/components/Breadcrumbs/index.tsx
-import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
-import { jsx as jsx50 } from "react/jsx-runtime";
-function Breadcrumbs(props) {
-  return /* @__PURE__ */ jsx50(MuiBreadcrumbs, { ...props });
-}
+import { default as default75 } from "@mui/material/Breadcrumbs";
 
 // src/components/Link/index.tsx
-import MuiLink from "@mui/material/Link";
-import { jsx as jsx51 } from "react/jsx-runtime";
-function Link(props) {
-  return /* @__PURE__ */ jsx51(MuiLink, { ...props });
-}
+import { default as default76 } from "@mui/material/Link";
 
 // src/components/Menu/index.tsx
-import MuiMenu from "@mui/material/Menu";
-import MuiMenuList from "@mui/material/MenuList";
-import { jsx as jsx52 } from "react/jsx-runtime";
-function Menu(props) {
-  return /* @__PURE__ */ jsx52(MuiMenu, { ...props });
-}
-function MenuList(props) {
-  return /* @__PURE__ */ jsx52(MuiMenuList, { ...props });
-}
+import { default as default77 } from "@mui/material/Menu";
+import { default as default78 } from "@mui/material/MenuList";
 
 // src/components/MobileStepper/index.tsx
-import MuiMobileStepper from "@mui/material/MobileStepper";
-import { jsx as jsx53 } from "react/jsx-runtime";
-function MobileStepper(props) {
-  return /* @__PURE__ */ jsx53(MuiMobileStepper, { ...props });
-}
+import { default as default79 } from "@mui/material/MobileStepper";
 
 // src/components/Pagination/index.tsx
-import MuiPagination from "@mui/material/Pagination";
-import { jsx as jsx54 } from "react/jsx-runtime";
-function Pagination(props) {
-  return /* @__PURE__ */ jsx54(MuiPagination, { ...props });
-}
+import { default as default80 } from "@mui/material/Pagination";
 
 // src/components/PaginationItem/index.tsx
-import MuiPaginationItem from "@mui/material/PaginationItem";
-import { jsx as jsx55 } from "react/jsx-runtime";
-function PaginationItem(props) {
-  return /* @__PURE__ */ jsx55(MuiPaginationItem, { ...props });
-}
+import { default as default81 } from "@mui/material/PaginationItem";
 
 // src/components/SpeedDial/index.tsx
-import MuiSpeedDial from "@mui/material/SpeedDial";
-import MuiSpeedDialAction from "@mui/material/SpeedDialAction";
-import MuiSpeedDialIcon from "@mui/material/SpeedDialIcon";
-import { jsx as jsx56 } from "react/jsx-runtime";
-function SpeedDial(props) {
-  return /* @__PURE__ */ jsx56(MuiSpeedDial, { ...props });
-}
-function SpeedDialAction(props) {
-  return /* @__PURE__ */ jsx56(MuiSpeedDialAction, { ...props });
-}
-function SpeedDialIcon(props) {
-  return /* @__PURE__ */ jsx56(MuiSpeedDialIcon, { ...props });
-}
+import { default as default82 } from "@mui/material/SpeedDial";
+import { default as default83 } from "@mui/material/SpeedDialAction";
+import { default as default84 } from "@mui/material/SpeedDialIcon";
 
 // src/components/Stepper/index.tsx
-import MuiStepper from "@mui/material/Stepper";
-import MuiStep from "@mui/material/Step";
-import MuiStepLabel from "@mui/material/StepLabel";
-import MuiStepButton from "@mui/material/StepButton";
-import MuiStepConnector from "@mui/material/StepConnector";
-import MuiStepContent from "@mui/material/StepContent";
-import MuiStepIcon from "@mui/material/StepIcon";
-import { jsx as jsx57 } from "react/jsx-runtime";
-function Stepper(props) {
-  return /* @__PURE__ */ jsx57(MuiStepper, { ...props });
-}
-function Step(props) {
-  return /* @__PURE__ */ jsx57(MuiStep, { ...props });
-}
-function StepLabel(props) {
-  return /* @__PURE__ */ jsx57(MuiStepLabel, { ...props });
-}
-function StepButton(props) {
-  return /* @__PURE__ */ jsx57(MuiStepButton, { ...props });
-}
-function StepConnector(props) {
-  return /* @__PURE__ */ jsx57(MuiStepConnector, { ...props });
-}
-function StepContent(props) {
-  return /* @__PURE__ */ jsx57(MuiStepContent, { ...props });
-}
-function StepIcon(props) {
-  return /* @__PURE__ */ jsx57(MuiStepIcon, { ...props });
-}
+import { default as default85 } from "@mui/material/Stepper";
+import { default as default86 } from "@mui/material/Step";
+import { default as default87 } from "@mui/material/StepLabel";
+import { default as default88 } from "@mui/material/StepButton";
+import { default as default89 } from "@mui/material/StepConnector";
+import { default as default90 } from "@mui/material/StepContent";
+import { default as default91 } from "@mui/material/StepIcon";
 
 // src/components/Tabs/index.tsx
-import MuiTabs from "@mui/material/Tabs";
-import MuiTab from "@mui/material/Tab";
-import { jsx as jsx58 } from "react/jsx-runtime";
-function Tabs(props) {
-  return /* @__PURE__ */ jsx58(MuiTabs, { ...props });
-}
-function Tab(props) {
-  return /* @__PURE__ */ jsx58(MuiTab, { ...props });
-}
+import { default as default92 } from "@mui/material/Tabs";
+import { default as default93 } from "@mui/material/Tab";
 
 // src/components/TabScrollButton/index.tsx
-import MuiTabScrollButton from "@mui/material/TabScrollButton";
-import { jsx as jsx59 } from "react/jsx-runtime";
-function TabScrollButton(props) {
-  return /* @__PURE__ */ jsx59(MuiTabScrollButton, { ...props });
-}
+import { default as default94 } from "@mui/material/TabScrollButton";
 
 // src/components/Sidebar/index.tsx
 import { createContext, useContext } from "react";
 import MuiDrawer2 from "@mui/material/Drawer";
 import Box2 from "@mui/material/Box";
-import IconButton3 from "@mui/material/IconButton";
 import ChevronLeftOutlined from "@mui/icons-material/ChevronLeftOutlined";
 import ChevronRightOutlined from "@mui/icons-material/ChevronRightOutlined";
-import MuiListItemButton2 from "@mui/material/ListItemButton";
-import ListItemIcon2 from "@mui/material/ListItemIcon";
-import ListItemText2 from "@mui/material/ListItemText";
+import MuiListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
 import MuiTooltip2 from "@mui/material/Tooltip";
-import { jsx as jsx60, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs3 } from "react/jsx-runtime";
 var SidebarContext = createContext({
   open: true,
   collapsedWidth: 48,
@@ -1289,93 +984,124 @@ function SidebarNav({
     onMouseEnter: () => onOpenChange(true),
     onMouseLeave: () => onOpenChange(false)
   } : {};
-  return /* @__PURE__ */ jsx60(SidebarContext.Provider, { value: { open, collapsedWidth, expandedWidth }, children: /* @__PURE__ */ jsxs3(Box2, { sx: { position: "relative", width: layoutWidth, flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx60(
-      MuiDrawer2,
-      {
-        variant: "permanent",
-        ...rest,
-        ...hoverHandlers,
-        sx: {
-          width: drawerWidth,
-          flexShrink: 0,
-          "& .MuiDrawer-paper": {
-            width: drawerWidth,
-            transition: "width 200ms ease-in-out",
-            overflowX: "hidden",
-            boxSizing: "border-box",
-            ...isHover && { zIndex: (theme) => theme.zIndex.drawer + 2 }
-          },
-          ...sx
-        },
-        children: /* @__PURE__ */ jsxs3(
-          Box2,
+  return /* @__PURE__ */ jsx19(SidebarContext.Provider, { value: { open, collapsedWidth, expandedWidth }, children: /* @__PURE__ */ jsxs3(
+    Box2,
+    {
+      sx: {
+        position: "relative",
+        width: layoutWidth,
+        flexShrink: 0,
+        // Match the drawer paper's width animation so the absolutely-
+        // positioned toggle (pinned to this box's right edge) glides with the
+        // sidebar instead of jumping. Constant in hover mode → no-op there.
+        transition: "width 200ms ease-in-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx19(
+          MuiDrawer2,
           {
+            variant: "permanent",
+            ...rest,
+            ...hoverHandlers,
             sx: {
-              display: "flex",
-              flexDirection: "column",
-              height: "100%",
-              overflow: "hidden"
+              width: drawerWidth,
+              flexShrink: 0,
+              "& .MuiDrawer-paper": {
+                width: drawerWidth,
+                transition: "width 200ms ease-in-out",
+                overflowX: "hidden",
+                boxSizing: "border-box",
+                ...isHover && { zIndex: (theme) => theme.zIndex.drawer + 2 }
+              },
+              ...sx
             },
-            children: [
-              header && /* @__PURE__ */ jsx60(Box2, { sx: { flexShrink: 0 }, children: header }),
-              /* @__PURE__ */ jsx60(Box2, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden" }, children }),
-              footer && /* @__PURE__ */ jsx60(Box2, { sx: { flexShrink: 0 }, children: footer })
-            ]
+            children: /* @__PURE__ */ jsxs3(
+              Box2,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  height: "100%",
+                  overflow: "hidden"
+                },
+                children: [
+                  header && /* @__PURE__ */ jsx19(Box2, { sx: { flexShrink: 0 }, children: header }),
+                  /* @__PURE__ */ jsx19(Box2, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden" }, children }),
+                  footer && /* @__PURE__ */ jsx19(Box2, { sx: { flexShrink: 0 }, children: footer })
+                ]
+              }
+            )
           }
-        )
-      }
-    ),
-    shouldShowToggle && /* @__PURE__ */ jsx60(
-      IconButton3,
-      {
-        size: "small",
-        onClick: () => onOpenChange(!open),
-        sx: {
-          position: "absolute",
-          top: "50%",
-          right: 0,
-          transform: "translate(50%, -50%)",
-          zIndex: (theme) => theme.zIndex.drawer + 1,
-          width: 28,
-          height: 28,
-          border: 1,
-          borderColor: "divider",
-          backgroundColor: "background.paper",
-          boxShadow: 1,
-          "&:hover": {
-            backgroundColor: "action.hover"
-          },
-          "& .MuiSvgIcon-root": {
-            fontSize: 18
+        ),
+        shouldShowToggle && // The forest Button carries the faux-3D bevel/glaze/press, sized down
+        // to a square icon toggle. Face is the tonal secondary (light grey in
+        // light / charcoal in dark), not the primary brand fill — the toggle
+        // is a utility control, not a call to action.
+        /* @__PURE__ */ jsx19(
+          Button,
+          {
+            "aria-label": open ? "Collapse sidebar" : "Expand sidebar",
+            onClick: () => onOpenChange(!open),
+            sx: (theme) => ({
+              position: "absolute",
+              top: "50%",
+              right: 0,
+              transform: "translate(50%, -50%)",
+              zIndex: theme.zIndex.drawer + 1,
+              minWidth: 0,
+              width: 28,
+              height: 28,
+              padding: 0,
+              backgroundColor: `var(--mui-palette-bg-quaternary, ${bg.quaternary})`,
+              color: `var(--mui-palette-text-primary, ${text.primary})`,
+              // Light-grey standard border instead of the contained bevel's
+              // darker greyscale (fg.tertiary) — the toggle is a light utility
+              // control, so the heavier border read too dark.
+              borderColor: `var(--mui-palette-border-primary, ${border.primary})`,
+              "& .MuiSvgIcon-root": {
+                fontSize: 18
+              },
+              "&:hover": {
+                backgroundColor: `var(--mui-palette-bg-active, ${bg.active})`,
+                // The contained brightness lift assumes a dark face — on the
+                // light-grey light-mode face it would blow out. In dark the
+                // hover token matches the face, so a small lift is the cue.
+                filter: "none",
+                ...theme.applyStyles("dark", { filter: "brightness(1.15)" })
+              }
+            }),
+            children: open ? /* @__PURE__ */ jsx19(ChevronLeftOutlined, {}) : /* @__PURE__ */ jsx19(ChevronRightOutlined, {})
           }
-        },
-        children: open ? /* @__PURE__ */ jsx60(ChevronLeftOutlined, {}) : /* @__PURE__ */ jsx60(ChevronRightOutlined, {})
-      }
-    )
-  ] }) });
+        )
+      ]
+    }
+  ) });
 }
 var itemSx = {
-  borderRadius: 1,
-  backgroundColor: bg.primary,
-  color: text.secondary,
+  // Preset radius.md (4px) — same corner radius as buttons and inputs.
+  borderRadius: "4px",
+  // 4px gap between stacked items, independent of the container (List/flex).
+  marginBottom: "4px",
+  "&:last-of-type": { marginBottom: 0 },
+  backgroundColor: `var(--mui-palette-bg-primary, ${bg.primary})`,
+  color: `var(--mui-palette-text-secondary, ${text.secondary})`,
   "& .MuiListItemIcon-root": {
-    color: navColors.itemIconFg
+    color: `var(--mui-palette-navColors-itemIconFg, ${navColors.itemIconFg})`
   },
   "&:hover": {
-    backgroundColor: bg.primaryHover
+    backgroundColor: `var(--mui-palette-bg-primaryHover, ${bg.primaryHover})`
   },
   "&.Mui-selected": {
-    backgroundColor: bg.active,
-    color: text.primary,
+    backgroundColor: `var(--mui-palette-bg-active, ${bg.active})`,
+    color: `var(--mui-palette-text-primary, ${text.primary})`,
     "& .MuiListItemIcon-root": {
-      color: navColors.itemIconFgActive
+      color: `var(--mui-palette-navColors-itemIconFgActive, ${navColors.itemIconFgActive})`
     },
     "& .MuiListItemText-primary": {
       fontWeight: 600
     },
     "&:hover": {
-      backgroundColor: bg.primaryHover
+      backgroundColor: `var(--mui-palette-bg-primaryHover, ${bg.primaryHover})`
     }
   }
 };
@@ -1388,8 +1114,8 @@ function SidebarItem({
 }) {
   const { open } = useSidebar();
   if (!open) {
-    return /* @__PURE__ */ jsx60(MuiTooltip2, { title: label, placement: "right", arrow: true, children: /* @__PURE__ */ jsx60(
-      MuiListItemButton2,
+    return /* @__PURE__ */ jsx19(MuiTooltip2, { title: label, placement: "right", arrow: true, children: /* @__PURE__ */ jsx19(
+      MuiListItemButton,
       {
         ...rest,
         sx: {
@@ -1397,26 +1123,232 @@ function SidebarItem({
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          width: 40,
-          height: 40,
+          width: 32,
+          height: 32,
           padding: 0,
-          margin: "0 auto",
+          marginInline: "auto",
           ...sx
         },
-        children: /* @__PURE__ */ jsx60(ListItemIcon2, { sx: { minWidth: "unset", margin: 0, "& .MuiSvgIcon-root": { fontSize: 20 } }, children: icon })
+        children: /* @__PURE__ */ jsx19(ListItemIcon, { sx: { minWidth: "unset", margin: 0, "& .MuiSvgIcon-root": { fontSize: 20 } }, children: icon })
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs3(MuiListItemButton2, { ...rest, sx: { ...itemSx, height: 40, ...sx }, children: [
-    /* @__PURE__ */ jsx60(ListItemIcon2, { sx: { "& .MuiSvgIcon-root": { fontSize: 20 } }, children: icon }),
-    /* @__PURE__ */ jsx60(ListItemText2, { primary: label }),
+  return /* @__PURE__ */ jsxs3(MuiListItemButton, { ...rest, sx: { ...itemSx, height: 32, ...sx }, children: [
+    /* @__PURE__ */ jsx19(ListItemIcon, { sx: { minWidth: 32, "& .MuiSvgIcon-root": { fontSize: 20 } }, children: icon }),
+    /* @__PURE__ */ jsx19(ListItemText, { primary: label }),
     endAdornment
   ] });
 }
 
+// src/components/AppShell/index.tsx
+import { useState as useState2 } from "react";
+import Box3 from "@mui/material/Box";
+import MuiDrawer3 from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useColorScheme, useTheme } from "@mui/material/styles";
+import MenuOutlined from "@mui/icons-material/MenuOutlined";
+import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
+import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
+import { jsx as jsx20, jsxs as jsxs4 } from "react/jsx-runtime";
+function ColorModeToggle() {
+  const { mode, systemMode, setMode } = useColorScheme();
+  const resolved = mode === "system" ? systemMode : mode;
+  const isDark = resolved === "dark";
+  return /* @__PURE__ */ jsx20(Tooltip, { title: isDark ? "Switch to light mode" : "Switch to dark mode", children: /* @__PURE__ */ jsx20(
+    IconButton2,
+    {
+      size: "small",
+      color: "inherit",
+      "aria-label": "Toggle color mode",
+      onClick: () => setMode(isDark ? "light" : "dark"),
+      children: isDark ? /* @__PURE__ */ jsx20(LightModeOutlined, { fontSize: "small" }) : /* @__PURE__ */ jsx20(DarkModeOutlined, { fontSize: "small" })
+    }
+  ) });
+}
+function ShellBrand({
+  product,
+  logoVariant
+}) {
+  const { mode, systemMode } = useColorScheme();
+  const dark = (mode === "system" ? systemMode : mode) === "dark";
+  if (logoVariant === "full") {
+    return /* @__PURE__ */ jsx20(Logo, { product, variant: "logo", color: dark ? "negative" : "positive" });
+  }
+  return /* @__PURE__ */ jsx20(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 = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const [sidebarOpen, setSidebarOpen] = useState2(defaultSidebarOpen);
+  const [mobileOpen, setMobileOpen] = useState2(false);
+  const navContent = nav != null ? nav : navItems && /* @__PURE__ */ jsx20(List, { children: navItems.map(({ label, icon, active, endAdornment, ...link }) => /* @__PURE__ */ jsx20(
+    SidebarItem,
+    {
+      icon,
+      label,
+      selected: active,
+      endAdornment,
+      ...link
+    },
+    label
+  )) });
+  const brandEl = brand != null ? brand : /* @__PURE__ */ jsx20(ShellBrand, { product, logoVariant });
+  const wrapLogomark = !brand && logoVariant === "logomark" && !isMobile;
+  return /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexDirection: "column", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx20(
+      default51,
+      {
+        position: "sticky",
+        elevation: 0,
+        sx: { zIndex: theme.zIndex.drawer + 1 },
+        children: /* @__PURE__ */ jsxs4(default52, { variant: "dense", sx: { px: { xs: "16px", sm: "16px" } }, children: [
+          /* @__PURE__ */ jsxs4(Box3, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 1 }, children: [
+            isMobile && /* @__PURE__ */ jsx20(
+              IconButton2,
+              {
+                size: "small",
+                color: "inherit",
+                "aria-label": "Open navigation",
+                onClick: () => setMobileOpen(true),
+                children: /* @__PURE__ */ jsx20(MenuOutlined, { fontSize: "small" })
+              }
+            ),
+            wrapLogomark ? /* @__PURE__ */ jsx20(Box3, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+          ] }),
+          /* @__PURE__ */ jsx20(Box3, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ jsx20(Search, { size: "small", placeholder: "Search\u2026", sx: { width: "100%", maxWidth: 480 } }) : search || null }),
+          /* @__PURE__ */ jsxs4(Box3, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: [
+            /* @__PURE__ */ jsx20(ColorModeToggle, {}),
+            actions
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexGrow: 1, overflow: "hidden" }, children: [
+      !isMobile && navContent && /* @__PURE__ */ jsx20(
+        SidebarNav,
+        {
+          open: sidebarOpen,
+          onOpenChange: setSidebarOpen,
+          behavior: sidebarBehavior,
+          sx: {
+            height: "100%",
+            "& .MuiDrawer-paper": { position: "relative", height: "100%" }
+          },
+          children: navContent
+        }
+      ),
+      /* @__PURE__ */ jsx20(Box3, { component: "main", sx: { flexGrow: 1, overflow: "auto" }, children })
+    ] }),
+    isMobile && navContent && /* @__PURE__ */ jsx20(
+      MuiDrawer3,
+      {
+        open: mobileOpen,
+        onClose: () => setMobileOpen(false),
+        onClick: () => setMobileOpen(false),
+        sx: { "& .MuiDrawer-paper": { width: 240 } },
+        children: navContent
+      }
+    )
+  ] });
+}
+
+// src/components/Page/index.tsx
+import Box4 from "@mui/material/Box";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import MuiLink from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
+function Page({
+  title,
+  breadcrumbs,
+  actions,
+  disableGutters = false,
+  maxWidth,
+  sx,
+  children
+}) {
+  return /* @__PURE__ */ jsx21(
+    Box4,
+    {
+      component: "section",
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100%",
+          backgroundColor: "background.paper",
+          ...disableGutters ? {} : { p: 3 }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ jsxs5(
+        Box4,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            width: "100%",
+            ...maxWidth ? { maxWidth, mx: "auto" } : {}
+          },
+          children: [
+            breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx21(MuiBreadcrumbs, { "aria-label": "breadcrumb", sx: { mb: 1 }, children: breadcrumbs.map(
+              (crumb, i) => i === breadcrumbs.length - 1 ? (
+                // Current page: plain text, not a link.
+                /* @__PURE__ */ jsx21(Typography, { variant: "body2", color: "text.primary", children: crumb.label }, crumb.label)
+              ) : /* @__PURE__ */ jsx21(
+                MuiLink,
+                {
+                  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__ */ jsxs5(
+              Box4,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 2,
+                  mb: 3
+                },
+                children: [
+                  /* @__PURE__ */ jsx21(Typography, { variant: "h5", children: title }),
+                  actions && /* @__PURE__ */ jsx21(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: actions })
+                ]
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/components/Box/index.tsx
 import MuiBox from "@mui/material/Box";
-var Box3 = MuiBox;
+var Box5 = MuiBox;
 
 // src/components/Stack/index.tsx
 import MuiStack from "@mui/material/Stack";
@@ -1431,111 +1363,67 @@ import MuiContainer from "@mui/material/Container";
 var Container = MuiContainer;
 
 // src/components/Collapse/index.tsx
-import MuiCollapse from "@mui/material/Collapse";
-import { jsx as jsx61 } from "react/jsx-runtime";
-function Collapse(props) {
-  return /* @__PURE__ */ jsx61(MuiCollapse, { ...props });
-}
+import { default as default95 } from "@mui/material/Collapse";
 
 // src/components/Fade/index.tsx
-import MuiFade from "@mui/material/Fade";
-import { jsx as jsx62 } from "react/jsx-runtime";
-function Fade(props) {
-  return /* @__PURE__ */ jsx62(MuiFade, { ...props });
-}
+import { default as default96 } from "@mui/material/Fade";
 
 // src/components/Grow/index.tsx
-import MuiGrow from "@mui/material/Grow";
-import { jsx as jsx63 } from "react/jsx-runtime";
-function Grow(props) {
-  return /* @__PURE__ */ jsx63(MuiGrow, { ...props });
-}
+import { default as default97 } from "@mui/material/Grow";
 
 // src/components/Slide/index.tsx
-import MuiSlide from "@mui/material/Slide";
-import { jsx as jsx64 } from "react/jsx-runtime";
-function Slide(props) {
-  return /* @__PURE__ */ jsx64(MuiSlide, { ...props });
-}
+import { default as default98 } from "@mui/material/Slide";
 
 // src/components/Zoom/index.tsx
-import MuiZoom from "@mui/material/Zoom";
-import { jsx as jsx65 } from "react/jsx-runtime";
-function Zoom(props) {
-  return /* @__PURE__ */ jsx65(MuiZoom, { ...props });
-}
+import { default as default99 } from "@mui/material/Zoom";
 
 // src/components/ButtonBase/index.tsx
-import MuiButtonBase from "@mui/material/ButtonBase";
-import { jsx as jsx66 } from "react/jsx-runtime";
-function ButtonBase(props) {
-  return /* @__PURE__ */ jsx66(MuiButtonBase, { ...props });
-}
+import { default as default100 } from "@mui/material/ButtonBase";
 
 // src/components/ClickAwayListener/index.tsx
-import MuiClickAwayListener from "@mui/material/ClickAwayListener";
-import { jsx as jsx67 } from "react/jsx-runtime";
-function ClickAwayListener(props) {
-  return /* @__PURE__ */ jsx67(MuiClickAwayListener, { ...props });
-}
+import { default as default101 } from "@mui/material/ClickAwayListener";
 
 // src/components/GlobalStyles/index.tsx
-import MuiGlobalStyles from "@mui/material/GlobalStyles";
-import { jsx as jsx68 } from "react/jsx-runtime";
-function GlobalStyles(props) {
-  return /* @__PURE__ */ jsx68(MuiGlobalStyles, { ...props });
-}
+import { default as default102 } from "@mui/material/GlobalStyles";
 
 // src/components/NoSsr/index.tsx
-import { default as default2 } from "@mui/material/NoSsr";
+import { default as default103 } from "@mui/material/NoSsr";
 
 // src/components/Popper/index.tsx
-import MuiPopper from "@mui/material/Popper";
-import { jsx as jsx69 } from "react/jsx-runtime";
-function Popper(props) {
-  return /* @__PURE__ */ jsx69(MuiPopper, { ...props });
-}
+import { default as default104 } from "@mui/material/Popper";
 
 // src/components/Portal/index.tsx
 import MuiPortal from "@mui/material/Portal";
 var Portal = MuiPortal;
 
 // src/components/Slider/index.tsx
-import MuiSlider from "@mui/material/Slider";
-import { jsx as jsx70 } from "react/jsx-runtime";
-function Slider(props) {
-  return /* @__PURE__ */ jsx70(MuiSlider, { ...props });
-}
+import { default as default105 } from "@mui/material/Slider";
 
 // src/components/SvgIcon/index.tsx
-import MuiSvgIcon from "@mui/material/SvgIcon";
-import { jsx as jsx71 } from "react/jsx-runtime";
-function SvgIcon(props) {
-  return /* @__PURE__ */ jsx71(MuiSvgIcon, { ...props });
-}
+import { default as default106 } from "@mui/material/SvgIcon";
 
 // src/components/TextareaAutosize/index.tsx
-import { default as default3 } from "@mui/material/TextareaAutosize";
+import { default as default107 } from "@mui/material/TextareaAutosize";
 
 // src/components/Charts/LineChart.tsx
 import {
   LineChart as MuiLineChart
 } from "@mui/x-charts/LineChart";
-import { useTheme as useTheme3 } from "@mui/material/styles";
+import { useTheme as useTheme4 } from "@mui/material/styles";
 
 // src/components/Charts/useChartColors.ts
-import { useTheme } from "@mui/material/styles";
+import { useTheme as useTheme2 } from "@mui/material/styles";
 function useChartColors(count) {
-  const theme = useTheme();
+  const theme = useTheme2();
   const chart = theme.palette.chart;
   const colors = chart.series.map((s) => s.fg);
   return colors.slice(0, Math.min(count, colors.length));
 }
 
 // src/components/Charts/CustomTooltip.tsx
-import { Box as Box4, Typography as Typography2 } from "@mui/material";
-import { useTheme as useTheme2 } from "@mui/material/styles";
-import { jsx as jsx72, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box6, Typography as Typography2 } from "@mui/material";
+import { useTheme as useTheme3 } from "@mui/material/styles";
+import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 function formatDate(date) {
   if (!date) return "";
   const d = new Date(date);
@@ -1556,12 +1444,12 @@ function renderValue(val) {
 }
 function CustomTooltip(props) {
   const { series, axisValue, dataIndex } = props;
-  const theme = useTheme2();
+  const theme = useTheme3();
   if (dataIndex == null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4(
-    Box4,
+  return /* @__PURE__ */ jsxs6(
+    Box6,
     {
       sx: {
         backgroundColor: theme.palette.common.white,
@@ -1576,7 +1464,7 @@ function CustomTooltip(props) {
         border: `1px solid ${theme.palette.divider}`
       },
       children: [
-        /* @__PURE__ */ jsx72(
+        /* @__PURE__ */ jsx22(
           Typography2,
           {
             variant: "body2",
@@ -1593,9 +1481,9 @@ 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__ */ jsx72(Box4, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ jsx72(
-              Box4,
+          return /* @__PURE__ */ jsx22(Box6, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ jsxs6(Box6, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx22(
+              Box6,
               {
                 sx: {
                   width: 16,
@@ -1606,7 +1494,7 @@ function CustomTooltip(props) {
                 }
               }
             ),
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs6(
               Typography2,
               {
                 variant: "body2",
@@ -1617,8 +1505,8 @@ function CustomTooltip(props) {
                   gap: "6px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx72(
-                    Box4,
+                  /* @__PURE__ */ jsx22(
+                    Box6,
                     {
                       component: "span",
                       sx: {
@@ -1645,10 +1533,10 @@ function CustomTooltip(props) {
 }
 
 // src/components/Charts/LineChart.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function LineChart({ series, colors, ...props }) {
   var _a, _b;
-  const theme = useTheme3();
+  const theme = useTheme4();
   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) => {
@@ -1659,7 +1547,7 @@ function LineChart({ series, colors, ...props }) {
       highlightScope: (_b2 = s.highlightScope) != null ? _b2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx23(
     MuiLineChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1732,11 +1620,11 @@ function LineChart({ series, colors, ...props }) {
 import {
   BarChart as MuiBarChart
 } from "@mui/x-charts/BarChart";
-import { useTheme as useTheme4 } from "@mui/material/styles";
-import { jsx as jsx74, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useTheme as useTheme5 } from "@mui/material/styles";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 function BarChart({ series, colors, ...props }) {
   var _a, _b;
-  const theme = useTheme4();
+  const theme = useTheme5();
   const chart = theme.palette.chart;
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const resolvedColors = colors != null ? colors : seriesColors;
@@ -1751,7 +1639,7 @@ function BarChart({ series, colors, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx24(
     MuiBarChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1811,10 +1699,10 @@ function BarChart({ series, colors, ...props }) {
         ...(_b = props.sx) != null ? _b : {}
       },
       ...props,
-      children: /* @__PURE__ */ jsx74("defs", { children: series == null ? void 0 : series.map((s, idx) => {
+      children: /* @__PURE__ */ jsx24("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__ */ jsxs5(
+        return /* @__PURE__ */ jsxs7(
           "pattern",
           {
             id: `striped-pattern-${idx}`,
@@ -1823,8 +1711,8 @@ function BarChart({ series, colors, ...props }) {
             height: "8",
             patternTransform: "rotate(45)",
             children: [
-              /* @__PURE__ */ jsx74("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
-              /* @__PURE__ */ jsx74("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
+              /* @__PURE__ */ jsx24("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
+              /* @__PURE__ */ jsx24("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
             ]
           },
           `striped-${idx}`
@@ -1838,11 +1726,11 @@ function BarChart({ series, colors, ...props }) {
 import {
   PieChart as MuiPieChart
 } from "@mui/x-charts/PieChart";
-import { useTheme as useTheme5 } from "@mui/material/styles";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { useTheme as useTheme6 } from "@mui/material/styles";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function PieChart({ series, colors, ...props }) {
   var _a, _b, _c, _d;
-  const theme = useTheme5();
+  const theme = useTheme6();
   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);
@@ -1853,7 +1741,7 @@ function PieChart({ series, colors, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx25(
     MuiPieChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1898,7 +1786,7 @@ function PieChart({ series, colors, ...props }) {
 import {
   ScatterChart as MuiScatterChart
 } from "@mui/x-charts/ScatterChart";
-import { useTheme as useTheme6 } from "@mui/material/styles";
+import { useTheme as useTheme7 } from "@mui/material/styles";
 
 // src/components/Charts/chartSx.ts
 function getForestChartSx(theme) {
@@ -1954,10 +1842,10 @@ var forestLegendSlotProps = {
 };
 
 // src/components/Charts/ScatterChart.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function ScatterChart({ series, colors, ...props }) {
   var _a, _b;
-  const theme = useTheme6();
+  const theme = useTheme7();
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const modifiedSeries = series == null ? void 0 : series.map((s) => {
     var _a2;
@@ -1966,7 +1854,7 @@ function ScatterChart({ series, colors, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx26(
     MuiScatterChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1986,12 +1874,12 @@ function ScatterChart({ series, colors, ...props }) {
 import {
   Gauge as MuiGauge
 } from "@mui/x-charts/Gauge";
-import { useTheme as useTheme7 } from "@mui/material/styles";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { useTheme as useTheme8 } from "@mui/material/styles";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Gauge(props) {
   var _a;
-  const theme = useTheme7();
-  return /* @__PURE__ */ jsx77(
+  const theme = useTheme8();
+  return /* @__PURE__ */ jsx27(
     MuiGauge,
     {
       ...props,
@@ -2075,47 +1963,48 @@ import { getSeriesToDisplay } from "@mui/x-charts/ChartsLegend";
 import { getPieCoordinates } from "@mui/x-charts/PieChart";
 
 // src/index.ts
-import { useMediaQuery } from "@mui/material";
+import { useMediaQuery as useMediaQuery2 } from "@mui/material";
 import { useScrollTrigger } from "@mui/material";
 import { useFormControl } from "@mui/material";
-import { useTheme as useTheme8 } from "@mui/material";
+import { useTheme as useTheme9 } from "@mui/material";
 export {
-  Accordion,
-  AccordionActions,
-  AccordionDetails,
-  AccordionSummary,
-  Alert,
-  AlertTitle,
+  default47 as Accordion,
+  default50 as AccordionActions,
+  default49 as AccordionDetails,
+  default48 as AccordionSummary,
+  default59 as Alert,
+  default60 as AlertTitle,
   AnimatedArea,
   AnimatedLine,
-  AppBar,
+  default51 as AppBar,
   AppBarNavItem,
+  AppShell,
   AreaElement,
   AreaElementPath,
   AreaPlot,
-  Autocomplete,
-  Avatar,
-  AvatarGroup,
-  Backdrop,
-  Badge,
+  default2 as Autocomplete,
+  default21 as Avatar,
+  default22 as AvatarGroup,
+  default61 as Backdrop,
+  default23 as Badge,
   BarChart,
   BarElement,
   BarElementPath,
   BarLabel,
   BarPlot,
-  BottomNavigation,
-  BottomNavigationAction,
-  Box3 as Box,
-  Breadcrumbs,
+  default73 as BottomNavigation,
+  default74 as BottomNavigationAction,
+  Box5 as Box,
+  default75 as Breadcrumbs,
   Button,
-  ButtonBase,
+  default100 as ButtonBase,
   ButtonGroup,
   Card,
-  CardActionArea,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CardMedia,
+  default57 as CardActionArea,
+  default55 as CardActions,
+  default53 as CardContent,
+  default54 as CardHeader,
+  default56 as CardMedia,
   ChartContainer,
   ChartsAxis,
   ChartsAxisHighlight,
@@ -2138,11 +2027,11 @@ export {
   ChartsVoronoiHandler,
   ChartsXAxis,
   ChartsYAxis,
-  Checkbox,
+  default3 as Checkbox,
   Chip,
-  CircularProgress,
-  ClickAwayListener,
-  Collapse,
+  default68 as CircularProgress,
+  default101 as ClickAwayListener,
+  default95 as Collapse,
   Container,
   ContinuousColorLegend,
   DataGrid,
@@ -2150,68 +2039,70 @@ export {
   DefaultChartsAxisTooltipContent,
   DefaultChartsItemTooltipContent,
   DefaultChartsLegend,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Divider,
+  default62 as Dialog,
+  default65 as DialogActions,
+  default64 as DialogContent,
+  default66 as DialogContentText,
+  default63 as DialogTitle,
+  default24 as Divider,
   Drawer,
   Fab,
-  Fade,
-  FilledInput,
+  default96 as Fade,
+  default20 as FilledInput,
   ForestProvider,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  FormHelperText,
-  FormLabel,
+  default11 as FormControl,
+  default12 as FormControlLabel,
+  default13 as FormGroup,
+  default14 as FormHelperText,
+  default15 as FormLabel,
   Gauge,
   GaugeContainer,
   GaugeReferenceArc,
   GaugeValueArc,
   GaugeValueText,
-  GlobalStyles,
+  default102 as GlobalStyles,
   Grid,
-  Grow,
+  default97 as Grow,
   HighlightedProvider,
   IconButton2 as IconButton,
-  ImageList,
-  ImageListItem,
-  ImageListItemBar,
-  Input,
-  InputAdornment2 as InputAdornment,
-  InputBase,
-  InputLabel,
+  default25 as ImageList,
+  default26 as ImageListItem,
+  default27 as ImageListItemBar,
+  InitColorSchemeScript,
+  default8 as Input,
+  default16 as InputAdornment,
+  default17 as InputBase,
+  default18 as InputLabel,
   LineChart,
   LineElement,
   LineElementPath,
   LineHighlightElement,
   LineHighlightPlot,
   LinePlot,
-  LinearProgress,
-  Link,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemButton,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  ListSubheader,
+  default67 as LinearProgress,
+  default76 as Link,
+  default28 as List,
+  default29 as ListItem,
+  default33 as ListItemAvatar,
+  default30 as ListItemButton,
+  default31 as ListItemIcon,
+  default35 as ListItemSecondaryAction,
+  default32 as ListItemText,
+  default34 as ListSubheader,
   Logo,
   MarkElement,
   MarkPlot,
-  Menu,
-  MenuItem,
-  MenuList,
-  MobileStepper,
-  Modal,
+  default77 as Menu,
+  default6 as MenuItem,
+  default78 as MenuList,
+  default79 as MobileStepper,
+  default70 as Modal,
   MultiSelect,
-  default2 as NoSsr,
-  OutlinedInput,
-  Pagination,
-  PaginationItem,
+  default103 as NoSsr,
+  default19 as OutlinedInput,
+  Page,
+  default80 as Pagination,
+  default81 as PaginationItem,
   Paper,
   PieArc,
   PieArcLabel,
@@ -2221,11 +2112,11 @@ export {
   PiePlot,
   PiecewiseColorLegend,
   Popover,
-  Popper,
+  default104 as Popper,
   Portal,
-  Radio,
-  RadioGroup,
-  Rating,
+  default5 as Radio,
+  default4 as RadioGroup,
+  default36 as Rating,
   ResponsiveChartContainer,
   Scatter,
   ScatterChart,
@@ -2234,46 +2125,46 @@ export {
   Select,
   SidebarItem,
   SidebarNav,
-  Skeleton,
-  Slide,
-  Slider,
-  Snackbar,
-  SnackbarContent,
+  default69 as Skeleton,
+  default98 as Slide,
+  default105 as Slider,
+  default71 as Snackbar,
+  default72 as SnackbarContent,
   SparkLineChart,
-  SpeedDial,
-  SpeedDialAction,
-  SpeedDialIcon,
+  default82 as SpeedDial,
+  default83 as SpeedDialAction,
+  default84 as SpeedDialIcon,
   Stack,
-  Step,
-  StepButton,
-  StepConnector,
-  StepContent,
-  StepIcon,
-  StepLabel,
-  Stepper,
-  SvgIcon,
-  SwipeableDrawer,
+  default86 as Step,
+  default88 as StepButton,
+  default89 as StepConnector,
+  default90 as StepContent,
+  default91 as StepIcon,
+  default87 as StepLabel,
+  default85 as Stepper,
+  default106 as SvgIcon,
+  default58 as SwipeableDrawer,
   Switch,
-  Tab,
-  TabScrollButton,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-  TableSortLabel,
-  Tabs,
-  TextField,
-  default3 as TextareaAutosize,
-  ToggleButton,
-  ToggleButtonGroup,
-  Toolbar,
+  default93 as Tab,
+  default94 as TabScrollButton,
+  default37 as Table,
+  default38 as TableBody,
+  default39 as TableCell,
+  default40 as TableContainer,
+  default43 as TableFooter,
+  default41 as TableHead,
+  default44 as TablePagination,
+  default42 as TableRow,
+  default45 as TableSortLabel,
+  default92 as Tabs,
+  default7 as TextField,
+  default107 as TextareaAutosize,
+  default9 as ToggleButton,
+  default10 as ToggleButtonGroup,
+  default52 as Toolbar,
   Tooltip,
-  Typography,
-  Zoom,
+  default46 as Typography,
+  default99 as Zoom,
   alpha,
   avatarColors,
   base,
@@ -2299,10 +2190,7 @@ export {
   fontFamilyMono,
   fontSize,
   fontWeight,
-  forestAgencyPreset,
   forestAlkemyPlusPreset,
-  forestExternalPreset,
-  forestInternalPreset,
   forestTheme,
   forestThemeOptions,
   getAvailablePresets,
@@ -2327,18 +2215,19 @@ export {
   useAxisTooltip,
   useChartColors,
   useChartId,
+  useColorScheme2 as useColorScheme,
   useDrawingArea,
   useFormControl,
   useGaugeState,
   useHighlighted,
   useItemHighlighted,
   useItemTooltip,
-  useMediaQuery,
+  useMediaQuery2 as useMediaQuery,
   useMouseTracker,
   useScrollTrigger,
   useSidebar,
   useSvgRef,
-  useTheme8 as useTheme,
+  useTheme9 as useTheme,
   useXAxis,
   useXColorScale,
   useXScale,