@12-apps/ui 6.10.1 → 6.11.1

package/dist/layout/SettingsLayout.js

@@ -1,993 +1,20 @@
 import {
-  withDefaults
-} from "../chunk-Y2JYDXL7.js";
-import "../chunk-PZ5AY32C.js";
-
-// src/components/layout/SettingsLayout/SettingsLayout.tsx
-import { Box as Box7 } from "@mui/material";
-import { useMemo, useState } from "react";
-
-// src/components/layout/SettingsLayout/SettingsLayout.filters.ts
-function filterGroups(groups, query) {
-  const needle = query.trim().toLowerCase();
-  if (!needle) return groups;
-  const matches = (item) => item.label.toLowerCase().includes(needle) || (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(needle));
-  return groups.map((group) => ({ ...group, items: group.items.filter(matches) })).filter((group) => group.items.length > 0);
-}
-function activeItemLabel(groups, activeItemId) {
-  return groups.flatMap((group) => group.items).find((item) => item.id === activeItemId)?.label;
-}
-
-// src/components/layout/SettingsLayout/SettingsLayout.rail.tsx
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import SearchIcon from "@mui/icons-material/Search";
-import { Box as Box3, Button, InputAdornment, TextField, Typography as Typography2 } from "@mui/material";
-
-// src/components/layout/SettingsLayout/SettingsLayout.items.tsx
+  SettingsLayout
+} from "../chunk-KSSUJSST.js";
+import "../chunk-PLEKRWH3.js";
+import "../chunk-LR65TAV5.js";
+import "../chunk-BXC6GRLE.js";
+import "../chunk-XPHTCJER.js";
+import "../chunk-KIVTQAI5.js";
 import {
-  alpha,
-  Box as Box2,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Typography,
-  useTheme
-} from "@mui/material";
-
-// src/components/layout/SettingsLayout/SettingsLayout.styles.ts
-var RAIL_WIDTH = 300;
-var SR_ONLY_SX = {
-  position: "absolute",
-  width: "1px",
-  height: "1px",
-  padding: 0,
-  margin: "-1px",
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
-function atLeastRail(theme, breakpoint) {
-  return theme.breakpoints.up(breakpoint);
-}
-function displayAcrossRail(theme, breakpoint, narrow, wide) {
-  return { display: narrow, [atLeastRail(theme, breakpoint)]: { display: wide } };
-}
-var TOUCH_TARGET = 44;
-var STATUS_COLOR = {
-  ok: "success.main",
-  off: "text.disabled",
-  new: "error.main"
-};
-
-// src/components/layout/SettingsLayout/SettingsStatusMarker.tsx
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import { Box } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-function SettingsStatusMarker({
-  status,
-  label,
-  testId
-}) {
-  const hidden = label ? /* @__PURE__ */ jsx(Box, { component: "span", sx: SR_ONLY_SX, children: label }) : null;
-  if (status === "locked") {
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        component: "span",
-        "data-testid": testId,
-        "data-status": status,
-        sx: { display: "inline-flex", alignItems: "center", color: "text.disabled" },
-        children: [
-          /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: 16 } }),
-          hidden
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      component: "span",
-      "data-testid": testId,
-      "data-status": status,
-      sx: { display: "inline-flex", alignItems: "center" },
-      children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            component: "span",
-            sx: {
-              width: 8,
-              height: 8,
-              borderRadius: "50%",
-              flex: "0 0 auto",
-              bgcolor: STATUS_COLOR[status]
-            }
-          }
-        ),
-        hidden
-      ]
-    }
-  );
-}
-SettingsStatusMarker.displayName = "SettingsStatusMarker";
-
-// src/components/layout/SettingsLayout/SettingsLayout.items.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function RailItemContent({
-  item,
-  active,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    item.icon ? /* @__PURE__ */ jsx2(ListItemIcon, { sx: { minWidth: 0, color: "inherit" }, children: item.icon }) : null,
-    /* @__PURE__ */ jsx2(
-      ListItemText,
-      {
-        primary: item.label,
-        primaryTypographyProps: { variant: "body2", noWrap: true, fontWeight: active ? 600 : 500 }
-      }
-    ),
-    item.status ? /* @__PURE__ */ jsx2(
-      SettingsStatusMarker,
-      {
-        status: item.status,
-        label: item.statusLabel,
-        testId: `${testIdPrefix}-status-${item.id}`
-      }
-    ) : null
-  ] });
-}
-function SettingsRailItem({
-  item,
-  active,
-  linkComponent,
-  onSelectItem,
-  onNavigate,
-  testIdPrefix,
-  variant,
-  breakpoint
-}) {
-  const theme = useTheme();
-  const touchFloor = variant === "drilldown" ? { minHeight: TOUCH_TARGET, [atLeastRail(theme, breakpoint)]: { minHeight: "auto" } } : null;
-  const shared = {
-    "data-testid": `${testIdPrefix}-item-${item.id}`,
-    sx: {
-      borderRadius: 1.5,
-      mb: 0.25,
-      gap: 1.5,
-      ...touchFloor,
-      color: active ? "primary.main" : "text.secondary",
-      "&.Mui-selected": {
-        bgcolor: alpha(theme.palette.primary.main, 0.12),
-        "&:hover": { bgcolor: alpha(theme.palette.primary.main, 0.18) }
-      }
-    }
-  };
-  const content = /* @__PURE__ */ jsx2(RailItemContent, { item, active, testIdPrefix });
-  if (item.inert) {
-    return /* @__PURE__ */ jsx2(ListItem, { ...shared, "data-inert": "true", children: content });
-  }
-  const interactive = {
-    ...shared,
-    selected: active,
-    "aria-current": active ? "page" : void 0
-  };
-  if (item.href && linkComponent) {
-    const LinkComponent = linkComponent;
-    return /* @__PURE__ */ jsx2(
-      ListItemButton,
-      {
-        component: LinkComponent,
-        href: item.href,
-        onClick: onNavigate,
-        ...interactive,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx2(
-    ListItemButton,
-    {
-      onClick: () => {
-        onSelectItem?.(item.id);
-        onNavigate?.();
-      },
-      ...interactive,
-      children: content
-    }
-  );
-}
-function indexListSx(shape) {
-  if (shape.variant !== "drilldown" || !shape.atIndex) return null;
-  return (theme) => ({
-    display: "grid",
-    gridTemplateColumns: "1fr",
-    columnGap: 8,
-    [theme.breakpoints.up("sm")]: { gridTemplateColumns: "1fr 1fr" },
-    [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: "1fr" }
-  });
-}
-function SettingsRailGroup({
-  group,
-  activeItemId,
-  linkComponent,
-  onSelectItem,
-  onNavigate,
-  testIdPrefix,
-  ...shape
-}) {
-  const grid = indexListSx(shape);
-  return /* @__PURE__ */ jsxs2(Box2, { "data-testid": `${testIdPrefix}-group-${group.id}`, sx: { mb: 2 }, children: [
-    /* @__PURE__ */ jsx2(
-      Typography,
-      {
-        variant: "caption",
-        sx: {
-          display: "block",
-          px: 1,
-          color: "text.secondary",
-          fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.06em"
-        },
-        children: group.label
-      }
-    ),
-    group.description ? /* @__PURE__ */ jsx2(Typography, { variant: "caption", component: "p", sx: { px: 1, mt: 0.25, color: "text.disabled" }, children: group.description }) : null,
-    /* @__PURE__ */ jsx2(
-      List,
-      {
-        disablePadding: true,
-        sx: (theme) => ({ mt: 0.5, ...grid ? grid(theme) : null }),
-        children: group.items.map((item) => /* @__PURE__ */ jsx2(
-          SettingsRailItem,
-          {
-            item,
-            active: item.id === activeItemId,
-            linkComponent,
-            onSelectItem,
-            onNavigate,
-            testIdPrefix,
-            ...shape
-          },
-          item.id
-        ))
-      }
-    )
-  ] });
-}
-
-// src/components/layout/SettingsLayout/SettingsLayout.rail.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function SettingsRailToggle({
-  title,
-  activeLabel,
-  open,
-  onToggle,
-  breakpoint,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs3(
-    Box3,
-    {
-      component: "button",
-      type: "button",
-      onClick: onToggle,
-      "aria-expanded": open,
-      "aria-label": typeof title === "string" ? title : "Settings",
-      "data-testid": `${testIdPrefix}-toggle`,
-      sx: (theme) => ({
-        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 1,
-        width: "100%",
-        minHeight: TOUCH_TARGET,
-        px: 1.5,
-        py: 1,
-        mb: 1,
-        textAlign: "left",
-        cursor: "pointer",
-        color: "text.primary",
-        background: "transparent",
-        border: `1px solid ${theme.palette.divider}`,
-        borderRadius: 1.5
-      }),
-      children: [
-        /* @__PURE__ */ jsxs3(Box3, { sx: { minWidth: 0 }, children: [
-          title ? /* @__PURE__ */ jsx3(Typography2, { variant: "caption", sx: { display: "block", color: "text.secondary" }, children: title }) : null,
-          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", noWrap: true, sx: { fontWeight: 600 }, children: activeLabel ?? "" })
-        ] }),
-        /* @__PURE__ */ jsx3(
-          ExpandMoreIcon,
-          {
-            fontSize: "small",
-            sx: {
-              flex: "0 0 auto",
-              color: "text.secondary",
-              transition: "transform 150ms ease",
-              transform: open ? "rotate(180deg)" : "none",
-              "@media (prefers-reduced-motion: reduce)": { transition: "none" }
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function SettingsSearchEmpty({
-  label,
-  action,
-  onClear,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs3(Box3, { "data-testid": `${testIdPrefix}-empty`, sx: { px: 1, py: 2 }, children: [
-    /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "text.secondary", children: label }),
-    action ? /* @__PURE__ */ jsx3(
-      Button,
-      {
-        size: "small",
-        variant: "outlined",
-        onClick: () => {
-          onClear();
-          action.onClear?.();
-        },
-        "data-testid": `${testIdPrefix}-empty-action`,
-        sx: { mt: 1.5, minHeight: TOUCH_TARGET },
-        children: action.label
-      }
-    ) : null
-  ] });
-}
-function SettingsRailBody({
-  navOpen,
-  query,
-  onQueryChange,
-  searchPlaceholder,
-  emptySearchLabel,
-  emptySearchAction,
-  filteredGroups,
-  activeItemId,
-  linkComponent,
-  onSelectItem,
-  onNavigate,
-  testIdPrefix,
-  ...shape
-}) {
-  const hidden = navOpen ? "block" : "none";
-  return /* @__PURE__ */ jsxs3(
-    Box3,
-    {
-      "data-testid": `${testIdPrefix}-rail-body`,
-      sx: (theme) => shape.variant === "drilldown" ? { display: "block" } : displayAcrossRail(theme, shape.breakpoint, hidden, "block"),
-      children: [
-        /* @__PURE__ */ jsx3(
-          TextField,
-          {
-            value: query,
-            onChange: (event) => onQueryChange(event.target.value),
-            placeholder: searchPlaceholder,
-            size: "small",
-            fullWidth: true,
-            "aria-label": searchPlaceholder,
-            "data-testid": `${testIdPrefix}-search`,
-            InputProps: {
-              startAdornment: /* @__PURE__ */ jsx3(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx3(SearchIcon, { fontSize: "small", sx: { color: "text.secondary" } }) })
-            },
-            sx: { mb: 2 }
-          }
-        ),
-        filteredGroups.length === 0 ? /* @__PURE__ */ jsx3(
-          SettingsSearchEmpty,
-          {
-            label: emptySearchLabel,
-            action: emptySearchAction,
-            onClear: () => onQueryChange(""),
-            testIdPrefix
-          }
-        ) : filteredGroups.map((group) => /* @__PURE__ */ jsx3(
-          SettingsRailGroup,
-          {
-            group,
-            activeItemId,
-            linkComponent,
-            onSelectItem,
-            onNavigate,
-            testIdPrefix,
-            ...shape
-          },
-          group.id
-        ))
-      ]
-    }
-  );
-}
-function SettingsRail({
-  title,
-  activeLabel,
-  navOpen,
-  onToggleNav,
-  testIdPrefix,
-  fillHeight = false,
-  ...bodyProps
-}) {
-  const { variant, breakpoint, atIndex } = bodyProps;
-  const hiddenWhileInSection = variant === "drilldown" && !atIndex;
-  return /* @__PURE__ */ jsxs3(
-    Box3,
-    {
-      component: "nav",
-      "aria-label": typeof title === "string" ? title : "Settings",
-      "data-testid": `${testIdPrefix}-rail`,
-      sx: (theme) => ({
-        display: hiddenWhileInSection ? "none" : "block",
-        flex: "0 0 auto",
-        width: "100%",
-        [atLeastRail(theme, breakpoint)]: {
-          display: "block",
-          flex: `0 0 ${RAIL_WIDTH}px`,
-          width: RAIL_WIDTH,
-          borderRight: `1px solid ${theme.palette.divider}`,
-          pr: 2,
-          // Its own scrollbar, so a settings area with twenty categories does
-          // not make the thing you NAVIGATE with scroll away while you read the
-          // panel. `minHeight: 0` is the load-bearing half: without it a flex
-          // child refuses to shrink below its content and `overflow` never
-          // engages.
-          ...fillHeight ? { height: "100%", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain" } : {}
-        }
-      }),
-      children: [
-        title ? /* @__PURE__ */ jsx3(
-          Typography2,
-          {
-            variant: "h6",
-            "data-testid": `${testIdPrefix}-title`,
-            sx: (theme) => ({
-              ...variant === "drilldown" ? { display: "block" } : displayAcrossRail(theme, breakpoint, "none", "block"),
-              fontWeight: 700,
-              mb: 1.5
-            }),
-            children: title
-          }
-        ) : null,
-        variant === "switcher" ? /* @__PURE__ */ jsx3(
-          SettingsRailToggle,
-          {
-            title,
-            activeLabel,
-            open: navOpen,
-            onToggle: onToggleNav,
-            breakpoint,
-            testIdPrefix
-          }
-        ) : null,
-        /* @__PURE__ */ jsx3(SettingsRailBody, { navOpen, testIdPrefix, ...bodyProps })
-      ]
-    }
-  );
-}
-
-// src/components/layout/SettingsLayout/SettingsPanel.tsx
-import ChevronLeftIcon2 from "@mui/icons-material/ChevronLeft";
-import { Box as Box6 } from "@mui/material";
-
-// src/components/layout/SettingsLayout/SettingsSectionChips.tsx
-import { alpha as alpha2, Box as Box4, useTheme as useTheme2 } from "@mui/material";
-import { useEffect, useRef } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var CHIP_HEIGHT = 34;
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
-  useEffect(() => {
-    const strip = stripRef.current;
-    if (!strip || !activeItemId) return;
-    const chip = Array.from(strip.children).find(
-      (node) => node instanceof HTMLElement && node.dataset.chipId === activeItemId
-    );
-    if (!chip) return;
-    if (typeof strip.scrollTo !== "function") return;
-    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;
-    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
-    strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
-  }, [stripRef, activeItemId, itemsKey]);
-}
-function SectionChip({
-  item,
-  active,
-  theme,
-  linkComponent,
-  onSelectItem,
-  testIdPrefix
-}) {
-  const asLink = item.href !== void 0 && linkComponent !== void 0;
-  const behaviour = asLink ? { component: linkComponent, href: item.href } : { component: "button", type: "button", onClick: () => onSelectItem?.(item.id) };
-  return /* @__PURE__ */ jsxs4(
-    Box4,
-    {
-      ...behaviour,
-      "data-chip-id": item.id,
-      "data-testid": `${testIdPrefix}-chip-${item.id}`,
-      "aria-current": active ? "page" : void 0,
-      sx: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 0.75,
-        flex: "0 0 auto",
-        position: "relative",
-        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.
-        //
-        // Shrinking `minHeight` alone would have bought a slimmer strip with a
-        // smaller hit area — on the one width where the strip IS the navigation
-        // and the input is a thumb. The `::after` below keeps the tappable
-        // region at the full target while the pill itself takes less room, so
-        // this is a visual change and not an accessibility trade.
-        minHeight: CHIP_HEIGHT,
-        px: 1.5,
-        borderRadius: 999,
-        cursor: "pointer",
-        font: "inherit",
-        fontSize: "0.8125rem",
-        fontWeight: active ? 700 : 500,
-        textDecoration: "none",
-        whiteSpace: "nowrap",
-        color: active ? "primary.main" : "text.secondary",
-        bgcolor: active ? alpha2(theme.palette.primary.main, 0.12) : "transparent",
-        border: `1px solid ${active ? alpha2(theme.palette.primary.main, 0.4) : theme.palette.divider}`,
-        // Spans the chip's width only, so neighbours never overlap: the strip
-        // is a row, and the extra reach is vertical.
-        "&::after": {
-          content: '""',
-          position: "absolute",
-          insetInlineStart: 0,
-          insetInlineEnd: 0,
-          top: "50%",
-          transform: "translateY(-50%)",
-          height: TOUCH_TARGET
-        }
-      },
-      children: [
-        item.status ? /* @__PURE__ */ jsx4(
-          SettingsStatusMarker,
-          {
-            status: item.status,
-            label: item.statusLabel,
-            testId: `${testIdPrefix}-chip-status-${item.id}`
-          }
-        ) : null,
-        item.label
-      ]
-    }
-  );
-}
-function SettingsSectionChips({
-  items,
-  activeItemId,
-  ariaLabel,
-  linkComponent,
-  onSelectItem,
-  testIdPrefix
-}) {
-  const theme = useTheme2();
-  const stripRef = useRef(null);
-  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join("\0"));
-  return /* @__PURE__ */ jsx4(
-    Box4,
-    {
-      ref: stripRef,
-      component: "nav",
-      "aria-label": ariaLabel,
-      "data-testid": `${testIdPrefix}-chips`,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 0.75,
-        px: 0.25,
-        py: 0.25,
-        overflowX: "auto",
-        overflowY: "hidden",
-        scrollbarWidth: "none",
-        "&::-webkit-scrollbar": { display: "none" }
-      },
-      children: items.map((item) => /* @__PURE__ */ jsx4(
-        SectionChip,
-        {
-          item,
-          active: item.id === activeItemId,
-          theme,
-          linkComponent,
-          onSelectItem,
-          testIdPrefix
-        },
-        item.id
-      ))
-    }
-  );
-}
-SettingsSectionChips.displayName = "SettingsSectionChips";
-
-// src/components/layout/SettingsLayout/SettingsSectionHeader.tsx
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import { Box as Box5 } from "@mui/material";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var CLIP = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-function HeaderText({
-  title,
-  description
-}) {
-  return /* @__PURE__ */ jsxs5(Box5, { sx: { minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx5(
-      Box5,
-      {
-        component: "h2",
-        sx: { m: 0, font: "inherit", fontSize: "1rem", fontWeight: 600, lineHeight: 1.3, ...CLIP },
-        children: title
-      }
-    ),
-    description !== void 0 && description !== "" && /* @__PURE__ */ jsx5(
-      Box5,
-      {
-        component: "p",
-        sx: {
-          m: 0,
-          font: "inherit",
-          fontSize: "0.8125rem",
-          color: "text.secondary",
-          lineHeight: 1.35,
-          ...CLIP
-        },
-        children: description
-      }
-    )
-  ] });
-}
-function SettingsSectionHeader({
-  href,
-  backLabel,
-  title,
-  description,
-  breakpoint,
-  linkComponent,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs5(
-    Box5,
-    {
-      "data-testid": `${testIdPrefix}-section-header`,
-      sx: (theme) => ({
-        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
-        alignItems: "center",
-        gap: 1.5,
-        minWidth: 0,
-        // ITS OWN SURFACE, not the panel's.
-        //
-        // The header, the chip strip and the first card were all the same
-        // white, so nothing said where "you are here" ended and the screen
-        // began — the eye had only the type sizes to go on. A tint plus the
-        // rule below turns three stacked runs of text into two blocks.
-        //
-        // `paper` against a `default` panel rather than a hand-picked grey, so
-        // it tracks the host's theme (and its dark mode) instead of being a
-        // light-mode constant that goes wrong the moment the palette does.
-        bgcolor: "background.paper",
-        px: 1.5,
-        pt: 1.5,
-        pb: 1.5,
-        mb: 1,
-        borderRadius: 1,
-        // A rule under the header, because what follows it is the sibling strip
-        // — a row of other sections. Without a line the section's own name and
-        // the chip naming a DIFFERENT section sit in one undifferentiated
-        // block, which reads as one navigation rather than as "you are here"
-        // above "go elsewhere".
-        borderBottom: 1,
-        borderColor: "divider"
-      }),
-      children: [
-        /* @__PURE__ */ jsx5(
-          Box5,
-          {
-            component: linkComponent,
-            href,
-            "aria-label": backLabel,
-            "data-testid": `${testIdPrefix}-back`,
-            sx: (theme) => ({
-              flex: "0 0 auto",
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: TOUCH_TARGET,
-              height: TOUCH_TARGET,
-              border: 1,
-              borderColor: "divider",
-              borderRadius: 2,
-              color: "text.primary",
-              textDecoration: "none",
-              "&:hover": { backgroundColor: theme.palette.action.hover }
-            }),
-            children: /* @__PURE__ */ jsx5(ChevronLeftIcon, { fontSize: "small" })
-          }
-        ),
-        /* @__PURE__ */ jsx5(HeaderText, { title, description })
-      ]
-    }
-  );
-}
-
-// src/components/layout/SettingsLayout/SettingsPanel.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function BackLink({
-  href,
-  label,
-  breakpoint,
-  linkComponent,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs6(
-    Box6,
-    {
-      component: linkComponent,
-      href,
-      "aria-label": label,
-      "data-testid": `${testIdPrefix}-back`,
-      sx: (theme) => ({
-        ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
-        alignItems: "center",
-        gap: 0.5,
-        minHeight: TOUCH_TARGET,
-        pr: 1,
-        textDecoration: "none",
-        color: "text.secondary",
-        font: "inherit",
-        fontSize: "0.875rem"
-      }),
-      children: [
-        /* @__PURE__ */ jsx6(ChevronLeftIcon2, { fontSize: "small" }),
-        label
-      ]
-    }
-  );
-}
-function PanelBack({
-  href,
-  backLabel,
-  sectionTitle,
-  sectionDescription,
-  breakpoint,
-  linkComponent,
-  testIdPrefix
-}) {
-  if (sectionTitle === void 0) {
-    return /* @__PURE__ */ jsx6(
-      BackLink,
-      {
-        href,
-        label: backLabel,
-        breakpoint,
-        linkComponent,
-        testIdPrefix
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx6(
-    SettingsSectionHeader,
-    {
-      href,
-      backLabel,
-      title: sectionTitle,
-      description: sectionDescription,
-      breakpoint,
-      linkComponent,
-      testIdPrefix
-    }
-  );
-}
-function panelSx(breakpoint, hideOnNarrow, fillHeight) {
-  return (theme) => ({
-    display: hideOnNarrow ? "none" : "block",
-    flex: "1 1 auto",
-    minWidth: 0,
-    width: "100%",
-    [atLeastRail(theme, breakpoint)]: {
-      ...hideOnNarrow ? { display: "block" } : {},
-      ...fillHeight ? {
-        height: "100%",
-        minHeight: 0,
-        overflowY: "auto",
-        overscrollBehavior: "contain"
-      } : {}
-    }
-  });
-}
-function SettingsPanel({
-  inSection,
-  hideOnNarrow,
-  breakpoint,
-  indexHref,
-  backLabel,
-  sectionTitle,
-  sectionDescription,
-  ariaLabel,
-  sectionChips,
-  activeItemId,
-  linkComponent,
-  onSelectItem,
-  testIdPrefix,
-  fillHeight = false,
-  children
-}) {
-  const showBack = inSection && indexHref !== void 0 && linkComponent !== void 0;
-  const showChips = inSection && sectionChips !== void 0 && sectionChips.length > 0;
-  return /* @__PURE__ */ jsxs6(
-    Box6,
-    {
-      "data-testid": `${testIdPrefix}-panel`,
-      sx: panelSx(breakpoint, hideOnNarrow, fillHeight),
-      children: [
-        showBack ? /* @__PURE__ */ jsx6(
-          PanelBack,
-          {
-            href: indexHref,
-            backLabel,
-            sectionTitle,
-            sectionDescription,
-            breakpoint,
-            linkComponent,
-            testIdPrefix
-          }
-        ) : null,
-        showChips ? /* @__PURE__ */ jsx6(
-          Box6,
-          {
-            sx: (theme) => ({
-              ...displayAcrossRail(theme, breakpoint, "block", "none"),
-              mb: 1,
-              minWidth: 0
-            }),
-            children: /* @__PURE__ */ jsx6(
-              SettingsSectionChips,
-              {
-                items: sectionChips,
-                activeItemId,
-                ariaLabel,
-                linkComponent,
-                onSelectItem,
-                testIdPrefix
-              }
-            )
-          }
-        ) : null,
-        children
-      ]
-    }
-  );
-}
-
-// src/components/layout/SettingsLayout/SettingsLayout.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var DEFAULTS = {
-  searchPlaceholder: "Search settings",
-  defaultQuery: "",
-  emptySearchLabel: "No settings match your search.",
-  testIdPrefix: "settings",
-  railBreakpoint: "md",
-  navVariant: "switcher",
-  atIndex: false,
-  backLabel: "Back"
-};
-function shellSx(breakpoint, fillHeight) {
-  return (theme) => ({
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    gap: 1.5,
-    width: "100%",
-    minWidth: 0,
-    // Only ever at the wide shape. Narrow, the rail is a disclosure or the page
-    // itself, and two independent scrollbars on a phone is a trap rather than a
-    // convenience.
-    [atLeastRail(theme, breakpoint ?? "md")]: {
-      flexDirection: "row",
-      gap: 3,
-      ...fillHeight ? { height: "100%", minHeight: 0 } : {}
-    }
-  });
-}
-var SettingsLayout = (props) => {
-  const {
-    title,
-    groups,
-    activeItemId,
-    onSelectItem,
-    searchPlaceholder,
-    defaultQuery,
-    emptySearchLabel,
-    emptySearchAction,
-    linkComponent,
-    children,
-    testIdPrefix,
-    railBreakpoint,
-    fillHeight = false,
-    navVariant,
-    atIndex,
-    indexHref,
-    backLabel,
-    sectionChips
-  } = withDefaults(props, DEFAULTS);
-  const [query, setQuery] = useState(defaultQuery);
-  const [navOpen, setNavOpen] = useState(false);
-  const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);
-  const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
-  const drilldown = navVariant === "drilldown";
-  const ariaLabel = typeof title === "string" ? title : "Settings";
-  return /* @__PURE__ */ jsxs7(
-    Box7,
-    {
-      "data-testid": testIdPrefix,
-      "data-nav-variant": navVariant,
-      "data-at-index": atIndex ? "true" : "false",
-      sx: shellSx(railBreakpoint, fillHeight),
-      children: [
-        /* @__PURE__ */ jsx7(
-          SettingsRail,
-          {
-            title,
-            activeLabel,
-            navOpen,
-            onToggleNav: () => setNavOpen((open) => !open),
-            query,
-            onQueryChange: setQuery,
-            searchPlaceholder,
-            emptySearchLabel,
-            emptySearchAction,
-            filteredGroups,
-            activeItemId,
-            linkComponent,
-            onSelectItem,
-            onNavigate: () => setNavOpen(false),
-            testIdPrefix,
-            variant: navVariant,
-            breakpoint: railBreakpoint,
-            atIndex,
-            fillHeight
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          SettingsPanel,
-          {
-            inSection: drilldown && !atIndex,
-            hideOnNarrow: drilldown && atIndex,
-            breakpoint: railBreakpoint,
-            indexHref,
-            sectionTitle: props.sectionTitle,
-            sectionDescription: props.sectionDescription,
-            backLabel,
-            ariaLabel,
-            sectionChips,
-            activeItemId,
-            linkComponent,
-            onSelectItem,
-            testIdPrefix,
-            fillHeight,
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-SettingsLayout.displayName = "SettingsLayout";
+  SettingsSectionChips
+} from "../chunk-TFTGMFW7.js";
+import {
+  SettingsStatusMarker
+} from "../chunk-BTOFGWM2.js";
+import "../chunk-S7KQOZ7X.js";
+import "../chunk-HPK33ACY.js";
+import "../chunk-PZ5AY32C.js";
 export {
   SettingsLayout,
   SettingsSectionChips,