@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-NSKQANRY.js

@@ -0,0 +1,57 @@
+import {
+  Alert
+} from "./chunk-AUHYR7ID.js";
+
+// src/components/data-display/CardKit/card-actions-context.tsx
+import { createContext, useCallback, useContext, useState } from "react";
+import Snackbar from "@mui/material/Snackbar/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CardActionsContext = createContext(null);
+function CardActionsProvider({
+  tenantSlug,
+  onRefresh,
+  errorTitle,
+  errorDismissLabel,
+  autoHideMs = 6e3,
+  children
+}) {
+  const [error, setError] = useState(null);
+  const notifyError = useCallback((message) => setError(message), []);
+  return /* @__PURE__ */ jsxs(CardActionsContext.Provider, { value: { tenantSlug, onRefresh, notifyError }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: error !== null,
+        autoHideDuration: autoHideMs,
+        onClose: () => setError(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: "danger",
+            title: errorTitle,
+            description: error ?? "",
+            closable: true,
+            closeLabel: errorDismissLabel,
+            onClose: () => setError(null),
+            "data-testid": "card-action-error"
+          }
+        ) })
+      }
+    )
+  ] });
+}
+function useCardActions() {
+  const value = useContext(CardActionsContext);
+  if (!value) {
+    throw new Error("useCardActions must be used within a CardActionsProvider");
+  }
+  return value;
+}
+
+export {
+  CardActionsProvider,
+  useCardActions
+};
+//# sourceMappingURL=chunk-NSKQANRY.js.map

package/dist/chunk-OATHOXIU.js

@@ -0,0 +1,299 @@
+import {
+  indicatorSizeFor,
+  stepColors,
+  stepPalette
+} from "./chunk-V5KKBMAT.js";
+import {
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/utility/WorkflowStep/WorkflowStep.parts.tsx
+import Box from "@mui/material/Box/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var indicatorVariantStyles = (theme, variant, { backgroundColor, borderColor, textColor }) => {
+  if (variant === "outlined") {
+    return {
+      border: `2px solid ${borderColor}`,
+      backgroundColor: theme.palette.background.paper
+    };
+  }
+  const filled = { backgroundColor, color: textColor };
+  switch (variant) {
+    case "filled":
+      return filled;
+    case "minimal":
+      return { ...filled, border: "none" };
+    case "default":
+      return { ...filled, border: `1px solid ${borderColor}` };
+    default:
+      return {};
+  }
+};
+var StepItem = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isLast"].includes(prop)
+})(({ orientation, isLast }) => ({
+  display: "flex",
+  flexDirection: orientation === "vertical" ? "column" : "row",
+  alignItems: orientation === "vertical" ? "flex-start" : "center",
+  flex: orientation === "horizontal" && !isLast ? 1 : "none",
+  position: "relative",
+  minWidth: 0
+  // Allow content to shrink
+}));
+var StepIndicator = styled(Box, {
+  shouldForwardProp: (prop) => !["size", "variant", "color", "isActive", "isCompleted", "isError", "interactive", "disabled"].includes(prop)
+})(({ theme, size, variant, color, isActive, isCompleted, isError, interactive, animated, disabled }) => {
+  const indicatorSize = indicatorSizeFor(size);
+  const palette = stepPalette(theme, color);
+  const { backgroundColor, borderColor, textColor } = stepColors(theme, palette, {
+    isActive,
+    isCompleted,
+    isError,
+    variant
+  });
+  return {
+    width: indicatorSize,
+    height: indicatorSize,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: rem(theme, 12),
+    fontWeight: theme.typography.fontWeightMedium,
+    cursor: interactive && !disabled ? "pointer" : "default",
+    transition: animated ? theme.transitions.create(["background-color", "border-color", "transform"], {
+      duration: theme.transitions.duration.short
+    }) : "none",
+    flexShrink: 0,
+    ...indicatorVariantStyles(theme, variant, { backgroundColor, borderColor, textColor }),
+    // Interactive states
+    ...interactive && !disabled && {
+      "&:hover": {
+        transform: "scale(1.1)",
+        boxShadow: theme.shadows[2]
+      },
+      "&:focus-visible": {
+        outline: `2px solid ${palette.main}`,
+        outlineOffset: "2px"
+      }
+    },
+    // Disabled state
+    ...disabled && {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    }
+  };
+});
+var StepContent = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "interactive", "disabled"].includes(prop)
+})(({ theme, orientation, interactive, disabled }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: orientation === "vertical" ? "flex-start" : "center",
+  textAlign: orientation === "vertical" ? "left" : "center",
+  marginTop: orientation === "vertical" ? theme.spacing(1) : theme.spacing(0.5),
+  marginLeft: orientation === "horizontal" ? theme.spacing(1) : 0,
+  cursor: interactive && !disabled ? "pointer" : "default",
+  minWidth: 0,
+  flex: 1,
+  "& .step-title": {
+    fontSize: rem(theme, 14),
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.text.primary,
+    marginBottom: theme.spacing(0.5),
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "100%"
+  },
+  "& .step-description": {
+    fontSize: rem(theme, 12),
+    color: theme.palette.text.secondary,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "100%"
+  },
+  ...disabled && {
+    opacity: 0.5
+  }
+}));
+var StepConnector = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isCompleted", "color", "variant"].includes(prop)
+})(({ theme, orientation, isCompleted, color, variant }) => {
+  const colorKey = color || "primary";
+  const colorValue = colorKey === "neutral" ? { main: neutralTones(theme).emphasis } : theme.palette[colorKey];
+  const connectorColor = isCompleted ? colorValue.main : neutralTones(theme).track;
+  return {
+    flex: 1,
+    position: "relative",
+    ...orientation === "horizontal" && {
+      height: "2px",
+      backgroundColor: connectorColor,
+      margin: `0 ${theme.spacing(1)}`,
+      minWidth: theme.spacing(2)
+    },
+    ...orientation === "vertical" && {
+      width: "2px",
+      backgroundColor: connectorColor,
+      minHeight: theme.spacing(3),
+      marginLeft: theme.spacing(2),
+      position: "absolute",
+      left: "50%",
+      transform: "translateX(-50%)",
+      top: "100%"
+    },
+    transition: theme.transitions.create("background-color", {
+      duration: theme.transitions.duration.short
+    }),
+    ...variant === "minimal" && {
+      opacity: 0.6
+    }
+  };
+});
+var StepIndicatorComponent = forwardRef(({
+  step,
+  index,
+  isActive,
+  isCompleted,
+  isError,
+  variant,
+  color,
+  size,
+  showNumbers,
+  showIcons,
+  completedIcon,
+  errorIcon,
+  interactive,
+  animated,
+  disabled,
+  onClick,
+  "data-testid": dataTestId
+}, ref) => {
+  const handleClick = useCallback(() => {
+    if (interactive && !disabled && onClick) {
+      onClick(index, step);
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  const handleKeyDown = useCallback((event) => {
+    if (interactive && !disabled && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      if (onClick) {
+        onClick(index, step);
+      }
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  const renderIndicatorContent = () => {
+    if (isError && errorIcon) {
+      return errorIcon;
+    }
+    if (isCompleted && completedIcon) {
+      return completedIcon;
+    }
+    if (showIcons && step.icon) {
+      return step.icon;
+    }
+    if (showNumbers) {
+      return index + 1;
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx(
+    StepIndicator,
+    {
+      ref,
+      size,
+      variant,
+      color,
+      isActive,
+      isCompleted,
+      isError,
+      interactive,
+      animated,
+      disabled: Boolean(disabled || step.disabled),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive && !disabled && !step.disabled ? 0 : -1,
+      "aria-label": `Step ${index + 1}: ${step.title}`,
+      "aria-current": isActive ? "step" : void 0,
+      "data-testid": dataTestId,
+      children: renderIndicatorContent()
+    }
+  );
+});
+StepIndicatorComponent.displayName = "StepIndicator";
+var StepConnectorComponent = forwardRef(({
+  isCompleted,
+  orientation,
+  variant,
+  color,
+  "data-testid": dataTestId
+}, ref) => /* @__PURE__ */ jsx(
+  StepConnector,
+  {
+    ref,
+    orientation,
+    isCompleted,
+    color,
+    variant,
+    "data-testid": dataTestId
+  }
+));
+StepConnectorComponent.displayName = "StepConnector";
+var StepContentComponent = forwardRef(({
+  step,
+  index,
+  orientation,
+  interactive,
+  disabled,
+  onClick,
+  "data-testid": dataTestId
+}, ref) => {
+  const handleClick = useCallback(() => {
+    if (interactive && !disabled && onClick) {
+      onClick(index, step);
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  const handleKeyDown = useCallback((event) => {
+    if (interactive && !disabled && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      if (onClick) {
+        onClick(index, step);
+      }
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  return /* @__PURE__ */ jsxs(
+    StepContent,
+    {
+      ref,
+      orientation,
+      interactive,
+      disabled: Boolean(disabled || step.disabled),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive && !disabled && !step.disabled ? 0 : -1,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "step-title", children: step.title }),
+        step.description && /* @__PURE__ */ jsx("div", { className: "step-description", children: step.description })
+      ]
+    }
+  );
+});
+StepContentComponent.displayName = "StepContent";
+var StepItemRow = ({ orientation, isLast, children }) => /* @__PURE__ */ jsx(StepItem, { orientation, isLast, children });
+
+export {
+  StepIndicatorComponent,
+  StepConnectorComponent,
+  StepContentComponent,
+  StepItemRow
+};
+//# sourceMappingURL=chunk-OATHOXIU.js.map

package/dist/chunk-OATHOXIU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef, useCallback } from 'react';\n\nimport type { StepColors } from './WorkflowStep.helpers';\nimport { indicatorSizeFor, stepColors, stepPalette } from './WorkflowStep.helpers';\nimport type {\n  StepConnectorProps,\n  StepContentProps,\n  StepIndicatorProps,\n  WorkflowStepProps,\n} from './WorkflowStep.types';\nimport { neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// `outlined` shows the surface through a coloured rim; the other three fill it and\n// differ only in what border they keep.\nconst indicatorVariantStyles = (\n  theme: Theme,\n  variant: WorkflowStepProps['variant'],\n  { backgroundColor, borderColor, textColor }: StepColors,\n): CSSObject => {\n  if (variant === 'outlined') {\n    return {\n      border: `2px solid ${borderColor}`,\n      backgroundColor: theme.palette.background.paper,\n    };\n  }\n\n  const filled = { backgroundColor, color: textColor };\n\n  switch (variant) {\n    case 'filled':\n      return filled;\n    case 'minimal':\n      return { ...filled, border: 'none' };\n    case 'default':\n      return { ...filled, border: `1px solid ${borderColor}` };\n    default:\n      return {};\n  }\n};\n\nconst StepItem = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isLast'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n}>(({ orientation, isLast }) => ({\n  display: 'flex',\n  flexDirection: orientation === 'vertical' ? 'column' : 'row',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  flex: orientation === 'horizontal' && !isLast ? 1 : 'none',\n  position: 'relative',\n  minWidth: 0, // Allow content to shrink\n}));\n\nconst StepIndicator = styled(Box, {\n  shouldForwardProp: (prop) => !['size', 'variant', 'color', 'isActive', 'isCompleted', 'isError', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  size: WorkflowStepProps['size'];\n  variant: WorkflowStepProps['variant'];\n  color: WorkflowStepProps['color'];\n  isActive: boolean;\n  isCompleted: boolean;\n  isError: boolean;\n  interactive: boolean;\n  animated: boolean;\n  disabled: boolean;\n}>(({ theme, size, variant, color, isActive, isCompleted, isError, interactive, animated, disabled }) => {\n  const indicatorSize = indicatorSizeFor(size);\n  const palette = stepPalette(theme, color);\n  const { backgroundColor, borderColor, textColor } = stepColors(theme, palette, {\n    isActive,\n    isCompleted,\n    isError,\n    variant,\n  });\n\n  return {\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: rem(theme, 12),\n    fontWeight: theme.typography.fontWeightMedium,\n    cursor: interactive && !disabled ? 'pointer' : 'default',\n    transition: animated\n      ? theme.transitions.create(['background-color', 'border-color', 'transform'], {\n          duration: theme.transitions.duration.short,\n        })\n      : 'none',\n    flexShrink: 0,\n\n    ...indicatorVariantStyles(theme, variant, { backgroundColor, borderColor, textColor }),\n\n    // Interactive states\n    ...(interactive && !disabled && {\n      '&:hover': {\n        transform: 'scale(1.1)',\n        boxShadow: theme.shadows[2],\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${palette.main}`,\n        outlineOffset: '2px',\n      },\n    }),\n\n    // Disabled state\n    ...(disabled && {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    }),\n  };\n});\n\nconst StepContent = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  interactive: boolean;\n  disabled: boolean;\n}>(({ theme, orientation, interactive, disabled }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  textAlign: orientation === 'vertical' ? 'left' : 'center',\n  marginTop: orientation === 'vertical' ? theme.spacing(1) : theme.spacing(0.5),\n  marginLeft: orientation === 'horizontal' ? theme.spacing(1) : 0,\n  cursor: interactive && !disabled ? 'pointer' : 'default',\n  minWidth: 0,\n  flex: 1,\n\n  '& .step-title': {\n    fontSize: rem(theme, 14),\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.palette.text.primary,\n    marginBottom: theme.spacing(0.5),\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  '& .step-description': {\n    fontSize: rem(theme, 12),\n    color: theme.palette.text.secondary,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  ...(disabled && {\n    opacity: 0.5,\n  }),\n}));\n\nconst StepConnector = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isCompleted', 'color', 'variant'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isCompleted: boolean;\n  color: WorkflowStepProps['color'];\n  variant: WorkflowStepProps['variant'];\n}>(({ theme, orientation, isCompleted, color, variant }) => {\n  const colorKey = color || 'primary';\n  const colorValue = colorKey === 'neutral' \n    ? { main: neutralTones(theme).emphasis }\n    : theme.palette[colorKey as 'primary' | 'secondary' | 'success' | 'warning' | 'error'];\n  const connectorColor = isCompleted ? colorValue.main : neutralTones(theme).track;\n\n  return {\n    flex: 1,\n    position: 'relative',\n    \n    ...(orientation === 'horizontal' && {\n      height: '2px',\n      backgroundColor: connectorColor,\n      margin: `0 ${theme.spacing(1)}`,\n      minWidth: theme.spacing(2),\n    }),\n    \n    ...(orientation === 'vertical' && {\n      width: '2px',\n      backgroundColor: connectorColor,\n      minHeight: theme.spacing(3),\n      marginLeft: theme.spacing(2),\n      position: 'absolute',\n      left: '50%',\n      transform: 'translateX(-50%)',\n      top: '100%',\n    }),\n\n    transition: theme.transitions.create('background-color', {\n      duration: theme.transitions.duration.short,\n    }),\n\n    ...(variant === 'minimal' && {\n      opacity: 0.6,\n    }),\n  };\n});\n\n/**\n * Individual step indicator component\n */\nconst StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({\n  step,\n  index,\n  isActive,\n  isCompleted,\n  isError,\n  variant,\n  color,\n  size,\n  showNumbers,\n  showIcons,\n  completedIcon,\n  errorIcon,\n  interactive,\n  animated,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const renderIndicatorContent = () => {\n    if (isError && errorIcon) {\n      return errorIcon;\n    }\n    if (isCompleted && completedIcon) {\n      return completedIcon;\n    }\n    if (showIcons && step.icon) {\n      return step.icon;\n    }\n    if (showNumbers) {\n      return index + 1;\n    }\n    return null;\n  };\n\n  return (\n    <StepIndicator\n      ref={ref}\n      size={size}\n      variant={variant}\n      color={color}\n      isActive={isActive}\n      isCompleted={isCompleted}\n      isError={isError}\n      interactive={interactive}\n      animated={animated}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      aria-label={`Step ${index + 1}: ${step.title}`}\n      aria-current={isActive ? 'step' : undefined}\n      data-testid={dataTestId}\n    >\n      {renderIndicatorContent()}\n    </StepIndicator>\n  );\n});\n\nStepIndicatorComponent.displayName = 'StepIndicator';\n\n/**\n * Step connector component\n */\nconst StepConnectorComponent = forwardRef<HTMLDivElement, StepConnectorProps>(({\n  isCompleted,\n  orientation,\n  variant,\n  color,\n  'data-testid': dataTestId,\n}, ref) => (\n  <StepConnector\n    ref={ref}\n    orientation={orientation}\n    isCompleted={isCompleted}\n    color={color}\n    variant={variant}\n    data-testid={dataTestId}\n  />\n));\n\nStepConnectorComponent.displayName = 'StepConnector';\n\n/**\n * Step content component\n */\nconst StepContentComponent = forwardRef<HTMLDivElement, StepContentProps>(({\n  step,\n  index,\n  orientation,\n  interactive,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  return (\n    <StepContent\n      ref={ref}\n      orientation={orientation}\n      interactive={interactive}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      data-testid={dataTestId}\n    >\n      <div className=\"step-title\">{step.title}</div>\n      {step.description && (\n        <div className=\"step-description\">{step.description}</div>\n      )}\n    </StepContent>\n  );\n});\n\nStepContentComponent.displayName = 'StepContent';\n\n/**\n * A plain wrapper around the styled row. Exporting the styled component itself\n * trips TS2742 — its inferred type names a pnpm-internal @mui/system path.\n */\nexport const StepItemRow: React.FC<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n  children: React.ReactNode;\n}> = ({ orientation, isLast, children }) => (\n  <StepItem orientation={orientation} isLast={isLast}>\n    {children}\n  </StepItem>\n);\n\nexport { StepConnectorComponent, StepContentComponent, StepIndicatorComponent };\n"],"mappings":"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","names":[]}

package/dist/chunk-ODFJTEIL.js

@@ -0,0 +1,86 @@
+import {
+  MARKER_PIXELS_PER_DEGREE
+} from "./chunk-H2J2MTRE.js";
+import {
+  bounceKeyframes
+} from "./chunk-X6AIKCAV.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapMarkers.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CoordinatesDisplay = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  bottom: theme.spacing(2),
+  left: theme.spacing(2),
+  padding: theme.spacing(1, 1.5),
+  background: alpha(theme.palette.background.paper, 0.95),
+  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
+}));
+var MapMarkers = ({ markers, centre, animated }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Fragment, { children: markers.map((markerItem, index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": `map-marker-${index}`,
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: `translate(
+              ${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"
+      },
+      onClick: markerItem.onClick,
+      title: markerItem.title,
+      children: /* @__PURE__ */ jsx(Tooltip, { title: markerItem.description || markerItem.title || "", children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: rem(theme, 32),
+            color: theme.palette.error.main,
+            filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,
+            animation: animated ? "bounce 2s infinite" : "none",
+            "@keyframes bounce": bounceKeyframes(theme)
+          }
+        }
+      ) })
+    },
+    `${markerItem.position.lat}-${markerItem.position.lng}-${index}`
+  )) });
+};
+var MapCoordinates = ({ position, zoom }) => /* @__PURE__ */ jsxs(CoordinatesDisplay, { "data-testid": "coordinates-display", children: [
+  /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace" }, children: [
+    "Lat: ",
+    position.lat.toFixed(6),
+    ", Lng: ",
+    position.lng.toFixed(6)
+  ] }),
+  zoom > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace", display: "block" }, children: [
+    "Zoom: ",
+    zoom
+  ] })
+] });
+
+export {
+  MapMarkers,
+  MapCoordinates
+};
+//# 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":[]}