@12-apps/ui 6.35.0 → 6.36.0

package/dist/{chunk-KLMP2BYC.js → chunk-IVJKILIX.js}

@@ -3,7 +3,7 @@ import {
   LightboxCloseButton,
   LightboxNavButtons,
   LightboxZoomControls
-} from "./chunk-TEUX42YW.js";
+} from "./chunk-TZASFX6G.js";
 
 // src/components/data-display/Lightbox/LightboxOverlay.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -60,4 +60,4 @@ var LightboxOverlay = ({
 export {
   LightboxOverlay
 };
-//# sourceMappingURL=chunk-KLMP2BYC.js.map
+//# sourceMappingURL=chunk-IVJKILIX.js.map

package/dist/{chunk-X7PVFAYJ.js → chunk-JGRE56GQ.js}

@@ -10,6 +10,9 @@ import {
 import {
   Text
 } from "./chunk-WTOYEWW6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataViews/save-view-preview.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +23,7 @@ function SummaryRow({
 }) {
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", gap: 1.5 }, "data-testid": testId, children: [
-    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { width: 116, flexShrink: 0, color: "text.secondary" }, children: label }) }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { width: sxRem(116), flexShrink: 0, color: "text.secondary" }, children: label }) }),
     /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { minWidth: 0, flex: 1 }, children: items.join(", ") }) })
   ] });
 }
@@ -32,7 +35,7 @@ function PreviewBox({ preview, testIdPrefix }) {
       default2,
       {
         component: "span",
-        sx: { display: "block", mb: 1, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, color: "text.disabled" },
+        sx: { display: "block", mb: 1, textTransform: "uppercase", letterSpacing: sxRem(0.6), fontWeight: 600, color: "text.disabled" },
         children: copy.saveView.previewHeading
       }
     ) }),
@@ -51,4 +54,4 @@ function PreviewBox({ preview, testIdPrefix }) {
 export {
   PreviewBox
 };
-//# sourceMappingURL=chunk-X7PVFAYJ.js.map
+//# sourceMappingURL=chunk-JGRE56GQ.js.map

package/dist/chunk-JGRE56GQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/save-view-preview.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * What a saved view actually GUARDS, listed before it is saved.\n *\n * Split out of `SaveViewModal.tsx` when that file crossed the size gate: this\n * is the one self-contained piece of it — a read-only summary of the view\n * state, with no form and no dialog around it.\n */\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Box } from \"../../../mui/Box\";\nimport { Stack } from \"../../../mui/Stack\";\nimport { Text } from \"../../typography/Text\";\nimport { sxRem } from \"../../../tokens/relative\";\n\nexport interface PreviewBoxProps {\n  preview: { filters: string[]; columns: string[]; sort: string[] };\n  testIdPrefix: string;\n}\n\n/** One \"label — value\" line of the summary. */\nfunction SummaryRow({\n  label,\n  items,\n  testId,\n}: {\n  label: string;\n  items: string[];\n  testId: string;\n}): React.JSX.Element | null {\n  if (items.length === 0) return null;\n  return (\n    <Box sx={{ display: \"flex\", gap: 1.5 }} data-testid={testId}>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ width: sxRem(116), flexShrink: 0, color: \"text.secondary\" }}>\n          {label}\n        </Box>\n      </Text>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ minWidth: 0, flex: 1 }}>\n          {items.join(\", \")}\n        </Box>\n      </Text>\n    </Box>\n  );\n}\n\nexport function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const empty =\n    preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;\n  return (\n    <Box sx={{ p: 1.5, borderRadius: 1.5, bgcolor: \"action.hover\", border: (theme) => `1px solid ${theme.palette.divider}` }}>\n      <Text variant=\"caption\" as=\"p\">\n        <Box\n          component=\"span\"\n          sx={{ display: \"block\", mb: 1, textTransform: \"uppercase\", letterSpacing: sxRem(0.6), fontWeight: 600, color: \"text.disabled\" }}\n        >\n          {copy.saveView.previewHeading}\n        </Box>\n      </Text>\n      {empty ? (\n        // Saving is still allowed — an operator may be naming the default on\n        // purpose — but it should not be a surprise afterwards.\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" sx={{ color: \"warning.main\", lineHeight: 1.6 }} data-testid={`${testIdPrefix}-preview-empty`}>\n            {copy.saveView.previewUnchanged}\n          </Box>\n        </Text>\n      ) : (\n        <Stack spacing={0.75}>\n          <SummaryRow label={copy.saveView.previewFilters} items={preview.filters} testId={`${testIdPrefix}-preview-filters`} />\n          <SummaryRow label={copy.saveView.previewHiddenColumns} items={preview.columns} testId={`${testIdPrefix}-preview-columns`} />\n          <SummaryRow label={copy.saveView.sortRowLabel} items={preview.sort} testId={`${testIdPrefix}-preview-sort`} />\n        </Stack>\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgCI,SAEI,KAFJ;AAXJ,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAC3B,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,KAAK,IAAI,GAAG,eAAa,QACnD;AAAA,wBAAC,QAAK,SAAQ,WAAU,IAAG,QACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,OAAO,MAAM,GAAG,GAAG,YAAY,GAAG,OAAO,iBAAiB,GACnF,iBACH,GACF;AAAA,IACA,oBAAC,QAAK,SAAQ,WAAU,IAAG,QACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,UAAU,GAAG,MAAM,EAAE,GAC9C,gBAAM,KAAK,IAAI,GAClB,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,WAAW,EAAE,SAAS,aAAa,GAAuC;AACxF,QAAM,OAAO,iBAAiB;AAC9B,QAAM,QACJ,QAAQ,QAAQ,WAAW,KAAK,QAAQ,QAAQ,WAAW,KAAK,QAAQ,KAAK,WAAW;AAC1F,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,GAAG,KAAK,cAAc,KAAK,SAAS,gBAAgB,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO,GAAG,GACrH;AAAA,wBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,SAAS,SAAS,IAAI,GAAG,eAAe,aAAa,eAAe,MAAM,GAAG,GAAG,YAAY,KAAK,OAAO,gBAAgB;AAAA,QAE7H,eAAK,SAAS;AAAA;AAAA,IACjB,GACF;AAAA,IACC;AAAA;AAAA;AAAA,MAGC,oBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,OAAO,gBAAgB,YAAY,IAAI,GAAG,eAAa,GAAG,YAAY,kBAC/F,eAAK,SAAS,kBACjB,GACF;AAAA,QAEA,qBAACA,UAAA,EAAM,SAAS,MACd;AAAA,0BAAC,cAAW,OAAO,KAAK,SAAS,gBAAgB,OAAO,QAAQ,SAAS,QAAQ,GAAG,YAAY,oBAAoB;AAAA,MACpH,oBAAC,cAAW,OAAO,KAAK,SAAS,sBAAsB,OAAO,QAAQ,SAAS,QAAQ,GAAG,YAAY,oBAAoB;AAAA,MAC1H,oBAAC,cAAW,OAAO,KAAK,SAAS,cAAc,OAAO,QAAQ,MAAM,QAAQ,GAAG,YAAY,iBAAiB;AAAA,OAC9G;AAAA,KAEJ;AAEJ;","names":["default"]}

package/dist/{chunk-MRB6GROF.js → chunk-JJJM75XF.js}

@@ -59,8 +59,8 @@ var LineIndicator = ({ index, isActive, color, onSelect }) => {
       tabIndex: 0,
       ...indicatorAttrs(index, isActive),
       sx: {
-        width: isActive ? 30 : 20,
-        height: 3,
+        width: rem(theme, isActive ? 30 : 20),
+        height: rem(theme, 3),
         backgroundColor: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),
         borderRadius: 1.5,
         transition: theme.transitions.create(["width", "background-color"]),
@@ -80,8 +80,8 @@ var NumberIndicator = ({ index, isActive, color, onSelect }) => {
       tabIndex: 0,
       ...indicatorAttrs(index, isActive),
       sx: {
-        width: 24,
-        height: 24,
+        width: rem(theme, 24),
+        height: rem(theme, 24),
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -198,7 +198,7 @@ var CarouselArrows = (props) => {
   } = withDefaults(props, ARROWS_DEFAULTS);
   const theme = useTheme();
   const sx = arrowSx(theme, color, position === "overlay");
-  const offset = position === "outside" ? -40 : 8;
+  const offset = rem(theme, position === "outside" ? -40 : 8);
   return /* @__PURE__ */ jsxs(Box, { "data-testid": "carousel-navigation", children: [
     /* @__PURE__ */ jsx(
       IconButton,
@@ -229,7 +229,7 @@ var CarouselArrows = (props) => {
   ] });
 };
 var THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 };
-var DEFAULT_THUMBNAIL_SIZE = 60;
+var thumbnailSidePx = (size) => THUMBNAIL_SIZES[size] ?? 60;
 var Thumbnail = ({ item, index, isActive, side, onSelect }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
@@ -239,9 +239,9 @@ var Thumbnail = ({ item, index, isActive, side, onSelect }) => {
       "data-testid": `carousel-thumbnail-${index}`,
       "data-active": isActive,
       sx: {
-        width: side,
-        height: side,
-        border: `2px solid ${isActive ? theme.palette.primary.main : "transparent"}`,
+        width: rem(theme, side),
+        height: rem(theme, side),
+        border: `${rem(theme, 2)} solid ${isActive ? theme.palette.primary.main : "transparent"}`,
         borderRadius: 1,
         overflow: "hidden",
         cursor: "pointer",
@@ -286,7 +286,7 @@ var CarouselThumbnails = ({
   style
 }) => {
   const theme = useTheme();
-  const side = THUMBNAIL_SIZES[size] ?? DEFAULT_THUMBNAIL_SIZE;
+  const side = thumbnailSidePx(size);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -295,7 +295,7 @@ var CarouselThumbnails = ({
       sx: {
         position: "absolute",
         // Hung below the frame, clear of its own height plus a gap.
-        bottom: -side - 16,
+        bottom: rem(theme, -side - 16),
         left: "50%",
         transform: "translateX(-50%)",
         display: "flex",
@@ -325,4 +325,4 @@ export {
   CarouselArrows,
   CarouselThumbnails
 };
-//# sourceMappingURL=chunk-MRB6GROF.js.map
+//# sourceMappingURL=chunk-JJJM75XF.js.map

package/dist/chunk-JJJM75XF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.parts.tsx"],"sourcesContent":["import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\nimport Box from '@mui/material/Box/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 { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { neutralTones } from '../../../tokens/ink';\nimport { accentFor, muiSize, rem } from '../../../tokens/scales';\n\nimport type {\n  CarouselArrowsProps,\n  CarouselIndicatorsProps,\n  CarouselItem,\n  CarouselThumbnailsProps,\n} from './Carousel.types';\n\ntype IndicatorPosition = NonNullable<CarouselIndicatorsProps['position']>;\ntype IndicatorVariant = NonNullable<CarouselIndicatorsProps['variant']>;\ntype Color = NonNullable<CarouselIndicatorsProps['color']>;\n\n/** Fires `onSelect` for the keys a native button would treat as activation. */\nconst activateOnKey = (onSelect: () => void) => (e: React.KeyboardEvent) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    onSelect();\n  }\n};\n\nconst INDICATOR_POSITIONS = (theme: Theme): Record<IndicatorPosition, CSSObject> => ({\n  top: { top: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  bottom: { bottom: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  left: {\n    left: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n  right: {\n    right: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n});\n\ninterface IndicatorProps {\n  index: number;\n  isActive: boolean;\n  color: Color;\n  onSelect: () => void;\n}\n\n/** Attributes every indicator variant carries, whatever it draws. */\nconst indicatorAttrs = (index: number, isActive: boolean) => ({\n  'aria-label': `Go to slide ${index + 1}`,\n  'data-testid': `carousel-indicator-${index}`,\n  'data-active': isActive,\n});\n\nconst LineIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive)}\n      sx={{\n        width: rem(theme, isActive ? 30 : 20),\n        height: rem(theme, 3),\n        backgroundColor: isActive\n          ? accentFor(theme, color).main\n          : alpha(accentFor(theme, color).main, 0.3),\n        borderRadius: 1.5,\n        transition: theme.transitions.create(['width', 'background-color']),\n        cursor: 'pointer',\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    />\n  );\n};\n\nconst NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive)}\n      sx={{\n        width: rem(theme, 24),\n        height: rem(theme, 24),\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '50%',\n        backgroundColor: isActive ? accentFor(theme, color).main : 'transparent',\n        color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,\n        border: `1px solid ${accentFor(theme, color).main}`,\n        fontSize: rem(theme, 12),\n        fontWeight: isActive ? 'bold' : 'normal',\n        cursor: 'pointer',\n        transition: theme.transitions.create(['all']),\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    >\n      {index + 1}\n    </Box>\n  );\n};\n\nconst DotIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <IconButton\n      size=\"small\"\n      {...indicatorAttrs(index, isActive)}\n      onClick={onSelect}\n      sx={{\n        p: 0.5,\n        color: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),\n        transform: isActive ? 'scale(1.2)' : 'scale(1)',\n        transition: theme.transitions.create(['transform', 'color']),\n      }}\n    >\n      <FiberManualRecordIcon fontSize=\"small\" />\n    </IconButton>\n  );\n};\n\nconst INDICATORS: Record<IndicatorVariant, React.FC<IndicatorProps>> = {\n  lines: LineIndicator,\n  numbers: NumberIndicator,\n  dots: DotIndicator,\n};\n\nconst INDICATORS_DEFAULTS = {\n  position: 'bottom',\n  color: 'primary',\n  variant: 'dots',\n} satisfies Partial<CarouselIndicatorsProps>;\n\nexport const CarouselIndicators: React.FC<CarouselIndicatorsProps> = (props) => {\n  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(\n    props,\n    INDICATORS_DEFAULTS,\n  ) as CarouselIndicatorsProps & Required<Pick<CarouselIndicatorsProps, keyof typeof INDICATORS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const Indicator = INDICATORS[variant] ?? DotIndicator;\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-indicators\"\n      sx={{\n        position: 'absolute',\n        display: 'flex',\n        gap: 1,\n        zIndex: 2,\n        ...(INDICATOR_POSITIONS(theme)[position] ?? INDICATOR_POSITIONS(theme).bottom),\n        ...style,\n      }}\n    >\n      {Array.from({ length: count }).map((_, index) => (\n        <Indicator\n          key={index}\n          index={index}\n          isActive={index === activeIndex}\n          color={color}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n\nconst ARROWS_DEFAULTS = {\n  position: 'overlay',\n  disabled: false,\n  disablePrev: false,\n  disableNext: false,\n  color: 'primary',\n  size: 'md',\n} satisfies Partial<CarouselArrowsProps>;\n\n/**\n * All three positions place the arrow the same way; only `overlay` fades it back\n * until hovered, and only `outside` sits it clear of the frame.\n */\nconst arrowSx = (theme: Theme, color: Color, isOverlay: boolean): CSSObject => ({\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  zIndex: 3,\n  backgroundColor: alpha(theme.palette.background.paper, 0.8),\n  color: accentFor(theme, color).main,\n  '&:disabled': { opacity: 0.3 },\n  ...(isOverlay\n    ? {\n        opacity: 0.7,\n        '&:hover': { backgroundColor: theme.palette.background.paper, opacity: 1 },\n      }\n    : { '&:hover': { backgroundColor: theme.palette.background.paper } }),\n});\n\nexport const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {\n  const {\n    copy, onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className,\n    style,\n  } = withDefaults(props, ARROWS_DEFAULTS) as CarouselArrowsProps &\n    Required<Pick<CarouselArrowsProps, keyof typeof ARROWS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const sx = arrowSx(theme, color, position === 'overlay');\n  const offset = rem(theme, position === 'outside' ? -40 : 8);\n\n  return (\n    <Box data-testid=\"carousel-navigation\">\n      <IconButton\n        onClick={onPrev}\n        disabled={disabled || disablePrev}\n        size={muiSize(size)}\n        className={className}\n        aria-label={copy.previous}\n        data-testid=\"carousel-prev-button\"\n        sx={{ ...sx, left: offset, ...style }}\n      >\n        <ArrowBackIosIcon />\n      </IconButton>\n\n      <IconButton\n        onClick={onNext}\n        disabled={disabled || disableNext}\n        aria-label={copy.next}\n        size={muiSize(size)}\n        className={className}\n        data-testid=\"carousel-next-button\"\n        sx={{ ...sx, right: offset, ...style }}\n      >\n        <ArrowForwardIosIcon />\n      </IconButton>\n    </Box>\n  );\n};\n\nconst THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 } as const;\n/** A thumbnail's side in design px — 60 for a size the table does not know. */\nconst thumbnailSidePx = (size: string): number =>\n  THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? 60;\n\nconst Thumbnail: React.FC<{\n  item: CarouselItem;\n  index: number;\n  isActive: boolean;\n  side: number;\n  onSelect: () => void;\n}> = ({ item, index, isActive, side, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      onClick={onSelect}\n      data-testid={`carousel-thumbnail-${index}`}\n      data-active={isActive}\n      sx={{\n        width: rem(theme, side),\n        height: rem(theme, side),\n        border: `${rem(theme, 2)} solid ${isActive ? theme.palette.primary.main : 'transparent'}`,\n        borderRadius: 1,\n        overflow: 'hidden',\n        cursor: 'pointer',\n        opacity: isActive ? 1 : 0.6,\n        transition: theme.transitions.create(['opacity', 'border-color']),\n        '&:hover': { opacity: 1 },\n      }}\n    >\n      {item.image ? (\n        <Box\n          component=\"img\"\n          src={item.image}\n          alt={item.alt || item.title}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover' }}\n        />\n      ) : (\n        // No image to show, so the slide's number stands in for it.\n        <Box\n          sx={{\n            width: '100%',\n            height: '100%',\n            backgroundColor: neutralTones(theme).track,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <Typography variant=\"caption\">{index + 1}</Typography>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nexport const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({\n  items,\n  activeIndex,\n  onSelect,\n  size = 'sm',\n  className,\n  style,\n}) => {\n  const theme = useTheme();\n  const side = thumbnailSidePx(size);\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-thumbnails\"\n      sx={{\n        position: 'absolute',\n        // Hung below the frame, clear of its own height plus a gap.\n        bottom: rem(theme, -side - 16),\n        left: '50%',\n        transform: 'translateX(-50%)',\n        display: 'flex',\n        gap: 1,\n        p: 1,\n        backgroundColor: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: 1,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <Thumbnail\n          key={item.id}\n          item={item}\n          index={index}\n          isActive={index === activeIndex}\n          side={side}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-HJWOB62A.js → chunk-JJSZP3TW.js}

@@ -1,6 +1,6 @@
 import {
   DataViewsBoard
-} from "./chunk-YDPUBGJ7.js";
+} from "./chunk-BNEWMFVB.js";
 import {
   SelectAllStrip
 } from "./chunk-JFBEZXNL.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk-O5UGAL2V.js";
 import {
   cardGridTracks
-} from "./chunk-LOJK733T.js";
+} from "./chunk-KJK2Q35C.js";
 import {
   ListCardGroup
 } from "./chunk-JFEEV3XI.js";
@@ -25,7 +25,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   DataGrid
-} from "./chunk-UCTJJYVC.js";
+} from "./chunk-G4HBNILE.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -273,4 +273,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-HJWOB62A.js.map
+//# sourceMappingURL=chunk-JJSZP3TW.js.map

package/dist/{chunk-AI7NVWIG.js → chunk-JOKWTRWL.js}

@@ -67,7 +67,7 @@ function BodyHeading({ children }) {
       sx: {
         fontSize: sxRem(11),
         fontWeight: 700,
-        letterSpacing: 0.4,
+        letterSpacing: sxRem(0.4),
         textTransform: "uppercase",
         color: "text.disabled",
         mb: 0.5
@@ -109,4 +109,4 @@ export {
   BodyHeading,
   TagList
 };
-//# sourceMappingURL=chunk-AI7NVWIG.js.map
+//# sourceMappingURL=chunk-JOKWTRWL.js.map

package/dist/{chunk-AI7NVWIG.js.map → chunk-JOKWTRWL.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-display/CardKit/list-card-parts.tsx"],"sourcesContent":["'use client';\n\nimport type { JSX, ReactNode } from 'react';\n\nimport { Box } from '../../../mui/Box';\n\nimport type { CardFactProps, CardLedgerLine } from './CardKit.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.\n *\n * `BaseListCard` says nothing about what goes inside a row's expanded area — it\n * spans the rails and stops, because the design belongs to the consumer. Right\n * for the card; wrong as the place where every entity in an admin app invents\n * its own two-column layout, its own label/value pair and its own ledger.\n *\n * So the four shapes that actually repeat live here, once. Nothing here knows a\n * domain: they take `ReactNode` and lay it out.\n */\n\n/** The expanded body's two-column split: detail on the left, a ledger right. */\nexport function DetailColumns({ left, right }: { left: ReactNode; right: ReactNode }): JSX.Element {\n  return (\n    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>\n      <Box sx={{ minWidth: 0 }}>{left}</Box>\n      <Box sx={{ minWidth: 0 }}>{right}</Box>\n    </Box>\n  );\n}\n\n/**\n * One labelled fact inside an expanded body.\n *\n * Horizontal, not stacked: the body is already a wide area with room for a\n * label beside its value, and stacking them there would ape the summary rails\n * above without their alignment.\n */\nexport function Fact({ label, value }: CardFactProps): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: sxRem(13), py: 0.25 }}>\n      <Box component=\"span\" sx={{ color: 'text.secondary', flexShrink: 0 }}>\n        {label}\n      </Box>\n      <Box component=\"span\" sx={{ minWidth: 0, textAlign: 'right', overflowWrap: 'anywhere' }}>\n        {value}\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * A money ledger: rows of label/amount, then a ruled total.\n *\n * The total is separated by a RULE rather than by weight alone, because a\n * subtotal and a total in one column with only bold between them is the classic\n * misread — the eye lands on whichever number is larger.\n *\n * The figures arrive pre-formatted. This is a layout, and a component that\n * formatted money would be choosing a locale on the consumer's behalf.\n */\nexport function Ledger({\n  lines,\n  total,\n}: {\n  lines: CardLedgerLine[];\n  total: { label: string; value: ReactNode };\n}): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {lines.map((line) => (\n        <Box\n          key={line.label}\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            fontSize: sxRem(13),\n            color: line.tone === 'info' ? 'info.main' : 'text.secondary',\n          }}\n        >\n          <Box component=\"span\">{line.label}</Box>\n          <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n            {line.value}\n          </Box>\n        </Box>\n      ))}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          fontWeight: 700,\n          borderTop: 1,\n          borderColor: 'divider',\n          pt: 0.5,\n          mt: 0.5,\n        }}\n      >\n        <Box component=\"span\">{total.label}</Box>\n        <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n          {total.value}\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading inside the expanded body, for a section that needs naming. */\nexport function BodyHeading({ children }: { children: ReactNode }): JSX.Element {\n  return (\n    <Box\n      sx={{\n        fontSize: sxRem(11),\n        fontWeight: 700,\n        letterSpacing: 0.4,\n        textTransform: 'uppercase',\n        color: 'text.disabled',\n        mb: 0.5,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * A wrapping run of small items — permission names, role names, target ids.\n *\n * The whole reason several entities earn a list card at all: a `string[]` has no\n * honest table cell. Truncated to \"3 items\" it says nothing; printed in full it\n * destroys the column. Here it simply wraps.\n */\nexport function TagList({\n  items,\n  empty,\n}: {\n  items: readonly string[];\n  /** What to show for an empty run — the consumer's sentence, no default. */\n  empty: string;\n}): JSX.Element {\n  if (items.length === 0) {\n    return <Box sx={{ fontSize: sxRem(13), color: 'text.disabled' }}>{empty}</Box>;\n  }\n  return (\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n      {items.map((item) => (\n        <Box\n          key={item}\n          component=\"span\"\n          sx={{\n            fontSize: sxRem(12),\n            px: 0.75,\n            py: 0.25,\n            borderRadius: 1,\n            bgcolor: 'action.hover',\n            color: 'text.secondary',\n            fontFamily: 'monospace',\n          }}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}
+{"version":3,"sources":["../src/components/data-display/CardKit/list-card-parts.tsx"],"sourcesContent":["'use client';\n\nimport type { JSX, ReactNode } from 'react';\n\nimport { Box } from '../../../mui/Box';\n\nimport type { CardFactProps, CardLedgerLine } from './CardKit.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.\n *\n * `BaseListCard` says nothing about what goes inside a row's expanded area — it\n * spans the rails and stops, because the design belongs to the consumer. Right\n * for the card; wrong as the place where every entity in an admin app invents\n * its own two-column layout, its own label/value pair and its own ledger.\n *\n * So the four shapes that actually repeat live here, once. Nothing here knows a\n * domain: they take `ReactNode` and lay it out.\n */\n\n/** The expanded body's two-column split: detail on the left, a ledger right. */\nexport function DetailColumns({ left, right }: { left: ReactNode; right: ReactNode }): JSX.Element {\n  return (\n    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>\n      <Box sx={{ minWidth: 0 }}>{left}</Box>\n      <Box sx={{ minWidth: 0 }}>{right}</Box>\n    </Box>\n  );\n}\n\n/**\n * One labelled fact inside an expanded body.\n *\n * Horizontal, not stacked: the body is already a wide area with room for a\n * label beside its value, and stacking them there would ape the summary rails\n * above without their alignment.\n */\nexport function Fact({ label, value }: CardFactProps): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: sxRem(13), py: 0.25 }}>\n      <Box component=\"span\" sx={{ color: 'text.secondary', flexShrink: 0 }}>\n        {label}\n      </Box>\n      <Box component=\"span\" sx={{ minWidth: 0, textAlign: 'right', overflowWrap: 'anywhere' }}>\n        {value}\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * A money ledger: rows of label/amount, then a ruled total.\n *\n * The total is separated by a RULE rather than by weight alone, because a\n * subtotal and a total in one column with only bold between them is the classic\n * misread — the eye lands on whichever number is larger.\n *\n * The figures arrive pre-formatted. This is a layout, and a component that\n * formatted money would be choosing a locale on the consumer's behalf.\n */\nexport function Ledger({\n  lines,\n  total,\n}: {\n  lines: CardLedgerLine[];\n  total: { label: string; value: ReactNode };\n}): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {lines.map((line) => (\n        <Box\n          key={line.label}\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            fontSize: sxRem(13),\n            color: line.tone === 'info' ? 'info.main' : 'text.secondary',\n          }}\n        >\n          <Box component=\"span\">{line.label}</Box>\n          <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n            {line.value}\n          </Box>\n        </Box>\n      ))}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          fontWeight: 700,\n          borderTop: 1,\n          borderColor: 'divider',\n          pt: 0.5,\n          mt: 0.5,\n        }}\n      >\n        <Box component=\"span\">{total.label}</Box>\n        <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n          {total.value}\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading inside the expanded body, for a section that needs naming. */\nexport function BodyHeading({ children }: { children: ReactNode }): JSX.Element {\n  return (\n    <Box\n      sx={{\n        fontSize: sxRem(11),\n        fontWeight: 700,\n        letterSpacing: sxRem(0.4),\n        textTransform: 'uppercase',\n        color: 'text.disabled',\n        mb: 0.5,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * A wrapping run of small items — permission names, role names, target ids.\n *\n * The whole reason several entities earn a list card at all: a `string[]` has no\n * honest table cell. Truncated to \"3 items\" it says nothing; printed in full it\n * destroys the column. Here it simply wraps.\n */\nexport function TagList({\n  items,\n  empty,\n}: {\n  items: readonly string[];\n  /** What to show for an empty run — the consumer's sentence, no default. */\n  empty: string;\n}): JSX.Element {\n  if (items.length === 0) {\n    return <Box sx={{ fontSize: sxRem(13), color: 'text.disabled' }}>{empty}</Box>;\n  }\n  return (\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n      {items.map((item) => (\n        <Box\n          key={item}\n          component=\"span\"\n          sx={{\n            fontSize: sxRem(12),\n            px: 0.75,\n            py: 0.25,\n            borderRadius: 1,\n            bgcolor: 'action.hover',\n            color: 'text.secondary',\n            fontFamily: 'monospace',\n          }}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-JCJGJX7V.js → chunk-K4EKTMTC.js}

@@ -1,6 +1,10 @@
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataViews/data-views-drag.tsx
 import { createContext, useContext } from "react";
@@ -40,8 +44,8 @@ function DropIndicator({ edge }) {
         // Centred ON the gap rather than inside the card: the item lands
         // BETWEEN two rows, and a rule sitting within one of them reads as
         // "into this row" instead.
-        ...edge === "before" ? { top: -2 } : { bottom: -2 },
-        height: 3,
+        ...edge === "before" ? { top: sxRem(-2) } : { bottom: sxRem(-2) },
+        height: sxRem(3),
         borderRadius: 2,
         bgcolor: "primary.main",
         pointerEvents: "none",
@@ -64,8 +68,8 @@ function DragHandle({
       ...handleProps,
       sx: {
         display: "inline-grid",
-        gridTemplateColumns: "repeat(2, 3px)",
-        gap: "2px",
+        gridTemplateColumns: (theme) => `repeat(2, ${rem(theme, 3)})`,
+        gap: sxRem(2),
         flexShrink: 0,
         p: 0.5,
         borderRadius: 1,
@@ -79,7 +83,7 @@ function DragHandle({
         default2,
         {
           component: "span",
-          sx: { width: 3, height: 3, borderRadius: "50%", bgcolor: "currentColor" }
+          sx: { width: sxRem(3), height: sxRem(3), borderRadius: "50%", bgcolor: "currentColor" }
         },
         index
       ))
@@ -93,4 +97,4 @@ export {
   DropIndicator,
   DragHandle
 };
-//# sourceMappingURL=chunk-JCJGJX7V.js.map
+//# sourceMappingURL=chunk-K4EKTMTC.js.map

package/dist/chunk-K4EKTMTC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-drag.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * DRAGGING, OWNED BY THE CONTAINER AND NOT BY THE CARD.\n *\n * A card cannot know whether it is draggable. The same `BaseListCard` renders\n * inside a reorderable queue, a read-only report and a board column that moves\n * items between columns — and only the thing holding them knows which. So the\n * container publishes a drag context and every card inside it becomes\n * draggable; a card with no container above it renders exactly as before, with\n * no handle and no listeners.\n *\n * This is a SEAM, not a drag implementation. It carries whatever props the\n * host's library hands out — dnd-kit's `attributes`/`listeners`, react-dnd's\n * connector output, or plain HTML5 `draggable` + `onDragStart` — because\n * picking one of those for every consumer of `@12-apps/ui` is a decision this\n * package has no business making. There is no drag dependency here, and adding\n * one would force it on every app that installs the library.\n */\n\n/** The props a container hands to one item. Deliberately untyped-ish: each DnD library has its own shape. */\nexport type DragItemProps = Record<string, unknown>;\n\nexport interface DragContainerValue {\n  /**\n   * Props for the item's ROOT — the element that moves. dnd-kit wants its\n   * `setNodeRef` and transform style here; HTML5 wants `draggable` and\n   * `onDragStart`.\n   */\n  itemProps: (id: string | number) => DragItemProps;\n  /**\n   * Props for the HANDLE alone, when the container wants drags to start only\n   * from the grip.\n   *\n   * Whole-card dragging breaks the two things a card must still do: selecting\n   * text in it, and hitting the checkbox without the row sliding away. When a\n   * container returns handle props, the card puts them on the grip and leaves\n   * the rest of itself alone.\n   */\n  handleProps?: (id: string | number) => DragItemProps;\n  /** The id currently being dragged, so its card can dim itself. */\n  activeId?: string | number | null;\n  /**\n   * WHERE THE DRAGGED ITEM WOULD LAND — the one thing a drag cannot be honest\n   * without.\n   *\n   * A list that dims the row you picked up and shows nothing else asks you to\n   * guess the outcome and find out by dropping. The marker turns that into a\n   * statement: THIS gap is where it goes.\n   *\n   * Published by the container, not computed by the card, for the same reason\n   * everything else here is: only the thing holding the items knows the\n   * geometry — which one you are over, which edge of it, and whether that\n   * position is legal. A card knows none of that about its neighbours.\n   *\n   * `null` while nothing is being dragged, or while the pointer is over no\n   * valid target.\n   */\n  dropIndicator?: { id: string | number; edge: \"before\" | \"after\" } | null;\n}\n\nconst DragContainerContext = createContext<DragContainerValue | null>(null);\n\n/**\n * Marks everything inside as draggable. Cards read this; nothing else does.\n */\nexport function DragContainerProvider({\n  value,\n  children,\n}: {\n  value: DragContainerValue;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <DragContainerContext.Provider value={value}>{children}</DragContainerContext.Provider>;\n}\n\n/**\n * What one card needs to know about dragging.\n *\n * Returns the inert answer when there is no container OR no `dragId` — a card\n * that forgot its id must not render a handle that does nothing, which is worse\n * than no handle at all.\n */\nexport function useDragItem(dragId: string | number | undefined): {\n  draggable: boolean;\n  itemProps: DragItemProps;\n  handleProps: DragItemProps | undefined;\n  dragging: boolean;\n  /** Which of this card's edges the marker sits on, or null for neither. */\n  dropEdge: \"before\" | \"after\" | null;\n} {\n  const container = useContext(DragContainerContext);\n  if (!container || dragId === undefined) {\n    return { draggable: false, itemProps: {}, handleProps: undefined, dragging: false, dropEdge: null };\n  }\n  const indicator = container.dropIndicator;\n  return {\n    draggable: true,\n    itemProps: container.itemProps(dragId),\n    handleProps: container.handleProps?.(dragId),\n    dragging: container.activeId === dragId,\n    dropEdge: indicator != null && indicator.id === dragId ? indicator.edge : null,\n  };\n}\n\n/**\n * THE DROP MARKER — one rule across the card's edge, drawn where the item lands.\n *\n * Shared by every draggable surface rather than reimplemented per card, so a\n * reorderable list, a board column and a grid of tiles all say the same thing\n * the same way. A consumer wiring its own DnD gets this for free by publishing\n * `dropIndicator`; it never draws the marker itself.\n *\n * ABSOLUTE, AND OUTSIDE THE FLOW ON PURPOSE. A marker that took layout space\n * would push every row below it down by its own height the moment it appeared —\n * the list would twitch as you dragged across it, and the gap you were aiming\n * at would move out from under the pointer. Drawn over the gap instead, nothing\n * reflows.\n *\n * `pointerEvents: none` so it cannot swallow the dragover events that placed it,\n * and `aria-hidden` because the position it reports belongs in a live region the\n * LIST owns — fifty rows each announcing a marker is a screen-reader nightmare.\n */\nexport function DropIndicator({ edge }: { edge: \"before\" | \"after\" }): React.JSX.Element {\n  return (\n    <Box\n      aria-hidden\n      data-slot=\"drop-indicator\"\n      data-drop-edge={edge}\n      sx={{\n        position: \"absolute\",\n        left: 0,\n        right: 0,\n        // Centred ON the gap rather than inside the card: the item lands\n        // BETWEEN two rows, and a rule sitting within one of them reads as\n        // \"into this row\" instead.\n        ...(edge === \"before\" ? { top: sxRem(-2) } : { bottom: sxRem(-2) }),\n        height: sxRem(3),\n        borderRadius: 2,\n        bgcolor: \"primary.main\",\n        pointerEvents: \"none\",\n        zIndex: 2,\n      }}\n    />\n  );\n}\n\n/**\n * The grip. Six dots, the convention everywhere, drawn rather than imported so\n * this costs no icon dependency.\n *\n * `cursor: grab` on the handle only when the container gates drags to it —\n * otherwise the whole card carries the cursor and the handle is just an\n * affordance saying so.\n */\nexport function DragHandle({\n  handleProps,\n  gated,\n  testId,\n}: {\n  handleProps: DragItemProps | undefined;\n  gated: boolean;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"span\"\n      aria-hidden={handleProps ? undefined : true}\n      data-testid={testId}\n      {...handleProps}\n      sx={{\n        display: \"inline-grid\",\n        gridTemplateColumns: (theme: Theme) => `repeat(2, ${rem(theme, 3)})`,\n        gap: sxRem(2),\n        flexShrink: 0,\n        p: 0.5,\n        borderRadius: 1,\n        color: \"text.disabled\",\n        cursor: gated ? \"grab\" : \"inherit\",\n        touchAction: \"none\",\n        \"&:active\": { cursor: gated ? \"grabbing\" : \"inherit\" },\n        \"&:hover\": { color: \"text.secondary\" },\n      }}\n    >\n      {Array.from({ length: 6 }).map((_, index) => (\n        <Box\n          key={index}\n          component=\"span\"\n          sx={{ width: sxRem(3), height: sxRem(3), borderRadius: \"50%\", bgcolor: \"currentColor\" }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,SAAS,eAAe,kBAAkC;AA6EjD;AAZT,IAAM,uBAAuB,cAAyC,IAAI;AAKnE,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGsB;AACpB,SAAO,oBAAC,qBAAqB,UAArB,EAA8B,OAAe,UAAS;AAChE;AASO,SAAS,YAAY,QAO1B;AACA,QAAM,YAAY,WAAW,oBAAoB;AACjD,MAAI,CAAC,aAAa,WAAW,QAAW;AACtC,WAAO,EAAE,WAAW,OAAO,WAAW,CAAC,GAAG,aAAa,QAAW,UAAU,OAAO,UAAU,KAAK;AAAA,EACpG;AACA,QAAM,YAAY,UAAU;AAC5B,SAAO;AAAA,IACL,WAAW;AAAA,IACX,WAAW,UAAU,UAAU,MAAM;AAAA,IACrC,aAAa,UAAU,cAAc,MAAM;AAAA,IAC3C,UAAU,UAAU,aAAa;AAAA,IACjC,UAAU,aAAa,QAAQ,UAAU,OAAO,SAAS,UAAU,OAAO;AAAA,EAC5E;AACF;AAoBO,SAAS,cAAc,EAAE,KAAK,GAAoD;AACvF,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,kBAAgB;AAAA,MAChB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA;AAAA;AAAA;AAAA,QAIP,GAAI,SAAS,WAAW,EAAE,KAAK,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,MAAM,EAAE,EAAE;AAAA,QACjE,QAAQ,MAAM,CAAC;AAAA,QACf,cAAc;AAAA,QACd,SAAS;AAAA,QACT,eAAe;AAAA,QACf,QAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa,cAAc,SAAY;AAAA,MACvC,eAAa;AAAA,MACZ,GAAG;AAAA,MACJ,IAAI;AAAA,QACF,SAAS;AAAA,QACT,qBAAqB,CAAC,UAAiB,aAAa,IAAI,OAAO,CAAC,CAAC;AAAA,QACjE,KAAK,MAAM,CAAC;AAAA,QACZ,YAAY;AAAA,QACZ,GAAG;AAAA,QACH,cAAc;AAAA,QACd,OAAO;AAAA,QACP,QAAQ,QAAQ,SAAS;AAAA,QACzB,aAAa;AAAA,QACb,YAAY,EAAE,QAAQ,QAAQ,aAAa,UAAU;AAAA,QACrD,WAAW,EAAE,OAAO,iBAAiB;AAAA,MACvC;AAAA,MAEC,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,UACjC;AAAA,QAACA;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,IAAI,EAAE,OAAO,MAAM,CAAC,GAAG,QAAQ,MAAM,CAAC,GAAG,cAAc,OAAO,SAAS,eAAe;AAAA;AAAA,QAFjF;AAAA,MAGP,CACD;AAAA;AAAA,EACH;AAEJ;","names":["default"]}

package/dist/{chunk-UCA47HM7.js → chunk-KCAW6HRO.js}

@@ -1,6 +1,6 @@
 import {
   withConfirmation
-} from "./chunk-U2IRCTAR.js";
+} from "./chunk-4WCDMCIS.js";
 import {
   Button
 } from "./chunk-KH25WUSX.js";
@@ -18,4 +18,4 @@ function createConfirmButton(copy, errorText) {
 export {
   createConfirmButton
 };
-//# sourceMappingURL=chunk-UCA47HM7.js.map
+//# sourceMappingURL=chunk-KCAW6HRO.js.map

package/dist/{chunk-7HFGVT3G.js → chunk-KJDBY2KN.js}

@@ -1,13 +1,13 @@
 import {
   badgeVariantStyles
-} from "./chunk-2WGMMFGV.js";
+} from "./chunk-M5ZXL52T.js";
 import {
   bounceAnimation,
   fadeInScaleAnimation,
   glowPulseAnimation,
   pulseAnimation,
   shimmerAnimation
-} from "./chunk-H2YBVBPW.js";
+} from "./chunk-3UIDKLML.js";
 import {
   BADGE_BORDER_WIDTH,
   BADGE_CONTENT_GAP,
@@ -30,6 +30,10 @@ import {
 import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Badge/Badge.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -47,19 +51,18 @@ var getColorFromTheme = (theme, color) => {
   };
   return colorMap[color] || theme.palette.primary;
 };
-var sizeMap = Object.fromEntries(
-  Object.entries(BADGE_SIZES).map(([size, metrics]) => [
-    size,
-    {
-      minWidth: metrics.minWidth,
-      height: metrics.height,
-      step: metrics,
-      padding: `0 ${metrics.paddingHorizontal}px`,
-      dotSize: metrics.dotSize
-    }
-  ])
-);
-var getSizeStyles = (size) => sizeMap[size] || sizeMap.md;
+var getSizeStyles = (theme, size) => {
+  const step = BADGE_SIZES[size] || BADGE_SIZES.md;
+  return {
+    minWidth: rem(theme, step.minWidth),
+    height: rem(theme, step.height),
+    /** Half the height: the pill's end caps. */
+    pillRadius: rem(theme, step.height / 2),
+    step,
+    padding: rems(theme, 0, step.paddingHorizontal),
+    dotSize: rem(theme, step.dotSize)
+  };
+};
 var getAnchorOrigin = (position) => badgeAnchor(position || "top-right");
 var rgbValuesOf = (color) => {
   if (color.startsWith("#")) {
@@ -74,14 +77,15 @@ var rgbValuesOf = (color) => {
 var badgeLightingStyles = ({
   glow,
   pulse,
-  colorPalette
+  colorPalette,
+  theme
 }) => ({
   // Glow effect
   ...glow && !pulse && {
-    boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
+    boxShadow: `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,
     filter: `brightness(${GLOW.brightness})`,
     "&:hover": {
-      boxShadow: `0 0 ${GLOW.hoverBlur}px ${GLOW.hoverSpread}px ${alpha(colorPalette.main, GLOW.hoverAlpha)}`
+      boxShadow: `0 0 ${rems(theme, GLOW.hoverBlur, GLOW.hoverSpread)} ${alpha(colorPalette.main, GLOW.hoverAlpha)}`
     }
   },
   // Pulse animation
@@ -90,7 +94,7 @@ var badgeLightingStyles = ({
   },
   // Both glow and pulse
   ...glow && pulse && {
-    animation: `${glowPulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite`,
+    animation: `${glowPulseAnimation(theme)} ${PULSE.durationMs / 1e3}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite`,
     filter: `brightness(${GLOW.brightness})`
   }
 });
@@ -109,12 +113,12 @@ var badgeAnimationStyles = ({
   },
   // Bounce animation
   ...bounce && {
-    animation: `${bounceAnimation} ${BOUNCE.durationMs / 1e3}s ease-in-out`
+    animation: `${bounceAnimation(theme)} ${BOUNCE.durationMs / 1e3}s ease-in-out`
   },
   // Shimmer effect
   ...shimmer && {
     background: customVariant === "gradient" ? `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)` : colorPalette.main,
-    backgroundSize: shimmer ? "1000px 100%" : "auto",
+    backgroundSize: shimmer ? `${rem(theme, 1e3)} 100%` : "auto",
     position: "relative",
     overflow: "hidden",
     "&::after": {
@@ -130,7 +134,7 @@ var badgeAnimationStyles = ({
             ${sheen(theme, SHIMMER.alpha)},
             transparent
           )`,
-      animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1e3}s infinite`
+      animation: `${shimmerAnimation(theme)} ${SHIMMER.durationMs / 1e3}s infinite`
     }
   }
 });
@@ -147,13 +151,13 @@ var badgeStyles = ({
   hasIcon
 }) => {
   const colorPalette = getColorFromTheme(theme, customColor);
-  const sizeStyles = getSizeStyles(customSize);
+  const sizeStyles = getSizeStyles(theme, customSize);
   return {
     "--glow-color": rgbValuesOf(colorPalette.main),
     "& .MuiBadge-badge": {
       transition: `all ${BADGE_TRANSITION_MS / 1e3}s ${BADGE_TRANSITION_EASING}`,
       fontWeight: BADGE_FONT_WEIGHT,
-      border: `${BADGE_BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
+      border: `${rem(theme, BADGE_BORDER_WIDTH)} solid ${theme.palette.background.paper}`,
       letterSpacing: `${BADGE_LETTER_SPACING_EM}em`,
       textTransform: customVariant === "gradient" || customVariant === "glass" ? "uppercase" : "none",
       willChange: "transform, opacity",
@@ -167,7 +171,7 @@ var badgeStyles = ({
         paddingLeft: sizeStyles.padding.split(" ")[1],
         display: "inline-flex",
         alignItems: "center",
-        gap: `${BADGE_CONTENT_GAP}px`
+        gap: rem(theme, BADGE_CONTENT_GAP)
       },
       // Animation on mount
       ...badgeAnimationStyles({
@@ -180,7 +184,7 @@ var badgeStyles = ({
         colorPalette,
         theme
       }),
-      ...badgeLightingStyles({ glow, pulse, colorPalette }),
+      ...badgeLightingStyles({ glow, pulse, colorPalette, theme }),
       "&:not(.MuiBadge-dot):hover": {
         transform: `scale(${HOVER_SCALE})`,
         zIndex: 1
@@ -194,4 +198,4 @@ export {
   getAnchorOrigin,
   badgeStyles
 };
-//# sourceMappingURL=chunk-7HFGVT3G.js.map
+//# sourceMappingURL=chunk-KJDBY2KN.js.map

package/dist/chunk-KJDBY2KN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  fadeInScaleAnimation,\n  glowPulseAnimation,\n  pulseAnimation,\n  shimmerAnimation } from './Badge.animations';\nimport {\n  BADGE_BORDER_WIDTH,\n  BADGE_CONTENT_GAP,\n  BADGE_FONT_WEIGHT,\n  BADGE_LETTER_SPACING_EM,\n  BADGE_SIZES,\n  BADGE_TRANSITION_EASING,\n  BADGE_TRANSITION_MS,\n  BOUNCE,\n  FADE_IN_SCALE,\n  GLOW,\n  HOVER_SCALE,\n  PULSE,\n  SHIMMER,\n  badgeAnchor,\n} from './Badge.metrics';\nimport type { BadgeSizeMetrics } from './Badge.metrics';\nimport { badgeVariantStyles } from './Badge.variants';\nimport type { BadgeSize, BadgeVariant } from './Badge.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { accentFor } from '../../../tokens/scales';\n\nexport type BadgePalette = {\n  main: string;\n  light?: string;\n  dark?: string;\n  contrastText?: string;\n};\nexport type BadgeSizeStyles = ReturnType<typeof getSizeStyles>;\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  const colorMap: Record<string, ReturnType<typeof theme.palette.augmentColor>> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    // `danger`, the house word the prop actually takes. Keyed on MUI's `error`\n    // it matched nothing and fell through to the default.\n    danger: theme.palette.error,\n    neutral: accentFor(theme, 'neutral') };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\n// Read from the shared metrics, not restated: the native `Badge` reads the\n// same table, so the two renderers cannot disagree on a chip. The table is\n// design px; the web draws every length through the type scale here.\nexport const getSizeStyles = (theme: Theme, size: BadgeSize) => {\n  /** The step itself: its `fontSize`/`iconSize` are design px, drawn through `rem(theme, …)`. */\n  const step: BadgeSizeMetrics = BADGE_SIZES[size] || BADGE_SIZES.md;\n  return {\n    minWidth: rem(theme, step.minWidth),\n    height: rem(theme, step.height),\n    /** Half the height: the pill's end caps. */\n    pillRadius: rem(theme, step.height / 2),\n    step,\n    padding: rems(theme, 0, step.paddingHorizontal),\n    dotSize: rem(theme, step.dotSize),\n  };\n};\n\nexport const getAnchorOrigin = (position: string) =>\n  badgeAnchor((position || 'top-right') as Parameters<typeof badgeAnchor>[0]);\n\n// Exactly one variant applies, so a lookup replaces ten mutually exclusive\n// spreads inside the style object.\n// The glow effect needs the badge colour as bare RGB components for a CSS\n// variable, and the palette hands them over as hex or rgb().\nconst rgbValuesOf = (color: string): string => {\n  if (color.startsWith('#')) {\n    const hex = color.slice(1);\n    const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));\n    return `${r}, ${g}, ${b}`;\n  }\n\n  const match = color.match(/\\d+/g);\n  if (match) return `${match[0]}, ${match[1]}, ${match[2]}`;\n  return '255, 255, 255';\n};\n\n// Glow and pulse combine into a third, distinct treatment rather than stacking.\nconst badgeLightingStyles = ({\n  glow,\n  pulse,\n  colorPalette,\n  theme }: {\n  glow?: boolean;\n  pulse?: boolean;\n  colorPalette: BadgePalette;\n  theme: Theme;\n}): CSSObject => ({\n      // Glow effect\n      ...(glow &&\n        !pulse && {\n          boxShadow: `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,\n          filter: `brightness(${GLOW.brightness})`,\n          '&:hover': {\n            boxShadow: `0 0 ${rems(theme, GLOW.hoverBlur, GLOW.hoverSpread)} ${alpha(colorPalette.main, GLOW.hoverAlpha)}` } }),\n\n      // Pulse animation\n      ...(pulse &&\n        !glow && {\n          animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite` }),\n\n      // Both glow and pulse\n      ...(glow &&\n        pulse && {\n          animation: `${glowPulseAnimation(theme)} ${PULSE.durationMs / 1000}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite`,\n          filter: `brightness(${GLOW.brightness})`,\n        }),\n\n});\n\nconst badgeAnimationStyles = ({\n  animate,\n  bounce,\n  shimmer,\n  glow: _glow,\n  pulse: _pulse,\n  customVariant,\n  colorPalette,\n  theme }: {\n  animate?: boolean;\n  bounce?: boolean;\n  shimmer?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n  customVariant?: BadgeVariant;\n  colorPalette: BadgePalette;\n  theme: Theme;\n}): CSSObject => ({\n      ...(animate &&\n        !bounce && {\n          animation: `${fadeInScaleAnimation} ${FADE_IN_SCALE.durationMs / 1000}s cubic-bezier(0.68, -0.55, 0.265, 1.55)` }),\n\n      // Bounce animation\n      ...(bounce && {\n        animation: `${bounceAnimation(theme)} ${BOUNCE.durationMs / 1000}s ease-in-out` }),\n\n      // Shimmer effect\n      ...(shimmer && {\n        background:\n          customVariant === 'gradient'\n            ? `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`\n            : colorPalette.main,\n        backgroundSize: shimmer ? `${rem(theme, 1000)} 100%` : 'auto',\n        position: 'relative',\n        overflow: 'hidden',\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background: `linear-gradient(\n            90deg,\n            transparent,\n            ${sheen(theme, SHIMMER.alpha)},\n            transparent\n          )`,\n          animation: `${shimmerAnimation(theme)} ${SHIMMER.durationMs / 1000}s infinite` } }) });\n\n// The badge chip's own styling, lifted out so the styled() callback just\n// forwards its props.\ninterface BadgeStyleArgs {\n  theme: Theme;\n  customVariant?: BadgeVariant;\n  customSize?: BadgeSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n  shimmer?: boolean;\n  bounce?: boolean;\n  hasIcon?: boolean;\n}\n\nexport const badgeStyles = ({\n  theme,\n  customVariant,\n  customSize = 'md',\n  customColor = 'primary',\n  glow,\n  pulse,\n  animate,\n  shimmer,\n  bounce,\n  hasIcon }: BadgeStyleArgs): CSSObject => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const sizeStyles = getSizeStyles(theme, customSize);\n\n  return {\n    '--glow-color': rgbValuesOf(colorPalette.main),\n    '& .MuiBadge-badge': {\n      transition: `all ${BADGE_TRANSITION_MS / 1000}s ${BADGE_TRANSITION_EASING}`,\n      fontWeight: BADGE_FONT_WEIGHT,\n      border: `${rem(theme, BADGE_BORDER_WIDTH)} solid ${theme.palette.background.paper}`,\n      letterSpacing: `${BADGE_LETTER_SPACING_EM}em`,\n      textTransform:\n        customVariant === 'gradient' || customVariant === 'glass' ? 'uppercase' : 'none',\n      willChange: 'transform, opacity',\n      backfaceVisibility: 'hidden',\n\n      // Outline variant\n\n      // Destructive variant\n\n      // Warning variant\n\n      // Adjust padding when icon is present\n      ...badgeVariantStyles(theme, colorPalette, sizeStyles, customVariant),\n      ...(hasIcon && {\n        paddingLeft: sizeStyles.padding.split(' ')[1],\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: rem(theme, BADGE_CONTENT_GAP),\n      }),\n\n      // Animation on mount\n      ...badgeAnimationStyles({\n        animate,\n        bounce,\n        shimmer,\n        glow,\n        pulse,\n        customVariant,\n        colorPalette,\n        theme }),\n      ...badgeLightingStyles({ glow, pulse, colorPalette, theme }),\n\n      '&:not(.MuiBadge-dot):hover': {\n        transform: `scale(${HOVER_SCALE})`,\n        zIndex: 1 } } };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,aAAa;AAwCtB,IAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,QAAM,WAA0E;AAAA,IAC9E,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA;AAAA;AAAA,IAGpB,QAAQ,MAAM,QAAQ;AAAA,IACtB,SAAS,UAAU,OAAO,SAAS;AAAA,EAAE;AAEvC,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAKO,IAAM,gBAAgB,CAAC,OAAc,SAAoB;AAE9D,QAAM,OAAyB,YAAY,IAAI,KAAK,YAAY;AAChE,SAAO;AAAA,IACL,UAAU,IAAI,OAAO,KAAK,QAAQ;AAAA,IAClC,QAAQ,IAAI,OAAO,KAAK,MAAM;AAAA;AAAA,IAE9B,YAAY,IAAI,OAAO,KAAK,SAAS,CAAC;AAAA,IACtC;AAAA,IACA,SAAS,KAAK,OAAO,GAAG,KAAK,iBAAiB;AAAA,IAC9C,SAAS,IAAI,OAAO,KAAK,OAAO;AAAA,EAClC;AACF;AAEO,IAAM,kBAAkB,CAAC,aAC9B,YAAa,YAAY,WAAiD;AAM5E,IAAM,cAAc,CAAC,UAA0B;AAC7C,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,UAAM,MAAM,MAAM,MAAM,CAAC;AACzB,UAAM,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,SAAS,IAAI,MAAM,QAAQ,SAAS,CAAC,GAAG,EAAE,CAAC;AACvF,WAAO,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;AAAA,EACzB;AAEA,QAAM,QAAQ,MAAM,MAAM,MAAM;AAChC,MAAI,MAAO,QAAO,GAAG,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;AACvD,SAAO;AACT;AAGA,IAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAM,OAKU;AAAA;AAAA,EAEZ,GAAI,QACF,CAAC,SAAS;AAAA,IACR,WAAW,OAAO,KAAK,OAAO,KAAK,MAAM,KAAK,MAAM,CAAC,IAAI,MAAM,aAAa,MAAM,KAAK,KAAK,CAAC;AAAA,IAC7F,QAAQ,cAAc,KAAK,UAAU;AAAA,IACrC,WAAW;AAAA,MACT,WAAW,OAAO,KAAK,OAAO,KAAK,WAAW,KAAK,WAAW,CAAC,IAAI,MAAM,aAAa,MAAM,KAAK,UAAU,CAAC;AAAA,IAAG;AAAA,EAAE;AAAA;AAAA,EAGvH,GAAI,SACF,CAAC,QAAQ;AAAA,IACP,WAAW,GAAG,cAAc,IAAI,MAAM,aAAa,GAAI;AAAA,EAAyB;AAAA;AAAA,EAGpF,GAAI,QACF,SAAS;AAAA,IACP,WAAW,GAAG,mBAAmB,KAAK,CAAC,IAAI,MAAM,aAAa,GAAI,2BAA2B,cAAc,IAAI,MAAM,aAAa,GAAI;AAAA,IACtI,QAAQ,cAAc,KAAK,UAAU;AAAA,EACvC;AAER;AAEA,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAM,OASU;AAAA,EACZ,GAAI,WACF,CAAC,UAAU;AAAA,IACT,WAAW,GAAG,oBAAoB,IAAI,cAAc,aAAa,GAAI;AAAA,EAA2C;AAAA;AAAA,EAGpH,GAAI,UAAU;AAAA,IACZ,WAAW,GAAG,gBAAgB,KAAK,CAAC,IAAI,OAAO,aAAa,GAAI;AAAA,EAAgB;AAAA;AAAA,EAGlF,GAAI,WAAW;AAAA,IACb,YACE,kBAAkB,aACd,2BAA2B,aAAa,IAAI,QAAQ,aAAa,QAAQ,aAAa,IAAI,WAC1F,aAAa;AAAA,IACnB,gBAAgB,UAAU,GAAG,IAAI,OAAO,GAAI,CAAC,UAAU;AAAA,IACvD,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA;AAAA;AAAA,cAGR,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,MAG/B,WAAW,GAAG,iBAAiB,KAAK,CAAC,IAAI,QAAQ,aAAa,GAAI;AAAA,IAAa;AAAA,EAAE;AAAG;AAiBvF,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAQ,MAAiC;AACzC,QAAM,eAAe,kBAAkB,OAAO,WAAW;AACzD,QAAM,aAAa,cAAc,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,gBAAgB,YAAY,aAAa,IAAI;AAAA,IAC7C,qBAAqB;AAAA,MACnB,YAAY,OAAO,sBAAsB,GAAI,KAAK,uBAAuB;AAAA,MACzE,YAAY;AAAA,MACZ,QAAQ,GAAG,IAAI,OAAO,kBAAkB,CAAC,UAAU,MAAM,QAAQ,WAAW,KAAK;AAAA,MACjF,eAAe,GAAG,uBAAuB;AAAA,MACzC,eACE,kBAAkB,cAAc,kBAAkB,UAAU,cAAc;AAAA,MAC5E,YAAY;AAAA,MACZ,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,MASpB,GAAG,mBAAmB,OAAO,cAAc,YAAY,aAAa;AAAA,MACpE,GAAI,WAAW;AAAA,QACb,aAAa,WAAW,QAAQ,MAAM,GAAG,EAAE,CAAC;AAAA,QAC5C,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK,IAAI,OAAO,iBAAiB;AAAA,MACnC;AAAA;AAAA,MAGA,GAAG,qBAAqB;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAM,CAAC;AAAA,MACT,GAAG,oBAAoB,EAAE,MAAM,OAAO,cAAc,MAAM,CAAC;AAAA,MAE3D,8BAA8B;AAAA,QAC5B,WAAW,SAAS,WAAW;AAAA,QAC/B,QAAQ;AAAA,MAAE;AAAA,IAAE;AAAA,EAAE;AACtB;","names":[]}

package/dist/{chunk-LOJK733T.js → chunk-KJK2Q35C.js}

@@ -10,6 +10,10 @@ import {
 import {
   Button
 } from "./chunk-KH25WUSX.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataViews/data-views-grid-helpers.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -49,7 +53,7 @@ function buildRowActionsColumn(config) {
     // Narrow: the column only holds the "⋮" kebab (plus an optional leading icon),
     // so it needs room for just one or two icons.
     width: leading ? 72 : 44,
-    cell: ({ row }) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, justifyContent: "flex-end" }, children: [
+    cell: ({ row }) => /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: sxRem(2), justifyContent: "flex-end" }, children: [
       leading?.(row),
       renderRowMenu ? renderRowMenu(row) : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)
     ] })
@@ -145,10 +149,10 @@ function togglePillValues(current, value, checked) {
 }
 function cardGridTracks(targetWidth) {
   return {
-    gridTemplateColumns: {
+    gridTemplateColumns: (theme) => ({
       xs: "1fr",
-      sm: `repeat(auto-fill, minmax(${targetWidth}px, 1fr))`
-    }
+      sm: `repeat(auto-fill, minmax(${rem(theme, targetWidth)}, 1fr))`
+    })
   };
 }
 
@@ -162,4 +166,4 @@ export {
   togglePillValues,
   cardGridTracks
 };
-//# sourceMappingURL=chunk-LOJK733T.js.map
+//# sourceMappingURL=chunk-KJK2Q35C.js.map

package/dist/chunk-KJK2Q35C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-grid-helpers.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { type GridColumn } from \"../DataGrid\";\nimport { type SortFieldDefinition } from \"../../layout/ContentToolbar\";\nimport { Box } from \"../../../mui/Box\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\nimport { Button } from \"../../form/Button\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../../navigation/DropdownMenu\";\n\nimport type {\n  DataViewColumn,\n  DataViewState,\n  FilterFieldConfig,\n  RangeFieldConfig,\n  RowAction,\n} from \"./data-views-types\";\n\n/** Is this the non-clickable actions column? */\nexport function isActionsColumn<T extends Record<string, unknown>>(col: GridColumn<T>): boolean {\n  return col.type === \"actions\" || col.id === \"actions\";\n}\n\n/**\n * Map the DataView columns to grid columns, applying visibility and — when a row\n * click handler is present — wrapping each non-actions cell so clicking opens the row.\n */\nexport function buildGridColumns<T extends Record<string, unknown>>(\n  columns: DataViewColumn<T>[],\n  visibleColumns: string[],\n  onRowClick: ((row: T) => void) | undefined,\n): GridColumn<T>[] {\n  return columns.map((col) => {\n    const hidden = col.hideable !== false && !visibleColumns.includes(col.id);\n    if (!onRowClick || isActionsColumn(col)) return { ...col, hidden };\n    return {\n      ...col,\n      hidden,\n      cell: (ctx) => {\n        const content = col.cell ? col.cell(ctx) : ctx.value == null ? \"\" : String(ctx.value);\n        return (\n          <Box\n            onClick={() => onRowClick(ctx.row)}\n            sx={{ cursor: \"pointer\", width: \"100%\", height: \"100%\", display: \"flex\", alignItems: \"center\" }}\n          >\n            {content}\n          </Box>\n        );\n      },\n    };\n  });\n}\n\ninterface ActionsColumnConfig<T extends Record<string, unknown>> {\n  /** Actions that build the auto \"⋮\" kebab. Ignored when `renderRowMenu` is set. */\n  rowActions: RowAction<T>[];\n  /** Optional leading slot (e.g. a favourite star) rendered before the kebab. */\n  leading?: (row: T) => React.ReactNode;\n  testIdPrefix: string;\n  getRowId: (row: T) => string | number;\n  /**\n   * Escape hatch: render a bespoke per-row menu (e.g. an entity's self-contained\n   * 3-dots menu that owns its own popups) INSTEAD of the auto kebab built from\n   * `rowActions`. This is how the table row and the card share ONE menu component.\n   * `rowActions`/`bulkActions` still drive the multi-row bulk menu, which a\n   * single-row menu intentionally does not replace.\n   */\n  renderRowMenu?: (row: T) => React.ReactNode;\n}\n\n/**\n * The auto \"⋮\" kebab actions column built from the reusable `rowActions` — the\n * SAME definitions that feed the bulk menu, so the two never drift. Each item\n * acts on just this row; `rowLabel` provides a per-row label when set. An\n * optional `leading` slot (e.g. a favourite star) renders before the kebab.\n * When `renderRowMenu` is supplied, the cell renders that bespoke menu instead.\n */\nexport function buildRowActionsColumn<T extends Record<string, unknown>>(\n  config: ActionsColumnConfig<T>,\n): DataViewColumn<T> {\n  const { rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;\n  const kebabActions = rowActions.filter((action) => action.row !== false);\n  return {\n    id: \"actions\",\n    header: \"\",\n    type: \"actions\",\n    enableSort: false,\n    hideable: false,\n    // Narrow: the column only holds the \"⋮\" kebab (plus an optional leading icon),\n    // so it needs room for just one or two icons.\n    width: leading ? 72 : 44,\n    cell: ({ row }) => (\n      <Box component=\"span\" sx={{ display: \"inline-flex\", alignItems: \"center\", gap: sxRem(2), justifyContent: \"flex-end\" }}>\n        {leading?.(row)}\n        {renderRowMenu\n          ? renderRowMenu(row)\n          : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)}\n      </Box>\n    ),\n  };\n}\n\n/** The built-in kebab menu for one row, derived from `rowActions`. */\nfunction renderAutoKebab<T extends Record<string, unknown>>(\n  kebabActions: RowAction<T>[],\n  row: T,\n  testIdPrefix: string,\n  getRowId: (row: T) => string | number,\n): React.ReactNode {\n  const copy = useDataViewsCopy();\n  const items: DropdownMenuItem[] = kebabActions\n    .filter((action) => action.isVisible?.(row) ?? true)\n    .map((action) => ({\n      id: action.id,\n      label: action.rowLabel ? action.rowLabel(row) : action.label,\n      color: action.color,\n      onClick: () => void action.onSelect([row]),\n    }));\n  if (items.length === 0) return null;\n  return (\n    <DropdownMenu\n      size=\"sm\"\n      items={items}\n      trigger={\n        <Button variant=\"text\" size=\"sm\" dataTestId={`${testIdPrefix}-actions-${getRowId(row)}`} aria-label={copy.grid.rowActions}>\n          ⋮\n        </Button>\n      }\n    />\n  );\n}\n\n/** Sort options derived from the sortable columns when a page supplies none. */\nexport function defaultSortFields<T extends Record<string, unknown>>(\n  columns: DataViewColumn<T>[],\n): SortFieldDefinition[] {\n  return columns\n    .filter(\n      (col) =>\n        col.enableSort !== false &&\n        col.type !== \"actions\" &&\n        col.id !== \"actions\" &&\n        typeof col.header === \"string\" &&\n        col.header !== \"\",\n    )\n    .map((col) => ({\n      value: col.id,\n      label: col.header as string,\n      orderOptions: [\n        { value: \"asc\", label: \"Crescente\" },\n        { value: \"desc\", label: \"Decrescente\" },\n      ],\n    }));\n}\n\n/** Count active filters (search + selected pills + bounded ranges) for the badge. */\nexport function computeActiveFilterCount<T extends Record<string, unknown>>(\n  state: DataViewState,\n  fields: FilterFieldConfig<T>[],\n  rangeFields: RangeFieldConfig<T>[],\n): number {\n  const ranges = state.ranges ?? {};\n  const pillCount = fields.reduce((n, field) => n + ((state.pills[field.id]?.length ?? 0) > 0 ? 1 : 0), 0);\n  const rangeCount = rangeFields.reduce((n, field) => {\n    const range = ranges[field.id];\n    return n + (range && (range.min != null || range.max != null) ? 1 : 0);\n  }, 0);\n  return (state.search.trim() ? 1 : 0) + pillCount + rangeCount;\n}\n\nfunction bulkMenuItems<T extends Record<string, unknown>>(\n  rowActions: RowAction<T>[],\n  selectedRows: T[],\n  clearSelection: () => void,\n): DropdownMenuItem[] {\n  return rowActions\n    .filter((action) => action.bulk !== false)\n    .map((action) => {\n      // State-machine guards: the action runs only on the rows it applies to,\n      // and disappears from the menu when none of the selection qualifies.\n      const targets = action.isVisible ? selectedRows.filter(action.isVisible) : selectedRows;\n      return { action, targets };\n    })\n    .filter(({ targets }) => targets.length > 0)\n    .map(({ action, targets }) => ({\n      id: action.id,\n      label: action.label,\n      color: action.color,\n      onClick: () => {\n        // Run the (possibly async) handler on the captured selection, then clear\n        // it — but only once the work settles. On failure keep the selection so\n        // the user can see which rows still need action and retry.\n        const result = action.onSelect(targets);\n        if (result instanceof Promise) {\n          void result.then(\n            () => clearSelection(),\n            () => {\n              /* keep the selection on failure so the user can retry */\n            },\n          );\n        } else {\n          clearSelection();\n        }\n      },\n    }));\n}\n\ninterface RenderBulkArgs<T extends Record<string, unknown>> {\n  rowActions: RowAction<T>[] | undefined;\n  bulkActions: ((selectedRows: T[], clearSelection: () => void) => React.ReactNode) | undefined;\n  selectedRows: T[];\n  clearSelection: () => void;\n  testIdPrefix: string;\n}\n\n/**\n * The selection bulk control shown in the toolbar. Prefers the reusable\n * `rowActions` (an \"Ações\" dropdown mirroring the row kebab); falls back to the\n * low-level `bulkActions` render prop. Renders nothing with no selection.\n */\nexport function renderBulkActions<T extends Record<string, unknown>>({\n  rowActions,\n  bulkActions,\n  selectedRows,\n  clearSelection,\n  testIdPrefix,\n}: RenderBulkArgs<T>): React.ReactNode {\n  const copy = useDataViewsCopy();\n  if (selectedRows.length === 0) return undefined;\n  if (rowActions) {\n    const items = bulkMenuItems(rowActions, selectedRows, clearSelection);\n    if (items.length === 0) return undefined;\n    return (\n      <DropdownMenu\n        size=\"sm\"\n        items={items}\n        trigger={\n          <Button variant=\"outline\" size=\"sm\" dataTestId={`${testIdPrefix}-bulk-actions`}>\n            {copy.grid.bulkActions(selectedRows.length)}\n          </Button>\n        }\n      />\n    );\n  }\n  return bulkActions ? bulkActions(selectedRows, clearSelection) : undefined;\n}\n\n/** Toggle a single value in a pill's selected-list (returns the next list). */\nexport function togglePillValues(current: string[] | undefined, value: string, checked: boolean): string[] {\n  const list = current ?? [];\n  return checked ? [...list, value] : list.filter((v) => v !== value);\n}\n\n/**\n * The card grid's `grid-template-columns`, as an sx fragment.\n *\n * One rule at every width: each card asks for `targetWidth` and `auto-fill`\n * decides how many fit. Density moves the target, so it changes the count at\n * every size — which the previous column-count cap could not do, because its\n * track floor bottomed out at a constant shared by all three densities.\n *\n * Below `sm` this is a single column, and no target changes that. That is why\n * the density control hides itself there rather than offering three settings\n * that all draw the same thing.\n */\nexport function cardGridTracks(targetWidth: number) {\n  return {\n    gridTemplateColumns: (theme: Theme) => ({\n      xs: \"1fr\",\n      sm: `repeat(auto-fill, minmax(${rem(theme, targetWidth)}, 1fr))`,\n    }),\n  };\n}\n"],"mappings":"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","names":["default"]}