@12-apps/ui 6.33.1 → 6.34.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Code/Code.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check';\nimport ContentCopy from '@mui/icons-material/ContentCopy';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React, { useState } from 'react';\n\nimport type { CodeProps } from './Code.types';\nimport { modeInk, neutralTones } from '../../../tokens/ink';\n\nconst StyledCodeContainer = styled(Box, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'copyable'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  copyable?: boolean;\n  component?: React.ElementType;\n}>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {\n  // Size mapping\n  const sizeMap = {\n    xs: { fontSize: '0.75rem', padding: '2px 4px' },\n    sm: { fontSize: '0.8125rem', padding: '3px 6px' },\n    md: { fontSize: '0.875rem', padding: '4px 8px' },\n    lg: { fontSize: '1rem', padding: '6px 12px' },\n  };\n\n  const blockSizeMap = {\n    xs: { fontSize: '0.75rem', padding: '8px 12px' },\n    sm: { fontSize: '0.8125rem', padding: '12px 16px' },\n    md: { fontSize: '0.875rem', padding: '16px 20px' },\n    lg: { fontSize: '1rem', padding: '20px 24px' },\n  };\n\n  const baseStyles = {\n    fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", \"Courier New\", monospace',\n    lineHeight: 1.5,\n    borderRadius: theme.shape.borderRadius,\n    transition: 'all 0.2s ease',\n    position: 'relative' as const,\n  };\n\n  // Variant-specific styles\n  const variantStyles = {\n    inline: {\n      ...baseStyles,\n      display: 'inline',\n      backgroundColor: alpha(theme.palette.primary.main, 0.08),\n      color: theme.palette.primary.main,\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.12)}`,\n      ...sizeMap[customSize as keyof typeof sizeMap],\n    },\n    block: {\n      ...baseStyles,\n      display: 'block',\n      backgroundColor:\n        theme.palette.mode === 'dark'\n          ? alpha(neutralTones(theme).inverseSurface, 0.95)\n          : alpha(neutralTones(theme).surface, 0.95),\n      color:\n        theme.palette.mode === 'dark' ? modeInk(theme) : theme.palette.text.primary,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      overflow: 'auto',\n      whiteSpace: 'pre' as const,\n      ...blockSizeMap[customSize as keyof typeof blockSizeMap],\n      ...(copyable && {\n        paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],\n        paddingRight: '60px',\n      }),\n    },\n    highlight: {\n      ...baseStyles,\n      display: 'block',\n      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.secondary.main, 0.1)} 100%)`,\n      color: theme.palette.text.primary,\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n      borderLeft: `4px solid ${theme.palette.primary.main}`,\n      overflow: 'auto',\n      whiteSpace: 'pre' as const,\n      ...blockSizeMap[customSize as keyof typeof blockSizeMap],\n      ...(copyable && {\n        paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],\n        paddingRight: '60px',\n      }),\n    },\n  };\n\n  return variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.inline;\n});\n\nconst StyledCode = styled('code')({\n  margin: 0,\n  padding: 0,\n  backgroundColor: 'transparent',\n  border: 'none',\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  lineHeight: 'inherit',\n  color: 'inherit',\n});\n\nconst CopyButton = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(1),\n  right: theme.spacing(1),\n  width: 32,\n  height: 32,\n  backgroundColor:\n    theme.palette.mode === 'dark'\n      ? alpha(theme.palette.background.paper, 0.8)\n      : theme.palette.background.paper,\n  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',\n  '&:hover': {\n    backgroundColor:\n      theme.palette.mode === 'dark'\n        ? alpha(theme.palette.background.paper, 0.9)\n        : neutralTones(theme).surface,\n    transform: 'scale(1.05)',\n  },\n  '& .MuiSvgIcon-root': {\n    fontSize: 16,\n  },\n}));\n\nconst LanguageLabel = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(1),\n  left: theme.spacing(2),\n  fontSize: '0.75rem',\n  fontWeight: 500,\n  color: alpha(theme.palette.text.primary, 0.6),\n  backgroundColor:\n    theme.palette.mode === 'dark'\n      ? alpha(theme.palette.background.paper, 0.8)\n      : theme.palette.background.paper,\n  padding: '2px 8px',\n  borderRadius: theme.shape.borderRadius / 2,\n  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',\n}));\n\n// Renders each source line beside a gutter number. Keys combine the line number\n// with a slice of the content and its length, so editing one line in place does\n// not reshuffle the keys of the lines around it.\nconst renderNumberedLines = (source: string) =>\n  source.split('\\n').map((line, index) => {\n    const stableKey = `line-${index + 1}-${line.slice(0, 10).replace(/\\s+/g, '')}-${line.length}`;\n\n    return (\n      <div key={stableKey} style={{ display: 'flex' }}>\n        <span\n          style={{\n            display: 'inline-block',\n            minWidth: '3em',\n            opacity: 0.5,\n            userSelect: 'none',\n            marginRight: '1em',\n            textAlign: 'right',\n          }}\n        >\n          {index + 1}\n        </span>\n        <span>{line}</span>\n      </div>\n    );\n  });\n\n// Only block-ish variants get a language label or a copy affordance.\nconst resolveCodeFlags = (\n  variant: CodeProps['variant'],\n  copyable: boolean,\n  language: CodeProps['language'],\n) => {\n  const isBlock = variant === 'block' || variant === 'highlight';\n  return {\n    isBlock,\n    showCopy: copyable && isBlock,\n    showLanguage: Boolean(language) && isBlock,\n  };\n};\n\n// Owns its own \"just copied\" flash. Keeping it here rather than inline in Code\n// means the copied/not-copied branches do not count against the main render, and\n// the flash re-renders only the button. Non-string children are still a no-op on\n// click, exactly as before.\nconst CodeCopyButton: React.FC<{ source: React.ReactNode }> = ({ source }) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    if (typeof source !== 'string') return;\n    try {\n      await navigator.clipboard.writeText(source);\n      setCopied(true);\n      window.setTimeout(() => setCopied(false), 2000);\n    } catch {\n      // Silently fail if clipboard access is denied\n    }\n  };\n\n  return (\n    <Tooltip title={copied ? 'Copied!' : 'Copy code'}>\n      <CopyButton onClick={handleCopy} size=\"small\" color={copied ? 'success' : 'default'}>\n        {copied ? <Check /> : <ContentCopy />}\n      </CopyButton>\n    </Tooltip>\n  );\n};\n\nexport const Code = React.forwardRef<HTMLElement, CodeProps>(\n  (\n    {\n      variant = 'inline',\n      language,\n      copyable = false,\n      lineNumbers = false,\n      size = 'md',\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isBlock, showCopy, showLanguage } = resolveCodeFlags(variant, copyable, language);\n\n    // Process children for line numbers if needed\n    const processedChildren = React.useMemo(() => {\n      if (!lineNumbers || !isBlock || typeof children !== 'string') {\n        return children;\n      }\n\n      return renderNumberedLines(children);\n    }, [children, lineNumbers, isBlock]);\n\n    return (\n      <StyledCodeContainer\n        ref={ref}\n        component={variant === 'inline' ? 'span' : 'div'}\n        customVariant={variant}\n        customSize={size}\n        copyable={showCopy}\n        {...props}\n      >\n        {showLanguage && <LanguageLabel>{language}</LanguageLabel>}\n\n        <StyledCode>{processedChildren}</StyledCode>\n\n        {showCopy && <CodeCopyButton source={children} />}\n      </StyledCodeContainer>\n    );\n  },\n);\n\nCode.displayName = 'Code';"],"mappings":"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","names":[]}

package/dist/chunk-2NLYGZP3.js

@@ -0,0 +1,156 @@
+import {
+  dynamicViewportHeight
+} from "./chunk-AKZWDZCZ.js";
+import {
+  scrim
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/feedback/StackedModal/StackedModal.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var STYLE_ONLY_PROPS = ["modalRole", "isAnimating", "glass", "rtl", "customMaxWidth"];
+var MAX_WIDTH_PX = {
+  xs: 444,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920
+};
+var BACKDROP_ALPHA_BY_ROLE = {
+  secondary: 0.3,
+  background: 0.1
+};
+var ANIMATION_BY_ROLE = {
+  secondary: "expandModal 300ms ease-in-out forwards",
+  primary: "contractModal 300ms ease-in-out forwards"
+};
+var KEYFRAMES = {
+  "@keyframes expandModal": {
+    from: { width: "60vw", transform: "translateX(0)" },
+    to: { width: "100vw", transform: "translateX(0)" }
+  },
+  "@keyframes contractModal": {
+    from: { width: "100vw", transform: "translateX(0)" },
+    to: { width: "60vw", transform: "translateX(0)" }
+  }
+};
+var cap = (customMaxWidth) => customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;
+var panelWidth = (share, capPx) => capPx ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` } : { width: share, maxWidth: share };
+var backdropStyles = (theme, modalRole) => ({
+  backgroundColor: scrim(theme, (modalRole && BACKDROP_ALPHA_BY_ROLE[modalRole]) ?? 0.5),
+  backdropFilter: modalRole === "primary" ? "blur(4px)" : "none"
+});
+var primaryPanelStyles = (theme, capPx) => ({
+  [theme.breakpoints.down("sm")]: panelWidth("100%", capPx),
+  [theme.breakpoints.between("sm", "lg")]: panelWidth("80vw", capPx),
+  [theme.breakpoints.up("lg")]: panelWidth("60vw", capPx),
+  "@media (min-width:2200px)": panelWidth("40vw", capPx)
+});
+var secondaryPanelStyles = () => ({
+  width: "100vw !important",
+  maxWidth: "100vw !important",
+  right: "0 !important",
+  top: "0 !important",
+  ...dynamicViewportHeight("height", "maxHeight"),
+  borderRadius: "0 !important",
+  opacity: 0.95,
+  transform: "scale(1)"
+});
+var rolePanelStyles = (theme, role, capPx) => {
+  if (role === "primary") return primaryPanelStyles(theme, capPx);
+  if (role === "secondary") return secondaryPanelStyles();
+  if (role === "background") return { display: "none" };
+  return {};
+};
+var glassStyles = (theme, glass, role) => glass && role === "primary" ? {
+  backgroundColor: alpha(theme.palette.background.paper, 0.85),
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+} : {};
+var animationStyles = (isAnimating, role) => isAnimating ? { animation: (role && ANIMATION_BY_ROLE[role]) ?? "none" } : {};
+var panelBaseStyles = (theme) => ({
+  margin: 0,
+  position: "fixed",
+  right: 0,
+  top: 0,
+  // Pinned to the DYNAMIC viewport: on iOS a `100vh` panel runs underneath the
+  // browser toolbar, which parks the tail of the scroll area (the submit row)
+  // out of reach. See `dynamicViewportHeight`.
+  ...dynamicViewportHeight("height", "maxHeight"),
+  borderRadius: 0,
+  willChange: "transform, width, border-radius",
+  transition: theme.transitions.create(
+    ["width", "max-width", "border-radius", "transform", "opacity"],
+    { duration: 300, easing: theme.transitions.easing.easeInOut }
+  )
+});
+var panelStyles = (theme, props) => {
+  const capPx = cap(props.customMaxWidth);
+  return {
+    ...panelBaseStyles(theme),
+    ...rolePanelStyles(theme, props.modalRole, capPx),
+    ...glassStyles(theme, props.glass, props.modalRole),
+    ...animationStyles(props.isAnimating, props.modalRole)
+  };
+};
+var dialogRootStyles = (theme, props) => ({
+  direction: props.rtl ? "rtl" : "ltr",
+  "& .MuiBackdrop-root": backdropStyles(theme, props.modalRole),
+  "& .MuiDialog-container": { alignItems: "flex-start", justifyContent: "flex-end" },
+  "& .MuiDialog-paper": panelStyles(theme, props),
+  ...KEYFRAMES
+});
+var titleStyles = (theme, rtl) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: theme.spacing(2, 2.5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  direction: rtl ? "rtl" : "ltr"
+});
+var titleLeftStyles = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  flex: 1
+});
+var titleRightStyles = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+});
+var loadingOverlayStyles = (theme) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: alpha(theme.palette.background.paper, 0.8),
+  zIndex: 9999
+});
+var modalContentStyles = (theme) => ({
+  padding: theme.spacing(3),
+  // MUI's DialogContent defaults to `overflow-y: auto`, but inside a panel it is
+  // NOT the element that scrolls — ModalBody above it is, and this box always
+  // ends up exactly as tall as its own content. A scroll container that never
+  // scrolls is still the containing block for every `position: sticky`
+  // descendant, so a sticky header anchored here gets zero travel and rides the
+  // content out of view: sticky, and pinned to nothing. Handing the overflow
+  // back to ModalBody makes the panel's own scroller the anchor.
+  overflowY: "visible"
+});
+
+export {
+  STYLE_ONLY_PROPS,
+  dialogRootStyles,
+  titleStyles,
+  titleLeftStyles,
+  titleRightStyles,
+  loadingOverlayStyles,
+  modalContentStyles
+};
+//# sourceMappingURL=chunk-2NLYGZP3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { scrim } from '../../../tokens/ink';\nimport { dynamicViewportHeight } from '../../../utils/viewport';\nimport type { ModalPanelRole, PanelMaxWidth } from './StackedModal.types';\n\n/** Props that drive the panel's look but must not reach the DOM. */\nexport interface PanelStyleProps {\n  modalRole?: ModalPanelRole;\n  isAnimating?: boolean;\n  glass?: boolean;\n  rtl?: boolean;\n  customMaxWidth?: PanelMaxWidth;\n}\n\n/** Style-only props, filtered out before they can land on a DOM node. */\nexport const STYLE_ONLY_PROPS = ['modalRole', 'isAnimating', 'glass', 'rtl', 'customMaxWidth'];\n\n/** MUI breakpoint names mapped to the pixel width they cap the panel at. */\nconst MAX_WIDTH_PX: Record<Exclude<PanelMaxWidth, false>, number> = {\n  xs: 444,\n  sm: 600,\n  md: 960,\n  lg: 1280,\n  xl: 1920,\n};\n\n/** The scrim's opacity behind each receding panel role. */\nconst BACKDROP_ALPHA_BY_ROLE: Partial<Record<ModalPanelRole, number>> = {\n  secondary: 0.3,\n  background: 0.1,\n};\n\nconst ANIMATION_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {\n  secondary: 'expandModal 300ms ease-in-out forwards',\n  primary: 'contractModal 300ms ease-in-out forwards',\n};\n\n// Animation endpoints use the common lg width (60vw); the role styles set the\n// exact per-breakpoint width once the animation settles.\nconst KEYFRAMES: CSSObject = {\n  '@keyframes expandModal': {\n    from: { width: '60vw', transform: 'translateX(0)' },\n    to: { width: '100vw', transform: 'translateX(0)' },\n  },\n  '@keyframes contractModal': {\n    from: { width: '100vw', transform: 'translateX(0)' },\n    to: { width: '60vw', transform: 'translateX(0)' },\n  },\n};\n\nconst cap = (customMaxWidth?: PanelMaxWidth): number | null =>\n  customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;\n\n/** One breakpoint's width: the viewport share, held under the optional px cap. */\nconst panelWidth = (share: string, capPx: number | null): CSSObject =>\n  capPx\n    ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` }\n    : { width: share, maxWidth: share };\n\nconst backdropStyles = (theme: Theme, modalRole?: ModalPanelRole): CSSObject => ({\n  backgroundColor: scrim(theme, (modalRole && BACKDROP_ALPHA_BY_ROLE[modalRole]) ?? 0.5),\n  backdropFilter: modalRole === 'primary' ? 'blur(4px)' : 'none',\n});\n\n/**\n * The top panel is viewport-aware and narrows as the screen grows: full width on\n * mobile, 80vw on tablet/small desktop, 60vw on regular desktops (lg up —\n * including ~1080p/1440p/1080-wide), and 40vw only on ultra-wide screens\n * (≥2200px) so the receding panel stays visible on huge monitors. A `maxWidth`\n * prop, when given, caps it further.\n */\nconst primaryPanelStyles = (theme: Theme, capPx: number | null): CSSObject => ({\n  [theme.breakpoints.down('sm')]: panelWidth('100%', capPx),\n  [theme.breakpoints.between('sm', 'lg')]: panelWidth('80vw', capPx),\n  [theme.breakpoints.up('lg')]: panelWidth('60vw', capPx),\n  '@media (min-width:2200px)': panelWidth('40vw', capPx),\n});\n\n/** Panels below the top one expand to full width, producing the GTM stacking effect. */\nconst secondaryPanelStyles = (): CSSObject => ({\n  width: '100vw !important',\n  maxWidth: '100vw !important',\n  right: '0 !important',\n  top: '0 !important',\n  ...dynamicViewportHeight('height', 'maxHeight'),\n  borderRadius: '0 !important',\n  opacity: 0.95,\n  transform: 'scale(1)',\n});\n\nconst rolePanelStyles = (theme: Theme, role: ModalPanelRole | undefined, capPx: number | null): CSSObject => {\n  if (role === 'primary') return primaryPanelStyles(theme, capPx);\n  if (role === 'secondary') return secondaryPanelStyles();\n  // Background modals stay mounted but hidden, for performance.\n  if (role === 'background') return { display: 'none' };\n  return {};\n};\n\nconst glassStyles = (theme: Theme, glass?: boolean, role?: ModalPanelRole): CSSObject =>\n  glass && role === 'primary'\n    ? {\n        backgroundColor: alpha(theme.palette.background.paper, 0.85),\n        backdropFilter: 'blur(10px)',\n        WebkitBackdropFilter: 'blur(10px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }\n    : {};\n\nconst animationStyles = (isAnimating?: boolean, role?: ModalPanelRole): CSSObject =>\n  isAnimating ? { animation: (role && ANIMATION_BY_ROLE[role]) ?? 'none' } : {};\n\nconst panelBaseStyles = (theme: Theme): CSSObject => ({\n  margin: 0,\n  position: 'fixed',\n  right: 0,\n  top: 0,\n  // Pinned to the DYNAMIC viewport: on iOS a `100vh` panel runs underneath the\n  // browser toolbar, which parks the tail of the scroll area (the submit row)\n  // out of reach. See `dynamicViewportHeight`.\n  ...dynamicViewportHeight('height', 'maxHeight'),\n  borderRadius: 0,\n  willChange: 'transform, width, border-radius',\n  transition: theme.transitions.create(\n    ['width', 'max-width', 'border-radius', 'transform', 'opacity'],\n    { duration: 300, easing: theme.transitions.easing.easeInOut },\n  ),\n});\n\nconst panelStyles = (theme: Theme, props: PanelStyleProps): CSSObject => {\n  const capPx = cap(props.customMaxWidth);\n  return {\n    ...panelBaseStyles(theme),\n    ...rolePanelStyles(theme, props.modalRole, capPx),\n    ...glassStyles(theme, props.glass, props.modalRole),\n    ...animationStyles(props.isAnimating, props.modalRole),\n  };\n};\n\n/** The full rule set for the sliding panel's Dialog root. */\nexport const dialogRootStyles = (theme: Theme, props: PanelStyleProps): CSSObject => ({\n  direction: props.rtl ? 'rtl' : 'ltr',\n  '& .MuiBackdrop-root': backdropStyles(theme, props.modalRole),\n  '& .MuiDialog-container': { alignItems: 'flex-start', justifyContent: 'flex-end' },\n  '& .MuiDialog-paper': panelStyles(theme, props),\n  ...KEYFRAMES,\n});\n\nexport const titleStyles = (theme: Theme, rtl?: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2.5),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  direction: rtl ? 'rtl' : 'ltr',\n});\n\nexport const titleLeftStyles = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  flex: 1,\n});\n\nexport const titleRightStyles = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n});\n\nexport const loadingOverlayStyles = (theme: Theme): CSSObject => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: alpha(theme.palette.background.paper, 0.8),\n  zIndex: 9999,\n});\n\nexport const modalContentStyles = (theme: Theme): CSSObject => ({\n  padding: theme.spacing(3),\n  // MUI's DialogContent defaults to `overflow-y: auto`, but inside a panel it is\n  // NOT the element that scrolls — ModalBody above it is, and this box always\n  // ends up exactly as tall as its own content. A scroll container that never\n  // scrolls is still the containing block for every `position: sticky`\n  // descendant, so a sticky header anchored here gets zero travel and rides the\n  // content out of view: sticky, and pinned to nothing. Handing the overflow\n  // back to ModalBody makes the panel's own scroller the anchor.\n  overflowY: 'visible',\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-2RRXQTOO.js

@@ -0,0 +1,234 @@
+import {
+  glowAnimation,
+  gradientShiftAnimation,
+  pulseAnimation
+} from "./chunk-D2HKCPEH.js";
+import {
+  absoluteInk,
+  controlNeutral,
+  onMedia,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/form/Slider/Slider.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => controlNeutral(theme);
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || absoluteInk(theme).white
+  };
+};
+var SIZES = {
+  xs: { height: 4, thumbSize: 16, markHeight: 8 },
+  sm: { height: 6, thumbSize: 18, markHeight: 10 },
+  md: { height: 8, thumbSize: 20, markHeight: 12 },
+  lg: { height: 10, thumbSize: 24, markHeight: 14 },
+  xl: { height: 12, thumbSize: 28, markHeight: 16 }
+};
+var LABEL_SCALE = {
+  xs: { fontSize: 10, box: 28, markFont: "0.65rem" },
+  sm: { fontSize: 11, box: 30, markFont: "0.7rem" }
+};
+var LABEL_DEFAULT = { fontSize: 12, box: 32, markFont: "0.75rem" };
+var trackPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, glass, customVariant } = flags;
+  const isGradientVariant = customVariant === "gradient";
+  return {
+    border: "none",
+    height: geometry.height,
+    borderRadius: geometry.height / 2,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    overflow: "hidden",
+    ...gradient && {
+      background: isGradientVariant ? `linear-gradient(90deg,
+              ${palette.light} 0%,
+              ${palette.main} 50%,
+              ${palette.dark} 100%)` : `linear-gradient(90deg, ${palette.light}, ${palette.main})`,
+      backgroundSize: "200% 100%",
+      animation: isGradientVariant ? `${gradientShiftAnimation} 3s ease infinite` : "none",
+      // A sheen that travels the filled portion while the gradient shifts.
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(90deg, transparent, ${sheen(theme, 0.2)}, transparent)`,
+        animation: `${gradientShiftAnimation} 2s linear infinite`
+      }
+    },
+    ...glow && {
+      animation: `${glowAnimation} 2s ease-in-out infinite`,
+      boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`
+    },
+    ...glass && {
+      backgroundColor: alpha(palette.main, 0.8),
+      backdropFilter: "blur(10px)",
+      border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`
+    }
+  };
+};
+var railPart = ({ theme, flags, geometry }) => ({
+  color: alpha(theme.palette.action.disabled, 0.3),
+  opacity: 1,
+  height: geometry.height,
+  borderRadius: geometry.height / 2,
+  transition: "all 0.3s ease",
+  ...flags.glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  },
+  ...flags.customVariant === "gradient" && {
+    background: `linear-gradient(90deg,
+          ${alpha(theme.palette.action.disabled, 0.2)},
+          ${alpha(theme.palette.action.disabled, 0.3)},
+          ${alpha(theme.palette.action.disabled, 0.2)})`
+  }
+});
+var thumbPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, glass } = flags;
+  return {
+    height: geometry.thumbSize,
+    width: geometry.thumbSize,
+    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,
+    border: `2px solid ${palette.main}`,
+    boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    // Sits invisible until focus or hover runs the pulse keyframes over it.
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      backgroundColor: palette.main,
+      opacity: 0
+    },
+    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
+      boxShadow: glow ? `${theme.shadows[4]}, 0 0 20px ${alpha(palette.main, 0.6)}, 0 0 0 8px ${alpha(palette.main, 0.15)}` : `${theme.shadows[4]}, 0 0 0 8px ${alpha(palette.main, 0.15)}`,
+      transform: "scale(1.15)",
+      "&::before": { animation: `${pulseAnimation} 0.6s ease-out` }
+    },
+    "&:active": { transform: "scale(1.05)" },
+    ...glass && {
+      backgroundColor: alpha(theme.palette.background.paper, 0.9),
+      backdropFilter: "blur(10px)",
+      border: `2px solid ${alpha(palette.main, 0.8)}`
+    },
+    ...gradient && {
+      background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,
+      border: "none",
+      color: onMedia(theme)
+    }
+  };
+};
+var bubbleBackground = (palette, gradient, glass) => {
+  if (gradient) return "transparent";
+  return glass ? alpha(palette.main, 0.9) : palette.main;
+};
+var bubbleTransformFor = (gradient) => {
+  const base = gradient ? "translate(50%, -150%)" : "translate(50%, -100%) rotate(-45deg)";
+  return { hidden: `${base} scale(0)`, shown: `${base} scale(1)` };
+};
+var valueLabelPart = ({ theme, flags, palette }) => {
+  const { gradient, glass, customSize } = flags;
+  const scale = LABEL_SCALE[customSize ?? ""] ?? LABEL_DEFAULT;
+  const bubbleTransform = bubbleTransformFor(Boolean(gradient));
+  return {
+    lineHeight: 1.2,
+    fontSize: scale.fontSize,
+    padding: 0,
+    width: scale.box,
+    height: scale.box,
+    borderRadius: gradient ? "8px" : "50% 50% 50% 0",
+    backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),
+    background: gradient ? `linear-gradient(135deg, ${palette.light}, ${palette.main})` : "unset",
+    backdropFilter: glass ? "blur(10px)" : "none",
+    transformOrigin: "bottom left",
+    transform: bubbleTransform.hidden,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    boxShadow: `${theme.shadows[2]}, 0 0 10px ${alpha(palette.main, 0.2)}`,
+    "&:before": { display: "none" },
+    "&.MuiSlider-valueLabelOpen": { transform: bubbleTransform.shown },
+    "& > *": { transform: gradient ? "none" : "rotate(45deg)", fontWeight: 600 }
+  };
+};
+var markPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, customVariant } = flags;
+  const isMarksVariant = customVariant === "marks";
+  const { markHeight, height } = geometry;
+  return {
+    backgroundColor: alpha(theme.palette.action.disabled, 0.5),
+    height: markHeight,
+    width: isMarksVariant ? 3 : 2,
+    // Centred on the rail rather than hanging below it.
+    marginTop: -(markHeight - height) / 2,
+    borderRadius: 1,
+    transition: "all 0.3s ease",
+    "&.MuiSlider-markActive": {
+      backgroundColor: gradient ? palette.light : palette.main,
+      width: isMarksVariant ? 4 : 2,
+      height: markHeight + 2,
+      marginTop: -(markHeight + 2 - height) / 2,
+      ...glow && { boxShadow: `0 0 8px ${alpha(palette.main, 0.5)}` }
+    }
+  };
+};
+var markLabelPart = ({ theme, flags, palette }) => ({
+  fontSize: (LABEL_SCALE[flags.customSize ?? ""] ?? LABEL_DEFAULT).markFont,
+  color: theme.palette.text.secondary,
+  marginTop: theme.spacing(1.5),
+  fontWeight: 500,
+  transition: "all 0.3s ease",
+  "&.MuiSlider-markLabelActive": {
+    color: palette.main,
+    fontWeight: 600,
+    transform: "scale(1.05)"
+  }
+});
+var sliderSx = (theme, flags) => {
+  const palette = getColorFromTheme(theme, flags.customColor ?? "primary");
+  const geometry = SIZES[flags.customSize] ?? SIZES.md;
+  const input = { theme, flags, palette, geometry };
+  return {
+    color: palette.main,
+    height: geometry.height,
+    "& .MuiSlider-track": trackPart(input),
+    "& .MuiSlider-rail": railPart(input),
+    "& .MuiSlider-thumb": thumbPart(input),
+    "& .MuiSlider-valueLabel": valueLabelPart(input),
+    "& .MuiSlider-mark": markPart(input),
+    "& .MuiSlider-markLabel": markLabelPart(input)
+  };
+};
+
+export {
+  sliderSx
+};
+//# sourceMappingURL=chunk-2RRXQTOO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Slider/Slider.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { glowAnimation, gradientShiftAnimation, pulseAnimation } from './Slider.animations';\n\nimport { absoluteInk, controlNeutral, onMedia, sheen } from '../../../tokens/ink';\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/** `danger` is this component's name for the error palette. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || absoluteInk(theme).white,\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\ninterface Geometry {\n  height: number;\n  thumbSize: number;\n  markHeight: number;\n}\n\nconst SIZES: Record<SizeKey, Geometry> = {\n  xs: { height: 4, thumbSize: 16, markHeight: 8 },\n  sm: { height: 6, thumbSize: 18, markHeight: 10 },\n  md: { height: 8, thumbSize: 20, markHeight: 12 },\n  lg: { height: 10, thumbSize: 24, markHeight: 14 },\n  xl: { height: 12, thumbSize: 28, markHeight: 16 },\n};\n\n/** The value bubble and mark labels shrink at the two smallest sizes only. */\nconst LABEL_SCALE: Record<string, { fontSize: number; box: number; markFont: string }> = {\n  xs: { fontSize: 10, box: 28, markFont: '0.65rem' },\n  sm: { fontSize: 11, box: 30, markFont: '0.7rem' },\n};\nconst LABEL_DEFAULT = { fontSize: 12, box: 32, markFont: '0.75rem' };\n\nexport interface SliderFlags {\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  customVariant?: string;\n}\n\ninterface PartInput {\n  theme: Theme;\n  flags: SliderFlags;\n  palette: ColorPalette;\n  geometry: Geometry;\n}\n\nconst trackPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, glass, customVariant } = flags;\n  const isGradientVariant = customVariant === 'gradient';\n\n  return {\n    border: 'none',\n    height: geometry.height,\n    borderRadius: geometry.height / 2,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    overflow: 'hidden',\n    ...(gradient && {\n      background: isGradientVariant\n        ? `linear-gradient(90deg,\n              ${palette.light} 0%,\n              ${palette.main} 50%,\n              ${palette.dark} 100%)`\n        : `linear-gradient(90deg, ${palette.light}, ${palette.main})`,\n      backgroundSize: '200% 100%',\n      animation: isGradientVariant ? `${gradientShiftAnimation} 3s ease infinite` : 'none',\n      // A sheen that travels the filled portion while the gradient shifts.\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: `linear-gradient(90deg, transparent, ${sheen(theme, 0.2)}, transparent)`,\n        animation: `${gradientShiftAnimation} 2s linear infinite`,\n      },\n    }),\n    ...(glow && {\n      animation: `${glowAnimation} 2s ease-in-out infinite`,\n      boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`,\n    }),\n    ...(glass && {\n      backgroundColor: alpha(palette.main, 0.8),\n      backdropFilter: 'blur(10px)',\n      border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`,\n    }),\n  };\n};\n\nconst railPart = ({ theme, flags, geometry }: PartInput): CSSObject => ({\n  color: alpha(theme.palette.action.disabled, 0.3),\n  opacity: 1,\n  height: geometry.height,\n  borderRadius: geometry.height / 2,\n  transition: 'all 0.3s ease',\n  ...(flags.glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(20px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  }),\n  ...(flags.customVariant === 'gradient' && {\n    background: `linear-gradient(90deg,\n          ${alpha(theme.palette.action.disabled, 0.2)},\n          ${alpha(theme.palette.action.disabled, 0.3)},\n          ${alpha(theme.palette.action.disabled, 0.2)})`,\n  }),\n});\n\nconst thumbPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, glass } = flags;\n\n  return {\n    height: geometry.thumbSize,\n    width: geometry.thumbSize,\n    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,\n    border: `2px solid ${palette.main}`,\n    boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    // Sits invisible until focus or hover runs the pulse keyframes over it.\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      width: '100%',\n      height: '100%',\n      borderRadius: '50%',\n      backgroundColor: palette.main,\n      opacity: 0,\n    },\n    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {\n      boxShadow: glow\n        ? `${theme.shadows[4]}, 0 0 20px ${alpha(palette.main, 0.6)}, 0 0 0 8px ${alpha(palette.main, 0.15)}`\n        : `${theme.shadows[4]}, 0 0 0 8px ${alpha(palette.main, 0.15)}`,\n      transform: 'scale(1.15)',\n      '&::before': { animation: `${pulseAnimation} 0.6s ease-out` },\n    },\n    '&:active': { transform: 'scale(1.05)' },\n    ...(glass && {\n      backgroundColor: alpha(theme.palette.background.paper, 0.9),\n      backdropFilter: 'blur(10px)',\n      border: `2px solid ${alpha(palette.main, 0.8)}`,\n    }),\n    ...(gradient && {\n      background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,\n      border: 'none',\n      color: onMedia(theme),\n    }),\n  };\n};\n\n/** Transparent under a gradient (the gradient itself paints it), else the accent. */\nconst bubbleBackground = (palette: ColorPalette, gradient: boolean, glass: boolean) => {\n  if (gradient) return 'transparent';\n  return glass ? alpha(palette.main, 0.9) : palette.main;\n};\n\n/** The bubble's closed and open transforms; only the scale differs between them. */\nconst bubbleTransformFor = (gradient: boolean) => {\n  const base = gradient ? 'translate(50%, -150%)' : 'translate(50%, -100%) rotate(-45deg)';\n  return { hidden: `${base} scale(0)`, shown: `${base} scale(1)` };\n};\n\n/**\n * The value bubble. Without `gradient` it is MUI's teardrop — a rotated square\n * with one square corner — so its contents are counter-rotated; the gradient\n * look is a plain rounded box and needs neither rotation.\n */\nconst valueLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => {\n  const { gradient, glass, customSize } = flags;\n  const scale = LABEL_SCALE[customSize ?? ''] ?? LABEL_DEFAULT;\n  const bubbleTransform = bubbleTransformFor(Boolean(gradient));\n\n  return {\n    lineHeight: 1.2,\n    fontSize: scale.fontSize,\n    padding: 0,\n    width: scale.box,\n    height: scale.box,\n    borderRadius: gradient ? '8px' : '50% 50% 50% 0',\n    backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),\n    background: gradient\n      ? `linear-gradient(135deg, ${palette.light}, ${palette.main})`\n      : 'unset',\n    backdropFilter: glass ? 'blur(10px)' : 'none',\n    transformOrigin: 'bottom left',\n    transform: bubbleTransform.hidden,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    boxShadow: `${theme.shadows[2]}, 0 0 10px ${alpha(palette.main, 0.2)}`,\n    '&:before': { display: 'none' },\n    '&.MuiSlider-valueLabelOpen': { transform: bubbleTransform.shown },\n    '& > *': { transform: gradient ? 'none' : 'rotate(45deg)', fontWeight: 600 },\n  };\n};\n\nconst markPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, customVariant } = flags;\n  const isMarksVariant = customVariant === 'marks';\n  const { markHeight, height } = geometry;\n\n  return {\n    backgroundColor: alpha(theme.palette.action.disabled, 0.5),\n    height: markHeight,\n    width: isMarksVariant ? 3 : 2,\n    // Centred on the rail rather than hanging below it.\n    marginTop: -(markHeight - height) / 2,\n    borderRadius: 1,\n    transition: 'all 0.3s ease',\n    '&.MuiSlider-markActive': {\n      backgroundColor: gradient ? palette.light : palette.main,\n      width: isMarksVariant ? 4 : 2,\n      height: markHeight + 2,\n      marginTop: -(markHeight + 2 - height) / 2,\n      ...(glow && { boxShadow: `0 0 8px ${alpha(palette.main, 0.5)}` }),\n    },\n  };\n};\n\nconst markLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => ({\n  fontSize: (LABEL_SCALE[flags.customSize ?? ''] ?? LABEL_DEFAULT).markFont,\n  color: theme.palette.text.secondary,\n  marginTop: theme.spacing(1.5),\n  fontWeight: 500,\n  transition: 'all 0.3s ease',\n  '&.MuiSlider-markLabelActive': {\n    color: palette.main,\n    fontWeight: 600,\n    transform: 'scale(1.05)',\n  },\n});\n\nexport const sliderSx = (theme: Theme, flags: SliderFlags): CSSObject => {\n  const palette = getColorFromTheme(theme, flags.customColor ?? 'primary');\n  const geometry = SIZES[flags.customSize as SizeKey] ?? SIZES.md;\n  const input: PartInput = { theme, flags, palette, geometry };\n\n  return {\n    color: palette.main,\n    height: geometry.height,\n    '& .MuiSlider-track': trackPart(input),\n    '& .MuiSlider-rail': railPart(input),\n    '& .MuiSlider-thumb': thumbPart(input),\n    '& .MuiSlider-valueLabel': valueLabelPart(input),\n    '& .MuiSlider-mark': markPart(input),\n    '& .MuiSlider-markLabel': markLabelPart(input),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-2SGPNJHJ.js

@@ -0,0 +1,170 @@
+import {
+  BOUNCE_KEYFRAMES
+} from "./chunk-X4PS3E3V.js";
+import {
+  getScaleDistance
+} from "./chunk-TUBCN4DJ.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/MapPreview/MapDecorations.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import NavigationIcon from "@mui/icons-material/Navigation";
+import PlaceIcon from "@mui/icons-material/Place";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MapRoads = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: "20%", left: "15%", width: "70%", height: "60%", opacity: 0.2 }, children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", style: { position: "absolute" }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 10,50 Q 30,30 50,50 T 90,50",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "2",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 50,10 L 50,90",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1.5",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 20,30 L 80,70",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1",
+        fill: "none",
+        opacity: "0.2"
+      }
+    )
+  ] }) });
+};
+var DecorativePin = ({ top, left }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top, left, opacity: 0.6 }, children: /* @__PURE__ */ jsx(PlaceIcon, { sx: { fontSize: 20, color: theme.palette.primary.main } }) });
+};
+var MapDecorativePins = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DecorativePin, { top: "30%", left: "25%" }),
+  /* @__PURE__ */ jsx(DecorativePin, { top: "65%", left: "70%" })
+] });
+var MapCentreMarker = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "map-marker",
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -100%)",
+        zIndex: 2,
+        filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`
+      },
+      children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: 36,
+            color: theme.palette.error.main,
+            animation: "bounce 2s infinite",
+            "@keyframes bounce": BOUNCE_KEYFRAMES
+          }
+        }
+      )
+    }
+  );
+};
+var MapScaleBar = ({ zoom }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        padding: theme.spacing(0.5, 1),
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: theme.shape.borderRadius,
+        fontSize: "0.75rem",
+        color: theme.palette.text.secondary
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: 40,
+              height: 2,
+              background: theme.palette.text.secondary,
+              position: "relative",
+              // The end caps that make the bar read as a measurement.
+              "&::before, &::after": {
+                content: '""',
+                position: "absolute",
+                width: 2,
+                height: 6,
+                background: theme.palette.text.secondary
+              },
+              "&::before": { left: 0, top: -2 },
+              "&::after": { right: 0, top: -2 }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getScaleDistance(zoom) })
+      ]
+    }
+  );
+};
+var MapCompass = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: theme.spacing(2),
+        left: theme.spacing(2),
+        width: 40,
+        height: 40,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: "50%",
+        boxShadow: theme.shadows[2]
+      },
+      children: /* @__PURE__ */ jsx(
+        NavigationIcon,
+        {
+          sx: { fontSize: 24, color: theme.palette.primary.main, transform: "rotate(-45deg)" }
+        }
+      )
+    }
+  );
+};
+
+export {
+  MapRoads,
+  MapDecorativePins,
+  MapCentreMarker,
+  MapScaleBar,
+  MapCompass
+};
+//# sourceMappingURL=chunk-2SGPNJHJ.js.map