@12-apps/ui 6.35.0 → 6.36.0

package/dist/{chunk-XRMZMBE3.js → chunk-MTEQEPNY.js}

@@ -1,12 +1,16 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/data-display/Avatar/Avatar.animations.ts
 import { keyframes } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {
@@ -47,4 +51,4 @@ export {
   scaleInAnimation,
   rotateAnimation
 };
-//# sourceMappingURL=chunk-XRMZMBE3.js.map
+//# sourceMappingURL=chunk-MTEQEPNY.js.map

package/dist/chunk-MTEQEPNY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.animations.ts"],"sourcesContent":["import { keyframes } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem } from '../../../tokens/relative';\n\nexport const pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const shimmerAnimation = keyframes`\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n`;\n\nexport const scaleInAnimation = keyframes`\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nexport const rotateAnimation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,iBAAiB;AAKnB,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-JWK4GI2I.js → chunk-N2GEKC4J.js}

@@ -1,10 +1,14 @@
 import {
   captionSx,
   counterSx
-} from "./chunk-TFZI36UD.js";
+} from "./chunk-3KA6MYIR.js";
 import {
   onMedia
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Lightbox/LightboxStage.tsx
 import Box from "@mui/material/Box/index.js";
@@ -12,6 +16,22 @@ import CircularProgress from "@mui/material/CircularProgress/index.js";
 import DialogContent from "@mui/material/DialogContent/index.js";
 import Typography from "@mui/material/Typography/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+var STAGE_SX = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  position: "relative",
+  height: "100vh",
+  overflow: "hidden"
+};
+var MEDIA_BOX_SX = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%"
+};
 var LightboxStage = ({
   items,
   currentItem,
@@ -25,15 +45,7 @@ var LightboxStage = ({
 }) => /* @__PURE__ */ jsxs(
   DialogContent,
   {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      position: "relative",
-      height: "100vh",
-      overflow: "hidden"
-    },
+    sx: STAGE_SX,
     "data-testid": testId("content"),
     children: [
       isLoading && /* @__PURE__ */ jsx(
@@ -46,13 +58,7 @@ var LightboxStage = ({
       /* @__PURE__ */ jsx(
         Box,
         {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "100%",
-            height: "100%"
-          },
+          sx: MEDIA_BOX_SX,
           "data-testid": testId("image-container"),
           children: media
         }
@@ -65,7 +71,7 @@ var LightboxStage = ({
             ...captionSx,
             position: "absolute",
             // Sit above the filmstrip when there is one.
-            bottom: thumbnails ? 120 : 16,
+            bottom: sxRem(thumbnails ? 120 : 16),
             left: "50%",
             transform: "translateX(-50%)",
             maxWidth: "80vw",
@@ -78,7 +84,13 @@ var LightboxStage = ({
       items.length > 1 && /* @__PURE__ */ jsxs(
         Typography,
         {
-          sx: { ...counterSx, position: "absolute", top: 70, right: 16, padding: "4px 8px" },
+          sx: {
+            ...counterSx,
+            position: "absolute",
+            top: sxRem(70),
+            right: sxRem(16),
+            padding: (theme) => rems(theme, 4, 8)
+          },
           "aria-live": "polite",
           "data-testid": testId("counter"),
           children: [
@@ -96,4 +108,4 @@ var LightboxStage = ({
 export {
   LightboxStage
 };
-//# sourceMappingURL=chunk-JWK4GI2I.js.map
+//# sourceMappingURL=chunk-N2GEKC4J.js.map

package/dist/chunk-N2GEKC4J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxStage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { captionSx, counterSx } from './Lightbox.constants';\nimport type { LightboxItem } from './Lightbox.types';\nimport { onMedia } from '../../../tokens/ink';\nimport { rems, sxRem } from '../../../tokens/relative';\n\ntype TestId = (suffix: string) => string;\n\nexport interface LightboxStageProps {\n  items: LightboxItem[];\n  currentItem?: LightboxItem;\n  currentIndex: number;\n  isLoading: boolean;\n  showCaptions: boolean;\n  thumbnails: boolean;\n  testId: TestId;\n  media: ReactNode;\n  thumbnailStrip: ReactNode;\n}\n\nconst STAGE_SX = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: 0,\n  position: 'relative',\n  height: '100vh',\n  overflow: 'hidden',\n} as const;\n\nconst MEDIA_BOX_SX = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n} as const;\n\n// The viewport itself: the media, whatever floats over it, and the filmstrip.\nexport const LightboxStage: FC<LightboxStageProps> = ({\n  items,\n  currentItem,\n  currentIndex,\n  isLoading,\n  showCaptions,\n  thumbnails,\n  testId,\n  media,\n  thumbnailStrip,\n}) => (\n  <DialogContent\n    sx={STAGE_SX}\n    data-testid={testId('content')}\n  >\n    {isLoading && (\n      <CircularProgress\n        sx={{ position: 'absolute', color: onMedia, zIndex: 999 }}\n        data-testid={testId('loading')}\n      />\n    )}\n\n    <Box\n      sx={MEDIA_BOX_SX}\n      data-testid={testId('image-container')}\n    >\n      {media}\n    </Box>\n\n    {showCaptions && currentItem?.caption && (\n      <Typography\n        id=\"lightbox-description\"\n        sx={{\n          ...captionSx,\n          position: 'absolute',\n          // Sit above the filmstrip when there is one.\n          bottom: sxRem(thumbnails ? 120 : 16),\n          left: '50%',\n          transform: 'translateX(-50%)',\n          maxWidth: '80vw',\n          padding: 2,\n        }}\n        data-testid={testId('caption')}\n      >\n        {currentItem.caption}\n      </Typography>\n    )}\n\n    {items.length > 1 && (\n      <Typography\n        sx={{\n          ...counterSx,\n          position: 'absolute',\n          top: sxRem(70),\n          right: sxRem(16),\n          padding: (theme: Theme) => rems(theme, 4, 8),\n        }}\n        aria-live=\"polite\"\n        data-testid={testId('counter')}\n      >\n        {currentIndex + 1} / {items.length}\n      </Typography>\n    )}\n\n    {thumbnailStrip}\n  </DialogContent>\n);\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,OAAO,gBAAgB;AA2DjB,cAiCA,YAjCA;AAnCN,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AACV;AAGO,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,IACJ,eAAa,OAAO,SAAS;AAAA,IAE5B;AAAA,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,EAAE,UAAU,YAAY,OAAO,SAAS,QAAQ,IAAI;AAAA,UACxD,eAAa,OAAO,SAAS;AAAA;AAAA,MAC/B;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,eAAa,OAAO,iBAAiB;AAAA,UAEpC;AAAA;AAAA,MACH;AAAA,MAEC,gBAAgB,aAAa,WAC5B;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,IAAI;AAAA,YACF,GAAG;AAAA,YACH,UAAU;AAAA;AAAA,YAEV,QAAQ,MAAM,aAAa,MAAM,EAAE;AAAA,YACnC,MAAM;AAAA,YACN,WAAW;AAAA,YACX,UAAU;AAAA,YACV,SAAS;AAAA,UACX;AAAA,UACA,eAAa,OAAO,SAAS;AAAA,UAE5B,sBAAY;AAAA;AAAA,MACf;AAAA,MAGD,MAAM,SAAS,KACd;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,MAAM,EAAE;AAAA,YACb,OAAO,MAAM,EAAE;AAAA,YACf,SAAS,CAAC,UAAiB,KAAK,OAAO,GAAG,CAAC;AAAA,UAC7C;AAAA,UACA,aAAU;AAAA,UACV,eAAa,OAAO,SAAS;AAAA,UAE5B;AAAA,2BAAe;AAAA,YAAE;AAAA,YAAI,MAAM;AAAA;AAAA;AAAA,MAC9B;AAAA,MAGD;AAAA;AAAA;AACH;","names":[]}

package/dist/{chunk-AJSPLHG4.js → chunk-NNQCWXGY.js}

@@ -1,6 +1,9 @@
 import {
   TimelineRow
-} from "./chunk-NVNZFT5X.js";
+} from "./chunk-EIYTS5VZ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Timeline/Timeline.tsx
 import Box from "@mui/material/Box/index.js";
@@ -18,15 +21,15 @@ var TimelineContainer = styled(Box)(
       overflowX: "auto",
       paddingBottom: theme.spacing(2),
       "&::-webkit-scrollbar": {
-        height: 8
+        height: rem(theme, 8)
       },
       "&::-webkit-scrollbar-track": {
         background: alpha(theme.palette.action.disabled, 0.1),
-        borderRadius: 4
+        borderRadius: rem(theme, 4)
       },
       "&::-webkit-scrollbar-thumb": {
         background: alpha(theme.palette.primary.main, 0.3),
-        borderRadius: 4,
+        borderRadius: rem(theme, 4),
         "&:hover": {
           background: alpha(theme.palette.primary.main, 0.5)
         }
@@ -87,4 +90,4 @@ export {
   Timeline,
   Timeline_default
 };
-//# sourceMappingURL=chunk-AJSPLHG4.js.map
+//# sourceMappingURL=chunk-NNQCWXGY.js.map

package/dist/chunk-NNQCWXGY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Timeline/Timeline.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { TimelineRow } from './TimelineRow';\nimport type { TimelineProps } from './Timeline.types';\nimport { rem } from '../../../tokens/relative';\n\n// ---\n\n// --- Styled Components ---\nconst TimelineContainer = styled(Box)<{ orientation: 'vertical' | 'horizontal' }>(\n  ({ theme, orientation }) => ({\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    gap: theme.spacing(2),\n    position: 'relative',\n    width: '100%',\n    ...(orientation === 'horizontal' && {\n      overflowX: 'auto',\n      paddingBottom: theme.spacing(2),\n      '&::-webkit-scrollbar': {\n        height: rem(theme, 8) },\n      '&::-webkit-scrollbar-track': {\n        background: alpha(theme.palette.action.disabled, 0.1),\n        borderRadius: rem(theme, 4) },\n      '&::-webkit-scrollbar-thumb': {\n        background: alpha(theme.palette.primary.main, 0.3),\n        borderRadius: rem(theme, 4),\n        '&:hover': {\n          background: alpha(theme.palette.primary.main, 0.5) } } }) }),\n);\n\n\n// ---\n\n// Main component\nexport const Timeline: FC<TimelineProps> = ({\n  items,\n  variant = 'default',\n  orientation = 'vertical',\n  showConnector = true,\n  animated = true,\n  alternating = false,\n  onItemClick }) => {\n  const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());\n\n  const handleExpandClick = (itemId: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    setExpandedItems((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(itemId)) {\n        newSet.delete(itemId);\n      } else {\n        newSet.add(itemId);\n      }\n      return newSet;\n    });\n  };\n\n  return (\n    <TimelineContainer\n      orientation={orientation}\n      data-testid=\"timeline-container\"\n    >\n      {items.map((item, index) => (\n        <TimelineRow\n          key={item.id}\n          item={item}\n          index={index}\n          isLast={index === items.length - 1}\n          variant={variant}\n          orientation={orientation}\n          showConnector={showConnector}\n          animated={animated}\n          alternating={alternating}\n          isExpanded={expandedItems.has(item.id)}\n          onItemClick={onItemClick}\n          onExpandClick={handleExpandClick}\n        />\n      ))}\n    </TimelineContainer>\n  );\n};\n\nexport default Timeline;\n"],"mappings":";;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,OAAO,cAAc;AAE9B,OAAO,WAAW;AA+DV;AAvDR,IAAM,oBAAoB,OAAO,GAAG;AAAA,EAClC,CAAC,EAAE,OAAO,YAAY,OAAO;AAAA,IAC3B,SAAS;AAAA,IACT,eAAe,gBAAgB,aAAa,WAAW;AAAA,IACvD,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAI,gBAAgB,gBAAgB;AAAA,MAClC,WAAW;AAAA,MACX,eAAe,MAAM,QAAQ,CAAC;AAAA,MAC9B,wBAAwB;AAAA,QACtB,QAAQ,IAAI,OAAO,CAAC;AAAA,MAAE;AAAA,MACxB,8BAA8B;AAAA,QAC5B,YAAY,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG;AAAA,QACpD,cAAc,IAAI,OAAO,CAAC;AAAA,MAAE;AAAA,MAC9B,8BAA8B;AAAA,QAC5B,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,QACjD,cAAc,IAAI,OAAO,CAAC;AAAA,QAC1B,WAAW;AAAA,UACT,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,QAAE;AAAA,MAAE;AAAA,IAAE;AAAA,EAAG;AACpE;AAMO,IAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAY,MAAM;AAClB,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAsB,oBAAI,IAAI,CAAC;AAE/E,QAAM,oBAAoB,CAAC,QAAgB,UAA4B;AACrE,UAAM,gBAAgB;AACtB,qBAAiB,CAAC,SAAS;AACzB,YAAM,SAAS,IAAI,IAAI,IAAI;AAC3B,UAAI,OAAO,IAAI,MAAM,GAAG;AACtB,eAAO,OAAO,MAAM;AAAA,MACtB,OAAO;AACL,eAAO,IAAI,MAAM;AAAA,MACnB;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MAEX,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,QAAQ,UAAU,MAAM,SAAS;AAAA,UACjC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,cAAc,IAAI,KAAK,EAAE;AAAA,UACrC;AAAA,UACA,eAAe;AAAA;AAAA,QAXV,KAAK;AAAA,MAYZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/{chunk-IDO4EV7T.js → chunk-NR5TW4AH.js}

@@ -1,9 +1,9 @@
 import {
   statusMessage
-} from "./chunk-EAE5Z5HL.js";
+} from "./chunk-OJ2XR3WH.js";
 import {
   DayBoundInput
-} from "./chunk-VDZQJBAV.js";
+} from "./chunk-GY4NBSCN.js";
 
 // src/components/form/DateRangePicker/DateRangePickerFields.tsx
 import Box from "@mui/material/Box/index.js";
@@ -64,4 +64,4 @@ function DateRangeFields({
 export {
   DateRangeFields
 };
-//# sourceMappingURL=chunk-IDO4EV7T.js.map
+//# sourceMappingURL=chunk-NR5TW4AH.js.map

package/dist/{chunk-O26MKGIC.js → chunk-NRIV2CQ2.js}

@@ -1,27 +1,32 @@
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/data-display/HoverCard/HoverCard.content.tsx
 import Avatar from "@mui/material/Avatar/index.js";
 import Box from "@mui/material/Box/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Typography from "@mui/material/Typography/index.js";
-import { styled } from "@mui/material/styles/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LoadingContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  minHeight: 80,
+  minHeight: rem(theme, 80),
   color: theme.palette.text.secondary
 }));
 var testId = (base, suffix, fallback) => base ? `${base}-${suffix}` : fallback;
 var CardAvatar = ({ avatar }) => {
   if (!avatar) return null;
   if (typeof avatar === "string") {
-    return /* @__PURE__ */ jsx(Avatar, { src: avatar, sx: { width: 48, height: 48, mr: 2 } });
+    return /* @__PURE__ */ jsx(Avatar, { src: avatar, sx: { width: sxRem(48), height: sxRem(48), mr: 2 } });
   }
   const element = avatar;
   return React.cloneElement(element, {
-    sx: { width: 48, height: 48, mr: 2, ...element.props.sx }
+    sx: { width: sxRem(48), height: sxRem(48), mr: 2, ...element.props.sx }
   });
 };
 var Title = ({ title, variant, sx, dataTestId }) => /* @__PURE__ */ jsx(
@@ -80,9 +85,10 @@ var DetailedContent = ({
 var HoverCardContent = (props) => {
   const { variant, title, description, avatar, loading, loadingComponent, children, dataTestId } = props;
   const { loadingText } = props;
+  const theme = useTheme();
   if (loading) {
     return /* @__PURE__ */ jsx(LoadingContainer, { children: loadingComponent || /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-      /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+      /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20) }),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", children: loadingText })
     ] }) });
   }
@@ -99,4 +105,4 @@ var HoverCardContent = (props) => {
 export {
   HoverCardContent
 };
-//# sourceMappingURL=chunk-O26MKGIC.js.map
+//# sourceMappingURL=chunk-NRIV2CQ2.js.map

package/dist/chunk-NRIV2CQ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/HoverCard/HoverCard.content.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { HoverCardProps } from './HoverCard.types';\n\nconst LoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: rem(theme, 80),\n  color: theme.palette.text.secondary,\n}));\n\n/** `${dataTestId}-${suffix}`, or the shared default when the caller gave no id. */\nconst testId = (base: string | undefined, suffix: string, fallback: string) =>\n  base ? `${base}-${suffix}` : fallback;\n\nexport interface HoverCardContentProps\n  extends Pick<\n    HoverCardProps,\n    | 'variant'\n    | 'title'\n    | 'description'\n    | 'avatar'\n    | 'loading'\n    | 'loadingComponent'\n    | 'loadingText'\n    | 'children'\n  > {\n  dataTestId?: string;\n}\n\n/** A string avatar is a src; anything else is an element to re-size in place. */\nconst CardAvatar: React.FC<{ avatar: HoverCardProps['avatar'] }> = ({ avatar }) => {\n  if (!avatar) return null;\n\n  if (typeof avatar === 'string') {\n    return <Avatar src={avatar} sx={{ width: sxRem(48), height: sxRem(48), mr: 2 }} />;\n  }\n\n  const element = avatar as React.ReactElement<{ sx?: object }>;\n  return React.cloneElement(element, {\n    sx: { width: sxRem(48), height: sxRem(48), mr: 2, ...element.props.sx },\n  });\n};\n\nconst Title: React.FC<{\n  title: React.ReactNode;\n  variant?: string;\n  sx?: object;\n  dataTestId?: string;\n}> = ({ title, variant, sx, dataTestId }) => (\n  <Typography\n    variant={variant === 'minimal' ? 'body2' : 'subtitle1'}\n    sx={{ fontWeight: 600, ...sx }}\n    data-testid={testId(dataTestId, 'title', 'hover-card-title')}\n  >\n    {title}\n  </Typography>\n);\n\nconst Description: React.FC<{\n  description: React.ReactNode;\n  sx?: object;\n  dataTestId?: string;\n}> = ({ description, sx, dataTestId }) => (\n  <Typography\n    variant=\"body2\"\n    color=\"text.secondary\"\n    sx={sx}\n    data-testid={testId(dataTestId, 'description', 'hover-card-description')}\n  >\n    {description}\n  </Typography>\n);\n\n/** The detailed variant leads with the avatar and sets the text beside it. */\nconst DetailedContent: React.FC<HoverCardContentProps> = ({\n  title,\n  description,\n  avatar,\n  children,\n  dataTestId,\n}) => (\n  <>\n    {avatar && (\n      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>\n        <CardAvatar avatar={avatar} />\n        <Box>\n          {title && (\n            <Typography\n              variant=\"h6\"\n              sx={{ fontWeight: 600, mb: 0.5 }}\n              data-testid={testId(dataTestId, 'title', 'hover-card-title')}\n            >\n              {title}\n            </Typography>\n          )}\n          {description && <Description description={description} dataTestId={dataTestId} />}\n        </Box>\n      </Box>\n    )}\n    {!avatar && title && (\n      <Typography\n        variant=\"h6\"\n        sx={{ fontWeight: 600, mb: 1 }}\n        data-testid={testId(dataTestId, 'title', 'hover-card-title')}\n      >\n        {title}\n      </Typography>\n    )}\n    {!avatar && description && (\n      <Description description={description} sx={{ mb: 1 }} dataTestId={dataTestId} />\n    )}\n    {children && <Box>{children}</Box>}\n  </>\n);\n\nexport const HoverCardContent: React.FC<HoverCardContentProps> = (props) => {\n  const { variant, title, description, avatar, loading, loadingComponent, children, dataTestId } =\n    props;\n  const { loadingText } = props;\n  const theme = useTheme();\n\n  if (loading) {\n    return (\n      <LoadingContainer>\n        {loadingComponent || (\n          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n            <CircularProgress size={rem(theme, 20)} />\n            <Typography variant=\"body2\">{loadingText}</Typography>\n          </Box>\n        )}\n      </LoadingContainer>\n    );\n  }\n\n  if (variant === 'detailed' && (avatar || title || description)) {\n    return <DetailedContent {...props} />;\n  }\n\n  return (\n    <>\n      {title && (\n        <Title title={title} variant={variant} sx={{ mb: 0.5 }} dataTestId={dataTestId} />\n      )}\n      {description && <Description description={description} dataTestId={dataTestId} />}\n      {children}\n    </>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-6DC5SVHM.js → chunk-NSKQANRY.js}

@@ -1,6 +1,6 @@
 import {
   Alert
-} from "./chunk-2PWVPTS3.js";
+} from "./chunk-AUHYR7ID.js";
 
 // src/components/data-display/CardKit/card-actions-context.tsx
 import { createContext, useCallback, useContext, useState } from "react";
@@ -54,4 +54,4 @@ export {
   CardActionsProvider,
   useCardActions
 };
-//# sourceMappingURL=chunk-6DC5SVHM.js.map
+//# sourceMappingURL=chunk-NSKQANRY.js.map

package/dist/{chunk-24NXQG5F.js → chunk-ODFJTEIL.js}

@@ -2,13 +2,14 @@ import {
   MARKER_PIXELS_PER_DEGREE
 } from "./chunk-H2J2MTRE.js";
 import {
-  BOUNCE_KEYFRAMES
-} from "./chunk-X4PS3E3V.js";
+  bounceKeyframes
+} from "./chunk-X6AIKCAV.js";
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/MapPreview/MapMarkers.tsx
@@ -24,8 +25,8 @@ var CoordinatesDisplay = styled(Box)(({ theme }) => ({
   left: theme.spacing(2),
   padding: theme.spacing(1, 1.5),
   background: alpha(theme.palette.background.paper, 0.95),
-  backdropFilter: "blur(10px)",
-  WebkitBackdropFilter: "blur(10px)",
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   borderRadius: theme.shape.borderRadius,
   zIndex: 1
@@ -41,8 +42,8 @@ var MapMarkers = ({ markers, centre, animated }) => {
         top: "50%",
         left: "50%",
         transform: `translate(
-              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
-              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
+              ${rem(theme, (markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE)},
+              ${rem(theme, -(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE)}
             )`,
         zIndex: 3,
         cursor: markerItem.onClick ? "pointer" : "default"
@@ -55,9 +56,9 @@ var MapMarkers = ({ markers, centre, animated }) => {
           sx: {
             fontSize: rem(theme, 32),
             color: theme.palette.error.main,
-            filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
+            filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,
             animation: animated ? "bounce 2s infinite" : "none",
-            "@keyframes bounce": BOUNCE_KEYFRAMES
+            "@keyframes bounce": bounceKeyframes(theme)
           }
         }
       ) })
@@ -82,4 +83,4 @@ export {
   MapMarkers,
   MapCoordinates
 };
-//# sourceMappingURL=chunk-24NXQG5F.js.map
+//# sourceMappingURL=chunk-ODFJTEIL.js.map

package/dist/chunk-ODFJTEIL.js.map

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

package/dist/{chunk-MLBKACV6.js → chunk-OG6LYQ7C.js}

@@ -2,7 +2,8 @@ import {
   neutralTones
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/AlertDialog/AlertDialog.tsx
@@ -18,16 +19,16 @@ import DialogContentText from "@mui/material/DialogContentText/index.js";
 import DialogTitle from "@mui/material/DialogTitle/index.js";
 import IconButton from "@mui/material/IconButton/index.js";
 import Typography from "@mui/material/Typography/index.js";
-import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { alpha, keyframes, styled, useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 15px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;
     opacity: 0;
   }
   100% {
@@ -63,12 +64,12 @@ var StyledDialog = styled(Dialog, {
     },
     ...customVariant === "glass" && {
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
     },
     // Glow effect
     ...glow && !pulse && {
-      boxShadow: `0 0 30px 10px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: "brightness(1.05)"
     },
     // Pulse animation
@@ -84,7 +85,7 @@ var StyledDialog = styled(Dialog, {
         borderRadius: "inherit",
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: "none",
         zIndex: -1
       }
@@ -92,7 +93,7 @@ var StyledDialog = styled(Dialog, {
     // Both glow and pulse
     ...glow && pulse && {
       position: "relative",
-      boxShadow: `0 0 30px 10px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: "brightness(1.05)",
       "&::after": {
         content: '""',
@@ -104,7 +105,7 @@ var StyledDialog = styled(Dialog, {
         borderRadius: "inherit",
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: "none",
         zIndex: -1
       }
@@ -178,6 +179,7 @@ function AlertDialogFooter({
   onConfirm,
   dataTestId
 }) {
+  const theme = useTheme();
   return /* @__PURE__ */ jsxs(StyledDialogActions, { "data-testid": `${dataTestId}-actions`, children: [
     showCancel && /* @__PURE__ */ jsx(
       Button,
@@ -201,7 +203,7 @@ function AlertDialogFooter({
         startIcon: loading ? /* @__PURE__ */ jsx(
           CircularProgress,
           {
-            size: 16,
+            size: rem(theme, 16),
             color: "inherit",
             "data-testid": `${dataTestId}-loading-spinner`
           }
@@ -305,4 +307,4 @@ AlertDialog.displayName = "AlertDialog";
 export {
   AlertDialog
 };
-//# sourceMappingURL=chunk-MLBKACV6.js.map
+//# sourceMappingURL=chunk-OG6LYQ7C.js.map

package/dist/chunk-OG6LYQ7C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogActions from '@mui/material/DialogActions/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport DialogContentText from '@mui/material/DialogContentText/index.js';\nimport DialogTitle from '@mui/material/DialogTitle/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { neutralTones } from '../../../tokens/ink';\n\nimport type { AlertDialogProps } from './AlertDialog.types';\nimport { rem, rems } from '../../../tokens/relative';\n\n// Define pulse animation\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nconst StyledDialog = styled(Dialog, {\n  shouldForwardProp: (prop) => \n    !['customVariant', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: string; \n  glow?: boolean; \n  pulse?: boolean; \n}>(({ theme, customVariant, glow, pulse }) => ({\n  '& .MuiDialog-paper': {\n    borderRadius: theme.spacing(2),\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    overflow: 'hidden',\n\n    // Variant styles\n    ...(customVariant === 'default' && {\n      backgroundColor: theme.palette.background.paper,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n\n    // The error tint is LAYERED over the paper, not used as the background\n    // itself: `alpha(error, 0.05)` alone leaves the panel 95% transparent, so\n    // the page behind it showed straight through the question and its buttons.\n    // A confirm nobody can read is the one dialog that must never be hard to\n    // read. Same tint, opaque base.\n    ...(customVariant === 'destructive' && {\n      backgroundColor: theme.palette.background.paper,\n      backgroundImage: `linear-gradient(${alpha(theme.palette.error.main, 0.05)}, ${alpha(\n        theme.palette.error.main,\n        0.05,\n      )})`,\n      border: `1px solid ${alpha(theme.palette.error.main, 0.2)}`,\n    }),\n\n    ...(customVariant === 'glass' && {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n\n    // Glow effect\n    ...(glow && !pulse && {\n      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)',\n    }),\n\n    // Pulse animation\n    ...(pulse && !glow && {\n      position: 'relative',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1,\n      },\n    }),\n\n    // Both glow and pulse\n    ...(glow && pulse && {\n      position: 'relative',\n      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1,\n      },\n    }),\n  },\n}));\n\nconst StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  paddingRight: theme.spacing(6), // Space for close button\n  '& .MuiTypography-root': {\n    fontWeight: 600,\n    fontSize: rem(theme, 20),\n  },\n}));\n\nconst StyledDialogContent = styled(DialogContent)(({ theme }) => ({\n  paddingTop: theme.spacing(1),\n  paddingBottom: theme.spacing(2),\n}));\n\nconst StyledDialogActions = styled(DialogActions)(({ theme }) => ({\n  padding: theme.spacing(2, 3, 3, 3),\n  gap: theme.spacing(1),\n}));\n\nconst CloseButton = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  right: theme.spacing(1),\n  top: theme.spacing(1),\n  color: neutralTones(theme).muted,\n}));\n\n/**\n * Per-variant lookups, hoisted out of the render function. They depend on\n * nothing but their arguments, so keeping them at module scope means they are\n * not rebuilt on every render — and it keeps the component's own branch count\n * inside the repo's complexity budget.\n */\nconst variantIcon = (\n  variant: AlertDialogProps['variant'],\n  icon: AlertDialogProps['icon'],\n): React.ReactNode => {\n  if (icon) return icon;\n  return variant === 'destructive' ? <Error color=\"error\" /> : <Info color=\"primary\" />;\n};\n\n/**\n * Ids for the two elements that give the dialog its accessible name and\n * description. Derived from the test id so they are stable and unique per\n * dialog without a generated id that would change on every render.\n */\nconst titleId = (dataTestId: string): string => `${dataTestId}-title`;\nconst descriptionId = (dataTestId: string): string => `${dataTestId}-description`;\n\n/**\n * `alertdialog`, not `dialog`.\n *\n * This component interrupts what the operator was doing and will not go away\n * until they answer — which is exactly the distinction the two roles draw, and\n * it is what makes a screen reader announce the message itself on open rather\n * than just the dialog's name. MUI hardcodes `role=\"dialog\"` on the paper, so\n * it has to be overridden through the paper slot.\n */\nconst ALERT_ROLE = 'alertdialog';\n\n/**\n * The paper slot's a11y props: the role, plus the name and description wired to\n * the elements that actually carry them, so the announcement is the QUESTION\n * rather than the word \"dialog\".\n *\n * Both references are conditional — pointing `aria-labelledby` at an element\n * that was never rendered leaves a dangling id, which screen readers treat as\n * no name at all, i.e. worse than omitting it.\n */\nfunction ariaSlotProps(\n  dataTestId: string,\n  title: AlertDialogProps['title'],\n  description: AlertDialogProps['description'],\n): { paper: Record<string, string> } {\n  return {\n    paper: {\n      role: ALERT_ROLE,\n      ...(title ? { 'aria-labelledby': titleId(dataTestId) } : {}),\n      ...(description ? { 'aria-describedby': descriptionId(dataTestId) } : {}),\n    },\n  };\n}\n\n/** Both variants render a filled confirm; only the colour distinguishes them. */\nconst CONFIRM_BUTTON_VARIANT: ButtonProps['variant'] = 'contained';\nconst confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>\n  variant === 'destructive' ? 'error' : 'primary';\n\n/** Title row: the variant icon (unless explicitly suppressed with `null`) + the title. */\nfunction AlertDialogHeader({\n  title,\n  icon,\n  variant,\n  dataTestId,\n}: {\n  title: AlertDialogProps['title'];\n  icon: AlertDialogProps['icon'];\n  variant: AlertDialogProps['variant'];\n  dataTestId: string;\n}): React.ReactElement | null {\n  if (!title) return null;\n  return (\n    <StyledDialogTitle id={titleId(dataTestId)} data-testid={`${dataTestId}-title`}>\n      {icon !== null && (\n        <span data-testid={`${dataTestId}-icon`}>{variantIcon(variant, icon)}</span>\n      )}\n      <Typography variant=\"h6\" component=\"span\">\n        {title}\n      </Typography>\n    </StyledDialogTitle>\n  );\n}\n\n/** Action row: the optional cancel button and the (variant-coloured) confirm. */\nfunction AlertDialogFooter({\n  variant,\n  cancelText = 'Cancel',\n  confirmText = 'Confirm',\n  showCancel = true,\n  loading = false,\n  confirmDisabled = false,\n  initialFocus = 'confirm',\n  onCancel,\n  onConfirm,\n  dataTestId,\n}: Pick<\n  AlertDialogProps,\n  | 'variant'\n  | 'cancelText'\n  | 'confirmText'\n  | 'showCancel'\n  | 'loading'\n  | 'confirmDisabled'\n  | 'initialFocus'\n> & {\n  onCancel: () => void;\n  onConfirm: () => void;\n  dataTestId: string;\n}): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <StyledDialogActions data-testid={`${dataTestId}-actions`}>\n      {showCancel && (\n        <Button\n          onClick={onCancel}\n          variant=\"outlined\"\n          color=\"inherit\"\n          disabled={loading}\n          autoFocus={initialFocus === 'cancel'}\n          data-testid={`${dataTestId}-cancel-button`}\n        >\n          {cancelText}\n        </Button>\n      )}\n      <Button\n        onClick={onConfirm}\n        variant={CONFIRM_BUTTON_VARIANT}\n        color={confirmButtonColor(variant)}\n        disabled={confirmDisabled || loading}\n        startIcon={\n          loading ? (\n            <CircularProgress\n              size={rem(theme, 16)}\n              color=\"inherit\"\n              data-testid={`${dataTestId}-loading-spinner`}\n            />\n          ) : undefined\n        }\n        autoFocus={initialFocus !== 'cancel'}\n        data-testid={`${dataTestId}-confirm-button`}\n      >\n        {confirmText}\n      </Button>\n    </StyledDialogActions>\n  );\n}\n\nexport const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(\n  ({\n    variant = 'default',\n    glow = false,\n    pulse = false,\n    title,\n    description,\n    icon,\n    cancelText,\n    confirmText,\n    onCancel,\n    onConfirm,\n    showCancel,\n    loading,\n    confirmDisabled,\n    initialFocus,\n    children,\n    onClose,\n    'data-testid': dataTestId = 'alert-dialog',\n    ...props\n  }, ref) => {\n    const handleCancel = () => {\n      onCancel?.();\n      onClose?.({}, 'backdropClick');\n    };\n\n    return (\n      <StyledDialog\n        ref={ref}\n        customVariant={variant}\n        glow={glow}\n        pulse={pulse}\n        onClose={onClose}\n        data-testid={dataTestId}\n        slotProps={ariaSlotProps(dataTestId, title, description)}\n        {...props}\n      >\n        <CloseButton\n          aria-label=\"close\"\n          onClick={handleCancel}\n          size=\"small\"\n          data-testid={`${dataTestId}-close-button`}\n        >\n          <Close />\n        </CloseButton>\n\n        <AlertDialogHeader\n          title={title}\n          icon={icon}\n          variant={variant}\n          dataTestId={dataTestId}\n        />\n\n        <StyledDialogContent data-testid={`${dataTestId}-content`}>\n          {description && (\n            <DialogContentText\n              id={descriptionId(dataTestId)}\n              data-testid={`${dataTestId}-description`}\n            >\n              {description}\n            </DialogContentText>\n          )}\n          {children}\n        </StyledDialogContent>\n\n        <AlertDialogFooter\n          variant={variant}\n          cancelText={cancelText}\n          confirmText={confirmText}\n          showCancel={showCancel}\n          loading={loading}\n          confirmDisabled={confirmDisabled}\n          initialFocus={initialFocus}\n          onCancel={handleCancel}\n          onConfirm={() => onConfirm?.()}\n          dataTestId={dataTestId}\n        />\n      </StyledDialog>\n    );\n  }\n);\n\nAlertDialog.displayName = 'AlertDialog';"],"mappings":"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","names":[]}

package/dist/{chunk-H6YVO55T.js → chunk-OHZU4IT3.js}

@@ -2,23 +2,28 @@ import {
   accentFor
 } from "./chunk-TCAQOUIB.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Carousel/Carousel.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SIZES = {
-  xs: { height: 200, fontSize: sxRem(12) },
-  sm: { height: 300, fontSize: sxRem(14) },
-  md: { height: 400, fontSize: sxRem(16) },
-  lg: { height: 500, fontSize: sxRem(18) },
-  xl: { height: 600, fontSize: sxRem(20) }
+  xs: { height: sxRem(200), fontSize: sxRem(12) },
+  sm: { height: sxRem(300), fontSize: sxRem(14) },
+  md: { height: sxRem(400), fontSize: sxRem(16) },
+  lg: { height: sxRem(500), fontSize: sxRem(18) },
+  xl: { height: sxRem(600), fontSize: sxRem(20) }
 };
 var sizeStyles = (size) => SIZES[size] ?? SIZES.md;
+var frameBox = (theme, size, height, width) => ({
+  width: typeof width === "number" ? rem(theme, width) : width,
+  height: typeof height === "number" || height === void 0 ? rem(theme, height ?? 400) : sizeStyles(size).height(theme)
+});
 var SURFACES = {
   glass: ({ theme, color, glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),
-    backdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`
   }),
   gradient: ({ theme, color, gradient }) => ({
@@ -30,25 +35,23 @@ var SURFACES = {
   default: () => ({})
 };
 var containerStyles = (input) => {
-  const { theme, variant, size, color, height, width, glow, pulse } = input;
+  const { theme, variant, color, height, width, glow, pulse } = input;
   const accent = accentFor(theme, color).main;
   return {
     position: "relative",
     width,
-    // A numeric height is taken literally; anything else falls back to the size
-    // preset, since a percentage cannot resolve against an unsized parent here.
-    height: typeof height === "number" ? height : sizeStyles(size).height,
+    height,
     overflow: "hidden",
     borderRadius: theme.spacing(1),
     transition: theme.transitions.create(["all"], {
       duration: theme.transitions.duration.standard
     }),
-    ...glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` },
+    ...glow && { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` },
     ...pulse && {
       animation: "pulse 2s infinite",
       "@keyframes pulse": {
         "0%": { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
-        "70%": { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+        "70%": { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },
         "100%": { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` }
       }
     },
@@ -57,6 +60,7 @@ var containerStyles = (input) => {
 };
 
 export {
+  frameBox,
   containerStyles
 };
-//# sourceMappingURL=chunk-H6YVO55T.js.map
+//# sourceMappingURL=chunk-OHZU4IT3.js.map

package/dist/chunk-OHZU4IT3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CarouselProps } from './Carousel.types';\nimport { accentFor, rem, sxRem } from '../../../tokens/scales';\n\ntype Variant = NonNullable<CarouselProps['variant']>;\ntype Size = NonNullable<CarouselProps['size']>;\ntype Color = NonNullable<CarouselProps['color']>;\n\nconst SIZES: Record<Size, { height: (theme: Theme) => string; fontSize: (theme: Theme) => string }> = {\n  xs: { height: sxRem(200), fontSize: sxRem(12) },\n  sm: { height: sxRem(300), fontSize: sxRem(14) },\n  md: { height: sxRem(400), fontSize: sxRem(16) },\n  lg: { height: sxRem(500), fontSize: sxRem(18) },\n  xl: { height: sxRem(600), fontSize: sxRem(20) },\n};\n\nconst sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;\n\n/**\n * The frame's box as CSS. A numeric `height`/`width` is design px, drawn\n * through the type scale; an unset height is the documented 400. A numeric\n * height is taken literally; any other falls back to the size preset, since a\n * percentage cannot resolve against an unsized parent here. A string width\n * passes through.\n */\nexport const frameBox = (\n  theme: Theme,\n  size: Size,\n  height: number | string | undefined,\n  width: number | string,\n): { width: string; height: string } => ({\n  width: typeof width === 'number' ? rem(theme, width) : width,\n  height: typeof height === 'number' || height === undefined\n    ? rem(theme, height ?? 400)\n    : sizeStyles(size).height(theme),\n});\n\ninterface ContainerStyleInput {\n  theme: Theme;\n  variant: Variant;\n  size: Size;\n  color: Color;\n  /** The frame's box, resolved by {@link frameBox}. */\n  height: string;\n  width: string;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n}\n\n/**\n * Each variant's own additions to the shared frame. The old switch re-spread the\n * same base, glow and pulse objects in all six arms before adding these; only\n * these differ, so the shared prefix is applied once by `containerStyles`.\n */\nconst SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {\n  glass: ({ theme, color, glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),\n    backdropFilter: `blur(${rem(theme, 20)})`,\n    border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,\n  }),\n\n  gradient: ({ theme, color, gradient }) => ({\n    background: gradient\n      ? `linear-gradient(135deg, ${alpha(accentFor(theme, color).light, 0.1)}, ${alpha(accentFor(theme, color).dark, 0.1)})`\n      : 'transparent',\n  }),\n\n  elevated: ({ theme }) => ({ boxShadow: theme.shadows[8] }),\n\n  minimal: () => ({ border: 'none', boxShadow: 'none' }),\n\n  cards: ({ theme }) => ({ padding: theme.spacing(2) }),\n\n  default: () => ({}),\n};\n\nexport const containerStyles = (input: ContainerStyleInput): CSSObject => {\n  const { theme, variant, color, height, width, glow, pulse } = input;\n  const accent = accentFor(theme, color).main;\n\n  return {\n    position: 'relative' as const,\n    width,\n    height,\n    overflow: 'hidden',\n    borderRadius: theme.spacing(1),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    ...(glow && { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` }),\n    ...(pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },\n        '70%': { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },\n        '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },\n      },\n    }),\n    ...(SURFACES[variant] ?? SURFACES.default)(input),\n  };\n};\n"],"mappings":";;;;;;;;;AAAA,SAAS,aAAa;AAUtB,IAAM,QAAgG;AAAA,EACpG,IAAI,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,MAAM,EAAE,EAAE;AAAA,EAC9C,IAAI,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,MAAM,EAAE,EAAE;AAAA,EAC9C,IAAI,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,MAAM,EAAE,EAAE;AAAA,EAC9C,IAAI,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,MAAM,EAAE,EAAE;AAAA,EAC9C,IAAI,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,MAAM,EAAE,EAAE;AAChD;AAEA,IAAM,aAAa,CAAC,SAAe,MAAM,IAAI,KAAK,MAAM;AASjD,IAAM,WAAW,CACtB,OACA,MACA,QACA,WACuC;AAAA,EACvC,OAAO,OAAO,UAAU,WAAW,IAAI,OAAO,KAAK,IAAI;AAAA,EACvD,QAAQ,OAAO,WAAW,YAAY,WAAW,SAC7C,IAAI,OAAO,UAAU,GAAG,IACxB,WAAW,IAAI,EAAE,OAAO,KAAK;AACnC;AAqBA,IAAM,WAAuE;AAAA,EAC3E,OAAO,CAAC,EAAE,OAAO,OAAO,MAAM,OAAO;AAAA,IACnC,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,QAAQ,MAAM,GAAG;AAAA,IACxE,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACtC,QAAQ,aAAa,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EAC/D;AAAA,EAEA,UAAU,CAAC,EAAE,OAAO,OAAO,SAAS,OAAO;AAAA,IACzC,YAAY,WACR,2BAA2B,MAAM,UAAU,OAAO,KAAK,EAAE,OAAO,GAAG,CAAC,KAAK,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,MACjH;AAAA,EACN;AAAA,EAEA,UAAU,CAAC,EAAE,MAAM,OAAO,EAAE,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,EAExD,SAAS,OAAO,EAAE,QAAQ,QAAQ,WAAW,OAAO;AAAA,EAEpD,OAAO,CAAC,EAAE,MAAM,OAAO,EAAE,SAAS,MAAM,QAAQ,CAAC,EAAE;AAAA,EAEnD,SAAS,OAAO,CAAC;AACnB;AAEO,IAAM,kBAAkB,CAAC,UAA0C;AACxE,QAAM,EAAE,OAAO,SAAS,OAAO,QAAQ,OAAO,MAAM,MAAM,IAAI;AAC9D,QAAM,SAAS,UAAU,OAAO,KAAK,EAAE;AAEvC,SAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,YAAY,MAAM,YAAY,OAAO,CAAC,KAAK,GAAG;AAAA,MAC5C,UAAU,MAAM,YAAY,SAAS;AAAA,IACvC,CAAC;AAAA,IACD,GAAI,QAAQ,EAAE,WAAW,OAAO,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,QAAQ,GAAG,CAAC,GAAG;AAAA,IACvE,GAAI,SAAS;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,QAClB,MAAM,EAAE,WAAW,WAAW,MAAM,QAAQ,GAAG,CAAC,GAAG;AAAA,QACnD,OAAO,EAAE,WAAW,SAAS,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,QAAQ,CAAC,CAAC,GAAG;AAAA,QAClE,QAAQ,EAAE,WAAW,WAAW,MAAM,QAAQ,CAAC,CAAC,GAAG;AAAA,MACrD;AAAA,IACF;AAAA,IACA,IAAI,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK;AAAA,EAClD;AACF;","names":[]}

package/dist/{chunk-EAE5Z5HL.js → chunk-OJ2XR3WH.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-FRAVVI4A.js";
 import {
   isoToMasked
-} from "./chunk-VDZQJBAV.js";
+} from "./chunk-GY4NBSCN.js";
 
 // src/components/form/DateRangePicker/DateRangePicker.range.ts
 function resolveDayRange(draft, maxRangeDays) {
@@ -62,4 +62,4 @@ export {
   resolveQuickRanges,
   activeQuickRangeId
 };
-//# sourceMappingURL=chunk-EAE5Z5HL.js.map
+//# sourceMappingURL=chunk-OJ2XR3WH.js.map

package/dist/{chunk-BR7RM3WR.js → chunk-OZPLAOI4.js}

@@ -3,7 +3,7 @@ import {
   chipStyles,
   iconWithTestId,
   makeKeyDownHandler
-} from "./chunk-5NFPO3YY.js";
+} from "./chunk-GJRKWDRR.js";
 import {
   chipMuiSize
 } from "./chunk-KU6VHNRV.js";
@@ -76,4 +76,4 @@ Chip.displayName = "Chip";
 export {
   Chip
 };
-//# sourceMappingURL=chunk-BR7RM3WR.js.map
+//# sourceMappingURL=chunk-OZPLAOI4.js.map