@matteoaliano/forest-ui 1.2.3 → 1.2.5

package/dist/index.mjs

@@ -38,7 +38,7 @@ import {
   toggleColors,
   warning,
   widths
-} from "./chunk-NXIZI6F7.mjs";
+} from "./chunk-B5MZMBLL.mjs";
 
 // src/provider/ForestProvider.tsx
 import { useMemo } from "react";
@@ -86,7 +86,7 @@ function Button({ variant = "contained", ...props }) {
 // src/components/ButtonGroup/index.tsx
 import MuiButtonGroup from "@mui/material/ButtonGroup";
 import { jsx as jsx3 } from "react/jsx-runtime";
-function ButtonGroup({ variant = "contained", ...props }) {
+function ButtonGroup({ variant = "outlined", ...props }) {
   return /* @__PURE__ */ jsx3(MuiButtonGroup, { variant, ...props });
 }
 
@@ -838,15 +838,28 @@ var Logo = forwardRef(
 Logo.displayName = "Logo";
 
 // src/components/ToggleButton/index.tsx
+import { createContext, useContext } from "react";
 import MuiToggleButton from "@mui/material/ToggleButton";
-import { default as default10 } from "@mui/material/ToggleButtonGroup";
+import MuiToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import { jsx as jsx10 } from "react/jsx-runtime";
+var ToggleButtonVariantContext = createContext(
+  void 0
+);
+function ToggleButtonGroup({
+  variant = "outlined",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(ToggleButtonVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx10(MuiToggleButtonGroup, { ...props }) });
+}
 function ToggleButton({
-  variant = "contained",
+  variant,
   className,
   ...props
 }) {
-  const cls = variant === "outlined" ? ["ForestToggleButton-outlined", className].filter(Boolean).join(" ") : className;
+  var _a;
+  const groupVariant = useContext(ToggleButtonVariantContext);
+  const resolved = (_a = variant != null ? variant : groupVariant) != null ? _a : "outlined";
+  const cls = resolved === "outlined" ? ["ForestToggleButton-outlined", className].filter(Boolean).join(" ") : className;
   return /* @__PURE__ */ jsx10(MuiToggleButton, { className: cls, ...props });
 }
 
@@ -860,31 +873,31 @@ function DatePicker(props) {
 }
 
 // src/components/FormControl/index.tsx
-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";
+import { default as default10 } from "@mui/material/FormControl";
+import { default as default11 } from "@mui/material/FormControlLabel";
+import { default as default12 } from "@mui/material/FormGroup";
+import { default as default13 } from "@mui/material/FormHelperText";
+import { default as default14 } from "@mui/material/FormLabel";
 
 // src/components/InputAdornment/index.tsx
-import { default as default16 } from "@mui/material/InputAdornment";
+import { default as default15 } from "@mui/material/InputAdornment";
 
 // src/components/InputBase/index.tsx
-import { default as default17 } from "@mui/material/InputBase";
+import { default as default16 } from "@mui/material/InputBase";
 
 // src/components/InputLabel/index.tsx
-import { default as default18 } from "@mui/material/InputLabel";
+import { default as default17 } from "@mui/material/InputLabel";
 
 // src/components/OutlinedInput/index.tsx
-import { default as default19 } from "@mui/material/OutlinedInput";
-import { default as default20 } from "@mui/material/FilledInput";
+import { default as default18 } from "@mui/material/OutlinedInput";
+import { default as default19 } from "@mui/material/FilledInput";
 
 // src/components/Avatar/index.tsx
-import { default as default21 } from "@mui/material/Avatar";
-import { default as default22 } from "@mui/material/AvatarGroup";
+import { default as default20 } from "@mui/material/Avatar";
+import { default as default21 } from "@mui/material/AvatarGroup";
 
 // src/components/Badge/index.tsx
-import { default as default23 } from "@mui/material/Badge";
+import { default as default22 } from "@mui/material/Badge";
 
 // src/components/Chip/index.tsx
 import MuiChip from "@mui/material/Chip";
@@ -958,36 +971,36 @@ function Chip({ color, deleteIcon = /* @__PURE__ */ jsx12(CloseIcon, {}), sx, ..
 }
 
 // src/components/Divider/index.tsx
-import { default as default24 } from "@mui/material/Divider";
+import { default as default23 } from "@mui/material/Divider";
 
 // src/components/ImageList/index.tsx
-import { default as default25 } from "@mui/material/ImageList";
-import { default as default26 } from "@mui/material/ImageListItem";
-import { default as default27 } from "@mui/material/ImageListItemBar";
+import { default as default24 } from "@mui/material/ImageList";
+import { default as default25 } from "@mui/material/ImageListItem";
+import { default as default26 } from "@mui/material/ImageListItemBar";
 
 // src/components/List/index.tsx
-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";
+import { default as default27 } from "@mui/material/List";
+import { default as default28 } from "@mui/material/ListItem";
+import { default as default29 } from "@mui/material/ListItemButton";
+import { default as default30 } from "@mui/material/ListItemIcon";
+import { default as default31 } from "@mui/material/ListItemText";
+import { default as default32 } from "@mui/material/ListItemAvatar";
+import { default as default33 } from "@mui/material/ListSubheader";
+import { default as default34 } from "@mui/material/ListItemSecondaryAction";
 
 // src/components/Rating/index.tsx
-import { default as default36 } from "@mui/material/Rating";
+import { default as default35 } from "@mui/material/Rating";
 
 // src/components/Table/index.tsx
-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";
+import { default as default36 } from "@mui/material/Table";
+import { default as default37 } from "@mui/material/TableBody";
+import { default as default38 } from "@mui/material/TableCell";
+import { default as default39 } from "@mui/material/TableContainer";
+import { default as default40 } from "@mui/material/TableHead";
+import { default as default41 } from "@mui/material/TableRow";
+import { default as default42 } from "@mui/material/TableFooter";
+import { default as default43 } from "@mui/material/TablePagination";
+import { default as default44 } from "@mui/material/TableSortLabel";
 
 // src/components/DataGrid/index.tsx
 import { DataGrid } from "@mui/x-data-grid";
@@ -1000,18 +1013,18 @@ function Tooltip({ arrow = true, ...props }) {
 }
 
 // src/components/Typography/index.tsx
-import { default as default46 } from "@mui/material/Typography";
+import { default as default45 } from "@mui/material/Typography";
 
 // src/components/Accordion/index.tsx
-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";
+import { default as default46 } from "@mui/material/Accordion";
+import { default as default47 } from "@mui/material/AccordionSummary";
+import { default as default48 } from "@mui/material/AccordionDetails";
+import { default as default49 } from "@mui/material/AccordionActions";
 
 // src/components/AppBar/index.tsx
 import MuiButton3 from "@mui/material/Button";
-import { default as default51 } from "@mui/material/AppBar";
-import { default as default52 } from "@mui/material/Toolbar";
+import { default as default50 } from "@mui/material/AppBar";
+import { default as default51 } from "@mui/material/Toolbar";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function AppBarNavItem({
   label,
@@ -1068,10 +1081,10 @@ function AppBarNavItem({
 
 // src/components/Card/index.tsx
 import MuiCard from "@mui/material/Card";
-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 { default as default52 } from "@mui/material/CardContent";
+import { default as default53 } from "@mui/material/CardHeader";
+import { default as default54 } from "@mui/material/CardActions";
+import { default as default55 } from "@mui/material/CardMedia";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function Card({ color = "primary", sx, ...props }) {
   return /* @__PURE__ */ jsx15(
@@ -1079,7 +1092,12 @@ function Card({ color = "primary", sx, ...props }) {
     {
       ...props,
       sx: [
-        color === "secondary" && { backgroundColor: "background.paper" },
+        color === "secondary" && {
+          backgroundColor: "background.paper",
+          // Also hand the surface to a wrapped CardActionArea, which paints the
+          // card's background itself (the Card goes transparent around one).
+          "--forest-card-surface": "var(--mui-palette-background-paper)"
+        },
         ...Array.isArray(sx) ? sx : [sx]
       ]
     }
@@ -1087,42 +1105,42 @@ function Card({ color = "primary", sx, ...props }) {
 }
 
 // src/components/CardActionArea/index.tsx
-import { default as default57 } from "@mui/material/CardActionArea";
+import { default as default56 } from "@mui/material/CardActionArea";
 
 // src/components/Drawer/index.tsx
 import MuiDrawer from "@mui/material/Drawer";
-import { default as default58 } from "@mui/material/SwipeableDrawer";
+import { default as default57 } from "@mui/material/SwipeableDrawer";
 import { jsx as jsx16 } from "react/jsx-runtime";
 function Drawer({ anchor = "right", hideBackdrop = true, ...props }) {
   return /* @__PURE__ */ jsx16(MuiDrawer, { anchor, hideBackdrop, ...props });
 }
 
 // src/components/Paper/index.tsx
-import { default as default59 } from "@mui/material/Paper";
+import { default as default58 } from "@mui/material/Paper";
 
 // src/components/Alert/index.tsx
-import { default as default60 } from "@mui/material/Alert";
-import { default as default61 } from "@mui/material/AlertTitle";
+import { default as default59 } from "@mui/material/Alert";
+import { default as default60 } from "@mui/material/AlertTitle";
 
 // src/components/Backdrop/index.tsx
-import { default as default62 } from "@mui/material/Backdrop";
+import { default as default61 } from "@mui/material/Backdrop";
 
 // src/components/Dialog/index.tsx
-import { default as default63 } from "@mui/material/Dialog";
-import { default as default64 } from "@mui/material/DialogTitle";
-import { default as default65 } from "@mui/material/DialogContent";
-import { default as default66 } from "@mui/material/DialogActions";
-import { default as default67 } from "@mui/material/DialogContentText";
+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 { default as default68 } from "@mui/material/LinearProgress";
-import { default as default69 } from "@mui/material/CircularProgress";
+import { default as default67 } from "@mui/material/LinearProgress";
+import { default as default68 } from "@mui/material/CircularProgress";
 
 // src/components/Skeleton/index.tsx
-import { default as default70 } from "@mui/material/Skeleton";
+import { default as default69 } from "@mui/material/Skeleton";
 
 // src/components/Modal/index.tsx
-import { default as default71 } from "@mui/material/Modal";
+import { default as default70 } from "@mui/material/Modal";
 
 // src/components/Popover/index.tsx
 import MuiPopover from "@mui/material/Popover";
@@ -1144,57 +1162,57 @@ function Popover({ slotProps, ...props }) {
 }
 
 // src/components/Snackbar/index.tsx
-import { default as default72 } from "@mui/material/Snackbar";
+import { default as default71 } from "@mui/material/Snackbar";
 
 // src/components/SnackbarContent/index.tsx
-import { default as default73 } from "@mui/material/SnackbarContent";
+import { default as default72 } from "@mui/material/SnackbarContent";
 
 // src/components/BottomNavigation/index.tsx
-import { default as default74 } from "@mui/material/BottomNavigation";
-import { default as default75 } from "@mui/material/BottomNavigationAction";
+import { default as default73 } from "@mui/material/BottomNavigation";
+import { default as default74 } from "@mui/material/BottomNavigationAction";
 
 // src/components/Breadcrumbs/index.tsx
-import { default as default76 } from "@mui/material/Breadcrumbs";
+import { default as default75 } from "@mui/material/Breadcrumbs";
 
 // src/components/Link/index.tsx
-import { default as default77 } from "@mui/material/Link";
+import { default as default76 } from "@mui/material/Link";
 
 // src/components/Menu/index.tsx
-import { default as default78 } from "@mui/material/Menu";
-import { default as default79 } from "@mui/material/MenuList";
+import { default as default77 } from "@mui/material/Menu";
+import { default as default78 } from "@mui/material/MenuList";
 
 // src/components/MobileStepper/index.tsx
-import { default as default80 } from "@mui/material/MobileStepper";
+import { default as default79 } from "@mui/material/MobileStepper";
 
 // src/components/Pagination/index.tsx
-import { default as default81 } from "@mui/material/Pagination";
+import { default as default80 } from "@mui/material/Pagination";
 
 // src/components/PaginationItem/index.tsx
-import { default as default82 } from "@mui/material/PaginationItem";
+import { default as default81 } from "@mui/material/PaginationItem";
 
 // src/components/SpeedDial/index.tsx
-import { default as default83 } from "@mui/material/SpeedDial";
-import { default as default84 } from "@mui/material/SpeedDialAction";
-import { default as default85 } from "@mui/material/SpeedDialIcon";
+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 { default as default86 } from "@mui/material/Stepper";
-import { default as default87 } from "@mui/material/Step";
-import { default as default88 } from "@mui/material/StepLabel";
-import { default as default89 } from "@mui/material/StepButton";
-import { default as default90 } from "@mui/material/StepConnector";
-import { default as default91 } from "@mui/material/StepContent";
-import { default as default92 } from "@mui/material/StepIcon";
+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 { default as default93 } from "@mui/material/Tabs";
-import { default as default94 } from "@mui/material/Tab";
+import { default as default92 } from "@mui/material/Tabs";
+import { default as default93 } from "@mui/material/Tab";
 
 // src/components/TabScrollButton/index.tsx
-import { default as default95 } from "@mui/material/TabScrollButton";
+import { default as default94 } from "@mui/material/TabScrollButton";
 
 // src/components/Sidebar/index.tsx
-import { createContext, useContext } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect, useRef, useState as useState2 } from "react";
 import MuiDrawer2 from "@mui/material/Drawer";
 import Box2 from "@mui/material/Box";
 import ChevronLeftOutlined from "@mui/icons-material/ChevronLeftOutlined";
@@ -1204,14 +1222,15 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import MuiTooltip2 from "@mui/material/Tooltip";
 import { jsx as jsx18, jsxs as jsxs3 } from "react/jsx-runtime";
-var SidebarContext = createContext({
+var SidebarContext = createContext2({
   open: true,
   collapsedWidth: 48,
   expandedWidth: 240
 });
 function useSidebar() {
-  return useContext(SidebarContext);
+  return useContext2(SidebarContext);
 }
+var TOGGLE_SIZE = 28;
 function SidebarNav({
   open,
   onOpenChange,
@@ -1222,6 +1241,7 @@ function SidebarNav({
   children,
   header,
   footer,
+  toggleEdgeAllowance = 12,
   sx,
   ...rest
 }) {
@@ -1229,6 +1249,60 @@ function SidebarNav({
   const drawerWidth = open ? expandedWidth : collapsedWidth;
   const layoutWidth = isHover ? collapsedWidth : drawerWidth;
   const shouldShowToggle = showToggle != null ? showToggle : !isHover;
+  const wrapperRef = useRef(null);
+  const toggleRef = useRef(null);
+  const edgeYRef = useRef(null);
+  const [edgeActive, setEdgeActive] = useState2(false);
+  const [toggleFocused, setToggleFocused] = useState2(false);
+  const writeY = (y) => {
+    edgeYRef.current = y;
+    if (y === null) return;
+    const el = toggleRef.current;
+    if (!el) return;
+    el.style.top = "0px";
+    el.style.transform = `translate3d(50%, ${y - TOGGLE_SIZE / 2}px, 0)`;
+  };
+  const resetY = () => {
+    edgeYRef.current = null;
+    const el = toggleRef.current;
+    if (!el) return;
+    el.style.top = "";
+    el.style.transform = "";
+  };
+  useEffect(() => {
+    if (!shouldShowToggle) return;
+    const onMove = (e) => {
+      const el = wrapperRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const withinBand = Math.abs(e.clientX - r.right) <= toggleEdgeAllowance && e.clientY >= r.top && e.clientY <= r.bottom;
+      const half = TOGGLE_SIZE / 2;
+      const cur = edgeYRef.current;
+      const overToggle = cur !== null && Math.abs(e.clientX - r.right) <= half && Math.abs(e.clientY - (r.top + cur)) <= half;
+      let next = null;
+      if (withinBand || overToggle) {
+        const max = Math.max(r.height - half, half);
+        next = Math.min(Math.max(e.clientY - r.top, half), max);
+      }
+      const prev = edgeYRef.current;
+      if (prev === next) return;
+      if (prev !== null && next !== null && Math.abs(prev - next) < 0.5) return;
+      writeY(next);
+      if (prev === null !== (next === null)) setEdgeActive(next !== null);
+    };
+    const onLeave = () => {
+      if (edgeYRef.current === null) return;
+      writeY(null);
+      setEdgeActive(false);
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    document.addEventListener("pointerleave", onLeave);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerleave", onLeave);
+    };
+  }, [shouldShowToggle, toggleEdgeAllowance]);
+  const toggleVisible = edgeActive || toggleFocused;
   const hoverHandlers = isHover ? {
     onMouseEnter: () => onOpenChange(true),
     onMouseLeave: () => onOpenChange(false)
@@ -1236,6 +1310,7 @@ function SidebarNav({
   return /* @__PURE__ */ jsx18(SidebarContext.Provider, { value: { open, collapsedWidth, expandedWidth }, children: /* @__PURE__ */ jsxs3(
     Box2,
     {
+      ref: wrapperRef,
       sx: {
         position: "relative",
         width: layoutWidth,
@@ -1243,7 +1318,13 @@ function SidebarNav({
         // 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"
+        transition: "width 200ms ease-in-out",
+        // A hover-expanded sidebar has to overlay the content, which in
+        // AppShell sits at drawer + 1. This lives on the wrapper rather than
+        // on `& .MuiDrawer-paper` because a consumer's `sx` replaces that
+        // nested key wholesale (AppShell does). Only while expanded, so the
+        // resting rail still takes the content surface's shadow.
+        ...isHover && open && { zIndex: (theme) => theme.zIndex.drawer + 2 }
       },
       children: [
         /* @__PURE__ */ jsx18(
@@ -1259,8 +1340,7 @@ function SidebarNav({
                 width: drawerWidth,
                 transition: "width 200ms ease-in-out",
                 overflowX: "hidden",
-                boxSizing: "border-box",
-                ...isHover && { zIndex: (theme) => theme.zIndex.drawer + 2 }
+                boxSizing: "border-box"
               },
               ...sx
             },
@@ -1275,53 +1355,113 @@ function SidebarNav({
                 },
                 children: [
                   header && /* @__PURE__ */ jsx18(Box2, { sx: { flexShrink: 0 }, children: header }),
-                  /* @__PURE__ */ jsx18(Box2, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden" }, children }),
+                  /* @__PURE__ */ jsx18(
+                    Box2,
+                    {
+                      sx: {
+                        flexGrow: 1,
+                        overflowY: "auto",
+                        overflowX: "hidden",
+                        px: 1,
+                        "& > .MuiList-root": { paddingInline: 0 }
+                      },
+                      children
+                    }
+                  ),
                   footer && /* @__PURE__ */ jsx18(Box2, { sx: { flexShrink: 0 }, children: footer })
                 ]
               }
             )
           }
         ),
-        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.
+        shouldShowToggle && // Positioning shell: pinned to the wrapper's top-right, moved down the
+        // edge with a transform written by the pointermove handler (see
+        // `writeY`). Only opacity transitions — position snaps to the pointer
+        // so the toggle appears under the cursor and tracks it 1:1.
         /* @__PURE__ */ jsx18(
-          Button,
+          Box2,
           {
-            "aria-label": open ? "Collapse sidebar" : "Expand sidebar",
-            onClick: () => onOpenChange(!open),
+            ref: toggleRef,
             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,
-              // Match the shell surface (bg.primary = lightest grey) so the
-              // toggle reads as part of the sidebar, not a darker chip.
-              backgroundColor: `var(--mui-palette-bg-primary, ${bg.primary})`,
-              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
+              width: TOGGLE_SIZE,
+              height: TOGGLE_SIZE,
+              // Resting spot for keyboard focus and touch, where no pointer
+              // sets a transform: vertically centred on the edge. `writeY`
+              // overrides both `top` and `transform` inline while tracking
+              // and leaves them in place on hide so the exit fades in situ.
+              top: "50%",
+              transform: "translate3d(50%, -50%, 0)",
+              // Hidden until the pointer reaches the edge band. Kept mounted so
+              // it stays in the tab order and can be reached by keyboard.
+              opacity: toggleVisible ? 1 : 0,
+              pointerEvents: toggleVisible ? "auto" : "none",
+              // Enter fast with a strong ease-out so it reads as "already
+              // there"; exit a touch shorter — the user has moved on.
+              transition: toggleVisible ? "opacity 120ms cubic-bezier(0.19, 1, 0.22, 1)" : "opacity 100ms ease",
+              "@media (prefers-reduced-motion: reduce)": {
+                transition: "none"
               },
-              "&:hover": {
-                backgroundColor: `var(--mui-palette-bg-quaternary, ${bg.quaternary})`,
-                // 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)" })
-              }
+              // No hover on touch: there is no pointer to bring the toggle out,
+              // so it stays visible at its resting position.
+              "@media (hover: none)": {
+                opacity: 1,
+                pointerEvents: "auto"
+              },
+              // Above both the AppShell content surface (drawer + 1, which
+              // paints its shadow over the sidebar) and the hover-expanded
+              // drawer (drawer + 2) — the toggle straddles the seam and has
+              // to stay clickable and whole on top of both.
+              zIndex: theme.zIndex.drawer + 3
             }),
-            children: open ? /* @__PURE__ */ jsx18(ChevronLeftOutlined, {}) : /* @__PURE__ */ jsx18(ChevronRightOutlined, {})
+            children: /* @__PURE__ */ jsx18(
+              Button,
+              {
+                "aria-label": open ? "Collapse sidebar" : "Expand sidebar",
+                onClick: (e) => {
+                  onOpenChange(!open);
+                  writeY(null);
+                  setEdgeActive(false);
+                  if (!e.currentTarget.matches(":focus-visible")) {
+                    e.currentTarget.blur();
+                  }
+                },
+                onFocus: (e) => {
+                  const kb = e.currentTarget.matches(":focus-visible");
+                  if (kb) resetY();
+                  setToggleFocused(kb);
+                },
+                onBlur: () => setToggleFocused(false),
+                sx: (theme) => ({
+                  minWidth: 0,
+                  width: TOGGLE_SIZE,
+                  height: TOGGLE_SIZE,
+                  padding: 0,
+                  transition: "background-color 300ms ease",
+                  // Match the shell surface (bg.primary = lightest grey) so the
+                  // toggle reads as part of the sidebar, not a darker chip.
+                  backgroundColor: `var(--mui-palette-bg-primary, ${bg.primary})`,
+                  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-quaternary, ${bg.quaternary})`,
+                    // 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__ */ jsx18(ChevronLeftOutlined, {}) : /* @__PURE__ */ jsx18(ChevronRightOutlined, {})
+              }
+            )
           }
         )
       ]
@@ -1329,8 +1469,13 @@ function SidebarNav({
   ) });
 }
 var itemSx = {
-  // Preset radius.md (4px) — same corner radius as buttons and inputs.
-  borderRadius: "4px",
+  // Off-scale on purpose: the alkemy+ preset's radius steps run 1→12, so 11px
+  // sits between "3xl" (10) and "4xl" (12) with no token to name it.
+  borderRadius: "11px",
+  // The MuiListItemButton override sets 12px; 8px here absorbs the container's
+  // new 8px gutter so the icon column stays exactly 16px from the sidebar edge,
+  // where it has always been.
+  paddingInline: "8px",
   // 4px gap between stacked items, independent of the container (List/flex).
   marginBottom: "4px",
   "&:last-of-type": { marginBottom: 0 },
@@ -1392,7 +1537,7 @@ function SidebarItem({
 }
 
 // src/components/AppShell/index.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import Box3 from "@mui/material/Box";
 import MuiDrawer3 from "@mui/material/Drawer";
 import List from "@mui/material/List";
@@ -1443,8 +1588,8 @@ function AppShell({
 }) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  const [sidebarOpen, setSidebarOpen] = useState2(defaultSidebarOpen);
-  const [mobileOpen, setMobileOpen] = useState2(false);
+  const [sidebarOpen, setSidebarOpen] = useState3(defaultSidebarOpen);
+  const [mobileOpen, setMobileOpen] = useState3(false);
   const navContent = nav != null ? nav : navItems && /* @__PURE__ */ jsx19(List, { children: navItems.map(({ label, icon, active, endAdornment, ...link }) => /* @__PURE__ */ jsx19(
     SidebarItem,
     {
@@ -1458,63 +1603,135 @@ function AppShell({
   )) });
   const brandEl = brand != null ? brand : /* @__PURE__ */ jsx19(ShellBrand, { product, logoVariant });
   const wrapLogomark = !brand && logoVariant === "logomark" && !isMobile;
-  return /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexDirection: "column", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx19(
-      default51,
+  return (
+    // Clipping lives here rather than on the body row below, so the content
+    // surface's shadow can spill up over the AppBar instead of being cut off
+    // at the row's top edge.
+    /* @__PURE__ */ jsxs4(
+      Box3,
       {
-        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__ */ jsx19(
-              IconButton2,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100vh",
+          overflow: "hidden",
+          // The chrome fill belongs here, not only on the AppBar and Drawer.
+          // `main`'s rounded top-left corner clips its own background, and the
+          // notch between that arc and the square box corner is reached by
+          // neither the bar nor the sidebar — so without this, whatever sits
+          // behind the shell shows through it. Storybook's docs container is
+          // white, which is exactly how it surfaced.
+          backgroundColor: "background.default"
+        },
+        children: [
+          /* @__PURE__ */ jsx19(
+            default50,
+            {
+              position: "sticky",
+              elevation: 0,
+              sx: { zIndex: theme.zIndex.drawer + 1, borderBottom: "none" },
+              children: /* @__PURE__ */ jsxs4(default51, { 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__ */ jsx19(
+                    IconButton2,
+                    {
+                      variant: "icon",
+                      size: "small",
+                      color: "inherit",
+                      "aria-label": "Open navigation",
+                      onClick: () => setMobileOpen(true),
+                      children: /* @__PURE__ */ jsx19(MenuOutlined, { fontSize: "small" })
+                    }
+                  ),
+                  wrapLogomark ? /* @__PURE__ */ jsx19(Box3, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+                ] }),
+                /* @__PURE__ */ jsx19(Box3, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ jsx19(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__ */ jsx19(ColorModeToggle, {}),
+                  actions
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexGrow: 1, minHeight: 0 }, children: [
+            !isMobile && navContent && /* @__PURE__ */ jsx19(
+              SidebarNav,
               {
-                variant: "icon",
-                size: "small",
-                color: "inherit",
-                "aria-label": "Open navigation",
-                onClick: () => setMobileOpen(true),
-                children: /* @__PURE__ */ jsx19(MenuOutlined, { fontSize: "small" })
+                open: sidebarOpen,
+                onOpenChange: setSidebarOpen,
+                behavior: sidebarBehavior,
+                sx: {
+                  height: "100%",
+                  "& .MuiDrawer-paper": {
+                    position: "relative",
+                    height: "100%",
+                    // Same reason as the AppBar's border: the chrome is one piece.
+                    borderRight: "none"
+                  }
+                },
+                children: navContent
               }
             ),
-            wrapLogomark ? /* @__PURE__ */ jsx19(Box3, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+            /* @__PURE__ */ jsx19(
+              Box3,
+              {
+                component: "main",
+                sx: (t) => ({
+                  flexGrow: 1,
+                  overflow: "auto",
+                  backgroundColor: "background.paper",
+                  // Lift the surface above the chrome so its shadow lands ON the
+                  // sidebar and the AppBar rather than under them. Level with the
+                  // AppBar and later in the DOM, so it wins there; the hover
+                  // sidebar sits a level higher still and keeps overlaying content.
+                  position: "relative",
+                  zIndex: t.zIndex.drawer + 1,
+                  // Longhands, not `borderTop: "1px solid"` — the shorthand resets
+                  // border-*-color to currentColor and the hairline renders as text
+                  // black however `borderColor` is ordered around it.
+                  borderStyle: "solid",
+                  borderColor: "divider",
+                  borderTopWidth: "1px",
+                  borderRightWidth: 0,
+                  borderBottomWidth: 0,
+                  borderTopLeftRadius: `${container.shellRadius}px`,
+                  // With no sidebar below "sm" a single left corner reads lopsided,
+                  // so the surface rounds both top corners and drops the left edge.
+                  borderLeftWidth: { xs: 0, sm: "1px" },
+                  borderTopRightRadius: { xs: `${container.shellRadius}px`, sm: 0 },
+                  // Up-and-left, so the lift falls onto the chrome. In dark the
+                  // surface is already a step lighter than the chrome and does most
+                  // of the lifting itself, so the shadow only has to seat the edge.
+                  // Wide and low-contrast rather than tight and dark — a diffuse
+                  // falloff reads as lift without drawing a line.
+                  boxShadow: "-2px -2px 20px -16px #1018281a, -1px -1px 6px -3px #1018281c",
+                  // Dark keeps the same `divider` hairline as light — gray-900 on
+                  // gray-950 is only a ~15-level tonal step, so the line still does
+                  // the work of defining the edge. Only the shadow changes: one
+                  // contact layer, since the surface being lighter than the chrome
+                  // already reads as raised.
+                  ...t.applyStyles("dark", {
+                    boxShadow: "-1px -1px 6px -3px #00000059"
+                  })
+                }),
+                children
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx19(Box3, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ jsx19(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__ */ jsx19(ColorModeToggle, {}),
-            actions
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexGrow: 1, overflow: "hidden" }, children: [
-      !isMobile && navContent && /* @__PURE__ */ jsx19(
-        SidebarNav,
-        {
-          open: sidebarOpen,
-          onOpenChange: setSidebarOpen,
-          behavior: sidebarBehavior,
-          sx: {
-            height: "100%",
-            "& .MuiDrawer-paper": { position: "relative", height: "100%" }
-          },
-          children: navContent
-        }
-      ),
-      /* @__PURE__ */ jsx19(Box3, { component: "main", sx: { flexGrow: 1, overflow: "auto" }, children })
-    ] }),
-    isMobile && navContent && /* @__PURE__ */ jsx19(
-      MuiDrawer3,
-      {
-        open: mobileOpen,
-        onClose: () => setMobileOpen(false),
-        onClick: () => setMobileOpen(false),
-        sx: { "& .MuiDrawer-paper": { width: 240 } },
-        children: navContent
+          isMobile && navContent && /* @__PURE__ */ jsx19(
+            MuiDrawer3,
+            {
+              open: mobileOpen,
+              onClose: () => setMobileOpen(false),
+              onClick: () => setMobileOpen(false),
+              sx: { "& .MuiDrawer-paper": { width: 240 } },
+              children: navContent
+            }
+          )
+        ]
       }
     )
-  ] });
+  );
 }
 
 // src/components/Page/index.tsx
@@ -1600,58 +1817,58 @@ function Page({
 }
 
 // src/components/Box/index.tsx
-import { default as default96 } from "@mui/material/Box";
+import { default as default95 } from "@mui/material/Box";
 
 // src/components/Stack/index.tsx
-import { default as default97 } from "@mui/material/Stack";
+import { default as default96 } from "@mui/material/Stack";
 
 // src/components/Grid/index.tsx
-import { default as default98 } from "@mui/material/Grid";
+import { default as default97 } from "@mui/material/Grid";
 
 // src/components/Container/index.tsx
-import { default as default99 } from "@mui/material/Container";
+import { default as default98 } from "@mui/material/Container";
 
 // src/components/Collapse/index.tsx
-import { default as default100 } from "@mui/material/Collapse";
+import { default as default99 } from "@mui/material/Collapse";
 
 // src/components/Fade/index.tsx
-import { default as default101 } from "@mui/material/Fade";
+import { default as default100 } from "@mui/material/Fade";
 
 // src/components/Grow/index.tsx
-import { default as default102 } from "@mui/material/Grow";
+import { default as default101 } from "@mui/material/Grow";
 
 // src/components/Slide/index.tsx
-import { default as default103 } from "@mui/material/Slide";
+import { default as default102 } from "@mui/material/Slide";
 
 // src/components/Zoom/index.tsx
-import { default as default104 } from "@mui/material/Zoom";
+import { default as default103 } from "@mui/material/Zoom";
 
 // src/components/ButtonBase/index.tsx
-import { default as default105 } from "@mui/material/ButtonBase";
+import { default as default104 } from "@mui/material/ButtonBase";
 
 // src/components/ClickAwayListener/index.tsx
-import { default as default106 } from "@mui/material/ClickAwayListener";
+import { default as default105 } from "@mui/material/ClickAwayListener";
 
 // src/components/GlobalStyles/index.tsx
-import { default as default107 } from "@mui/material/GlobalStyles";
+import { default as default106 } from "@mui/material/GlobalStyles";
 
 // src/components/NoSsr/index.tsx
-import { default as default108 } from "@mui/material/NoSsr";
+import { default as default107 } from "@mui/material/NoSsr";
 
 // src/components/Popper/index.tsx
-import { default as default109 } from "@mui/material/Popper";
+import { default as default108 } from "@mui/material/Popper";
 
 // src/components/Portal/index.tsx
-import { default as default110 } from "@mui/material/Portal";
+import { default as default109 } from "@mui/material/Portal";
 
 // src/components/Slider/index.tsx
-import { default as default111 } from "@mui/material/Slider";
+import { default as default110 } from "@mui/material/Slider";
 
 // src/components/SvgIcon/index.tsx
-import { default as default112 } from "@mui/material/SvgIcon";
+import { default as default111 } from "@mui/material/SvgIcon";
 
 // src/components/TextareaAutosize/index.tsx
-import { default as default113 } from "@mui/material/TextareaAutosize";
+import { default as default112 } from "@mui/material/TextareaAutosize";
 
 // src/components/Charts/LineChart.tsx
 import {
@@ -2216,43 +2433,43 @@ import { useScrollTrigger } from "@mui/material";
 import { useFormControl } from "@mui/material";
 import { useTheme as useTheme9 } from "@mui/material";
 export {
-  default47 as Accordion,
-  default50 as AccordionActions,
-  default49 as AccordionDetails,
-  default48 as AccordionSummary,
-  default60 as Alert,
-  default61 as AlertTitle,
+  default46 as Accordion,
+  default49 as AccordionActions,
+  default48 as AccordionDetails,
+  default47 as AccordionSummary,
+  default59 as Alert,
+  default60 as AlertTitle,
   AnimatedArea,
   AnimatedLine,
-  default51 as AppBar,
+  default50 as AppBar,
   AppBarNavItem,
   AppShell,
   AreaElement,
   AreaElementPath,
   AreaPlot,
   default2 as Autocomplete,
-  default21 as Avatar,
-  default22 as AvatarGroup,
-  default62 as Backdrop,
-  default23 as Badge,
+  default20 as Avatar,
+  default21 as AvatarGroup,
+  default61 as Backdrop,
+  default22 as Badge,
   BarChart,
   BarElement,
   BarElementPath,
   BarLabel,
   BarPlot,
-  default74 as BottomNavigation,
-  default75 as BottomNavigationAction,
-  default96 as Box,
-  default76 as Breadcrumbs,
+  default73 as BottomNavigation,
+  default74 as BottomNavigationAction,
+  default95 as Box,
+  default75 as Breadcrumbs,
   Button,
-  default105 as ButtonBase,
+  default104 as ButtonBase,
   ButtonGroup,
   Card,
-  default57 as CardActionArea,
-  default55 as CardActions,
-  default53 as CardContent,
-  default54 as CardHeader,
-  default56 as CardMedia,
+  default56 as CardActionArea,
+  default54 as CardActions,
+  default52 as CardContent,
+  default53 as CardHeader,
+  default55 as CardMedia,
   ChartContainer,
   ChartsAxis,
   ChartsAxisHighlight,
@@ -2277,81 +2494,81 @@ export {
   ChartsYAxis,
   default3 as Checkbox,
   Chip,
-  default69 as CircularProgress,
-  default106 as ClickAwayListener,
-  default100 as Collapse,
-  default99 as Container,
+  default68 as CircularProgress,
+  default105 as ClickAwayListener,
+  default99 as Collapse,
+  default98 as Container,
   ContinuousColorLegend,
   DataGrid,
   DatePicker,
   DefaultChartsAxisTooltipContent,
   DefaultChartsItemTooltipContent,
   DefaultChartsLegend,
-  default63 as Dialog,
-  default66 as DialogActions,
-  default65 as DialogContent,
-  default67 as DialogContentText,
-  default64 as DialogTitle,
-  default24 as Divider,
+  default62 as Dialog,
+  default65 as DialogActions,
+  default64 as DialogContent,
+  default66 as DialogContentText,
+  default63 as DialogTitle,
+  default23 as Divider,
   Drawer,
   Fab,
-  default101 as Fade,
-  default20 as FilledInput,
+  default100 as Fade,
+  default19 as FilledInput,
   ForestProvider,
-  default11 as FormControl,
-  default12 as FormControlLabel,
-  default13 as FormGroup,
-  default14 as FormHelperText,
-  default15 as FormLabel,
+  default10 as FormControl,
+  default11 as FormControlLabel,
+  default12 as FormGroup,
+  default13 as FormHelperText,
+  default14 as FormLabel,
   Gauge,
   GaugeContainer,
   GaugeReferenceArc,
   GaugeValueArc,
   GaugeValueText,
-  default107 as GlobalStyles,
-  default98 as Grid,
-  default102 as Grow,
+  default106 as GlobalStyles,
+  default97 as Grid,
+  default101 as Grow,
   HighlightedProvider,
   IconButton2 as IconButton,
-  default25 as ImageList,
-  default26 as ImageListItem,
-  default27 as ImageListItemBar,
+  default24 as ImageList,
+  default25 as ImageListItem,
+  default26 as ImageListItemBar,
   InitColorSchemeScript,
   default9 as Input,
-  default16 as InputAdornment,
-  default17 as InputBase,
-  default18 as InputLabel,
+  default15 as InputAdornment,
+  default16 as InputBase,
+  default17 as InputLabel,
   LineChart,
   LineElement,
   LineElementPath,
   LineHighlightElement,
   LineHighlightPlot,
   LinePlot,
-  default68 as LinearProgress,
-  default77 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,
+  default67 as LinearProgress,
+  default76 as Link,
+  default27 as List,
+  default28 as ListItem,
+  default32 as ListItemAvatar,
+  default29 as ListItemButton,
+  default30 as ListItemIcon,
+  default34 as ListItemSecondaryAction,
+  default31 as ListItemText,
+  default33 as ListSubheader,
   Logo,
   MarkElement,
   MarkPlot,
-  default78 as Menu,
+  default77 as Menu,
   default6 as MenuItem,
-  default79 as MenuList,
-  default80 as MobileStepper,
-  default71 as Modal,
+  default78 as MenuList,
+  default79 as MobileStepper,
+  default70 as Modal,
   MultiSelect,
-  default108 as NoSsr,
-  default19 as OutlinedInput,
+  default107 as NoSsr,
+  default18 as OutlinedInput,
   Page,
-  default81 as Pagination,
-  default82 as PaginationItem,
-  default59 as Paper,
+  default80 as Pagination,
+  default81 as PaginationItem,
+  default58 as Paper,
   PieArc,
   PieArcLabel,
   PieArcLabelPlot,
@@ -2360,11 +2577,11 @@ export {
   PiePlot,
   PiecewiseColorLegend,
   Popover,
-  default109 as Popper,
-  default110 as Portal,
+  default108 as Popper,
+  default109 as Portal,
   default5 as Radio,
   default4 as RadioGroup,
-  default36 as Rating,
+  default35 as Rating,
   ResponsiveChartContainer,
   Scatter,
   ScatterChart,
@@ -2373,46 +2590,46 @@ export {
   Select,
   SidebarItem,
   SidebarNav,
-  default70 as Skeleton,
-  default103 as Slide,
-  default111 as Slider,
-  default72 as Snackbar,
-  default73 as SnackbarContent,
+  default69 as Skeleton,
+  default102 as Slide,
+  default110 as Slider,
+  default71 as Snackbar,
+  default72 as SnackbarContent,
   SparkLineChart,
-  default83 as SpeedDial,
-  default84 as SpeedDialAction,
-  default85 as SpeedDialIcon,
-  default97 as Stack,
-  default87 as Step,
-  default89 as StepButton,
-  default90 as StepConnector,
-  default91 as StepContent,
-  default92 as StepIcon,
-  default88 as StepLabel,
-  default86 as Stepper,
-  default112 as SvgIcon,
-  default58 as SwipeableDrawer,
+  default82 as SpeedDial,
+  default83 as SpeedDialAction,
+  default84 as SpeedDialIcon,
+  default96 as Stack,
+  default86 as Step,
+  default88 as StepButton,
+  default89 as StepConnector,
+  default90 as StepContent,
+  default91 as StepIcon,
+  default87 as StepLabel,
+  default85 as Stepper,
+  default111 as SvgIcon,
+  default57 as SwipeableDrawer,
   default7 as Switch,
-  default94 as Tab,
-  default95 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,
-  default93 as Tabs,
+  default93 as Tab,
+  default94 as TabScrollButton,
+  default36 as Table,
+  default37 as TableBody,
+  default38 as TableCell,
+  default39 as TableContainer,
+  default42 as TableFooter,
+  default40 as TableHead,
+  default43 as TablePagination,
+  default41 as TableRow,
+  default44 as TableSortLabel,
+  default92 as Tabs,
   default8 as TextField,
-  default113 as TextareaAutosize,
+  default112 as TextareaAutosize,
   ToggleButton,
-  default10 as ToggleButtonGroup,
-  default52 as Toolbar,
+  ToggleButtonGroup,
+  default51 as Toolbar,
   Tooltip,
-  default46 as Typography,
-  default104 as Zoom,
+  default45 as Typography,
+  default103 as Zoom,
   alpha,
   avatarColors,
   base,