@12-apps/ui 6.35.0 → 6.37.0

package/src/components/form/Textarea/Textarea.tsx

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box/index.js';
 import FormHelperText from '@mui/material/FormHelperText/index.js';
 import InputLabel from '@mui/material/InputLabel/index.js';
 import TextareaAutosize from '@mui/material/TextareaAutosize/index.js';
-import { alpha, styled } from '@mui/material/styles/index.js';
+import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React, { lazy, Suspense, useState } from 'react';
 
@@ -33,7 +33,7 @@ import type { TextareaProps } from './Textarea.types';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 // Interface for styled component props
 interface StyledTextareaProps {
@@ -66,11 +66,11 @@ const StyledTextarea = styled(TextareaAutosize, {
   const errorColor = theme.palette.error;
 
   const sizeMap = {
-    xs: { padding: '6px 8px', fontSize: rem(theme, 12), minHeight: '60px' },
-    sm: { padding: '8px 10px', fontSize: rem(theme, 14), minHeight: '80px' },
-    md: { padding: '10px 12px', fontSize: rem(theme, 16), minHeight: '100px' },
-    lg: { padding: '12px 14px', fontSize: rem(theme, 18), minHeight: '120px' },
-    xl: { padding: '14px 16px', fontSize: rem(theme, 20), minHeight: '140px' } };
+    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },
+    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },
+    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },
+    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },
+    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) } };
 
   const baseStyles = {
     width: '100%',
@@ -97,7 +97,7 @@ const StyledTextarea = styled(TextareaAutosize, {
     '&:focus': {
       borderColor: error ? errorColor.main : colorPalette.main,
       backgroundColor: theme.palette.background.paper,
-      boxShadow: `inset 0 0 0 1px ${error ? errorColor.main : colorPalette.main}, 0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
 
   // Glass morphism effect
   return {
@@ -112,9 +112,9 @@ const StyledLabel = styled(InputLabel, {
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...(glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(10px)',
-    padding: '4px 8px',
-    borderRadius: '4px',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 4, 8),
+    borderRadius: rem(theme, 4),
     border: `1px solid ${fieldEdge(theme)}`,
     display: 'inline-block' }) }));
 
@@ -133,8 +133,6 @@ const StyledLabel = styled(InputLabel, {
 
 // Rich text toolbar styling
 
-const ICON_GUTTER = '40px';
-
 const TEXTAREA_DEFAULTS = {
   variant: 'default',
   color: 'primary',
@@ -191,8 +189,8 @@ const TextareaIcon: React.FC<{
   <Box
     sx={{
       position: 'absolute',
-      top: '12px',
-      ...(iconPosition === 'start' ? { left: '12px' } : { right: '12px' }),
+      top: sxRem(12),
+      ...(iconPosition === 'start' ? { left: sxRem(12) } : { right: sxRem(12) }),
       color: 'text.secondary',
       pointerEvents: 'none',
       zIndex: 1 }}
@@ -229,6 +227,19 @@ function RichVariant({
   );
 }
 
+// Same gap either side; only which side it applies to changes. The previous
+// version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
+// two branches were identical. The icon's gutter is 40px at the design scale.
+function withIconGutter(
+  theme: Theme,
+  style: React.CSSProperties | undefined,
+  hasIcon: boolean,
+  iconPosition: TextareaProps['iconPosition'],
+): React.CSSProperties {
+  if (!hasIcon) return { ...style };
+  return { ...style, [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: rem(theme, 40) };
+}
+
 export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   const {
     variant,
@@ -255,17 +266,12 @@ export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   // key to optional, which would lose what the variant union already proved.
   const { richEditorCopy } = textareaProps;
 
+  const theme = useTheme();
   const [richTextValue, setRichTextValue] = useState('');
   const hasIcon = Boolean(icon);
   const testId = dataTestId || dataTestIdCamelCase;
 
-  const textareaStyle = {
-    ...style,
-    // Same gap either side; only which side it applies to changes. The previous
-    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
-    // two branches were identical.
-    ...(hasIcon && {
-      [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: ICON_GUTTER }) };
+  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);
 
   // If rich text variant, use the rich text editor
   if (variant === 'rich' && richEditorCopy) {

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -22,7 +22,7 @@ import type { RichEditorToolbarCopy } from '../../../copy';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
@@ -33,9 +33,9 @@ const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   background: glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
   ...(glass && {
-    backdropFilter: 'blur(15px)' }),
+    backdropFilter: `blur(${rem(theme, 15)})` }),
   '& .MuiDivider-root': {
-    height: 24,
+    height: rem(theme, 24),
     margin: `0 ${theme.spacing(1)}` } }));
 
 const ToolbarButton = styled(IconButton, {
@@ -63,8 +63,8 @@ const ToolbarButton = styled(IconButton, {
   '&:hover': {
     color: theme.palette.primary.main,
     backgroundColor: alpha(theme.palette.primary.main, 0.15),
-    transform: 'translateY(-1px)',
-    animation: `${floatAnimation} 1.5s ease-in-out infinite`,
+    transform: `translateY(${rem(theme, -1)})`,
+    animation: `${floatAnimation(theme)} 1.5s ease-in-out infinite`,
 
     '&::before': {
       width: '100%',
@@ -87,10 +87,10 @@ const CharacterCount = styled(Box)<{ limit?: number; count: number }>(({ theme,
       : isWarning
         ? theme.palette.warning.main
         : theme.palette.text.secondary,
-    padding: '2px 6px',
+    padding: rems(theme, 2, 6),
     borderRadius: theme.spacing(0.5),
     backgroundColor: alpha(theme.palette.background.paper, 0.8),
-    backdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
     transition: 'all 0.3s ease' };
 });
 
@@ -108,7 +108,7 @@ const ContentEditableDiv = styled('div')<{
   const engaged = error ? errorColor.main : colorPalette.main;
 
   return {
-    minHeight: '120px',
+    minHeight: rem(theme, 120),
     padding: theme.spacing(1.5),
     borderRadius: `0 0 ${fieldRadius(theme)}px ${fieldRadius(theme)}px`,
     border: `${FIELD_BORDER_WIDTH}px solid ${error || focused ? engaged : fieldEdge(theme)}`,
@@ -125,7 +125,7 @@ const ContentEditableDiv = styled('div')<{
     cursor: 'text',
 
     ...(glass && {
-      backdropFilter: 'blur(20px)' }),
+      backdropFilter: `blur(${rem(theme, 20)})` }),
 
     '&:hover': {
       backgroundColor: glass
@@ -136,7 +136,7 @@ const ContentEditableDiv = styled('div')<{
     // moves), as every other field's does, under the halo.
     '&:focus': {
       borderColor: engaged,
-      boxShadow: `inset 0 0 0 1px ${engaged}, 0 0 0 3px ${alpha(engaged, 0.1)}` },
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${engaged}, 0 0 0 ${rem(theme, 3)} ${alpha(engaged, 0.1)}` },
 
     '& > *': {
       margin: '0.5em 0' },

package/src/components/form/Toggle/Toggle.styles.ts

@@ -4,17 +4,17 @@ import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
-const glowAnimation = keyframes`
-  0% { box-shadow: 0 0 5px currentColor; }
-  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
-  100% { box-shadow: 0 0 5px currentColor; }
+const glowAnimation = (theme: Theme) => keyframes`
+  0% { box-shadow: 0 0 ${rem(theme, 5)} currentColor; }
+  50% { box-shadow: 0 0 ${rem(theme, 15)} currentColor, 0 0 ${rem(theme, 25)} currentColor; }
+  100% { box-shadow: 0 0 ${rem(theme, 5)} currentColor; }
 `;
 
-const floatAnimation = keyframes`
+const floatAnimation = (theme: Theme) => keyframes`
   0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-2px); }
+  50% { transform: translateY(${rem(theme, -2)}); }
 `;
 
 interface TogglePalette {
@@ -57,18 +57,21 @@ export const getColorFromTheme = (theme: Theme, color: string): TogglePalette =>
   };
 };
 
-/** Each size's padding and type; the type is design px, read through the type scale. */
-const SIZE_MAP: Record<string, { padding: string; fontPx: number }> = {
-  xs: { padding: '4px 8px', fontPx: 12 },
-  sm: { padding: '6px 12px', fontPx: 14 },
-  md: { padding: '8px 16px', fontPx: 16 },
-  lg: { padding: '10px 20px', fontPx: 18 },
-  xl: { padding: '12px 24px', fontPx: 20 },
+/**
+ * Each size's padding (vertical, horizontal) and type, in design px, read
+ * through the type scale.
+ */
+const SIZE_MAP: Record<string, { paddingPx: readonly [number, number]; fontPx: number }> = {
+  xs: { paddingPx: [4, 8], fontPx: 12 },
+  sm: { paddingPx: [6, 12], fontPx: 14 },
+  md: { paddingPx: [8, 16], fontPx: 16 },
+  lg: { paddingPx: [10, 20], fontPx: 18 },
+  xl: { paddingPx: [12, 24], fontPx: 20 },
 };
 
 const sizeStyles = (theme: Theme, customSize: string): CSSObject => {
   const size = SIZE_MAP[customSize];
-  return size ? { padding: size.padding, fontSize: rem(theme, size.fontPx) } : {};
+  return size ? { padding: rems(theme, ...size.paddingPx), fontSize: rem(theme, size.fontPx) } : {};
 };
 
 export const baseStyles = (
@@ -103,9 +106,9 @@ export const baseStyles = (
   '&:hover': {
     backgroundColor: alpha(colorPalette.main, 0.08),
     borderColor: colorPalette.main,
-    transform: 'translateY(-1px)',
-    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
-    animation: `${floatAnimation} 2s ease-in-out infinite`,
+    transform: `translateY(${rem(theme, -1)})`,
+    boxShadow: `0 ${rems(theme, 4, 8)} ${alpha(colorPalette.main, 0.15)}`,
+    animation: `${floatAnimation(theme)} 2s ease-in-out infinite`,
 
     '&::before': {
       width: '100%',
@@ -121,7 +124,7 @@ export const baseStyles = (
     backgroundColor: colorPalette.main,
     color: colorPalette.contrastText || absoluteInk(theme).white,
     borderColor: colorPalette.main,
-    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
+    boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(colorPalette.main, 0.3)}`,
 
     '&::after': {
       content: '""',
@@ -136,8 +139,8 @@ export const baseStyles = (
 
     '&:hover': {
       backgroundColor: colorPalette.dark,
-      transform: 'translateY(-2px) scale(1.02)',
-      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,
+      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
+      boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(colorPalette.main, 0.4)}`,
     },
   },
 
@@ -158,7 +161,7 @@ export const variantStyles = (
     case 'outline':
       return {
         backgroundColor: 'transparent',
-        border: `2px solid ${colorPalette.main}`,
+        border: `${rem(theme, 2)} solid ${colorPalette.main}`,
         color: colorPalette.main,
 
         '&.Mui-selected': {
@@ -197,7 +200,7 @@ export const effectStyles = (
 ): CSSObject => ({
   ...(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)}`,
   }),
 
@@ -205,7 +208,7 @@ export const effectStyles = (
     '&.Mui-selected': {
       background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
       backgroundSize: '200% 200%',
-      animation: `${floatAnimation} 3s ease-in-out infinite`,
+      animation: `${floatAnimation(theme)} 3s ease-in-out infinite`,
       border: 'none',
 
       '&:hover': {
@@ -216,8 +219,8 @@ export const effectStyles = (
 
   ...(glow && {
     '&.Mui-selected': {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 15)} ${alpha(colorPalette.main, 0.6)}`,
     },
   }),
 });

package/src/components/form/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
 import ToggleButton from '@mui/material/ToggleButton/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import {
@@ -10,6 +10,8 @@ import {
 } from './Toggle.styles';
 import type { ToggleProps } from './Toggle.types';
 
+import { rem } from '../../../tokens/relative';
+
 const StyledToggle = styled(ToggleButton, {
   shouldForwardProp: (prop) =>
     !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient'].includes(
@@ -56,6 +58,7 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
     },
     ref,
   ) => {
+    const theme = useTheme();
     const testIds = {
       container: dataTestId,
       icon: dataTestId ? `${dataTestId}-icon` : undefined,
@@ -75,7 +78,7 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
       >
         {icon && (
           <span
-            style={{ marginRight: children ? '8px' : '0' }}
+            style={{ marginRight: children ? rem(theme, 8) : '0' }}
             data-testid={testIds.icon}
           >
             {icon}

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -6,14 +6,14 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import type { ToggleGroupProps } from './ToggleGroup.types';
-import { cssLengthToPx } from '../../../tokens/css-units';
-import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
+import { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { controlNeutral } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, remPx, rems } from '../../../tokens/relative';
+import { cssLengthToPx } from '../../../tokens/css-units';
 
-const GLASS_PADDING = 4;
-const GLASS_BORDER = 1;
+/** The glass frame's padding (4px at the design scale); its border is the field hairline. */
+const glassPadding = (theme: Theme): string => rem(theme, 4);
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -41,6 +41,10 @@ const getColorFromTheme = (theme: Theme, color: string) => {
   };
 };
 
+/** The glass frame's radius: the field radius plus its padding, the buttons' margin and its border. */
+const glassFrameRadius = (theme: Theme): number =>
+  fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;
+
 const StyledToggleGroup = styled(ToggleButtonGroup, {
   shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),
 })<{
@@ -52,13 +56,12 @@ const StyledToggleGroup = styled(ToggleButtonGroup, {
   // around them is inset by its padding, the buttons' margin and its border,
   // and rounds by that much more so the two corners stay concentric.
   const radius = fieldRadius(theme);
-  const inset = GLASS_PADDING + cssLengthToPx(theme.spacing(0.5), 4) + GLASS_BORDER;
   return {
     backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',
-    backdropFilter: glass ? 'blur(20px)' : 'none',
-    borderRadius: glass ? radius + inset : radius,
-    padding: glass ? GLASS_PADDING : 0,
-    border: glass ? `${GLASS_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',
+    borderRadius: glass ? glassFrameRadius(theme) : radius,
+    padding: glass ? glassPadding(theme) : 0,
+    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
 
     '& .MuiToggleButtonGroup-grouped': {
       margin: theme.spacing(0.5),
@@ -88,11 +91,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     const colorPalette = getColorFromTheme(theme, color);
 
     const sizeMap = {
-      xs: { padding: '4px 8px', fontSize: rem(theme, 12) },
-      sm: { padding: '6px 12px', fontSize: rem(theme, 14) },
-      md: { padding: '8px 16px', fontSize: rem(theme, 16) },
-      lg: { padding: '10px 20px', fontSize: rem(theme, 18) },
-      xl: { padding: '12px 24px', fontSize: rem(theme, 20) },
+      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },
+      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },
+      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },
+      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },
+      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) },
     };
 
     return (

package/src/components/form/UploadButton/UploadButton.parts.tsx

@@ -21,7 +21,7 @@ const HOVER_TINT = 0x05 / 0xff;
 const GHOST_HOVER_TINT = 0x08 / 0xff;
 import type { UploadButtonCopy } from '../../../copy';
 import type { UploadButtonProps } from './UploadButton.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** Shared shape for the two trigger variants. */
 export interface TriggerProps {
@@ -55,7 +55,7 @@ export function UploadDropzone({
       {...drag}
       onClick={onOpen}
       sx={{
-        border: `2px dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,
+        border: `${rem(theme, 2)} dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,
         borderRadius: 2,
         padding: 3,
         textAlign: 'center',
@@ -149,6 +149,7 @@ function UploadAnnouncer({
   progress: number;
   error: string | null;
 }): React.ReactElement {
+  const theme = useTheme();
   return (
     <div
       aria-live="polite"
@@ -156,9 +157,9 @@ function UploadAnnouncer({
       className="sr-only"
       style={{
         position: 'absolute',
-        left: '-10000px',
-        width: '1px',
-        height: '1px',
+        left: rem(theme, -10000),
+        width: rem(theme, 1),
+        height: rem(theme, 1),
         overflow: 'hidden',
       }}
     >

package/dist/chunk-24NXQG5F.js

@@ -1,85 +0,0 @@
-import {
-  MARKER_PIXELS_PER_DEGREE
-} from "./chunk-H2J2MTRE.js";
-import {
-  BOUNCE_KEYFRAMES
-} from "./chunk-X4PS3E3V.js";
-import {
-  shadowInk
-} from "./chunk-FQ6UW7IY.js";
-import {
-  rem
-} 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(10px)",
-  WebkitBackdropFilter: "blur(10px)",
-  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(
-              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
-              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
-            )`,
-        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(0 2px 4px ${shadowInk(theme, 0.3)})`,
-            animation: animated ? "bounce 2s infinite" : "none",
-            "@keyframes bounce": BOUNCE_KEYFRAMES
-          }
-        }
-      ) })
-    },
-    `${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-24NXQG5F.js.map

package/dist/chunk-24NXQG5F.js.map

@@ -1 +0,0 @@
-{"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 { BOUNCE_KEYFRAMES } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem } 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(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\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              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,\n              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px\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(0 2px 4px ${shadowInk(theme, 0.3)})`,\n                animation: animated ? 'bounce 2s infinite' : 'none',\n                '@keyframes bounce': BOUNCE_KEYFRAMES,\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;AAAA,EAChB,sBAAsB;AAAA,EACtB,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,iBACN,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA,gBACjE,EAAE,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA;AAAA,QAEtE,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,yBAAyB,UAAU,OAAO,GAAG,CAAC;AAAA,YACtD,WAAW,WAAW,uBAAuB;AAAA,YAC7C,qBAAqB;AAAA,UACvB;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-2AKQPXSJ.js

@@ -1,64 +0,0 @@
-import {
-  useAutoplay,
-  useLightboxKeyboard,
-  useNavigation,
-  usePreloader,
-  useSwipe,
-  useWheelZoom,
-  useZoomState
-} from "./chunk-C6FRVGMC.js";
-
-// src/components/data-display/Lightbox/useLightbox.ts
-import { useCallback, useImperativeHandle, useState } from "react";
-var useLightbox = ({ isOpen, onClose, items, startIndex, showControls, loop, autoplay, zoomable }, ref) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const preloadImage = usePreloader();
-  const zoom = useZoomState();
-  const { currentIndex, goToIndex, next, prev } = useNavigation({
-    items,
-    loop,
-    startIndex,
-    resetZoom: zoom.resetZoom,
-    preloadImage
-  });
-  const currentItem = items[currentIndex];
-  const canZoom = Boolean(zoomable && currentItem && currentItem.type !== "video");
-  const handleWheel = useWheelZoom({ enabled: canZoom, setZoomLevel: zoom.setZoomLevel });
-  const { isAutoPlaying, setIsAutoPlaying, stopAutoplay } = useAutoplay({
-    isOpen,
-    autoplay,
-    itemCount: items.length,
-    currentIndex,
-    next
-  });
-  const close = useCallback(() => {
-    stopAutoplay();
-    onClose();
-  }, [stopAutoplay, onClose]);
-  const open = useCallback((index = 0) => goToIndex(index), [goToIndex]);
-  useImperativeHandle(ref, () => ({ open, close, next, prev, goTo: goToIndex }));
-  useLightboxKeyboard({ isOpen, showControls, autoplay, close, prev, next, setIsAutoPlaying });
-  const { handleTouchStart, handleTouchEnd } = useSwipe({ prev, next, close });
-  return {
-    currentIndex,
-    currentItem,
-    canZoom,
-    isLoading,
-    setIsLoading,
-    isAutoPlaying,
-    setIsAutoPlaying,
-    zoom,
-    handleWheel,
-    goToIndex,
-    next,
-    prev,
-    close,
-    handleTouchStart,
-    handleTouchEnd
-  };
-};
-
-export {
-  useLightbox
-};
-//# sourceMappingURL=chunk-2AKQPXSJ.js.map