npm - @12-apps/ui - Versions diffs - 6.35.0 → 6.36.0 - Mend

@12-apps/ui 6.35.0 → 6.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (916) hide show

package/dist/{chunk-BD2GGIGS.js → chunk-ADHMNIWS.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   FleetBody
-} from "./chunk-YU647YW4.js";
+} from "./chunk-DB2ZFZVW.js";
 import {
   FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
   FLEET_DEFAULT_STALE_AFTER_SECONDS,
@@ -14,7 +14,10 @@ import {
 } from "./chunk-7BZTZ2WG.js";
 import {
   EmptyState
-} from "./chunk-MZMGQKT3.js";
+} from "./chunk-HN3PZTUK.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/FleetMap/FleetMap.tsx
 import Box from "@mui/material/Box/index.js";
@@ -22,7 +25,7 @@ import Typography from "@mui/material/Typography/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_HEIGHT = "420px";
+var defaultHeight = (theme) => rem(theme, 420);
 function FleetStatus({
   announcement,
   loading,
@@ -42,12 +45,13 @@ var FleetMap = React.memo(
     onSelect,
     laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
     staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,
-    height = DEFAULT_HEIGHT,
+    height: heightProp,
     loading = false,
     className,
     dataTestId
   }) => {
     const theme = useTheme();
+    const height = heightProp ?? defaultHeight(theme);
     const testId = dataTestId || "fleet-map";
     const headingId = React.useId();
     const { ordered, active, centre, select, markers, onKeyDown } = useFleetMap(
@@ -113,4 +117,4 @@ export {
   FleetMap,
   FleetMap_default
 };
-//# sourceMappingURL=chunk-BD2GGIGS.js.map
+//# sourceMappingURL=chunk-ADHMNIWS.js.map

package/dist/chunk-ADHMNIWS.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/FleetMap/FleetMap.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { SR_ONLY_SX } from '../../form/Label/Label.styles';\nimport { rem } from '../../../tokens/relative';\nimport { EmptyState } from '../EmptyState/EmptyState';\n\nimport { FleetBody } from './FleetBody';\nimport { useFleetMap } from './FleetMap.hooks';\nimport {\n FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n FLEET_DEFAULT_STALE_AFTER_SECONDS,\n FLEET_PANEL,\n} from './FleetMap.metrics';\nimport type { FleetMapProps } from './FleetMap.types';\n\n/** The map's own default height, in design px. Overridable, and never a hardcoded viewport. */\nconst defaultHeight = (theme: Theme): string => rem(theme, 420);\n\n/**\n * The reload announcement, and nothing else.\n *\n * `aria-busy` marks the region stale for assistive technology but UTTERS\n * nothing, and the skeletons beside it are `aria-hidden` — so a screen-reader\n * user got silence while the roster reloaded. This is the utterance.\n *\n * Optional by design: the sentence is in the reader's language, which only the\n * caller knows, and inventing an English one in a component whose whole premise\n * is that every word arrives through `copy` would be the bug it exists to\n * avoid. No `copy.loading`, no region.\n *\n * ## The node outlives the text, and that is the whole trick\n *\n * A live region has to be in the DOM BEFORE its content changes; a screen\n * reader watches an existing region for mutations rather than announcing one\n * that appears already populated. Mounting region-and-text together in a single\n * commit is the classic silent case — it satisfies a DOM assertion while\n * announcing nothing. So the region mounts as soon as the caller offers the\n * copy and merely EMPTIES when idle, which is what `CepField`, `UploadButton`\n * and `DateRangePickerFields` all do.\n */\nfunction FleetStatus({\n announcement,\n loading,\n testId,\n}: {\n announcement: string | undefined;\n loading: boolean;\n testId: string;\n}): React.JSX.Element | null {\n // No copy, no region at all — the caller has not asked for an announcement.\n if (announcement === undefined) return null;\n return (\n <Box role=\"status\" aria-live=\"polite\" data-testid={`${testId}-status`} sx={SR_ONLY_SX}>\n {loading ? announcement : ''}\n </Box>\n );\n}\n\n/**\n * FleetMap — where a set of tracked units is right now, as a map beside the\n * roster that reads it.\n *\n * Product-free by construction: it draws labelled dots with a freshness, and\n * every word — the heading, the three freshness states, how a duration and a\n * distance are written — arrives through {@link FleetMapProps.copy}. Couriers,\n * service vans and field engineers are all the same picture.\n *\n * ## Three decisions worth knowing before changing it\n *\n * **The roster is the accessible representation, not a sidebar.** A map is a\n * picture and a screen reader cannot read one, so the list carries the\n * information: everything a sighted user gets from a pin — who, how recently,\n * what they are carrying — is on the row. The map is a NAMED region rather than\n * an `aria-hidden` one, because its controls are focusable and hiding a\n * focusable subtree is the `aria-hidden-focus` violation.\n *\n * **Nothing here formats.** `lastSeen` and `accuracy` are functions on the copy\n * object, the same line `StatCard` holds for its `value`: a duration and a\n * distance are locale rules, and a component that wrote \"2 min ago\" would have\n * made English the only language it could ever render.\n *\n * **An empty fleet is an empty STATE, not an empty map.** A map with no pins is\n * indistinguishable from a map that failed to load, and the difference is the\n * whole question a dispatcher is asking.\n */\nexport const FleetMap: React.FC<FleetMapProps> = React.memo(\n ({\n units,\n copy,\n // NO default. `undefined` is what tells the hook the caller does not own\n // the selection; defaulting it to `null` here made every render look\n // controlled and the uncontrolled path unreachable.\n selectedId,\n onSelect,\n laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,\n height: heightProp,\n loading = false,\n className,\n dataTestId,\n }) => {\n const theme = useTheme();\n const height = heightProp ?? defaultHeight(theme);\n const testId = dataTestId || 'fleet-map';\n const headingId = React.useId();\n const { ordered, active, centre, select, markers, onKeyDown } = useFleetMap(\n units,\n selectedId,\n onSelect,\n );\n\n return (\n <Box\n role=\"region\"\n aria-labelledby={headingId}\n className={className}\n data-testid={testId}\n sx={{ display: 'flex', flexDirection: 'column', gap: theme.spacing(FLEET_PANEL.gapUnits), minWidth: 0 }}\n >\n <Typography\n id={headingId}\n variant=\"subtitle1\"\n component=\"h2\"\n data-testid={`${testId}-title`}\n sx={{ fontWeight: theme.typography.fontWeightMedium }}\n >\n {copy.title}\n </Typography>\n\n <FleetStatus announcement={copy.loading} loading={loading} testId={testId} />\n\n {!loading && ordered.length === 0 ? (\n <EmptyState\n variant=\"minimal\"\n title={copy.emptyTitle}\n description={copy.emptyDescription}\n dataTestId={`${testId}-empty`}\n />\n ) : (\n <FleetBody\n ordered={ordered}\n centre={centre}\n markers={markers}\n select={select}\n onKeyDown={onKeyDown}\n copy={copy}\n selectedId={active}\n laggingAfterSeconds={laggingAfterSeconds}\n staleAfterSeconds={staleAfterSeconds}\n height={height}\n loading={loading}\n testId={testId}\n />\n )}\n </Box>\n );\n },\n);\n\nFleetMap.displayName = 'FleetMap';\n\nexport default FleetMap;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAA4B;AACrC,OAAO,WAAW;AAoDd,cA4DE,YA5DF;AApCJ,IAAM,gBAAgB,CAAC,UAAyB,IAAI,OAAO,GAAG;AAwB9D,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAE3B,MAAI,iBAAiB,OAAW,QAAO;AACvC,SACE,oBAAC,OAAI,MAAK,UAAS,aAAU,UAAS,eAAa,GAAG,MAAM,WAAW,IAAI,YACxE,oBAAU,eAAe,IAC5B;AAEJ;AA6BO,IAAM,WAAoC,MAAM;AAAA,EACrD,CAAC;AAAA,IACC;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,QAAQ,SAAS;AACvB,UAAM,SAAS,cAAc,cAAc,KAAK;AAChD,UAAM,SAAS,cAAc;AAC7B,UAAM,YAAY,MAAM,MAAM;AAC9B,UAAM,EAAE,SAAS,QAAQ,QAAQ,QAAQ,SAAS,UAAU,IAAI;AAAA,MAC9D;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,mBAAiB;AAAA,QACjB;AAAA,QACA,eAAa;AAAA,QACb,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAM,QAAQ,YAAY,QAAQ,GAAG,UAAU,EAAE;AAAA,QAEtG;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,eAAa,GAAG,MAAM;AAAA,cACtB,IAAI,EAAE,YAAY,MAAM,WAAW,iBAAiB;AAAA,cAEnD,eAAK;AAAA;AAAA,UACR;AAAA,UAEA,oBAAC,eAAY,cAAc,KAAK,SAAS,SAAkB,QAAgB;AAAA,UAE1E,CAAC,WAAW,QAAQ,WAAW,IAC9B;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAO,KAAK;AAAA,cACZ,aAAa,KAAK;AAAA,cAClB,YAAY,GAAG,MAAM;AAAA;AAAA,UACvB,IAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,YAAY;AAAA,cACZ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}

package/dist/{chunk-Y2E73IG2.js → chunk-AJ5SDHX5.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   NumberBoundInput
-} from "./chunk-2F4YEGYG.js";
+} from "./chunk-57FZM6GH.js";
 import {
   RangePresets
 } from "./chunk-7D7CJRL7.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk-HXEBKOSM.js";
 import {
   DayBoundInput
-} from "./chunk-VDZQJBAV.js";
+} from "./chunk-GY4NBSCN.js";
 import {
   fieldHeight
 } from "./chunk-CGO452DC.js";
@@ -183,7 +183,7 @@ function RangeTrigger({
         borderRadius: fieldRadiusPx,
         height: fieldHeight,
         px: 1.5,
-        maxWidth: 280,
+        maxWidth: sxRem(280),
         color: inverted ? "error.main" : "text.primary",
         fontWeight: 600,
         fontSize: sxRem(13),
@@ -291,4 +291,4 @@ export {
   RangePill,
   PanelRangeField
 };
-//# sourceMappingURL=chunk-Y2E73IG2.js.map
+//# sourceMappingURL=chunk-AJ5SDHX5.js.map

package/dist/chunk-AJ5SDHX5.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-pill.tsx"],"sourcesContent":["'use client';\n\n/**\n * A range filter as a PILL in the inline filter bar — the same affordance the\n * multi-select facets use, so \"Data\" and \"Valor\" sit in the filter row beside\n * \"Pagamento\"/\"Situação\"/\"Método\" instead of floating above the grid.\n *\n * Before this the inline bar rendered pills only, and `rangeFields` had a\n * surface on the slide-in panel alone — which `inlineFilters` REPLACES on a wide\n * screen. So a range filter was invisible on exactly the screens that use it,\n * and a page wanting one had to hang its own inputs outside the grid, outside\n * `DataViewState`, and outside the grid's \"Limpar filtros\" (FUT-668).\n */\nimport CloseIcon from '@mui/icons-material/Close';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { TableFilter } from '../../layout/TableFilter';\nimport { DayBoundInput } from './data-views-day-input';\nimport { NumberBoundInput } from './data-views-number-input';\nimport { RangePresets } from './data-views-preset-chips';\nimport { presetsFor } from './data-views-range-presets';\nimport {\n isRangeInverted,\n isRangeSet,\n numericRange,\n rangeChipLabel,\n} from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { sxRem } from '../../../tokens/relative';\n\n\n\n/**\n * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form\n * both the field and the backend speak) and is typed through the masked\n * `dd/mm/aaaa` field rather than a native date input — see\n * {@link DayBoundInput} for why. A number parses, and an unparseable/blank\n * entry CLEARS the bound rather than writing `NaN`.\n */\nfunction BoundField<T extends Record<string, unknown>>({\n field,\n label,\n value,\n onChange,\n testId,\n}: {\n field: RangeFieldConfig<T>;\n label: string;\n value: number | string | undefined;\n onChange: (bound: number | string | undefined) => void;\n testId: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n if (field.kind === 'day') {\n return (\n <DayBoundInput\n mask={copy.filters.dayMask}\n label={label}\n value={value == null ? undefined : String(value)}\n onChange={onChange}\n testId={testId}\n />\n );\n }\n return (\n <NumberBoundInput\n label={label}\n value={value}\n unit={field.unit}\n onChange={onChange}\n testId={testId}\n />\n );\n}\n\n\n/**\n * The `De`/`Até` pair for a range — shared by the pill's popover and the\n * slide-in panel's day fields, so the two surfaces cannot drift on what a bound\n * accepts or how it clears.\n */\nexport function RangeBounds<T extends Record<string, unknown>>({\n field,\n value,\n onChange,\n testId,\n}: {\n field: RangeFieldConfig<T>;\n value: RangeValue;\n onChange: (range: RangeValue) => void;\n testId: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n const inverted = isRangeInverted(value);\n return (\n <Box data-testid={`${testId}-panel`}>\n {/* Above the inputs, not below: the presets are the answer for most\n merchants, and the two date pickers are the escape hatch. */}\n <Box sx={{ '&:not(:empty)': { mb: 1.5 } }}>\n <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n </Box>\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n <BoundField\n field={field}\n label={copy.filters.rangeStart}\n value={value.min}\n onChange={(min) => onChange({ ...value, min })}\n testId={`${testId}-min`}\n />\n <BoundField\n field={field}\n label={copy.filters.rangeEnd}\n value={value.max}\n onChange={(max) => onChange({ ...value, max })}\n testId={`${testId}-max`}\n />\n </Box>\n {inverted && (\n <Typography\n component=\"p\"\n data-testid={`${testId}-inverted`}\n sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}\n >\n {copy.filters.rangeInvalid}\n </Typography>\n )}\n {/* BOTH days are in the result. Saying so is FUT-668's other half: the\n bounds compare as ISO strings precisely so `até` keeps its whole day,\n and nothing on screen would otherwise tell the merchant that. */}\n {field.kind === 'day' && !inverted && (\n <Typography\n component=\"p\"\n data-testid={`${testId}-inclusive`}\n sx={{ mt: 0.75, fontSize: sxRem(12), color: 'text.disabled' }}\n >\n {copy.filters.rangeInclusiveNote}\n </Typography>\n )}\n </Box>\n );\n}\n\n/**\n * The pill + its popover. Bounds commit on change (the list is server-driven, so\n * each edit is a query) and the popover stays open, which is what lets a\n * merchant set \"de\" and then \"até\" without re-opening it.\n */\n/** An applied range clears from the pill itself — re-opening to empty two fields is three gestures for one intent. */\nfunction ClearAffordance({\n label,\n onClear,\n testId,\n}: {\n label: string;\n onClear: () => void;\n testId: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n const clear = (event: React.SyntheticEvent): void => {\n event.stopPropagation();\n onClear();\n };\n return (\n <Box\n component=\"span\"\n role=\"button\"\n tabIndex={0}\n aria-label={copy.filters.clearRange(label)}\n data-testid={testId}\n onClick={clear}\n onKeyDown={(event: React.KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n clear(event);\n }}\n sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}\n >\n <CloseIcon sx={{ fontSize: sxRem(14) }} />\n </Box>\n );\n}\n\n/** The pill button: its label carries the applied window, and its tone the state. */\nfunction RangeTrigger<T extends Record<string, unknown>>({\n field,\n value,\n onChange,\n onOpen,\n open,\n testId,\n}: {\n field: RangeFieldConfig<T>;\n value: RangeValue;\n onChange: (range: RangeValue) => void;\n onOpen: (anchor: HTMLElement) => void;\n open: boolean;\n testId: string;\n}): React.JSX.Element {\n const active = isRangeSet(value);\n const inverted = isRangeInverted(value);\n // An INVERTED window gets its own tone rather than the ordinary \"applied\"\n // one: it is applied, and it matches nothing, and those are different states.\n // At rest the pill draws the one field border (`fieldEdge`).\n const tone = inverted ? 'error.main' : active ? 'primary.main' : null;\n return (\n <Button\n variant=\"outlined\"\n color=\"inherit\"\n size=\"small\"\n data-testid={testId}\n aria-haspopup=\"dialog\"\n aria-expanded={open}\n onClick={(event) => onOpen(event.currentTarget)}\n // ✕ FIRST, chevron LAST — the same shape as every other pill. It used to\n // replace the chevron at the end, so a range pill and a multi-select pill\n // put the clear in different places, and an applied range lost the\n // affordance that says it opens.\n startIcon={\n active ? (\n <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />\n ) : undefined\n }\n endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}\n sx={{\n borderRadius: fieldRadiusPx,\n height: fieldHeight,\n px: 1.5,\n maxWidth: sxRem(280),\n color: inverted ? 'error.main' : 'text.primary',\n fontWeight: 600,\n fontSize: sxRem(13),\n textTransform: 'none',\n whiteSpace: 'nowrap',\n borderColor: (theme) => tone ?? fieldEdge(theme),\n bgcolor: active ? 'action.selected' : 'background.paper',\n '&:hover': {\n borderColor: active ? tone : 'text.primary',\n bgcolor: active ? 'action.selected' : 'action.hover',\n },\n }}\n >\n {/* The applied bounds, in the label — a pill reading only \"Valor\" hides\n the very thing that is narrowing the list. */}\n <Box component=\"span\" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n {active ? rangeChipLabel(field, value) : field.label}\n </Box>\n </Button>\n );\n}\n\nexport function RangePill<T extends Record<string, unknown>>({\n field,\n value,\n onChange,\n onOpenChange,\n testIdPrefix,\n}: {\n field: RangeFieldConfig<T>;\n value: RangeValue;\n onChange: (range: RangeValue) => void;\n /** So a measured toolbar can hold still while this is open. */\n onOpenChange?: (open: boolean) => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n const active = isRangeSet(value);\n const testId = `${testIdPrefix}-range-${field.id}`;\n return (\n <>\n <RangeTrigger\n field={field}\n value={value}\n onChange={onChange}\n onOpen={(element) => {\n setAnchor(element);\n onOpenChange?.(true);\n }}\n open={Boolean(anchor)}\n testId={testId}\n />\n <Popover\n open={Boolean(anchor)}\n anchorEl={anchor}\n onClose={() => {\n setAnchor(null);\n onOpenChange?.(false);\n }}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n slotProps={{ paper: { sx: { p: 2, mt: 0.5 } } }}\n >\n <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />\n {/* An inverted window is not an error the merchant must fix before the\n list responds — it simply matches nothing, and saying so beats an\n empty grid with no explanation (FUT-668). */}\n {active && (\n <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>\n <Typography component=\"span\" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>\n {rangeChipLabel(field, value)}\n </Typography>\n <Button\n variant=\"text\"\n size=\"small\"\n onClick={() => onChange({})}\n data-testid={`${testId}-clear`}\n sx={{ textTransform: 'none' }}\n >\n {copy.filters.clear}\n </Button>\n </Box>\n )}\n </Popover>\n </>\n );\n}\n\n\n/**\n * One range on the SLIDE-IN panel (and the narrow-screen modal): the numeric\n * control the panel already had, or — for a day range, which that control cannot\n * express — the same `De`/`Até` pair the pill's popover uses.\n */\nexport function PanelRangeField<T extends Record<string, unknown>>({\n field,\n value,\n onChange,\n testId,\n}: {\n field: RangeFieldConfig<T>;\n value: RangeValue;\n onChange: (range: RangeValue) => void;\n testId: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n if (field.kind === \"day\") {\n return (\n <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n <Typography component=\"span\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: \"text.secondary\" }}>\n {field.label}\n </Typography>\n <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />\n </Box>\n );\n }\n return (\n <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n <TableFilter.RangeField\n label={field.label}\n unit={field.unit}\n value={numericRange(value)}\n onChange={(range) => onChange(range)}\n testId={testId}\n />\n {/* Below the numeric control here, unlike the pill's popover: this one\n renders its own label, and chips above it would separate the label\n from the field it names. */}\n <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n </Box>\n );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-ZHEZISMI.js → chunk-AK2HOD6B.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   DataViewsScopeTabs
-} from "./chunk-ZWSS3K4F.js";
+} from "./chunk-PL2AB5HJ.js";
 import {
   useDataViewsLayout
 } from "./chunk-4LQZH4PU.js";
@@ -34,4 +34,4 @@ function ScopeTabsSlot({
 export {
   ScopeTabsSlot
 };
-//# sourceMappingURL=chunk-ZHEZISMI.js.map
+//# sourceMappingURL=chunk-AK2HOD6B.js.map

package/dist/{chunk-2PWVPTS3.js → chunk-AUHYR7ID.js} RENAMED Viewed

@@ -5,7 +5,7 @@ import {
   fadeInScale,
   getColorFromTheme,
   getVariantIcon
-} from "./chunk-A2CTAEIS.js";
+} from "./chunk-MO47Y26B.js";
 import {
   resolveAlertProps,
   resolveAnnouncement,
@@ -36,6 +36,8 @@ import {
   modeInk
 } from "./chunk-FQ6UW7IY.js";
 import {
+  rem,
+  rems,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -52,7 +54,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
 function pointerShadow(theme, colorPalette, glow, variant) {
   const ink = variant === "gradient" ? absoluteInk(theme).black : modeInk(theme);
-  const glowShadow = glow ? `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}` : null;
+  const glowShadow = glow ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}` : null;
   return (alpha_) => [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(", ");
 }
 var StyledAlert = styled(MuiAlert, {
@@ -65,7 +67,7 @@ var StyledAlert = styled(MuiAlert, {
     transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,
     position: "relative",
     overflow: "hidden",
-    animation: animate ? `${fadeInScale} ${seconds(FADE_IN.ms)} ease-out` : "none",
+    animation: animate ? `${fadeInScale(theme)} ${seconds(FADE_IN.ms)} ease-out` : "none",
     willChange: "transform, opacity",
     ...alertLayoutStyles(theme, colorPalette, animate),
     // Hover: one tint step, and nothing that moves. An alert is a surface
@@ -118,11 +120,11 @@ var StyledAlert = styled(MuiAlert, {
     // every keyboard focus, and it would also outrank the root's opacity
     // transition the way the hover block did.
     "&:focus-visible": {
-      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
-      outlineOffset: `${FOCUS.offset}px`
+      outline: `${rem(theme, FOCUS.ringWidth)} solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: rem(theme, FOCUS.offset)
     },
     ...alertVariantStyles(theme, customVariant, colorPalette),
-    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse))
+    ...alertEmphasisStyles(theme, colorPalette, Boolean(glow), Boolean(pulse))
   };
 });
 var MUI_SEVERITY = {
@@ -210,8 +212,8 @@ var AlertCloseButton = ({
         // translucent surface's contrast depends on what sits behind it, which
         // is why that test stops where it does and why this comment does not
         // borrow a guarantee it never made.
-        outline: `${FOCUS.ringWidth}px solid currentColor`,
-        outlineOffset: `${FOCUS.offset}px`,
+        outline: `${rem(theme, FOCUS.ringWidth)} solid currentColor`,
+        outlineOffset: rem(theme, FOCUS.offset),
         backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha)
       }
     }),
@@ -290,4 +292,4 @@ export {
   Alert,
   ALERT_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-2PWVPTS3.js.map
+//# sourceMappingURL=chunk-AUHYR7ID.js.map

package/dist/chunk-AUHYR7ID.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Alert/Alert.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport MuiAlert from '@mui/material/Alert/index.js';\nimport AlertTitle from '@mui/material/AlertTitle/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { absoluteInk, modeInk } from '../../../tokens/ink';\n\nimport { resolveAlertProps, resolveAnnouncement, testIdFor } from './Alert.helpers';\nimport type { AlertPalette } from './Alert.metrics';\nimport {\n ACTIVE,\n GLOW,\n ALERT_EASING,\n ALERT_RADIUS_UNITS,\n ALERT_TRANSITION_MS,\n CLOSE_BUTTON,\n CLOSE_DELAY_MS,\n COLLAPSE_MS,\n DESCRIPTION,\n FADE_IN,\n FOCUS,\n HOVER,\n seconds,\n TITLE,\n} from './Alert.metrics';\nimport {\n alertEmphasisStyles,\n alertLayoutStyles,\n alertVariantStyles,\n fadeInScale,\n getColorFromTheme,\n getVariantIcon,\n} from './Alert.styles';\nimport type { AlertColor } from '@mui/material/Alert/index.js';\nimport type { AlertProps } from './Alert.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\nconst transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;\n\n// Define animations\n/**\n * The pointer states' shadow: a flat tint, plus the glow when the alert has one.\n *\n * The tint is an inset spread at 100vmax, which always exceeds the element, so\n * it covers the surface edge to edge. It paints ABOVE the background and BELOW\n * the content, which is what keeps the ink's own contrast out of these states\n * entirely — see `ACTIVE` in `Alert.metrics.ts` for why a layer replaced the\n * opacity dip and the brightness multiplier that each preceded it.\n *\n * The glow is COMPOSED rather than replaced, so hovering a glowing alert keeps\n * its glow; `glowStyles` gave up its `!important` for this.\n */\nfunction pointerShadow(\n theme: Theme,\n colorPalette: AlertPalette,\n glow: boolean,\n variant: string | undefined,\n): (alpha_: number) => string {\n // The tint moves the surface AWAY from its own ink, which is why this reads\n // the variant and not only the mode.\n //\n // `gradient` is the one variant where the two disagree: it paints a\n // mid-lightness sweep (L* 42–61) under WHITE ink in BOTH modes, so the\n // mode-keyed answer tinted it white in dark mode — toward the text. Measured:\n // white-on-gradient fell to 2.90:1 on hover and 2.41:1 pressed, under the 3:1\n // floor and below its own idle. Every other variant's surface tracks the mode,\n // so for them the two rules agree.\n const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);\n const glowShadow = glow\n ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`\n : null;\n return (alpha_) =>\n [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(', ');\n}\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) =>\n !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string),\n})<{\n customVariant?: string;\n customColor?: string;\n glow?: boolean;\n pulse?: boolean;\n animate?: boolean;\n}>(({ theme, customVariant, customColor, glow, pulse, animate }) => {\n const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');\n\n const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);\n\n return {\n borderRadius: theme.spacing(ALERT_RADIUS_UNITS),\n transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,\n position: 'relative',\n overflow: 'hidden',\n animation: animate ? `${fadeInScale(theme)} ${seconds(FADE_IN.ms)} ease-out` : 'none',\n willChange: 'transform, opacity',\n\n ...alertLayoutStyles(theme, colorPalette, animate),\n\n // Hover: one tint step, and nothing that moves. An alert is a surface\n // rather than a control, so the pointer only needs telling it is here. The\n // icon keeps its own place for the same reason — it is the variant's\n // meaning, not an affordance to animate.\n '&:hover': {\n boxShadow: withTint(HOVER.tintAlpha),\n\n '&::before': {\n opacity: 1,\n },\n },\n\n // Press: a 20% tint, landing at once and easing back. Still no geometry.\n //\n // `transition: none` here is what makes the dip INSTANT: a click's\n // `:active` lasts about as long as the finger is down, so easing into it\n // would be cut off in its first tenth and read as a flicker. The ease is on\n // the way back, governed by the root.\n //\n // Neither `:hover` nor `:focus-visible` may declare `transition`, and that\n // is not a style preference. `:active` under a mouse ALWAYS implies\n // `:hover`, so a bare shorthand in the hover block outranks the root's\n // (0,2,0 beats 0,1,0) and silently resets the timing this state rests on.\n //\n // The `:not(:has(…))` names CONTROLS, not any descendant. `:active`\n // matches an ancestor of whatever is pressed, so dismissing an alert\n // dimmed the alert being dismissed and pressing a call to action dimmed\n // the message explaining it. Excluding `:has(:active)` wholesale does not\n // work and was the first attempt: pressing the TEXT makes that text\n // `:active` too, so the guard matched on every press and the state never\n // fired at all.\n '&:active:not(:has(button:active, a:active, [role=\"button\"]:active))': {\n boxShadow: withTint(ACTIVE.tintAlpha),\n transition: 'none',\n },\n\n // Focus: `:focus-visible`, not `:focus-within`.\n //\n // The alert carries `tabIndex={0}`, so a MOUSE CLICK focused it and painted\n // the ring — a keyboard affordance answering a pointer, which is what made\n // clicking one look like an error state. `:focus-visible` is the browser's\n // own answer to \"did this focus come from the keyboard\": the ring stays for\n // whoever tabs here and never fires on a click.\n //\n // One ring, not three. It was a 3px outline at 3px offset UNDER a 6px halo,\n // and stacking two rings on one edge is what read as unfinished rather than\n // as emphasis.\n // It declares no `transition`: `outline-style` is discrete, so the ring\n // arrives at full width with only its COLOUR easing — from `currentcolor`,\n // the near-black alert ink, to the blue. That is a visible dark flash on\n // every keyboard focus, and it would also outrank the root's opacity\n // transition the way the hover block did.\n '&:focus-visible': {\n outline: `${rem(theme, FOCUS.ringWidth)} solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n outlineOffset: rem(theme, FOCUS.offset),\n },\n\n ...alertVariantStyles(theme, customVariant, colorPalette),\n ...alertEmphasisStyles(theme, colorPalette, Boolean(glow), Boolean(pulse)),\n };\n});\n\n// glass and gradient are our own looks with no MUI severity of their own; both\n// borrow info's. danger is MUI's error.\nconst MUI_SEVERITY: Record<string, AlertColor> = {\n danger: 'error',\n glass: 'info',\n gradient: 'info',\n};\n\nconst toMuiSeverity = (variant: string): AlertColor =>\n MUI_SEVERITY[variant] ?? (variant as AlertColor);\n\nconst AlertContent: React.FC<{\n title?: AlertProps['title'];\n description?: AlertProps['description'];\n dataTestId?: string;\n children?: React.ReactNode;\n}> = ({ title, description, dataTestId, children }) => (\n <>\n {title && (\n <AlertTitle\n data-testid={testIdFor(dataTestId, 'title')}\n sx={{\n fontWeight: TITLE.fontWeight,\n fontSize: sxRem(TITLE.fontSize),\n marginBottom: description ? TITLE.marginBottomUnits : 0,\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n wordBreak: 'break-word',\n }}\n >\n {title}\n </AlertTitle>\n )}\n {description && (\n <Box\n component=\"div\"\n data-testid={testIdFor(dataTestId, 'message')}\n sx={{\n opacity: DESCRIPTION.opacity,\n fontSize: sxRem(DESCRIPTION.fontSize),\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n wordBreak: 'break-word',\n }}\n >\n {description}\n </Box>\n )}\n {children}\n </>\n);\n\nconst AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose: () => void }> = ({\n dataTestId,\n label,\n onClose,\n}) => (\n <IconButton\n data-testid={testIdFor(dataTestId, 'close')}\n aria-label={label}\n color=\"inherit\"\n size=\"small\"\n onClick={onClose}\n sx={(theme) => ({\n transition,\n opacity: CLOSE_BUTTON.opacity,\n // Opacity and a wash only: the button used to spin 90deg and grow 1.1,\n // which drew the eye to the dismiss rather than to the message.\n '&:hover': {\n opacity: 1,\n backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha),\n },\n // A REAL ring, on the keyboard-only selector.\n //\n // This used to be `&:focus` setting `outline: 'none'` over a\n // `rgba(0,0,0,0.1)` wash — 1.25:1 against the info surface, and MUI's\n // ButtonBase already sets `outline: 0`, so there was no UA fallback\n // either. It went unnoticed while the ROOT still matched `:focus-within`\n // and drew a ring around the whole alert; moving the root to\n // `:focus-visible` took that away and left this button with no visible\n // focus at all. `Banner`'s dismiss already draws its own outline, so\n // this is also what keeps the two surfaces telling a keyboard user the\n // same thing.\n '&:focus-visible': {\n opacity: 1,\n // `currentColor` is the alert's own ink, inherited through\n // `color=\"inherit\"`, so the ring is drawn in whatever colour was\n // already chosen to be READ on this surface. Measured 11.2:1 on the\n // semantic variants and 5.7:1 on `gradient`.\n //\n // That is a reasoned choice, not a test-backed one, and the difference\n // matters: `alert-contrast.test.tsx` covers the ink of the four\n // semantic variants only — its `glass` case asserts the pane's alpha\n // rather than its ink, and `gradient` it does not render at all. A\n // translucent surface's contrast depends on what sits behind it, which\n // is why that test stops where it does and why this comment does not\n // borrow a guarantee it never made.\n outline: `${rem(theme, FOCUS.ringWidth)} solid currentColor`,\n outlineOffset: rem(theme, FOCUS.offset),\n backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha),\n },\n })}\n >\n <Close fontSize=\"inherit\" />\n </IconButton>\n);\n\n/**\n * The dismiss button, or nothing.\n *\n * Reads `closeLabel` straight off the props rather than through the\n * `definedProps` merge, which would widen it to `string | undefined` and hand\n * the button an empty name. The UNION in `AlertProps` guarantees the label\n * wherever `closable` is true — that narrowing is gone inside the component,\n * which is why the fallback below exists and why it is unreachable.\n */\nfunction dismissButton(\n props: AlertProps,\n dataTestId: string | undefined,\n onClose: () => void,\n): React.JSX.Element | null {\n if (!props.closable) return null;\n return <AlertCloseButton dataTestId={dataTestId} label={props.closeLabel} onClose={onClose} />;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>((alertProps, ref) => {\n const {\n variant,\n color,\n glow,\n pulse,\n icon,\n showIcon,\n onClose,\n title,\n description,\n children,\n animate,\n role: _role, announce: _announce, // resolved from `alertProps` — see `resolveAnnouncement`\n 'aria-atomic': ariaAtomic,\n ...others\n } = resolveAlertProps(alertProps);\n\n // Every spelling of the test id the shared contract allows, mapped to the\n // one the DOM reads and defaulted to `alert`; the native Alert does the same.\n const dataTestId = resolveTestId(others, 'alert');\n // Then the dismiss union, which `dismissButton` reads off `alertProps` rather\n // than through this destructure — so without this strip it rides `...props`\n // onto the DOM. `ALERT_DEFAULTS` supplies `closable: false`, so that happened\n // on EVERY alert, not only the closable ones.\n const props = withoutAlertOnlyProps(withoutTestIdProps(others));\n\n // Depends on `variant`, so it cannot live in the static defaults above.\n const announcement = resolveAnnouncement(alertProps, variant);\n const [open, setOpen] = React.useState(true);\n const [isClosing, setIsClosing] = React.useState(false);\n\n const handleClose = () => {\n setIsClosing(true);\n window.setTimeout(() => {\n setOpen(false);\n onClose?.();\n }, CLOSE_DELAY_MS);\n };\n\n const severity = toMuiSeverity(variant);\n\n const displayIcon = showIcon ? (\n <Box component=\"span\" data-testid={testIdFor(dataTestId, 'icon')}>\n {icon || getVariantIcon(variant)}\n </Box>\n ) : (\n false\n );\n\n const content = (\n <AlertContent title={title} description={description} dataTestId={dataTestId}>\n {children}\n </AlertContent>\n );\n\n return (\n <Collapse in={open && !isClosing} timeout={COLLAPSE_MS}>\n <StyledAlert\n ref={ref}\n data-testid={dataTestId}\n severity={severity}\n customVariant={variant}\n customColor={color}\n glow={glow}\n pulse={pulse}\n animate={animate}\n icon={displayIcon}\n role={announcement.role}\n aria-live={announcement['aria-live']}\n aria-atomic={ariaAtomic}\n tabIndex={0}\n action={dismissButton(alertProps, dataTestId, handleClose)}\n {...props}\n >\n {content}\n </StyledAlert>\n </Collapse>\n );\n});\n\n/**\n * The props `Alert` OWNS, which must never reach the DOM.\n *\n * `AlertProps` extends MUI's, whose rest-spread is how a host's real HTML\n * attributes get onto the root — so the same spread carries the alert's own\n * configuration unless it is named here. Everything else the component consumes\n * leaves through the destructure above; these two do not, because\n * `dismissButton` reads them off the original props to keep the dismiss union's\n * narrowing intact.\n *\n * Exported so a test can render an alert carrying every name on it and assert\n * none reaches the DOM — the check that would have caught `closable`.\n */\nexport const ALERT_ONLY_PROPS = ['closable', 'closeLabel'] as const;\n\nfunction withoutAlertOnlyProps<P extends object>(rest: P): P {\n const html = { ...rest } as Record<string, unknown>;\n for (const key of ALERT_ONLY_PROPS) delete html[key];\n return html as P;\n}\n\nAlert.displayName = 'Alert';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,SAAS,OAAO,cAAc;AAE9B,OAAO,WAAW;AAgLhB,mBAEI,KAFJ;AA7IF,IAAM,aAAa,OAAO,QAAQ,mBAAmB,CAAC,IAAI,YAAY;AAetE,SAAS,cACP,OACA,cACA,MACA,SAC4B;AAU5B,QAAM,MAAM,YAAY,aAAa,YAAY,KAAK,EAAE,QAAQ,QAAQ,KAAK;AAC7E,QAAM,aAAa,OACf,OAAO,KAAK,OAAO,KAAK,MAAM,KAAK,MAAM,CAAC,IAAI,MAAM,aAAa,MAAM,KAAK,KAAK,CAAC,KAClF;AACJ,SAAO,CAAC,WACN,CAAC,uBAAuB,MAAM,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AACvF;AAEA,IAAM,cAAc,OAAO,UAAU;AAAA,EACnC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,QAAQ,SAAS,SAAS,EAAE,SAAS,IAAc;AACzF,CAAC,EAME,CAAC,EAAE,OAAO,eAAe,aAAa,MAAM,OAAO,QAAQ,MAAM;AAClE,QAAM,eAAe,kBAAkB,OAAO,eAAe,iBAAiB,MAAM;AAEpF,QAAM,WAAW,cAAc,OAAO,cAAc,QAAQ,IAAI,GAAG,aAAa;AAEhF,SAAO;AAAA,IACL,cAAc,MAAM,QAAQ,kBAAkB;AAAA,IAC9C,YAAY,GAAG,UAAU,gBAAgB,QAAQ,OAAO,EAAE,CAAC,IAAI,YAAY;AAAA,IAC3E,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW,UAAU,GAAG,YAAY,KAAK,CAAC,IAAI,QAAQ,QAAQ,EAAE,CAAC,cAAc;AAAA,IAC/E,YAAY;AAAA,IAEZ,GAAG,kBAAkB,OAAO,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjD,WAAW;AAAA,MACT,WAAW,SAAS,MAAM,SAAS;AAAA,MAEnC,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqBA,uEAAuE;AAAA,MACrE,WAAW,SAAS,OAAO,SAAS;AAAA,MACpC,YAAY;AAAA,IACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBA,mBAAmB;AAAA,MACjB,SAAS,GAAG,IAAI,OAAO,MAAM,SAAS,CAAC,UAAU,MAAM,aAAa,MAAM,MAAM,SAAS,CAAC;AAAA,MAC1F,eAAe,IAAI,OAAO,MAAM,MAAM;AAAA,IACxC;AAAA,IAEA,GAAG,mBAAmB,OAAO,eAAe,YAAY;AAAA,IACxD,GAAG,oBAAoB,OAAO,cAAc,QAAQ,IAAI,GAAG,QAAQ,KAAK,CAAC;AAAA,EAC3E;AACF,CAAC;AAID,IAAM,eAA2C;AAAA,EAC/C,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,IAAM,gBAAgB,CAAC,YACrB,aAAa,OAAO,KAAM;AAE5B,IAAM,eAKD,CAAC,EAAE,OAAO,aAAa,YAAY,SAAS,MAC/C,iCACG;AAAA,WACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,UAAU,YAAY,OAAO;AAAA,MAC1C,IAAI;AAAA,QACF,YAAY,MAAM;AAAA,QAClB,UAAU,MAAM,MAAM,QAAQ;AAAA,QAC9B,cAAc,cAAc,MAAM,oBAAoB;AAAA,QACtD,UAAU;AAAA,QACV,cAAc;AAAA,QACd,WAAW;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa,UAAU,YAAY,SAAS;AAAA,MAC5C,IAAI;AAAA,QACF,SAAS,YAAY;AAAA,QACrB,UAAU,MAAM,YAAY,QAAQ;AAAA,QACpC,UAAU;AAAA,QACV,cAAc;AAAA,QACd,WAAW;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAAA,EAED;AAAA,GACH;AAGF,IAAM,mBAA0F,CAAC;AAAA,EAC/F;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAa,UAAU,YAAY,OAAO;AAAA,IAC1C,cAAY;AAAA,IACZ,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAS;AAAA,IACT,IAAI,CAAC,WAAW;AAAA,MACd;AAAA,MACA,SAAS,aAAa;AAAA;AAAA;AAAA,MAGtB,WAAW;AAAA,QACT,SAAS;AAAA,QACT,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,aAAa,SAAS;AAAA,MAC3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYA,mBAAmB;AAAA,QACjB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT,SAAS,GAAG,IAAI,OAAO,MAAM,SAAS,CAAC;AAAA,QACvC,eAAe,IAAI,OAAO,MAAM,MAAM;AAAA,QACtC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,aAAa,SAAS;AAAA,MAC3E;AAAA,IACF;AAAA,IAEA,8BAAC,SAAM,UAAS,WAAU;AAAA;AAC5B;AAYF,SAAS,cACP,OACA,YACA,SAC0B;AAC1B,MAAI,CAAC,MAAM,SAAU,QAAO;AAC5B,SAAO,oBAAC,oBAAiB,YAAwB,OAAO,MAAM,YAAY,SAAkB;AAC9F;AAEO,IAAM,QAAQ,MAAM,WAAuC,CAAC,YAAY,QAAQ;AACrF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IAAO,UAAU;AAAA;AAAA,IACvB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,kBAAkB,UAAU;AAIhC,QAAM,aAAa,cAAc,QAAQ,OAAO;AAKhD,QAAM,QAAQ,sBAAsB,mBAAmB,MAAM,CAAC;AAG9D,QAAM,eAAe,oBAAoB,YAAY,OAAO;AAC5D,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,IAAI;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAEtD,QAAM,cAAc,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,WAAW,MAAM;AACtB,cAAQ,KAAK;AACb,gBAAU;AAAA,IACZ,GAAG,cAAc;AAAA,EACnB;AAEA,QAAM,WAAW,cAAc,OAAO;AAEtC,QAAM,cAAc,WAClB,oBAAC,OAAI,WAAU,QAAO,eAAa,UAAU,YAAY,MAAM,GAC5D,kBAAQ,eAAe,OAAO,GACjC,IAEA;AAGF,QAAM,UACJ,oBAAC,gBAAa,OAAc,aAA0B,YACnD,UACH;AAGF,SACE,oBAAC,YAAS,IAAI,QAAQ,CAAC,WAAW,SAAS,aACzC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,eAAe;AAAA,MACf,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa;AAAA,MACnB,aAAW,aAAa,WAAW;AAAA,MACnC,eAAa;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,cAAc,YAAY,YAAY,WAAW;AAAA,MACxD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAeM,IAAM,mBAAmB,CAAC,YAAY,YAAY;AAEzD,SAAS,sBAAwC,MAAY;AAC3D,QAAM,OAAO,EAAE,GAAG,KAAK;AACvB,aAAW,OAAO,iBAAkB,QAAO,KAAK,GAAG;AACnD,SAAO;AACT;AAEA,MAAM,cAAc;","names":[]}

package/dist/{chunk-QWHURFJ3.js → chunk-B2VXP2B2.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   DragHandle
-} from "./chunk-JCJGJX7V.js";
+} from "./chunk-K4EKTMTC.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -10,12 +10,15 @@ import {
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DataViews/base-list-card-gutters.tsx
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import IconButton from "@mui/material/IconButton/index.js";
 import { jsx } from "react/jsx-runtime";
-var CHECKBOX_PAD = "-9px";
+var CHECKBOX_PAD = sxRem(-9);
 function DragSlot({
   drag,
   reserve,
@@ -131,4 +134,4 @@ export {
   SelectSlot,
   DiscloseSlot
 };
-//# sourceMappingURL=chunk-QWHURFJ3.js.map
+//# sourceMappingURL=chunk-B2VXP2B2.js.map

package/dist/chunk-B2VXP2B2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-gutters.tsx"],"sourcesContent":["\"use client\";\n\nimport KeyboardArrowRightIcon from \"@mui/icons-material/KeyboardArrowRight\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\n\nimport { Checkbox } from \"../../form/Checkbox\";\nimport { Box } from \"../../../mui/Box\";\nimport { sxRem } from \"../../../tokens/relative\";\n\nimport { DragHandle, useDragItem } from \"./data-views-drag\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/**\n * THE THREE GUTTERS AT THE HEAD OF A ROW — the disclosure chevron, the drag grip\n * and the select checkbox.\n *\n * Split from `base-list-card` at the size gate. All three answer the same\n * question in the same way: whether to occupy a rail, hold one open, or leave\n * the template altogether. See `railsTemplateFor` for why the third option has\n * to exist.\n */\n\n/**\n * MUI's Checkbox carries 9px of hit-area padding on every side.\n *\n * Left uncancelled, a row asking for 8px of padding puts the checkbox SQUARE 17px\n * in — and with the empty drag gutter's gap ahead of it, 46px in, which is what\n * made the left edge look like a mistake. The hit area is worth keeping; the\n * optical inset is not, so the padding is cancelled with a negative margin and\n * the glyph lands where the row's own padding says it should.\n */\nconst CHECKBOX_PAD = sxRem(-9);\n\n/** The grip. Its gutter is reserved only when the list says to reserve it. */\nexport function DragSlot({\n drag,\n reserve,\n testId,\n}: {\n drag: ReturnType<typeof useDragItem>;\n reserve: boolean;\n testId?: string;\n}): React.JSX.Element | null {\n if (!drag.draggable) return reserve ? <Box data-slot=\"drag\" /> : null;\n return (\n // display:flex, as on the checkbox below: the grip is an inline-grid, and in\n // a block parent an inline box sits on the text baseline — the line box adds\n // descender leading under it (21px glyph in a 31px slot) and drops the grip\n // 5px below the row's centre. A flex parent has no baseline to sit on.\n <Box\n data-slot=\"drag\"\n sx={{ position: \"relative\", zIndex: 1, display: \"flex\", alignItems: \"center\" }}\n >\n <DragHandle\n handleProps={drag.handleProps}\n gated={drag.handleProps !== undefined}\n testId={testId}\n />\n </Box>\n );\n}\n\n/** The select checkbox. Its gutter is reserved only when the list says to. */\nexport function SelectSlot({\n selectable,\n selected,\n reserve,\n onToggleSelect,\n testId,\n}: {\n selectable: boolean;\n selected: boolean;\n reserve: boolean;\n onToggleSelect?: (event?: React.MouseEvent) => void;\n testId?: string;\n}): React.JSX.Element | null {\n const copy = useDataViewsCopy();\n if (!selectable) return reserve ? <Box data-slot=\"select\" /> : null;\n return (\n // z-index 1: above the stretched link, or the anchor swallows the click.\n <Box\n data-slot=\"select\"\n sx={{ position: \"relative\", zIndex: 1, mx: CHECKBOX_PAD, display: \"flex\" }}\n >\n <Checkbox\n checked={selected}\n onChange={() => onToggleSelect?.()}\n onClick={(event) => {\n event.stopPropagation();\n onToggleSelect?.(event);\n }}\n size=\"small\"\n data-testid={testId}\n aria-label={copy.selection.selectRow}\n />\n </Box>\n );\n}\n\n/**\n * THE DISCLOSURE CHEVRON — the affordance that says this row has more.\n *\n * Rendered only when the card was given a body to reveal. A chevron on a row\n * that opens onto nothing is worse than no chevron: it is a promise the row\n * cannot keep, and an operator who presses it twice learns to stop trusting the\n * column. So `BaseListCard` passes `null` here when it has no children, the\n * slot returns nothing, and — standalone — the rail leaves the template\n * entirely.\n *\n * ROTATED, NOT SWAPPED. One glyph turned 90° rather than a right-chevron\n * exchanged for a down-chevron: the rotation is animatable and reads as the\n * same object moving, where a swap is two icons flickering. It also keeps the\n * button's box identical in both states, so the caption beside it cannot shift\n * as the row opens.\n *\n * `stopPropagation`, because a row is frequently clickable in its own right —\n * opening the record is not the same act as peeking at its detail, and without\n * this the chevron would do both at once.\n */\nexport function DiscloseSlot({\n expandable,\n expanded,\n reserve,\n onToggle,\n controls,\n testId,\n}: {\n expandable: boolean;\n expanded: boolean;\n reserve: boolean;\n onToggle: () => void;\n /** The id of the region this button opens, for `aria-controls`. */\n controls: string;\n testId?: string;\n}): React.JSX.Element | null {\n const copy = useDataViewsCopy();\n if (!expandable) return reserve ? <Box data-slot=\"disclose\" /> : null;\n return (\n // z-index 1 and flex for the same reasons the other two gutters use them:\n // above a stretched link that would otherwise swallow the click, and out of\n // a baseline that would drop the glyph below the row's centre.\n <Box\n data-slot=\"disclose\"\n sx={{ position: \"relative\", zIndex: 1, display: \"flex\", alignItems: \"center\" }}\n >\n <IconButton\n size=\"small\"\n aria-expanded={expanded}\n aria-controls={expanded ? controls : undefined}\n aria-label={expanded ? copy.selection.collapseRow : copy.selection.expandRow}\n data-testid={testId}\n onClick={(event) => {\n event.stopPropagation();\n onToggle();\n }}\n // The row's own keyboard handler treats Enter/Space as \"open the\n // record\"; the button already handles both, so the event must not reach\n // it and fire the second action too.\n onKeyDown={(event) => event.stopPropagation()}\n sx={{\n p: 0.25,\n transform: expanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n transition: \"transform 150ms ease\",\n // Honour a reduced-motion preference: the state is carried by the\n // angle, not by the animation, so dropping the tween loses nothing.\n \"@media (prefers-reduced-motion: reduce)\": { transition: \"none\" },\n }}\n >\n <KeyboardArrowRightIcon fontSize=\"small\" />\n </IconButton>\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,OAAO,4BAA4B;AACnC,OAAO,gBAAgB;AAwCiB;AAZxC,IAAM,eAAe,MAAM,EAAE;AAGtB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAC3B,MAAI,CAAC,KAAK,UAAW,QAAO,UAAU,oBAACA,UAAA,EAAI,aAAU,QAAO,IAAK;AACjE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,SAAS,QAAQ,YAAY,SAAS;AAAA,QAE7E;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,KAAK;AAAA,YAClB,OAAO,KAAK,gBAAgB;AAAA,YAC5B;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,WAAY,QAAO,UAAU,oBAACA,UAAA,EAAI,aAAU,UAAS,IAAK;AAC/D;AAAA;AAAA,IAEE;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,IAAI,cAAc,SAAS,OAAO;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU,MAAM,iBAAiB;AAAA,YACjC,SAAS,CAAC,UAAU;AAClB,oBAAM,gBAAgB;AACtB,+BAAiB,KAAK;AAAA,YACxB;AAAA,YACA,MAAK;AAAA,YACL,eAAa;AAAA,YACb,cAAY,KAAK,UAAU;AAAA;AAAA,QAC7B;AAAA;AAAA,IACF;AAAA;AAEJ;AAsBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQ6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,WAAY,QAAO,UAAU,oBAACA,UAAA,EAAI,aAAU,YAAW,IAAK;AACjE;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,SAAS,QAAQ,YAAY,SAAS;AAAA,QAE7E;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,WAAW,WAAW;AAAA,YACrC,cAAY,WAAW,KAAK,UAAU,cAAc,KAAK,UAAU;AAAA,YACnE,eAAa;AAAA,YACb,SAAS,CAAC,UAAU;AAClB,oBAAM,gBAAgB;AACtB,uBAAS;AAAA,YACX;AAAA,YAIA,WAAW,CAAC,UAAU,MAAM,gBAAgB;AAAA,YAC5C,IAAI;AAAA,cACF,GAAG;AAAA,cACH,WAAW,WAAW,kBAAkB;AAAA,cACxC,YAAY;AAAA;AAAA;AAAA,cAGZ,2CAA2C,EAAE,YAAY,OAAO;AAAA,YAClE;AAAA,YAEA,8BAAC,0BAAuB,UAAS,SAAQ;AAAA;AAAA,QAC3C;AAAA;AAAA,IACF;AAAA;AAEJ;","names":["default"]}

package/dist/{chunk-YSKGLU2V.js → chunk-B7BNNSM2.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import {
   DataViewsDisplayPanel
-} from "./chunk-5RP3KXC7.js";
+} from "./chunk-DY4BP5WA.js";
 import {
   DataViewsExportMenu
-} from "./chunk-JHEGDDZQ.js";
+} from "./chunk-RKI3MRKX.js";
 import {
   renderBulkActions
-} from "./chunk-LOJK733T.js";
+} from "./chunk-KJK2Q35C.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -22,6 +22,9 @@ import {
 import {
   Text
 } from "./chunk-WTOYEWW6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DataViews/data-views-toolbar.tsx
 import Divider from "@mui/material/Divider/index.js";
@@ -48,7 +51,7 @@ function ToolbarRightControls(props) {
         {
           orientation: "vertical",
           flexItem: true,
-          sx: { height: 20, alignSelf: "center", mx: 0.5 }
+          sx: { height: sxRem(20), alignSelf: "center", mx: 0.5 }
         }
       )
     ] }),
@@ -133,4 +136,4 @@ function GridToolbar(props) {
 export {
   GridToolbar
 };
-//# sourceMappingURL=chunk-YSKGLU2V.js.map
+//# sourceMappingURL=chunk-B7BNNSM2.js.map

package/dist/chunk-B7BNNSM2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport Divider from \"@mui/material/Divider/index.js\";\n\nimport {\n ContentToolbar,\n FilterTrigger,\n type ColumnVisibilityOption,\n type SortFieldDefinition,\n} from \"../../layout/ContentToolbar\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { DataViewsDisplayPanel, type DisplayPanelView } from \"./data-views-display-panel\";\nimport { DataViewsExportMenu, type DataViewExport } from \"./data-views-export\";\nimport { renderBulkActions } from \"./data-views-grid-helpers\";\nimport type { RowAction } from \"./data-views-types\";\nimport type { DataViewsController } from \"./use-data-views-state\";\nimport { sxRem } from \"../../../tokens/relative\";\n\nexport interface GridToolbarProps<T extends Record<string, unknown>> {\n testIdPrefix: string;\n selectedRows: T[];\n selectAll: () => void;\n clearSelection: () => void;\n rowActions?: RowAction<T>[];\n bulkActions?: (selectedRows: T[], clearSelection: () => void) => React.ReactNode;\n /** A control between the count and the actions menu — see `selectionExtra`. */\n selectionExtra?: React.ReactNode;\n sortFields: SortFieldDefinition[];\n activeSortField: string;\n activeSortOrder: \"asc\" | \"desc\";\n onChangeSort: (field: string, order: \"asc\" | \"desc\") => void;\n matchedCount: number;\n totalCount: number;\n toolbarRightSlot?: React.ReactNode;\n columnOptions: ColumnVisibilityOption[];\n onToggleColumn: (id: string, visible: boolean) => void;\n filterOpen: boolean;\n setFilterOpen: (open: boolean) => void;\n activeFilterCount: number;\n /** Hide the \"Filtros\" slide-in trigger (compact layout shows filters inline). */\n showFilterTrigger?: boolean;\n /**\n * Search + filter controls, rendered ON the toolbar line rather than on a row\n * beneath it. Absent ⇒ the toolbar keeps its plain two-cluster shape.\n */\n filterControls?: React.ReactNode;\n /** Measures the toolbar ROW for the filter overflow — see `useFilterOverflow`. */\n barRef?: React.Ref<HTMLDivElement>;\n /** The controller, so \"Exibir\" can drive sort, columns, order and format. */\n c: DataViewsController<T>;\n /** Per-sort-field value kind, so directions read in the column's own terms. */\n sortKinds?: Record<string, string>;\n /** The saved-view chrome bracketing the Exibir panel, when the host has views. */\n displayView?: DisplayPanelView;\n /** Injected export. Absent ⇒ no Exportar control. */\n exportConfig?: DataViewExport;\n /**\n * Step 2 of the degradation ladder: Exibir/Exportar as icons only.\n * MEASURED upstream (see `useFilterOverflow`) rather than switched at a\n * breakpoint, so a two-filter page keeps its labels where a five-filter one\n * has already given them up.\n */\n compactControls?: boolean;\n /**\n * Step 5 of the ladder, and its floor: on a screen too narrow for even the\n * fully-collapsed row, the counter is dropped so the controls still fit one\n * line instead of spilling outside the toolbar.\n */\n counterHidden?: boolean;\n}\n\n/** The right-aligned toolbar controls: Sort By, the counter, zoom/layout/columns, filters. */\nfunction ToolbarRightControls<T extends Record<string, unknown>>(props: GridToolbarProps<T>): React.JSX.Element {\n const { testIdPrefix, matchedCount, totalCount, filterOpen, setFilterOpen } = props;\n return (\n <>\n {/* MEASURED, never breakpointed: `RESERVED.counter` prices it into the\n ladder, so hiding it at `md` was the ladder and a breakpoint\n disagreeing about the same pixels — which broke the row at exactly\n 900px. It is dropped only as the ladder's last rung. */}\n {!props.counterHidden && (\n <>\n <Text variant=\"caption\" as=\"span\">\n <Box\n component=\"span\"\n data-testid={`${testIdPrefix}-counter`}\n sx={{ whiteSpace: \"nowrap\" }}\n >\n {matchedCount} de {totalCount}\n </Box>\n </Text>\n {/* Divides the READING of the list from the controls that change it —\n the counter states what is on screen, everything right of here\n acts on it. */}\n <Divider\n orientation=\"vertical\"\n flexItem\n sx={{ height: sxRem(20), alignSelf: \"center\", mx: 0.5 }}\n />\n </>\n )}\n {props.toolbarRightSlot}\n {/* Sort + columns + format, in ONE control — see DataViewsDisplayPanel. */}\n <DataViewsDisplayPanel\n c={props.c}\n testIdPrefix={testIdPrefix}\n sortKinds={props.sortKinds}\n view={props.displayView}\n compact={props.compactControls}\n />\n {props.exportConfig && (\n <DataViewsExportMenu\n config={props.exportConfig}\n query={props.c.currentQuery}\n totalCount={props.totalCount}\n selectedIds={[...props.c.selectedIds]}\n columns={props.columnOptions.filter((col) => col.visible).map((col) => ({ id: col.id, label: col.label }))}\n testIdPrefix={testIdPrefix}\n compact={props.compactControls}\n />\n )}\n {props.showFilterTrigger !== false && (\n <FilterTrigger\n open={filterOpen}\n onOpenChange={setFilterOpen}\n activeCount={props.activeFilterCount}\n data-testid={`${testIdPrefix}-filters-toggle`}\n />\n )}\n </>\n );\n}\n\n/**\n * The bordered toolbar band: selection chrome + Sort By, the result counter, the\n * saved-views slot, and the filter funnel. The negative margin lets the top/bottom\n * separators reach the sidebar's vertical line and the window edge.\n */\nexport function GridToolbar<T extends Record<string, unknown>>(props: GridToolbarProps<T>): React.JSX.Element {\n const copy = useDataViewsCopy();\n const { testIdPrefix, selectedRows } = props;\n return (\n <Box\n ref={props.barRef}\n sx={{\n borderTop: 1,\n borderBottom: 1,\n borderColor: \"divider\",\n py: 1.25,\n mx: { xs: -2, md: -3 },\n px: { xs: 2, md: 3 },\n }}\n >\n <ContentToolbar\n selectAllLabel={copy.selection.selectAll}\n selectAllText={copy.selection.selectAllOnPage}\n clearAllText={copy.filters.clearAll}\n hasSelection={selectedRows.length > 0}\n selectedCount={selectedRows.length}\n selectAll={props.selectAll}\n clearSelection={props.clearSelection}\n selectAllTestId={`${testIdPrefix}-select-all`}\n clearAllTestId={`${testIdPrefix}-clear-all`}\n selectionExtra={props.selectionExtra}\n actions={renderBulkActions({\n rowActions: props.rowActions,\n bulkActions: props.bulkActions,\n selectedRows,\n clearSelection: props.clearSelection,\n testIdPrefix,\n })}\n leadingControls={props.filterControls}\n // Selection takes the whole line: no Select All while browsing, and no\n // search/filters/Exibir/Exportar once a row is ticked.\n exclusiveSelection\n rightControls={<ToolbarRightControls {...props} />}\n />\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,aAAa;AAkFZ,mBACE,KACE,YAFJ;AATR,SAAS,qBAAwD,OAA+C;AAC9G,QAAM,EAAE,cAAc,cAAc,YAAY,YAAY,cAAc,IAAI;AAC9E,SACE,iCAKG;AAAA,KAAC,MAAM,iBACN,iCACE;AAAA,0BAAC,QAAK,SAAQ,WAAU,IAAG,QACzB;AAAA,QAACA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa,GAAG,YAAY;AAAA,UAC5B,IAAI,EAAE,YAAY,SAAS;AAAA,UAE1B;AAAA;AAAA,YAAa;AAAA,YAAK;AAAA;AAAA;AAAA,MACrB,GACF;AAAA,MAIA;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,UAAQ;AAAA,UACR,IAAI,EAAE,QAAQ,MAAM,EAAE,GAAG,WAAW,UAAU,IAAI,IAAI;AAAA;AAAA,MACxD;AAAA,OACF;AAAA,IAED,MAAM;AAAA,IAEP;AAAA,MAAC;AAAA;AAAA,QACC,GAAG,MAAM;AAAA,QACT;AAAA,QACA,WAAW,MAAM;AAAA,QACjB,MAAM,MAAM;AAAA,QACZ,SAAS,MAAM;AAAA;AAAA,IACjB;AAAA,IACC,MAAM,gBACL;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,MAAM;AAAA,QACd,OAAO,MAAM,EAAE;AAAA,QACf,YAAY,MAAM;AAAA,QAClB,aAAa,CAAC,GAAG,MAAM,EAAE,WAAW;AAAA,QACpC,SAAS,MAAM,cAAc,OAAO,CAAC,QAAQ,IAAI,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,IAAI,OAAO,IAAI,MAAM,EAAE;AAAA,QACzG;AAAA,QACA,SAAS,MAAM;AAAA;AAAA,IACjB;AAAA,IAED,MAAM,sBAAsB,SAC3B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,aAAa,MAAM;AAAA,QACnB,eAAa,GAAG,YAAY;AAAA;AAAA,IAC9B;AAAA,KAEJ;AAEJ;AAOO,SAAS,YAA+C,OAA+C;AAC5G,QAAM,OAAO,iBAAiB;AAC9B,QAAM,EAAE,cAAc,aAAa,IAAI;AACvC,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACX,IAAI;AAAA,QACF,WAAW;AAAA,QACX,cAAc;AAAA,QACd,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,IAAI,EAAE,IAAI,IAAI,IAAI,GAAG;AAAA,QACrB,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,MACrB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB,KAAK,UAAU;AAAA,UAC/B,eAAe,KAAK,UAAU;AAAA,UAC9B,cAAc,KAAK,QAAQ;AAAA,UAC3B,cAAc,aAAa,SAAS;AAAA,UACpC,eAAe,aAAa;AAAA,UAC5B,WAAW,MAAM;AAAA,UACjB,gBAAgB,MAAM;AAAA,UACtB,iBAAiB,GAAG,YAAY;AAAA,UAChC,gBAAgB,GAAG,YAAY;AAAA,UAC/B,gBAAgB,MAAM;AAAA,UACtB,SAAS,kBAAkB;AAAA,YACzB,YAAY,MAAM;AAAA,YAClB,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,gBAAgB,MAAM;AAAA,YACtB;AAAA,UACF,CAAC;AAAA,UACD,iBAAiB,MAAM;AAAA,UAGvB,oBAAkB;AAAA,UAClB,eAAe,oBAAC,wBAAsB,GAAG,OAAO;AAAA;AAAA,MAClD;AAAA;AAAA,EACF;AAEJ;","names":["default"]}

package/dist/{chunk-7ZWC5CKA.js → chunk-BAFDSAWY.js} RENAMED Viewed

@@ -1,11 +1,12 @@
 import {
   thumbnailStripSx
-} from "./chunk-TFZI36UD.js";
+} from "./chunk-3KA6MYIR.js";
 import {
   onMedia,
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -13,8 +14,8 @@ import {
 import PlayIcon from "@mui/icons-material/PlayArrow";
 import Box from "@mui/material/Box/index.js";
 import { jsx } from "react/jsx-runtime";
-var THUMB_WIDTH = 60;
-var THUMB_HEIGHT = 40;
+var THUMB = { widthPx: 60, heightPx: 40 };
+var frame = (theme, color) => `${rem(theme, 2)} solid ${color}`;
 var VideoThumbnail = () => /* @__PURE__ */ jsx(
   Box,
   {
@@ -40,7 +41,7 @@ var LightboxThumbnails = ({
     sx: {
       ...thumbnailStripSx,
       position: "absolute",
-      bottom: 16,
+      bottom: sxRem(16),
       left: "50%",
       transform: "translateX(-50%)",
       display: "flex",
@@ -55,14 +56,14 @@ var LightboxThumbnails = ({
       {
         onClick: () => onSelect(index),
         sx: {
-          width: THUMB_WIDTH,
-          height: THUMB_HEIGHT,
+          width: sxRem(THUMB.widthPx),
+          height: sxRem(THUMB.heightPx),
           cursor: "pointer",
-          border: currentIndex === index ? (theme) => `2px solid ${onMedia(theme)}` : "2px solid transparent",
+          border: (theme) => frame(theme, currentIndex === index ? onMedia(theme) : "transparent"),
           borderRadius: 0.5,
           overflow: "hidden",
           flexShrink: 0,
-          "&:hover": { border: (theme) => `2px solid ${sheen(theme, 0.7)}` }
+          "&:hover": { border: (theme) => frame(theme, sheen(theme, 0.7)) }
         },
         "data-testid": testId(`thumbnail-${index}`),
         children: item.type === "video" ? /* @__PURE__ */ jsx(VideoThumbnail, {}) : /* @__PURE__ */ jsx(
@@ -82,4 +83,4 @@ var LightboxThumbnails = ({
 export {
   LightboxThumbnails
 };
-//# sourceMappingURL=chunk-7ZWC5CKA.js.map
+//# sourceMappingURL=chunk-BAFDSAWY.js.map

package/dist/chunk-BAFDSAWY.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Lightbox/LightboxThumbnails.tsx"],"sourcesContent":["import PlayIcon from '@mui/icons-material/PlayArrow';\nimport Box from '@mui/material/Box/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { thumbnailStripSx } from './Lightbox.constants';\nimport type { LightboxItem } from './Lightbox.types';\nimport { onMedia, sheen } from '../../../tokens/ink';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/** One filmstrip frame, in design px. */\nconst THUMB = { widthPx: 60, heightPx: 40 } as const;\n\nconst frame = (theme: Theme, color: string): string => `${rem(theme, 2)} solid ${color}`;\n\nconst VideoThumbnail: FC = () => (\n <Box\n sx={{\n width: '100%',\n height: '100%',\n background: (theme: Theme) => sheen(theme, 0.1),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <PlayIcon sx={{ color: onMedia, fontSize: sxRem(16) }} />\n </Box>\n);\n\nexport interface LightboxThumbnailsProps {\n items: LightboxItem[];\n currentIndex: number;\n testId: (suffix: string) => string;\n onSelect: (index: number) => void;\n}\n\nexport const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({\n items,\n currentIndex,\n testId,\n onSelect,\n}) => (\n <Box\n sx={{\n ...thumbnailStripSx,\n position: 'absolute',\n bottom: sxRem(16),\n left: '50%',\n transform: 'translateX(-50%)',\n display: 'flex',\n gap: 1,\n maxWidth: '90vw',\n overflowX: 'auto',\n padding: 1,\n }}\n data-testid={testId('thumbnails')}\n >\n {items.map((item, index) => (\n <Box\n key={`${item.src}-${index}`}\n onClick={() => onSelect(index)}\n sx={{\n width: sxRem(THUMB.widthPx),\n height: sxRem(THUMB.heightPx),\n cursor: 'pointer',\n border: (theme: Theme) => frame(theme, currentIndex === index ? onMedia(theme) : 'transparent'),\n borderRadius: 0.5,\n overflow: 'hidden',\n flexShrink: 0,\n '&:hover': { border: (theme: Theme) => frame(theme, sheen(theme, 0.7)) },\n }}\n data-testid={testId(`thumbnail-${index}`)}\n >\n {item.type === 'video' ? (\n <VideoThumbnail />\n ) : (\n <img\n src={item.src}\n alt={item.alt || `Thumbnail ${index + 1}`}\n style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n />\n )}\n </Box>\n ))}\n </Box>\n);\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,SAAS;AA0BZ;AAfJ,IAAM,QAAQ,EAAE,SAAS,IAAI,UAAU,GAAG;AAE1C,IAAM,QAAQ,CAAC,OAAc,UAA0B,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,KAAK;AAEtF,IAAM,iBAAqB,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY,CAAC,UAAiB,MAAM,OAAO,GAAG;AAAA,MAC9C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IAEA,8BAAC,YAAS,IAAI,EAAE,OAAO,SAAS,UAAU,MAAM,EAAE,EAAE,GAAG;AAAA;AACzD;AAUK,IAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,GAAG;AAAA,MACH,UAAU;AAAA,MACV,QAAQ,MAAM,EAAE;AAAA,MAChB,MAAM;AAAA,MACN,WAAW;AAAA,MACX,SAAS;AAAA,MACT,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,eAAa,OAAO,YAAY;AAAA,IAE/B,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,MAAM,SAAS,KAAK;AAAA,QAC7B,IAAI;AAAA,UACF,OAAO,MAAM,MAAM,OAAO;AAAA,UAC1B,QAAQ,MAAM,MAAM,QAAQ;AAAA,UAC5B,QAAQ;AAAA,UACR,QAAQ,CAAC,UAAiB,MAAM,OAAO,iBAAiB,QAAQ,QAAQ,KAAK,IAAI,aAAa;AAAA,UAC9F,cAAc;AAAA,UACd,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,WAAW,EAAE,QAAQ,CAAC,UAAiB,MAAM,OAAO,MAAM,OAAO,GAAG,CAAC,EAAE;AAAA,QACzE;AAAA,QACA,eAAa,OAAO,aAAa,KAAK,EAAE;AAAA,QAEvC,eAAK,SAAS,UACb,oBAAC,kBAAe,IAEhB;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,KAAK;AAAA,YACV,KAAK,KAAK,OAAO,aAAa,QAAQ,CAAC;AAAA,YACvC,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAQ;AAAA;AAAA,QAC7D;AAAA;AAAA,MArBG,GAAG,KAAK,GAAG,IAAI,KAAK;AAAA,IAuB3B,CACD;AAAA;AACH;","names":[]}

package/dist/{chunk-VZAGBDZ2.js → chunk-BJZOBG24.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   AlertDialog
-} from "./chunk-MLBKACV6.js";
+} from "./chunk-OG6LYQ7C.js";
 // src/components/feedback/ConfirmAction/ConfirmAction.parts.tsx
 import Alert from "@mui/material/Alert/index.js";
@@ -104,4 +104,4 @@ function ConfirmActionDialog({
 export {
   ConfirmActionDialog
 };
-//# sourceMappingURL=chunk-VZAGBDZ2.js.map
+//# sourceMappingURL=chunk-BJZOBG24.js.map

package/dist/{chunk-YDPUBGJ7.js → chunk-BNEWMFVB.js} RENAMED Viewed

@@ -7,8 +7,12 @@ import {
 import {
   Text
 } from "./chunk-WTOYEWW6.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DataViews/DataViewsBoard.tsx
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_EXTRA_LABEL = "Sem etapa";
 function groupValueOf(row, groupBy) {
@@ -96,12 +100,12 @@ function BoardColumn({
     {
       "data-testid": testId,
       sx: {
-        flex: `0 0 ${width}px`,
+        flex: `0 0 ${width}`,
         minWidth: width,
         display: "flex",
         flexDirection: "column",
         gap: 1,
-        borderTop: 3,
+        borderTop: (theme) => `${rem(theme, 3)} solid`,
         borderStyle: "solid",
         borderColor: toneColor(column.tone),
         borderRadius: 1,
@@ -130,8 +134,7 @@ function BoardColumn({
     }
   );
 }
-var BASE_COLUMN_WIDTH = 240;
-var MIN_COLUMN_WIDTH = 220;
+var columnWidth = (theme, cardScale) => rem(theme, Math.max(220, Math.round(240 * cardScale)));
 function DataViewsBoard({
   rows,
   board,
@@ -143,8 +146,9 @@ function DataViewsBoard({
   dataTestId
 }) {
   const copy = useDataViewsCopy();
+  const theme = useTheme();
   const columns = groupRows(rows, board);
-  const width = Math.max(MIN_COLUMN_WIDTH, Math.round(BASE_COLUMN_WIDTH * cardScale));
+  const width = columnWidth(theme, cardScale);
   const testId = dataTestId ? `${dataTestId}-board` : "data-views-board";
   return /* @__PURE__ */ jsxs(default2, { sx: { mt: 1.5 }, children: [
     /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", "data-testid": `${testId}-scale-note`, sx: { color: "text.secondary" }, children: copy.board.pageScopeNote }) }),
@@ -187,4 +191,4 @@ export {
   groupRows,
   DataViewsBoard
 };
-//# sourceMappingURL=chunk-YDPUBGJ7.js.map
+//# sourceMappingURL=chunk-BNEWMFVB.js.map

package/dist/chunk-BNEWMFVB.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/DataViewsBoard.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTheme, type Theme } from \"@mui/material/styles/index.js\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { DataViewCardSelection } from \"./data-views-types\";\nimport { rem } from \"../../../tokens/relative\";\n\n/**\n * One column of the board — a single value of the grouping field, with the label\n * to print above it.\n *\n * `tone` is an opaque palette hint (e.g. `\"success\"`, `\"error\"`) the host picks\n * from its own state machine; the board only uses it to colour the column's\n * header accent, so an unknown tone degrades to the default rather than throwing.\n */\nexport interface BoardGroup {\n value: string;\n label: string;\n tone?: string;\n}\n\n/**\n * The BOARD layout's configuration: the same page the table rendered, laid out\n * as columns of the entity's own card.\n *\n * The board earns its place when a page's buckets are STATES IN A STATE MACHINE\n * rather than arbitrary groupings — payments are exactly that shape. Derive\n * `groups` and the table's `scopes` from ONE state-machine definition: two\n * hand-maintained lists of the same states will drift, and the drift shows up as\n * a column the tabs do not have.\n */\nexport interface BoardConfig<T extends Record<string, unknown>> {\n /** The row field whose value places a card in a column. */\n groupBy: keyof T & string;\n /** The columns, in DELIBERATE reading order — the board renders this order. */\n groups: BoardGroup[];\n /** Optional numeric row field summed per column (e.g. the amount in cents). */\n sumBy?: keyof T & string;\n /**\n * Formats a column's total. The PAGE's own formatter, so the board prints\n * money in the store's currency instead of inventing a second convention.\n * Omitted ⇒ the raw sum.\n */\n formatSum?: (total: number) => string;\n /** Header for the column collecting rows in states the front end does not declare. */\n extraLabel?: string;\n}\n\n/** The default header for the catch-all column (see {@link groupRows}). */\nconst DEFAULT_EXTRA_LABEL = \"Sem etapa\";\n\n/** One resolved column: a declared group (or the catch-all) plus its loaded rows. */\ninterface ResolvedColumn<T> {\n key: string;\n label: string;\n tone?: string;\n rows: T[];\n}\n\n/** Read the grouping value off a row as a string (`null`/`undefined` ⇒ \"\"). */\nfunction groupValueOf<T extends Record<string, unknown>>(row: T, groupBy: string): string {\n const value = row[groupBy];\n return value === null || value === undefined ? \"\" : String(value);\n}\n\n/**\n * Place every loaded row into a column, in the DECLARED order, and collect the\n * leftovers into one extra column at the end.\n *\n * Nothing is ever dropped, and that is the point: a state added to the back end\n * before the front end knows about it must not make rows disappear. On a\n * payments board, a silently dropped row is money nobody can see. The extra\n * column only exists when something landed in it — once every row is placed it\n * is gone, so the common case shows exactly the declared columns.\n *\n * A declared group with no rows KEEPS its position: the order is a reading\n * order chosen by the host, not a ranking derived from the data.\n */\nexport function groupRows<T extends Record<string, unknown>>(\n rows: T[],\n board: BoardConfig<T>,\n): ResolvedColumn<T>[] {\n const declared = new Map<string, T[]>(board.groups.map((group) => [group.value, []]));\n const extra: T[] = [];\n for (const row of rows) {\n const bucket = declared.get(groupValueOf(row, board.groupBy));\n if (bucket) bucket.push(row);\n else extra.push(row);\n }\n const columns: ResolvedColumn<T>[] = board.groups.map((group) => ({\n key: group.value,\n label: group.label,\n tone: group.tone,\n rows: declared.get(group.value) ?? [],\n }));\n if (extra.length > 0) {\n columns.push({ key: \"__extra__\", label: board.extraLabel ?? DEFAULT_EXTRA_LABEL, rows: extra });\n }\n return columns;\n}\n\n/** A column's total over the rows ON THIS PAGE, or null when nothing is summed. */\nfunction sumOf<T extends Record<string, unknown>>(rows: T[], sumBy: string | undefined): number | null {\n if (!sumBy) return null;\n return rows.reduce((total, row) => {\n const value = row[sumBy];\n return typeof value === \"number\" && Number.isFinite(value) ? total + value : total;\n }, 0);\n}\n\n/** Map a `tone` hint onto a theme colour, defaulting for anything unrecognised. */\nfunction toneColor(tone: string | undefined): string {\n const known = [\"primary\", \"secondary\", \"success\", \"warning\", \"error\", \"info\"];\n return tone && known.includes(tone) ? `${tone}.main` : \"divider\";\n}\n\n/**\n * A column's heading: the label, the page count and the optional sum.\n *\n * The count is labelled \"nesta página\" EVERYWHERE it appears, including in its\n * accessible name. The scope tabs above the board show whole-query totals from\n * the server; an unlabelled column count would contradict them the moment there\n * is a second page, and the reader has no way to tell which number to believe.\n */\nfunction BoardColumnHeader({\n label,\n count,\n sum,\n testId,\n}: {\n label: string;\n count: number;\n /** The formatted total, or null when the board sums nothing. */\n sum: string | null;\n testId: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 0.25 }}>\n <Box sx={{ display: \"flex\", alignItems: \"baseline\", justifyContent: \"space-between\", gap: 1 }}>\n <Text variant=\"caption\" as=\"span\">\n <Box component=\"span\" sx={{ fontWeight: 600 }}>\n {label}\n </Box>\n </Text>\n <Text variant=\"caption\" as=\"span\">\n <Box\n component=\"span\"\n data-testid={`${testId}-count`}\n aria-label={copy.board.countOnPage(label, count)}\n sx={{ color: \"text.secondary\", whiteSpace: \"nowrap\" }}\n >\n {copy.board.onThisPage(count)}\n </Box>\n </Text>\n </Box>\n {sum !== null && (\n <Text variant=\"caption\" as=\"span\">\n <Box\n component=\"span\"\n data-testid={`${testId}-sum`}\n aria-label={copy.board.pageSum(sum)}\n sx={{ color: \"text.secondary\" }}\n >\n {sum}\n </Box>\n </Text>\n )}\n </Box>\n );\n}\n\ninterface BoardColumnProps<T extends Record<string, unknown>> {\n column: ResolvedColumn<T>;\n board: BoardConfig<T>;\n getRowId: (row: T) => string | number;\n renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n selectedIds: Set<string | number>;\n onToggleId: (id: string | number) => void;\n cardScale: number;\n /** The column's width as CSS, already through the type scale. */\n width: string;\n testId: string;\n}\n\n/** One column: its header over a vertical stack of the entity's own cards. */\nfunction BoardColumn<T extends Record<string, unknown>>({\n column,\n board,\n getRowId,\n renderCard,\n selectedIds,\n onToggleId,\n cardScale,\n width,\n testId,\n}: BoardColumnProps<T>): React.JSX.Element {\n const copy = useDataViewsCopy();\n const total = sumOf(column.rows, board.sumBy);\n return (\n <Box\n data-testid={testId}\n sx={{\n flex: `0 0 ${width}`,\n minWidth: width,\n display: \"flex\",\n flexDirection: \"column\",\n gap: 1,\n borderTop: (theme: Theme) => `${rem(theme, 3)} solid`,\n borderStyle: \"solid\",\n borderColor: toneColor(column.tone),\n borderRadius: 1,\n bgcolor: \"action.hover\",\n p: 1,\n }}\n >\n <BoardColumnHeader\n label={column.label}\n count={column.rows.length}\n sum={total === null ? null : String(board.formatSum ? board.formatSum(total) : total)}\n testId={testId}\n />\n {column.rows.length === 0 ? (\n <Text variant=\"caption\" as=\"p\">\n <Box component=\"span\" data-testid={`${testId}-empty`} sx={{ color: \"text.disabled\" }}>\n {copy.board.emptyColumn}\n </Box>\n </Text>\n ) : (\n column.rows.map((row) => {\n const id = getRowId(row);\n return (\n <Box key={id}>\n {renderCard(row, {\n selected: selectedIds.has(id),\n onToggleSelect: () => onToggleId(id),\n scale: cardScale,\n })}\n </Box>\n );\n })\n )}\n </Box>\n );\n}\n\ninterface DataViewsBoardProps<T extends Record<string, unknown>> {\n /** The LOADED page, verbatim. The board never filters, sorts or paginates. */\n rows: T[];\n board: BoardConfig<T>;\n getRowId: (row: T) => string | number;\n renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n selectedIds: Set<string | number>;\n onToggleId: (id: string | number) => void;\n /** Card size multiplier from the toolbar zoom slider — the same knob as cards. */\n cardScale: number;\n dataTestId?: string;\n}\n\n/**\n * The board's column width: 240 design px at scale 1, which the zoom slider\n * multiplies, and never narrower than 220 however far the zoom is wound down\n * (touch targets) — through the type scale.\n */\nconst columnWidth = (theme: Theme, cardScale: number): string =>\n rem(theme, Math.max(220, Math.round(240 * cardScale)));\n\n/**\n * The BOARD layout: the loaded page distributed into columns of the entity's own\n * card. A rendering, not a second source of truth — switching to it emits no\n * query, and it shows exactly the rows the table showed.\n *\n * The board scrolls HORIZONTALLY inside its own box rather than letting the page\n * scroll sideways, and its columns keep a usable width at every zoom, so a phone\n * gets a real board instead of six unreadable slivers.\n *\n * Cards are not draggable between columns. Dragging a payment from Recusado to\n * Pago is a domain transition with side effects, not a re-render: it needs the\n * allowed-transition set from the state machine plus a confirmation, and\n * `RowAction.isVisible` is the existing per-row guard to reuse when that lands.\n */\nexport function DataViewsBoard<T extends Record<string, unknown>>({\n rows,\n board,\n getRowId,\n renderCard,\n selectedIds,\n onToggleId,\n cardScale,\n dataTestId,\n}: DataViewsBoardProps<T>): React.JSX.Element {\n const copy = useDataViewsCopy();\n const theme = useTheme();\n const columns = groupRows(rows, board);\n const width = columnWidth(theme, cardScale);\n const testId = dataTestId ? `${dataTestId}-board` : \"data-views-board\";\n return (\n <Box sx={{ mt: 1.5 }}>\n <Text variant=\"caption\" as=\"p\">\n <Box component=\"span\" data-testid={`${testId}-scale-note`} sx={{ color: \"text.secondary\" }}>\n {copy.board.pageScopeNote}\n </Box>\n </Text>\n <Box\n data-testid={testId}\n sx={{\n mt: 1,\n display: \"flex\",\n alignItems: \"flex-start\",\n gap: 1.5,\n // The BOARD scrolls, not the page: without `maxWidth` the flex row\n // widens its parent and the whole document scrolls sideways.\n maxWidth: \"100%\",\n overflowX: \"auto\",\n pb: 1,\n }}\n >\n {columns.map((column) => (\n <BoardColumn\n key={column.key}\n column={column}\n board={board}\n getRowId={getRowId}\n renderCard={renderCard}\n selectedIds={selectedIds}\n onToggleId={onToggleId}\n cardScale={cardScale}\n width={width}\n testId={`${testId}-column-${column.key}`}\n />\n ))}\n </Box>\n </Box>\n );\n}\n"],"mappings":"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","names":["default"]}