@matteoaliano/forest-ui 1.2.3 → 1.2.5

package/dist/index.js

@@ -222,7 +222,7 @@ __export(src_exports, {
   TextField: () => import_TextField.default,
   TextareaAutosize: () => import_TextareaAutosize.default,
   ToggleButton: () => ToggleButton,
-  ToggleButtonGroup: () => import_ToggleButtonGroup.default,
+  ToggleButtonGroup: () => ToggleButtonGroup,
   Toolbar: () => import_Toolbar.default,
   Tooltip: () => Tooltip,
   Typography: () => import_Typography.default,
@@ -591,19 +591,13 @@ function buildComponents(tokens2) {
     }
   };
   const bevelHover = {
-    borderTopWidth: 4,
-    borderBottomWidth: 1,
-    borderTopLeftRadius: radius4.lg,
-    borderTopRightRadius: radius4.lg,
-    borderBottomLeftRadius: radius4.md,
-    borderBottomRightRadius: radius4.md
+    borderTopWidth: 3,
+    borderBottomWidth: 1
   };
   const bevelPress = {
     // Snap the press faster than the 300ms hover flip so it feels tactile.
     transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
     borderTopWidth: 1,
-    borderTopLeftRadius: radius4.md,
-    borderTopRightRadius: radius4.md,
     opacity: 0.75
   };
   const bevel3D = {
@@ -614,9 +608,7 @@ function buildComponents(tokens2) {
     borderTopWidth: 1,
     borderRightWidth: 1,
     borderLeftWidth: 1,
-    borderBottomWidth: 4,
-    borderBottomLeftRadius: radius4.lg,
-    borderBottomRightRadius: radius4.lg,
+    borderBottomWidth: 3,
     "&::before": {
       content: '""',
       position: "absolute",
@@ -653,6 +645,21 @@ function buildComponents(tokens2) {
         }
       }
     },
+    // ─── ButtonBase (global) ────────────────────────────────────────
+    // Kills MUI's TouchRipple everywhere in one place. Every clickable in the
+    // library renders through ButtonBase, so this reaches Button, IconButton,
+    // Fab, ToggleButton, CardActionArea, ListItemButton, MenuItem, Tab, Chip,
+    // PaginationItem, StepButton, BottomNavigationAction, SpeedDialAction and
+    // the Pickers' day/month/year cells without a per-component opt-out.
+    //
+    // The press feedback is the faux-3D bevel instead: the raised bottom edge
+    // collapses and the face dims on :active (see `bevelPress`). An expanding
+    // circle on top of that reads as a second, competing press affordance.
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    },
     // ─── Button ─────────────────────────────────────────────────────
     MuiButton: {
       defaultProps: {
@@ -672,7 +679,7 @@ function buildComponents(tokens2) {
           const colorScales = { error: error2, warning: warning2, success: success2, info: info2 };
           const faceScale = ownerState.color ? colorScales[ownerState.color] : void 0;
           return {
-            borderRadius: radius4.md,
+            borderRadius: radius4.lg,
             fontWeight: 600,
             boxShadow: tokenShadows.xs,
             height: 32,
@@ -690,12 +697,7 @@ function buildComponents(tokens2) {
               borderTopWidth: 1,
               borderRightWidth: 1,
               borderLeftWidth: 1,
-              borderBottomWidth: 4,
-              // Round the thick-bevel side more than the rest so the inner
-              // surface isn't squared off. Follows the bevel: bottom at rest,
-              // top on hover.
-              borderBottomLeftRadius: radius4.lg,
-              borderBottomRightRadius: radius4.lg,
+              borderBottomWidth: 3,
               // Contained buttons have no border of their own — give them a
               // translucent bevel. Outlined keeps its own border color.
               ...isContained && {
@@ -720,12 +722,8 @@ function buildComponents(tokens2) {
                 transition: "top 500ms ease-in-out"
               },
               "&:hover": {
-                borderTopWidth: 4,
+                borderTopWidth: 3,
                 borderBottomWidth: 1,
-                borderTopLeftRadius: radius4.lg,
-                borderTopRightRadius: radius4.lg,
-                borderBottomLeftRadius: radius4.md,
-                borderBottomRightRadius: radius4.md,
                 // One step lighter than the default bevel (60% → 70%) so it
                 // stays visible against the brightened face on hover.
                 ...isContained && {
@@ -752,8 +750,6 @@ function buildComponents(tokens2) {
                 // like a tactile click rather than a slow settle.
                 transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
                 borderTopWidth: 1,
-                borderTopLeftRadius: radius4.md,
-                borderTopRightRadius: radius4.md,
                 opacity: 0.75
               },
               // Unified disabled treatment across the button family (Button,
@@ -768,7 +764,7 @@ function buildComponents(tokens2) {
                 borderTopWidth: 1,
                 borderRightWidth: 1,
                 borderLeftWidth: 1,
-                borderBottomWidth: 4
+                borderBottomWidth: 3
               },
               "@media (prefers-reduced-motion: reduce)": {
                 transition: "none",
@@ -803,7 +799,7 @@ function buildComponents(tokens2) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius4.md,
+          borderRadius: radius4.lg,
           // contained group → children already render as contained Buttons; only
           // re-pin the bevel border color, which MUI's own grouped-contained
           // default (palette grey) otherwise overrides away from the standalone
@@ -843,7 +839,7 @@ function buildComponents(tokens2) {
             backgroundColor: "transparent",
             color: buttonColors4.tertiaryColor.fg,
             borderWidth: 0,
-            borderRadius: radius4.md,
+            borderRadius: radius4.lg,
             boxShadow: "none",
             "&::before": { display: "none" },
             "&:active": { opacity: 1 },
@@ -875,17 +871,17 @@ function buildComponents(tokens2) {
     MuiIconButton: {
       styleOverrides: {
         root: ({ theme }) => ({
-          borderRadius: radius4.md,
+          borderRadius: radius4.lg,
           padding: 6,
           "& .MuiSvgIcon-root": {
             fontSize: 20
           },
           "&.ForestIconButton": {
             ...bevel3D,
-            // Square 32×32 with border-box so the faux-3D bevel (1px top + 4px
+            // Square 32×32 with border-box so the faux-3D bevel (1px top + 3px
             // bottom, 1px left/right) is absorbed rather than added on top —
-            // otherwise it rendered a 37×34 control instead of matching the
-            // standalone Button's 32px height.
+            // otherwise it rendered an oversized control instead of matching
+            // the standalone Button's 32px height.
             height: 32,
             width: 32,
             boxSizing: "border-box",
@@ -942,8 +938,7 @@ function buildComponents(tokens2) {
     // ─── FAB ────────────────────────────────────────────────────────
     // A Fab is a round contained Button: same faux-3D bevel, light sweep,
     // brightness lift, and press. The border radii are left untouched so the
-    // circular / extended silhouettes survive the bevel flip (no radius swap
-    // like Button/IconButton do on their rounded corners).
+    // circular / extended silhouettes survive the bevel flip.
     MuiFab: {
       styleOverrides: {
         root: ({ theme, ownerState }) => ({
@@ -959,7 +954,7 @@ function buildComponents(tokens2) {
           borderTopWidth: 1,
           borderRightWidth: 1,
           borderLeftWidth: 1,
-          borderBottomWidth: 4,
+          borderBottomWidth: 3,
           "&::before": {
             content: '""',
             position: "absolute",
@@ -977,7 +972,7 @@ function buildComponents(tokens2) {
           },
           "&:hover": {
             boxShadow: tokenShadows.xs,
-            borderTopWidth: 4,
+            borderTopWidth: 3,
             borderBottomWidth: 1,
             // Light mode: dark face, brightness lift reads as hover. Dark
             // mode: the face is already light — a lift blows out the top
@@ -1192,7 +1187,10 @@ function buildComponents(tokens2) {
     MuiAutocomplete: {
       styleOverrides: {
         paper: {
-          borderRadius: radius4.md,
+          // No borderRadius here on purpose — it inherits MuiPaper's `rounded`
+          // (radius.lg), so the popup matches Menu, Popover and every other
+          // Paper surface. It used to set radius.md and was the one popup in
+          // the system with a sharper corner.
           boxShadow: tokenShadows.lg,
           border: `1px solid ${border4.secondary}`,
           marginTop: 4
@@ -1206,10 +1204,42 @@ function buildComponents(tokens2) {
             lineHeight: "20px"
           }
         },
+        // MUI hardcodes this slot's own padding/marginRight in its source
+        // (padding: 2, marginRight: -2), which wins over the global
+        // MuiIconButton root override at equal specificity — left alone, the
+        // popup toggle renders as a small 24px button that doesn't fill the
+        // 32px input row and stops short of the edge. Restated here at the
+        // same size/inset as the DatePicker's open-picker button (32px,
+        // padding 6, flush against the input's 12px right padding) so both
+        // end-of-input icon buttons match.
+        popupIndicator: {
+          padding: 6,
+          // Not a straight copy of the DatePicker's -12px: that value cancels
+          // the input row's 12px padding directly, but this button's
+          // grandparent (`.MuiAutocomplete-endAdornment`) is itself inset 9px
+          // from the input's true right edge by MUI's own variant styles.
+          // -9px reaches through that inset to land flush, matching the
+          // DatePicker's open-picker button exactly.
+          marginRight: -9
+        },
+        // Same MUI-hardcoded-slot problem as popupIndicator, one size down
+        // (padding: 4, marginRight: -2) — sized to match it here. The
+        // popupIndicator's own marginRight anchors it to the input edge
+        // independent of clearIndicator's box, so this needs no matching
+        // offset: with both buttons the same size, 0 sits them edge-to-edge,
+        // and their equal padding already reads as the gap between the icons.
+        clearIndicator: {
+          padding: 6,
+          marginRight: 0
+        },
         option: {
           fontSize: 14,
           lineHeight: "20px",
-          padding: "6px 12px",
+          // An Autocomplete option is a plain <li class="MuiAutocomplete-option">,
+          // not a MenuItem, so MuiMenuItem's radius never reaches it. Match it
+          // here so the hover/selected highlight reads as the same pill a Select
+          // draws, inset by the listbox's 4px padding.
+          borderRadius: radius4.md,
           // Hover + selected backgrounds come from MUI's theme-aware action
           // overlays (a light overlay on dark, so they stay visible — a solid
           // dark-grey tier here reads as "no hover"). Selected keeps the text
@@ -1219,7 +1249,14 @@ function buildComponents(tokens2) {
           }
         },
         listbox: {
-          padding: 4
+          padding: 4,
+          // Padding has to live here, not in the `option` slot: MUI nests its
+          // own option styles under the listbox, so a rule from `option` ties
+          // on specificity and loses on source order. This selector outranks
+          // it. 6px 8px matches MuiMenuItem.
+          "& .MuiAutocomplete-option": {
+            padding: "6px 8px"
+          }
         }
       }
     },
@@ -1231,7 +1268,7 @@ function buildComponents(tokens2) {
       styleOverrides: {
         root: {
           color: border4.primary,
-          borderRadius: radius4.xs,
+          borderRadius: radius4.sm,
           padding: 0,
           width: 20,
           height: 20,
@@ -1248,7 +1285,7 @@ function buildComponents(tokens2) {
           "&.Mui-focusVisible": {
             outline: "none",
             boxShadow: focusRings4.brand,
-            borderRadius: radius4.xs
+            borderRadius: radius4.sm
           },
           "&.Mui-disabled": {
             color: border4.primary
@@ -1384,12 +1421,18 @@ function buildComponents(tokens2) {
             color: buttonColors4.primary.fg,
             borderTopWidth: 1,
             borderBottomWidth: 1,
-            borderTopLeftRadius: radius4.md,
-            borderTopRightRadius: radius4.md,
-            borderBottomLeftRadius: radius4.md,
-            borderBottomRightRadius: radius4.md,
+            borderTopLeftRadius: radius4.lg,
+            borderTopRightRadius: radius4.lg,
+            borderBottomLeftRadius: radius4.lg,
+            borderBottomRightRadius: radius4.lg,
             opacity: 0.75,
-            boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.3)",
+            // The pressed-in cue is carried by the flattened bevel (bottom
+            // border 3px -> 1px) alone in light mode. On the dark-mode face
+            // that geometry reads too faintly, so it keeps the inner shadow.
+            boxShadow: "none",
+            ...theme.applyStyles("dark", {
+              boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.3)"
+            }),
             "&::before": { display: "none" },
             // Stays pressed on hover — no bevel re-raise, no brightness lift.
             "&:hover": {
@@ -1397,8 +1440,8 @@ function buildComponents(tokens2) {
               filter: "none",
               borderTopWidth: 1,
               borderBottomWidth: 1,
-              borderTopLeftRadius: radius4.md,
-              borderTopRightRadius: radius4.md
+              borderTopLeftRadius: radius4.lg,
+              borderTopRightRadius: radius4.lg
             }
           },
           // variant="outlined" (Forest wrapper class): the outlined <Button> /
@@ -1442,7 +1485,7 @@ function buildComponents(tokens2) {
             borderTopWidth: 1,
             borderRightWidth: 1,
             borderLeftWidth: 1,
-            borderBottomWidth: 4,
+            borderBottomWidth: 3,
             "&::before": { display: "none" },
             // selected+disabled keeps the pressed-in cue, greyed.
             "&.Mui-selected": {
@@ -1459,7 +1502,7 @@ function buildComponents(tokens2) {
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          borderRadius: radius4.md,
+          borderRadius: radius4.lg,
           overflow: "hidden"
         },
         // The child ToggleButton's selected/hover/active rules set per-corner
@@ -1476,14 +1519,14 @@ function buildComponents(tokens2) {
           },
           "&:first-of-type": {
             "&, &:hover, &:active, &.Mui-selected": {
-              borderTopLeftRadius: radius4.md,
-              borderBottomLeftRadius: radius4.md
+              borderTopLeftRadius: radius4.lg,
+              borderBottomLeftRadius: radius4.lg
             }
           },
           "&:last-of-type": {
             "&, &:hover, &:active, &.Mui-selected": {
-              borderTopRightRadius: radius4.md,
-              borderBottomRightRadius: radius4.md
+              borderTopRightRadius: radius4.lg,
+              borderBottomRightRadius: radius4.lg
             }
           }
         }
@@ -1509,7 +1552,27 @@ function buildComponents(tokens2) {
           border: `1px solid ${border4.secondary}`,
           backgroundColor: bg4.primary,
           boxShadow: tokenShadows.xs,
-          overflow: "hidden"
+          overflow: "hidden",
+          // Which surface a wrapped CardActionArea should paint. The action
+          // area can't read the Card's own `background-color` (the Card goes
+          // transparent when it wraps one, see below), so the colour is handed
+          // down as a custom property instead. `<Card color="secondary">`
+          // overrides it alongside its own background.
+          "--forest-card-surface": bg4.primary,
+          // A Card wrapping a CardActionArea hands its whole frame over: the
+          // action area already draws the border, surface, radius and shadow,
+          // and flips the radius on hover. Keeping the Card's own stacks a
+          // second, static border just outside the moving one.
+          "&:has(> .MuiCardActionArea-root)": {
+            border: "none",
+            borderRadius: 0,
+            backgroundColor: "transparent",
+            boxShadow: "none",
+            // The action area clips its own content (it has overflow: hidden
+            // for the glaze), so the Card must not also clip — its square
+            // corners would cut the action area's rounded ones.
+            overflow: "visible"
+          }
         }
       }
     },
@@ -2607,52 +2670,67 @@ function buildComponents(tokens2) {
       }
     },
     // ─── CardActionArea ─────────────────────────────────────────────
-    // Clickable-card affordance: mirrors the Button's faux-3D bevel (thick edge
-    // that flips bottom->top on hover), light glaze sweep, border-color shift,
-    // and press-to-sink. This is what visually marks a card as clickable — use
-    // <Card><CardActionArea>…</CardActionArea></Card> for any interactive card.
+    // Clickable-card affordance: the outlined Button's interaction at card
+    // scale. Same faux-3D bevel (thick edge that flips bottom->top on hover),
+    // same glaze sweep, same brightness darken on hover, same press-to-sink —
+    // the only difference is the radius, which stays on the card steps
+    // (xl / 2xl) rather than the button's (md / lg). Use
+    // <Card><CardActionArea>…</CardActionArea></Card> for any interactive card;
+    // the Card hands over its border and surface when it sees one.
     MuiCardActionArea: {
       styleOverrides: {
         root: {
           position: "relative",
           overflow: "hidden",
-          borderRadius: radius4.xl,
+          borderRadius: radius4["2xl"],
           borderStyle: "solid",
-          borderColor: border4.primary,
+          // The token the outlined Button reads, not `border.primary`, so the
+          // two stay identical under any preset.
+          borderColor: buttonColors4.secondaryColor.border,
+          // Painted here rather than on the Card, which goes transparent so its
+          // square box can't clip these corners. Falls back to the default card
+          // surface when a CardActionArea is used outside a Card.
+          backgroundColor: `var(--forest-card-surface, ${bg4.primary})`,
           borderTopWidth: 1,
           borderRightWidth: 1,
           borderLeftWidth: 1,
-          borderBottomWidth: 4,
-          borderBottomLeftRadius: radius4["2xl"],
-          borderBottomRightRadius: radius4["2xl"],
+          borderBottomWidth: 3,
           boxShadow: tokenShadows.xs,
-          transition: "box-shadow 300ms ease, border-width 300ms ease, border-radius 300ms ease, border-color 300ms ease, opacity 300ms ease",
-          // Moving glaze — a soft light streak that sweeps top->bottom on hover.
+          transition: "filter 300ms ease, border-width 300ms ease, border-radius 300ms ease, opacity 300ms ease, background-color 300ms ease",
+          "&:focus-visible": {
+            boxShadow: focusRings4.brandShadowXs
+          },
+          // Moving glaze — a soft light streak that sweeps top->bottom on
+          // hover. Same parameters as the outlined Button's sweep.
           "&::before": {
             content: '""',
             position: "absolute",
             left: 0,
             top: "-150%",
             width: "100%",
-            height: 6,
+            height: 5,
             borderRadius: 4,
-            backgroundColor: "color-mix(in srgb, currentColor 40%, #fff)",
-            boxShadow: "0 0 28px 6px color-mix(in srgb, currentColor 40%, #fff)",
-            opacity: 0.35,
+            backgroundColor: "color-mix(in srgb, currentColor 45%, #fff)",
+            boxShadow: "0 0 24px 4px color-mix(in srgb, currentColor 45%, #fff)",
+            opacity: 0.2,
             filter: "blur(3px)",
             pointerEvents: "none",
-            transition: "top 600ms ease-in-out",
+            transition: "top 500ms ease-in-out",
             zIndex: 1
           },
           "&:hover": {
-            borderColor: border4.brand,
-            borderTopWidth: 4,
-            borderBottomWidth: 1,
-            borderTopLeftRadius: radius4["2xl"],
-            borderTopRightRadius: radius4["2xl"],
-            borderBottomLeftRadius: radius4.xl,
-            borderBottomRightRadius: radius4.xl,
-            boxShadow: tokenShadows.lg
+            // Darken the whole surface via brightness, the same mechanism the
+            // outlined Button uses — no border-color shift; the border stays
+            // put and only the bevel geometry moves. Lighter than the Button's
+            // 0.97 on purpose: the filter dims a card's media and copy along
+            // with its surface, so the same amount reads much heavier here.
+            filter: "brightness(0.995)",
+            // The Button drops its resting shadow on hover (MUI's
+            // disableElevation), so the raised edge is the only depth cue
+            // mid-interaction. Matched here for parity.
+            boxShadow: "none",
+            borderTopWidth: 3,
+            borderBottomWidth: 1
           },
           "&:hover::before": {
             top: "150%"
@@ -2662,15 +2740,13 @@ function buildComponents(tokens2) {
           "&:active": {
             transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
             borderTopWidth: 1,
-            borderTopLeftRadius: radius4.xl,
-            borderTopRightRadius: radius4.xl,
-            opacity: 0.85
-          },
-          "&:hover .MuiCardActionArea-focusHighlight": {
-            opacity: 0.04
+            opacity: 0.75
           },
-          "&.Mui-focusVisible .MuiCardActionArea-focusHighlight": {
-            opacity: 0.08
+          // MUI's own hover/focus tint overlay. The outlined Button has no
+          // equivalent (it suppresses the variant hover background), so the
+          // brightness darken above is the only hover feedback.
+          "& .MuiCardActionArea-focusHighlight": {
+            opacity: 0
           },
           "@media (prefers-reduced-motion: reduce)": {
             transition: "none",
@@ -3425,7 +3501,12 @@ var display = {
 var container = {
   maxWidthDesktop: 1280,
   paddingDesktop: 32,
-  paddingMobile: 16
+  paddingMobile: 16,
+  // Corner radius of the App Shell's content surface where it meets the
+  // chrome. Deliberately a layout value rather than a step on the `radius`
+  // scale: that scale governs components (and the alkemy+ preset caps it at
+  // 22), so a 24 sitting in it would misread as a component radius.
+  shellRadius: 24
 };
 var widths = {
   xxs: 320,
@@ -3691,15 +3772,15 @@ var alpha = {
 var highlight = magenta;
 var radius2 = {
   ...radius,
-  xxs: 1,
-  xs: 2,
-  sm: 3,
-  md: 4,
-  lg: 5,
-  xl: 6,
-  "2xl": 8,
-  "3xl": 10,
-  "4xl": 12
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 11,
+  xl: 14,
+  "2xl": 16,
+  "3xl": 20,
+  "4xl": 22
 };
 var text2 = {
   primary: gray[50],
@@ -4014,15 +4095,15 @@ var colors = {
 };
 var radius3 = {
   ...radius,
-  xxs: 1,
-  xs: 2,
-  sm: 3,
-  md: 4,
-  lg: 5,
-  xl: 6,
-  "2xl": 8,
-  "3xl": 10,
-  "4xl": 12
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 11,
+  xl: 14,
+  "2xl": 16,
+  "3xl": 20,
+  "4xl": 22
 };
 var text3 = {
   primary: gray[900],
@@ -4356,7 +4437,7 @@ function Button({ variant = "contained", ...props }) {
 // src/components/ButtonGroup/index.tsx
 var import_ButtonGroup = __toESM(require("@mui/material/ButtonGroup"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function ButtonGroup({ variant = "contained", ...props }) {
+function ButtonGroup({ variant = "outlined", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ButtonGroup.default, { variant, ...props });
 }
 
@@ -5108,15 +5189,28 @@ var Logo = (0, import_react3.forwardRef)(
 Logo.displayName = "Logo";
 
 // src/components/ToggleButton/index.tsx
+var import_react4 = require("react");
 var import_ToggleButton = __toESM(require("@mui/material/ToggleButton"));
 var import_ToggleButtonGroup = __toESM(require("@mui/material/ToggleButtonGroup"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var ToggleButtonVariantContext = (0, import_react4.createContext)(
+  void 0
+);
+function ToggleButtonGroup({
+  variant = "outlined",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToggleButtonVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ToggleButtonGroup.default, { ...props }) });
+}
 function ToggleButton({
-  variant = "contained",
+  variant,
   className,
   ...props
 }) {
-  const cls = variant === "outlined" ? ["ForestToggleButton-outlined", className].filter(Boolean).join(" ") : className;
+  var _a;
+  const groupVariant = (0, import_react4.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__ */ (0, import_jsx_runtime10.jsx)(import_ToggleButton.default, { className: cls, ...props });
 }
 
@@ -5349,7 +5443,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]
       ]
     }
@@ -5464,7 +5563,7 @@ var import_Tab = __toESM(require("@mui/material/Tab"));
 var import_TabScrollButton = __toESM(require("@mui/material/TabScrollButton"));
 
 // src/components/Sidebar/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_Drawer2 = __toESM(require("@mui/material/Drawer"));
 var import_Box = __toESM(require("@mui/material/Box"));
 var import_ChevronLeftOutlined = __toESM(require("@mui/icons-material/ChevronLeftOutlined"));
@@ -5474,14 +5573,15 @@ var import_ListItemIcon2 = __toESM(require("@mui/material/ListItemIcon"));
 var import_ListItemText3 = __toESM(require("@mui/material/ListItemText"));
 var import_Tooltip2 = __toESM(require("@mui/material/Tooltip"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react4.createContext)({
+var SidebarContext = (0, import_react5.createContext)({
   open: true,
   collapsedWidth: 48,
   expandedWidth: 240
 });
 function useSidebar() {
-  return (0, import_react4.useContext)(SidebarContext);
+  return (0, import_react5.useContext)(SidebarContext);
 }
+var TOGGLE_SIZE = 28;
 function SidebarNav({
   open,
   onOpenChange,
@@ -5492,6 +5592,7 @@ function SidebarNav({
   children,
   header,
   footer,
+  toggleEdgeAllowance = 12,
   sx,
   ...rest
 }) {
@@ -5499,6 +5600,60 @@ function SidebarNav({
   const drawerWidth = open ? expandedWidth : collapsedWidth;
   const layoutWidth = isHover ? collapsedWidth : drawerWidth;
   const shouldShowToggle = showToggle != null ? showToggle : !isHover;
+  const wrapperRef = (0, import_react5.useRef)(null);
+  const toggleRef = (0, import_react5.useRef)(null);
+  const edgeYRef = (0, import_react5.useRef)(null);
+  const [edgeActive, setEdgeActive] = (0, import_react5.useState)(false);
+  const [toggleFocused, setToggleFocused] = (0, import_react5.useState)(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 = "";
+  };
+  (0, import_react5.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)
@@ -5506,6 +5661,7 @@ function SidebarNav({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarContext.Provider, { value: { open, collapsedWidth, expandedWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     import_Box.default,
     {
+      ref: wrapperRef,
       sx: {
         position: "relative",
         width: layoutWidth,
@@ -5513,7 +5669,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__ */ (0, import_jsx_runtime18.jsx)(
@@ -5529,8 +5691,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
             },
@@ -5545,53 +5706,113 @@ function SidebarNav({
                 },
                 children: [
                   header && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box.default, { sx: { flexShrink: 0 }, children: header }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box.default, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden" }, children }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    import_Box.default,
+                    {
+                      sx: {
+                        flexGrow: 1,
+                        overflowY: "auto",
+                        overflowX: "hidden",
+                        px: 1,
+                        "& > .MuiList-root": { paddingInline: 0 }
+                      },
+                      children
+                    }
+                  ),
                   footer && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box.default, { 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__ */ (0, import_jsx_runtime18.jsx)(
-          Button,
+          import_Box.default,
           {
-            "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__ */ (0, import_jsx_runtime18.jsx)(import_ChevronLeftOutlined.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ChevronRightOutlined.default, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              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__ */ (0, import_jsx_runtime18.jsx)(import_ChevronLeftOutlined.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ChevronRightOutlined.default, {})
+              }
+            )
           }
         )
       ]
@@ -5599,8 +5820,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 },
@@ -5662,7 +5888,7 @@ function SidebarItem({
 }
 
 // src/components/AppShell/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_Box2 = __toESM(require("@mui/material/Box"));
 var import_Drawer3 = __toESM(require("@mui/material/Drawer"));
 var import_List2 = __toESM(require("@mui/material/List"));
@@ -5713,8 +5939,8 @@ function AppShell({
 }) {
   const theme = (0, import_styles4.useTheme)();
   const isMobile = (0, import_useMediaQuery.default)(theme.breakpoints.down("sm"));
-  const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(defaultSidebarOpen);
-  const [mobileOpen, setMobileOpen] = (0, import_react5.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react6.useState)(defaultSidebarOpen);
+  const [mobileOpen, setMobileOpen] = (0, import_react6.useState)(false);
   const navContent = nav != null ? nav : navItems && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_List2.default, { children: navItems.map(({ label, icon, active, endAdornment, ...link }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SidebarItem,
     {
@@ -5728,63 +5954,135 @@ function AppShell({
   )) });
   const brandEl = brand != null ? brand : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ShellBrand, { product, logoVariant });
   const wrapLogomark = !brand && logoVariant === "logomark" && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { display: "flex", flexDirection: "column", height: "100vh" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_AppBar.default,
+  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__ */ (0, import_jsx_runtime19.jsxs)(
+      import_Box2.default,
       {
-        position: "sticky",
-        elevation: 0,
-        sx: { zIndex: theme.zIndex.drawer + 1 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Toolbar.default, { variant: "dense", sx: { px: { xs: "16px", sm: "16px" } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 1 }, children: [
-            isMobile && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              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__ */ (0, import_jsx_runtime19.jsx)(
+            import_AppBar.default,
+            {
+              position: "sticky",
+              elevation: 0,
+              sx: { zIndex: theme.zIndex.drawer + 1, borderBottom: "none" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Toolbar.default, { variant: "dense", sx: { px: { xs: "16px", sm: "16px" } }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 1 }, children: [
+                  isMobile && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    IconButton2,
+                    {
+                      variant: "icon",
+                      size: "small",
+                      color: "inherit",
+                      "aria-label": "Open navigation",
+                      onClick: () => setMobileOpen(true),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_MenuOutlined.default, { fontSize: "small" })
+                    }
+                  ),
+                  wrapLogomark ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Search, { size: "small", placeholder: "Search\u2026", sx: { width: "100%", maxWidth: 480 } }) : search || null }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorModeToggle, {}),
+                  actions
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { display: "flex", flexGrow: 1, minHeight: 0 }, children: [
+            !isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              SidebarNav,
               {
-                variant: "icon",
-                size: "small",
-                color: "inherit",
-                "aria-label": "Open navigation",
-                onClick: () => setMobileOpen(true),
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_MenuOutlined.default, { 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__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              import_Box2.default,
+              {
+                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__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Search, { size: "small", placeholder: "Search\u2026", sx: { width: "100%", maxWidth: 480 } }) : search || null }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorModeToggle, {}),
-            actions
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { display: "flex", flexGrow: 1, overflow: "hidden" }, children: [
-      !isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        SidebarNav,
-        {
-          open: sidebarOpen,
-          onOpenChange: setSidebarOpen,
-          behavior: sidebarBehavior,
-          sx: {
-            height: "100%",
-            "& .MuiDrawer-paper": { position: "relative", height: "100%" }
-          },
-          children: navContent
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { component: "main", sx: { flexGrow: 1, overflow: "auto" }, children })
-    ] }),
-    isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_Drawer3.default,
-      {
-        open: mobileOpen,
-        onClose: () => setMobileOpen(false),
-        onClick: () => setMobileOpen(false),
-        sx: { "& .MuiDrawer-paper": { width: 240 } },
-        children: navContent
+          isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_Drawer3.default,
+            {
+              open: mobileOpen,
+              onClose: () => setMobileOpen(false),
+              onClick: () => setMobileOpen(false),
+              sx: { "& .MuiDrawer-paper": { width: 240 } },
+              children: navContent
+            }
+          )
+        ]
       }
     )
-  ] });
+  );
 }
 
 // src/components/Page/index.tsx