@12-apps/ui 6.37.0 → 6.39.0

package/dist/{chunk-MVKYNDT2.js → chunk-RKROWJVF.js}

@@ -5,7 +5,9 @@ import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/ContextMenu/ContextMenu.tsx
@@ -22,13 +24,13 @@ var StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "size"
 })(({ theme, customVariant, size }) => ({
   "& .MuiPaper-root": {
-    minWidth: 160,
+    minWidth: rem(theme, 160),
     borderRadius: theme.spacing(1),
     ...customVariant === "glass" && {
       backgroundColor: alpha(theme.palette.background.paper, 0.85),
-      backdropFilter: "blur(20px)",
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-      boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`
+      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.12)}`
     },
     ...customVariant === "dark" && {
       backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.95),
@@ -46,14 +48,14 @@ var StyledMenu = styled(Menu, {
     ...size === "sm" && {
       "& .MuiMenuItem-root": {
         fontSize: rem(theme, 14),
-        minHeight: 32,
+        minHeight: rem(theme, 32),
         padding: theme.spacing(0.5, 1.5)
       }
     },
     ...size === "lg" && {
       "& .MuiMenuItem-root": {
         fontSize: rem(theme, 18),
-        minHeight: 48,
+        minHeight: rem(theme, 48),
         padding: theme.spacing(1.5, 2)
       }
     }
@@ -91,7 +93,7 @@ var MenuHeader = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
   textTransform: "uppercase",
   color: theme.palette.text.secondary,
-  letterSpacing: 0.5
+  letterSpacing: rem(theme, 0.5)
 }));
 var ShortcutText = styled(Typography)(({ theme }) => ({
   fontSize: rem(theme, 12),
@@ -115,7 +117,7 @@ var renderMenuItem = (item, handleItemClick, size) => {
       color: item.color,
       dangerous: item.dangerous,
       children: [
-        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: size === "sm" ? 32 : 40 }, children: item.icon }),
+        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(size === "sm" ? 32 : 40) }, children: item.icon }),
         /* @__PURE__ */ jsx(ListItemText, { primary: item.label }),
         item.shortcut && /* @__PURE__ */ jsx(ShortcutText, { variant: "caption", children: item.shortcut })
       ]
@@ -211,4 +213,4 @@ ContextMenu.displayName = "ContextMenu";
 export {
   ContextMenu
 };
-//# sourceMappingURL=chunk-MVKYNDT2.js.map
+//# sourceMappingURL=chunk-RKROWJVF.js.map

package/dist/chunk-RKROWJVF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import Divider from '@mui/material/Divider/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React, { cloneElement, isValidElement,useState } from 'react';\n\nimport type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';\nimport { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\nconst StyledMenu = styled(Menu, {\n  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',\n})<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({\n  '& .MuiPaper-root': {\n    minWidth: rem(theme, 160),\n    borderRadius: theme.spacing(1),\n\n    ...(customVariant === 'glass' && {\n      backgroundColor: alpha(theme.palette.background.paper, 0.85),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.12)}`,\n    }),\n\n    ...(customVariant === 'dark' && {\n      backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.95),\n      color: absoluteInk(theme).white,\n      '& .MuiMenuItem-root': {\n        color: absoluteInk(theme).white,\n      },\n      '& .MuiListItemIcon-root': {\n        color: absoluteInk(theme).white,\n      },\n      '& .MuiDivider-root': {\n        borderColor: sheen(theme, 0.12),\n      },\n    }),\n\n    ...(size === 'sm' && {\n      '& .MuiMenuItem-root': {\n        fontSize: rem(theme, 14),\n        minHeight: rem(theme, 32),\n        padding: theme.spacing(0.5, 1.5),\n      },\n    }),\n\n    ...(size === 'lg' && {\n      '& .MuiMenuItem-root': {\n        fontSize: rem(theme, 18),\n        minHeight: rem(theme, 48),\n        padding: theme.spacing(1.5, 2),\n      },\n    }),\n  },\n}));\n\n// `color` names a palette key (`success`, `warning`, …) that MUI's Theme type does\n// not index, so it is read structurally and falls back to primary.\nconst paletteColor = (theme: Theme, color: string): string =>\n  (theme.palette as unknown as Record<string, { main?: string }>)[color]?.main ||\n  theme.palette.primary.main;\n\nconst accentStyles = (theme: Theme, color: string): CSSObject => {\n  const main = paletteColor(theme, color);\n\n  return {\n    color: main,\n    '& .MuiListItemIcon-root': { color: main },\n    '&:hover': { backgroundColor: alpha(main, 0.08) },\n  };\n};\n\nconst StyledMenuItem = styled(MenuItem, {\n  shouldForwardProp: (prop) => !['color', 'dangerous'].includes(prop as string),\n})<{ color?: string; dangerous?: boolean }>(({ theme, color, dangerous }) => ({\n  borderRadius: theme.spacing(0.5),\n  margin: theme.spacing(0.25, 0.5),\n  transition: 'all 0.2s ease',\n\n  '&:hover': {\n    backgroundColor: alpha(dangerous ? theme.palette.error.main : theme.palette.primary.main, 0.08),\n  },\n\n  ...(dangerous && {\n    color: theme.palette.error.main,\n    '& .MuiListItemIcon-root': {\n      color: theme.palette.error.main,\n    },\n  }),\n\n  ...(color && color !== 'default' && !dangerous ? accentStyles(theme, color) : {}),\n}));\n\nconst MenuHeader = styled(Typography)(({ theme }) => ({\n  padding: theme.spacing(1, 2),\n  fontSize: rem(theme, 12),\n  fontWeight: 600,\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  letterSpacing: rem(theme, 0.5),\n}));\n\nconst ShortcutText = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 12),\n  color: theme.palette.text.secondary,\n  marginLeft: 'auto',\n  paddingLeft: theme.spacing(2),\n}));\n\nconst renderMenuItem = (\n  item: ContextMenuItem,\n  handleItemClick: (item: ContextMenuItem) => void,\n  size?: string,\n) => {\n  if (item.type === 'divider') {\n    return <Divider key={item.id} sx={{ my: 0.5 }} />;\n  }\n\n  if (item.type === 'header') {\n    return <MenuHeader key={item.id}>{item.label}</MenuHeader>;\n  }\n\n  const hasIcon = !!item.icon;\n\n  return (\n    <StyledMenuItem\n      key={item.id}\n      disabled={item.disabled}\n      onClick={() => handleItemClick(item)}\n      color={item.color}\n      dangerous={item.dangerous}\n    >\n      {hasIcon && (\n        <ListItemIcon sx={{ minWidth: sxRem(size === 'sm' ? 32 : 40) }}>{item.icon}</ListItemIcon>\n      )}\n      <ListItemText primary={item.label} />\n      {item.shortcut && <ShortcutText variant=\"caption\">{item.shortcut}</ShortcutText>}\n    </StyledMenuItem>\n  );\n};\n\ninterface TriggerOptions {\n  disabled: boolean;\n  triggerClassName?: string;\n  triggerStyle?: React.CSSProperties;\n}\n\n// The trigger is whatever the caller passed as children. A single element is\n// cloned, so the handler and cursor land on the caller's own node; anything else\n// gets wrapped in a div that can carry them.\nconst buildTrigger = (\n  children: React.ReactNode,\n  onContextMenu: (event: React.MouseEvent) => void,\n  { disabled, triggerClassName, triggerStyle }: TriggerOptions,\n) => {\n  const cursor = disabled ? 'default' : 'context-menu';\n\n  if (!isValidElement(children)) {\n    return (\n      <div\n        onContextMenu={onContextMenu}\n        className={triggerClassName}\n        style={{ ...triggerStyle, cursor }}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  const element = children as React.ReactElement<{\n    onContextMenu?: (event: React.MouseEvent) => void;\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n\n  return cloneElement(element, {\n    onContextMenu,\n    className: [\n      element.props.className,\n      triggerClassName,\n      !disabled ? 'context-menu-trigger' : '',\n    ]\n      .filter(Boolean)\n      .join(' '),\n    style: { ...element.props.style, ...triggerStyle, cursor },\n  });\n};\n\nexport const ContextMenu = React.forwardRef<HTMLDivElement, ContextMenuProps>(\n  (\n    {\n      variant = 'default',\n      items,\n      children,\n      disabled = false,\n      onOpen,\n      onClose,\n      size = 'md',\n      triggerClassName,\n      triggerStyle,\n      ...menuProps\n    },\n    ref,\n  ) => {\n    const [contextMenu, setContextMenu] = useState<{\n      mouseX: number;\n      mouseY: number;\n    } | null>(null);\n\n    const handleContextMenu = (event: React.MouseEvent) => {\n      if (disabled) return;\n\n      event.preventDefault();\n      setContextMenu(\n        contextMenu === null\n          ? {\n              mouseX: event.clientX + 2,\n              mouseY: event.clientY - 6,\n            }\n          : null,\n      );\n      onOpen?.(event);\n    };\n\n    const handleClose = () => {\n      setContextMenu(null);\n      onClose?.();\n    };\n\n    const handleItemClick = (item: ContextMenuItem) => {\n      if (item.onClick) {\n        item.onClick();\n      }\n      handleClose();\n    };\n\n    const triggerElement = buildTrigger(children, handleContextMenu, {\n      disabled,\n      triggerClassName,\n      triggerStyle,\n    });\n\n    return (\n      <>\n        {triggerElement}\n        <StyledMenu\n          ref={ref}\n          open={contextMenu !== null}\n          onClose={handleClose}\n          anchorReference=\"anchorPosition\"\n          anchorPosition={\n            contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined\n          }\n          customVariant={variant}\n          size={size}\n          {...menuProps}\n        >\n          {items.map((item) => renderMenuItem(item, handleItemClick, size))}\n        </StyledMenu>\n      </>\n    );\n  },\n);\n\nContextMenu.displayName = 'ContextMenu';\n"],"mappings":"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","names":[]}

package/dist/{chunk-DCJSHYE5.js → chunk-RSDYS5B3.js}

@@ -4,16 +4,16 @@ import {
   MapDecorativePins,
   MapRoads,
   MapScaleBar
-} from "./chunk-4CHROSWR.js";
+} from "./chunk-5ETBB2DG.js";
 import {
   MapTiles
-} from "./chunk-HGMBY5LP.js";
+} from "./chunk-HQWJUHR4.js";
 import {
   surfaceBackground
 } from "./chunk-X6AIKCAV.js";
 import {
   getTileCoordinates
-} from "./chunk-TUBCN4DJ.js";
+} from "./chunk-CB6DTWD5.js";
 
 // src/components/data-display/MapPreview/StaticMapView.tsx
 import Box from "@mui/material/Box/index.js";
@@ -59,4 +59,4 @@ var StaticMapView = ({
 export {
   StaticMapView
 };
-//# sourceMappingURL=chunk-DCJSHYE5.js.map
+//# sourceMappingURL=chunk-RSDYS5B3.js.map

package/dist/{chunk-NYZO3JNB.js → chunk-RXJQA3FQ.js}

@@ -1,5 +1,4 @@
 // src/components/feedback/TutorialOverlay/TutorialOverlay.geometry.ts
-var DEFAULT_PADDING = 16;
 var getElementBounds = (selector) => document.querySelector(selector)?.getBoundingClientRect() ?? null;
 var pickPlacement = (targetBounds) => {
   const spaces = {
@@ -30,7 +29,7 @@ var clampToViewport = (position, tooltipBounds, padding) => ({
   top: Math.max(padding, Math.min(position.top, window.innerHeight - tooltipBounds.height - padding)),
   left: Math.max(padding, Math.min(position.left, window.innerWidth - tooltipBounds.width - padding))
 });
-var calculateTooltipPosition = (targetBounds, tooltipBounds, placement, padding = DEFAULT_PADDING) => {
+var calculateTooltipPosition = (targetBounds, tooltipBounds, placement, padding) => {
   const finalPlacement = placement === "auto" ? pickPlacement(targetBounds) : placement;
   const offset = offsetFor(finalPlacement, targetBounds, tooltipBounds, padding);
   return {
@@ -43,4 +42,4 @@ export {
   getElementBounds,
   calculateTooltipPosition
 };
-//# sourceMappingURL=chunk-NYZO3JNB.js.map
+//# sourceMappingURL=chunk-RXJQA3FQ.js.map

package/dist/chunk-RXJQA3FQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/TutorialOverlay/TutorialOverlay.geometry.ts"],"sourcesContent":["export const getElementBounds = (selector: string): globalThis.DOMRect | null =>\n  document.querySelector(selector)?.getBoundingClientRect() ?? null;\n\n// With placement 'auto', the side with the most free space around the target\n// wins.\nconst pickPlacement = (targetBounds: globalThis.DOMRect): string => {\n  const spaces = {\n    top: targetBounds.top,\n    bottom: window.innerHeight - targetBounds.bottom,\n    left: targetBounds.left,\n    right: window.innerWidth - targetBounds.right,\n  };\n\n  return Object.entries(spaces).reduce((a, b) => (b[1] > a[1] ? b : a))[0];\n};\n\nconst offsetFor = (\n  placement: string,\n  targetBounds: globalThis.DOMRect,\n  tooltipBounds: globalThis.DOMRect,\n  padding: number,\n): { top: number; left: number } => {\n  const centredLeft = targetBounds.left + targetBounds.width / 2 - tooltipBounds.width / 2;\n  const centredTop = targetBounds.top + targetBounds.height / 2 - tooltipBounds.height / 2;\n\n  switch (placement) {\n    case 'top':\n      return { top: targetBounds.top - tooltipBounds.height - padding, left: centredLeft };\n    case 'bottom':\n      return { top: targetBounds.bottom + padding, left: centredLeft };\n    case 'left':\n      return { top: centredTop, left: targetBounds.left - tooltipBounds.width - padding };\n    case 'right':\n      return { top: centredTop, left: targetBounds.right + padding };\n    default:\n      return { top: 0, left: 0 };\n  }\n};\n\n// Keeps the tooltip fully on screen, whatever the chosen side works out to.\nconst clampToViewport = (\n  position: { top: number; left: number },\n  tooltipBounds: globalThis.DOMRect,\n  padding: number,\n) => ({\n  top: Math.max(padding, Math.min(position.top, window.innerHeight - tooltipBounds.height - padding)),\n  left: Math.max(padding, Math.min(position.left, window.innerWidth - tooltipBounds.width - padding)),\n});\n\nexport const calculateTooltipPosition = (\n  targetBounds: globalThis.DOMRect,\n  tooltipBounds: globalThis.DOMRect,\n  placement: string,\n  /** The clearance around the target, in px — the caller reads it through `remPx`. */\n  padding: number,\n) => {\n  const finalPlacement = placement === 'auto' ? pickPlacement(targetBounds) : placement;\n  const offset = offsetFor(finalPlacement, targetBounds, tooltipBounds, padding);\n\n  return {\n    position: clampToViewport(offset, tooltipBounds, padding),\n    placement: finalPlacement,\n  };\n};\n"],"mappings":";AAAO,IAAM,mBAAmB,CAAC,aAC/B,SAAS,cAAc,QAAQ,GAAG,sBAAsB,KAAK;AAI/D,IAAM,gBAAgB,CAAC,iBAA6C;AAClE,QAAM,SAAS;AAAA,IACb,KAAK,aAAa;AAAA,IAClB,QAAQ,OAAO,cAAc,aAAa;AAAA,IAC1C,MAAM,aAAa;AAAA,IACnB,OAAO,OAAO,aAAa,aAAa;AAAA,EAC1C;AAEA,SAAO,OAAO,QAAQ,MAAM,EAAE,OAAO,CAAC,GAAG,MAAO,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,CAAE,EAAE,CAAC;AACzE;AAEA,IAAM,YAAY,CAChB,WACA,cACA,eACA,YACkC;AAClC,QAAM,cAAc,aAAa,OAAO,aAAa,QAAQ,IAAI,cAAc,QAAQ;AACvF,QAAM,aAAa,aAAa,MAAM,aAAa,SAAS,IAAI,cAAc,SAAS;AAEvF,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO,EAAE,KAAK,aAAa,MAAM,cAAc,SAAS,SAAS,MAAM,YAAY;AAAA,IACrF,KAAK;AACH,aAAO,EAAE,KAAK,aAAa,SAAS,SAAS,MAAM,YAAY;AAAA,IACjE,KAAK;AACH,aAAO,EAAE,KAAK,YAAY,MAAM,aAAa,OAAO,cAAc,QAAQ,QAAQ;AAAA,IACpF,KAAK;AACH,aAAO,EAAE,KAAK,YAAY,MAAM,aAAa,QAAQ,QAAQ;AAAA,IAC/D;AACE,aAAO,EAAE,KAAK,GAAG,MAAM,EAAE;AAAA,EAC7B;AACF;AAGA,IAAM,kBAAkB,CACtB,UACA,eACA,aACI;AAAA,EACJ,KAAK,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,KAAK,OAAO,cAAc,cAAc,SAAS,OAAO,CAAC;AAAA,EAClG,MAAM,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,MAAM,OAAO,aAAa,cAAc,QAAQ,OAAO,CAAC;AACpG;AAEO,IAAM,2BAA2B,CACtC,cACA,eACA,WAEA,YACG;AACH,QAAM,iBAAiB,cAAc,SAAS,cAAc,YAAY,IAAI;AAC5E,QAAM,SAAS,UAAU,gBAAgB,cAAc,eAAe,OAAO;AAE7E,SAAO;AAAA,IACL,UAAU,gBAAgB,QAAQ,eAAe,OAAO;AAAA,IACxD,WAAW;AAAA,EACb;AACF;","names":[]}

package/dist/{chunk-N5GVW6RO.js → chunk-S6IWKDWT.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk-FRAVVI4A.js";
 import {
   Calendar
-} from "./chunk-UN5INW6K.js";
+} from "./chunk-R53ZOW4B.js";
 
 // src/components/form/DateRangePicker/DateRangePicker.tsx
 import Box from "@mui/material/Box/index.js";
@@ -181,4 +181,4 @@ export {
   DateRangePicker,
   DateRangePicker_default
 };
-//# sourceMappingURL=chunk-N5GVW6RO.js.map
+//# sourceMappingURL=chunk-S6IWKDWT.js.map

package/dist/{chunk-DB2ZFZVW.js → chunk-SBIZXZPP.js}

@@ -1,9 +1,9 @@
 import {
   FleetCanvas
-} from "./chunk-DVAAUWTC.js";
+} from "./chunk-LCHCE2G5.js";
 import {
   FleetRoster
-} from "./chunk-E7T3A4IR.js";
+} from "./chunk-5JCGBCFJ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -79,4 +79,4 @@ function FleetBody({
 export {
   FleetBody
 };
-//# sourceMappingURL=chunk-DB2ZFZVW.js.map
+//# sourceMappingURL=chunk-SBIZXZPP.js.map

package/dist/{chunk-NCPWLHZT.js → chunk-SKT2V2OX.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-PGPPN63I.js";
 import {
   Card
-} from "./chunk-N6CSXHFJ.js";
+} from "./chunk-WN5PNP6F.js";
 import {
   Button
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 
 // src/user-avatar/user-avatar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -74,4 +74,4 @@ export {
   UserAvatar,
   UserMenu
 };
-//# sourceMappingURL=chunk-NCPWLHZT.js.map
+//# sourceMappingURL=chunk-SKT2V2OX.js.map

package/dist/{chunk-EOW2ECB3.js → chunk-SNURSSTN.js}

@@ -1,6 +1,6 @@
 import {
   StepRow
-} from "./chunk-R75DZ3AK.js";
+} from "./chunk-BVLMKSHX.js";
 import {
   resolveWorkflowStepProps,
   withDerivedStatus
@@ -104,4 +104,4 @@ export {
   WorkflowStep,
   WorkflowStep_default
 };
-//# sourceMappingURL=chunk-EOW2ECB3.js.map
+//# sourceMappingURL=chunk-SNURSSTN.js.map

package/dist/{chunk-GRDPGHQJ.js → chunk-SV6JGFHG.js}

@@ -3,13 +3,17 @@ import {
 } from "./chunk-QB3TVUPD.js";
 import {
   Dialog
-} from "./chunk-L4UP5VYS.js";
+} from "./chunk-GVH7C2PT.js";
 import {
   Button
 } from "./chunk-2EAAWOZ2.js";
 import {
   accentFor
 } from "./chunk-TCAQOUIB.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/AppHeader/AppHeader.details.tsx
 import Box from "@mui/material/Box/index.js";
@@ -17,8 +21,8 @@ import Typography from "@mui/material/Typography/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import useMediaQuery from "@mui/material/useMediaQuery/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DIALOG_WIDTH = 460;
-var XXS_MAX_WIDTH = 360;
+var DIALOG_WIDTH = sxRem(460);
+var xxsQuery = (theme) => `(max-width:${rem(theme, 360 - 0.05)})`;
 function sheetHeight(xxs) {
   return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
 }
@@ -108,7 +112,7 @@ var AppHeaderDetails = ({
 }) => {
   const theme = useTheme();
   const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
-  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+  const xxs = useMediaQuery(xxsQuery(theme));
   const description = typeof subtitle === "string" ? subtitle : void 0;
   const richSubtitle = description === void 0 ? subtitle : null;
   const body = /* @__PURE__ */ jsx(DetailsBody, { rows, dataTestId, children });
@@ -162,4 +166,4 @@ AppHeaderDetails.displayName = "AppHeaderDetails";
 export {
   AppHeaderDetails
 };
-//# sourceMappingURL=chunk-GRDPGHQJ.js.map
+//# sourceMappingURL=chunk-SV6JGFHG.js.map

package/dist/chunk-SV6JGFHG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.details.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { accentFor } from '../../../tokens/scales';\nimport { Sheet } from '../../data-display/Sheet/Sheet';\nimport { Button } from '../../form/Button/Button';\nimport { Dialog } from '../../feedback/Dialog/Dialog';\n\nimport type {\n  AppHeaderDetailRow,\n  AppHeaderDetailsAction,\n  AppHeaderDetailsProps,\n} from './AppHeader.types';\n\n/** How wide the dialog presentation grows before it stops (460 design px). */\nconst DIALOG_WIDTH = sxRem(460);\n\n/**\n * Where the smallest phones stop (360 design px). The theme's scale starts at\n * `xs`/`sm`, so there is no `xxs` breakpoint to ask for — this is that\n * boundary, named once rather than inlined at the place it decides something.\n */\nconst xxsQuery = (theme: Theme): string => `(max-width:${rem(theme, 360 - 0.05)})`;\n\n/**\n * The sheet grows to its content and stops at the viewport; it does not take a\n * fixed slab of height.\n *\n * `Sheet`'s vertical presets are absolute (`md` is 400px), which on a phone is\n * shorter than six detail rows plus a button — so the panel scrolled INSIDE a\n * screen that had room to spare, putting the address and the way out below the\n * fold of a sheet using two thirds of the display. `height: auto` sizes it to\n * what is in it, and the cap keeps a long panel on-screen: 100dvh on the\n * smallest phones where every pixel counts, 90dvh above that so the panel still\n * reads as a sheet over a page rather than as a new screen.\n *\n * `dvh` and not `vh` — mobile browser chrome makes `vh` overshoot, which would\n * reintroduce exactly the scroll this removes.\n */\nfunction sheetHeight(xxs: boolean): { height: string; maxHeight: string } {\n  return { height: 'auto', maxHeight: xxs ? '100dvh' : '90dvh' };\n}\n\n/** Which surface this viewport calls for. Lifted out to keep the component lean. */\nfunction usesSheet(presentation: AppHeaderDetailsProps['presentation'], compact: boolean): boolean {\n  if (presentation === 'sheet') return true;\n  if (presentation === 'dialog') return false;\n  return compact;\n}\n\n/** One label/value line. The value may wrap to two lines; the label may not. */\nconst DetailRow: React.FC<{ row: AppHeaderDetailRow; last: boolean; dataTestId: string }> = ({\n  row,\n  last,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      data-testid={`${dataTestId}-row`}\n      data-row={row.id ?? row.label}\n      sx={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        gap: 2,\n        py: 1.5,\n        borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <Typography variant=\"body1\" color=\"text.secondary\" component=\"span\" sx={{ flex: '0 0 auto' }}>\n        {row.label}\n      </Typography>\n      <Typography\n        variant=\"body1\"\n        component=\"span\"\n        sx={{\n          minWidth: 0,\n          textAlign: 'right',\n          fontWeight: row.tone ? 700 : 500,\n          color: row.tone ? accentFor(theme, row.tone).main : 'text.primary',\n          // Newlines in a value are meaningful — an address is two lines.\n          whiteSpace: 'pre-line',\n        }}\n      >\n        {row.value}\n      </Typography>\n    </Box>\n  );\n};\n\n/** The rows plus whatever the caller put under them. */\nconst DetailsBody: React.FC<\n  Pick<AppHeaderDetailsProps, 'rows' | 'children'> & { dataTestId: string }\n> = ({ rows, children, dataTestId }) => (\n  <Box data-testid={`${dataTestId}-body`}>\n    {(rows ?? []).map((row, index) => (\n      <DetailRow\n        key={row.id ?? row.label}\n        row={row}\n        last={index === (rows?.length ?? 0) - 1 && !children}\n        dataTestId={dataTestId}\n      />\n    ))}\n    {children}\n  </Box>\n);\n\n/**\n * The single full-width call to action, or nothing.\n *\n * `padded` is for the dialog, which has no footer slot of its own — and the\n * padding lives here rather than at the call site so an action-less panel does\n * not end in a strip of empty space.\n */\nconst DetailsAction: React.FC<{\n  action?: AppHeaderDetailsAction;\n  dataTestId: string;\n  padded?: boolean;\n}> = ({ action, dataTestId, padded = false }) =>\n  action ? (\n    <Box sx={padded ? { pt: 2 } : undefined}>\n      <Button\n        variant=\"solid\"\n        color={action.color ?? 'primary'}\n        size=\"lg\"\n        fullWidth\n        disabled={action.disabled}\n        onClick={action.onClick}\n        dataTestId={action.dataTestId ?? `${dataTestId}-action`}\n      >\n        {action.label}\n      </Button>\n    </Box>\n  ) : null;\n\n/**\n * The panel behind the header's disclosure — the hours, the address, the way\n * out — in the shape the viewport calls for.\n *\n * ONE component with two presentations, because they are one thing to the user\n * and one thing to the caller: a bottom sheet within reach of a thumb, a centred\n * dialog under a pointer. `auto` picks by viewport, so nobody writes that branch\n * at a call site and nobody ships a phone-shaped sheet stretched across a\n * desktop. Force either one with `presentation` when the surrounding layout\n * already decides (a preview frame, a story, a kiosk).\n */\nexport const AppHeaderDetails: React.FC<AppHeaderDetailsProps> = ({\n  open,\n  onClose,\n  title,\n  subtitle,\n  rows,\n  children,\n  action,\n  presentation = 'auto',\n  breakpoint = 'sm',\n  className,\n  dataTestId = 'app-header-details',\n}) => {\n  const theme = useTheme();\n  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));\n  const xxs = useMediaQuery(xxsQuery(theme));\n\n  // Split once, not per branch: a STRING subtitle is the panel's own\n  // `description` (both surfaces style it as part of their header), anything\n  // richer is a node we render ourselves above the rows.\n  const description = typeof subtitle === 'string' ? subtitle : undefined;\n  const richSubtitle = description === undefined ? subtitle : null;\n\n  const body = (\n    <DetailsBody rows={rows} dataTestId={dataTestId}>\n      {children}\n    </DetailsBody>\n  );\n  const footer = <DetailsAction action={action} dataTestId={dataTestId} />;\n\n  if (asSheet) {\n    // No `showHandle`. The grab bar promises a drag this panel does not answer:\n    // its height is its content's, so there is no second position to drag it\n    // to, and the handle sat above a ✕ that already closes it. Swipe-to-dismiss\n    // is `Sheet`'s default and still works — it just stops being advertised by\n    // a control that looked resizable and was not.\n    return (\n      <Sheet\n        open={open}\n        onClose={onClose}\n        onOpenChange={(next) => !next && onClose()}\n        position=\"bottom\"\n        size=\"md\"\n        style={sheetHeight(xxs)}\n        className={className}\n        title={title}\n        description={description}\n        showCloseButton\n        rounded\n        footer={footer}\n        dataTestId={dataTestId}\n      >\n        {richSubtitle}\n        {body}\n      </Sheet>\n    );\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={title}\n      description={description}\n      showCloseButton\n      fullWidth\n      className={className}\n      dataTestId={dataTestId}\n      PaperProps={{ sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } }}\n    >\n      {richSubtitle}\n      {body}\n      <DetailsAction action={action} dataTestId={dataTestId} padded />\n    </Dialog>\n  );\n};\n\nAppHeaderDetails.displayName = 'AppHeaderDetails';\n"],"mappings":"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","names":[]}

package/dist/{chunk-CZBND7AY.js → chunk-T7DE44SP.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-HCT5ELST.js";
 import {
   Skeleton
-} from "./chunk-7F7TTOYN.js";
+} from "./chunk-BEGTLELZ.js";
 import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
@@ -215,4 +215,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-CZBND7AY.js.map
+//# sourceMappingURL=chunk-T7DE44SP.js.map

package/dist/{chunk-D5SZXH7Q.js → chunk-TNBJ4DK4.js}

@@ -47,8 +47,10 @@ var MUI_SHADOWS = {
   2: ELEVATION_SHADOWS[2],
   3: ELEVATION_SHADOWS[3]
 };
-var IOS_THUMB_SHADOW = `0 3px 1px 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 3px 8px 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 1px 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;
-var iosTrackShadow = () => `inset 0 0 0 0.5px ${alpha(SWITCH_BLACK, 0.1)}, inset 0 2px 3px ${alpha(SWITCH_BLACK, 0.12)}`;
+var AS_PX = (value) => `${value}px`;
+var iosThumbShadow = (length = AS_PX) => `0 ${length(3)} ${length(1)} 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 ${length(3)} ${length(8)} 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 ${length(1)} 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;
+var IOS_THUMB_SHADOW = iosThumbShadow();
+var iosTrackShadow = (length = AS_PX) => `inset 0 0 0 ${length(0.5)} ${alpha(SWITCH_BLACK, 0.1)}, inset 0 ${length(2)} ${length(3)} ${alpha(SWITCH_BLACK, 0.12)}`;
 var TRACK_ALPHA = { ios: 0.1, android: 0.2, other: 0.3 };
 var trackColor = (ink, look) => {
   if (look === "ios") return alpha(ink.black, TRACK_ALPHA.ios);
@@ -113,6 +115,8 @@ export {
   thumbRadius,
   THUMB_ELEVATION,
   MUI_SHADOWS,
+  AS_PX,
+  iosThumbShadow,
   IOS_THUMB_SHADOW,
   iosTrackShadow,
   TRACK_ALPHA,
@@ -145,4 +149,4 @@ export {
   seconds,
   showsTrackLabels
 };
-//# sourceMappingURL=chunk-D5SZXH7Q.js.map
+//# sourceMappingURL=chunk-TNBJ4DK4.js.map

package/dist/chunk-TNBJ4DK4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.metrics.ts"],"sourcesContent":["import type { SwitchVariant } from './Switch.base';\nimport { alpha } from '../../../tokens/color';\nimport { ABSOLUTE_INK, ELEVATION_SHADOWS, NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Switch` RENDERERS DRAW WITH.\n *\n * `Switch.styles.ts` (web, emotion over MUI's `Switch`) and\n * `Switch.native.tsx` (React Native, drawing the track and thumb itself) read\n * this one table: the geometry per size, the four looks' radii and shadows,\n * the resting track colours, and the type the label, the description and the\n * helper are set in.\n *\n * Spacing is in SPACING UNITS where the web writes `theme.spacing(n)`;\n * everything else is px, a ratio or an alpha.\n */\n\n/** MUI's `palette.common.black`, which `UiTheme` does not carry. */\nexport const SWITCH_BLACK = ABSOLUTE_INK.black;\n\nexport interface SwitchGeometry {\n  width: number;\n  height: number;\n  padding: number;\n  thumbSize: number;\n}\n\nexport const SWITCH_SIZES: Record<SizeValue, SwitchGeometry> = {\n  xs: { width: 34, height: 18, padding: 1, thumbSize: 14 },\n  sm: { width: 42, height: 22, padding: 1, thumbSize: 18 },\n  md: { width: 50, height: 26, padding: 1, thumbSize: 22 },\n  lg: { width: 58, height: 30, padding: 2, thumbSize: 24 },\n  xl: { width: 66, height: 34, padding: 2, thumbSize: 28 },\n};\n\n/** The four platform looks. `label` prints its wording on a `default` track. */\nexport type SwitchLook = 'ios' | 'android' | 'material' | 'default';\n\nexport const lookOf = (variant?: string): SwitchLook => {\n  if (variant === 'ios') return 'ios';\n  if (variant === 'android') return 'android';\n  if (variant === 'material') return 'material';\n  return 'default';\n};\n\n/** Track geometry once the caller's overrides and the size preset are combined. */\nexport const geometryOf = (size: SizeValue | undefined, width?: number, height?: number): SwitchGeometry => {\n  const preset = SWITCH_SIZES[size as SizeValue] ?? SWITCH_SIZES.md;\n  return { ...preset, width: width || preset.width, height: height || preset.height };\n};\n\n/**\n * The thumb's corner. `'50%'` is what the web emits; a renderer with no\n * percentage radius asks {@link thumbRadius} for the px instead.\n */\nexport const THUMB_RADIUS: Record<SwitchLook, (thumbSize: number) => number | string> = {\n  ios: () => '50%',\n  android: () => 4,\n  material: (thumbSize) => thumbSize / 3,\n  default: () => '50%',\n};\n\nexport const TRACK_RADIUS: Record<SwitchLook, (height: number) => number> = {\n  ios: (height) => height / 2,\n  android: (height) => height / 3,\n  material: (height) => height / 2.5,\n  default: (height) => height / 2,\n};\n\n/** The web's `'50%'` as the px a circle of this size needs. */\nexport const thumbRadius = (look: SwitchLook, thumbSize: number): number => {\n  const radius = THUMB_RADIUS[look](thumbSize);\n  return typeof radius === 'number' ? radius : thumbSize / 2;\n};\n\n/**\n * The elevation the thumb rests at per look — an INDEX into `theme.shadows`,\n * not the shadow itself, so a host that re-themes MUI's elevations keeps\n * moving the web. {@link MUI_SHADOWS} carries MUI's own values for the native\n * side, which has no `theme.shadows` to read.\n */\nexport const THUMB_ELEVATION: Record<SwitchLook, number> = { ios: 0, android: 3, material: 2, default: 2 };\n\nexport const MUI_SHADOWS: Record<number, string> = {\n  2: ELEVATION_SHADOWS[2],\n  3: ELEVATION_SHADOWS[3],\n};\n\n/**\n * How a shadow builder writes one of its lengths. Native takes the px as they\n * stand ({@link AS_PX}); the web hands in its type scale (`rem`), so the iOS\n * shadows scale with the theme like every other length it draws.\n */\nexport type ShadowLength = (px: number) => string;\n\n/** A length written as the px it was drawn at — what native reads. */\nexport const AS_PX: ShadowLength = (value) => `${value}px`;\n\n/** The iOS thumb's own three-layer shadow. */\nexport const iosThumbShadow = (length: ShadowLength = AS_PX): string =>\n  `0 ${length(3)} ${length(1)} 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 ${length(3)} ${length(8)} 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 ${length(1)} 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;\n\n/** {@link iosThumbShadow} in px, as native draws it. */\nexport const IOS_THUMB_SHADOW = iosThumbShadow();\n\n/** The iOS track's inset hairline and inner shade. */\nexport const iosTrackShadow = (length: ShadowLength = AS_PX): string =>\n  `inset 0 0 0 ${length(0.5)} ${alpha(SWITCH_BLACK, 0.1)}, inset 0 ${length(2)} ${length(3)} ${alpha(SWITCH_BLACK, 0.12)}`;\n\n/** The resting track: a black wash on iOS, the disabled ink elsewhere. */\nexport const TRACK_ALPHA = { ios: 0.1, android: 0.2, other: 0.3 } as const;\n\n/**\n * `black` is MUI's `palette.common.black` on the web and {@link SWITCH_BLACK}\n * on native, whose theme has no `common` — the same `#000` either way, passed\n * in rather than assumed so a host that themes it still moves the web.\n */\nexport const trackColor = (ink: { black: string; disabled: string }, look: SwitchLook): string => {\n  if (look === 'ios') return alpha(ink.black, TRACK_ALPHA.ios);\n  const strength = look === 'android' ? TRACK_ALPHA.android : TRACK_ALPHA.other;\n  return alpha(ink.disabled, strength);\n};\n\n/** How far the thumb travels, and where it starts. iOS insets differently. */\nexport const thumbTravel = (look: SwitchLook, geometry: SwitchGeometry): { rest: number; travel: number } => {\n  const { width, thumbSize, padding } = geometry;\n  if (look === 'ios') {\n    // The web nudges the whole switch base 2px right and shortens the trip.\n    return { rest: padding + IOS_BASE_OFFSET, travel: width - thumbSize - IOS_TRAVEL_INSET };\n  }\n  return { rest: padding, travel: width - thumbSize - padding * 2 };\n};\n\nexport const IOS_BASE_OFFSET = 2;\nexport const IOS_TRAVEL_INSET = 4;\n\n/** MUI's 300ms `cubic-bezier(0.4, 0, 0.2, 1)`, on everything the switch moves. */\nexport const SWITCH_TRANSITION = { ms: 300, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' } as const;\n\n/** The disabled treatment: the thumb greys and the track fades. */\nexport const DISABLED = { trackOpacity: 0.3, checkedTrackOpacity: 0.5, thumbGrey: 100 } as const;\n\n/** `glass`: a paper wash under a blur, inside a faint divider hairline. */\nexport const SWITCH_GLASS = {\n  trackAlpha: 0.1,\n  thumbAlpha: 0.9,\n  borderAlpha: 0.2,\n  trackBlur: 20,\n  thumbBlur: 10,\n} as const;\n\n/** `gradient`: the checked track runs light → main → dark; the resting one is fainter. */\nexport const SWITCH_GRADIENT = {\n  checked: { angleDeg: 90, stops: [0, 50, 100] },\n  resting: { angleDeg: 135, lightAlpha: 0.3, mainAlpha: 0.2 },\n  shimmerMs: 3000,\n} as const;\n\n/** `glow`: a halo of the hue around the checked track, breathing every two seconds. */\nexport const SWITCH_GLOW = { blur: 10, alpha: 0.6, insetBlur: 10, insetAlpha: 0.2, ms: 2000 } as const;\n\n/** `pulse`: the thumb breathes; `ripple`: a wash of the hue expands under the pointer. */\nexport const SWITCH_PULSE = { ms: 2000, minOpacity: 0.7, minScale: 0.95 } as const;\nexport const SWITCH_RIPPLE = { alpha: 0.2, ms: 600, scale: 2 } as const;\n\n/** `loading`: a 2px ring inside the thumb, turning once a second. */\nexport const SWITCH_SPINNER = { sizeRatio: 0.6, borderWidth: 2, ms: 1000 } as const;\n\n/** The two icons overlaid on the track, at their own size per step of the scale. */\nexport const SWITCH_ICON_SIZES: Record<SizeValue, number> = { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 };\n/** Where a shown icon sits, and how small a hidden one is drawn. */\nexport const SWITCH_ICON = { inset: 4, hiddenScale: 0.8 } as const;\n\n/** The wording the `label` variant prints inside the track: 0.75rem at 500, 8px in. */\nexport const TRACK_LABEL = { fontSize: 12, fontWeight: 500, insetUnits: 1 } as const;\n\n/** MUI's `body2` for the label, `caption` for the description and the helper text. */\nexport const SWITCH_LABEL = { fontSize: 14, lineHeight: 1.43, fontWeight: 500 } as const;\nexport const SWITCH_DESCRIPTION = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 0.5 } as const;\nexport const SWITCH_HELPER = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 1 } as const;\n\n/** The label row: 16px from the control beside it, 8px above or below it. */\nexport const LABEL_GAP_UNITS = { beside: 2, stacked: 1 } as const;\n\n/**\n * The minimum height of a touch target, in px (FUT-1905).\n *\n * No entry in {@link SWITCH_SIZES} reaches it — `xl`, the largest, is 34px tall\n * and `md` is 26 — so a consumer cannot buy a legal target by passing a bigger\n * `size`. The label is what clears it: see `SwitchLabel` in `Switch.parts.tsx`.\n */\nexport const TAP_TARGET_MIN = 40;\n\n/**\n * `neutral`'s three greys, and the literals the web falls back to for a theme\n * whose grey ramp omits a step. Same three steps `Button` draws its neutral\n * from.\n */\nexport const NEUTRAL_GREY = { main: 700, dark: 800, light: 500 } as const;\nexport const NEUTRAL_FALLBACK = {\n  main: NEUTRAL_RAMP[NEUTRAL_GREY.main],\n  dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],\n  light: NEUTRAL_RAMP[NEUTRAL_GREY.light],\n} as const;\nexport const NEUTRAL_CONTRAST = ABSOLUTE_INK.white;\n\n/**\n * The RESTING thumb — the knob while the switch is off (FUT-1924).\n *\n * It stays white, and the reason is worth stating because the checked thumb no\n * longer is: the resting track is `theme.palette.action.disabled` washed over\n * the page, which no tenant picks, and a white knob on it is the conventional\n * look in both modes. The CHECKED track is `palette.main`, a colour the tenant\n * does pick, and that is where a stated white was a defect. See `checkedInk`\n * in `Switch.styles.ts` and its native twin.\n */\nexport const RESTING_THUMB = ABSOLUTE_INK.white;\n\n/** Hover: the thumb lifts a shade and takes a halo of the hue. */\nexport const SWITCH_HOVER = { thumbScale: 1.05, elevation: 4, blur: 12, alpha: 0.2 } as const;\n\n/** Focus: MUI rings the thumb rather than moving it. */\nexport const SWITCH_FOCUS_RING = { width: 6, alpha: 0.2 } as const;\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** Whether this variant prints its wording inside the track. */\nexport const showsTrackLabels = (variant: SwitchVariant | undefined, onText?: string, offText?: string): boolean =>\n  variant === 'label' && Boolean(onText ?? offText);\n"],"mappings":"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","names":[]}

package/dist/{chunk-3CVTQZQJ.js → chunk-TNYKM4UU.js}

@@ -1,12 +1,16 @@
 import {
   SettingsRailGroup
-} from "./chunk-2CTTASUD.js";
+} from "./chunk-V5EWCJBT.js";
 import {
-  RAIL_WIDTH,
   TOUCH_TARGET,
   atLeastRail,
-  displayAcrossRail
-} from "./chunk-LIG7TKIB.js";
+  displayAcrossRail,
+  railWidth
+} from "./chunk-NYFNF7I5.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/SettingsLayout/SettingsLayout.rail.tsx
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -40,7 +44,7 @@ function SettingsRailToggle({
         justifyContent: "space-between",
         gap: 1,
         width: "100%",
-        minHeight: TOUCH_TARGET,
+        minHeight: rem(theme, TOUCH_TARGET),
         px: 1.5,
         py: 1,
         mb: 1,
@@ -91,7 +95,7 @@ function SettingsSearchEmpty({
           action.onClear?.();
         },
         "data-testid": `${testIdPrefix}-empty-action`,
-        sx: { mt: 1.5, minHeight: TOUCH_TARGET },
+        sx: { mt: 1.5, minHeight: sxRem(TOUCH_TARGET) },
         children: action.label
       }
     ) : null
@@ -183,8 +187,8 @@ function SettingsRail({
         width: "100%",
         [atLeastRail(theme, breakpoint)]: {
           display: "block",
-          flex: `0 0 ${RAIL_WIDTH}px`,
-          width: RAIL_WIDTH,
+          flex: `0 0 ${railWidth(theme)}`,
+          width: railWidth(theme),
           borderRight: `1px solid ${theme.palette.divider}`,
           pr: 2,
           // Its own scrollbar, so a settings area with twenty categories does
@@ -229,4 +233,4 @@ function SettingsRail({
 export {
   SettingsRail
 };
-//# sourceMappingURL=chunk-3CVTQZQJ.js.map
+//# sourceMappingURL=chunk-TNYKM4UU.js.map

package/dist/chunk-TNYKM4UU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.rail.tsx"],"sourcesContent":["'use client';\n\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { SettingsRailGroup, type RailShape } from './SettingsLayout.items';\nimport { atLeastRail, displayAcrossRail, railWidth, TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport type {\n  SettingsEmptySearchAction,\n  SettingsLayoutProps,\n  SettingsNavGroup,\n  SettingsRailBreakpoint,\n} from './SettingsLayout.types';\n\ninterface RailToggleProps {\n  title?: React.ReactNode;\n  activeLabel?: string;\n  open: boolean;\n  onToggle: () => void;\n  breakpoint: SettingsRailBreakpoint;\n  testIdPrefix: string;\n}\n\n/**\n * `switcher`-only collapse control: shows the current section (a compact\n * switcher) so the panel content stays at the top of the screen. Hidden once the\n * rail has its own column.\n */\nfunction SettingsRailToggle({\n  title,\n  activeLabel,\n  open,\n  onToggle,\n  breakpoint,\n  testIdPrefix,\n}: RailToggleProps): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onToggle}\n      aria-expanded={open}\n      aria-label={typeof title === 'string' ? title : 'Settings'}\n      data-testid={`${testIdPrefix}-toggle`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 1,\n        width: '100%',\n        minHeight: rem(theme, TOUCH_TARGET),\n        px: 1.5,\n        py: 1,\n        mb: 1,\n        textAlign: 'left',\n        cursor: 'pointer',\n        color: 'text.primary',\n        background: 'transparent',\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: 1.5,\n      })}\n    >\n      <Box sx={{ minWidth: 0 }}>\n        {title ? (\n          <Typography variant=\"caption\" sx={{ display: 'block', color: 'text.secondary' }}>\n            {title}\n          </Typography>\n        ) : null}\n        <Typography variant=\"body2\" noWrap sx={{ fontWeight: 600 }}>\n          {activeLabel ?? ''}\n        </Typography>\n      </Box>\n      <ExpandMoreIcon\n        fontSize=\"small\"\n        sx={{\n          flex: '0 0 auto',\n          color: 'text.secondary',\n          transition: 'transform 150ms ease',\n          transform: open ? 'rotate(180deg)' : 'none',\n          '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n        }}\n      />\n    </Box>\n  );\n}\n\n/** The empty-search state, with the way out of it rendered inside. */\nfunction SettingsSearchEmpty({\n  label,\n  action,\n  onClear,\n  testIdPrefix,\n}: {\n  label: React.ReactNode;\n  action?: SettingsEmptySearchAction;\n  onClear: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box data-testid={`${testIdPrefix}-empty`} sx={{ px: 1, py: 2 }}>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {label}\n      </Typography>\n      {action ? (\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          onClick={() => {\n            onClear();\n            action.onClear?.();\n          }}\n          data-testid={`${testIdPrefix}-empty-action`}\n          sx={{ mt: 1.5, minHeight: sxRem(TOUCH_TARGET) }}\n        >\n          {action.label}\n        </Button>\n      ) : null}\n    </Box>\n  );\n}\n\nexport interface RailBodyProps extends RailShape {\n  navOpen: boolean;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder: string;\n  emptySearchLabel: React.ReactNode;\n  emptySearchAction?: SettingsEmptySearchAction;\n  filteredGroups: SettingsNavGroup[];\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  onNavigate?: () => void;\n  testIdPrefix: string;\n}\n\n/** The searchable rail body (search + groups). */\nfunction SettingsRailBody({\n  navOpen,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  emptySearchLabel,\n  emptySearchAction,\n  filteredGroups,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  onNavigate,\n  testIdPrefix,\n  ...shape\n}: RailBodyProps): React.JSX.Element {\n  // `drilldown` has no disclosure to be closed behind: below the breakpoint the\n  // body is the page, above it the rail. Only `switcher` hides it.\n  const hidden = navOpen ? 'block' : 'none';\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-rail-body`}\n      sx={(theme) =>\n        shape.variant === 'drilldown'\n          ? { display: 'block' }\n          : displayAcrossRail(theme, shape.breakpoint, hidden, 'block')\n      }\n    >\n      <TextField\n        value={query}\n        onChange={(event) => onQueryChange(event.target.value)}\n        placeholder={searchPlaceholder}\n        size=\"small\"\n        fullWidth\n        aria-label={searchPlaceholder}\n        data-testid={`${testIdPrefix}-search`}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon fontSize=\"small\" sx={{ color: 'text.secondary' }} />\n            </InputAdornment>\n          ),\n        }}\n        sx={{ mb: 2 }}\n      />\n      {filteredGroups.length === 0 ? (\n        <SettingsSearchEmpty\n          label={emptySearchLabel}\n          action={emptySearchAction}\n          onClear={() => onQueryChange('')}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : (\n        filteredGroups.map((group) => (\n          <SettingsRailGroup\n            key={group.id}\n            group={group}\n            activeItemId={activeItemId}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            onNavigate={onNavigate}\n            testIdPrefix={testIdPrefix}\n            {...shape}\n          />\n        ))\n      )}\n    </Box>\n  );\n}\n\n/** Props for {@link SettingsRail}: the rail body's inputs plus the mobile chrome. */\nexport type SettingsRailProps = RailBodyProps & {\n  title?: React.ReactNode;\n  activeLabel?: string;\n  onToggleNav: () => void;\n  /** Scroll inside the rail rather than with the page. See `fillHeight`. */\n  fillHeight?: boolean;\n};\n\n/** The navigation column: title, the `switcher`'s disclosure, and the body. */\nexport function SettingsRail({\n  title,\n  activeLabel,\n  navOpen,\n  onToggleNav,\n  testIdPrefix,\n  fillHeight = false,\n  ...bodyProps\n}: SettingsRailProps): React.JSX.Element {\n  const { variant, breakpoint, atIndex } = bodyProps;\n  // In `drilldown` the rail is the index's list below the breakpoint and the\n  // left column above it — so inside a section it steps aside for the chip\n  // strip. It is `display: none`, never unmounted: the two navigation forms\n  // both stay in the DOM at every width, which is what makes \"the narrow width\n  // offers what the wide one offers\" true by construction instead of by review.\n  const hiddenWhileInSection = variant === 'drilldown' && !atIndex;\n\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={typeof title === 'string' ? title : 'Settings'}\n      data-testid={`${testIdPrefix}-rail`}\n      sx={(theme) => ({\n        display: hiddenWhileInSection ? 'none' : 'block',\n        flex: '0 0 auto',\n        width: '100%',\n        [atLeastRail(theme, breakpoint)]: {\n          display: 'block',\n          flex: `0 0 ${railWidth(theme)}`,\n          width: railWidth(theme),\n          borderRight: `1px solid ${theme.palette.divider}`,\n          pr: 2,\n          // Its own scrollbar, so a settings area with twenty categories does\n          // not make the thing you NAVIGATE with scroll away while you read the\n          // panel. `minHeight: 0` is the load-bearing half: without it a flex\n          // child refuses to shrink below its content and `overflow` never\n          // engages.\n          ...(fillHeight\n            ? { height: '100%', minHeight: 0, overflowY: 'auto' as const, overscrollBehavior: 'contain' as const }\n            : {}),\n        },\n      })}\n    >\n      {title ? (\n        <Typography\n          variant=\"h6\"\n          data-testid={`${testIdPrefix}-title`}\n          sx={(theme) => ({\n            ...(variant === 'drilldown'\n              ? { display: 'block' }\n              : displayAcrossRail(theme, breakpoint, 'none', 'block')),\n            fontWeight: 700,\n            mb: 1.5,\n          })}\n        >\n          {title}\n        </Typography>\n      ) : null}\n      {variant === 'switcher' ? (\n        <SettingsRailToggle\n          title={title}\n          activeLabel={activeLabel}\n          open={navOpen}\n          onToggle={onToggleNav}\n          breakpoint={breakpoint}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : null}\n      <SettingsRailBody navOpen={navOpen} testIdPrefix={testIdPrefix} {...bodyProps} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-3VMGE7CU.js → chunk-TZFBJ47T.js}

@@ -123,7 +123,7 @@ function SelectionState({
         children: clearAllText
       }
     ),
-    /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, alignSelf: "center" } }),
+    /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: sxRem(16), alignSelf: "center" } }),
     /* @__PURE__ */ jsxs(
       Typography,
       {
@@ -190,7 +190,7 @@ function BrowsingClusters({
           flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
           // Tight (5px) when browsing so the controls fit one line beside the
           // checkbox; roomier (14px) in selection mode where they get their own row.
-          gap: hasSelection ? "14px" : "5px",
+          gap: hasSelection ? sxRem(14) : sxRem(5),
           ml: "auto",
           mr: edgeAlign ? -1.5 : 0,
           "& > *": { flexShrink: 0 }
@@ -273,4 +273,4 @@ function ContentToolbar({
 export {
   ContentToolbar
 };
-//# sourceMappingURL=chunk-3VMGE7CU.js.map
+//# sourceMappingURL=chunk-TZFBJ47T.js.map

package/dist/chunk-TZFBJ47T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ContentToolbar.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport type { ContentToolbarProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { sxRem } from '../../../tokens/relative';\n\nconst selectionButtonSx = {\n  minWidth: 0,\n  height: 'auto',\n  borderRadius: fieldRadiusPx,\n  fontWeight: 600,\n  py: 0.5,\n  px: 1.5,\n  fontSize: sxRem(12),\n  textTransform: 'none',\n  color: 'text.primary',\n} as const;\n\ntype SelectionClusterProps = Pick<\n  ContentToolbarProps,\n  | 'hasSelection'\n  | 'selectedCount'\n  | 'selectAll'\n  | 'clearSelection'\n  | 'actions'\n  | 'selectionExtra'\n  | 'selectAllTestId'\n  | 'clearAllTestId'\n  | 'edgeAlign'\n  | 'selectAllLabel'\n  | 'selectAllText'\n  | 'clearAllText'\n>;\n\n/** The left cluster: Select All + (when selecting) Clear All / count / actions. */\nfunction SelectionCluster({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: SelectionClusterProps): React.JSX.Element {\n  const actionsSlot = actions !== undefined && (\n    <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>\n  );\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        minWidth: 0,\n        // Browsing (mobile): don't grow, so the controls sit on the SAME line as\n        // the checkbox (no orphaned selection row). Desktop: grow to push\n        // controls right.\n        //\n        // SELECTING (mobile) it must be able to shrink instead. Its children are\n        // all `flex-shrink: 0`, so a cluster pinned at content width cannot wrap\n        // and the row painted past the toolbar's own edge — on Produtos at 390px\n        // that took \"Ações\" off-screen behind a sideways scroll, which is the\n        // one control the selection exists to reach.\n        flex: { xs: hasSelection ? '1 1 auto' : '0 0 auto', md: 1 },\n        alignItems: 'center',\n        // Wrapping is the phone's answer, and only the phone's: below `md` the\n        // cluster carries the count, the scope control and \"Ações\" at once, and\n        // no combination of those fits 320px on one line. From `md` up it stays\n        // a single line, where it always fitted.\n        flexWrap: { xs: 'wrap', md: 'nowrap' },\n        columnGap: 1.5,\n        rowGap: 1,\n        ml: edgeAlign ? -1.5 : 0,\n      }}\n    >\n      {/* Desktop: a \"Select All\" text button (md+). Mobile: a compact checkbox\n          that toggles select-all/clear — the text would eat the tight row. */}\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={selectAll}\n        data-testid={selectAllTestId}\n        sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}\n      >\n        {selectAllText}\n      </Button>\n      <Checkbox\n        size=\"small\"\n        checked={hasSelection}\n        onChange={(event) => (event.target.checked ? selectAll() : clearSelection())}\n        data-testid={`${selectAllTestId}-checkbox`}\n        inputProps={{ 'aria-label': selectAllLabel }}\n        sx={{ p: 0.5, display: { xs: 'inline-flex', md: 'none' } }}\n      />\n      {hasSelection ? (\n        <SelectionState\n          selectedCount={selectedCount}\n          clearSelection={clearSelection}\n          clearAllTestId={clearAllTestId}\n          clearAllText={clearAllText}\n          selectionExtra={selectionExtra}\n        />\n      ) : null}\n      {actionsSlot}\n    </Box>\n  );\n}\n\n/**\n * What the cluster shows once something IS ticked: Clear All, the count, and\n * the host's own `selectionExtra`.\n *\n * Its own component only because the cluster around it is at the complexity\n * gate's line ceiling — but the split falls where the meaning does. Everything\n * here exists only while a selection does, and the `actions` slot deliberately\n * stays OUTSIDE it: a toolbar may carry actions while browsing too.\n */\nfunction SelectionState({\n  selectedCount,\n  clearSelection,\n  clearAllTestId,\n  clearAllText,\n  selectionExtra,\n}: Pick<\n  ContentToolbarProps,\n  'selectedCount' | 'clearSelection' | 'clearAllTestId' | 'clearAllText' | 'selectionExtra'\n>): React.JSX.Element {\n  return (\n    <>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={clearSelection}\n        data-testid={clearAllTestId}\n        sx={selectionButtonSx}\n      >\n        {clearAllText}\n      </Button>\n      <Divider orientation=\"vertical\" flexItem sx={{ height: sxRem(16), alignSelf: 'center' }} />\n      <Typography\n        component=\"span\"\n        data-testid=\"selected-count-indicator\"\n        sx={{ fontSize: sxRem(14), color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}\n      >\n        {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected\n      </Typography>\n      {selectionExtra !== undefined && (\n        <>\n          {/* A DELIBERATE break, not a wrap that happened to land here. What\n              follows — \"Seleção: 48 produtos — todas as páginas\", its \"Limpar\n              seleção\", and \"Ações\" — is a sentence about the selection plus the\n              control that acts on it, and letting the phone break it wherever it\n              ran out of room split that sentence mid-phrase. Zero height so it\n              costs nothing but the row gap, and `display:none` from `md` up,\n              where the line still fits. */}\n          <Box\n            aria-hidden\n            sx={{ flexBasis: '100%', height: 0, display: { xs: 'block', md: 'none' } }}\n          />\n          {selectionExtra}\n        </>\n      )}\n    </>\n  );\n}\n\n/**\n * The BROWSING half of the toolbar: search + filters on the left, the page's\n * own controls on the right. Split out of {@link ContentToolbar} so that\n * function stays inside the complexity gate — it is layout only, and the\n * decision of whether to show it at all is made by the caller.\n */\nfunction BrowsingClusters({\n  leadingControls,\n  rightControls,\n  hasSelection,\n  edgeAlign,\n}: {\n  leadingControls?: React.ReactNode;\n  rightControls: React.ReactNode;\n  hasSelection: boolean;\n  edgeAlign: boolean;\n}): React.JSX.Element {\n  return (\n    <>\n      {/* minWidth:0 lets this cluster be the one that gives up width as the row\n       * tightens, which is what the filter overflow measures against. */}\n      {leadingControls !== undefined && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            flexGrow: 1,\n            minWidth: 0,\n            // The collapse ladder has a FLOOR — below roughly 400px even the\n            // fully-collapsed row does not fit, and its controls cannot shrink\n            // (they are flexShrink:0 so an over-packed row sheds instead of\n            // squeezing). Past that point this scrolls rather than letting them\n            // paint outside the toolbar, which is what a narrow phone did.\n            overflowX: 'auto',\n            // No scrollbar gutter stealing height on the common case.\n            scrollbarWidth: 'thin',\n          }}\n        >\n          {leadingControls}\n        </Box>\n      )}\n      {/* ml:auto keeps the controls right-aligned even when the cluster wraps to\n       * its own row (where justify-content:space-between would otherwise snap a\n       * lone item to the left); it's a no-op on a shared row. */}\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          // Same single-line rule as the row itself: this cluster wrapping\n          // INTERNALLY buys a second line just as surely as the row wrapping\n          // does. It bit at exactly 900px, the `md` breakpoint where the \"N de\n          // N\" counter appears and pushes Exibir/Exportar over the edge.\n          flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n          // Tight (5px) when browsing so the controls fit one line beside the\n          // checkbox; roomier (14px) in selection mode where they get their own row.\n          gap: hasSelection ? sxRem(14) : sxRem(5),\n          ml: 'auto',\n          mr: edgeAlign ? -1.5 : 0,\n          '& > *': { flexShrink: 0 },\n        }}\n      >\n        {rightControls}\n      </Box>\n    </>\n  );\n}\n\n/**\n * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The\n * left cluster owns selection chrome — **Select All**, and once items are\n * selected, **Clear All** + an \"N items selected\" count + an optional `actions`\n * slot. The right cluster is a free `rightControls` slot for page-specific\n * controls (ViewSelector, SortByDropdown, MultiSelectDropdown, FilterTrigger).\n *\n * Faithful, generic MUI port of the reference `ContentPageToolbar` — the\n * domain-specific default actions are intentionally left to the consumer via\n * the `actions` slot so this stays agnostic and reusable across projects.\n *\n * @example\n * ```tsx\n * <ContentToolbar\n *   hasSelection={selected.size > 0}\n *   selectedCount={selected.size}\n *   selectAll={selectAll}\n *   clearSelection={clear}\n *   rightControls={\n *     <>\n *       <ViewSelector viewMode={view} onViewModeChange={setView} zoom={zoom} onZoomChange={setZoom} />\n *       <SortByDropdown fields={FIELDS} activeField={field} onFieldChange={setField} />\n *       <MultiSelectDropdown label=\"Content Type\" options={types} selected={typeSet} onToggle={toggle} onClear={clear} />\n *       <FilterTrigger open={panelOpen} onOpenChange={setPanelOpen} hasActiveFilters={hasFilters} />\n *     </>\n *   }\n * />\n * ```\n */\nexport function ContentToolbar({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  rightControls,\n  leadingControls,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  exclusiveSelection = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: ContentToolbarProps): React.JSX.Element {\n  // Under `exclusiveSelection` the two states are alternatives, not neighbours:\n  // browsing shows the controls and no checkbox, selecting shows the checkbox\n  // and no controls. Anything else double-books the row.\n  const showSelection = !exclusiveSelection || hasSelection;\n  const showControls = !exclusiveSelection || !hasSelection;\n  return (\n    // Two clusters on one line. They may wrap onto separate rows ONLY for a\n    // toolbar without `leadingControls` — one carrying search + filters is\n    // driven by a measured collapse ladder (see `useFilterOverflow`), and a\n    // wrap there is the ladder having failed: it would silently buy a second\n    // row instead of shedding a control into \"Mais\", which is the one outcome\n    // the ladder exists to prevent.\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 2,\n        flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n        rowGap: 1,\n      }}\n    >\n      {showSelection && (\n        <SelectionCluster\n          selectAllText={selectAllText}\n          clearAllText={clearAllText}\n          hasSelection={hasSelection}\n          selectedCount={selectedCount}\n          selectAll={selectAll}\n          clearSelection={clearSelection}\n          actions={actions}\n          selectionExtra={selectionExtra}\n          selectAllTestId={selectAllTestId}\n          clearAllTestId={clearAllTestId}\n          selectAllLabel={selectAllLabel}\n          edgeAlign={edgeAlign}\n        />\n      )}\n\n      {showControls && (\n        <BrowsingClusters\n          leadingControls={leadingControls}\n          rightControls={rightControls}\n          hasSelection={hasSelection}\n          edgeAlign={edgeAlign}\n        />\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}