@12-apps/ui 6.35.0 → 6.36.0

package/dist/_internal/user-avatar/user-avatar.js

@@ -2,13 +2,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "../../chunk-LDDN254Q.js";
+} from "../../chunk-2UCLUDEB.js";
 import "../../chunk-UDQSIRAP.js";
-import "../../chunk-ZXSUWFQX.js";
-import "../../chunk-CMTR3WEA.js";
+import "../../chunk-PGPPN63I.js";
+import "../../chunk-TNQDSTIA.js";
 import "../../chunk-6ZZGK5DT.js";
 import "../../chunk-3ZVUNSFF.js";
-import "../../chunk-XRMZMBE3.js";
+import "../../chunk-MTEQEPNY.js";
 import "../../chunk-VUHLNYAE.js";
 import "../../chunk-2GSIEDGN.js";
 import "../../chunk-N6CSXHFJ.js";
@@ -35,9 +35,9 @@ import "../../chunk-FZXKH2ZT.js";
 import "../../chunk-PZBK3F52.js";
 import "../../chunk-26X4CZVR.js";
 import "../../chunk-FQ6UW7IY.js";
-import "../../chunk-YKCAJ2TN.js";
 import "../../chunk-6JAIFIPW.js";
 import "../../chunk-N3GAFIXG.js";
+import "../../chunk-YKCAJ2TN.js";
 import "../../chunk-PZ5AY32C.js";
 export {
   UserAvatar,

package/dist/charts.js

@@ -1,10 +1,10 @@
 import "./chunk-5KLSLD72.js";
 import {
   SpecChart
-} from "./chunk-DMYBTD5Y.js";
+} from "./chunk-CPWWMGYR.js";
 import {
   Chart
-} from "./chunk-65YAR3OZ.js";
+} from "./chunk-Q2YNXJEL.js";
 import {
   CHART_SEMANTIC_COLORS,
   ChartSpecError,
@@ -16,17 +16,17 @@ import {
   getRegisteredChartSpecTypes,
   registerChartSpecRenderer
 } from "./chunk-WKUA6P3W.js";
-import "./chunk-EDO2WS5B.js";
-import "./chunk-3GQ6PNEM.js";
-import "./chunk-4V532JF6.js";
+import "./chunk-TXGB2WSW.js";
+import "./chunk-3GTMGPNQ.js";
+import "./chunk-SOHQPPYJ.js";
 import {
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent
-} from "./chunk-M5T3COS2.js";
-import "./chunk-I6EVBLFX.js";
+} from "./chunk-RIRTW5EU.js";
+import "./chunk-EA2UNEL6.js";
 import {
   chartValueFormatter,
   formatChartValue
@@ -45,9 +45,9 @@ import "./chunk-FZXKH2ZT.js";
 import "./chunk-PZBK3F52.js";
 import "./chunk-26X4CZVR.js";
 import "./chunk-FQ6UW7IY.js";
-import "./chunk-YKCAJ2TN.js";
 import "./chunk-6JAIFIPW.js";
 import "./chunk-N3GAFIXG.js";
+import "./chunk-YKCAJ2TN.js";
 import "./chunk-PZ5AY32C.js";
 export {
   CHART_SEMANTIC_COLORS,

package/dist/{chunk-BNU4RLEC.js → chunk-2FM5SUQV.js}

@@ -1,6 +1,6 @@
 import {
   getSizeStyles
-} from "./chunk-7HFGVT3G.js";
+} from "./chunk-KJDBY2KN.js";
 import {
   BADGE_CONTENT_GAP,
   BADGE_SIZES
@@ -30,7 +30,7 @@ var BadgeIcon = ({
     {
       "data-testid": testId,
       style: {
-        fontSize: rem(theme, getSizeStyles(size).step.iconSize),
+        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),
         display: "inline-flex",
         alignItems: "center"
       },
@@ -60,6 +60,10 @@ var BadgeCloseButton = ({
   },
   "close"
 );
+var BadgeRun = ({ children }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center", gap: rem(theme, BADGE_CONTENT_GAP) }, children });
+};
 var buildBadgeContent = ({
   variant,
   size,
@@ -84,10 +88,10 @@ var buildBadgeContent = ({
     );
   }
   if (parts.length === 0) return null;
-  return /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center", gap: `${BADGE_CONTENT_GAP}px` }, children: parts });
+  return /* @__PURE__ */ jsx(BadgeRun, { children: parts });
 };
 
 export {
   buildBadgeContent
 };
-//# sourceMappingURL=chunk-BNU4RLEC.js.map
+//# sourceMappingURL=chunk-2FM5SUQV.js.map

package/dist/chunk-2FM5SUQV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/BadgeContent.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { BADGE_CONTENT_GAP, BADGE_SIZES } from './Badge.metrics';\nimport { getSizeStyles } from './Badge.styles';\nimport type { BadgeSize } from './Badge.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Derived from the shared metrics: `xl` takes `lg`'s glyph, which is what the\n// hand-written map did through its `?? CLOSE_ICON_SIZES.lg` fallback.\nconst CLOSE_ICON_SIZES: Record<string, number> = Object.fromEntries(\n  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize]),\n);\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;\n\nconst BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({\n  icon,\n  size,\n  testId,\n}) => {\n  const theme = useTheme();\n  return (\n    <span\n      key=\"icon\"\n      data-testid={testId}\n      style={{\n        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      {icon}\n    </span>\n  );\n};\n\nconst BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React.MouseEvent) => void }> = ({\n  size,\n  testId,\n  onClose,\n}) => (\n  <IconButton\n    key=\"close\"\n    size=\"small\"\n    onClick={onClose}\n    data-testid={testId}\n    sx={{\n      p: 0,\n      ml: 0.5,\n      color: 'inherit',\n      '& svg': { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },\n      '&:hover': { opacity: 0.8 },\n    }}\n  >\n    <CloseIcon />\n  </IconButton>\n);\n\n/** The row the parts sit in, `BADGE_CONTENT_GAP` apart. */\nconst BadgeRun: FC<{ children: ReactNode }> = ({ children }) => {\n  const theme = useTheme();\n  return (\n    <span style={{ display: 'inline-flex', alignItems: 'center', gap: rem(theme, BADGE_CONTENT_GAP) }}>{children}</span>\n  );\n};\n\n// The badge's inner run: optional icon, the content itself, optional close\n// button. A dot badge shows none of it.\nexport const buildBadgeContent = ({\n  variant,\n  size,\n  icon,\n  closable,\n  dataTestId,\n  baseContent,\n  onClose,\n}: {\n  variant: string;\n  size: BadgeSize;\n  icon?: ReactNode;\n  closable?: boolean;\n  dataTestId?: string;\n  baseContent: ReactNode;\n  onClose: (e: React.MouseEvent) => void;\n}): ReactNode => {\n  if (variant === 'dot') return '';\n\n  const testId = makeTestId(dataTestId);\n  const parts: ReactNode[] = [];\n\n  if (icon) parts.push(<BadgeIcon key=\"icon\" icon={icon} size={size} testId={testId('icon')} />);\n\n  if (baseContent !== null && baseContent !== undefined) {\n    parts.push(\n      <span key=\"content\" data-testid={testId('content')}>\n        {baseContent}\n      </span>,\n    );\n  }\n\n  if (closable && !variant.includes('dot')) {\n    parts.push(\n      <BadgeCloseButton key=\"close\" size={size} testId={testId('close')} onClose={onClose} />,\n    );\n  }\n\n  if (parts.length === 0) return null;\n\n  return <BadgeRun>{parts}</BadgeRun>;\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA2BrB;AAhBJ,IAAM,mBAA2C,OAAO;AAAA,EACtD,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,MAAM,QAAQ,aAAa,CAAC;AACpF;AAEA,IAAM,aACJ,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,SAAS,MAAM;AAE5D,IAAM,YAAsE,CAAC;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa;AAAA,MACb,OAAO;AAAA,QACL,UAAU,IAAI,OAAO,cAAc,OAAO,IAAI,EAAE,KAAK,QAAQ;AAAA,QAC7D,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,IARG;AAAA,EASN;AAEJ;AAEA,IAAM,mBAAoG,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IAEC,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAa;AAAA,IACb,IAAI;AAAA,MACF,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,EAAE,UAAU,MAAM,iBAAiB,IAAI,KAAK,YAAY,GAAG,aAAa,EAAE;AAAA,MACnF,WAAW,EAAE,SAAS,IAAI;AAAA,IAC5B;AAAA,IAEA,8BAAC,aAAU;AAAA;AAAA,EAZP;AAaN;AAIF,IAAM,WAAwC,CAAC,EAAE,SAAS,MAAM;AAC9D,QAAM,QAAQ,SAAS;AACvB,SACE,oBAAC,UAAK,OAAO,EAAE,SAAS,eAAe,YAAY,UAAU,KAAK,IAAI,OAAO,iBAAiB,EAAE,GAAI,UAAS;AAEjH;AAIO,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQiB;AACf,MAAI,YAAY,MAAO,QAAO;AAE9B,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,QAAqB,CAAC;AAE5B,MAAI,KAAM,OAAM,KAAK,oBAAC,aAAqB,MAAY,MAAY,QAAQ,OAAO,MAAM,KAApD,MAAuD,CAAE;AAE7F,MAAI,gBAAgB,QAAQ,gBAAgB,QAAW;AACrD,UAAM;AAAA,MACJ,oBAAC,UAAmB,eAAa,OAAO,SAAS,GAC9C,yBADO,SAEV;AAAA,IACF;AAAA,EACF;AAEA,MAAI,YAAY,CAAC,QAAQ,SAAS,KAAK,GAAG;AACxC,UAAM;AAAA,MACJ,oBAAC,oBAA6B,MAAY,QAAQ,OAAO,OAAO,GAAG,WAA7C,OAA+D;AAAA,IACvF;AAAA,EACF;AAEA,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SAAO,oBAAC,YAAU,iBAAM;AAC1B;","names":[]}

package/dist/{chunk-APT5L7V5.js → chunk-2LIRGFEK.js}

@@ -3,7 +3,7 @@ import {
   defaultMessages,
   resolveDayRange,
   resolveQuickRanges
-} from "./chunk-EAE5Z5HL.js";
+} from "./chunk-OJ2XR3WH.js";
 import {
   toDayString,
   todayIn
@@ -69,4 +69,4 @@ function useDateRangePicker({
 export {
   useDateRangePicker
 };
-//# sourceMappingURL=chunk-APT5L7V5.js.map
+//# sourceMappingURL=chunk-2LIRGFEK.js.map

package/dist/{chunk-LDDN254Q.js → chunk-2UCLUDEB.js}

@@ -1,6 +1,6 @@
 import {
   Avatar
-} from "./chunk-ZXSUWFQX.js";
+} from "./chunk-PGPPN63I.js";
 import {
   Card
 } from "./chunk-N6CSXHFJ.js";
@@ -74,4 +74,4 @@ export {
   UserAvatar,
   UserMenu
 };
-//# sourceMappingURL=chunk-LDDN254Q.js.map
+//# sourceMappingURL=chunk-2UCLUDEB.js.map

package/dist/{chunk-6SYFPRTT.js → chunk-343OLRFT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5M4TYFR3.js";
 import {
   PreviewBox
-} from "./chunk-X7PVFAYJ.js";
+} from "./chunk-JGRE56GQ.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -268,4 +268,4 @@ function SaveViewModal({
 export {
   SaveViewModal
 };
-//# sourceMappingURL=chunk-6SYFPRTT.js.map
+//# sourceMappingURL=chunk-343OLRFT.js.map

package/dist/{chunk-VDGJV7MP.js → chunk-3AQD2EA6.js}

@@ -3,7 +3,7 @@ import {
   StackedView,
   WaterfallView,
   phaseColors
-} from "./chunk-UMP5MQ7X.js";
+} from "./chunk-WFAJTO2B.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -18,8 +18,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var DiagramContainer = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(3),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
-  backdropFilter: "blur(10px)",
-  WebkitBackdropFilter: "blur(10px)",
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2
 }));
@@ -36,9 +36,9 @@ var LegendItem = styled(Box)(({ theme }) => ({
   alignItems: "center",
   gap: theme.spacing(1),
   "& .color": {
-    width: 12,
-    height: 12,
-    borderRadius: 2
+    width: rem(theme, 12),
+    height: rem(theme, 12),
+    borderRadius: rem(theme, 2)
   },
   "& .label": {
     fontSize: rem(theme, 12.8),
@@ -71,7 +71,7 @@ var TimingDiagram = ({
   copy,
   data,
   showLabels = true,
-  height = 40,
+  height,
   animated = true,
   showTooltips = true,
   variant = "waterfall"
@@ -90,7 +90,7 @@ var TimingDiagram = ({
         animated,
         showLabels,
         showTooltips,
-        height
+        plotHeightPx: height ?? 40
       }
     ),
     showLabels && /* @__PURE__ */ jsx(Legend, { children: phases.map((phase) => /* @__PURE__ */ jsxs(LegendItem, { children: [
@@ -111,4 +111,4 @@ export {
   TimingDiagram,
   TimingDiagram_default
 };
-//# sourceMappingURL=chunk-VDGJV7MP.js.map
+//# sourceMappingURL=chunk-3AQD2EA6.js.map

package/dist/chunk-3AQD2EA6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { TimingData, TimingDiagramProps } from './TimingDiagram.types';\nimport type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';\nimport {\n  HorizontalView,\n  phaseColors,\n  StackedView,\n  WaterfallView,\n} from './TimingDiagram.views';\nimport { rem } from '../../../tokens/relative';\n\n// Styled components\nconst DiagramContainer = styled(Paper)(({ theme }) => ({\n  padding: theme.spacing(3),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 10)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n}));\n\nconst Legend = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(2),\n  marginTop: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst LegendItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  '& .color': {\n    width: rem(theme, 12),\n    height: rem(theme, 12),\n    borderRadius: rem(theme, 2),\n  },\n  '& .label': {\n    fontSize: rem(theme, 12.8),\n    color: theme.palette.text.secondary,\n  },\n}));\n\n// Helper functions\nconst calculatePercentages = (data: TimingData): Record<string, number> => {\n  const total = data.total || 1;\n  return {\n    dns: ((data.dns || 0) / total) * 100,\n    connect: ((data.connect || 0) / total) * 100,\n    ssl: ((data.ssl || 0) / total) * 100,\n    request: ((data.request || 0) / total) * 100,\n    response: ((data.response || 0) / total) * 100,\n  };\n};\n\n// A phase with no recorded time never happened — an HTTP request has no SSL\n// handshake, for instance — so it gets no bar and no legend entry.\nconst phasesOf = (data: TimingData): Phase[] =>\n  [\n    { key: 'dns', label: 'DNS Lookup', value: data.dns },\n    { key: 'connect', label: 'Connection', value: data.connect },\n    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },\n    { key: 'request', label: 'Request', value: data.request },\n    { key: 'response', label: 'Response', value: data.response },\n  ].filter((phase) => phase.value !== undefined && phase.value > 0);\n\nconst VIEWS: Record<string, FC<TimingViewProps>> = {\n  waterfall: WaterfallView,\n  stacked: StackedView,\n  horizontal: HorizontalView,\n};\n\n// Main component\nexport const TimingDiagram: FC<TimingDiagramProps> = ({\n  copy,\n  data,\n  showLabels = true,\n  height,\n  animated = true,\n  showTooltips = true,\n  variant = 'waterfall',\n}) => {\n  const percentages = useMemo(() => calculatePercentages(data), [data]);\n  const phases = phasesOf(data);\n  const View = VIEWS[variant];\n\n  return (\n    <DiagramContainer elevation={2} role=\"region\" aria-label={copy.regionLabel} tabIndex={0}>\n      <Typography variant=\"h6\" fontWeight=\"bold\" gutterBottom>\n        {copy.heading}\n      </Typography>\n\n      {View && (\n        <View\n          phases={phases}\n          percentages={percentages}\n          data={data}\n          animated={animated}\n          showLabels={showLabels}\n          showTooltips={showTooltips}\n          // The waterfall's plot height, 40 design px unless the caller says otherwise.\n          plotHeightPx={height ?? 40}\n        />\n      )}\n\n      {showLabels && (\n        <Legend>\n          {phases.map((phase) => (\n            <LegendItem key={phase.key}>\n              <Box\n                className=\"color\"\n                sx={(theme) => ({ backgroundColor: phaseColors(theme)[phase.key as PhaseKey] })}\n              />\n              <Typography className=\"label\">{phase.label}</Typography>\n            </LegendItem>\n          ))}\n        </Legend>\n      )}\n    </DiagramContainer>\n  );\n};\n\n// Export default\nexport default TimingDiagram;\n"],"mappings":"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","names":[]}

package/dist/{chunk-3GQ6PNEM.js → chunk-3GTMGPNQ.js}

@@ -1,13 +1,16 @@
 import {
   resolveAxisConfig,
   resolveBarGeometry
-} from "./chunk-4V532JF6.js";
+} from "./chunk-SOHQPPYJ.js";
 import {
   getAxisStyles,
   getDefaultColors,
   getSizeStyles,
   resolveSeries
-} from "./chunk-I6EVBLFX.js";
+} from "./chunk-EA2UNEL6.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Chart/chart-context.ts
 function buildChartContext(props, theme) {
@@ -35,17 +38,29 @@ function buildChartContext(props, theme) {
     gridStroke,
     gridOpacity,
     axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
-    barGeometry: resolveBarGeometry(props),
+    barGeometry: resolveBarGeometry(props, theme),
     animationDuration: props.animate ?? true ? props.animationDuration ?? 1500 : 0,
     commonProps: {
       data: props.data,
-      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
+      margin: {
+        top: remPx(theme, 20),
+        right: remPx(theme, 30),
+        left: remPx(theme, 20),
+        bottom: remPx(theme, 20),
+        ...marginPx(theme, props.margin)
+      },
       onClick: handleChartClick
     }
   };
 }
+function marginPx(theme, margin) {
+  if (!margin) return void 0;
+  return Object.fromEntries(
+    Object.entries(margin).map(([side, px]) => [side, typeof px === "number" ? remPx(theme, px) : px])
+  );
+}
 
 export {
   buildChartContext
 };
-//# sourceMappingURL=chunk-3GQ6PNEM.js.map
+//# sourceMappingURL=chunk-3GTMGPNQ.js.map

package/dist/chunk-3GTMGPNQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-context.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport type { CSSProperties } from 'react';\n\nimport type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';\nimport { resolveAxisConfig, resolveBarGeometry, type BarGeometry, type CartesianAxisConfig } from './chart-axis';\nimport {\n  getAxisStyles,\n  getDefaultColors,\n  getSizeStyles,\n  resolveSeries,\n  type SizeStyles,\n} from './chart-internals';\nimport { remPx } from '../../../tokens/relative';\n\n/**\n * Everything the per-type renderers in `chart-renderers.tsx` read, resolved\n * once from props + theme. Kept out of that file so each renderer is a small\n * JSX function over already-decided values — palette, series, axis geometry,\n * bar geometry — rather than a place where those decisions get made again\n * slightly differently.\n */\nexport interface ChartRenderContext {\n  props: ChartProps;\n  theme: Theme;\n  sizeStyles: SizeStyles;\n  chartColors: string[];\n  chartSeries: ChartSeries[];\n  strokeType: 'monotone' | 'linear';\n  axisStyle: CSSProperties;\n  gridStroke: string;\n  /** Multiplier on `gridStroke`'s alpha — see `getAxisStyles`. */\n  gridOpacity: number;\n  axisConfig: CartesianAxisConfig;\n  barGeometry: BarGeometry;\n  animationDuration: number;\n  commonProps: {\n    data: ChartDataPoint[];\n    margin: { top?: number; right?: number; bottom?: number; left?: number };\n    onClick: (payload: unknown) => void;\n  };\n}\n\nexport function buildChartContext(props: ChartProps, theme: Theme): ChartRenderContext {\n  const sizeStyles = getSizeStyles(theme, props.size, props.height);\n  const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);\n  const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(\n    theme,\n    props.variant ?? 'default',\n    sizeStyles.fontSize,\n  );\n  const handleChartClick = (payload: unknown): void => {\n    const chartData = payload as { activePayload?: Array<{ payload: ChartDataPoint }> };\n    if (props.onClick && chartData?.activePayload?.[0]) {\n      props.onClick(chartData.activePayload[0].payload);\n    }\n  };\n  return {\n    props,\n    theme,\n    sizeStyles,\n    chartColors,\n    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? 'name', chartColors),\n    strokeType: (props.curved ?? true) ? 'monotone' : 'linear',\n    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },\n    gridStroke,\n    gridOpacity,\n    axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),\n    barGeometry: resolveBarGeometry(props, theme),\n    animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,\n    commonProps: {\n      data: props.data,\n      margin: {\n        top: remPx(theme, 20),\n        right: remPx(theme, 30),\n        left: remPx(theme, 20),\n        bottom: remPx(theme, 20),\n        ...marginPx(theme, props.margin),\n      },\n      onClick: handleChartClick,\n    },\n  };\n}\n\n/** A caller's margin is in design px (the prop's contract); Recharts takes px numbers. */\nfunction marginPx(theme: Theme, margin: ChartProps['margin']): ChartProps['margin'] {\n  if (!margin) return undefined;\n  return Object.fromEntries(\n    Object.entries(margin).map(([side, px]) => [side, typeof px === 'number' ? remPx(theme, px) : px]),\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0CO,SAAS,kBAAkB,OAAmB,OAAkC;AACrF,QAAM,aAAa,cAAc,OAAO,MAAM,MAAM,MAAM,MAAM;AAChE,QAAM,cAAc,iBAAiB,OAAO,MAAM,WAAW,WAAW,MAAM,MAAM;AACpF,QAAM,EAAE,WAAW,YAAY,YAAY,IAAI;AAAA,IAC7C;AAAA,IACA,MAAM,WAAW;AAAA,IACjB,WAAW;AAAA,EACb;AACA,QAAM,mBAAmB,CAAC,YAA2B;AACnD,UAAM,YAAY;AAClB,QAAI,MAAM,WAAW,WAAW,gBAAgB,CAAC,GAAG;AAClD,YAAM,QAAQ,UAAU,cAAc,CAAC,EAAE,OAAO;AAAA,IAClD;AAAA,EACF;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,cAAc,MAAM,MAAM,MAAM,QAAQ,MAAM,YAAY,QAAQ,WAAW;AAAA,IAC1F,YAAa,MAAM,UAAU,OAAQ,aAAa;AAAA,IAClD,WAAW,EAAE,GAAG,WAAW,UAAU,WAAW,SAAS;AAAA,IACzD;AAAA,IACA;AAAA,IACA,YAAY,kBAAkB,OAAO,WAAW,UAAU;AAAA,IAC1D,aAAa,mBAAmB,OAAO,KAAK;AAAA,IAC5C,mBAAoB,MAAM,WAAW,OAAS,MAAM,qBAAqB,OAAQ;AAAA,IACjF,aAAa;AAAA,MACX,MAAM,MAAM;AAAA,MACZ,QAAQ;AAAA,QACN,KAAK,MAAM,OAAO,EAAE;AAAA,QACpB,OAAO,MAAM,OAAO,EAAE;AAAA,QACtB,MAAM,MAAM,OAAO,EAAE;AAAA,QACrB,QAAQ,MAAM,OAAO,EAAE;AAAA,QACvB,GAAG,SAAS,OAAO,MAAM,MAAM;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAGA,SAAS,SAAS,OAAc,QAAoD;AAClF,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,OAAO,OAAO,WAAW,MAAM,OAAO,EAAE,IAAI,EAAE,CAAC;AAAA,EACnG;AACF;","names":[]}

package/dist/{chunk-TFZI36UD.js → chunk-3KA6MYIR.js}

@@ -4,6 +4,7 @@ import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
+  remPx,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -13,8 +14,8 @@ var MAX_ZOOM = 5;
 var ZOOM_STEP = 1.2;
 var WHEEL_ZOOM_FACTOR = 0.01;
 var DEFAULT_AUTOPLAY_INTERVAL_MS = 4e3;
-var MIN_SWIPE_DISTANCE = 50;
 var OVERLAY_Z_INDEX = 1e3;
+var minSwipeDistance = (theme) => remPx(theme, 50);
 var SCRIM = (theme) => scrim(theme, 0.5);
 var SCRIM_HOVER = (theme) => scrim(theme, 0.7);
 var overlayButtonSx = {
@@ -52,8 +53,8 @@ export {
   ZOOM_STEP,
   WHEEL_ZOOM_FACTOR,
   DEFAULT_AUTOPLAY_INTERVAL_MS,
-  MIN_SWIPE_DISTANCE,
   OVERLAY_Z_INDEX,
+  minSwipeDistance,
   overlayButtonSx,
   navButtonSx,
   captionSx,
@@ -61,4 +62,4 @@ export {
   thumbnailStripSx,
   makeTestId
 };
-//# sourceMappingURL=chunk-TFZI36UD.js.map
+//# sourceMappingURL=chunk-3KA6MYIR.js.map

package/dist/chunk-3KA6MYIR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.constants.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { onMedia, scrim, sheen } from '../../../tokens/ink';\nimport { remPx, sxRem } from '../../../tokens/relative';\n\nexport const MIN_ZOOM = 0.5;\nexport const MAX_ZOOM = 5;\nexport const ZOOM_STEP = 1.2;\n// Each wheel notch is ~100 deltaY, so this makes one notch a 1x zoom change.\nexport const WHEEL_ZOOM_FACTOR = 0.01;\n\nexport const DEFAULT_AUTOPLAY_INTERVAL_MS = 4000;\nexport const OVERLAY_Z_INDEX = 1000;\n\n/**\n * How far a finger must travel to count as a swipe: 50 design px, in the px a\n * touch event reports, so it moves with the theme's type scale.\n */\nexport const minSwipeDistance = (theme: Theme): number => remPx(theme, 50);\n\nconst SCRIM = (theme: Theme): string => scrim(theme, 0.5);\nconst SCRIM_HOVER = (theme: Theme): string => scrim(theme, 0.7);\n\nexport const overlayButtonSx = {\n  color: onMedia,\n  backgroundColor: SCRIM,\n  '&:hover': { backgroundColor: SCRIM_HOVER },\n} as const;\n\n// The arrows drop their hover treatment at the ends of a non-looping gallery and\n// dim instead, so a disabled arrow does not look pressable.\nexport const navButtonSx = {\n  color: onMedia,\n  backgroundColor: SCRIM,\n  '&:hover:not(:disabled)': { backgroundColor: SCRIM_HOVER },\n  '&:disabled': { color: (theme: Theme) => sheen(theme, 0.3) },\n} as const;\n\nexport const captionSx = {\n  color: onMedia,\n  textAlign: 'center',\n  backgroundColor: SCRIM_HOVER,\n  borderRadius: 1,\n} as const;\n\nexport const counterSx = {\n  color: onMedia,\n  fontSize: sxRem(14),\n  backgroundColor: SCRIM,\n  borderRadius: 1,\n} as const;\n\nexport const thumbnailStripSx = {\n  background: SCRIM,\n  borderRadius: 1,\n} as const;\n\n// Every element gets `${dataTestId}-suffix` when the caller supplied an id, and\n// `lightbox-suffix` otherwise.\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `lightbox-${suffix}`;\n"],"mappings":";;;;;;;;;;;AAKO,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,YAAY;AAElB,IAAM,oBAAoB;AAE1B,IAAM,+BAA+B;AACrC,IAAM,kBAAkB;AAMxB,IAAM,mBAAmB,CAAC,UAAyB,MAAM,OAAO,EAAE;AAEzE,IAAM,QAAQ,CAAC,UAAyB,MAAM,OAAO,GAAG;AACxD,IAAM,cAAc,CAAC,UAAyB,MAAM,OAAO,GAAG;AAEvD,IAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW,EAAE,iBAAiB,YAAY;AAC5C;AAIO,IAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,0BAA0B,EAAE,iBAAiB,YAAY;AAAA,EACzD,cAAc,EAAE,OAAO,CAAC,UAAiB,MAAM,OAAO,GAAG,EAAE;AAC7D;AAEO,IAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEO,IAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,UAAU,MAAM,EAAE;AAAA,EAClB,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEO,IAAM,mBAAmB;AAAA,EAC9B,YAAY;AAAA,EACZ,cAAc;AAChB;AAIO,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,YAAY,MAAM;","names":[]}

package/dist/{chunk-5VWYCVXF.js → chunk-3U3H3BZM.js}

@@ -2,10 +2,13 @@ import {
   SheetContent,
   SheetFooter,
   SheetHeader
-} from "./chunk-MISZGWO7.js";
+} from "./chunk-FPVYD7BO.js";
 import {
   muiColor
 } from "./chunk-7ZPUN7TV.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Sheet/Sheet.body.tsx
 import Box from "@mui/material/Box/index.js";
@@ -21,7 +24,7 @@ var SheetLoading = ({ color }) => /* @__PURE__ */ jsx(
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-      minHeight: 200
+      minHeight: sxRem(200)
     },
     children: /* @__PURE__ */ jsx(CircularProgress, { color: color === void 0 ? void 0 : muiColor(color, "inherit") })
   }
@@ -91,4 +94,4 @@ var SheetBody = (props) => {
 export {
   SheetBody
 };
-//# sourceMappingURL=chunk-5VWYCVXF.js.map
+//# sourceMappingURL=chunk-3U3H3BZM.js.map

package/dist/chunk-3U3H3BZM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.body.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport React from 'react';\n\nimport { SheetContent, SheetFooter, SheetHeader } from './Sheet.parts';\nimport type { SheetProps } from './Sheet.types';\nimport { sxRem } from '../../../tokens/relative';\nimport { muiColor } from '../../../tokens/scales';\n\nexport interface SheetBodyProps extends Pick<\n  SheetProps,\n  | 'title'\n  | 'description'\n  | 'showCloseButton'\n  | 'showHandle'\n  | 'header'\n  | 'footer'\n  | 'loading'\n  | 'color'\n  | 'children'\n  | 'onClick'\n  | 'onFocus'\n  | 'onBlur'\n> {\n  testId: string;\n  isDragging: boolean;\n  isVerticalSheet: boolean;\n  isDraggableVariant: boolean;\n  onClose: () => void;\n  onDragStart: (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\n/**\n * The header earns its place if it would show anything at all — a grab handle,\n * either piece of text, the close button, or caller-supplied content.\n */\nconst needsHeader = (props: SheetBodyProps) =>\n  Boolean(\n    props.showHandle ||\n    props.title ||\n    props.description ||\n    props.showCloseButton ||\n    props.header,\n  );\n\n/** The centred spinner shown in place of the children while `loading`. */\nconst SheetLoading: React.FC<Pick<SheetBodyProps, 'color'>> = ({ color }) => (\n  <Box\n    sx={{\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      minHeight: sxRem(200),\n    }}\n  >\n    <CircularProgress color={color === undefined ? undefined : muiColor(color, 'inherit')} />\n  </Box>\n);\n\n/**\n * What the sheet contains, independent of which drawer is carrying it. The\n * swipeable and plain branches render exactly this — they differ only in the\n * MUI component and its swipe props, so the contents are built once.\n */\nexport const SheetBody: React.FC<SheetBodyProps> = (props) => {\n  const {\n    title,\n    description,\n    showCloseButton,\n    showHandle,\n    header,\n    footer,\n    loading,\n    color,\n    children,\n    onClick,\n    onFocus,\n    onBlur,\n    testId,\n    isDragging,\n    isVerticalSheet,\n    isDraggableVariant,\n    onClose,\n    onDragStart,\n  } = props;\n\n  return (\n    <Box\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      data-testid={testId}\n      sx={{\n        // A vertical sheet's panel is a column whose height is its CONTENT, up\n        // to the `size` ceiling — so this fills what the panel has rather than\n        // asking for a percentage of it, and `minHeight: 0` is what lets it\n        // shrink past its content so `SheetContent` scrolls instead of the\n        // panel overflowing. A side sheet's panel is full-height already.\n        ...(isVerticalSheet ? { flex: '1 1 auto', minHeight: 0 } : { height: '100%' }),\n        display: 'flex',\n        flexDirection: 'column',\n        position: 'relative',\n        userSelect: isDragging ? 'none' : 'auto',\n      }}\n    >\n      {needsHeader(props) && (\n        <SheetHeader\n          title={title}\n          description={description}\n          showCloseButton={showCloseButton}\n          onClose={onClose}\n          showHandle={showHandle && isVerticalSheet}\n          isDraggable={isDraggableVariant && isVerticalSheet}\n          onDragStart={onDragStart}\n          dataTestId={`${testId}-header`}\n        >\n          {header}\n        </SheetHeader>\n      )}\n\n      <SheetContent padded dataTestId={`${testId}-content`}>\n        {loading ? <SheetLoading color={color} /> : children}\n      </SheetContent>\n\n      {footer && (\n        <SheetFooter sticky divider dataTestId={`${testId}-footer`}>\n          {footer}\n        </SheetFooter>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAsDzB,cAgCA,YAhCA;AAnBJ,IAAM,cAAc,CAAC,UACnB;AAAA,EACE,MAAM,cACN,MAAM,SACN,MAAM,eACN,MAAM,mBACN,MAAM;AACR;AAGF,IAAM,eAAwD,CAAC,EAAE,MAAM,MACrE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW,MAAM,GAAG;AAAA,IACtB;AAAA,IAEA,8BAAC,oBAAiB,OAAO,UAAU,SAAY,SAAY,SAAS,OAAO,SAAS,GAAG;AAAA;AACzF;AAQK,IAAM,YAAsC,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMF,GAAI,kBAAkB,EAAE,MAAM,YAAY,WAAW,EAAE,IAAI,EAAE,QAAQ,OAAO;AAAA,QAC5E,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAY,aAAa,SAAS;AAAA,MACpC;AAAA,MAEC;AAAA,oBAAY,KAAK,KAChB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,cAAc;AAAA,YAC1B,aAAa,sBAAsB;AAAA,YACnC;AAAA,YACA,YAAY,GAAG,MAAM;AAAA,YAEpB;AAAA;AAAA,QACH;AAAA,QAGF,oBAAC,gBAAa,QAAM,MAAC,YAAY,GAAG,MAAM,YACvC,oBAAU,oBAAC,gBAAa,OAAc,IAAK,UAC9C;AAAA,QAEC,UACC,oBAAC,eAAY,QAAM,MAAC,SAAO,MAAC,YAAY,GAAG,MAAM,WAC9C,kBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/{chunk-H2YBVBPW.js → chunk-3UIDKLML.js}

@@ -4,6 +4,10 @@ import {
   GLOW_PULSE,
   PULSE
 } from "./chunk-PYC4CWCQ.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Badge/Badge.animations.ts
 import { keyframes } from "@mui/material/styles/index.js";
@@ -21,23 +25,23 @@ var pulseAnimation = keyframes`
     opacity: 1;
   }
 `;
-var bounceAnimation = keyframes`
+var bounceAnimation = (theme) => keyframes`
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0) scale(1);
   }
   40% {
-    transform: translateY(-${BOUNCE.lift}px) scale(${BOUNCE.scale});
+    transform: translateY(${rem(theme, -BOUNCE.lift)}) scale(${BOUNCE.scale});
   }
   60% {
-    transform: translateY(-${BOUNCE.secondLift}px) scale(${BOUNCE.secondScale});
+    transform: translateY(${rem(theme, -BOUNCE.secondLift)}) scale(${BOUNCE.secondScale});
   }
 `;
-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 fadeInScaleAnimation = keyframes`
@@ -53,15 +57,15 @@ var fadeInScaleAnimation = keyframes`
     transform: scale(1);
   }
 `;
-var glowPulseAnimation = keyframes`
+var glowPulseAnimation = (theme) => keyframes`
   0% {
-    box-shadow: 0 0 ${GLOW_PULSE.fromBlur}px ${GLOW_PULSE.fromSpread}px rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
   }
   50% {
-    box-shadow: 0 0 ${GLOW_PULSE.toBlur}px ${GLOW_PULSE.toSpread}px rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.toBlur, GLOW_PULSE.toSpread)} rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});
   }
   100% {
-    box-shadow: 0 0 ${GLOW_PULSE.fromBlur}px ${GLOW_PULSE.fromSpread}px rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
   }
 `;
 
@@ -72,4 +76,4 @@ export {
   fadeInScaleAnimation,
   glowPulseAnimation
 };
-//# sourceMappingURL=chunk-H2YBVBPW.js.map
+//# sourceMappingURL=chunk-3UIDKLML.js.map

package/dist/chunk-3UIDKLML.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.animations.ts"],"sourcesContent":["import { keyframes } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem, rems } from '../../../tokens/relative';\n\nimport { BOUNCE, FADE_IN_SCALE, GLOW_PULSE, PULSE } from './Badge.metrics';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(${PULSE.scale});\n    opacity: ${PULSE.opacity};\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\n// Define bounce animation\nexport const bounceAnimation = (theme: Theme) => keyframes`\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateY(0) scale(1);\n  }\n  40% {\n    transform: translateY(${rem(theme, -BOUNCE.lift)}) scale(${BOUNCE.scale});\n  }\n  60% {\n    transform: translateY(${rem(theme, -BOUNCE.secondLift)}) scale(${BOUNCE.secondScale});\n  }\n`;\n\n// Define shimmer animation\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\n// Define fade in animation with scale\nexport const fadeInScaleAnimation = keyframes`\n  0% {\n    opacity: 0;\n    transform: scale(${FADE_IN_SCALE.from});\n  }\n  50% {\n    transform: scale(${FADE_IN_SCALE.overshoot});\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\n// Define glow pulse animation\nexport const glowPulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});\n  }\n  50% {\n    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.toBlur, GLOW_PULSE.toSpread)} rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});\n  }\n  100% {\n    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});\n  }\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,iBAAiB;AAOnB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAMP,MAAM,KAAK;AAAA,eACnB,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrB,IAAM,kBAAkB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKrB,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,WAAW,OAAO,KAAK;AAAA;AAAA;AAAA,4BAG/C,IAAI,OAAO,CAAC,OAAO,UAAU,CAAC,WAAW,OAAO,WAAW;AAAA;AAAA;AAKhF,IAAM,mBAAmB,CAAC,UAAiB;AAAA;AAAA,2BAEvB,IAAI,OAAO,IAAK,CAAC;AAAA;AAAA;AAAA,2BAGjB,IAAI,OAAO,GAAI,CAAC;AAAA;AAAA;AAKpC,IAAM,uBAAuB;AAAA;AAAA;AAAA,uBAGb,cAAc,IAAI;AAAA;AAAA;AAAA,uBAGlB,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvC,IAAM,qBAAqB,CAAC,UAAiB;AAAA;AAAA,sBAE9B,KAAK,OAAO,WAAW,UAAU,WAAW,UAAU,CAAC,4BAA4B,WAAW,SAAS;AAAA;AAAA;AAAA,sBAGvG,KAAK,OAAO,WAAW,QAAQ,WAAW,QAAQ,CAAC,4BAA4B,WAAW,OAAO;AAAA;AAAA;AAAA,sBAGjG,KAAK,OAAO,WAAW,UAAU,WAAW,UAAU,CAAC,4BAA4B,WAAW,SAAS;AAAA;AAAA;","names":[]}

package/dist/{chunk-M5BTIIL7.js → chunk-4CHROSWR.js}

@@ -1,6 +1,6 @@
 import {
-  BOUNCE_KEYFRAMES
-} from "./chunk-X4PS3E3V.js";
+  bounceKeyframes
+} from "./chunk-X6AIKCAV.js";
 import {
   getScaleDistance
 } from "./chunk-TUBCN4DJ.js";
@@ -8,7 +8,8 @@ import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/MapPreview/MapDecorations.tsx
@@ -74,7 +75,7 @@ var MapCentreMarker = () => {
         left: "50%",
         transform: "translate(-50%, -100%)",
         zIndex: 2,
-        filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`
+        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`
       },
       children: /* @__PURE__ */ jsx(
         LocationIcon,
@@ -83,7 +84,7 @@ var MapCentreMarker = () => {
             fontSize: rem(theme, 36),
             color: theme.palette.error.main,
             animation: "bounce 2s infinite",
-            "@keyframes bounce": BOUNCE_KEYFRAMES
+            "@keyframes bounce": bounceKeyframes(theme)
           }
         }
       )
@@ -113,20 +114,20 @@ var MapScaleBar = ({ zoom }) => {
           Box,
           {
             sx: {
-              width: 40,
-              height: 2,
+              width: rem(theme, 40),
+              height: rem(theme, 2),
               background: theme.palette.text.secondary,
               position: "relative",
               // The end caps that make the bar read as a measurement.
               "&::before, &::after": {
                 content: '""',
                 position: "absolute",
-                width: 2,
-                height: 6,
+                width: rem(theme, 2),
+                height: rem(theme, 6),
                 background: theme.palette.text.secondary
               },
-              "&::before": { left: 0, top: -2 },
-              "&::after": { right: 0, top: -2 }
+              "&::before": { left: 0, top: rem(theme, -2) },
+              "&::after": { right: 0, top: rem(theme, -2) }
             }
           }
         ),
@@ -144,8 +145,8 @@ var MapCompass = () => {
         position: "absolute",
         top: theme.spacing(2),
         left: theme.spacing(2),
-        width: 40,
-        height: 40,
+        width: rem(theme, 40),
+        height: rem(theme, 40),
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -170,4 +171,4 @@ export {
   MapScaleBar,
   MapCompass
 };
-//# sourceMappingURL=chunk-M5BTIIL7.js.map
+//# sourceMappingURL=chunk-4CHROSWR.js.map

package/dist/chunk-4CHROSWR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapDecorations.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport NavigationIcon from '@mui/icons-material/Navigation';\nimport PlaceIcon from '@mui/icons-material/Place';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { getScaleDistance } from './mapProjection';\nimport { bounceKeyframes } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n// Decorative only: these give the mock surface something to look like without\n// standing in for real map data.\nexport const MapRoads: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top: '20%', left: '15%', width: '70%', height: '60%', opacity: 0.2 }}>\n      <svg width=\"100%\" height=\"100%\" style={{ position: 'absolute' }}>\n        <path\n          d=\"M 10,50 Q 30,30 50,50 T 90,50\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"2\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 50,10 L 50,90\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1.5\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 20,30 L 80,70\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1\"\n          fill=\"none\"\n          opacity=\"0.2\"\n        />\n      </svg>\n    </Box>\n  );\n};\n\nconst DecorativePin: FC<{ top: string; left: string }> = ({ top, left }) => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top, left, opacity: 0.6 }}>\n      <PlaceIcon sx={{ fontSize: rem(theme, 20), color: theme.palette.primary.main }} />\n    </Box>\n  );\n};\n\nexport const MapDecorativePins: FC = () => (\n  <>\n    <DecorativePin top=\"30%\" left=\"25%\" />\n    <DecorativePin top=\"65%\" left=\"70%\" />\n  </>\n);\n\nexport const MapCentreMarker: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid=\"map-marker\"\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -100%)',\n        zIndex: 2,\n        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,\n      }}\n    >\n      <LocationIcon\n        sx={{\n          fontSize: rem(theme, 36),\n          color: theme.palette.error.main,\n          animation: 'bounce 2s infinite',\n          '@keyframes bounce': bounceKeyframes(theme),\n        }}\n      />\n    </Box>\n  );\n};\n\nexport const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        bottom: theme.spacing(2),\n        right: theme.spacing(2),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.5,\n        padding: theme.spacing(0.5, 1),\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: theme.shape.borderRadius,\n        fontSize: rem(theme, 12),\n        color: theme.palette.text.secondary,\n      }}\n    >\n      <Box\n        sx={{\n          width: rem(theme, 40),\n          height: rem(theme, 2),\n          background: theme.palette.text.secondary,\n          position: 'relative',\n          // The end caps that make the bar read as a measurement.\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            width: rem(theme, 2),\n            height: rem(theme, 6),\n            background: theme.palette.text.secondary,\n          },\n          '&::before': { left: 0, top: rem(theme, -2) },\n          '&::after': { right: 0, top: rem(theme, -2) },\n        }}\n      />\n      <Typography variant=\"caption\">{getScaleDistance(zoom)}</Typography>\n    </Box>\n  );\n};\n\nexport const MapCompass: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: theme.spacing(2),\n        left: theme.spacing(2),\n        width: rem(theme, 40),\n        height: rem(theme, 40),\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: '50%',\n        boxShadow: theme.shadows[2],\n      }}\n    >\n      <NavigationIcon\n        sx={{ fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}\n      />\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-VR3U4QA5.js → chunk-4CTLEUK3.js}

@@ -1,7 +1,7 @@
 import {
   MoreGroup,
   fieldClearing
-} from "./chunk-YLBRXDYH.js";
+} from "./chunk-7EIOXZWL.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -15,6 +15,7 @@ import {
   Text
 } from "./chunk-WTOYEWW6.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -93,7 +94,7 @@ function MoreHeading() {
         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.filters.moreHeading }) }),
+        /* @__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.filters.moreHeading }) }),
         /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { ml: "auto", color: "text.disabled" }, children: copy.filters.overflowNote }) })
       ]
     }
@@ -169,10 +170,10 @@ function MoreFilters({
           onOpenChange?.(false);
         },
         anchorOrigin: { vertical: "bottom", horizontal: "left" },
-        slotProps: { paper: { sx: { width: 300, maxWidth: "calc(100vw - 32px)" } } },
+        slotProps: { paper: { sx: { width: sxRem(300), maxWidth: (theme) => `calc(100vw - ${rem(theme, 32)})` } } },
         children: /* @__PURE__ */ jsxs(default2, { "data-testid": `${rest.testIdPrefix}-more-panel`, children: [
           /* @__PURE__ */ jsx(MoreHeading, {}),
-          /* @__PURE__ */ jsx(default2, { sx: { maxHeight: 320, overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }, children: fields.map((field) => /* @__PURE__ */ jsx(MoreGroup, { field, ...rest }, field.id)) }),
+          /* @__PURE__ */ jsx(default2, { sx: { maxHeight: sxRem(320), overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }, children: fields.map((field) => /* @__PURE__ */ jsx(MoreGroup, { field, ...rest }, field.id)) }),
           anyApplied && /* @__PURE__ */ jsx(MoreFooter, { onClearAll, testIdPrefix: rest.testIdPrefix })
         ] })
       }
@@ -183,4 +184,4 @@ function MoreFilters({
 export {
   MoreFilters
 };
-//# sourceMappingURL=chunk-VR3U4QA5.js.map
+//# sourceMappingURL=chunk-4CTLEUK3.js.map