@12-apps/ui 5.0.0 → 5.1.0

package/dist/layout/SettingsLayout.js

@@ -0,0 +1,791 @@
+import {
+  withDefaults
+} from "../chunk-Y2JYDXL7.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import { Box as Box6 } 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
+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,
+  ...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
+        }
+      }),
+      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 ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { Box as Box5 } 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";
+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;
+    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",
+        minHeight: TOUCH_TARGET,
+        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}`
+      },
+      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.75,
+        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/SettingsPanel.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function BackLink({
+  href,
+  label,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      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__ */ jsx5(ChevronLeftIcon, { fontSize: "small" }),
+        label
+      ]
+    }
+  );
+}
+function SettingsPanel({
+  inSection,
+  hideOnNarrow,
+  breakpoint,
+  indexHref,
+  backLabel,
+  ariaLabel,
+  sectionChips,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix,
+  children
+}) {
+  const showBack = inSection && indexHref !== void 0 && linkComponent !== void 0;
+  const showChips = inSection && sectionChips !== void 0 && sectionChips.length > 0;
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      "data-testid": `${testIdPrefix}-panel`,
+      sx: (theme) => ({
+        ...hideOnNarrow ? displayAcrossRail(theme, breakpoint, "none", "block") : { display: "block" },
+        flex: "1 1 auto",
+        minWidth: 0,
+        width: "100%"
+      }),
+      children: [
+        showBack ? /* @__PURE__ */ jsx5(
+          BackLink,
+          {
+            href: indexHref,
+            label: backLabel,
+            breakpoint,
+            linkComponent,
+            testIdPrefix
+          }
+        ) : null,
+        showChips ? /* @__PURE__ */ jsx5(
+          Box5,
+          {
+            sx: (theme) => ({
+              ...displayAcrossRail(theme, breakpoint, "block", "none"),
+              mb: 1,
+              minWidth: 0
+            }),
+            children: /* @__PURE__ */ jsx5(
+              SettingsSectionChips,
+              {
+                items: sectionChips,
+                activeItemId,
+                ariaLabel,
+                linkComponent,
+                onSelectItem,
+                testIdPrefix
+              }
+            )
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULTS = {
+  searchPlaceholder: "Search settings",
+  emptySearchLabel: "No settings match your search.",
+  testIdPrefix: "settings",
+  railBreakpoint: "md",
+  navVariant: "switcher",
+  atIndex: false,
+  backLabel: "Back"
+};
+function shellSx(breakpoint) {
+  return (theme) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 1.5,
+    width: "100%",
+    minWidth: 0,
+    [atLeastRail(theme, breakpoint ?? "md")]: { flexDirection: "row", gap: 3 }
+  });
+}
+var SettingsLayout = (props) => {
+  const {
+    title,
+    groups,
+    activeItemId,
+    onSelectItem,
+    searchPlaceholder,
+    emptySearchLabel,
+    emptySearchAction,
+    linkComponent,
+    children,
+    testIdPrefix,
+    railBreakpoint,
+    navVariant,
+    atIndex,
+    indexHref,
+    backLabel,
+    sectionChips
+  } = withDefaults(props, DEFAULTS);
+  const [query, setQuery] = useState("");
+  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__ */ jsxs6(
+    Box6,
+    {
+      "data-testid": testIdPrefix,
+      "data-nav-variant": navVariant,
+      "data-at-index": atIndex ? "true" : "false",
+      sx: shellSx(railBreakpoint),
+      children: [
+        /* @__PURE__ */ jsx6(
+          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
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          SettingsPanel,
+          {
+            inSection: drilldown && !atIndex,
+            hideOnNarrow: drilldown && atIndex,
+            breakpoint: railBreakpoint,
+            indexHref,
+            backLabel,
+            ariaLabel,
+            sectionChips,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            testIdPrefix,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+SettingsLayout.displayName = "SettingsLayout";
+export {
+  SettingsLayout,
+  SettingsSectionChips,
+  SettingsStatusMarker
+};
+//# sourceMappingURL=SettingsLayout.js.map