@12-apps/ui 6.75.0 → 6.76.1

package/dist/_internal/components/form/Textarea/Textarea.js

@@ -1,6 +1,6 @@
 import {
   Textarea
-} from "../../../../chunk-X47MWURD.js";
+} from "../../../../chunk-Q6MZHT2F.js";
 import "../../../../chunk-IPC426NS.js";
 import "../../../../chunk-RGVNXES5.js";
 import "../../../../chunk-GDN2LUTZ.js";

package/dist/_internal/components/form/index.js

@@ -2,7 +2,7 @@ import "../../../chunk-BOWS4U6W.js";
 import "../../../chunk-BH5GSBR3.js";
 import {
   Textarea
-} from "../../../chunk-X47MWURD.js";
+} from "../../../chunk-Q6MZHT2F.js";
 import "../../../chunk-IPC426NS.js";
 import "../../../chunk-6I3TYKE2.js";
 import {

package/dist/_internal/components/index.js

@@ -219,7 +219,7 @@ import "../../chunk-QUWK7SYN.js";
 import "../../chunk-BH5GSBR3.js";
 import {
   Textarea
-} from "../../chunk-X47MWURD.js";
+} from "../../chunk-Q6MZHT2F.js";
 import "../../chunk-IPC426NS.js";
 import "../../chunk-6I3TYKE2.js";
 import {

package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.items.js

@@ -2,9 +2,9 @@
 import {
   SettingsRailGroup,
   SettingsRailItem
-} from "../../../../chunk-V5EWCJBT.js";
-import "../../../../chunk-DBFRCTI5.js";
-import "../../../../chunk-NYFNF7I5.js";
+} from "../../../../chunk-SL56MOKE.js";
+import "../../../../chunk-7Y2VWMGS.js";
+import "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   SettingsLayout
-} from "../../../../chunk-OKYYHBGS.js";
+} from "../../../../chunk-SO5OU2ZV.js";
 import "../../../../chunk-BXC6GRLE.js";
-import "../../../../chunk-KKVM723A.js";
-import "../../../../chunk-F3Q4CMRB.js";
+import "../../../../chunk-LY5I3ZSV.js";
+import "../../../../chunk-GBVNY2LG.js";
 import "../../../../chunk-AJUSBPWG.js";
-import "../../../../chunk-TNYKM4UU.js";
-import "../../../../chunk-V5EWCJBT.js";
-import "../../../../chunk-DBFRCTI5.js";
-import "../../../../chunk-6KEXHOIF.js";
-import "../../../../chunk-NYFNF7I5.js";
+import "../../../../chunk-TJO4CBYT.js";
+import "../../../../chunk-SL56MOKE.js";
+import "../../../../chunk-7Y2VWMGS.js";
+import "../../../../chunk-WOXNVM52.js";
+import "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-HPK33ACY.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";

package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.rail.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   SettingsRail
-} from "../../../../chunk-TNYKM4UU.js";
-import "../../../../chunk-V5EWCJBT.js";
-import "../../../../chunk-DBFRCTI5.js";
-import "../../../../chunk-NYFNF7I5.js";
+} from "../../../../chunk-TJO4CBYT.js";
+import "../../../../chunk-SL56MOKE.js";
+import "../../../../chunk-7Y2VWMGS.js";
+import "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.styles.js

@@ -4,8 +4,9 @@ import {
   TOUCH_TARGET,
   atLeastRail,
   displayAcrossRail,
+  railCardWidth,
   railWidth
-} from "../../../../chunk-NYFNF7I5.js";
+} from "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
@@ -14,6 +15,7 @@ export {
   TOUCH_TARGET,
   atLeastRail,
   displayAcrossRail,
+  railCardWidth,
   railWidth
 };
 //# sourceMappingURL=SettingsLayout.styles.js.map

package/dist/_internal/components/layout/SettingsLayout/SettingsPanel.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   SettingsPanel
-} from "../../../../chunk-KKVM723A.js";
-import "../../../../chunk-F3Q4CMRB.js";
+} from "../../../../chunk-LY5I3ZSV.js";
+import "../../../../chunk-GBVNY2LG.js";
 import "../../../../chunk-AJUSBPWG.js";
-import "../../../../chunk-DBFRCTI5.js";
-import "../../../../chunk-6KEXHOIF.js";
-import "../../../../chunk-NYFNF7I5.js";
+import "../../../../chunk-7Y2VWMGS.js";
+import "../../../../chunk-WOXNVM52.js";
+import "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/layout/SettingsLayout/SettingsSectionChips.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   SettingsSectionChips
-} from "../../../../chunk-F3Q4CMRB.js";
+} from "../../../../chunk-GBVNY2LG.js";
 import "../../../../chunk-AJUSBPWG.js";
-import "../../../../chunk-DBFRCTI5.js";
-import "../../../../chunk-NYFNF7I5.js";
+import "../../../../chunk-7Y2VWMGS.js";
+import "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/layout/SettingsLayout/SettingsSectionHeader.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   SettingsSectionHeader
-} from "../../../../chunk-6KEXHOIF.js";
-import "../../../../chunk-NYFNF7I5.js";
+} from "../../../../chunk-WOXNVM52.js";
+import "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/layout/SettingsLayout/SettingsStatusMarker.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   SettingsStatusMarker
-} from "../../../../chunk-DBFRCTI5.js";
-import "../../../../chunk-NYFNF7I5.js";
+} from "../../../../chunk-7Y2VWMGS.js";
+import "../../../../chunk-NK4T624E.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/{chunk-DBFRCTI5.js → chunk-7Y2VWMGS.js}

@@ -1,7 +1,7 @@
 import {
   SR_ONLY_SX,
   STATUS_COLOR
-} from "./chunk-NYFNF7I5.js";
+} from "./chunk-NK4T624E.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -62,4 +62,4 @@ SettingsStatusMarker.displayName = "SettingsStatusMarker";
 export {
   SettingsStatusMarker
 };
-//# sourceMappingURL=chunk-DBFRCTI5.js.map
+//# sourceMappingURL=chunk-7Y2VWMGS.js.map

package/dist/{chunk-F3Q4CMRB.js → chunk-GBVNY2LG.js}

@@ -5,10 +5,10 @@ import {
 } from "./chunk-AJUSBPWG.js";
 import {
   SettingsStatusMarker
-} from "./chunk-DBFRCTI5.js";
+} from "./chunk-7Y2VWMGS.js";
 import {
   TOUCH_TARGET
-} from "./chunk-NYFNF7I5.js";
+} from "./chunk-NK4T624E.js";
 import {
   rem,
   sxRem
@@ -186,4 +186,4 @@ SettingsSectionChips.displayName = "SettingsSectionChips";
 export {
   SettingsSectionChips
 };
-//# sourceMappingURL=chunk-F3Q4CMRB.js.map
+//# sourceMappingURL=chunk-GBVNY2LG.js.map

package/dist/{chunk-KKVM723A.js → chunk-LY5I3ZSV.js}

@@ -1,14 +1,14 @@
 import {
   SettingsSectionChips
-} from "./chunk-F3Q4CMRB.js";
+} from "./chunk-GBVNY2LG.js";
 import {
   SettingsSectionHeader
-} from "./chunk-6KEXHOIF.js";
+} from "./chunk-WOXNVM52.js";
 import {
   TOUCH_TARGET,
   atLeastRail,
   displayAcrossRail
-} from "./chunk-NYFNF7I5.js";
+} from "./chunk-NK4T624E.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -167,4 +167,4 @@ function SettingsPanel({
 export {
   SettingsPanel
 };
-//# sourceMappingURL=chunk-KKVM723A.js.map
+//# sourceMappingURL=chunk-LY5I3ZSV.js.map

package/dist/{chunk-NYFNF7I5.js → chunk-NK4T624E.js}

@@ -5,6 +5,7 @@ import {
 
 // src/components/layout/SettingsLayout/SettingsLayout.styles.ts
 var railWidth = (theme) => rem(theme, 300);
+var railCardWidth = (theme) => rem(theme, 200);
 var SR_ONLY_SX = {
   position: "absolute",
   width: sxRem(1),
@@ -31,10 +32,11 @@ var STATUS_COLOR = {
 
 export {
   railWidth,
+  railCardWidth,
   SR_ONLY_SX,
   atLeastRail,
   displayAcrossRail,
   TOUCH_TARGET,
   STATUS_COLOR
 };
-//# sourceMappingURL=chunk-NYFNF7I5.js.map
+//# sourceMappingURL=chunk-NK4T624E.js.map

package/dist/chunk-NK4T624E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.styles.ts"],"sourcesContent":["import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { SettingsNavStatus, SettingsRailBreakpoint } from './SettingsLayout.types';\n\n/** Fixed width of the left navigation rail once it has its own column (300 design px). */\nexport const railWidth = (theme: Theme): string => rem(theme, 300);\n\n/** Width of the rail drawn as a card (`railVariant=\"card\"`, 200 design px). */\nexport const railCardWidth = (theme: Theme): string => rem(theme, 200);\n\n/** Visually hidden, still read aloud — for text a marker's colour cannot carry. */\nexport const SR_ONLY_SX: SxProps<Theme> = {\n  position: 'absolute',\n  width: sxRem(1),\n  height: sxRem(1),\n  padding: 0,\n  margin: sxRem(-1),\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n\n/**\n * The media query for \"the rail has its own column\".\n *\n * `theme.breakpoints.up` takes a NUMBER as happily as a name, which is why\n * `railBreakpoint` accepts one: a settings area whose structural switch is at\n * 1024px has no MUI breakpoint to name (the default `lg` is 1200), and rounding\n * the design to the nearest named breakpoint moves 176px of behaviour to keep a\n * string tidy.\n */\nexport function atLeastRail(theme: Theme, breakpoint: SettingsRailBreakpoint): string {\n  return theme.breakpoints.up(breakpoint);\n}\n\n/**\n * A `display` pair across that query: `narrow` below it, `wide` at and above.\n *\n * Everything that changes shape between the two navigation modes goes through\n * this, so \"which width am I?\" is answered once, in CSS, for every part at\n * once — rather than by each part asking a media query in JavaScript and\n * answering slightly differently.\n */\nexport function displayAcrossRail(\n  theme: Theme,\n  breakpoint: SettingsRailBreakpoint,\n  narrow: string,\n  wide: string,\n): CSSObject {\n  return { display: narrow, [atLeastRail(theme, breakpoint)]: { display: wide } };\n}\n\n/** Minimum touch target, in px. Held down to 320px-wide phones, deliberately. */\nexport const TOUCH_TARGET = 44;\n\n/**\n * Palette role per situation.\n *\n * Returned as theme keys rather than hex so a marker follows the host's theme —\n * and so light and dark do not need two copies of this table.\n */\nexport const STATUS_COLOR: Record<Exclude<SettingsNavStatus, 'locked'>, string> = {\n  ok: 'success.main',\n  off: 'text.disabled',\n  new: 'error.main',\n};\n"],"mappings":";;;;;;AAOO,IAAM,YAAY,CAAC,UAAyB,IAAI,OAAO,GAAG;AAG1D,IAAM,gBAAgB,CAAC,UAAyB,IAAI,OAAO,GAAG;AAG9D,IAAM,aAA6B;AAAA,EACxC,UAAU;AAAA,EACV,OAAO,MAAM,CAAC;AAAA,EACd,QAAQ,MAAM,CAAC;AAAA,EACf,SAAS;AAAA,EACT,QAAQ,MAAM,EAAE;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV;AAWO,SAAS,YAAY,OAAc,YAA4C;AACpF,SAAO,MAAM,YAAY,GAAG,UAAU;AACxC;AAUO,SAAS,kBACd,OACA,YACA,QACA,MACW;AACX,SAAO,EAAE,SAAS,QAAQ,CAAC,YAAY,OAAO,UAAU,CAAC,GAAG,EAAE,SAAS,KAAK,EAAE;AAChF;AAGO,IAAM,eAAe;AAQrB,IAAM,eAAqE;AAAA,EAChF,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AACP;","names":[]}

package/dist/{chunk-X47MWURD.js → chunk-Q6MZHT2F.js}

@@ -49,11 +49,11 @@ var StyledTextarea = styled(TextareaAutosize, {
   const colorPalette = getColorFromTheme(theme, customColor);
   const errorColor = theme.palette.error;
   const sizeMap = {
-    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },
-    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },
-    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },
-    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },
-    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) }
+    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12) },
+    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14) },
+    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16) },
+    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18) },
+    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20) }
   };
   const baseStyles = {
     width: "100%",
@@ -112,7 +112,9 @@ var TEXTAREA_DEFAULTS = {
   glass: false,
   gradient: false,
   iconPosition: "start",
-  minRows: 3
+  // Four lines of its own text, whatever the variant or size (FUT-3534); a
+  // screen that wants another height passes `minRows`.
+  minRows: 4
 };
 var definedProps = (props) => Object.fromEntries(
   Object.entries(props).filter(([, value]) => value !== void 0)
@@ -210,7 +212,7 @@ var Textarea = (textareaProps) => {
         glass,
         gradient,
         error,
-        minRows: variant === "autosize" ? minRows : void 0,
+        minRows,
         maxRows: variant === "autosize" ? maxRows : void 0,
         style: textareaStyle,
         "aria-label": label || props["aria-label"],
@@ -225,4 +227,4 @@ Textarea.displayName = "Textarea";
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-X47MWURD.js.map
+//# sourceMappingURL=chunk-Q6MZHT2F.js.map

package/dist/chunk-Q6MZHT2F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport TextareaAutosize from '@mui/material/TextareaAutosize/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { lazy, Suspense, useState } from 'react';\n\nimport {\n  getColorFromTheme,\n  textareaEmphasisStyles } from './Textarea.styles';\n\n/**\n * The rich editor is LOADED ON DEMAND, not imported (12-51 follow-up).\n *\n * It renders only for `variant === 'rich'`, but a static import made every\n * consumer of a plain `<Textarea>` pay for it — 387 lines of toolbar plus the\n * MUI `Tooltip`, `IconButton` and `Divider` its formatting buttons need. That\n * is not theoretical: an adopting storefront imports this entry for a one-line\n * order note, and `Tooltip` (8.7 KiB) reached its EAGER chunk through here\n * while nothing on that critical path renders a tooltip at all.\n *\n * `variant` is a prop, so the branch cannot be decided at build time and no\n * amount of tree-shaking removes it. A lazy boundary is what expresses \"only\n * the rich variant pays\", and it costs the rich variant one microtask it can\n * afford — it is a text editor a user has already chosen to open, never a\n * first-paint element.\n */\nconst TextareaRichEditor = lazy(async () => ({\n  default: (await import('./TextareaRichEditor')).TextareaRichEditor }));\nimport type { TextareaProps } from './Textarea.types';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n// Interface for styled component props\ninterface StyledTextareaProps {\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  error?: boolean;\n  theme?: Theme;\n}\n\n// Glow animation for enhanced visual effects\nconst StyledTextarea = styled(TextareaAutosize, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient', 'error'].includes(\n      prop as string,\n    ) })<StyledTextareaProps>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n  error }) => {\n  if (!theme) return {};\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const errorColor = theme.palette.error;\n\n  // No min-height here: the box's height is counted in LINES of its own text\n  // (`minRows`). A pixel floor broke that twice over — it ignored the font, and\n  // `TextareaAutosize` measures one row on a hidden copy carrying this same\n  // class, so a \"row\" came out as the whole floor and `minRows={2}` drew about\n  // 200px (FUT-3504, FUT-3534).\n  const sizeMap = {\n    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12) },\n    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14) },\n    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16) },\n    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18) },\n    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20) } };\n\n  const baseStyles = {\n    width: '100%',\n    fontFamily: theme.typography.fontFamily,\n    borderRadius: fieldRadius(theme),\n    border: error ? `${FIELD_BORDER_WIDTH}px solid ${errorColor.main}` : fieldBorder(theme),\n    backgroundColor: theme.palette.background.paper,\n    color: theme.palette.text.primary,\n    transition: 'all 0.3s ease',\n    resize: customVariant === 'resizable' ? 'vertical' : 'none',\n    outline: 'none',\n    ...sizeMap[customSize as keyof typeof sizeMap],\n\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.7 },\n\n    '&:hover': {\n      borderColor: error ? errorColor.dark : colorPalette.main,\n      backgroundColor: alpha(theme.palette.background.paper, 0.8) },\n\n    // Focus is two pixels, like every other field's: the second is an inset\n    // shadow, so the 1px resting border can thicken without the box moving.\n    '&:focus': {\n      borderColor: error ? errorColor.main : colorPalette.main,\n      backgroundColor: theme.palette.background.paper,\n      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };\n\n  // Glass morphism effect\n  return {\n    ...baseStyles,\n    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow }) };\n});\n\nconst StyledLabel = styled(InputLabel, {\n  shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string) })<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n  marginBottom: theme.spacing(1),\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    padding: rems(theme, 4, 8),\n    borderRadius: rem(theme, 4),\n    border: `1px solid ${fieldEdge(theme)}`,\n    display: 'inline-block' }) }));\n\n// IconWrapper - replaced with inline Box component for better TypeScript compatibility\n// const IconWrapper = styled(Box)<{ position: 'start' | 'end' }>(({ theme, position }) => {\n//   const positionStyles = position === 'start' ? { left: '12px' } : { right: '12px' };\n//   return {\n//     position: 'absolute' as const,\n//     top: '12px',\n//     ...positionStyles,\n//     color: theme.palette.text.secondary,\n//     pointerEvents: 'none' as const,\n//     zIndex: 1,\n//   };\n// });\n\n// Rich text toolbar styling\n\nconst TEXTAREA_DEFAULTS = {\n  variant: 'default',\n  color: 'primary',\n  size: 'md',\n  error: false,\n  glassLabel: false,\n  glow: false,\n  glass: false,\n  gradient: false,\n  iconPosition: 'start',\n  // Four lines of its own text, whatever the variant or size (FUT-3534); a\n  // screen that wants another height passes `minRows`.\n  minRows: 4 } satisfies Partial<TextareaProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TextareaProps): Partial<TextareaProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TextareaProps>;\n\n// Label above, helper text below — identical for the plain and rich variants,\n// which previously duplicated both.\nconst TextareaShell: React.FC<{\n  testId?: string;\n  label?: React.ReactNode;\n  glassLabel: boolean;\n  error: boolean;\n  helperText?: React.ReactNode;\n  children: React.ReactNode;\n}> = ({ testId, label, glassLabel, error, helperText, children }) => (\n  <Box\n    sx={{ position: 'relative', width: '100%' }}\n    data-testid={testId ? `${testId}-wrapper` : undefined}\n  >\n    {label && (\n      <StyledLabel glass={glassLabel} error={error}>\n        {label}\n      </StyledLabel>\n    )}\n\n    {children}\n\n    {helperText && (\n      <FormHelperText error={error} sx={{ mt: 1 }}>\n        {helperText}\n      </FormHelperText>\n    )}\n  </Box>\n);\n\nconst TextareaIcon: React.FC<{\n  icon?: React.ReactNode;\n  iconPosition: 'start' | 'end';\n}> = ({ icon, iconPosition }) => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: sxRem(12),\n      ...(iconPosition === 'start' ? { left: sxRem(12) } : { right: sxRem(12) }),\n      color: 'text.secondary',\n      pointerEvents: 'none',\n      zIndex: 1 }}\n  >\n    {icon}\n  </Box>\n);\n\n/**\n * The rich variant, kept out of the main component's body.\n *\n * Two reasons rather than one: the `Suspense` boundary and its props belong\n * together with the lazy import above, and the component that renders every\n * OTHER variant stays inside the size the complexity gate allows without\n * anything being suppressed.\n */\nfunction RichVariant({\n  shell,\n  editor }: {\n  shell: Omit<React.ComponentProps<typeof TextareaShell>, 'children'>;\n  editor: React.ComponentProps<typeof TextareaRichEditor>;\n}): React.JSX.Element {\n  return (\n    <TextareaShell {...shell}>\n      {/*\n        `null` rather than a spinner: the editor resolves from the same document\n        the caller is already rendering, so a fallback would flash for a frame\n        and read as a glitch rather than as loading.\n      */}\n      <Suspense fallback={null}>\n        <TextareaRichEditor {...editor} />\n      </Suspense>\n    </TextareaShell>\n  );\n}\n\n// Same gap either side; only which side it applies to changes. The previous\n// version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose\n// two branches were identical. The icon's gutter is 40px at the design scale.\nfunction withIconGutter(\n  theme: Theme,\n  style: React.CSSProperties | undefined,\n  hasIcon: boolean,\n  iconPosition: TextareaProps['iconPosition'],\n): React.CSSProperties {\n  if (!hasIcon) return { ...style };\n  return { ...style, [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: rem(theme, 40) };\n}\n\nexport const Textarea: React.FC<TextareaProps> = (textareaProps) => {\n  const {\n    variant,\n    color,\n    size,\n    error,\n    helperText,\n    label,\n    glassLabel,\n    glow,\n    glass,\n    gradient,\n    icon,\n    iconPosition,\n    minRows,\n    maxRows,\n    style,\n    'data-testid': dataTestId,\n    dataTestId: dataTestIdCamelCase,\n    ...props\n  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };\n\n  // Read off the props rather than the merged object: the spread widens every\n  // key to optional, which would lose what the variant union already proved.\n  const { richEditorCopy } = textareaProps;\n\n  const theme = useTheme();\n  const [richTextValue, setRichTextValue] = useState('');\n  const hasIcon = Boolean(icon);\n  const testId = dataTestId || dataTestIdCamelCase;\n\n  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);\n\n  // If rich text variant, use the rich text editor\n  if (variant === 'rich' && richEditorCopy) {\n    return (\n      <RichVariant\n        shell={{ testId, label, glassLabel, error, helperText }}\n        editor={{\n          copy: richEditorCopy,\n          value: richTextValue,\n          onChange: setRichTextValue,\n          placeholder: props.placeholder,\n          error,\n          glass,\n          color,\n          characterLimit: props.maxLength }}\n      />\n    );\n  }\n\n  return (\n    <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n      <Box sx={{ position: 'relative' }}>\n        {hasIcon && <TextareaIcon icon={icon} iconPosition={iconPosition} />}\n\n        <StyledTextarea\n          customVariant={variant}\n          customColor={color}\n          customSize={size}\n          glow={glow}\n          glass={glass}\n          gradient={gradient}\n          error={error}\n          minRows={minRows}\n          maxRows={variant === 'autosize' ? maxRows : undefined}\n          style={textareaStyle}\n          aria-label={label || props['aria-label']}\n          data-testid={testId}\n          {...props}\n        />\n      </Box>\n    </TextareaShell>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":"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","names":[]}

package/dist/{chunk-V5EWCJBT.js → chunk-SL56MOKE.js}

@@ -1,12 +1,13 @@
 import {
   SettingsStatusMarker
-} from "./chunk-DBFRCTI5.js";
+} from "./chunk-7Y2VWMGS.js";
 import {
   TOUCH_TARGET,
   atLeastRail
-} from "./chunk-NYFNF7I5.js";
+} from "./chunk-NK4T624E.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/SettingsLayout/SettingsLayout.items.tsx
@@ -43,6 +44,21 @@ function RailItemContent({
     ) : null
   ] });
 }
+function railItemColor(active, card) {
+  if (active) return card ? "primary.dark" : "primary.main";
+  return card ? "text.primary" : "text.secondary";
+}
+var FOCUS_RING_SX = {
+  "&.Mui-focusVisible": {
+    outlineStyle: "solid",
+    outlineWidth: sxRem(2),
+    outlineColor: "primary.main",
+    outlineOffset: sxRem(-2)
+  }
+};
+function cardRowSx(theme, breakpoint) {
+  return { [atLeastRail(theme, breakpoint)]: { minHeight: rem(theme, 36), py: sxRem(6) } };
+}
 function SettingsRailItem({
   item,
   active,
@@ -51,7 +67,8 @@ function SettingsRailItem({
   onNavigate,
   testIdPrefix,
   variant,
-  breakpoint
+  breakpoint,
+  card = false
 }) {
   const theme = useTheme();
   const touchFloor = variant === "drilldown" ? { minHeight: rem(theme, TOUCH_TARGET), [atLeastRail(theme, breakpoint)]: { minHeight: "auto" } } : null;
@@ -62,11 +79,13 @@ function SettingsRailItem({
       mb: 0.25,
       gap: 1.5,
       ...touchFloor,
-      color: active ? "primary.main" : "text.secondary",
+      ...card ? cardRowSx(theme, breakpoint) : null,
+      color: railItemColor(active, card),
       "&.Mui-selected": {
         bgcolor: alpha(theme.palette.primary.main, 0.12),
         "&:hover": { bgcolor: alpha(theme.palette.primary.main, 0.18) }
-      }
+      },
+      ...FOCUS_RING_SX
     }
   };
   const content = /* @__PURE__ */ jsx(RailItemContent, { item, active, testIdPrefix });
@@ -111,7 +130,9 @@ function indexListSx(shape) {
     // One spacing unit (8px). This is an `sx` callback, where a bare 8 is
     // EIGHT units — it drew a 64px gutter between the two columns.
     columnGap: 1,
-    [theme.breakpoints.up("sm")]: { gridTemplateColumns: "1fr 1fr" },
+    // From `md`, not `sm`: at 600 two columns of bare text rows read as one
+    // list with a hole in it, and a row's status dot sat nearer the next column.
+    [theme.breakpoints.up("md")]: { gridTemplateColumns: "1fr 1fr" },
     [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: "1fr" }
   });
 }
@@ -169,4 +190,4 @@ export {
   SettingsRailItem,
   SettingsRailGroup
 };
-//# sourceMappingURL=chunk-V5EWCJBT.js.map
+//# sourceMappingURL=chunk-SL56MOKE.js.map

package/dist/chunk-SL56MOKE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.items.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { atLeastRail, TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport type {\n  SettingsLayoutProps,\n  SettingsNavGroup,\n  SettingsNavItem,\n  SettingsNavVariant,\n  SettingsRailBreakpoint,\n} from './SettingsLayout.types';\n\n/** The shape-deciding inputs every rail part needs to know about. */\nexport interface RailShape {\n  variant: SettingsNavVariant;\n  breakpoint: SettingsRailBreakpoint;\n  atIndex: boolean;\n  /** The rail is drawn as a card (`railVariant=\"card\"`): denser rows, darker text. */\n  card?: boolean;\n}\n\ninterface RailItemProps extends RailShape {\n  item: SettingsNavItem;\n  active: boolean;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  /** Called on activation so the `switcher`'s rail can collapse after a choice. */\n  onNavigate?: () => void;\n  testIdPrefix: string;\n}\n\n/** Label, plus the situation marker when the host resolved one. */\nfunction RailItemContent({\n  item,\n  active,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <>\n      {item.icon ? (\n        <ListItemIcon sx={{ minWidth: 0, color: 'inherit' }}>{item.icon}</ListItemIcon>\n      ) : null}\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ variant: 'body2', noWrap: true, fontWeight: active ? 600 : 500 }}\n      />\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-status-${item.id}`}\n        />\n      ) : null}\n    </>\n  );\n}\n\n/**\n * The row's text colour. On the card the active row's red is the darker one,\n * since `primary.main` on its 12% wash measured 4.19:1 — under AA at 16px —\n * and the rest read in the body colour, as the card's prototype draws them.\n */\nfunction railItemColor(active: boolean, card: boolean): string {\n  if (active) return card ? 'primary.dark' : 'primary.main';\n  return card ? 'text.primary' : 'text.secondary';\n}\n\n/**\n * Keyboard focus as a ring, not MUI's grey fill: the fill measured 1.3:1\n * against the rail, under the 3:1 a focus indicator needs.\n */\nconst FOCUS_RING_SX = {\n  '&.Mui-focusVisible': {\n    outlineStyle: 'solid',\n    outlineWidth: sxRem(2),\n    outlineColor: 'primary.main',\n    outlineOffset: sxRem(-2),\n  },\n} as const;\n\n/** The card's rows from the breakpoint up: 36px, the prototype's rail density. */\nfunction cardRowSx(theme: Theme, breakpoint: SettingsRailBreakpoint): Record<string, unknown> {\n  return { [atLeastRail(theme, breakpoint)]: { minHeight: rem(theme, 36), py: sxRem(6) } };\n}\n\n/** One rail entry — a link when it has `href`, inert text when it says so, else a button. */\nexport function SettingsRailItem({\n  item,\n  active,\n  linkComponent,\n  onSelectItem,\n  onNavigate,\n  testIdPrefix,\n  variant,\n  breakpoint,\n  card = false,\n}: RailItemProps): React.JSX.Element {\n  const theme = useTheme();\n  // In `drilldown` the narrow rail IS the page's list, so its rows are the\n  // primary touch targets rather than a secondary column — hence the 44px floor\n  // below the breakpoint. Above it, the row goes back to rail density.\n  const touchFloor =\n    variant === 'drilldown'\n      ? { minHeight: rem(theme, TOUCH_TARGET), [atLeastRail(theme, breakpoint)]: { minHeight: 'auto' } }\n      : null;\n  const shared = {\n    'data-testid': `${testIdPrefix}-item-${item.id}`,\n    sx: {\n      borderRadius: 1.5,\n      mb: 0.25,\n      gap: 1.5,\n      ...touchFloor,\n      ...(card ? cardRowSx(theme, breakpoint) : null),\n      color: railItemColor(active, card),\n      '&.Mui-selected': {\n        bgcolor: alpha(theme.palette.primary.main, 0.12),\n        '&:hover': { bgcolor: alpha(theme.palette.primary.main, 0.18) },\n      },\n      ...FOCUS_RING_SX,\n    },\n  };\n  const content = <RailItemContent item={item} active={active} testIdPrefix={testIdPrefix} />;\n\n  // Listed but not reachable from here. Deliberately not a disabled button: a\n  // disabled control says \"you may not\", and the true statement is \"not from\n  // this screen\" — the section exists and someone else's screen owns it.\n  if (item.inert) {\n    return (\n      <ListItem {...shared} data-inert=\"true\">\n        {content}\n      </ListItem>\n    );\n  }\n\n  const interactive = {\n    ...shared,\n    selected: active,\n    'aria-current': active ? ('page' as const) : undefined,\n  };\n\n  if (item.href && linkComponent) {\n    const LinkComponent = linkComponent;\n    return (\n      <ListItemButton\n        component={LinkComponent}\n        href={item.href}\n        onClick={onNavigate}\n        {...interactive}\n      >\n        {content}\n      </ListItemButton>\n    );\n  }\n  return (\n    <ListItemButton\n      onClick={() => {\n        onSelectItem?.(item.id);\n        onNavigate?.();\n      }}\n      {...interactive}\n    >\n      {content}\n    </ListItemButton>\n  );\n}\n\ninterface RailGroupProps extends RailShape {\n  group: SettingsNavGroup;\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  onNavigate?: () => void;\n  testIdPrefix: string;\n}\n\n/**\n * The list's own grid, in `drilldown` at the index only.\n *\n * At the index on a wide phone or a tablet the list has room for two columns;\n * the rail column never does, so the second column is undone at exactly the\n * width where this stops being the page.\n */\nfunction indexListSx(shape: RailShape): Extract<SxProps<Theme>, (theme: Theme) => unknown> | null {\n  if (shape.variant !== 'drilldown' || !shape.atIndex) return null;\n  return (theme: import('@mui/material').Theme) => ({\n    display: 'grid',\n    gridTemplateColumns: '1fr',\n    // One spacing unit (8px). This is an `sx` callback, where a bare 8 is\n    // EIGHT units — it drew a 64px gutter between the two columns.\n    columnGap: 1,\n    // From `md`, not `sm`: at 600 two columns of bare text rows read as one\n    // list with a hole in it, and a row's status dot sat nearer the next column.\n    [theme.breakpoints.up('md')]: { gridTemplateColumns: '1fr 1fr' },\n    [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: '1fr' },\n  });\n}\n\n/** A category: header + optional description + its items. */\nexport function SettingsRailGroup({\n  group,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  onNavigate,\n  testIdPrefix,\n  ...shape\n}: RailGroupProps): React.JSX.Element {\n  const grid = indexListSx(shape);\n  return (\n    <Box data-testid={`${testIdPrefix}-group-${group.id}`} sx={{ mb: 2 }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          display: 'block',\n          px: 1,\n          color: 'text.secondary',\n          fontWeight: 600,\n          textTransform: 'uppercase',\n          letterSpacing: '0.06em',\n        }}\n      >\n        {group.label}\n      </Typography>\n      {group.description ? (\n        <Typography variant=\"caption\" component=\"p\" sx={{ px: 1, mt: 0.25, color: 'text.disabled' }}>\n          {group.description}\n        </Typography>\n      ) : null}\n      <List\n        disablePadding\n        sx={(theme) => ({ mt: 0.5, ...(grid ? grid(theme) : null) })}\n      >\n        {group.items.map((item) => (\n          <SettingsRailItem\n            key={item.id}\n            item={item}\n            active={item.id === activeItemId}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            onNavigate={onNavigate}\n            testIdPrefix={testIdPrefix}\n            {...shape}\n          />\n        ))}\n      </List>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-OKYYHBGS.js → chunk-SO5OU2ZV.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk-BXC6GRLE.js";
 import {
   SettingsPanel
-} from "./chunk-KKVM723A.js";
+} from "./chunk-LY5I3ZSV.js";
 import {
   SettingsRail
-} from "./chunk-TNYKM4UU.js";
+} from "./chunk-TJO4CBYT.js";
 import {
   atLeastRail
-} from "./chunk-NYFNF7I5.js";
+} from "./chunk-NK4T624E.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -29,7 +29,13 @@ var DEFAULTS = {
   atIndex: false,
   backLabel: "Back"
 };
-function shellSx(breakpoint, fillHeight) {
+function railLookOf({
+  searchable = true,
+  railVariant = "divided"
+}) {
+  return { searchable, railVariant };
+}
+function shellSx(breakpoint, fillHeight, railVariant) {
   return (theme) => ({
     display: "flex",
     flexDirection: "column",
@@ -42,7 +48,9 @@ function shellSx(breakpoint, fillHeight) {
     // convenience.
     [atLeastRail(theme, breakpoint ?? "md")]: {
       flexDirection: "row",
-      gap: 3,
+      // A card stands apart from the panel by 32px, as its prototype draws it;
+      // the ruled column keeps its 24.
+      gap: railVariant === "card" ? 4 : 3,
       ...fillHeight ? { height: "100%", minHeight: 0 } : {}
     }
   });
@@ -80,7 +88,7 @@ var SettingsLayout = (props) => {
       "data-testid": testIdPrefix,
       "data-nav-variant": navVariant,
       "data-at-index": atIndex ? "true" : "false",
-      sx: shellSx(railBreakpoint, fillHeight),
+      sx: shellSx(railBreakpoint, fillHeight, railLookOf(props).railVariant),
       children: [
         /* @__PURE__ */ jsx(
           SettingsRail,
@@ -101,6 +109,7 @@ var SettingsLayout = (props) => {
             onNavigate: () => setNavOpen(false),
             testIdPrefix,
             variant: navVariant,
+            ...railLookOf(props),
             breakpoint: railBreakpoint,
             atIndex,
             fillHeight
@@ -135,4 +144,4 @@ SettingsLayout.displayName = "SettingsLayout";
 export {
   SettingsLayout
 };
-//# sourceMappingURL=chunk-OKYYHBGS.js.map
+//# sourceMappingURL=chunk-SO5OU2ZV.js.map

package/dist/chunk-SO5OU2ZV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React, { useMemo, useState } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\nimport { activeItemLabel, filterGroups } from './SettingsLayout.filters';\nimport { SettingsRail } from './SettingsLayout.rail';\nimport { atLeastRail } from './SettingsLayout.styles';\nimport { SettingsPanel } from './SettingsPanel';\nimport type { SettingsLayoutProps } from './SettingsLayout.types';\n\n/**\n * The props with every default already applied.\n *\n * A table through `withDefaults` rather than a `= default` per destructured\n * prop: each of those is a branch, and seven of them put the component over the\n * complexity bar before it renders anything. The single cast is what buys the\n * body non-optional values — without it every use site would restate the\n * default as a `??`, which is the same default written twice and free to drift.\n */\ntype ResolvedProps = SettingsLayoutProps &\n  Required<\n    Pick<\n      SettingsLayoutProps,\n      | 'searchPlaceholder'\n      | 'defaultQuery'\n      | 'emptySearchLabel'\n      | 'testIdPrefix'\n      | 'railBreakpoint'\n      | 'navVariant'\n      | 'atIndex'\n      | 'backLabel'\n    >\n  >;\n\nconst DEFAULTS = {\n  searchPlaceholder: 'Search settings',\n  defaultQuery: '',\n  emptySearchLabel: 'No settings match your search.',\n  testIdPrefix: 'settings',\n  railBreakpoint: 'md',\n  navVariant: 'switcher',\n  atIndex: false,\n  backLabel: 'Back',\n} satisfies Partial<SettingsLayoutProps>;\n\n/**\n * How the rail looks: its search field, and its frame from the breakpoint up.\n * Both default to the shape every consumer had before they existed.\n */\nfunction railLookOf({\n  searchable = true,\n  railVariant = 'divided',\n}: SettingsLayoutProps): Required<Pick<SettingsLayoutProps, 'searchable' | 'railVariant'>> {\n  return { searchable, railVariant };\n}\n\n/** Stacked below the rail's breakpoint, two columns at and above it. */\nfunction shellSx(\n  breakpoint: SettingsLayoutProps['railBreakpoint'],\n  fillHeight: boolean,\n  railVariant: SettingsLayoutProps['railVariant'],\n): SxProps<Theme> {\n  return (theme: Theme) => ({\n    display: 'flex',\n    flexDirection: 'column' as const,\n    alignItems: 'stretch',\n    gap: 1.5,\n    width: '100%',\n    minWidth: 0,\n    // Only ever at the wide shape. Narrow, the rail is a disclosure or the page\n    // itself, and two independent scrollbars on a phone is a trap rather than a\n    // convenience.\n    [atLeastRail(theme, breakpoint ?? 'md')]: {\n      flexDirection: 'row',\n      // A card stands apart from the panel by 32px, as its prototype draws it;\n      // the ruled column keeps its 24.\n      gap: railVariant === 'card' ? 4 : 3,\n      ...(fillHeight ? { height: '100%', minHeight: 0 } : {}),\n    },\n  });\n}\n\n/**\n * A reusable, agnostic Facebook-style settings shell: a searchable left rail of\n * grouped categories/subcategories and a central panel that renders the selected\n * configuration screen (`children`). Navigation is data-driven via `groups`; the\n * host owns routing (pass `linkComponent` + item `href`, or handle `onSelectItem`).\n *\n * ## Two narrow-width shapes\n *\n * `navVariant=\"switcher\"` (the default) folds the rail into a disclosure above\n * the panel. `navVariant=\"drilldown\"` gives the phone shape instead: at the\n * area's index the LIST is the page, and inside a section the panel is the page\n * with a back link and a scrollable strip of sibling sections above it.\n *\n * ## Why the width decision is CSS and not JavaScript\n *\n * Every part that changes between the two shapes does it through a `display`\n * pair keyed on `railBreakpoint`. Nothing here asks a media query in JS and\n * renders one branch.\n *\n * That is not a performance preference. A layout that RENDERS one navigation and\n * not the other can offer the narrow width less than the wide one, and no test\n * or review catches it — the missing control simply is not in the tree to be\n * asserted about. With both forms always mounted, \"the narrow width reaches\n * everything the wide one does\" holds by construction, and an audit that counts\n * controls per width gets the same answer at both.\n */\nexport const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {\n  const {\n    title,\n    groups,\n    activeItemId,\n    onSelectItem,\n    searchPlaceholder,\n    defaultQuery,\n    emptySearchLabel,\n    emptySearchAction,\n    linkComponent,\n    children,\n    testIdPrefix,\n    railBreakpoint,\n    fillHeight = false,\n    navVariant,\n    atIndex,\n    indexHref,\n    backLabel,\n    sectionChips,\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n  const [query, setQuery] = useState(defaultQuery);\n  const [navOpen, setNavOpen] = useState(false);\n  const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);\n  const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);\n\n  const drilldown = navVariant === 'drilldown';\n  const ariaLabel = typeof title === 'string' ? title : 'Settings';\n\n  return (\n    <Box\n      data-testid={testIdPrefix}\n      data-nav-variant={navVariant}\n      data-at-index={atIndex ? 'true' : 'false'}\n      sx={shellSx(railBreakpoint, fillHeight, railLookOf(props).railVariant)}\n    >\n      <SettingsRail\n        title={title}\n        activeLabel={activeLabel}\n        navOpen={navOpen}\n        onToggleNav={() => setNavOpen((open) => !open)}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder}\n        emptySearchLabel={emptySearchLabel}\n        emptySearchAction={emptySearchAction}\n        filteredGroups={filteredGroups}\n        activeItemId={activeItemId}\n        linkComponent={linkComponent}\n        onSelectItem={onSelectItem}\n        onNavigate={() => setNavOpen(false)}\n        testIdPrefix={testIdPrefix}\n        variant={navVariant}\n        {...railLookOf(props)}\n        breakpoint={railBreakpoint}\n        atIndex={atIndex}\n        fillHeight={fillHeight}\n      />\n\n      <SettingsPanel\n        inSection={drilldown && !atIndex}\n        hideOnNarrow={drilldown && atIndex}\n        breakpoint={railBreakpoint}\n        indexHref={indexHref}\n        sectionTitle={props.sectionTitle}\n        sectionDescription={props.sectionDescription}\n        backLabel={backLabel}\n        ariaLabel={ariaLabel}\n        sectionChips={sectionChips}\n        activeItemId={activeItemId}\n        linkComponent={linkComponent}\n        onSelectItem={onSelectItem}\n        testIdPrefix={testIdPrefix}\n        fillHeight={fillHeight}\n      >\n        {children}\n      </SettingsPanel>\n    </Box>\n  );\n};\n\nSettingsLayout.displayName = 'SettingsLayout';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAEA,OAAO,SAAS;AAEhB,SAAgB,SAAS,gBAAgB;AAyIrC,SAME,KANF;AAxGJ,IAAM,WAAW;AAAA,EACf,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AACb;AAMA,SAAS,WAAW;AAAA,EAClB,aAAa;AAAA,EACb,cAAc;AAChB,GAA2F;AACzF,SAAO,EAAE,YAAY,YAAY;AACnC;AAGA,SAAS,QACP,YACA,YACA,aACgB;AAChB,SAAO,CAAC,WAAkB;AAAA,IACxB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA;AAAA;AAAA;AAAA,IAIV,CAAC,YAAY,OAAO,cAAc,IAAI,CAAC,GAAG;AAAA,MACxC,eAAe;AAAA;AAAA;AAAA,MAGf,KAAK,gBAAgB,SAAS,IAAI;AAAA,MAClC,GAAI,aAAa,EAAE,QAAQ,QAAQ,WAAW,EAAE,IAAI,CAAC;AAAA,IACvD;AAAA,EACF;AACF;AA4BO,IAAM,iBAAgD,CAAC,UAAU;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,OAAO,QAAQ;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,iBAAiB,QAAQ,MAAM,aAAa,QAAQ,KAAK,GAAG,CAAC,QAAQ,KAAK,CAAC;AACjF,QAAM,cAAc,QAAQ,MAAM,gBAAgB,QAAQ,YAAY,GAAG,CAAC,QAAQ,YAAY,CAAC;AAE/F,QAAM,YAAY,eAAe;AACjC,QAAM,YAAY,OAAO,UAAU,WAAW,QAAQ;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,oBAAkB;AAAA,MAClB,iBAAe,UAAU,SAAS;AAAA,MAClC,IAAI,QAAQ,gBAAgB,YAAY,WAAW,KAAK,EAAE,WAAW;AAAA,MAErE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAa,MAAM,WAAW,CAAC,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,YACA,eAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,MAAM,WAAW,KAAK;AAAA,YAClC;AAAA,YACA,SAAS;AAAA,YACR,GAAG,WAAW,KAAK;AAAA,YACpB,YAAY;AAAA,YACZ;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,aAAa,CAAC;AAAA,YACzB,cAAc,aAAa;AAAA,YAC3B,YAAY;AAAA,YACZ;AAAA,YACA,cAAc,MAAM;AAAA,YACpB,oBAAoB,MAAM;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;","names":[]}