@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-FGKKLHKY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/card-surface.ts"],"sourcesContent":["import { alpha, keyframes, type CSSObject, type Theme } from \"@mui/material/styles/index.js\";\n\nimport { fadeInScaleAnimation } from \"../Badge/Badge.animations\";\n\n/**\n * A plain style object, not MUI's `SxProps`.\n *\n * `SxProps` is a union including arrays and functions, so a value typed as one\n * cannot be spread — and these fragments exist precisely to be merged. Note also\n * that `Card` merges by SPREADING (`sx={{ ...defaults, ...sx }}`), so handing it\n * a function yields nothing at all: resolve the theme with `useTheme` first.\n */\ntype CardSx = CSSObject | Record<string, unknown>;\n\n/** The ring, as scale + opacity so it never leaves the compositor. */\nconst pulseRing = keyframes`\n  0% { transform: scale(1); opacity: 0.9; }\n  70% { transform: scale(1.04); opacity: 0; }\n  100% { transform: scale(1.04); opacity: 0; }\n`;\n\n/**\n * THE CONTRACT BOTH CARDS IMPLEMENT.\n *\n * `BaseCard` (a tile) and `BaseListCard` (a row) are one object seen from two\n * angles, so the surface — variant, colour, selectability, draggability,\n * emphasis and state — is declared once and spread into both.\n */\n\n/**\n * How much chrome the surface claims. Button's vocabulary, spelled Button's\n * way: a card and a button are both surfaces the operator presses, and having\n * one say `outline` while the other says `outlined` taxes everyone who writes\n * both. Chip's `filled | outlined` was the wrong model — a chip is a token in a\n * sentence and has only those two things to say.\n */\nexport type CardSurfaceVariant = \"outline\" | \"ghost\" | \"text\" | \"glass\";\n\n/** The theme colour a card's selection and emphasis are drawn in. */\nexport type CardSurfaceColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\n/**\n * Why this card is asking to be noticed.\n *\n * ONE union, not six booleans. `glow`/`pulse`/`animate`/`bounce`/`shimmer`\n * combined into 32 states of which about three meant anything —\n * `pulse + shimmer + bounce` is not a thing anyone wants, and every one of\n * those combinations was a state somebody could reach by accident.\n */\nexport type CardEmphasis =\n  /** Nothing. The overwhelming default. */\n  | \"none\"\n  /** Look here now: an accent bar, and a ring that beats six times and settles. */\n  | \"attention\"\n  /** This just arrived: an accent bar and one fade-in. */\n  | \"new\";\n\n/** A row and a tile carry emphasis differently — see `emphasisSx`. */\ntype CardShape = \"row\" | \"tile\";\n\n/**\n * What this record IS, as opposed to how it looks.\n *\n * `dimmed` only greyed pixels, which left a cancelled row's buttons live and\n * clickable. This carries the meaning, so the card can also stop offering\n * actions on something that cannot be acted on.\n */\nexport type CardState = \"default\" | \"cancelled\" | \"disabled\";\n\nexport interface CardSurfaceProps {\n  /** How much chrome the surface claims. Defaults to `outline`. */\n  variant?: CardSurfaceVariant;\n  /** Theme colour for selection and emphasis. Defaults to `primary`. */\n  color?: CardSurfaceColor;\n  /**\n   * Can this card be selected — and does it show it?\n   *\n   * The capability, separate from the handler. `selectable` gets the checkbox\n   * AND the selected treatment; `selectable={false}` has neither, however\n   * `selected` is set, so a stale flag arriving with the data cannot make a\n   * read-only row render as picked. Defaults to whether `onToggleSelect` exists.\n   */\n  selectable?: boolean;\n  /** Whether this card is currently in the selection. */\n  selected?: boolean;\n  /**\n   * Opt OUT of dragging even inside a drag container.\n   *\n   * Draggability is the container's decision (see `data-views-drag`); this is\n   * the card's veto — a pinned row, a summary line, a record that may not move.\n   */\n  draggable?: boolean;\n  /**\n   * Where this card leads.\n   *\n   * PREFER THIS TO `onClick`. A clickable `<div>` cannot be cmd-clicked,\n   * middle-clicked or \"copy link address\"'d, and wrapping interactive children\n   * in a click handler is the a11y violation it looks like. With `href` the\n   * title is a real `<a>` stretched over the card by a pseudo-element: one\n   * whole-row target, correct tab order, every browser affordance intact, and\n   * the buttons inside stay ordinary buttons.\n   */\n  href?: string;\n  /** Anchor target, when `href` is set. */\n  target?: string;\n  /** Card click, for a card that does not navigate. See `href` first. */\n  onClick?: () => void;\n  /** What this record is. `cancelled`/`disabled` also suppress the actions. */\n  state?: CardState;\n  /** Why this card is asking to be noticed. Defaults to `none`. */\n  emphasis?: CardEmphasis;\n  className?: string;\n  /**\n   * One id; the parts derive from it (`${testId}-checkbox`, `-drag`, `-menu`,\n   * `-value`). A prop per slot would have been `checkboxTestId`,\n   * `menuTestId`, `valueTestId`… one for every part anybody ever tested.\n   */\n  testId?: string;\n  \"aria-label\"?: string;\n}\n\n/**\n * ONE RADIUS FOR BOTH SHAPES, off the token scale on purpose.\n *\n * `Card`'s own steps are 4px and 8px and its `lg` is 16px, all chosen for a\n * surface nearly as tall as it is wide. A 56px row is not that shape — the\n * corner runs most of the way down both ends and curves away from the square\n * checkbox and square thumbnail inside it — and a tile that rounds harder than\n * the row it sits beside in the same view reads as a different component.\n *\n * 3px takes the hard point off the corner without being seen as a curve.\n * `divider` rows override it back to 0; a bottom rule has no corners to round.\n */\nexport const CARD_RADIUS = \"3px\";\n\n/** Every slot's test id, derived from the card's one. */\nexport function slotTestIds(testId: string | undefined): (slot: string) => string | undefined {\n  return (slot) => (testId ? `${testId}-${slot}` : undefined);\n}\n\n/** Is this card selectable? Explicit wins; otherwise a handler implies it. */\nexport function isSelectable(\n  props: Pick<CardSurfaceProps, \"selectable\"> & { onToggleSelect?: () => void },\n): boolean {\n  return props.selectable ?? props.onToggleSelect != null;\n}\n\n/** Can this record be acted on at all? */\nexport function isActionable(state: CardState | undefined): boolean {\n  return state !== \"disabled\" && state !== \"cancelled\";\n}\n\n/**\n * Variant styling. Everything but `outline` drops the border.\n *\n * `ghost` keeps a faint SURFACE where `text` has none — without that the two\n * were pixel-identical at rest and the union carried a distinction it did not\n * draw. Ghost is \"a surface, quietly\"; text is \"no surface at all\", which is\n * what a host wants when it is drawing the container itself.\n */\nfunction variantSx(variant: CardSurfaceVariant, theme: Theme): CardSx {\n  if (variant === \"ghost\") {\n    return {\n      border: 0,\n      backgroundColor: \"action.hover\",\n      \"&:hover\": { backgroundColor: \"action.selected\" },\n    };\n  }\n  if (variant === \"text\") {\n    return { border: 0, backgroundColor: \"transparent\", boxShadow: \"none\" };\n  }\n  if (variant === \"glass\") {\n    // THEME-AWARE, and it keeps its edges.\n    //\n    // This was a hardcoded `rgba(255,255,255,·)` fill with a near-white border,\n    // which had two problems. On a dark palette a 55%-white pane is not frosted\n    // glass, it is a pale rectangle. And on a light one BOTH the fill and the\n    // border land on white and vanish, so `glass` rendered as `text` — the same\n    // nothing, reached by a different name.\n    //\n    // The blur is what makes it glass, and a blur is only visible over\n    // something. So the pane keeps a real hairline and a shallow shadow: over a\n    // plain surface it still reads as a raised pane rather than as absence, and\n    // over an image or a gradient the blur does the rest.\n    return {\n      backgroundColor: alpha(theme.palette.background.paper, 0.55),\n      backdropFilter: \"blur(8px)\",\n      // `divider` as-is. NOT `alpha(divider, …)`: MUI's `alpha` REPLACES the\n      // channel rather than scaling it, and `divider` is already a 12% black —\n      // so asking for 80% of it produced an 80% black slab of a border.\n      borderColor: theme.palette.divider,\n      boxShadow: `0 1px 3px ${alpha(theme.palette.common.black, 0.1)}`,\n    };\n  }\n  return {};\n}\n\n/**\n * MOTION IS OPT-IN, ALWAYS.\n *\n * Everything animated here is wrapped in this. Fifty rows breathing in unison\n * is a vestibular trigger, and honouring the OS setting is not a polish item —\n * it is the difference between a list somebody can look at and one they cannot.\n */\nconst MOTION_OK = \"@media (prefers-reduced-motion: no-preference)\";\n\n/**\n * THE ROW'S ATTENTION SIGNAL IS A BAR, NOT A HALO.\n *\n * A glow is a weak signal in a list: full-width rows stacked tight means the\n * halo bleeds 15px into the neighbours above and below and reads as a rendering\n * artifact, and stacked with a `selected` ring and the browser's focus ring it\n * becomes three concentric halos on one row. Five rows needing attention at\n * once turns the page into a smear.\n *\n * A 3px accent on the leading edge is stronger, costs no motion at all, works\n * under reduced-motion, cannot bleed into a neighbour, and stacks cleanly\n * however many rows raise their hand. It is where operational tables land.\n */\nfunction accentBar(main: string): CardSx {\n  return {\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      insetInlineStart: 0,\n      insetBlock: 0,\n      width: 3,\n      borderStartStartRadius: \"inherit\",\n      borderEndStartRadius: \"inherit\",\n      backgroundColor: main,\n      pointerEvents: \"none\",\n    },\n  };\n}\n\n/**\n * The tile's lift — a card that has been RAISED, not one that is lit from within.\n *\n * This was Button's glow: a 20px bloom at 0.6 over a 40px bloom at 0.3, plus\n * `brightness(1.05)`. On a button, which is small and pressed and gone, that\n * reads as energy. On a tile it read as a neon sign — 40px of saturated colour\n * bleeding into the gaps of a grid whose whole job is to let the eye compare\n * cards, and the brightness filter washing the image and the caption with it.\n *\n * Three shadows doing three jobs instead: a hairline ring that tints the card's\n * own edge in the accent colour, a tight contact shadow, and one soft shadow\n * offset DOWNWARD. Offset is what separates elevation from emission — a glow is\n * symmetrical because its source is the object; a shadow falls because the\n * light is somewhere else. It stays legible on a dark canvas, where the old\n * bloom was the brightest thing on the screen.\n */\nfunction liftSx(main: string): CardSx {\n  return {\n    boxShadow: [\n      `0 0 0 1px ${alpha(main, 0.45)}`,\n      `0 1px 2px ${alpha(main, 0.12)}`,\n      `0 8px 20px -6px ${alpha(main, 0.3)}`,\n    ].join(\", \"),\n  };\n}\n\n/**\n * A breath that STOPS.\n *\n * Six iterations, not `infinite`. A restaurant admin has this open for a whole\n * shift, and something pulsing in the periphery forever is fatigue rather than\n * urgency — worse, once two or three rows are doing it the signal means\n * nothing. It settles, and the accent bar carries the state from then on.\n *\n * Animating `transform`/`opacity` on a pseudo-element, never `box-shadow`: a\n * box-shadow keyframe repaints every frame, and fifty of them drop frames on\n * exactly the tablet a restaurant floor uses. This one is compositor-only.\n */\nfunction pulseSx(main: string): CardSx {\n  return {\n    [MOTION_OK]: {\n      \"&::after\": {\n        content: '\"\"',\n        position: \"absolute\",\n        inset: 0,\n        borderRadius: \"inherit\",\n        border: `2px solid ${main}`,\n        animation: `${pulseRing} 1.6s ease-out 6`,\n        pointerEvents: \"none\",\n      },\n    },\n  };\n}\n\n/** The emphasis treatments, in the terms the shape can actually carry. */\nfunction emphasisSx(emphasis: CardEmphasis, main: string, shape: CardShape): CardSx {\n  if (emphasis === \"attention\") {\n    // The bar on both; the lift only where there is room for it to spread.\n    return {\n      ...accentBar(main),\n      ...(shape === \"tile\" ? liftSx(main) : {}),\n      ...pulseSx(main),\n    };\n  }\n  if (emphasis === \"new\") {\n    return {\n      ...accentBar(main),\n      [MOTION_OK]: { animation: `${fadeInScaleAnimation} 240ms ease-out` },\n    };\n  }\n  return {};\n}\n\n/**\n * The shared half of a card's styling. Each component adds its own geometry —\n * a tile's aspect ratio, a row's rails.\n */\n/**\n * WHAT THE TWO NON-DEFAULT STATES LOOK LIKE — and why they cannot look alike.\n *\n * Both were `opacity: 0.6` and nothing else, so a record the business CANCELLED\n * and a row this user merely cannot touch were pixel-identical. The type has\n * always drawn the distinction (`CardState`); only the styling had not, which\n * made `cancelled` a comment rather than a state.\n *\n * `cancelled` is a VOIDED record: still there, still worth reading, no longer\n * counting. The figures get struck through, because a dimmed `R$ 1.250,00`\n * still reads as money owed and a struck one cannot.\n *\n * `disabled` is INERT: nothing to read into, nothing to do with. It goes\n * greyscale — which also drains the status chip's colour, the one thing on the\n * row still shouting for attention — and says so on hover.\n */\nfunction stateSx(state: CardState): CardSx {\n  if (state === \"cancelled\") {\n    return {\n      opacity: 0.65,\n      // The META CLUSTER is struck too. It was left out, so a voided row kept a\n      // crisp `05/08/2026, 13:45` and `PIX` between a struck title and a struck\n      // total — the middle of the row reading as live data on a record the two\n      // ends call void. Both lines of each pair go, as both lines of the caption\n      // already do: on a cancelled record the label is as void as the value.\n      '& [data-slot=\"value\"], & [data-slot=\"caption\"], & [data-slot=\"meta\"]': {\n        textDecoration: \"line-through\",\n      },\n    };\n  }\n  if (state === \"disabled\") {\n    return { opacity: 0.45, filter: \"grayscale(1)\", cursor: \"not-allowed\" };\n  }\n  return { opacity: 1 };\n}\n\nexport function cardSurfaceStyles(\n  props: CardSurfaceProps & { selectable: boolean; shape: CardShape },\n  theme: Theme,\n): CardSx {\n  const { variant = \"outline\", color = \"primary\", selected = false, selectable } = props;\n  const { state = \"default\", emphasis = \"none\" } = props;\n  const main = theme.palette[color].main;\n  // Selection styling is gated on the CAPABILITY: a card that cannot be\n  // selected must not render as selected because a stale flag came with its data.\n  const showSelected = selectable && selected;\n  return {\n    transition: \"border-color 120ms, box-shadow 120ms, background-color 120ms\",\n    ...stateSx(state),\n    ...variantSx(variant, theme),\n    ...(showSelected\n      ? {\n          borderColor: `${color}.main`,\n          boxShadow: `inset 0 0 0 1px ${main}`,\n          backgroundColor: \"action.selected\",\n        }\n      : {}),\n    ...emphasisSx(emphasis, main, props.shape),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FHA4G5XF.js

@@ -1,165 +0,0 @@
-import {
-  Sheet
-} from "./chunk-LZHXF66R.js";
-import {
-  Dialog
-} from "./chunk-O4PKQ46C.js";
-import {
-  Button
-} from "./chunk-6MDBMCFK.js";
-import {
-  accentFor
-} from "./chunk-XCP5L665.js";
-
-// src/components/navigation/AppHeader/AppHeader.details.tsx
-import Box from "@mui/material/Box/index.js";
-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;
-function sheetHeight(xxs) {
-  return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
-}
-function usesSheet(presentation, compact) {
-  if (presentation === "sheet") return true;
-  if (presentation === "dialog") return false;
-  return compact;
-}
-var DetailRow = ({
-  row,
-  last,
-  dataTestId
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      "data-testid": `${dataTestId}-row`,
-      "data-row": row.id ?? row.label,
-      sx: {
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "space-between",
-        gap: 2,
-        py: 1.5,
-        borderBottom: last ? "none" : `1px solid ${theme.palette.divider}`
-      },
-      children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", component: "span", sx: { flex: "0 0 auto" }, children: row.label }),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "body1",
-            component: "span",
-            sx: {
-              minWidth: 0,
-              textAlign: "right",
-              fontWeight: row.tone ? 700 : 500,
-              color: row.tone ? accentFor(theme, row.tone).main : "text.primary",
-              // Newlines in a value are meaningful — an address is two lines.
-              whiteSpace: "pre-line"
-            },
-            children: row.value
-          }
-        )
-      ]
-    }
-  );
-};
-var DetailsBody = ({ rows, children, dataTestId }) => /* @__PURE__ */ jsxs(Box, { "data-testid": `${dataTestId}-body`, children: [
-  (rows ?? []).map((row, index) => /* @__PURE__ */ jsx(
-    DetailRow,
-    {
-      row,
-      last: index === (rows?.length ?? 0) - 1 && !children,
-      dataTestId
-    },
-    row.id ?? row.label
-  )),
-  children
-] });
-var DetailsAction = ({ action, dataTestId, padded = false }) => action ? /* @__PURE__ */ jsx(Box, { sx: padded ? { pt: 2 } : void 0, children: /* @__PURE__ */ jsx(
-  Button,
-  {
-    variant: "solid",
-    color: action.color ?? "primary",
-    size: "lg",
-    fullWidth: true,
-    disabled: action.disabled,
-    onClick: action.onClick,
-    dataTestId: action.dataTestId ?? `${dataTestId}-action`,
-    children: action.label
-  }
-) }) : null;
-var AppHeaderDetails = ({
-  open,
-  onClose,
-  title,
-  subtitle,
-  rows,
-  children,
-  action,
-  presentation = "auto",
-  breakpoint = "sm",
-  className,
-  dataTestId = "app-header-details"
-}) => {
-  const theme = useTheme();
-  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
-  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
-  const description = typeof subtitle === "string" ? subtitle : void 0;
-  const richSubtitle = description === void 0 ? subtitle : null;
-  const body = /* @__PURE__ */ jsx(DetailsBody, { rows, dataTestId, children });
-  const footer = /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId });
-  if (asSheet) {
-    return /* @__PURE__ */ jsxs(
-      Sheet,
-      {
-        open,
-        onClose,
-        onOpenChange: (next) => !next && onClose(),
-        position: "bottom",
-        size: "md",
-        style: sheetHeight(xxs),
-        className,
-        title,
-        description,
-        showCloseButton: true,
-        rounded: true,
-        footer,
-        dataTestId,
-        children: [
-          richSubtitle,
-          body
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open,
-      onClose,
-      title,
-      description,
-      showCloseButton: true,
-      fullWidth: true,
-      className,
-      dataTestId,
-      PaperProps: { sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } },
-      children: [
-        richSubtitle,
-        body,
-        /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId, padded: true })
-      ]
-    }
-  );
-};
-AppHeaderDetails.displayName = "AppHeaderDetails";
-
-export {
-  AppHeaderDetails
-};
-//# sourceMappingURL=chunk-FHA4G5XF.js.map

package/dist/chunk-FPWB5ILF.js

@@ -1,79 +0,0 @@
-import {
-  avatarFor,
-  chipStyles,
-  iconWithTestId,
-  makeKeyDownHandler
-} from "./chunk-E46PG577.js";
-import {
-  chipMuiSize
-} from "./chunk-KU6VHNRV.js";
-import {
-  chipRole,
-  isClickable,
-  makeTestId
-} from "./chunk-BF4FYOAR.js";
-
-// src/components/data-display/Chip/Chip.tsx
-import CancelIcon from "@mui/icons-material/Cancel";
-import MuiChip from "@mui/material/Chip/index.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var muiColorFor = (color) => {
-  if (color === "danger") return "error";
-  return color === "neutral" ? "default" : color;
-};
-var Chip = forwardRef(({
-  label,
-  variant = "filled",
-  size = "md",
-  color = "primary",
-  avatarSrc,
-  avatar,
-  icon,
-  selected,
-  selectable,
-  deletable,
-  disabled,
-  onClick,
-  onDelete,
-  className,
-  dataTestId,
-  // React Native's spelling of the same id; it names the component on both
-  // sides and must not reach the DOM as an attribute.
-  testID,
-  ...props
-}, ref) => {
-  const chipId = testID ?? dataTestId;
-  const testId = makeTestId(chipId);
-  const clickable = isClickable(disabled, onClick, selectable);
-  return /* @__PURE__ */ jsx(
-    MuiChip,
-    {
-      ref,
-      label: /* @__PURE__ */ jsx("span", { "data-testid": testId("label"), children: label }),
-      variant,
-      size: chipMuiSize(size),
-      color: muiColorFor(color),
-      avatar: avatarFor(avatar, avatarSrc),
-      icon: iconWithTestId(icon, testId("icon")),
-      onDelete: deletable ? onDelete : void 0,
-      deleteIcon: deletable ? /* @__PURE__ */ jsx(CancelIcon, { "data-testid": testId("delete") }) : void 0,
-      disabled,
-      clickable,
-      onClick: clickable ? onClick : void 0,
-      onKeyDown: makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete }),
-      className,
-      role: chipRole(selectable, onClick),
-      "aria-selected": selectable ? selected : void 0,
-      "data-testid": chipId || "chip",
-      sx: chipStyles({ variant, selected, clickable, disabled }),
-      ...props
-    }
-  );
-});
-Chip.displayName = "Chip";
-
-export {
-  Chip
-};
-//# sourceMappingURL=chunk-FPWB5ILF.js.map

package/dist/chunk-FRW4SYZD.js

@@ -1,79 +0,0 @@
-import {
-  MARKER_PIXELS_PER_DEGREE
-} from "./chunk-H2J2MTRE.js";
-import {
-  BOUNCE_KEYFRAMES
-} from "./chunk-DRADVLHZ.js";
-
-// src/components/data-display/MapPreview/MapMarkers.tsx
-import LocationIcon from "@mui/icons-material/LocationOn";
-import Box from "@mui/material/Box/index.js";
-import Tooltip from "@mui/material/Tooltip/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var CoordinatesDisplay = styled(Box)(({ theme }) => ({
-  position: "absolute",
-  bottom: theme.spacing(2),
-  left: theme.spacing(2),
-  padding: theme.spacing(1, 1.5),
-  background: alpha(theme.palette.background.paper, 0.95),
-  backdropFilter: "blur(10px)",
-  WebkitBackdropFilter: "blur(10px)",
-  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-  borderRadius: theme.shape.borderRadius,
-  zIndex: 1
-}));
-var MapMarkers = ({ markers, centre, animated }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(Fragment, { children: markers.map((markerItem, index) => /* @__PURE__ */ jsx(
-    Box,
-    {
-      "data-testid": `map-marker-${index}`,
-      sx: {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: `translate(
-              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
-              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
-            )`,
-        zIndex: 3,
-        cursor: markerItem.onClick ? "pointer" : "default"
-      },
-      onClick: markerItem.onClick,
-      title: markerItem.title,
-      children: /* @__PURE__ */ jsx(Tooltip, { title: markerItem.description || markerItem.title || "", children: /* @__PURE__ */ jsx(
-        LocationIcon,
-        {
-          sx: {
-            fontSize: 32,
-            color: theme.palette.error.main,
-            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
-            animation: animated ? "bounce 2s infinite" : "none",
-            "@keyframes bounce": BOUNCE_KEYFRAMES
-          }
-        }
-      ) })
-    },
-    `${markerItem.position.lat}-${markerItem.position.lng}-${index}`
-  )) });
-};
-var MapCoordinates = ({ position, zoom }) => /* @__PURE__ */ jsxs(CoordinatesDisplay, { "data-testid": "coordinates-display", children: [
-  /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace" }, children: [
-    "Lat: ",
-    position.lat.toFixed(6),
-    ", Lng: ",
-    position.lng.toFixed(6)
-  ] }),
-  zoom > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace", display: "block" }, children: [
-    "Zoom: ",
-    zoom
-  ] })
-] });
-
-export {
-  MapMarkers,
-  MapCoordinates
-};
-//# sourceMappingURL=chunk-FRW4SYZD.js.map

package/dist/chunk-FRW4SYZD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/MapPreview/MapMarkers.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';\nimport type { LatLng, MapMarker } from './MapPreview.types';\nimport { BOUNCE_KEYFRAMES } from './mapSurface';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst CoordinatesDisplay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  bottom: theme.spacing(2),\n  left: theme.spacing(2),\n  padding: theme.spacing(1, 1.5),\n  background: alpha(theme.palette.background.paper, 0.95),\n  backdropFilter: 'blur(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  borderRadius: theme.shape.borderRadius,\n  zIndex: 1,\n}));\n\nexport interface MapMarkersProps {\n  markers: MapMarker[];\n  centre: LatLng;\n  animated: boolean;\n}\n\n// Markers are placed relative to the current centre, so panning moves them with\n// the surface.\nexport const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) => {\n  const theme = useTheme();\n\n  return (\n    <>\n      {markers.map((markerItem, index) => (\n        <Box\n          key={`${markerItem.position.lat}-${markerItem.position.lng}-${index}`}\n          data-testid={`map-marker-${index}`}\n          sx={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: `translate(\n              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,\n              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px\n            )`,\n            zIndex: 3,\n            cursor: markerItem.onClick ? 'pointer' : 'default',\n          }}\n          onClick={markerItem.onClick}\n          title={markerItem.title}\n        >\n          <Tooltip title={markerItem.description || markerItem.title || ''}>\n            <LocationIcon\n              sx={{\n                fontSize: 32,\n                color: theme.palette.error.main,\n                filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',\n                animation: animated ? 'bounce 2s infinite' : 'none',\n                '@keyframes bounce': BOUNCE_KEYFRAMES,\n              }}\n            />\n          </Tooltip>\n        </Box>\n      ))}\n    </>\n  );\n};\n\nexport const MapCoordinates: FC<{ position: LatLng; zoom: number }> = ({ position, zoom }) => (\n  <CoordinatesDisplay data-testid=\"coordinates-display\">\n    <Typography variant=\"caption\" sx={{ fontFamily: 'monospace' }}>\n      Lat: {position.lat.toFixed(6)}, Lng: {position.lng.toFixed(6)}\n    </Typography>\n    {zoom > 0 && (\n      <Typography variant=\"caption\" sx={{ fontFamily: 'monospace', display: 'block' }}>\n        Zoom: {zoom}\n      </Typography>\n    )}\n  </CoordinatesDisplay>\n);\n"],"mappings":";;;;;;;;AAAA,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,OAAO,QAAQ,gBAAgB;AAmCpC,mBAoBQ,KAkBR,YAtCA;AAzBJ,IAAM,qBAAqB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrD,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACvB,MAAM,MAAM,QAAQ,CAAC;AAAA,EACrB,SAAS,MAAM,QAAQ,GAAG,GAAG;AAAA,EAC7B,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,EACtD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACtD,cAAc,MAAM,MAAM;AAAA,EAC1B,QAAQ;AACV,EAAE;AAUK,IAAM,aAAkC,CAAC,EAAE,SAAS,QAAQ,SAAS,MAAM;AAChF,QAAM,QAAQ,SAAS;AAEvB,SACE,gCACG,kBAAQ,IAAI,CAAC,YAAY,UACxB;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,cAAc,KAAK;AAAA,MAChC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,iBACN,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA,gBACjE,EAAE,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA;AAAA,QAEtE,QAAQ;AAAA,QACR,QAAQ,WAAW,UAAU,YAAY;AAAA,MAC3C;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,OAAO,WAAW;AAAA,MAElB,8BAAC,WAAQ,OAAO,WAAW,eAAe,WAAW,SAAS,IAC5D;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,UAAU;AAAA,YACV,OAAO,MAAM,QAAQ,MAAM;AAAA,YAC3B,QAAQ;AAAA,YACR,WAAW,WAAW,uBAAuB;AAAA,YAC7C,qBAAqB;AAAA,UACvB;AAAA;AAAA,MACF,GACF;AAAA;AAAA,IA1BK,GAAG,WAAW,SAAS,GAAG,IAAI,WAAW,SAAS,GAAG,IAAI,KAAK;AAAA,EA2BrE,CACD,GACH;AAEJ;AAEO,IAAM,iBAAyD,CAAC,EAAE,UAAU,KAAK,MACtF,qBAAC,sBAAmB,eAAY,uBAC9B;AAAA,uBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,YAAY,GAAG;AAAA;AAAA,IACvD,SAAS,IAAI,QAAQ,CAAC;AAAA,IAAE;AAAA,IAAQ,SAAS,IAAI,QAAQ,CAAC;AAAA,KAC9D;AAAA,EACC,OAAO,KACN,qBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,aAAa,SAAS,QAAQ,GAAG;AAAA;AAAA,IACxE;AAAA,KACT;AAAA,GAEJ;","names":[]}

package/dist/chunk-FTCCYWF4.js

@@ -1,242 +0,0 @@
-import {
-  AppHeaderBrand
-} from "./chunk-H37GIAAM.js";
-import {
-  accentFor
-} from "./chunk-XCP5L665.js";
-
-// src/components/navigation/AppHeader/AppHeader.identity.tsx
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import Box from "@mui/material/Box/index.js";
-import Skeleton from "@mui/material/Skeleton/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { useTheme } from "@mui/material/styles/index.js";
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TITLE_PX = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };
-var ONE_LINE = {
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-var AppHeaderStatus = ({
-  tone,
-  items,
-  separator = "\xB7",
-  className,
-  dataTestId = "app-header-status"
-}) => {
-  const theme = useTheme();
-  const visible = items.filter((item) => item !== null && item !== void 0 && item !== "");
-  if (visible.length === 0) return null;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className,
-      "data-testid": dataTestId,
-      sx: { display: "flex", alignItems: "center", gap: 0.75, ...ONE_LINE },
-      children: [
-        tone && /* @__PURE__ */ jsx(
-          Box,
-          {
-            "aria-hidden": true,
-            "data-testid": `${dataTestId}-dot`,
-            sx: {
-              width: 8,
-              height: 8,
-              flex: "0 0 auto",
-              borderRadius: "50%",
-              backgroundColor: accentFor(theme, tone).main
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: visible.map((item, index) => (
-          // Index keys: the segments are positional presentation, and nothing
-          // here reorders or is keyed on identity elsewhere.
-          /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              " ",
-              /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: separator }),
-              " "
-            ] }),
-            item
-          ] }, index)
-        )) })
-      ]
-    }
-  );
-};
-AppHeaderStatus.displayName = "AppHeaderStatus";
-var IdentityTitle = ({ title, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0, width: "100%" }, children: [
-  /* @__PURE__ */ jsx(
-    Typography,
-    {
-      component: "span",
-      "data-testid": `${dataTestId}-title`,
-      sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
-      children: title
-    }
-  ),
-  interactive && /* @__PURE__ */ jsx(
-    KeyboardArrowDown,
-    {
-      "aria-hidden": true,
-      "data-testid": `${dataTestId}-chevron`,
-      sx: {
-        flex: "0 0 auto",
-        fontSize: 20,
-        opacity: 0.7,
-        transition: "transform 150ms ease",
-        transform: disclosed ? "rotate(180deg)" : "none"
-      }
-    }
-  )
-] });
-var discloseSx = {
-  display: "flex",
-  alignItems: "center",
-  gap: 0.25,
-  width: "100%",
-  minWidth: 0,
-  appearance: "none",
-  px: 0.5,
-  mx: -0.5,
-  py: 0.25,
-  my: -0.25,
-  border: "none",
-  borderRadius: 1.5,
-  background: "none",
-  color: "inherit",
-  font: "inherit",
-  textAlign: "left",
-  cursor: "pointer",
-  // 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 }
-};
-var IdentityText = ({
-  title,
-  subtitle,
-  status,
-  size = "md",
-  onDisclose,
-  disclosed,
-  discloseLabel,
-  className,
-  dataTestId
-}) => {
-  const name = /* @__PURE__ */ jsx(
-    IdentityTitle,
-    {
-      title,
-      size,
-      interactive: Boolean(onDisclose),
-      disclosed,
-      dataTestId
-    }
-  );
-  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
-    onDisclose ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "button",
-        type: "button",
-        className,
-        "data-testid": dataTestId,
-        onClick: onDisclose,
-        "aria-haspopup": "dialog",
-        "aria-expanded": disclosed,
-        "aria-label": discloseLabel ?? `Detalhes de ${title}`,
-        sx: discloseSx,
-        children: name
-      }
-    ) : name,
-    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
-    status
-  ] });
-};
-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 })
-      ] })
-    ]
-  }
-);
-var rowSx = {
-  display: "flex",
-  alignItems: "center",
-  gap: 1.25,
-  width: "100%",
-  minWidth: 0,
-  textAlign: "left"
-};
-var AppHeaderIdentity = ({
-  title,
-  subtitle,
-  status,
-  mark,
-  logoUrl,
-  seedColor,
-  onDisclose,
-  disclosed = false,
-  discloseLabel,
-  loading = false,
-  size = "md",
-  className,
-  dataTestId = "app-header-identity"
-}) => {
-  if (loading) return /* @__PURE__ */ jsx(IdentitySkeleton, { size, dataTestId });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: onDisclose ? void 0 : className,
-      "data-testid": onDisclose ? void 0 : dataTestId,
-      sx: rowSx,
-      children: [
-        mark ?? /* @__PURE__ */ jsx(
-          AppHeaderBrand,
-          {
-            name: title,
-            logoUrl,
-            seedColor,
-            size,
-            dataTestId: `${dataTestId}-brand`
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IdentityText,
-          {
-            title,
-            subtitle,
-            status,
-            size,
-            onDisclose,
-            disclosed,
-            discloseLabel,
-            className,
-            dataTestId
-          }
-        )
-      ]
-    }
-  );
-};
-AppHeaderIdentity.displayName = "AppHeaderIdentity";
-
-export {
-  AppHeaderStatus,
-  AppHeaderIdentity
-};
-//# sourceMappingURL=chunk-FTCCYWF4.js.map

package/dist/chunk-FTCCYWF4.js.map

@@ -1 +0,0 @@
-{"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 React from 'react';\n\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: 8,\n            height: 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: 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: 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': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },\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  <Box\n    data-testid={`${dataTestId}-loading`}\n    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}\n  >\n    <Skeleton variant=\"rounded\" width={40} height={40} sx={{ flex: '0 0 auto' }} />\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Skeleton variant=\"text\" width={140} height={TITLE_PX[size] * 1.4} />\n      <Skeleton variant=\"text\" width={180} height={16} />\n    </Box>\n  </Box>\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":";;;;;;;;AAEA,OAAO,uBAAuB;AAC9B,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AACzB,OAAO,WAAW;AA2CV,SAkBM,UAlBN,KAkBM,YAlBN;AAnCR,IAAM,WAAsC,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAGrF,IAAM,WAAW;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AASO,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,MAAM,OAAO,CAAC,SAAS,SAAS,QAAQ,SAAS,UAAa,SAAS,EAAE;AACzF,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,MAAM,GAAG,SAAS;AAAA,MAEnE;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,eAAa,GAAG,UAAU;AAAA,YAC1B,IAAI;AAAA,cACF,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,MAAM;AAAA,cACN,cAAc;AAAA,cACd,iBAAiB,UAAU,OAAO,IAAI,EAAE;AAAA,YAC1C;AAAA;AAAA,QACF;AAAA,QAEF,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,QAAO,IAAI,UACrE,kBAAQ,IAAI,CAAC,MAAM;AAAA;AAAA;AAAA,UAGlB,qBAAC,MAAM,UAAN,EACE;AAAA,oBAAQ,KACP,iCAKG;AAAA;AAAA,cACD,oBAAC,OAAI,WAAU,QAAO,eAAW,MAC9B,qBACH;AAAA,cAAO;AAAA,eACT;AAAA,YAED;AAAA,eAbkB,KAcrB;AAAA,SACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;AAG9B,IAAM,gBAMF,CAAC,EAAE,OAAO,OAAO,MAAM,aAAa,WAAW,WAAW,MAC5D,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,MAAM,UAAU,GAAG,OAAO,OAAO,GACtF;AAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa,GAAG,UAAU;AAAA,MAC1B,IAAI,EAAE,UAAU,SAAS,IAAI,GAAG,YAAY,KAAK,YAAY,KAAK,GAAG,SAAS;AAAA,MAE7E;AAAA;AAAA,EACH;AAAA,EACC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,eAAa,GAAG,UAAU;AAAA,MAC1B,IAAI;AAAA,QACF,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,WAAW,YAAY,mBAAmB;AAAA,MAC5C;AAAA;AAAA,EACF;AAAA,GAEJ;AAUF,IAAM,aAAa;AAAA,EACjB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA;AAAA,EAGR,yBAAyB,EAAE,WAAW,EAAE,iBAAiB,eAAe,EAAE;AAAA,EAC1E,mBAAmB,EAAE,SAAS,aAAa,cAAc,gBAAgB,eAAe,EAAE;AAC5F;AAqBA,IAAM,eASF,CAAC;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,QAAQ,UAAU;AAAA,MAC/B;AAAA,MACA;AAAA;AAAA,EACF;AAEF,SACE,qBAAC,OAAI,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,QAAQ,eAAe,UAAU,KAAK,KAAK,GAClF;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,cAAY,iBAAiB,eAAe,KAAK;AAAA,QACjD,IAAI;AAAA,QAEH;AAAA;AAAA,IACH,IAEA;AAAA,IAED,YACC,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,QAAO,IAAI,UACrE,oBACH;AAAA,IAED;AAAA,KACH;AAEJ;AAGA,IAAM,mBAAsE,CAAC;AAAA,EAC3E;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAa,GAAG,UAAU;AAAA,IAC1B,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,MAAM,UAAU,EAAE;AAAA,IAEpE;AAAA,0BAAC,YAAS,SAAQ,WAAU,OAAO,IAAI,QAAQ,IAAI,IAAI,EAAE,MAAM,WAAW,GAAG;AAAA,MAC7E,qBAAC,OAAI,IAAI,EAAE,UAAU,GAAG,MAAM,EAAE,GAC9B;AAAA,4BAAC,YAAS,SAAQ,QAAO,OAAO,KAAK,QAAQ,SAAS,IAAI,IAAI,KAAK;AAAA,QACnE,oBAAC,YAAS,SAAQ,QAAO,OAAO,KAAK,QAAQ,IAAI;AAAA,SACnD;AAAA;AAAA;AACF;AAYF,IAAM,QAAQ;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AACb;AAiBO,IAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AACf,MAAM;AACJ,MAAI,QAAS,QAAO,oBAAC,oBAAiB,MAAY,YAAwB;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,SAAY;AAAA,MACpC,eAAa,aAAa,SAAY;AAAA,MACtC,IAAI;AAAA,MAEH;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,GAAG,UAAU;AAAA;AAAA,QAC3B;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;","names":[]}