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-FPVYD7BO.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Sheet/Sheet.parts.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { scrim, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { shimmerAnimation } from './Sheet.animations';\nimport type {\n SheetContentProps,\n SheetFooterProps,\n SheetHeaderProps,\n SheetOverlayProps,\n} from './Sheet.types';\n\n/**\n * The grab handle's own styling. A draggable handle is deliberately larger and\n * tinted, so the affordance reads as draggable before the user tries it; a\n * decorative one stays a neutral bar.\n */\nconst handleSx = (theme: Theme, isDraggable: boolean) => ({\n width: rem(theme, isDraggable ? 48 : 32),\n height: rem(theme, isDraggable ? 6 : 4),\n backgroundColor: alpha(theme.palette.text.primary, 0.3),\n borderRadius: 3,\n transition: theme.transitions.create(['all'], {\n duration: theme.transitions.duration.short,\n easing: theme.transitions.easing.easeInOut,\n }),\n position: 'relative',\n overflow: 'hidden',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: '-100%',\n width: '100%',\n height: '100%',\n background: `linear-gradient(\n 90deg,\n transparent,\n ${sheen(theme, 0.3)},\n transparent\n )`,\n animation: isDraggable ? `${shimmerAnimation(theme)} 2s infinite` : 'none',\n },\n ...(isDraggable && {\n backgroundColor: alpha(theme.palette.primary.main, 0.4),\n boxShadow: `${rems(theme, 0, 2, 4)} ${alpha(theme.palette.primary.main, 0.2)}`,\n '&:hover': {\n backgroundColor: theme.palette.primary.main,\n transform: 'scaleX(1.15) scaleY(1.2)',\n boxShadow: `${rems(theme, 0, 3, 6)} ${alpha(theme.palette.primary.main, 0.3)}`,\n },\n }),\n});\n\nconst SheetHandle: React.FC<{ isDraggable: boolean }> = ({ isDraggable }) => {\n const theme = useTheme();\n\n return (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n mb: 1,\n // The handle is decoration on a draggable header: the drag listeners sit\n // on the header itself, so letting the bar swallow the press would open\n // a dead zone in the middle of the grab target.\n pointerEvents: isDraggable ? 'none' : 'auto',\n }}\n >\n <Box sx={handleSx(theme, isDraggable)} />\n </Box>\n );\n};\n\nconst HEADER_DEFAULTS: Partial<SheetHeaderProps> = {\n isDraggable: false,\n dataTestId: 'sheet-header',\n};\n\nexport const SheetHeader: React.FC<SheetHeaderProps> = (props) => {\n const {\n title,\n description,\n showCloseButton,\n onClose,\n showHandle,\n isDraggable,\n onDragStart,\n className,\n style,\n children,\n dataTestId,\n } = withDefaults(props, HEADER_DEFAULTS);\n\n return (\n <Box\n className={className}\n data-testid={dataTestId}\n sx={{\n p: 2,\n pb: showHandle ? 1 : 2,\n cursor: isDraggable ? 'grab' : 'auto',\n '&:active': isDraggable ? { cursor: 'grabbing' } : {},\n ...style,\n }}\n onMouseDown={isDraggable ? onDragStart : undefined}\n onTouchStart={isDraggable ? onDragStart : undefined}\n >\n {showHandle && <SheetHandle isDraggable={Boolean(isDraggable)} />}\n\n <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>\n <Box sx={{ flex: 1 }}>\n {title && (\n <Typography variant=\"h6\" sx={{ fontWeight: 600 }} data-testid={`${dataTestId}-title`}>\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n {description}\n </Typography>\n )}\n {children}\n </Box>\n\n {showCloseButton && (\n <IconButton\n onClick={onClose}\n size=\"small\"\n sx={{ ml: 1, mt: -0.5 }}\n data-testid={`${dataTestId}-close-button`}\n >\n <CloseIcon data-testid={`${dataTestId}-close-icon`} />\n </IconButton>\n )}\n </Box>\n </Box>\n );\n};\n\nconst CONTENT_DEFAULTS: Partial<SheetContentProps> = {\n padded: true,\n dataTestId: 'sheet-content',\n};\n\nexport const SheetContent: React.FC<SheetContentProps> = (props) => {\n const { children, className, style, padded, dataTestId } = withDefaults(props, CONTENT_DEFAULTS);\n\n return (\n <Box\n className={className}\n data-testid={dataTestId}\n // No `minHeight: 0` here, deliberately: a flex item's automatic minimum\n // size only applies while its main-axis `overflow` is `visible`, and this\n // one is `auto`, so it already shrinks. `SheetBody` above is the item that\n // needs it stated.\n sx={{ flex: 1, overflow: 'auto', p: padded ? 2 : 0, ...style }}\n >\n {children}\n </Box>\n );\n};\n\nconst FOOTER_DEFAULTS: Partial<SheetFooterProps> = {\n sticky: false,\n divider: false,\n dataTestId: 'sheet-footer',\n};\n\nexport const SheetFooter: React.FC<SheetFooterProps> = (props) => {\n const { children, className, style, sticky, divider, dataTestId } = withDefaults(\n props,\n FOOTER_DEFAULTS,\n );\n\n return (\n <>\n {divider && <Divider />}\n <Box\n className={className}\n data-testid={dataTestId}\n sx={{\n p: 2,\n position: sticky ? 'sticky' : 'relative',\n bottom: sticky ? 0 : 'auto',\n backgroundColor: 'background.paper',\n borderTop: sticky ? '1px solid' : 'none',\n borderColor: 'divider',\n ...style,\n }}\n >\n {children}\n </Box>\n </>\n );\n};\n\nconst OVERLAY_DEFAULTS: Partial<SheetOverlayProps> = {\n open: false,\n blur: false,\n};\n\nexport const SheetOverlay: React.FC<SheetOverlayProps> = (props) => {\n const { open, onClick, className, style, blur } = withDefaults(props, OVERLAY_DEFAULTS);\n const theme = useTheme();\n\n return (\n <Fade in={open} timeout={300}>\n <Backdrop\n open={Boolean(open)}\n onClick={onClick}\n className={className}\n sx={{\n // One below the drawer: this backdrop replaces MUI's own (the drawer\n // is given a no-op BackdropComponent) and must sit under the panel.\n zIndex: theme.zIndex.drawer - 1,\n backgroundColor: scrim(theme, blur ? 0.6 : 0.5),\n backdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : 'none',\n WebkitBackdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : 'none',\n ...style,\n }}\n />\n </Fade>\n );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-NIS523UM.js → chunk-FWPFCK4D.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   ConfirmActionDialog
-} from "./chunk-VZAGBDZ2.js";
+} from "./chunk-BJZOBG24.js";
 import {
   useConfirmAction
 } from "./chunk-EMYESBIT.js";
@@ -23,4 +23,4 @@ ConfirmAction.displayName = "ConfirmAction";
 export {
   ConfirmAction
 };
-//# sourceMappingURL=chunk-NIS523UM.js.map
+//# sourceMappingURL=chunk-FWPFCK4D.js.map

package/dist/{chunk-7VJH4FYU.js → chunk-FZ4YTEP2.js} RENAMED Viewed

@@ -170,7 +170,7 @@ function ToggleContents({
         component: "span",
         "aria-label": copy.nav.unsavedChanges,
         "data-testid": `${testIdPrefix}-display-dirty`,
-        sx: { height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }
+        sx: { height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: "primary.main" }
       }
     ),
     interactive && /* @__PURE__ */ jsx(
@@ -189,7 +189,7 @@ function ViewToggle({
   testIdPrefix
 }) {
   const interactive = Boolean(view.nav);
-  const affordance = interactive ? { px: 0.75, py: 0.25, cursor: "pointer", "&:hover": { bgcolor: "action.hover" } } : { px: 0, py: 0, cursor: "default" };
+  const affordanceSx = interactive ? { px: 0.75, py: 0.25, cursor: "pointer", "&:hover": { bgcolor: "action.hover" } } : { px: 0, py: 0, cursor: "default" };
   return /* @__PURE__ */ jsx(
     default2,
     {
@@ -209,7 +209,7 @@ function ViewToggle({
         font: "inherit",
         fontSize: sxRem(12),
         bgcolor: open ? "action.selected" : "transparent",
-        ...affordance
+        ...affordanceSx
       },
       children: /* @__PURE__ */ jsx(ToggleContents, { view, open, interactive, testIdPrefix })
     }
@@ -218,7 +218,7 @@ function ViewToggle({
 function ViewHeader(props) {
   const copy = useDataViewsCopy();
   return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: "divider" }, children: [
-    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }, children: copy.nav.label }) }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { textTransform: "uppercase", letterSpacing: sxRem(0.5), color: "text.disabled" }, children: copy.nav.label }) }),
     /* @__PURE__ */ jsx(ViewToggle, { ...props })
   ] });
 }
@@ -297,4 +297,4 @@ export {
   ViewHeader,
   ViewFooter
 };
-//# sourceMappingURL=chunk-7VJH4FYU.js.map
+//# sourceMappingURL=chunk-FZ4YTEP2.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-view-nav.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * The saved views, rendered INSIDE the Exibir panel rather than in a dropdown\n * of their own.\n *\n * Two levels, both of them replacing the panel's BODY (the tabs stay put):\n * the list of views, and one view's actions. It is a drill-down and not a\n * nested menu on purpose — an absolutely positioned popover inside the panel's\n * own scroll container gets clipped by it, which is how copy.nav.deleteView ends\n * up unreachable. One level, no clipping, and it works on touch.\n */\nimport ChevronLeftRoundedIcon from \"@mui/icons-material/ChevronLeftRounded\";\nimport CheckRoundedIcon from \"@mui/icons-material/CheckRounded\";\nimport DeleteOutlineRoundedIcon from \"@mui/icons-material/DeleteOutlineRounded\";\nimport EditOutlinedIcon from \"@mui/icons-material/EditOutlined\";\nimport GroupOutlinedIcon from \"@mui/icons-material/GroupOutlined\";\nimport MoreVertRoundedIcon from \"@mui/icons-material/MoreVertRounded\";\nimport PushPinOutlinedIcon from \"@mui/icons-material/PushPinOutlined\";\nimport StarOutlineRoundedIcon from \"@mui/icons-material/StarOutlined\";\nimport StarOutlineRoundedIcon2 from \"@mui/icons-material/StarOutlineRounded\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\n\nimport KeyboardArrowDownRoundedIcon from \"@mui/icons-material/KeyboardArrowDownRounded\";\nimport RestartAltRoundedIcon from \"@mui/icons-material/RestartAltRounded\";\nimport SaveOutlinedIcon from \"@mui/icons-material/SaveOutlined\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { DisplayPanelView } from \"./data-views-display-panel\";\nimport type { SavedViewSummary } from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/** What the panel needs to drive the views without owning any of them. */\nexport interface ViewNavHandlers {\n views: SavedViewSummary[];\n activeViewId?: string | null;\n /** `null` selects the built-in view named by `copy.nav.mainView`. */\n onSelectView: (id: string | null) => void;\n onEditView: (view: SavedViewSummary) => void;\n onPatchView: (\n view: SavedViewSummary,\n changes: Partial<Pick<SavedViewSummary, \"isDefault\" | \"pinned\" | \"shared\">>,\n ) => void;\n onDeleteView: (view: SavedViewSummary) => void;\n}\n\nconst rowSx = {\n display: \"flex\",\n alignItems: \"center\",\n gap: 1,\n width: \"100%\",\n px: 1.25,\n py: 1,\n border: 0,\n borderRadius: 1,\n bgcolor: \"transparent\",\n cursor: \"pointer\",\n font: \"inherit\",\n fontSize: sxRem(13),\n textAlign: \"left\",\n color: \"text.primary\",\n \"&:hover\": { bgcolor: \"action.hover\" },\n} as const;\n\n/** The list: the built-in view, then each saved one with its own \"⋮\". */\nexport function ViewsList({\n handlers,\n onOpenActions,\n testIdPrefix,\n}: {\n handlers: ViewNavHandlers;\n onOpenActions: (view: SavedViewSummary) => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n const { views, activeViewId, onSelectView } = handlers;\n const onMain = !activeViewId;\n return (\n <Box sx={{ p: 0.75 }} data-testid={`${testIdPrefix}-views-list`}>\n <Box\n component=\"button\"\n type=\"button\"\n onClick={() => onSelectView(null)}\n data-testid={`${testIdPrefix}-view-main`}\n sx={{ ...rowSx, color: onMain ? \"primary.main\" : \"text.primary\", fontWeight: onMain ? 600 : 400 }}\n >\n <Box component=\"span\" sx={{ flex: 1 }}>\n {copy.nav.mainView}\n </Box>\n {onMain && <CheckRoundedIcon fontSize=\"small\" />}\n </Box>\n\n {views.map((view) => {\n const active = view.id === activeViewId;\n return (\n <Box key={view.id} sx={{ display: \"flex\", alignItems: \"center\" }}>\n <Box\n component=\"button\"\n type=\"button\"\n onClick={() => onSelectView(view.id)}\n data-testid={`${testIdPrefix}-view-${view.id}`}\n sx={{ ...rowSx, minWidth: 0, color: active ? \"primary.main\" : \"text.primary\", fontWeight: active ? 600 : 400 }}\n >\n <Box component=\"span\" sx={{ flex: 1, minWidth: 0, overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" }}>\n {view.name}\n </Box>\n {/* What the row-menu toggles DID, readable without opening it:\n a view set as default, pinned or shared says so here. */}\n {view.isDefault && (\n <StarOutlineRoundedIcon fontSize=\"small\" sx={{ color: \"warning.main\" }} titleAccess={copy.nav.defaultTag} />\n )}\n {view.pinned && (\n <PushPinOutlinedIcon fontSize=\"small\" sx={{ color: \"text.disabled\" }} titleAccess=\"Fixada\" />\n )}\n {view.shared && (\n <GroupOutlinedIcon fontSize=\"small\" sx={{ color: \"text.disabled\" }} titleAccess=\"Compartilhada\" />\n )}\n {active && <CheckRoundedIcon fontSize=\"small\" />}\n </Box>\n <IconButton\n size=\"small\"\n onClick={() => onOpenActions(view)}\n aria-label={copy.nav.viewOptions(view.name)}\n data-testid={`${testIdPrefix}-view-${view.id}-menu`}\n >\n <MoreVertRoundedIcon fontSize=\"small\" />\n </IconButton>\n </Box>\n );\n })}\n\n {views.length === 0 && (\n <Text variant=\"caption\" as=\"p\">\n <Box component=\"span\" sx={{ display: \"block\", px: 1.25, py: 1.5, color: \"text.secondary\", lineHeight: 1.6 }}>\n {copy.nav.emptyHint}\n </Box>\n </Text>\n )}\n </Box>\n );\n}\n\n/** One view's actions, reached from its \"⋮\" and left by the back row. */\nexport function ViewActions({\n view,\n handlers,\n onBack,\n testIdPrefix,\n}: {\n view: SavedViewSummary;\n handlers: ViewNavHandlers;\n onBack: () => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n const { onEditView, onPatchView, onDeleteView } = handlers;\n const action = (\n key: string,\n Icon: typeof StarOutlineRoundedIcon2,\n label: string,\n onClick: () => void,\n opts: { on?: boolean; danger?: boolean } = {},\n ): React.JSX.Element => (\n <Box\n component=\"button\"\n type=\"button\"\n onClick={onClick}\n data-testid={`${testIdPrefix}-view-action-${key}`}\n sx={{\n ...rowSx,\n color: opts.danger ? \"error.main\" : \"text.primary\",\n \"&:hover\": { bgcolor: opts.danger ? \"error.lighter\" : \"action.hover\" },\n }}\n >\n <Icon fontSize=\"small\" sx={{ color: opts.danger ? \"inherit\" : \"text.disabled\" }} />\n <Box component=\"span\" sx={{ flex: 1 }}>\n {label}\n </Box>\n {opts.on && <CheckRoundedIcon fontSize=\"small\" color=\"primary\" />}\n </Box>\n );\n\n return (\n <Box sx={{ p: 0.75 }} data-testid={`${testIdPrefix}-view-actions`}>\n <Box\n component=\"button\"\n type=\"button\"\n onClick={onBack}\n data-testid={`${testIdPrefix}-view-actions-back`}\n sx={{ ...rowSx, color: \"text.secondary\", fontSize: sxRem(12) }}\n >\n <ChevronLeftRoundedIcon fontSize=\"small\" />\n <Box component=\"span\" sx={{ flex: 1, fontWeight: 600, color: \"text.primary\" }}>\n {view.name}\n </Box>\n </Box>\n <Box sx={{ my: 0.5, borderTop: 1, borderColor: \"divider\" }} />\n {action(\"edit\", EditOutlinedIcon, copy.nav.editView, () => onEditView(view))}\n {action(\"default\", StarOutlineRoundedIcon2, copy.nav.setDefault, () => onPatchView(view, { isDefault: !view.isDefault }), { on: view.isDefault })}\n {action(\"pin\", PushPinOutlinedIcon, copy.nav.pinToSidebar, () => onPatchView(view, { pinned: !view.pinned }), { on: view.pinned })}\n {action(\"share\", GroupOutlinedIcon, copy.nav.shareWithTeam, () => onPatchView(view, { shared: !view.shared }), { on: view.shared })}\n <Box sx={{ my: 0.5, borderTop: 1, borderColor: \"divider\" }} />\n {action(\"delete\", DeleteOutlineRoundedIcon, copy.nav.deleteView, () => onDeleteView(view), { danger: true })}\n </Box>\n );\n}\n\n/** Name, unsaved dot, chevron — the parts, so the toggle has one decision. */\nfunction ToggleContents({\n view,\n open,\n interactive,\n testIdPrefix,\n}: {\n view: DisplayPanelView;\n open: boolean;\n interactive: boolean;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <>\n <Box component=\"span\" sx={{ fontWeight: 600 }} data-testid={`${testIdPrefix}-display-view-name`}>\n {view.activeViewName ?? copy.nav.mainView}\n </Box>\n {view.dirty && (\n <Box\n component=\"span\"\n aria-label={copy.nav.unsavedChanges}\n data-testid={`${testIdPrefix}-display-dirty`}\n sx={{ height: sxRem(6), width: sxRem(6), borderRadius: \"50%\", bgcolor: \"primary.main\" }}\n />\n )}\n {interactive && (\n <KeyboardArrowDownRoundedIcon\n fontSize=\"small\"\n sx={{ color: \"text.disabled\", transform: open ? \"rotate(180deg)\" : \"none\" }}\n />\n )}\n </>\n );\n}\n\n/** The name + unsaved dot; a button only when there are views to open. */\nfunction ViewToggle({\n view,\n open,\n onToggle,\n testIdPrefix,\n}: {\n view: DisplayPanelView;\n open: boolean;\n onToggle: () => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const interactive = Boolean(view.nav);\n // One decision, not eight: a panel with no views renders the same row as\n // plain text rather than as a button that opens nothing.\n const affordanceSx = interactive\n ? { px: 0.75, py: 0.25, cursor: \"pointer\", \"&:hover\": { bgcolor: \"action.hover\" } }\n : { px: 0, py: 0, cursor: \"default\" };\n return (\n <Box\n component={interactive ? \"button\" : \"div\"}\n type={interactive ? \"button\" : undefined}\n onClick={interactive ? onToggle : undefined}\n aria-expanded={interactive ? open : undefined}\n data-testid={`${testIdPrefix}-display-view-toggle`}\n sx={{\n ml: \"auto\",\n display: \"flex\",\n alignItems: \"center\",\n gap: 0.75,\n minWidth: 0,\n border: 0,\n borderRadius: 1,\n font: \"inherit\",\n fontSize: sxRem(12),\n bgcolor: open ? \"action.selected\" : \"transparent\",\n ...affordanceSx,\n }}\n >\n <ToggleContents view={view} open={open} interactive={interactive} testIdPrefix={testIdPrefix} />\n </Box>\n );\n}\n\n/** The VISÃO row above the tabs. */\nexport function ViewHeader(props: {\n view: DisplayPanelView;\n open: boolean;\n onToggle: () => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: \"divider\" }}>\n <Text variant=\"caption\" as=\"span\">\n <Box component=\"span\" sx={{ textTransform: \"uppercase\", letterSpacing: sxRem(0.5), color: \"text.disabled\" }}>\n {copy.nav.label}\n </Box>\n </Text>\n <ViewToggle {...props} />\n </Box>\n );\n}\n\n/** Redefinir / Salvar como nova / Atualizar, pinned below the tabs. */\nexport function ViewFooter({\n view,\n onDone,\n testIdPrefix,\n}: {\n view: DisplayPanelView;\n onDone: () => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <Box\n sx={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: 1,\n px: 1.5,\n py: 1,\n borderTop: 1,\n borderColor: \"divider\",\n bgcolor: \"action.hover\",\n }}\n >\n <Button\n variant=\"text\"\n size=\"sm\"\n color=\"neutral\"\n disabled={!view.dirty}\n startIcon={<RestartAltRoundedIcon fontSize=\"small\" />}\n onClick={view.onReset}\n dataTestId={`${testIdPrefix}-display-reset`}\n >\n {copy.nav.reset}\n </Button>\n <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n {/* Only meaningful with a view APPLIED: on the main view the single\n \"Salvar visão\" already is \"save as new\". */}\n {view.onUpdate && (\n <Button\n variant=\"text\"\n size=\"sm\"\n color=\"neutral\"\n onClick={() => {\n view.onSaveAs();\n onDone();\n }}\n dataTestId={`${testIdPrefix}-display-save-as`}\n >\n {copy.nav.saveAs}\n </Button>\n )}\n {/* Enabled only when something in Ordenar / Colunas / Exibição (or the\n filters the view also stores) differs from the applied view: the\n filled button is a STATE — \"there is something to save\" — not a\n permanent fixture. */}\n <Button\n size=\"sm\"\n disabled={!view.dirty}\n startIcon={<SaveOutlinedIcon fontSize=\"small\" />}\n onClick={() => {\n (view.onUpdate ?? view.onSaveAs)();\n onDone();\n }}\n dataTestId={`${testIdPrefix}-display-save`}\n >\n {view.onUpdate ? copy.nav.update : copy.nav.save}\n </Button>\n </Box>\n </Box>\n );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-UCTJJYVC.js → chunk-G4HBNILE.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import {
   DataGridEmpty,
   DataGridError,
   DataGridLoading
-} from "./chunk-5E3XZAED.js";
+} from "./chunk-EARWC6PD.js";
 import {
   useDataGridModel
 } from "./chunk-DLJGBJZW.js";
@@ -117,4 +117,4 @@ export {
   DataGrid,
   GRID_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-UCTJJYVC.js.map
+//# sourceMappingURL=chunk-G4HBNILE.js.map

package/dist/{chunk-2B76FIMN.js → chunk-GHTBUJ6E.js} RENAMED Viewed

@@ -2,6 +2,7 @@ import {
   Skeleton
 } from "./chunk-7F7TTOYN.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -112,7 +113,7 @@ function ValueRow({
       Skeleton,
       {
         variant: "rectangular",
-        height: 28,
+        height: rem(theme, 28),
         width: "60%",
         borderRadius: 4,
         "data-testid": `${testId}-value-skeleton`
@@ -139,13 +140,14 @@ function DeltaSlot({
   loading,
   testId
 }) {
+  const theme = useTheme();
   if (!delta) return null;
   if (loading) {
     return /* @__PURE__ */ jsx(
       Skeleton,
       {
         variant: "rectangular",
-        height: 16,
+        height: rem(theme, 16),
         width: "40%",
         borderRadius: 4,
         "data-testid": `${testId}-delta-skeleton`
@@ -203,4 +205,4 @@ export {
   StatCard,
   StatCard_default
 };
-//# sourceMappingURL=chunk-2B76FIMN.js.map
+//# sourceMappingURL=chunk-GHTBUJ6E.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/StatCard/StatCard.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/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 { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport type {\n StatCardDelta,\n StatCardDeltaDirection,\n StatCardDeltaTone,\n StatCardProps,\n} from './StatCard.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/** The arrow each direction renders (decorative — the text carries the meaning). */\nconst DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {\n up: ArrowUpwardIcon,\n down: ArrowDownwardIcon,\n neutral: RemoveIcon,\n};\n\n/** How each direction reads to a screen reader when no `ariaLabel` is given. */\nconst DIRECTION_WORD: Record<StatCardDeltaDirection, string> = {\n up: 'Increase of',\n down: 'Decrease of',\n neutral: 'Change of',\n};\n\n/** A direction's natural tone, used when the caller doesn't override it. */\nconst IMPLIED_TONE: Record<StatCardDeltaDirection, StatCardDeltaTone> = {\n up: 'positive',\n down: 'negative',\n neutral: 'neutral',\n};\n\n/** Resolve a tone to its semantic palette colour (never a hardcoded hex). */\nfunction toneColor(tone: StatCardDeltaTone, theme: Theme): string {\n if (tone === 'positive') return theme.palette.success.main;\n if (tone === 'negative') return theme.palette.error.main;\n return theme.palette.text.secondary;\n}\n\n/** The screen-reader sentence for a delta: caller override, else generated. */\nfunction deltaAriaLabel(delta: StatCardDelta): string {\n if (delta.ariaLabel) return delta.ariaLabel;\n const suffix = delta.label ? ` ${delta.label}` : '';\n return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;\n}\n\n/** The delta row: a decorative arrow plus the pre-formatted change and context. */\nfunction DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }): React.JSX.Element {\n const theme = useTheme();\n const tone = delta.tone ?? IMPLIED_TONE[delta.direction];\n const Icon = DIRECTION_ICON[delta.direction];\n const color = toneColor(tone, theme);\n\n return (\n <Stack\n direction=\"row\"\n spacing={0.5}\n sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n data-testid={testId}\n data-direction={delta.direction}\n data-tone={tone}\n >\n {/* The arrow duplicates what the aria-label already says, so it is hidden\n from assistive tech rather than read twice. */}\n <Icon aria-hidden=\"true\" sx={{ fontSize: sxRem(16), color }} />\n <Typography\n variant=\"body2\"\n component=\"span\"\n aria-label={deltaAriaLabel(delta)}\n sx={{ color, fontWeight: theme.typography.fontWeightMedium }}\n >\n {delta.value}\n </Typography>\n {delta.label && (\n <Typography variant=\"caption\" component=\"span\" sx={{ color: theme.palette.text.secondary }}>\n {delta.label}\n </Typography>\n )}\n </Stack>\n );\n}\n\n/** The label row: the optional decorative icon plus the metric's name. */\nfunction LabelRow({\n label,\n icon,\n labelId,\n testId,\n}: Pick<StatCardProps, 'label' | 'icon'> & {\n labelId: string;\n testId: string;\n}): React.JSX.Element {\n const theme = useTheme();\n return (\n <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n {icon && (\n <Box\n aria-hidden=\"true\"\n data-testid={`${testId}-icon`}\n sx={{ display: 'flex', color: theme.palette.text.secondary }}\n >\n {icon}\n </Box>\n )}\n <Typography\n id={labelId}\n variant=\"caption\"\n component=\"p\"\n data-testid={`${testId}-label`}\n sx={{ color: theme.palette.text.secondary }}\n >\n {label}\n </Typography>\n </Stack>\n );\n}\n\n/** The figure itself, or its skeleton while the tile is loading. */\nfunction ValueRow({\n value,\n loading,\n testId,\n}: Pick<StatCardProps, 'value' | 'loading'> & { testId: string }): React.JSX.Element {\n const theme = useTheme();\n if (loading) {\n return (\n <Skeleton\n variant=\"rectangular\"\n height={rem(theme, 28)}\n width=\"60%\"\n borderRadius={4}\n data-testid={`${testId}-value-skeleton`}\n />\n );\n }\n return (\n <Typography\n variant=\"h6\"\n component=\"p\"\n data-testid={`${testId}-value`}\n sx={{\n fontWeight: theme.typography.fontWeightMedium,\n color: theme.palette.text.primary,\n overflowWrap: 'anywhere',\n }}\n >\n {value}\n </Typography>\n );\n}\n\n/** The delta slot: its skeleton while loading, the row once resolved, else nothing. */\nfunction DeltaSlot({\n delta,\n loading,\n testId,\n}: {\n delta?: StatCardDelta;\n loading: boolean;\n testId: string;\n}): React.JSX.Element | null {\n const theme = useTheme();\n if (!delta) return null;\n if (loading) {\n return (\n <Skeleton\n variant=\"rectangular\"\n height={rem(theme, 16)}\n width=\"40%\"\n borderRadius={4}\n data-testid={`${testId}-delta-skeleton`}\n />\n );\n }\n return <DeltaRow delta={delta} testId={`${testId}-delta`} />;\n}\n\n/**\n * StatCard (KPI tile) — one labelled figure with an optional period-over-period\n * delta, leading icon, hint line and loading state. The single shared tile for\n * dashboards and summary bands, so surfaces stop hand-rolling the pattern.\n *\n * The tile is presentation only: `value` and `delta.value` arrive ALREADY\n * formatted, so locale/currency rules stay with the data owner. Colour comes\n * from the MUI palette (`success` / `error` / `text.secondary`), and the delta's\n * meaning is separable from its arrow via {@link StatCardDelta.tone} — a rise in\n * cost can render \"up\" while reading as negative.\n */\nexport const StatCard: React.FC<StatCardProps> = React.memo(\n ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {\n const theme = useTheme();\n const labelId = React.useId();\n const testId = dataTestId || 'stat-card';\n\n return (\n <Box\n role=\"group\"\n aria-labelledby={labelId}\n aria-busy={loading || undefined}\n className={className}\n data-testid={testId}\n sx={{\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n padding: theme.spacing(2),\n borderRadius: theme.shape.borderRadius / 4,\n border: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n minWidth: 0,\n }}\n >\n <LabelRow label={label} icon={icon} labelId={labelId} testId={testId} />\n <ValueRow value={value} loading={loading} testId={testId} />\n <DeltaSlot delta={delta} loading={loading} testId={testId} />\n {hint && (\n <Typography\n variant=\"caption\"\n component=\"p\"\n data-testid={`${testId}-hint`}\n sx={{ color: theme.palette.text.secondary }}\n >\n {hint}\n </Typography>\n )}\n </Box>\n );\n },\n);\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":"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","names":[]}

package/dist/{chunk-5NFPO3YY.js → chunk-GJRKWDRR.js} RENAMED Viewed

@@ -11,6 +11,11 @@ import {
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/Chip/Chip.styles.tsx
 import Avatar from "@mui/material/Avatar/index.js";
@@ -32,11 +37,11 @@ var avatarFor = (avatar, avatarSrc) => {
   }
   if (avatarSrc) {
     const { avatarSize } = CHIP_SIZES.medium;
-    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: avatarSize, height: avatarSize } });
+    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: sxRem(avatarSize), height: sxRem(avatarSize) } });
   }
   return void 0;
 };
-var hoverShadow = (theme) => `0 ${HOVER_SHADOW.offsetY}px ${HOVER_SHADOW.blur}px ${shadowInk(
+var hoverShadow = (theme) => `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(
   theme,
   theme.palette.mode === "dark" ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight
 )}`;
@@ -59,7 +64,7 @@ var chipStyles = ({
     },
     "&:hover": {
       ...lifts && {
-        transform: `translateY(-${HOVER_LIFT_PX}px)`,
+        transform: (theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,
         boxShadow: (theme) => hoverShadow(theme)
       }
     },
@@ -81,4 +86,4 @@ export {
   chipStyles,
   iconWithTestId
 };
-//# sourceMappingURL=chunk-5NFPO3YY.js.map
+//# sourceMappingURL=chunk-GJRKWDRR.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { CHIP_SIZES, CHIP_TRANSITION_EASING, CHIP_TRANSITION_MS, HOVER_LIFT_PX, HOVER_SHADOW } from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n (event: KeyboardEvent): void => {\n const action = chipKeyAction(event.key, args);\n if (action === null) return;\n event.preventDefault();\n if (action === 'delete') {\n args.onDelete?.();\n return;\n }\n args.onClick?.();\n };\n\nexport const avatarFor = (\n avatar: ChipProps['avatar'],\n avatarSrc?: string,\n): ReactElement | undefined => {\n if (avatar && React.isValidElement(avatar)) {\n return avatar;\n }\n if (avatarSrc) {\n const { avatarSize } = CHIP_SIZES.medium;\n return <Avatar src={avatarSrc} sx={{ width: sxRem(avatarSize), height: sxRem(avatarSize) }} />;\n }\n return undefined;\n};\n\ninterface ChipStyleArgs {\n variant: ChipProps['variant'];\n selected?: boolean;\n clickable?: boolean;\n disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (theme: Theme): string =>\n `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(\n theme,\n theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,\n )}`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\nexport const chipStyles = ({\n variant,\n selected,\n clickable,\n disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n const lifts = clickable && !disabled;\n\n return {\n // Enhanced styling for outlined variant\n ...(variant === 'outlined' && {\n borderWidth: '1px',\n borderStyle: 'solid',\n backgroundColor: 'transparent',\n }),\n ...(selected &&\n variant === 'outlined' && {\n backgroundColor: (theme: Theme) => theme.palette.action.selected,\n }),\n '&:hover': {\n ...(lifts && {\n transform: (theme: Theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,\n boxShadow: (theme: Theme) => hoverShadow(theme),\n }),\n },\n '&:active': {\n ...(lifts && {\n transform: 'translateY(0px)',\n }),\n },\n transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n };\n};\n\nexport const iconWithTestId = (\n icon: ChipProps['icon'],\n testId: string,\n): ReactElement | undefined =>\n icon && React.isValidElement(icon)\n ? React.cloneElement(icon as ReactElement, {\n 'data-testid': testId,\n } as Record<string, unknown>)\n : undefined;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAmCP;AAtBJ,IAAM,qBACX,CAAC,SACD,CAAC,UAA+B;AAC9B,QAAM,SAAS,cAAc,MAAM,KAAK,IAAI;AAC5C,MAAI,WAAW,KAAM;AACrB,QAAM,eAAe;AACrB,MAAI,WAAW,UAAU;AACvB,SAAK,WAAW;AAChB;AAAA,EACF;AACA,OAAK,UAAU;AACjB;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,UAAM,EAAE,WAAW,IAAI,WAAW;AAClC,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,MAAM,UAAU,GAAG,QAAQ,MAAM,UAAU,EAAE,GAAG;AAAA,EAC9F;AACA,SAAO;AACT;AAUA,IAAM,cAAc,CAAC,UACnB,KAAK,KAAK,OAAO,aAAa,SAAS,aAAa,IAAI,CAAC,IAAI;AAAA,EAC3D;AAAA,EACA,MAAM,QAAQ,SAAS,SAAS,aAAa,YAAY,aAAa;AACxE,CAAC;AAQI,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA;AAAA,IAEL,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW,CAAC,UAAiB,cAAc,IAAI,OAAO,CAAC,aAAa,CAAC;AAAA,QACrE,WAAW,CAAC,UAAiB,YAAY,KAAK;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY,OAAO,qBAAqB,GAAI,KAAK,sBAAsB;AAAA,EACzE;AACF;AAEO,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}

package/dist/{chunk-VDZQJBAV.js → chunk-GY4NBSCN.js} RENAMED Viewed

@@ -1,6 +1,9 @@
 import {
   fieldTextFieldStyles
 } from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DataViews/data-views-day-input.tsx
 import TextField from "@mui/material/TextField/index.js";
@@ -103,7 +106,7 @@ function DayBoundInput({
       onBlur: () => setText(isoToMasked(applied, mask)),
       InputLabelProps: { shrink: true },
       inputProps: dayInputProps(testId, describedBy),
-      sx: [{ width: 165 }, fieldTextFieldStyles]
+      sx: [{ width: sxRem(165) }, fieldTextFieldStyles]
     }
   );
 }
@@ -114,4 +117,4 @@ export {
   maskDate,
   DayBoundInput
 };
-//# sourceMappingURL=chunk-VDZQJBAV.js.map
+//# sourceMappingURL=chunk-GY4NBSCN.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-day-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A day bound as a MASKED `dd/mm/aaaa` text field, replacing `<input type=\"date\">`.\n *\n * The native control is three separate segments wearing one box. Typing a date\n * means filling a segment, being jumped to the next, and starting over — and\n * which segment comes first is the BROWSER's locale, not ours, so the same\n * field reads `dd/mm/aaaa` for one merchant and `mm/dd/yyyy` for the next with\n * nothing in our code saying which. There is no way to type a date as one\n * continuous run of digits, which is how people actually type dates.\n *\n * A mask gives that back: eight digits straight through, separators inserted as\n * you go, backspace walking back through them.\n *\n * Measured, driving both controls in Chromium with the same eight keystrokes\n * (`01072026`, one `keydown` at a time):\n *\n * native → field ends EMPTY, no filter applied, 0 requests\n * masked → field reads `01/07/2026`, filter applied, 1 request\n *\n * The native result is the whole complaint: you type a date and nothing lands.\n *\n * The second half of the fix is WHEN the bound is written. A partially-typed\n * year is itself a valid date — `2026` passes through `0002`, `0020`, `0202` on\n * the way — so committing on every keystroke would send the grid off to fetch\n * years nobody meant. A bound is written only once the text is a WHOLE, real\n * date, which is what keeps the run above at one request rather than four.\n */\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useEffect, useState } from 'react';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n\n/**\n * THE MASK IS THE ORDER, and both halves of this file read it.\n *\n * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for\n * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which\n * segment comes first. Everything below therefore derives the segment order\n * FROM that same string, so the shape on screen and the shape the parser\n * expects cannot disagree.\n *\n * They did disagree, and the failure was silent in the worst direction. The\n * mask/parse pair was hardcoded day-first (the `Br` in the old names was\n * accurate) while the placeholder followed the copy pack — so under `en-US` the\n * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day\n * of 12 and a month of 31, which is not a date, which commits nothing. No\n * error, no filter, a full list that reads like an answer. The en-US pack's own\n * comment already said the mask \"is the shape that gets a date entered\n * backwards\"; nothing enforced it.\n */\n\n/** What one segment of a mask is, and how many digits it takes. */\ntype DaySegment = 'year' | 'month' | 'day';\nconst SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };\n\n/**\n * The segments a mask asks for, in its own order.\n *\n * Keyed on each token's FIRST letter so one rule covers every spelling a host\n * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the\n * day. An unreadable mask falls back to day-first rather than throwing: this\n * runs on every keystroke, and a field that renders is recoverable where one\n * that crashes the grid is not.\n */\nfunction segmentsOf(mask: string): readonly DaySegment[] {\n const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);\n if (tokens.length !== 3) return ['day', 'month', 'year'];\n const segments = tokens.map((token): DaySegment => {\n const head = token.slice(0, 1).toLowerCase();\n if (head === 'y' || head === 'a') return 'year';\n return head === 'm' ? 'month' : 'day';\n });\n // A mask naming the same segment twice describes no date. Fall back rather\n // than build a parser that can never succeed.\n return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];\n}\n\n/** The separator the mask uses, defaulting to `/`. */\nconst separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';\n\n/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */\nexport function isoToMasked(iso: string, mask: string): string {\n const parts = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n if (!parts) return '';\n const value: Record<DaySegment, string> = {\n year: parts[1] as string,\n month: parts[2] as string,\n day: parts[3] as string,\n };\n return segmentsOf(mask)\n .map((segment) => value[segment])\n .join(separatorOf(mask));\n}\n\n/**\n * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.\n *\n * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would\n * silently roll it into March rather than reject it — so the round trip through\n * UTC is the check: if the month or day comes back changed, the input was not a\n * day.\n */\nexport function maskedToIso(text: string, mask: string): string {\n const segments = segmentsOf(mask);\n const digits = text.replace(/\\D/g, '');\n if (digits.length !== 8) return '';\n const value = {} as Record<DaySegment, string>;\n let cursor = 0;\n for (const segment of segments) {\n value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);\n cursor += SEGMENT_WIDTH[segment];\n }\n const year = Number(value.year);\n const month = Number(value.month);\n const day = Number(value.day);\n if (year < 1000) return '';\n const probe = new Date(Date.UTC(year, month - 1, day));\n if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';\n return `${value.year}-${value.month}-${value.day}`;\n}\n\n/**\n * Digits only, capped at the mask's width, with the separators put back as you\n * type.\n *\n * Deriving the whole string from the digits — rather than editing the text in\n * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as\n * `06/08`, not `06/08/`, so deleting the first digit of the year removes the\n * trailing separator with it instead of leaving a dead keystroke that changes\n * nothing.\n */\nexport function maskDate(raw: string, mask: string): string {\n const segments = segmentsOf(mask);\n const separator = separatorOf(mask);\n const digits = raw.replace(/\\D/g, '').slice(0, 8);\n const out: string[] = [];\n let cursor = 0;\n for (const segment of segments) {\n if (cursor >= digits.length) break;\n out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));\n cursor += SEGMENT_WIDTH[segment];\n }\n return out.join(separator);\n}\n\n/**\n * What has to land on the `<input>` itself rather than on the `TextField`.\n *\n * Anything `TextField` does not recognise is spread onto its root `FormControl`\n * div. `inputMode` went up there once: the attribute sat on a non-editable\n * wrapper, meant nothing, and the phone went on offering the letter keyboard\n * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY\n * layout). Only the `<input>` this reaches decides which keypad opens — and the\n * same is true of `aria-describedby`, which on the wrapper points at a\n * description no screen reader will read out for the field.\n *\n * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler\n * with `+ * #` on it — keys that cannot occur in a date. A paste carrying\n * separators still lands, because the MASK is what filters the text; the keypad\n * only narrows what a thumb can reach for.\n *\n * Autofill off for the same reason: the browser's saved-value strip covers the\n * keypad to suggest names and addresses, none of which are a date, and none of\n * which the mask would keep.\n */\nfunction dayInputProps(testId: string, describedBy: string | undefined) {\n return {\n 'data-testid': testId,\n maxLength: 10,\n inputMode: 'numeric' as const,\n autoComplete: 'off',\n ...(describedBy ? { 'aria-describedby': describedBy } : {}),\n };\n}\n\n/**\n * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's\n * inclusive day comparison already speaks, and the form the chip label reads —\n * so only the typing surface changes.\n */\nexport function DayBoundInput({\n label,\n value,\n onChange,\n testId,\n error = false,\n describedBy,\n mask,\n}: {\n label: string;\n /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */\n value: string | undefined;\n onChange: (bound: string | undefined) => void;\n testId: string;\n /**\n * Paint the field as rejected. It only ever writes a real day by itself, so\n * this is for a caller judging the PAIR: a window whose end precedes its\n * start is two valid days and one impossible period, and the field it was\n * typed into is the only place to say which half is being complained about.\n */\n error?: boolean;\n /** Id of the element carrying that complaint, so it is read WITH the field. */\n describedBy?: string;\n /**\n * The day mask, which IS the placeholder — so the expected ORDER is on\n * screen before the first keystroke rather than discovered by getting it\n * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.\n *\n * A PROP rather than a context read: this field has two callers, and only\n * one of them is inside DataViews. `DateRangePicker` mounts it standalone\n * with its own message table, so a context read here throws for every host\n * of that picker — which is exactly what it did.\n */\n mask: string;\n}): React.JSX.Element {\n const applied = value ?? '';\n const [text, setText] = useState(() => isoToMasked(applied, mask));\n\n // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only\n // when the applied value moved somewhere the text does not already mean — a\n // \"Limpar\", a saved view, the other pill resetting the pair. Without that\n // guard the field's own write bounces straight back mid-edit and resets the\n // caret, which is the native control's worst habit reproduced by hand.\n useEffect(() => {\n setText((current) =>\n maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask),\n );\n }, [applied, mask]);\n\n return (\n <TextField\n size=\"small\"\n type=\"text\"\n label={label}\n error={error}\n placeholder={mask}\n value={text}\n onChange={(event) => {\n const next = maskDate(event.target.value, mask);\n setText(next);\n // Emptying clears the bound. A COMPLETE day applies it. A partial one\n // does NEITHER — it leaves whatever is applied alone, so typing is never\n // fought and a half-typed year never reaches the backend.\n if (next === '') return onChange(undefined);\n const iso = maskedToIso(next, mask);\n if (iso) onChange(iso);\n }}\n // Leaving a half-typed (or impossible) date on screen would show a filter\n // the list is not actually using. On blur the field snaps back to what IS\n // applied; a complete date already equals it, so this only ever tidies.\n onBlur={() => setText(isoToMasked(applied, mask))}\n // The placeholder occupies the space an un-shrunk label would render into.\n InputLabelProps={{ shrink: true }}\n inputProps={dayInputProps(testId, describedBy)}\n sx={[{ width: sxRem(165) }, fieldTextFieldStyles]}\n />\n );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-57IB5NTM.js → chunk-HB7ISSLK.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   slideIn
-} from "./chunk-CU4TF7C7.js";
+} from "./chunk-6GRZ77IS.js";
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
@@ -192,4 +192,4 @@ export {
   CollapseToggle,
   MegaSection
 };
-//# sourceMappingURL=chunk-57IB5NTM.js.map
+//# sourceMappingURL=chunk-HB7ISSLK.js.map

package/dist/{chunk-WR7ELCIL.js → chunk-HCT5ELST.js} RENAMED Viewed

@@ -1,4 +1,9 @@
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/LazyImage/LazyImage.hooks.ts
+import { useTheme } from "@mui/material/styles/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 var LAZY_IMAGE_DEFAULTS = {
   height: "auto",
@@ -6,7 +11,6 @@ var LAZY_IMAGE_DEFAULTS = {
   objectFit: "cover",
   objectPosition: "center",
   lazy: true,
-  rootMargin: "100px",
   threshold: 0,
   fadeIn: true,
   fadeInDuration: 300,
@@ -60,7 +64,9 @@ var OWN_PROPS = /* @__PURE__ */ new Set([
 ]);
 var imgPassThrough = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));
 var useVisibility = (props, containerRef, isVisible, onVisible) => {
-  const { lazy, src, rootMargin, threshold, onLoadStart } = props;
+  const { lazy, src, threshold, onLoadStart } = props;
+  const theme = useTheme();
+  const rootMargin = props.rootMargin ?? `${remPx(theme, 100)}px`;
   useEffect(() => {
     if (!lazy || isVisible) {
       return;
@@ -165,4 +171,4 @@ export {
   imgPassThrough,
   useLazyImage
 };
-//# sourceMappingURL=chunk-WR7ELCIL.js.map
+//# sourceMappingURL=chunk-HCT5ELST.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.hooks.ts"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { remPx } from '../../../tokens/relative';\n\nimport type { LazyImageProps, LazyImageState } from './LazyImage.types';\n\ntype LazyImageDefaultedKeys =\n | 'height'\n | 'loadingState'\n | 'objectFit'\n | 'objectPosition'\n | 'lazy'\n | 'threshold'\n | 'fadeIn'\n | 'fadeInDuration'\n | 'retryOnError'\n | 'maxRetries'\n | 'retryDelay'\n | 'decoding'\n | 'skeletonProps'\n | 'spinnerProps'\n | 'sx'\n | 'role';\n\nexport type ResolvedLazyImageProps = LazyImageProps &\n Required<Pick<LazyImageProps, LazyImageDefaultedKeys>>;\n\nconst LAZY_IMAGE_DEFAULTS: Pick<LazyImageProps, LazyImageDefaultedKeys> = {\n height: 'auto',\n loadingState: 'skeleton',\n objectFit: 'cover',\n objectPosition: 'center',\n lazy: true,\n threshold: 0,\n fadeIn: true,\n fadeInDuration: 300,\n retryOnError: false,\n maxRetries: 3,\n retryDelay: 1000,\n decoding: 'async',\n skeletonProps: {},\n spinnerProps: {},\n sx: {},\n role: 'img',\n};\n\n// Strips explicitly-undefined props before the merge, so `lazy={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: LazyImageProps): Partial<LazyImageProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<LazyImageProps>;\n\nexport const resolveLazyImageProps = (props: LazyImageProps): ResolvedLazyImageProps =>\n ({ ...LAZY_IMAGE_DEFAULTS, ...definedProps(props) }) as ResolvedLazyImageProps;\n\n// Props this component consumes itself. Anything else the caller passed is an\n// ordinary <img> attribute and is forwarded untouched.\nconst OWN_PROPS = new Set([\n 'src', 'alt', 'width', 'height', 'placeholder', 'fallback', 'loadingState',\n 'showSpinner', 'objectFit', 'objectPosition', 'borderRadius', 'lazy', 'rootMargin',\n 'threshold', 'fadeIn', 'fadeInDuration', 'onLoad', 'onError', 'onLoadStart',\n 'retryOnError', 'maxRetries', 'retryDelay', 'decoding', 'loading', 'fetchPriority',\n 'skeletonProps', 'spinnerProps', 'sx', 'className', 'data-testid', 'aria-label',\n 'aria-describedby', 'role',\n]);\n\nexport const imgPassThrough = (props: ResolvedLazyImageProps): Record<string, unknown> =>\n Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));\n\n/**\n * Flips `isVisible` the first time the container nears the viewport, then stops\n * observing. Does nothing when `lazy` is off — the caller wants the request now.\n */\nconst useVisibility = (\n props: ResolvedLazyImageProps,\n containerRef: React.RefObject<HTMLDivElement | null>,\n isVisible: boolean,\n onVisible: () => void,\n) => {\n const { lazy, src, threshold, onLoadStart } = props;\n const theme = useTheme();\n // `IntersectionObserver` takes px or %, never rem: the default reach is 100\n // design px, measured through the theme so it moves with the root.\n const rootMargin = props.rootMargin ?? `${remPx(theme, 100)}px`;\n\n useEffect(() => {\n if (!lazy || isVisible) {\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n onVisible();\n onLoadStart?.();\n observer.unobserve(entry.target);\n }\n });\n },\n { rootMargin, threshold },\n );\n\n if (containerRef.current) {\n observer.observe(containerRef.current);\n }\n\n return () => {\n if (containerRef.current) {\n observer.unobserve(containerRef.current);\n }\n };\n }, [lazy, src, rootMargin, threshold, isVisible, onLoadStart, onVisible, containerRef]);\n};\n\n/** A pending retry has to be cancelled on unmount, or it sets state on a dead component. */\nconst useRetryTimeout = () => {\n const ref = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n useEffect(\n () => () => {\n if (ref.current) {\n clearTimeout(ref.current);\n }\n },\n [],\n );\n\n return ref;\n};\n\n/**\n * Owns whether the real image has been requested yet and how it went: the\n * observer above, the load/error handlers, and the retry timer.\n */\nexport const useLazyImage = (props: ResolvedLazyImageProps) => {\n const { src, placeholder, lazy, loadingState, showSpinner } = props;\n const { onLoad, onError, retryOnError, maxRetries, retryDelay } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const retryTimeoutRef = useRetryTimeout();\n\n // Handle deprecated showSpinner prop\n const effectiveLoadingState = showSpinner ? 'spinner' : loadingState;\n\n const [state, setState] = useState<LazyImageState>({\n isLoading: true,\n hasError: false,\n isVisible: !lazy, // If not lazy, load immediately\n retryCount: 0,\n currentSrc: lazy ? placeholder || null : src,\n });\n\n const markVisible = useCallback(\n () => setState((prev) => ({ ...prev, isVisible: true, currentSrc: src })),\n [src],\n );\n useVisibility(props, containerRef, state.isVisible, markVisible);\n\n // Load image when it becomes visible\n useEffect(() => {\n if (!state.isVisible || !src || state.currentSrc === src) {\n return;\n }\n\n setState((prev) => ({ ...prev, currentSrc: src, isLoading: true, hasError: false }));\n }, [state.isVisible, src, state.currentSrc]);\n\n const handleImageLoad = useCallback(\n (event: React.SyntheticEvent<HTMLImageElement>) => {\n setState((prev) => ({ ...prev, isLoading: false, hasError: false, retryCount: 0 }));\n onLoad?.(event);\n },\n [onLoad],\n );\n\n const handleImageError = useCallback(\n (event: React.SyntheticEvent<HTMLImageElement>) => {\n if (!retryOnError || state.retryCount >= maxRetries) {\n setState((prev) => ({ ...prev, isLoading: false, hasError: true }));\n onError?.(event);\n return;\n }\n\n retryTimeoutRef.current = setTimeout(() => {\n setState((prev) => ({\n ...prev,\n retryCount: prev.retryCount + 1,\n currentSrc: `${src}?retry=${prev.retryCount + 1}`, // Force reload with cache buster\n }));\n }, retryDelay);\n },\n [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src],\n );\n\n return {\n state,\n containerRef,\n effectiveLoadingState,\n handleImageLoad,\n handleImageError,\n showImage: Boolean(state.currentSrc) && !state.hasError,\n showLoading:\n state.isLoading && (!state.currentSrc || effectiveLoadingState !== 'placeholder'),\n };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-6Q5GZUQ5.js → chunk-HGMBY5LP.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   tileBackground
-} from "./chunk-X4PS3E3V.js";
+} from "./chunk-X6AIKCAV.js";
 import {
   TILE_SIZE
 } from "./chunk-TUBCN4DJ.js";
@@ -61,4 +61,4 @@ var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
 export {
   MapTiles
 };
-//# sourceMappingURL=chunk-6Q5GZUQ5.js.map
+//# sourceMappingURL=chunk-HGMBY5LP.js.map

package/dist/{chunk-2AKQPXSJ.js → chunk-HJPPNVCF.js} RENAMED Viewed

@@ -6,7 +6,7 @@ import {
   useSwipe,
   useWheelZoom,
   useZoomState
-} from "./chunk-C6FRVGMC.js";
+} from "./chunk-M6PWPEAV.js";
 // src/components/data-display/Lightbox/useLightbox.ts
 import { useCallback, useImperativeHandle, useState } from "react";
@@ -61,4 +61,4 @@ var useLightbox = ({ isOpen, onClose, items, startIndex, showControls, loop, aut
 export {
   useLightbox
 };
-//# sourceMappingURL=chunk-2AKQPXSJ.js.map
+//# sourceMappingURL=chunk-HJPPNVCF.js.map

package/dist/{chunk-MZMGQKT3.js → chunk-HN3PZTUK.js} RENAMED Viewed

@@ -21,6 +21,10 @@ import {
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/EmptyState/EmptyState.tsx
 import AddIcon from "@mui/icons-material/Add";
@@ -42,7 +46,7 @@ var Illustration = ({ illustration, variant, testId }) => /* @__PURE__ */ jsx(
   {
     "data-testid": testId,
     sx: {
-      maxWidth: illustrationMaxWidth(variant),
+      maxWidth: sxRem(illustrationMaxWidth(variant)),
       width: "100%",
       height: "auto",
       opacity: illustrationOpacity(variant),
@@ -67,7 +71,7 @@ var Actions = ({ specs, testId }) => {
           onClick: spec.onClick,
           startIcon: spec.icon && ACTION_ICONS[spec.icon],
           "data-testid": testId(spec.key),
-          sx: { minWidth: ACTION_MIN_WIDTH },
+          sx: { minWidth: sxRem(ACTION_MIN_WIDTH) },
           children: spec.label
         },
         spec.key
@@ -112,7 +116,7 @@ var Content = ({ title, description, titleId, testId, actions, showActions, help
         sx: {
           fontWeight: theme.typography.fontWeightMedium,
           color: theme.palette.text.primary,
-          maxWidth: TITLE_MAX_WIDTH
+          maxWidth: rem(theme, TITLE_MAX_WIDTH)
         },
         children: title
       }
@@ -124,7 +128,7 @@ var Content = ({ title, description, titleId, testId, actions, showActions, help
         color: "text.secondary",
         "data-testid": testId("description"),
         sx: {
-          maxWidth: DESCRIPTION_MAX_WIDTH,
+          maxWidth: rem(theme, DESCRIPTION_MAX_WIDTH),
           lineHeight: DESCRIPTION_LINE_HEIGHT
         },
         children: description
@@ -165,7 +169,7 @@ var EmptyState = React.memo((props) => {
         justifyContent: "center",
         textAlign: "center",
         padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
-        minHeight: EMPTY_STATE_MIN_HEIGHT,
+        minHeight: rem(theme, EMPTY_STATE_MIN_HEIGHT),
         gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
       },
       children: [
@@ -200,4 +204,4 @@ export {
   EmptyState,
   EmptyState_default
 };
-//# sourceMappingURL=chunk-MZMGQKT3.js.map
+//# sourceMappingURL=chunk-HN3PZTUK.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.tsx"],"sourcesContent":["import AddIcon from '@mui/icons-material/Add';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { type ActionIconName, type ActionSpec, actionsOf, makeTestId } from './EmptyState.helpers';\nimport {\n ACTION_MIN_WIDTH,\n ACTIONS_GAP_UNITS,\n ACTIONS_MARGIN_TOP_UNITS,\n CONTENT_GAP_UNITS,\n DESCRIPTION_LINE_HEIGHT,\n DESCRIPTION_MAX_WIDTH,\n EMPTY_STATE_GAP_UNITS,\n EMPTY_STATE_MIN_HEIGHT,\n EMPTY_STATE_PADDING_UNITS,\n EXTERNAL_LINK_MARK,\n HELP_LINK_MARGIN_TOP_UNITS,\n illustrationMaxWidth,\n illustrationOpacity,\n TITLE_MAX_WIDTH,\n} from './EmptyState.metrics';\nimport type { EmptyStateProps, EmptyStateVariant } from './EmptyState.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/** The shared action list names its glyph; the web draws it with MUI's icon. */\nconst ACTION_ICONS: Record<ActionIconName, React.ReactNode> = {\n Add: <AddIcon />,\n Refresh: <RefreshIcon />,\n};\n\nconst Illustration: React.FC<{\n illustration: React.ReactNode;\n variant: EmptyStateVariant;\n testId: string;\n}> = ({ illustration, variant, testId }) => (\n <Box\n data-testid={testId}\n sx={{\n maxWidth: sxRem(illustrationMaxWidth(variant)),\n width: '100%',\n height: 'auto',\n opacity: illustrationOpacity(variant),\n display: variant === 'minimal' ? 'none' : 'block',\n }}\n >\n {illustration}\n </Box>\n);\n\nconst Actions: React.FC<{\n specs: ActionSpec[];\n testId: (suffix: string) => string;\n}> = ({ specs, testId }) => {\n const theme = useTheme();\n\n return (\n <Stack\n direction={{ xs: 'column', sm: 'row' }}\n spacing={ACTIONS_GAP_UNITS}\n alignItems=\"center\"\n sx={{ mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) }}\n >\n {specs.map((spec) => (\n <Button\n key={spec.key}\n variant={spec.variant}\n onClick={spec.onClick}\n startIcon={spec.icon && ACTION_ICONS[spec.icon]}\n data-testid={testId(spec.key)}\n sx={{ minWidth: sxRem(ACTION_MIN_WIDTH) }}\n >\n {spec.label}\n </Button>\n ))}\n </Stack>\n );\n};\n\nconst HelpLink: React.FC<{\n helpLink: NonNullable<EmptyStateProps['helpLink']>;\n testId: string;\n}> = ({ helpLink, testId }) => {\n const theme = useTheme();\n\n return (\n <Link\n href={helpLink.href}\n target={helpLink.external ? '_blank' : undefined}\n rel={helpLink.external ? 'noopener noreferrer' : undefined}\n data-testid={testId}\n sx={{\n mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),\n color: theme.palette.primary.main,\n textDecoration: 'none',\n '&:hover': {\n textDecoration: 'underline',\n },\n }}\n >\n {helpLink.label}\n {helpLink.external && EXTERNAL_LINK_MARK}\n </Link>\n );\n};\n\nconst Content: React.FC<{\n title: string;\n description?: string;\n titleId: string;\n testId: (suffix: string) => string;\n actions: ActionSpec[];\n showActions: boolean;\n helpLink?: EmptyStateProps['helpLink'];\n}> = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {\n const theme = useTheme();\n\n return (\n <Stack spacing={CONTENT_GAP_UNITS} alignItems=\"center\">\n <Typography\n id={titleId}\n variant=\"h6\"\n component=\"h3\"\n data-testid={testId('title')}\n sx={{\n fontWeight: theme.typography.fontWeightMedium,\n color: theme.palette.text.primary,\n maxWidth: rem(theme, TITLE_MAX_WIDTH),\n }}\n >\n {title}\n </Typography>\n\n {description && (\n <Typography\n variant=\"body2\"\n color=\"text.secondary\"\n data-testid={testId('description')}\n sx={{\n maxWidth: rem(theme, DESCRIPTION_MAX_WIDTH),\n lineHeight: DESCRIPTION_LINE_HEIGHT,\n }}\n >\n {description}\n </Typography>\n )}\n\n {showActions && <Actions specs={actions} testId={testId} />}\n\n {helpLink && <HelpLink helpLink={helpLink} testId={testId('help-link')} />}\n </Stack>\n );\n};\n\nexport const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {\n const {\n variant = 'default',\n title,\n description,\n illustration,\n helpLink,\n refreshLabel = 'Refresh',\n createLabel = 'Create New',\n className,\n } = props;\n const theme = useTheme();\n const titleId = React.useId();\n // `dataTestId` is the documented spelling; `testID`, the shared contract's\n // other one, resolves to the same id.\n const dataTestId = resolveTestId(props);\n const testId = makeTestId(dataTestId);\n\n const actions = actionsOf(props, refreshLabel, createLabel);\n // The `action` variant reserves the action row even when nothing fills it.\n const showActions = variant === 'action' || actions.length > 0;\n\n return (\n <Box\n role=\"region\"\n aria-labelledby={titleId}\n className={className}\n data-testid={dataTestId || 'empty-state'}\n sx={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),\n minHeight: rem(theme, EMPTY_STATE_MIN_HEIGHT),\n gap: theme.spacing(EMPTY_STATE_GAP_UNITS),\n }}\n >\n {/* Illustration */}\n {illustration && (\n <Illustration\n illustration={illustration}\n variant={variant}\n testId={testId('icon')}\n />\n )}\n\n {/* Content */}\n <Content\n title={title}\n description={description}\n titleId={titleId}\n testId={testId}\n actions={actions}\n showActions={showActions}\n helpLink={helpLink}\n />\n </Box>\n );\n});\n\nEmptyState.displayName = 'EmptyState';\n\nexport default EmptyState;\n"],"mappings":"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","names":[]}

package/dist/{chunk-JOR6E23V.js → chunk-IGGXKT5B.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import {
   Stepper
-} from "./chunk-IUCTYNIR.js";
+} from "./chunk-CX66M55F.js";
 import {
   EmptyState
-} from "./chunk-MZMGQKT3.js";
+} from "./chunk-HN3PZTUK.js";
 // src/components/data-display/SectionOnboarding/SectionOnboarding.tsx
 import CheckCircle from "@mui/icons-material/CheckCircle";
@@ -193,4 +193,4 @@ export {
   SectionOnboarding,
   SectionOnboarding_default
 };
-//# sourceMappingURL=chunk-JOR6E23V.js.map
+//# sourceMappingURL=chunk-IGGXKT5B.js.map

package/dist/{chunk-F52N6ACD.js → chunk-IM4DMKH4.js} RENAMED Viewed

@@ -1,3 +1,8 @@
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/Sheet/Sheet.animations.ts
 import { keyframes } from "@mui/material/styles/index.js";
 var SPRING_CONFIG = {
@@ -7,31 +12,31 @@ var SPRING_CONFIG = {
 };
 var DEFAULT_VELOCITY_THRESHOLD = 0.5;
 var DEFAULT_DRAG_RESISTANCE = 0.3;
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.4);
   }
   70% {
-    box-shadow: 0 0 0 20px rgba(var(--pulse-color), 0);
+    box-shadow: 0 0 0 ${rem(theme, 20)} rgba(var(--pulse-color), 0);
   }
   100% {
     box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);
   }
 `;
-var shimmerAnimation = keyframes`
+var shimmerAnimation = (theme) => keyframes`
   0% {
-    background-position: -1000px 0;
+    background-position: ${rem(theme, -1e3)} 0;
   }
   100% {
-    background-position: 1000px 0;
+    background-position: ${rem(theme, 1e3)} 0;
   }
 `;
-var glowAnimation = keyframes`
+var glowAnimation = (theme) => keyframes`
   0%, 100% {
-    box-shadow: 0 0 20px 5px rgba(var(--glow-color), 0.3);
+    box-shadow: ${rems(theme, 0, 0, 20, 5)} rgba(var(--glow-color), 0.3);
   }
   50% {
-    box-shadow: 0 0 35px 10px rgba(var(--glow-color), 0.5);
+    box-shadow: ${rems(theme, 0, 0, 35, 10)} rgba(var(--glow-color), 0.5);
   }
 `;
@@ -43,4 +48,4 @@ export {
   shimmerAnimation,
   glowAnimation
 };
-//# sourceMappingURL=chunk-F52N6ACD.js.map
+//# sourceMappingURL=chunk-IM4DMKH4.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Sheet/Sheet.animations.ts"],"sourcesContent":["import { keyframes, type Theme } from '@mui/material/styles/index.js';\n\nimport { rem, rems } from '../../../tokens/relative';\n\n/** Spring physics used by the draggable variant's snap-point animation. */\nexport const SPRING_CONFIG = {\n tension: 200,\n friction: 25,\n velocity: 0,\n};\n\n/** Velocity threshold for snap detection (pixels per millisecond). */\nexport const DEFAULT_VELOCITY_THRESHOLD = 0.5;\n\n/** Drag resistance factor applied past the first and last snap points. */\nexport const DEFAULT_DRAG_RESISTANCE = 0.3;\n\nexport const pulseAnimation = (theme: Theme) => keyframes`\n 0% {\n box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.4);\n }\n 70% {\n box-shadow: 0 0 0 ${rem(theme, 20)} rgba(var(--pulse-color), 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);\n }\n`;\n\nexport const shimmerAnimation = (theme: Theme) => keyframes`\n 0% {\n background-position: ${rem(theme, -1000)} 0;\n }\n 100% {\n background-position: ${rem(theme, 1000)} 0;\n }\n`;\n\nexport const glowAnimation = (theme: Theme) => keyframes`\n 0%, 100% {\n box-shadow: ${rems(theme, 0, 0, 20, 5)} rgba(var(--glow-color), 0.3);\n }\n 50% {\n box-shadow: ${rems(theme, 0, 0, 35, 10)} rgba(var(--glow-color), 0.5);\n }\n`;\n"],"mappings":";;;;;;AAAA,SAAS,iBAA6B;AAK/B,IAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AAGO,IAAM,6BAA6B;AAGnC,IAAM,0BAA0B;AAEhC,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKxB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,IAAM,mBAAmB,CAAC,UAAiB;AAAA;AAAA,2BAEvB,IAAI,OAAO,IAAK,CAAC;AAAA;AAAA;AAAA,2BAGjB,IAAI,OAAO,GAAI,CAAC;AAAA;AAAA;AAIpC,IAAM,gBAAgB,CAAC,UAAiB;AAAA;AAAA,kBAE7B,KAAK,OAAO,GAAG,GAAG,IAAI,CAAC,CAAC;AAAA;AAAA;AAAA,kBAGxB,KAAK,OAAO,GAAG,GAAG,IAAI,EAAE,CAAC;AAAA;AAAA;","names":[]}