@12-apps/ui 6.36.0 → 6.38.0

package/dist/{chunk-BXAL7OIS.js → chunk-JC22FNFA.js}

@@ -12,25 +12,26 @@ import {
   uiInk
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/CategorySelect/CategorySelect.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var METRICS = {
-  panelWidth: 340,
-  panelRadius: 14,
-  listMaxHeight: 290,
-  sheetListMaxHeight: 340,
-  rowHeight: 36,
-  sheetRowHeight: 42,
-  rowRadius: 8,
-  boxSize: 18,
-  chevronButton: 22,
+  panelWidthPx: 340,
+  panelRadiusPx: 14,
+  listMaxHeightPx: 290,
+  sheetListMaxHeightPx: 340,
+  rowHeightPx: 36,
+  sheetRowHeightPx: 42,
+  rowRadiusPx: 8,
+  boxSizePx: 18,
+  chevronButtonPx: 22,
   /** Extra left padding per level of nesting. */
-  rowIndentStep: 14,
-  footerButton: 32,
-  sheetFooterButton: 38,
+  rowIndentStepPx: 14,
+  footerButtonPx: 32,
+  sheetFooterButtonPx: 38,
   /** Below this width the panel becomes a bottom sheet. */
   sheetBreakpoint: 480
 };
@@ -46,9 +47,9 @@ var triggerSx = (theme, selected, open) => {
   return {
     display: "flex",
     alignItems: "center",
-    gap: "8px",
+    gap: rem(theme, 8),
     height: fieldHeight(theme),
-    padding: "0 10px 0 12px",
+    padding: rems(theme, 0, 10, 0, 12),
     borderRadius: fieldRadiusPx(theme),
     border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
     background: selected ? brand.soft : theme.palette.background.paper,
@@ -58,12 +59,12 @@ var triggerSx = (theme, selected, open) => {
     cursor: "pointer",
     maxWidth: "100%",
     transition: "border-color .12s, box-shadow .12s",
-    boxShadow: open ? `0 0 0 3px ${brand.ring}` : "none",
+    boxShadow: open ? `0 0 0 ${rem(theme, 3)} ${brand.ring}` : "none",
     "&:hover": { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },
     "&:focus-visible": {
       outline: "none",
       borderColor: brand.main,
-      boxShadow: `0 0 0 3px ${alpha(brand.main, 0.18)}`
+      boxShadow: `0 0 0 ${rem(theme, 3)} ${alpha(brand.main, 0.18)}`
     },
     "&:disabled": { opacity: 0.5, cursor: "default" }
   };
@@ -74,18 +75,18 @@ var triggerCountSx = (theme) => ({
   lineHeight: 1,
   background: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
-  borderRadius: "999px",
-  padding: "3px 6px",
-  minWidth: 18,
+  borderRadius: rem(theme, 999),
+  padding: rems(theme, 3, 6),
+  minWidth: rem(theme, 18),
   textAlign: "center"
 });
 var triggerClearSx = (theme) => ({
-  width: 20,
-  height: 20,
+  width: rem(theme, 20),
+  height: rem(theme, 20),
   flex: "0 0 auto",
   border: 0,
   background: "transparent",
-  borderRadius: "5px",
+  borderRadius: rem(theme, 5),
   display: "grid",
   placeItems: "center",
   cursor: "pointer",
@@ -94,21 +95,21 @@ var triggerClearSx = (theme) => ({
   padding: 0,
   "&:hover": { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 }
 });
-var triggerChevronSx = (open) => ({
-  width: 14,
-  height: 14,
+var triggerChevronSx = (theme, open) => ({
+  width: rem(theme, 14),
+  height: rem(theme, 14),
   flex: "0 0 auto",
   opacity: 0.55,
   transition: "transform .15s",
   transform: open ? "rotate(180deg)" : "none"
 });
 var panelSx = (theme) => ({
-  width: METRICS.panelWidth,
+  width: rem(theme, METRICS.panelWidthPx),
   maxWidth: "100%",
   background: theme.palette.background.paper,
   border: `1px solid ${theme.palette.divider}`,
-  borderRadius: `${METRICS.panelRadius}px`,
-  boxShadow: `0 1px 2px ${alpha(uiInk(theme).panelShadowInk, 0.05)}, 0 18px 40px -12px ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,
+  borderRadius: rem(theme, METRICS.panelRadiusPx),
+  boxShadow: `${rems(theme, 0, 1, 2)} ${alpha(uiInk(theme).panelShadowInk, 0.05)}, ${rems(theme, 0, 18, 40, -12)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,
   display: "flex",
   flexDirection: "column",
   overflow: "hidden"
@@ -116,28 +117,28 @@ var panelSx = (theme) => ({
 var sheetSx = (theme) => ({
   width: "100%",
   maxWidth: "none",
-  borderRadius: "18px 18px 0 0",
+  borderRadius: rems(theme, 18, 18, 0, 0),
   borderBottom: 0,
   position: "relative",
-  paddingTop: "4px",
+  paddingTop: rem(theme, 4),
   "&::before": {
     content: '""',
     position: "absolute",
-    top: 7,
+    top: rem(theme, 7),
     left: "50%",
     transform: "translateX(-50%)",
-    width: 36,
-    height: 4,
-    borderRadius: "2px",
+    width: rem(theme, 36),
+    height: rem(theme, 4),
+    borderRadius: rem(theme, 2),
     background: theme.palette.divider
   }
 });
 var panelHeadSx = (theme, sheet) => ({
-  padding: sheet ? "18px 10px 8px" : "10px 10px 8px",
+  padding: sheet ? rems(theme, 18, 10, 8) : rems(theme, 10, 10, 8),
   borderBottom: `1px solid ${theme.palette.divider}`
 });
 var pinnedSx = (theme) => ({
-  padding: "9px 10px",
+  padding: rems(theme, 9, 10),
   borderBottom: `1px solid ${theme.palette.divider}`,
   background: alpha(theme.palette.primary.main, 0.03)
 });
@@ -148,36 +149,36 @@ var pinnedLabelSx = (theme) => ({
   letterSpacing: ".08em",
   textTransform: "uppercase",
   color: theme.palette.text.secondary,
-  marginBottom: "7px"
+  marginBottom: rem(theme, 7)
 });
-var chipWrapSx = {
+var chipWrapSx = (theme) => ({
   display: "flex",
   flexWrap: "wrap",
-  gap: "5px",
-  maxHeight: 74,
+  gap: rem(theme, 5),
+  maxHeight: rem(theme, 74),
   overflow: "auto"
-};
+});
 var chipSx = (theme) => {
   const brand = accent(theme);
   return {
     display: "inline-flex",
     alignItems: "center",
-    gap: "5px",
+    gap: rem(theme, 5),
     fontSize: rem(theme, 12),
     background: brand.soft,
     color: brand.ink,
     border: `1px solid ${brand.edge}`,
-    borderRadius: "7px",
-    padding: "3px 4px 3px 8px",
+    borderRadius: rem(theme, 7),
+    padding: rems(theme, 3, 4, 3, 8),
     "& button": {
       border: 0,
       background: "transparent",
       color: "inherit",
       cursor: "pointer",
       padding: 0,
-      width: 16,
-      height: 16,
-      borderRadius: "4px",
+      width: rem(theme, 16),
+      height: rem(theme, 16),
+      borderRadius: rem(theme, 4),
       display: "grid",
       placeItems: "center",
       opacity: 0.65,
@@ -187,20 +188,20 @@ var chipSx = (theme) => {
     }
   };
 };
-var listSx = (sheet) => ({
+var listSx = (theme, sheet) => ({
   overflow: "auto",
-  maxHeight: sheet ? METRICS.sheetListMaxHeight : METRICS.listMaxHeight,
-  padding: "6px 6px 8px",
-  scrollPadding: "8px 0",
+  maxHeight: rem(theme, sheet ? METRICS.sheetListMaxHeightPx : METRICS.listMaxHeightPx),
+  padding: rems(theme, 6, 6, 8),
+  scrollPadding: rems(theme, 8, 0),
   overscrollBehavior: "contain"
 });
 var rowSx = (theme, active, sheet) => ({
   display: "flex",
   alignItems: "center",
-  gap: "8px",
-  padding: "0 8px",
-  height: sheet ? METRICS.sheetRowHeight : METRICS.rowHeight,
-  borderRadius: `${METRICS.rowRadius}px`,
+  gap: rem(theme, 8),
+  padding: rems(theme, 0, 8),
+  height: rem(theme, sheet ? METRICS.sheetRowHeightPx : METRICS.rowHeightPx),
+  borderRadius: rem(theme, METRICS.rowRadiusPx),
   cursor: "pointer",
   userSelect: "none",
   position: "relative",
@@ -209,13 +210,13 @@ var rowSx = (theme, active, sheet) => ({
   textAlign: "left",
   font: "inherit",
   background: active ? alpha(theme.palette.primary.main, 0.08) : "transparent",
-  boxShadow: active ? `inset 0 0 0 1px ${alpha(theme.palette.primary.main, 0.3)}` : "none",
+  boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : "none",
   "&:hover": {
     background: active ? alpha(theme.palette.primary.main, 0.08) : theme.palette.action.hover
   },
-  "&:focus-visible": { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: 1 }
+  "&:focus-visible": { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) }
 });
-var rowIndent = (depth) => depth === 0 ? {} : { paddingLeft: `${depth * METRICS.rowIndentStep}px` };
+var rowIndent = (theme, depth) => depth === 0 ? {} : { paddingLeft: rem(theme, depth * METRICS.rowIndentStepPx) };
 var rowNameSx = (theme, isCategory) => ({
   flex: 1,
   minWidth: 0,
@@ -235,49 +236,49 @@ var rowMetaSx = (theme, selected) => ({
 var markSx = (theme) => ({
   background: uiInk(theme).highlightMark,
   color: "inherit",
-  borderRadius: "2px",
-  padding: "0 1px"
+  borderRadius: rem(theme, 2),
+  padding: rems(theme, 0, 1)
 });
 var chevronButtonSx = (theme, open) => ({
-  width: METRICS.chevronButton,
-  height: METRICS.chevronButton,
+  width: rem(theme, METRICS.chevronButtonPx),
+  height: rem(theme, METRICS.chevronButtonPx),
   flex: "0 0 auto",
   border: 0,
   background: "transparent",
-  borderRadius: "6px",
+  borderRadius: rem(theme, 6),
   display: "grid",
   placeItems: "center",
   cursor: "pointer",
   color: theme.palette.text.secondary,
   padding: 0,
   "&:hover": { background: theme.palette.action.hover, color: theme.palette.text.primary },
-  "& svg": { width: 12, height: 12, transition: "transform .15s", transform: open ? "rotate(90deg)" : "none" }
+  "& svg": { width: rem(theme, 12), height: rem(theme, 12), transition: "transform .15s", transform: open ? "rotate(90deg)" : "none" }
 });
 var checkboxSx = (theme, state) => ({
-  width: METRICS.boxSize,
-  height: METRICS.boxSize,
+  width: rem(theme, METRICS.boxSizePx),
+  height: rem(theme, METRICS.boxSizePx),
   flex: "0 0 auto",
-  border: `1.5px solid ${state === "off" ? theme.palette.divider : theme.palette.primary.main}`,
-  borderRadius: "5px",
+  border: `${rem(theme, 1.5)} solid ${state === "off" ? theme.palette.divider : theme.palette.primary.main}`,
+  borderRadius: rem(theme, 5),
   background: state === "off" ? theme.palette.background.paper : theme.palette.primary.main,
   display: "grid",
   placeItems: "center",
   transition: "background .1s, border-color .1s",
-  "& svg": { width: 12, height: 12, color: theme.palette.primary.contrastText }
+  "& svg": { width: rem(theme, 12), height: rem(theme, 12), color: theme.palette.primary.contrastText }
 });
 var checkboxBarSx = (theme) => ({
-  width: 9,
-  height: 2,
+  width: rem(theme, 9),
+  height: rem(theme, 2),
   background: theme.palette.primary.contrastText,
-  borderRadius: "1px"
+  borderRadius: rem(theme, 1)
 });
 var radioSx = (theme, on) => ({
-  width: METRICS.boxSize,
-  height: METRICS.boxSize,
+  width: rem(theme, METRICS.boxSizePx),
+  height: rem(theme, METRICS.boxSizePx),
   flex: "0 0 auto",
   borderRadius: "50%",
   background: theme.palette.background.paper,
-  border: on ? `5.5px solid ${theme.palette.primary.main}` : `1.5px solid ${theme.palette.divider}`,
+  border: on ? `${rem(theme, 5.5)} solid ${theme.palette.primary.main}` : `${rem(theme, 1.5)} solid ${theme.palette.divider}`,
   boxSizing: "border-box"
 });
 var sectionHeadSx = (theme) => ({
@@ -287,34 +288,34 @@ var sectionHeadSx = (theme) => ({
   letterSpacing: ".08em",
   textTransform: "uppercase",
   color: theme.palette.text.secondary,
-  padding: "9px 8px 6px"
+  padding: rems(theme, 9, 8, 6)
 });
 var footerSx = (theme) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  gap: "8px",
-  padding: "9px 10px",
+  gap: rem(theme, 8),
+  padding: rems(theme, 9, 10),
   borderTop: `1px solid ${theme.palette.divider}`,
   background: theme.palette.action.hover
 });
 var emptySx = (theme) => ({
-  padding: "26px 18px",
+  padding: rems(theme, 26, 18),
   textAlign: "center",
   color: theme.palette.text.secondary,
   "& strong": {
     display: "block",
     color: theme.palette.text.primary,
     fontSize: rem(theme, 13.5),
-    marginBottom: "4px"
+    marginBottom: rem(theme, 4)
   },
-  "& p": { margin: "0 0 12px", fontSize: rem(theme, 12.5), lineHeight: 1.5 }
+  "& p": { margin: rems(theme, 0, 0, 12), fontSize: rem(theme, 12.5), lineHeight: 1.5 }
+});
+var skeletonSx = (theme) => ({
+  height: rem(theme, METRICS.rowHeightPx),
+  margin: rems(theme, 4, 6),
+  borderRadius: rem(theme, METRICS.rowRadiusPx)
 });
-var skeletonSx = {
-  height: METRICS.rowHeight,
-  margin: "4px 6px",
-  borderRadius: `${METRICS.rowRadius}px`
-};
 
 export {
   METRICS,
@@ -344,4 +345,4 @@ export {
   emptySx,
   skeletonSx
 };
-//# sourceMappingURL=chunk-BXAL7OIS.js.map
+//# sourceMappingURL=chunk-JC22FNFA.js.map

package/dist/chunk-JC22FNFA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategorySelect.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, uiInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n/**\n * The prototype's METRICS, verbatim, in the design's px.\n *\n * Every number here is lifted from the approved design and is intentionally\n * not derived from `theme.spacing`: the design is specified on a half-pixel\n * type scale (13.5px rows, 1.5px checkbox borders) that an 8px spacing grid\n * cannot express without rounding the look away. Each is drawn through\n * `rem()` (the theme's type scale) where it is read, so it follows a density\n * mode exactly — `sheetBreakpoint` excepted, which is a media-query width.\n *\n * The trigger's CORNER and HEIGHT are the other exception: it is a field, so it\n * takes the theme's field radius and field height (`tokens/field-radius`,\n * `tokens/field-height`) and lines up with the inputs and filter pills beside it.\n *\n * COLOURS are the deliberate exception — they come from the theme, because a\n * tenant can white-label the palette (a hard-coded indigo would survive the\n * rebrand and the rest of the screen would not) and because the library ships a\n * dark mode. On the default light indigo theme the tokens below resolve to the\n * prototype's own values.\n */\nexport const METRICS = {\n  panelWidthPx: 340,\n  panelRadiusPx: 14,\n  listMaxHeightPx: 290,\n  sheetListMaxHeightPx: 340,\n  rowHeightPx: 36,\n  sheetRowHeightPx: 42,\n  rowRadiusPx: 8,\n  boxSizePx: 18,\n  chevronButtonPx: 22,\n  /** Extra left padding per level of nesting. */\n  rowIndentStepPx: 14,\n  footerButtonPx: 32,\n  sheetFooterButtonPx: 38,\n  /** Below this width the panel becomes a bottom sheet. */\n  sheetBreakpoint: 480,\n} as const;\n\n/** Accent family, derived so a white-labelled palette carries through. */\nconst accent = (theme: Theme) => ({\n  main: theme.palette.primary.main,\n  ink: theme.palette.primary.dark,\n  soft: alpha(theme.palette.primary.main, 0.08),\n  edge: alpha(theme.palette.primary.main, 0.28),\n  ring: alpha(theme.palette.primary.main, 0.15),\n});\n\n/** The closed control. `selected` swaps it to the accent-tinted \"has filter\" skin. */\nexport const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSObject => {\n  const brand = accent(theme);\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: rem(theme, 8),\n    height: fieldHeight(theme),\n    padding: rems(theme, 0, 10, 0, 12),\n    borderRadius: fieldRadiusPx(theme),\n    border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,\n    background: selected ? brand.soft : theme.palette.background.paper,\n    color: selected ? brand.ink : theme.palette.text.primary,\n    font: 'inherit',\n    fontSize: rem(theme, 13),\n    cursor: 'pointer',\n    maxWidth: '100%',\n    transition: 'border-color .12s, box-shadow .12s',\n    boxShadow: open ? `0 0 0 ${rem(theme, 3)} ${brand.ring}` : 'none',\n    '&:hover': { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },\n    '&:focus-visible': {\n      outline: 'none',\n      borderColor: brand.main,\n      boxShadow: `0 0 0 ${rem(theme, 3)} ${alpha(brand.main, 0.18)}`,\n    },\n    '&:disabled': { opacity: 0.5, cursor: 'default' },\n  };\n};\n\n/** The count pill inside the trigger. */\nexport const triggerCountSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 11),\n  lineHeight: 1,\n  background: theme.palette.primary.main,\n  color: theme.palette.primary.contrastText,\n  borderRadius: rem(theme, 999),\n  padding: rems(theme, 3, 6),\n  minWidth: rem(theme, 18),\n  textAlign: 'center',\n});\n\n/** The trigger's inline clear (×) and the chevron. */\nexport const triggerClearSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, 20),\n  height: rem(theme, 20),\n  flex: '0 0 auto',\n  border: 0,\n  background: 'transparent',\n  borderRadius: rem(theme, 5),\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  color: 'inherit',\n  opacity: 0.6,\n  padding: 0,\n  '&:hover': { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 },\n});\n\nexport const triggerChevronSx = (theme: Theme, open: boolean): CSSObject => ({\n  width: rem(theme, 14),\n  height: rem(theme, 14),\n  flex: '0 0 auto',\n  opacity: 0.55,\n  transition: 'transform .15s',\n  transform: open ? 'rotate(180deg)' : 'none',\n});\n\n/** The floating panel. */\nexport const panelSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, METRICS.panelWidthPx),\n  maxWidth: '100%',\n  background: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: rem(theme, METRICS.panelRadiusPx),\n  boxShadow: `${rems(theme, 0, 1, 2)} ${alpha(uiInk(theme).panelShadowInk, 0.05)}, ${rems(theme, 0, 18, 40, -12)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n});\n\n/** Bottom-sheet skin, applied under {@link METRICS.sheetBreakpoint}. */\nexport const sheetSx = (theme: Theme): CSSObject => ({\n  width: '100%',\n  maxWidth: 'none',\n  borderRadius: rems(theme, 18, 18, 0, 0),\n  borderBottom: 0,\n  position: 'relative',\n  paddingTop: rem(theme, 4),\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: rem(theme, 7),\n    left: '50%',\n    transform: 'translateX(-50%)',\n    width: rem(theme, 36),\n    height: rem(theme, 4),\n    borderRadius: rem(theme, 2),\n    background: theme.palette.divider,\n  },\n});\n\nexport const panelHeadSx = (theme: Theme, sheet: boolean): CSSObject => ({\n  padding: sheet ? rems(theme, 18, 10, 8) : rems(theme, 10, 10, 8),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n});\n\nexport const pinnedSx = (theme: Theme): CSSObject => ({\n  padding: rems(theme, 9, 10),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  background: alpha(theme.palette.primary.main, 0.03),\n});\n\nexport const pinnedLabelSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 10),\n  lineHeight: 1,\n  letterSpacing: '.08em',\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  marginBottom: rem(theme, 7),\n});\n\nexport const chipWrapSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: rem(theme, 5),\n  maxHeight: rem(theme, 74),\n  overflow: 'auto',\n});\n\n/** A selected-category chip, in the pinned tray and the applied bar alike. */\nexport const chipSx = (theme: Theme): CSSObject => {\n  const brand = accent(theme);\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: rem(theme, 5),\n    fontSize: rem(theme, 12),\n    background: brand.soft,\n    color: brand.ink,\n    border: `1px solid ${brand.edge}`,\n    borderRadius: rem(theme, 7),\n    padding: rems(theme, 3, 4, 3, 8),\n    '& button': {\n      border: 0,\n      background: 'transparent',\n      color: 'inherit',\n      cursor: 'pointer',\n      padding: 0,\n      width: rem(theme, 16),\n      height: rem(theme, 16),\n      borderRadius: rem(theme, 4),\n      display: 'grid',\n      placeItems: 'center',\n      opacity: 0.65,\n      fontSize: rem(theme, 13),\n      lineHeight: 1,\n      '&:hover': { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 },\n    },\n  };\n};\n\nexport const listSx = (theme: Theme, sheet: boolean): CSSObject => ({\n  overflow: 'auto',\n  maxHeight: rem(theme, sheet ? METRICS.sheetListMaxHeightPx : METRICS.listMaxHeightPx),\n  padding: rems(theme, 6, 6, 8),\n  scrollPadding: rems(theme, 8, 0),\n  overscrollBehavior: 'contain',\n});\n\n/** A row. `active` is the KEYBOARD cursor — deliberately distinct from hover. */\nexport const rowSx = (theme: Theme, active: boolean, sheet: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: rem(theme, 8),\n  padding: rems(theme, 0, 8),\n  height: rem(theme, sheet ? METRICS.sheetRowHeightPx : METRICS.rowHeightPx),\n  borderRadius: rem(theme, METRICS.rowRadiusPx),\n  cursor: 'pointer',\n  userSelect: 'none',\n  position: 'relative',\n  width: '100%',\n  border: 0,\n  textAlign: 'left',\n  font: 'inherit',\n  background: active ? alpha(theme.palette.primary.main, 0.08) : 'transparent',\n  boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : 'none',\n  '&:hover': {\n    background: active\n      ? alpha(theme.palette.primary.main, 0.08)\n      : theme.palette.action.hover,\n  },\n  '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) },\n});\n\n/**\n * How far a row sits in from the panel edge, by depth.\n *\n * One step per level, on top of {@link rowSx}'s own 8px gutter — depth 0 keeps\n * that gutter, and every level below it adds `METRICS.rowIndentStepPx`. Read\n * through the type scale like the rest of this file: the step is the design's\n * own 14px, not a spacing multiple that would round it.\n */\nexport const rowIndent = (theme: Theme, depth: number): CSSObject =>\n  depth === 0 ? {} : { paddingLeft: rem(theme, depth * METRICS.rowIndentStepPx) };\n\nexport const rowNameSx = (theme: Theme, isCategory: boolean): CSSObject => ({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  fontSize: rem(theme, 13.5),\n  fontWeight: isCategory ? 600 : 450,\n  color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary,\n});\n\nexport const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({\n  font: `500 ${rem(theme, 11)}/1 ui-monospace, SFMono-Regular, Menlo, monospace`,\n  color: selected ? theme.palette.primary.main : theme.palette.text.secondary,\n  fontWeight: selected ? 600 : 500,\n  flex: '0 0 auto',\n});\n\n/** The query hit inside a row label. */\nexport const markSx = (theme: Theme): CSSObject => ({\n  background: uiInk(theme).highlightMark,\n  color: 'inherit',\n  borderRadius: rem(theme, 2),\n  padding: rems(theme, 0, 1),\n});\n\nexport const chevronButtonSx = (theme: Theme, open: boolean): CSSObject => ({\n  width: rem(theme, METRICS.chevronButtonPx),\n  height: rem(theme, METRICS.chevronButtonPx),\n  flex: '0 0 auto',\n  border: 0,\n  background: 'transparent',\n  borderRadius: rem(theme, 6),\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  color: theme.palette.text.secondary,\n  padding: 0,\n  '&:hover': { background: theme.palette.action.hover, color: theme.palette.text.primary },\n  '& svg': { width: rem(theme, 12), height: rem(theme, 12), transition: 'transform .15s', transform: open ? 'rotate(90deg)' : 'none' },\n});\n\n/** The tri-state checkbox: unchecked, checked, or the partial bar. */\nexport const checkboxSx = (theme: Theme, state: 'off' | 'partial' | 'on'): CSSObject => ({\n  width: rem(theme, METRICS.boxSizePx),\n  height: rem(theme, METRICS.boxSizePx),\n  flex: '0 0 auto',\n  border: `${rem(theme, 1.5)} solid ${state === 'off' ? theme.palette.divider : theme.palette.primary.main}`,\n  borderRadius: rem(theme, 5),\n  background: state === 'off' ? theme.palette.background.paper : theme.palette.primary.main,\n  display: 'grid',\n  placeItems: 'center',\n  transition: 'background .1s, border-color .1s',\n  '& svg': { width: rem(theme, 12), height: rem(theme, 12), color: theme.palette.primary.contrastText },\n});\n\n/** The partial bar drawn inside a half-selected checkbox. */\nexport const checkboxBarSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, 9),\n  height: rem(theme, 2),\n  background: theme.palette.primary.contrastText,\n  borderRadius: rem(theme, 1),\n});\n\nexport const radioSx = (theme: Theme, on: boolean): CSSObject => ({\n  width: rem(theme, METRICS.boxSizePx),\n  height: rem(theme, METRICS.boxSizePx),\n  flex: '0 0 auto',\n  borderRadius: '50%',\n  background: theme.palette.background.paper,\n  border: on\n    ? `${rem(theme, 5.5)} solid ${theme.palette.primary.main}`\n    : `${rem(theme, 1.5)} solid ${theme.palette.divider}`,\n  boxSizing: 'border-box',\n});\n\nexport const sectionHeadSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 10),\n  lineHeight: 1,\n  letterSpacing: '.08em',\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  padding: rems(theme, 9, 8, 6),\n});\n\nexport const footerSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: rem(theme, 8),\n  padding: rems(theme, 9, 10),\n  borderTop: `1px solid ${theme.palette.divider}`,\n  background: theme.palette.action.hover,\n});\n\nexport const emptySx = (theme: Theme): CSSObject => ({\n  padding: rems(theme, 26, 18),\n  textAlign: 'center',\n  color: theme.palette.text.secondary,\n  '& strong': {\n    display: 'block',\n    color: theme.palette.text.primary,\n    fontSize: rem(theme, 13.5),\n    marginBottom: rem(theme, 4),\n  },\n  '& p': { margin: rems(theme, 0, 0, 12), fontSize: rem(theme, 12.5), lineHeight: 1.5 },\n});\n\n/** Skeleton row used while the catalogue loads. */\nexport const skeletonSx = (theme: Theme): CSSObject => ({\n  height: rem(theme, METRICS.rowHeightPx),\n  margin: rems(theme, 4, 6),\n  borderRadius: rem(theme, METRICS.rowRadiusPx),\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAS,aAAyC;AA4B3C,IAAM,UAAU;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,iBAAiB;AAAA;AAAA,EAEjB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,qBAAqB;AAAA;AAAA,EAErB,iBAAiB;AACnB;AAGA,IAAM,SAAS,CAAC,WAAkB;AAAA,EAChC,MAAM,MAAM,QAAQ,QAAQ;AAAA,EAC5B,KAAK,MAAM,QAAQ,QAAQ;AAAA,EAC3B,MAAM,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI;AAAA,EAC5C,MAAM,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI;AAAA,EAC5C,MAAM,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI;AAC9C;AAGO,IAAM,YAAY,CAAC,OAAc,UAAmB,SAA6B;AACtF,QAAM,QAAQ,OAAO,KAAK;AAC1B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,IAAI,OAAO,CAAC;AAAA,IACjB,QAAQ,YAAY,KAAK;AAAA,IACzB,SAAS,KAAK,OAAO,GAAG,IAAI,GAAG,EAAE;AAAA,IACjC,cAAc,cAAc,KAAK;AAAA,IACjC,QAAQ,aAAa,QAAQ,WAAW,MAAM,OAAO,UAAU,KAAK,CAAC;AAAA,IACrE,YAAY,WAAW,MAAM,OAAO,MAAM,QAAQ,WAAW;AAAA,IAC7D,OAAO,WAAW,MAAM,MAAM,MAAM,QAAQ,KAAK;AAAA,IACjD,MAAM;AAAA,IACN,UAAU,IAAI,OAAO,EAAE;AAAA,IACvB,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW,OAAO,SAAS,IAAI,OAAO,CAAC,CAAC,IAAI,MAAM,IAAI,KAAK;AAAA,IAC3D,WAAW,EAAE,aAAa,QAAQ,WAAW,MAAM,OAAO,MAAM,QAAQ,KAAK,SAAS;AAAA,IACtF,mBAAmB;AAAA,MACjB,SAAS;AAAA,MACT,aAAa,MAAM;AAAA,MACnB,WAAW,SAAS,IAAI,OAAO,CAAC,CAAC,IAAI,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IAC9D;AAAA,IACA,cAAc,EAAE,SAAS,KAAK,QAAQ,UAAU;AAAA,EAClD;AACF;AAGO,IAAM,iBAAiB,CAAC,WAA6B;AAAA,EAC1D,YAAY;AAAA,EACZ,UAAU,IAAI,OAAO,EAAE;AAAA,EACvB,YAAY;AAAA,EACZ,YAAY,MAAM,QAAQ,QAAQ;AAAA,EAClC,OAAO,MAAM,QAAQ,QAAQ;AAAA,EAC7B,cAAc,IAAI,OAAO,GAAG;AAAA,EAC5B,SAAS,KAAK,OAAO,GAAG,CAAC;AAAA,EACzB,UAAU,IAAI,OAAO,EAAE;AAAA,EACvB,WAAW;AACb;AAGO,IAAM,iBAAiB,CAAC,WAA6B;AAAA,EAC1D,OAAO,IAAI,OAAO,EAAE;AAAA,EACpB,QAAQ,IAAI,OAAO,EAAE;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,cAAc,IAAI,OAAO,CAAC;AAAA,EAC1B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW,EAAE,YAAY,MAAM,YAAY,KAAK,EAAE,OAAO,IAAI,GAAG,SAAS,EAAE;AAC7E;AAEO,IAAM,mBAAmB,CAAC,OAAc,UAA8B;AAAA,EAC3E,OAAO,IAAI,OAAO,EAAE;AAAA,EACpB,QAAQ,IAAI,OAAO,EAAE;AAAA,EACrB,MAAM;AAAA,EACN,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW,OAAO,mBAAmB;AACvC;AAGO,IAAM,UAAU,CAAC,WAA6B;AAAA,EACnD,OAAO,IAAI,OAAO,QAAQ,YAAY;AAAA,EACtC,UAAU;AAAA,EACV,YAAY,MAAM,QAAQ,WAAW;AAAA,EACrC,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,EAC1C,cAAc,IAAI,OAAO,QAAQ,aAAa;AAAA,EAC9C,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,CAAC,CAAC,IAAI,MAAM,MAAM,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,IAAI,IAAI,GAAG,CAAC,IAAI,MAAM,MAAM,KAAK,EAAE,gBAAgB,IAAI,CAAC;AAAA,EAC1J,SAAS;AAAA,EACT,eAAe;AAAA,EACf,UAAU;AACZ;AAGO,IAAM,UAAU,CAAC,WAA6B;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc,KAAK,OAAO,IAAI,IAAI,GAAG,CAAC;AAAA,EACtC,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY,IAAI,OAAO,CAAC;AAAA,EACxB,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK,IAAI,OAAO,CAAC;AAAA,IACjB,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO,IAAI,OAAO,EAAE;AAAA,IACpB,QAAQ,IAAI,OAAO,CAAC;AAAA,IACpB,cAAc,IAAI,OAAO,CAAC;AAAA,IAC1B,YAAY,MAAM,QAAQ;AAAA,EAC5B;AACF;AAEO,IAAM,cAAc,CAAC,OAAc,WAA+B;AAAA,EACvE,SAAS,QAAQ,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC;AAAA,EAC/D,cAAc,aAAa,MAAM,QAAQ,OAAO;AAClD;AAEO,IAAM,WAAW,CAAC,WAA6B;AAAA,EACpD,SAAS,KAAK,OAAO,GAAG,EAAE;AAAA,EAC1B,cAAc,aAAa,MAAM,QAAQ,OAAO;AAAA,EAChD,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI;AACpD;AAEO,IAAM,gBAAgB,CAAC,WAA6B;AAAA,EACzD,YAAY;AAAA,EACZ,UAAU,IAAI,OAAO,EAAE;AAAA,EACvB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,cAAc,IAAI,OAAO,CAAC;AAC5B;AAEO,IAAM,aAAa,CAAC,WAA6B;AAAA,EACtD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK,IAAI,OAAO,CAAC;AAAA,EACjB,WAAW,IAAI,OAAO,EAAE;AAAA,EACxB,UAAU;AACZ;AAGO,IAAM,SAAS,CAAC,UAA4B;AACjD,QAAM,QAAQ,OAAO,KAAK;AAC1B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,IAAI,OAAO,CAAC;AAAA,IACjB,UAAU,IAAI,OAAO,EAAE;AAAA,IACvB,YAAY,MAAM;AAAA,IAClB,OAAO,MAAM;AAAA,IACb,QAAQ,aAAa,MAAM,IAAI;AAAA,IAC/B,cAAc,IAAI,OAAO,CAAC;AAAA,IAC1B,SAAS,KAAK,OAAO,GAAG,GAAG,GAAG,CAAC;AAAA,IAC/B,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO,IAAI,OAAO,EAAE;AAAA,MACpB,QAAQ,IAAI,OAAO,EAAE;AAAA,MACrB,cAAc,IAAI,OAAO,CAAC;AAAA,MAC1B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,UAAU,IAAI,OAAO,EAAE;AAAA,MACvB,YAAY;AAAA,MACZ,WAAW,EAAE,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,GAAG,SAAS,EAAE;AAAA,IAC/E;AAAA,EACF;AACF;AAEO,IAAM,SAAS,CAAC,OAAc,WAA+B;AAAA,EAClE,UAAU;AAAA,EACV,WAAW,IAAI,OAAO,QAAQ,QAAQ,uBAAuB,QAAQ,eAAe;AAAA,EACpF,SAAS,KAAK,OAAO,GAAG,GAAG,CAAC;AAAA,EAC5B,eAAe,KAAK,OAAO,GAAG,CAAC;AAAA,EAC/B,oBAAoB;AACtB;AAGO,IAAM,QAAQ,CAAC,OAAc,QAAiB,WAA+B;AAAA,EAClF,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,IAAI,OAAO,CAAC;AAAA,EACjB,SAAS,KAAK,OAAO,GAAG,CAAC;AAAA,EACzB,QAAQ,IAAI,OAAO,QAAQ,QAAQ,mBAAmB,QAAQ,WAAW;AAAA,EACzE,cAAc,IAAI,OAAO,QAAQ,WAAW;AAAA,EAC5C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY,SAAS,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,IAAI;AAAA,EAC/D,WAAW,SAAS,eAAe,IAAI,OAAO,CAAC,CAAC,IAAI,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC,KAAK;AAAA,EAC/F,WAAW;AAAA,IACT,YAAY,SACR,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,IACtC,MAAM,QAAQ,OAAO;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI,IAAI,eAAe,IAAI,OAAO,CAAC,EAAE;AACrH;AAUO,IAAM,YAAY,CAAC,OAAc,UACtC,UAAU,IAAI,CAAC,IAAI,EAAE,aAAa,IAAI,OAAO,QAAQ,QAAQ,eAAe,EAAE;AAEzE,IAAM,YAAY,CAAC,OAAc,gBAAoC;AAAA,EAC1E,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU,IAAI,OAAO,IAAI;AAAA,EACzB,YAAY,aAAa,MAAM;AAAA,EAC/B,OAAO,aAAa,MAAM,QAAQ,KAAK,UAAU,MAAM,QAAQ,KAAK;AACtE;AAEO,IAAM,YAAY,CAAC,OAAc,cAAkC;AAAA,EACxE,MAAM,OAAO,IAAI,OAAO,EAAE,CAAC;AAAA,EAC3B,OAAO,WAAW,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,KAAK;AAAA,EAClE,YAAY,WAAW,MAAM;AAAA,EAC7B,MAAM;AACR;AAGO,IAAM,SAAS,CAAC,WAA6B;AAAA,EAClD,YAAY,MAAM,KAAK,EAAE;AAAA,EACzB,OAAO;AAAA,EACP,cAAc,IAAI,OAAO,CAAC;AAAA,EAC1B,SAAS,KAAK,OAAO,GAAG,CAAC;AAC3B;AAEO,IAAM,kBAAkB,CAAC,OAAc,UAA8B;AAAA,EAC1E,OAAO,IAAI,OAAO,QAAQ,eAAe;AAAA,EACzC,QAAQ,IAAI,OAAO,QAAQ,eAAe;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,cAAc,IAAI,OAAO,CAAC;AAAA,EAC1B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,SAAS;AAAA,EACT,WAAW,EAAE,YAAY,MAAM,QAAQ,OAAO,OAAO,OAAO,MAAM,QAAQ,KAAK,QAAQ;AAAA,EACvF,SAAS,EAAE,OAAO,IAAI,OAAO,EAAE,GAAG,QAAQ,IAAI,OAAO,EAAE,GAAG,YAAY,kBAAkB,WAAW,OAAO,kBAAkB,OAAO;AACrI;AAGO,IAAM,aAAa,CAAC,OAAc,WAAgD;AAAA,EACvF,OAAO,IAAI,OAAO,QAAQ,SAAS;AAAA,EACnC,QAAQ,IAAI,OAAO,QAAQ,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ,GAAG,IAAI,OAAO,GAAG,CAAC,UAAU,UAAU,QAAQ,MAAM,QAAQ,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACxG,cAAc,IAAI,OAAO,CAAC;AAAA,EAC1B,YAAY,UAAU,QAAQ,MAAM,QAAQ,WAAW,QAAQ,MAAM,QAAQ,QAAQ;AAAA,EACrF,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS,EAAE,OAAO,IAAI,OAAO,EAAE,GAAG,QAAQ,IAAI,OAAO,EAAE,GAAG,OAAO,MAAM,QAAQ,QAAQ,aAAa;AACtG;AAGO,IAAM,gBAAgB,CAAC,WAA6B;AAAA,EACzD,OAAO,IAAI,OAAO,CAAC;AAAA,EACnB,QAAQ,IAAI,OAAO,CAAC;AAAA,EACpB,YAAY,MAAM,QAAQ,QAAQ;AAAA,EAClC,cAAc,IAAI,OAAO,CAAC;AAC5B;AAEO,IAAM,UAAU,CAAC,OAAc,QAA4B;AAAA,EAChE,OAAO,IAAI,OAAO,QAAQ,SAAS;AAAA,EACnC,QAAQ,IAAI,OAAO,QAAQ,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,cAAc;AAAA,EACd,YAAY,MAAM,QAAQ,WAAW;AAAA,EACrC,QAAQ,KACJ,GAAG,IAAI,OAAO,GAAG,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI,KACtD,GAAG,IAAI,OAAO,GAAG,CAAC,UAAU,MAAM,QAAQ,OAAO;AAAA,EACrD,WAAW;AACb;AAEO,IAAM,gBAAgB,CAAC,WAA6B;AAAA,EACzD,YAAY;AAAA,EACZ,UAAU,IAAI,OAAO,EAAE;AAAA,EACvB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,SAAS,KAAK,OAAO,GAAG,GAAG,CAAC;AAC9B;AAEO,IAAM,WAAW,CAAC,WAA6B;AAAA,EACpD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK,IAAI,OAAO,CAAC;AAAA,EACjB,SAAS,KAAK,OAAO,GAAG,EAAE;AAAA,EAC1B,WAAW,aAAa,MAAM,QAAQ,OAAO;AAAA,EAC7C,YAAY,MAAM,QAAQ,OAAO;AACnC;AAEO,IAAM,UAAU,CAAC,WAA6B;AAAA,EACnD,SAAS,KAAK,OAAO,IAAI,EAAE;AAAA,EAC3B,WAAW;AAAA,EACX,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,YAAY;AAAA,IACV,SAAS;AAAA,IACT,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,UAAU,IAAI,OAAO,IAAI;AAAA,IACzB,cAAc,IAAI,OAAO,CAAC;AAAA,EAC5B;AAAA,EACA,OAAO,EAAE,QAAQ,KAAK,OAAO,GAAG,GAAG,EAAE,GAAG,UAAU,IAAI,OAAO,IAAI,GAAG,YAAY,IAAI;AACtF;AAGO,IAAM,aAAa,CAAC,WAA6B;AAAA,EACtD,QAAQ,IAAI,OAAO,QAAQ,WAAW;AAAA,EACtC,QAAQ,KAAK,OAAO,GAAG,CAAC;AAAA,EACxB,cAAc,IAAI,OAAO,QAAQ,WAAW;AAC9C;","names":[]}

package/dist/{chunk-AJ5SDHX5.js → chunk-JCL7WK4G.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-HXEBKOSM.js";
+} from "./chunk-J5UZB6Y6.js";
 import {
   DayBoundInput
 } from "./chunk-GY4NBSCN.js";
@@ -291,4 +291,4 @@ export {
   RangePill,
   PanelRangeField
 };
-//# sourceMappingURL=chunk-AJ5SDHX5.js.map
+//# sourceMappingURL=chunk-JCL7WK4G.js.map

package/dist/{chunk-ZMC3N23A.js → chunk-JSD5TFDK.js}

@@ -1,18 +1,18 @@
 import {
   TextField
-} from "./chunk-TU3EGIKB.js";
+} from "./chunk-SSS64KYB.js";
 import {
   SelectField
-} from "./chunk-EXZSHZRS.js";
+} from "./chunk-PWZHCBG3.js";
 import {
   CepField
-} from "./chunk-IWOVENC3.js";
+} from "./chunk-2XX45PC5.js";
 import {
   CategoryField
-} from "./chunk-NE6XUN5Z.js";
+} from "./chunk-JU4MSYYH.js";
 import {
   ToggleField
-} from "./chunk-GXCOXJS3.js";
+} from "./chunk-FNG33MKA.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -30,4 +30,4 @@ __export(Fields_exports, {
 export {
   Fields_exports
 };
-//# sourceMappingURL=chunk-ZMC3N23A.js.map
+//# sourceMappingURL=chunk-JSD5TFDK.js.map

package/dist/{chunk-NE6XUN5Z.js → chunk-JU4MSYYH.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   CategorySelect
-} from "./chunk-ZW5K4XCQ.js";
+} from "./chunk-34BZXJGT.js";
 
 // src/components/form/total-form/Fields/CategoryField.tsx
 import { jsx } from "react/jsx-runtime";
@@ -38,4 +38,4 @@ function CategoryField({
 export {
   CategoryField
 };
-//# sourceMappingURL=chunk-NE6XUN5Z.js.map
+//# sourceMappingURL=chunk-JU4MSYYH.js.map

package/dist/{chunk-5CKDRLRN.js → chunk-JXECOCNA.js}

@@ -1,10 +1,11 @@
 import {
   AppHeaderBrand
-} from "./chunk-MBSYD3ZU.js";
+} from "./chunk-GWFAINQ7.js";
 import {
   accentFor
 } from "./chunk-TCAQOUIB.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -46,8 +47,8 @@ var AppHeaderStatus = ({
             "aria-hidden": true,
             "data-testid": `${dataTestId}-dot`,
             sx: {
-              width: 8,
-              height: 8,
+              width: rem(theme, 8),
+              height: rem(theme, 8),
               flex: "0 0 auto",
               borderRadius: "50%",
               backgroundColor: accentFor(theme, tone).main
@@ -117,7 +118,11 @@ var discloseSx = {
   // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that
   // opened the panel, so the row stays highlighted behind it.
   "@media (hover: hover)": { "&:hover": { backgroundColor: "action.hover" } },
-  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
+  "&:focus-visible": {
+    outline: (theme) => `${rem(theme, 2)} solid`,
+    outlineColor: "primary.main",
+    outlineOffset: sxRem(2)
+  }
 };
 var IdentityText = ({
   title,
@@ -163,20 +168,31 @@ var IdentityText = ({
 var IdentitySkeleton = ({
   size,
   dataTestId
-}) => /* @__PURE__ */ jsxs(
-  Box,
-  {
-    "data-testid": `${dataTestId}-loading`,
-    sx: { display: "flex", alignItems: "center", gap: 1.25, minWidth: 0 },
-    children: [
-      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 40, height: 40, sx: { flex: "0 0 auto" } }),
-      /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 140, height: TITLE_PX[size] * 1.4 }),
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 180, height: 16 })
-      ] })
-    ]
-  }
-);
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${dataTestId}-loading`,
+      sx: { display: "flex", alignItems: "center", gap: 1.25, minWidth: 0 },
+      children: [
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rounded",
+            width: rem(theme, 40),
+            height: rem(theme, 40),
+            sx: { flex: "0 0 auto" }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: rem(theme, 140), height: rem(theme, TITLE_PX[size] * 1.4) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: rem(theme, 180), height: rem(theme, 16) })
+        ] })
+      ]
+    }
+  );
+};
 var rowSx = {
   display: "flex",
   alignItems: "center",
@@ -242,4 +258,4 @@ export {
   AppHeaderStatus,
   AppHeaderIdentity
 };
-//# sourceMappingURL=chunk-5CKDRLRN.js.map
+//# sourceMappingURL=chunk-JXECOCNA.js.map

package/dist/chunk-JXECOCNA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"sourcesContent":["'use client';\n\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Skeleton from '@mui/material/Skeleton/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 React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { accentFor, type SizeValue } from '../../../tokens/scales';\n\nimport { AppHeaderBrand } from './AppHeader.brand';\nimport type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.types';\n\n/** Title type scale, per house size step. */\nconst TITLE_PX: Record<SizeValue, number> = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };\n\n/** One line, ellipsised — a long store name must not push the actions off-screen. */\nconst ONE_LINE = {\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The dotted state line: \"● Aberto agora · Retirada no balcão\".\n *\n * Segments are joined here rather than by the caller because the separator is a\n * presentational choice — a caller that pre-joins its own string can never be\n * restyled, and each segment loses the chance to carry its own markup.\n */\nexport const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({\n  tone,\n  items,\n  separator = '·',\n  className,\n  dataTestId = 'app-header-status',\n}) => {\n  const theme = useTheme();\n  const visible = items.filter((item) => item !== null && item !== undefined && item !== '');\n  if (visible.length === 0) return null;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ...ONE_LINE }}\n    >\n      {tone && (\n        <Box\n          aria-hidden\n          data-testid={`${dataTestId}-dot`}\n          sx={{\n            width: rem(theme, 8),\n            height: rem(theme, 8),\n            flex: '0 0 auto',\n            borderRadius: '50%',\n            backgroundColor: accentFor(theme, tone).main,\n          }}\n        />\n      )}\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {visible.map((item, index) => (\n          // Index keys: the segments are positional presentation, and nothing\n          // here reorders or is keyed on identity elsewhere.\n          <React.Fragment key={index}>\n            {index > 0 && (\n              <>\n                {/* Real spaces, not margin. A screen reader reads `textContent`,\n                    and a CSS-only gap runs \"Aberto agora\" straight into\n                    \"Retirada no balcão\" as one word. The glyph itself is\n                    hidden — it is punctuation, not something to announce. */}\n                {' '}\n                <Box component=\"span\" aria-hidden>\n                  {separator}\n                </Box>{' '}\n              </>\n            )}\n            {item}\n          </React.Fragment>\n        ))}\n      </Typography>\n    </Box>\n  );\n};\n\nAppHeaderStatus.displayName = 'AppHeaderStatus';\n\n/** The name and, when the block opens onto something, the chevron beside it. */\nconst IdentityTitle: React.FC<\n  Pick<AppHeaderIdentityProps, 'title' | 'size'> & {\n    interactive: boolean;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({ title, size = 'md', interactive, disclosed, dataTestId }) => (\n  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0, width: '100%' }}>\n    <Typography\n      component=\"span\"\n      data-testid={`${dataTestId}-title`}\n      sx={{ fontSize: sxRem(TITLE_PX[size]), fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}\n    >\n      {title}\n    </Typography>\n    {interactive && (\n      <KeyboardArrowDown\n        aria-hidden\n        data-testid={`${dataTestId}-chevron`}\n        sx={{\n          flex: '0 0 auto',\n          fontSize: sxRem(20),\n          opacity: 0.7,\n          transition: 'transform 150ms ease',\n          transform: disclosed ? 'rotate(180deg)' : 'none',\n        }}\n      />\n    )}\n  </Box>\n);\n\n/**\n * The disclosure, wrapping the NAME ROW and nothing else (12-63).\n *\n * The padding is cancelled by an equal negative margin, so the hover and the\n * focus ring bleed outward while the title still starts on the same pixel as\n * the lines under it. A padded button with no offset moves one of the two.\n */\nconst discloseSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 0.25,\n  width: '100%',\n  minWidth: 0,\n  appearance: 'none',\n  px: 0.5,\n  mx: -0.5,\n  py: 0.25,\n  my: -0.25,\n  border: 'none',\n  borderRadius: 1.5,\n  background: 'none',\n  color: 'inherit',\n  font: 'inherit',\n  textAlign: 'left',\n  cursor: 'pointer',\n  // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that\n  // opened the panel, so the row stays highlighted behind it.\n  '@media (hover: hover)': { '&:hover': { backgroundColor: 'action.hover' } },\n  '&:focus-visible': {\n    outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n    outlineColor: 'primary.main',\n    outlineOffset: sxRem(2),\n  },\n} as const;\n\n/**\n * The text column: the name row, then the quieter lines under it.\n *\n * ## `subtitle` and `status` are OUTSIDE the disclosure, on purpose (12-63)\n *\n * Both are `ReactNode`, and `AppHeaderStatus.items` is a `ReactNode[]` — so a\n * segment of the state line is free to be a control, and consumers put controls\n * there: a mesa chip, a service-mode picker. While the whole block was one\n * `<button>` those were `<button>`s inside a `<button>`, which is invalid HTML\n * (the content model of `button` excludes interactive content) and, more\n * visibly, means one tap fires two handlers. An adopting storefront opened two\n * popups on every tap of either control because of it, and had already\n * hand-rolled this component at one tier to dodge the nesting — a consumer\n * working around the component is the report.\n *\n * The target stays large. The button is the full-width NAME ROW, which is the\n * thing a reader aims at — what it gives up is the mark beside it, and a mark\n * that opens the panel is not worth a state line that cannot hold a control.\n */\nconst IdentityText: React.FC<\n  Pick<\n    AppHeaderIdentityProps,\n    'title' | 'subtitle' | 'status' | 'size' | 'discloseLabel' | 'className'\n  > & {\n    onDisclose: (() => void) | undefined;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({\n  title,\n  subtitle,\n  status,\n  size = 'md',\n  onDisclose,\n  disclosed,\n  discloseLabel,\n  className,\n  dataTestId,\n}) => {\n  const name = (\n    <IdentityTitle\n      title={title}\n      size={size}\n      interactive={Boolean(onDisclose)}\n      disclosed={disclosed}\n      dataTestId={dataTestId}\n    />\n  );\n  return (\n    <Box sx={{ minWidth: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {onDisclose ? (\n        <Box\n          component=\"button\"\n          type=\"button\"\n          className={className}\n          data-testid={dataTestId}\n          onClick={onDisclose}\n          aria-haspopup=\"dialog\"\n          aria-expanded={disclosed}\n          aria-label={discloseLabel ?? `Detalhes de ${title}`}\n          sx={discloseSx}\n        >\n          {name}\n        </Box>\n      ) : (\n        name\n      )}\n      {subtitle && (\n        <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n          {subtitle}\n        </Typography>\n      )}\n      {status}\n    </Box>\n  );\n};\n\n/** The placeholder held while the identity is still resolving. */\nconst IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({\n  size,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      data-testid={`${dataTestId}-loading`}\n      sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}\n    >\n      <Skeleton\n        variant=\"rounded\"\n        width={rem(theme, 40)}\n        height={rem(theme, 40)}\n        sx={{ flex: '0 0 auto' }}\n      />\n      <Box sx={{ minWidth: 0, flex: 1 }}>\n        <Skeleton variant=\"text\" width={rem(theme, 140)} height={rem(theme, TITLE_PX[size] * 1.4)} />\n        <Skeleton variant=\"text\" width={rem(theme, 180)} height={rem(theme, 16)} />\n      </Box>\n    </Box>\n  );\n};\n\n/**\n * The BLOCK's row: the mark, then the text column beside it.\n *\n * Always a `Box` div now — since 12-63 the disclosure is the name row inside\n * the text column ({@link discloseSx}), not this element. `width: '100%'` and\n * `minWidth: 0` stay because the column below still has to ellipsise against\n * something; the argument about a `<button>` sizing to max-content moved to\n * `discloseSx`, which is where the button now is.\n */\nconst rowSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1.25,\n  width: '100%',\n  minWidth: 0,\n  textAlign: 'left',\n} as const;\n\n/**\n * Mark + title + state line, and — when it can be opened — a name row that is\n * the button.\n *\n * The disclosure used to wrap EVERYTHING, on the argument that the chevron\n * alone is a 20px target next to a 40px mark that does nothing. The target is\n * still not the chevron: the button is the full-width NAME ROW, which is what a\n * reader aims at. What it no longer swallows is the mark beside it and the\n * quieter lines below — because those lines take `ReactNode`s, consumers put\n * CONTROLS in them, and a control inside a button is invalid HTML whose every\n * tap fires two handlers. See {@link IdentityText} (12-63).\n *\n * `className` and `dataTestId` stay on the same elements they always named: the\n * block when it is static, the disclosure when there is one.\n */\nexport const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({\n  title,\n  subtitle,\n  status,\n  mark,\n  logoUrl,\n  seedColor,\n  onDisclose,\n  disclosed = false,\n  discloseLabel,\n  loading = false,\n  size = 'md',\n  className,\n  dataTestId = 'app-header-identity',\n}) => {\n  if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;\n\n  return (\n    <Box\n      className={onDisclose ? undefined : className}\n      data-testid={onDisclose ? undefined : dataTestId}\n      sx={rowSx}\n    >\n      {mark ?? (\n        <AppHeaderBrand\n          name={title}\n          logoUrl={logoUrl}\n          seedColor={seedColor}\n          size={size}\n          dataTestId={`${dataTestId}-brand`}\n        />\n      )}\n      <IdentityText\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        size={size}\n        onDisclose={onDisclose}\n        disclosed={disclosed}\n        discloseLabel={discloseLabel}\n        className={className}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n};\n\nAppHeaderIdentity.displayName = 'AppHeaderIdentity';\n"],"mappings":"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","names":[]}

package/dist/{chunk-WUTHROII.js → chunk-JYWF76Z5.js}

@@ -3,7 +3,11 @@ import {
   regionAttrs,
   transitionSettings,
   triggerStyles
-} from "./chunk-TVL5V2JK.js";
+} from "./chunk-GGMB6LJH.js";
+import {
+  remPx,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/Collapsible/Collapsible.tsx
 import Box from "@mui/material/Box/index.js";
@@ -12,14 +16,15 @@ import { useTheme } from "@mui/material/styles/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var useMeasuredHeight = (open, maxHeight, children) => {
+  const theme = useTheme();
   const contentRef = useRef(null);
   const [height, setHeight] = useState("auto");
   const measureHeight = useCallback(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
-      setHeight(maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight);
+      setHeight(maxHeight ? Math.min(scrollHeight, remPx(theme, maxHeight)) : scrollHeight);
     }
-  }, [maxHeight]);
+  }, [maxHeight, theme]);
   useEffect(() => {
     if (!open) {
       setHeight(0);
@@ -49,7 +54,8 @@ var DefaultCollapsible = ({
     timeout: disabled ? 0 : duration,
     sx: {
       ...dimmedStyles(disabled),
-      ...maxHeight && { maxHeight, overflow: "hidden" },
+      // `sx` reads 1 or less as a fraction of the parent; anything else is design px.
+      ...maxHeight && { maxHeight: maxHeight <= 1 ? `${maxHeight * 100}%` : sxRem(maxHeight), overflow: "hidden" },
       ...sx
     },
     className,
@@ -172,4 +178,4 @@ export {
   CollapsibleTrigger,
   CollapsibleContent
 };
-//# sourceMappingURL=chunk-WUTHROII.js.map
+//# sourceMappingURL=chunk-JYWF76Z5.js.map