@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-AYRMZC5F.js

@@ -0,0 +1,321 @@
+import {
+  buildChartContext
+} from "./chunk-C67FDYG7.js";
+import {
+  ChartLegendContent,
+  ChartTooltipContent
+} from "./chunk-RIRTW5EU.js";
+import {
+  uiInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/chart-renderers.tsx
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function chartExtras(ctx) {
+  const { props } = ctx;
+  const nodes = [];
+  if (props.showTooltip !== false) {
+    nodes.push(
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter: props.valueFormatter }) }, "tooltip")
+    );
+  }
+  if (props.showLegend !== false) {
+    nodes.push(/* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend"));
+  }
+  return nodes;
+}
+function chartGrid(ctx) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { stroke: ctx.gridStroke, strokeOpacity: ctx.gridOpacity }, "grid");
+}
+function cartesianAxes(ctx) {
+  const { props, axisConfig } = ctx;
+  const nodes = [];
+  if (props.showCartesianGrid !== false) nodes.push(chartGrid(ctx));
+  nodes.push(
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: axisConfig.tickMargin,
+        ticks: axisConfig.categoryTicks,
+        tickFormatter: axisConfig.tickFormatter
+      },
+      "x"
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        width: "auto",
+        tickMargin: axisConfig.tickMargin,
+        tickFormatter: props.valueFormatter,
+        allowDecimals: props.allowDecimalTicks !== false
+      },
+      "y"
+    )
+  );
+  return nodes;
+}
+function renderLine(ctx) {
+  return /* @__PURE__ */ jsxs(LineChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        strokeWidth: s.strokeWidth ?? 2,
+        dot: s.dot !== false,
+        activeDot: s.activeDot !== false ? { r: 8 } : false,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderBar(ctx) {
+  return /* @__PURE__ */ jsxs(BarChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderArea(ctx) {
+  return /* @__PURE__ */ jsxs(AreaChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function pieCenterLabel(ctx) {
+  const { centerLabel } = ctx.props;
+  const innerRadius = ctx.props.innerRadius ?? 0;
+  if (!centerLabel || innerRadius <= 0) return null;
+  const fill = ctx.props.variant === "neon" ? uiInk(ctx.theme).dataVizNeon.accent : ctx.theme.palette.text.primary;
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      style: { fontSize: ctx.sizeStyles.fontSize, fill, fontWeight: 600 },
+      children: typeof centerLabel === "string" ? centerLabel : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "tspan",
+          {
+            x: "50%",
+            dy: "-0.6em",
+            style: { fontSize: "0.875em", fontWeight: 500, fill: ctx.theme.palette.text.secondary },
+            children: centerLabel.label
+          }
+        ),
+        /* @__PURE__ */ jsx("tspan", { x: "50%", dy: "1.4em", style: { fontSize: "1.5em", fontWeight: 700 }, children: centerLabel.value })
+      ] })
+    }
+  );
+}
+function renderPie(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs(PieChart, { children: [
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data: props.data,
+        dataKey: ctx.chartSeries[0]?.dataKey ?? "value",
+        nameKey: props.xAxisKey ?? "name",
+        cx: "50%",
+        cy: "50%",
+        outerRadius: ctx.sizeStyles.height / 3,
+        innerRadius: remPx(ctx.theme, props.innerRadius ?? 0),
+        fill: ctx.chartColors[0],
+        label: props.showValues ?? false,
+        animationDuration: ctx.animationDuration,
+        children: props.data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: ctx.chartColors[index % ctx.chartColors.length] }, `cell-${index}`))
+      }
+    ),
+    pieCenterLabel(ctx)
+  ] });
+}
+function renderRadar(ctx) {
+  return /* @__PURE__ */ jsxs(RadarChart, { ...ctx.commonProps, children: [
+    /* @__PURE__ */ jsx(PolarGrid, { stroke: ctx.gridStroke }),
+    /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: ctx.props.xAxisKey ?? "name", style: ctx.axisStyle }),
+    /* @__PURE__ */ jsx(PolarRadiusAxis, { style: ctx.axisStyle }),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Radar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderScatter(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs(ScatterChart, { ...ctx.commonProps, children: [
+    props.showCartesianGrid !== false && chartGrid(ctx),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        dataKey: ctx.chartSeries[0]?.dataKey,
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx(
+      Scatter,
+      {
+        name: ctx.chartSeries[0]?.name ?? "Data",
+        data: props.data,
+        fill: ctx.chartColors[0],
+        animationDuration: ctx.animationDuration
+      }
+    )
+  ] });
+}
+function composedSeries(ctx, s, index) {
+  const color = s.color ?? ctx.chartColors[index % ctx.chartColors.length];
+  if (s.type === "bar") {
+    return /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: color,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  if (s.type === "area") {
+    return /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: color,
+        fill: color,
+        fillOpacity: 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Line,
+    {
+      type: ctx.strokeType,
+      dataKey: s.dataKey,
+      name: s.name,
+      stroke: color,
+      animationDuration: ctx.animationDuration
+    },
+    s.dataKey
+  );
+}
+function renderComposed(ctx) {
+  return /* @__PURE__ */ jsxs(ComposedChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => composedSeries(ctx, s, index))
+  ] });
+}
+var RENDERERS = {
+  line: renderLine,
+  bar: renderBar,
+  area: renderArea,
+  pie: renderPie,
+  radar: renderRadar,
+  scatter: renderScatter,
+  composed: renderComposed
+};
+function renderChartByType(props, theme) {
+  const renderer = RENDERERS[props.type ?? "line"];
+  const ctx = buildChartContext(props, theme);
+  return renderer ? renderer(ctx) : /* @__PURE__ */ jsx(Fragment, {});
+}
+
+export {
+  renderChartByType
+};
+//# sourceMappingURL=chunk-AYRMZC5F.js.map

package/dist/chunk-AZ7YT2R4.js

@@ -0,0 +1,41 @@
+import {
+  MapPreview
+} from "./chunk-TK5LNXMB.js";
+
+// src/components/data-display/FleetMap/FleetCanvas.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx } from "react/jsx-runtime";
+function FleetCanvas({
+  copy,
+  centre,
+  markers,
+  height,
+  testId
+}) {
+  if (!centre) return null;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "region",
+      "aria-label": copy.mapLabel,
+      "data-testid": `${testId}-canvas`,
+      sx: { flexGrow: 1, minWidth: 0 },
+      children: /* @__PURE__ */ jsx(
+        MapPreview,
+        {
+          copy: copy.map,
+          center: centre,
+          markers,
+          height,
+          interactive: true,
+          showControls: true
+        }
+      )
+    }
+  );
+}
+
+export {
+  FleetCanvas
+};
+//# sourceMappingURL=chunk-AZ7YT2R4.js.map

package/dist/chunk-B7ZHEOQQ.js

@@ -0,0 +1,22 @@
+// src/tokens/scales.ts
+function accentFor(theme, color) {
+  if (color === "neutral") {
+    const grey = theme.palette.grey;
+    return {
+      // Explicit fallbacks: the ramp is indexed, and under
+      // `noUncheckedIndexedAccess` every stop is `string | undefined`.
+      main: grey[600] ?? "#757575",
+      light: grey[400] ?? "#bdbdbd",
+      dark: grey[800] ?? "#424242",
+      // Grey 600 carries white text in both themes.
+      contrastText: "#fff"
+    };
+  }
+  const key = color === "danger" ? "error" : color;
+  return theme.palette[key];
+}
+
+export {
+  accentFor
+};
+//# sourceMappingURL=chunk-B7ZHEOQQ.js.map

package/dist/chunk-B7ZHEOQQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/scales.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { ColorValue, MuiColor } from './vocabulary';\n\n/**\n * `@12-apps/ui/tokens` keeps its whole surface here. The vocabulary itself —\n * the size and colour unions and their runtime lists — lives in\n * `./vocabulary`, which imports nothing, so the native renderer can read it\n * without this file's MUI `Theme` import following it into `dist/types-native`.\n */\nexport * from './vocabulary';\nexport { headingMetrics } from './typography';\n// The renderer-neutral theme and the colour arithmetic behind it, so a web\n// host can build a `UiTheme` from the same module path a native one does.\nexport * from './theme';\nexport * from './color';\n// The relative-size vocabulary every component writes its sizes in (FUT-2585).\nexport { rem, rems, remPx, resetRootFontCache, sxRem } from './relative';\n// Every colour by role (FUT-2593): ink roles, neutral tones, the named sets.\nexport * from './ink';\nexport * from './ink.core';\n// The surface and soft-signal roles (FUT-3098): `surfaces`, `softSignal`.\nexport * from './surfaces';\nexport { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';\nexport {\n  asFieldSize,\n  DEFAULT_FIELD_HEIGHT,\n  FIELD_BORDER_WIDTH,\n  FIELD_HEIGHT_SCALE,\n  fieldBorder,\n  fieldControlStyles,\n  fieldHeight,\n  fieldHeightOverrides,\n  fieldHeightPx,\n  fieldHeightRem,\n  fieldOverrides,\n  fieldTextFieldStyles,\n  mergeMuiComponents,\n} from './field-height';\n// The theme's density knob (FUT-2764): the factor table, the resolver, the\n// per-repository override and the standalone entry for a host that builds\n// `createTheme()` directly. `DensityLevel`/`ResolvedDensity` are already\n// exported above, through `./theme`.\nexport {\n  DEFAULT_DENSITY,\n  DENSITY_FACTOR,\n  densityFieldHeight,\n  densityFontSize,\n  densitySpacingUnit,\n  densityThemeOptions,\n  resolveDensityFactor,\n  useDensity,\n} from './density';\n// The IconButton/Chip geometry overrides density threads through both\n// consumption paths (FUT-2766), and Checkbox/Radio/Switch's (FUT-2767) and\n// ToggleButton/Tab/TableCell/PaginationItem/Slider's (FUT-2768) — exported\n// standalone too, for a host that wants just these components' overrides\n// without the rest of density.\nexport {\n  checkboxRadioDensityOverrides,\n  chipDensityOverrides,\n  iconButtonDensityOverrides,\n  paginationItemDensityOverrides,\n  sliderDensityOverrides,\n  switchDensityOverrides,\n  tabDensityOverrides,\n  tableCellDensityOverrides,\n  tabsIndicatorDensityOverrides,\n  toggleButtonDensityOverrides,\n} from './density-overrides';\n\nexport interface Accent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\nexport function accentFor(theme: Theme, color: ColorValue): Accent {\n  if (color === 'neutral') {\n    const grey = theme.palette.grey;\n    return {\n      // Explicit fallbacks: the ramp is indexed, and under\n      // `noUncheckedIndexedAccess` every stop is `string | undefined`.\n      main: grey[600] ?? '#757575',\n      light: grey[400] ?? '#bdbdbd',\n      dark: grey[800] ?? '#424242',\n      // Grey 600 carries white text in both themes.\n      contrastText: '#fff',\n    };\n  }\n  // Past the `neutral` return, `paletteKey` can only produce a `MuiColor` — but\n  // its signature still admits `'grey'`, and TS cannot narrow a return type by\n  // the argument. Naming the key here keeps the accent branch honestly typed\n  // instead of casting the hole shut.\n  const key: MuiColor = color === 'danger' ? 'error' : color;\n  return theme.palette[key];\n}\n"],"mappings":";AA8EO,SAAS,UAAU,OAAc,OAA2B;AACjE,MAAI,UAAU,WAAW;AACvB,UAAM,OAAO,MAAM,QAAQ;AAC3B,WAAO;AAAA;AAAA;AAAA,MAGL,MAAM,KAAK,GAAG,KAAK;AAAA,MACnB,OAAO,KAAK,GAAG,KAAK;AAAA,MACpB,MAAM,KAAK,GAAG,KAAK;AAAA;AAAA,MAEnB,cAAc;AAAA,IAChB;AAAA,EACF;AAKA,QAAM,MAAgB,UAAU,WAAW,UAAU;AACrD,SAAO,MAAM,QAAQ,GAAG;AAC1B;","names":[]}

package/dist/chunk-BDQCCW4N.js

@@ -0,0 +1,214 @@
+import {
+  shimmerAnimation
+} from "./chunk-IM4DMKH4.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  scrim,
+  sheen
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Sheet/Sheet.parts.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import Backdrop from "@mui/material/Backdrop/index.js";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var handleSx = (theme, isDraggable) => ({
+  width: rem(theme, isDraggable ? 48 : 32),
+  height: rem(theme, isDraggable ? 6 : 4),
+  backgroundColor: alpha(theme.palette.text.primary, 0.3),
+  borderRadius: 3,
+  transition: theme.transitions.create(["all"], {
+    duration: theme.transitions.duration.short,
+    easing: theme.transitions.easing.easeInOut
+  }),
+  position: "relative",
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: "-100%",
+    width: "100%",
+    height: "100%",
+    background: `linear-gradient(
+      90deg,
+      transparent,
+      ${sheen(theme, 0.3)},
+      transparent
+    )`,
+    animation: isDraggable ? `${shimmerAnimation(theme)} 2s infinite` : "none"
+  },
+  ...isDraggable && {
+    backgroundColor: alpha(theme.palette.primary.main, 0.4),
+    boxShadow: `${rems(theme, 0, 2, 4)} ${alpha(theme.palette.primary.main, 0.2)}`,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.main,
+      transform: "scaleX(1.15) scaleY(1.2)",
+      boxShadow: `${rems(theme, 0, 3, 6)} ${alpha(theme.palette.primary.main, 0.3)}`
+    }
+  }
+});
+var SheetHandle = ({ isDraggable }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        mb: 1,
+        // The handle is decoration on a draggable header: the drag listeners sit
+        // on the header itself, so letting the bar swallow the press would open
+        // a dead zone in the middle of the grab target.
+        pointerEvents: isDraggable ? "none" : "auto"
+      },
+      children: /* @__PURE__ */ jsx(Box, { sx: handleSx(theme, isDraggable) })
+    }
+  );
+};
+var HEADER_DEFAULTS = {
+  isDraggable: false,
+  dataTestId: "sheet-header"
+};
+var SheetHeader = (props) => {
+  const {
+    title,
+    description,
+    showCloseButton,
+    onClose,
+    showHandle,
+    isDraggable,
+    onDragStart,
+    className,
+    style,
+    children,
+    dataTestId
+  } = withDefaults(props, HEADER_DEFAULTS);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        p: 2,
+        pb: showHandle ? 1 : 2,
+        cursor: isDraggable ? "grab" : "auto",
+        "&:active": isDraggable ? { cursor: "grabbing" } : {},
+        ...style
+      },
+      onMouseDown: isDraggable ? onDragStart : void 0,
+      onTouchStart: isDraggable ? onDragStart : void 0,
+      children: [
+        showHandle && /* @__PURE__ */ jsx(SheetHandle, { isDraggable: Boolean(isDraggable) }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+            title && /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, "data-testid": `${dataTestId}-title`, children: title }),
+            description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: description }),
+            children
+          ] }),
+          showCloseButton && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: onClose,
+              size: "small",
+              sx: { ml: 1, mt: -0.5 },
+              "data-testid": `${dataTestId}-close-button`,
+              children: /* @__PURE__ */ jsx(CloseIcon, { "data-testid": `${dataTestId}-close-icon` })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var CONTENT_DEFAULTS = {
+  padded: true,
+  dataTestId: "sheet-content"
+};
+var SheetContent = (props) => {
+  const { children, className, style, padded, dataTestId } = withDefaults(props, CONTENT_DEFAULTS);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: { flex: 1, overflow: "auto", p: padded ? 2 : 0, ...style },
+      children
+    }
+  );
+};
+var FOOTER_DEFAULTS = {
+  sticky: false,
+  divider: false,
+  dataTestId: "sheet-footer"
+};
+var SheetFooter = (props) => {
+  const { children, className, style, sticky, divider, dataTestId } = withDefaults(
+    props,
+    FOOTER_DEFAULTS
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    divider && /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className,
+        "data-testid": dataTestId,
+        sx: {
+          p: 2,
+          position: sticky ? "sticky" : "relative",
+          bottom: sticky ? 0 : "auto",
+          backgroundColor: "background.paper",
+          borderTop: sticky ? "1px solid" : "none",
+          borderColor: "divider",
+          ...style
+        },
+        children
+      }
+    )
+  ] });
+};
+var OVERLAY_DEFAULTS = {
+  open: false,
+  blur: false
+};
+var SheetOverlay = (props) => {
+  const { open, onClick, className, style, blur } = withDefaults(props, OVERLAY_DEFAULTS);
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Fade, { in: open, timeout: 300, children: /* @__PURE__ */ jsx(
+    Backdrop,
+    {
+      open: Boolean(open),
+      onClick,
+      className,
+      sx: {
+        // One below the drawer: this backdrop replaces MUI's own (the drawer
+        // is given a no-op BackdropComponent) and must sit under the panel.
+        zIndex: theme.zIndex.drawer - 1,
+        backgroundColor: scrim(theme, blur ? 0.6 : 0.5),
+        backdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : "none",
+        WebkitBackdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : "none",
+        ...style
+      }
+    }
+  ) });
+};
+
+export {
+  SheetHeader,
+  SheetContent,
+  SheetFooter,
+  SheetOverlay
+};
+//# sourceMappingURL=chunk-BDQCCW4N.js.map