@12-apps/ui 6.11.1 → 6.12.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts"],"sourcesContent":["import { keyframes } from '@mui/material/styles/index.js';\n\nexport const rotateAnimation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nexport const translateAnimation = keyframes`\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-8px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n`;\n\nexport const glowPulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;\n  }\n  50% {\n    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;\n  }\n  100% {\n    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;\n  }\n`;\n\n// New animation keyframes\nexport const bounceAnimation = keyframes`\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateY(0);\n  }\n  40% {\n    transform: translateY(-20px);\n  }\n  60% {\n    transform: translateY(-10px);\n  }\n`;\n\nexport const shakeAnimation = keyframes`\n  0%, 100% {\n    transform: translateX(0);\n  }\n  10%, 30%, 50%, 70%, 90% {\n    transform: translateX(-4px);\n  }\n  20%, 40%, 60%, 80% {\n    transform: translateX(4px);\n  }\n`;\n\nexport const flipAnimation = keyframes`\n  0% {\n    transform: perspective(400px) rotateY(0);\n  }\n  100% {\n    transform: perspective(400px) rotateY(360deg);\n  }\n`;\n\nexport const spinAnimation = keyframes`\n  0% {\n    transform: rotate(0deg) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) scale(1.2);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\nexport const fadeInOutAnimation = keyframes`\n  0%, 100% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 1;\n  }\n`;\n\nexport const heartbeatAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1);\n  }\n  5% {\n    transform: scale(1.25);\n  }\n  10% {\n    transform: scale(1);\n  }\n  15% {\n    transform: scale(1.25);\n  }\n  20% {\n    transform: scale(1);\n  }\n`;\n\nexport const wobbleAnimation = keyframes`\n  0%, 100% {\n    transform: translateX(0) rotate(0deg);\n  }\n  15% {\n    transform: translateX(-10px) rotate(-5deg);\n  }\n  30% {\n    transform: translateX(8px) rotate(3deg);\n  }\n  45% {\n    transform: translateX(-6px) rotate(-3deg);\n  }\n  60% {\n    transform: translateX(4px) rotate(2deg);\n  }\n  75% {\n    transform: translateX(-2px) rotate(-1deg);\n  }\n`;\n\nexport const morphAnimation = keyframes`\n  0%, 100% {\n    border-radius: 50%;\n    transform: scale(1);\n  }\n  25% {\n    border-radius: 30%;\n    transform: scale(1.1);\n  }\n  50% {\n    border-radius: 20%;\n    transform: scale(0.95);\n  }\n  75% {\n    border-radius: 40%;\n    transform: scale(1.05);\n  }\n`;\n\nexport const swingAnimation = keyframes`\n  20% {\n    transform: rotate(15deg);\n  }\n  40% {\n    transform: rotate(-10deg);\n  }\n  60% {\n    transform: rotate(5deg);\n  }\n  80% {\n    transform: rotate(-5deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n`;\n\nexport const floatAnimation = keyframes`\n  0%, 100% {\n    transform: translateY(0) translateX(0);\n  }\n  33% {\n    transform: translateY(-10px) translateX(-5px);\n  }\n  66% {\n    transform: translateY(5px) translateX(5px);\n  }\n`;\n\nexport const jelloAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(0.9, 1.1);\n  }\n  50% {\n    transform: scale(1.1, 0.9);\n  }\n  75% {\n    transform: scale(0.95, 1.05);\n  }\n`;\n\nexport const rippleAnimation = keyframes`\n  0% {\n    transform: scale(0.8);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n`;\n\nexport const neonFlickerAnimation = keyframes`\n  0%, 100% {\n    opacity: 1;\n    filter: brightness(1) drop-shadow(0 0 10px currentColor);\n  }\n  10% {\n    opacity: 0.8;\n    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);\n  }\n  20% {\n    opacity: 1;\n    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);\n  }\n  30% {\n    opacity: 0.9;\n    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);\n  }\n  40% {\n    opacity: 1;\n    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);\n  }\n  50% {\n    opacity: 0.95;\n    filter: brightness(1) drop-shadow(0 0 10px currentColor);\n  }\n  60% {\n    opacity: 0.85;\n    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);\n  }\n  70% {\n    opacity: 1;\n    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);\n  }\n  80% {\n    opacity: 0.9;\n    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);\n  }\n  90% {\n    opacity: 1;\n    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);\n  }\n`;\n\nexport const breatheAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1);\n    filter: brightness(1);\n  }\n  50% {\n    transform: scale(1.05);\n    filter: brightness(1.2);\n  }\n`;\n\n// Size configurations\n"],"mappings":";AAAA,SAAS,iBAAiB;AAEnB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3B,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAStB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYtB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkB3B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBvB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBvB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxB,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2C7B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/chunk-3TDVGZZN.js

@@ -0,0 +1,84 @@
+// src/components/layout/Resizable/Resizable.helpers.ts
+var defaultHandles = (variant) => {
+  switch (variant) {
+    case "horizontal":
+      return ["right"];
+    case "vertical":
+      return ["bottom"];
+    default:
+      return ["right", "bottom", "bottomRight"];
+  }
+};
+var HORIZONTAL_GROW = ["right", "topRight", "bottomRight"];
+var HORIZONTAL_SHRINK = ["left", "topLeft", "bottomLeft"];
+var VERTICAL_GROW = ["bottom", "bottomLeft", "bottomRight"];
+var VERTICAL_SHRINK = ["top", "topLeft", "topRight"];
+var clamp = (value, { min, max }) => Math.max(min, Math.min(max, value));
+var alongAxis = (handle, grow, shrink, start, delta, bounds) => {
+  if (grow.includes(handle)) return clamp(start + delta, bounds);
+  if (shrink.includes(handle)) return clamp(start - delta, bounds);
+  return start;
+};
+var resizedTo = (handle, delta, start, bounds) => ({
+  width: alongAxis(handle, HORIZONTAL_GROW, HORIZONTAL_SHRINK, start.width, delta.x, bounds.width),
+  height: alongAxis(
+    handle,
+    VERTICAL_GROW,
+    VERTICAL_SHRINK,
+    start.height,
+    delta.y,
+    bounds.height
+  )
+});
+var handleStyle = (theme, handle, active) => {
+  const baseStyle = {
+    position: "absolute",
+    backgroundColor: theme.palette.primary.main,
+    opacity: 0,
+    transition: theme.transitions.create("opacity"),
+    "&:hover": {
+      opacity: 0.3
+    },
+    ...active ? { opacity: 0.5 } : {}
+  };
+  switch (handle) {
+    case "right":
+      return { ...baseStyle, top: 0, right: -2, width: 4, height: "100%", cursor: "ew-resize" };
+    case "bottom":
+      return { ...baseStyle, bottom: -2, left: 0, width: "100%", height: 4, cursor: "ns-resize" };
+    case "bottomRight":
+      return {
+        ...baseStyle,
+        bottom: -2,
+        right: -2,
+        width: 8,
+        height: 8,
+        cursor: "nw-resize",
+        borderRadius: "50%"
+      };
+    default:
+      return baseStyle;
+  }
+};
+var RESIZABLE_DEFAULTS = {
+  variant: "both",
+  width: 200,
+  height: 200,
+  minWidth: 50,
+  maxWidth: 1e3,
+  minHeight: 50,
+  maxHeight: 1e3,
+  disabled: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveResizableProps = (props) => ({ ...RESIZABLE_DEFAULTS, ...definedProps(props) });
+
+export {
+  defaultHandles,
+  resizedTo,
+  handleStyle,
+  resolveResizableProps
+};
+//# sourceMappingURL=chunk-3TDVGZZN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Resizable/Resizable.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { ResizableProps, ResizableVariant, ResizeHandle } from './Resizable.types';\n\nexport interface Axis {\n  min: number;\n  max: number;\n}\n\nexport interface Bounds {\n  width: Axis;\n  height: Axis;\n}\n\nexport const defaultHandles = (variant: ResizableVariant): ResizeHandle[] => {\n  switch (variant) {\n    case 'horizontal':\n      return ['right'];\n    case 'vertical':\n      return ['bottom'];\n    default:\n      return ['right', 'bottom', 'bottomRight'];\n  }\n};\n\nconst HORIZONTAL_GROW: readonly ResizeHandle[] = ['right', 'topRight', 'bottomRight'];\nconst HORIZONTAL_SHRINK: readonly ResizeHandle[] = ['left', 'topLeft', 'bottomLeft'];\nconst VERTICAL_GROW: readonly ResizeHandle[] = ['bottom', 'bottomLeft', 'bottomRight'];\nconst VERTICAL_SHRINK: readonly ResizeHandle[] = ['top', 'topLeft', 'topRight'];\n\nconst clamp = (value: number, { min, max }: Axis): number =>\n  Math.max(min, Math.min(max, value));\n\n/**\n * A handle on the right or bottom edge grows the box by the drag distance; one on\n * the left or top shrinks it by the same amount, because the opposite edge is\n * what stays put. A handle on neither edge of this axis leaves it alone.\n */\nconst alongAxis = (\n  handle: ResizeHandle,\n  grow: readonly ResizeHandle[],\n  shrink: readonly ResizeHandle[],\n  start: number,\n  delta: number,\n  bounds: Axis,\n): number => {\n  if (grow.includes(handle)) return clamp(start + delta, bounds);\n  if (shrink.includes(handle)) return clamp(start - delta, bounds);\n  return start;\n};\n\nexport const resizedTo = (\n  handle: ResizeHandle,\n  delta: { x: number; y: number },\n  start: { width: number; height: number },\n  bounds: Bounds,\n) => ({\n  width: alongAxis(handle, HORIZONTAL_GROW, HORIZONTAL_SHRINK, start.width, delta.x, bounds.width),\n  height: alongAxis(\n    handle,\n    VERTICAL_GROW,\n    VERTICAL_SHRINK,\n    start.height,\n    delta.y,\n    bounds.height,\n  ),\n});\n\nexport const handleStyle = (theme: Theme, handle: ResizeHandle, active: boolean) => {\n  const baseStyle = {\n    position: 'absolute' as const,\n    backgroundColor: theme.palette.primary.main,\n    opacity: 0,\n    transition: theme.transitions.create('opacity'),\n    '&:hover': {\n      opacity: 0.3,\n    },\n    ...(active ? { opacity: 0.5 } : {}),\n  };\n\n  switch (handle) {\n    case 'right':\n      return { ...baseStyle, top: 0, right: -2, width: 4, height: '100%', cursor: 'ew-resize' };\n    case 'bottom':\n      return { ...baseStyle, bottom: -2, left: 0, width: '100%', height: 4, cursor: 'ns-resize' };\n    case 'bottomRight':\n      return {\n        ...baseStyle,\n        bottom: -2,\n        right: -2,\n        width: 8,\n        height: 8,\n        cursor: 'nw-resize',\n        borderRadius: '50%',\n      };\n    default:\n      return baseStyle;\n  }\n};\n\ntype ResizableDefaultedKeys =\n  | 'variant'\n  | 'width'\n  | 'height'\n  | 'minWidth'\n  | 'maxWidth'\n  | 'minHeight'\n  | 'maxHeight'\n  | 'disabled';\n\ntype ResolvedResizableProps = ResizableProps &\n  Required<Pick<ResizableProps, ResizableDefaultedKeys>>;\n\nconst RESIZABLE_DEFAULTS: Pick<ResizableProps, ResizableDefaultedKeys> = {\n  variant: 'both',\n  width: 200,\n  height: 200,\n  minWidth: 50,\n  maxWidth: 1000,\n  minHeight: 50,\n  maxHeight: 1000,\n  disabled: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `minWidth={undefined}`\n// still falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: ResizableProps): Partial<ResizableProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<ResizableProps>;\n\nexport const resolveResizableProps = (props: ResizableProps): ResolvedResizableProps =>\n  ({ ...RESIZABLE_DEFAULTS, ...definedProps(props) }) as ResolvedResizableProps;\n"],"mappings":";AAcO,IAAM,iBAAiB,CAAC,YAA8C;AAC3E,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,CAAC,OAAO;AAAA,IACjB,KAAK;AACH,aAAO,CAAC,QAAQ;AAAA,IAClB;AACE,aAAO,CAAC,SAAS,UAAU,aAAa;AAAA,EAC5C;AACF;AAEA,IAAM,kBAA2C,CAAC,SAAS,YAAY,aAAa;AACpF,IAAM,oBAA6C,CAAC,QAAQ,WAAW,YAAY;AACnF,IAAM,gBAAyC,CAAC,UAAU,cAAc,aAAa;AACrF,IAAM,kBAA2C,CAAC,OAAO,WAAW,UAAU;AAE9E,IAAM,QAAQ,CAAC,OAAe,EAAE,KAAK,IAAI,MACvC,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAOpC,IAAM,YAAY,CAChB,QACA,MACA,QACA,OACA,OACA,WACW;AACX,MAAI,KAAK,SAAS,MAAM,EAAG,QAAO,MAAM,QAAQ,OAAO,MAAM;AAC7D,MAAI,OAAO,SAAS,MAAM,EAAG,QAAO,MAAM,QAAQ,OAAO,MAAM;AAC/D,SAAO;AACT;AAEO,IAAM,YAAY,CACvB,QACA,OACA,OACA,YACI;AAAA,EACJ,OAAO,UAAU,QAAQ,iBAAiB,mBAAmB,MAAM,OAAO,MAAM,GAAG,OAAO,KAAK;AAAA,EAC/F,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,IAAM,cAAc,CAAC,OAAc,QAAsB,WAAoB;AAClF,QAAM,YAAY;AAAA,IAChB,UAAU;AAAA,IACV,iBAAiB,MAAM,QAAQ,QAAQ;AAAA,IACvC,SAAS;AAAA,IACT,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,IAC9C,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,GAAI,SAAS,EAAE,SAAS,IAAI,IAAI,CAAC;AAAA,EACnC;AAEA,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,EAAE,GAAG,WAAW,KAAK,GAAG,OAAO,IAAI,OAAO,GAAG,QAAQ,QAAQ,QAAQ,YAAY;AAAA,IAC1F,KAAK;AACH,aAAO,EAAE,GAAG,WAAW,QAAQ,IAAI,MAAM,GAAG,OAAO,QAAQ,QAAQ,GAAG,QAAQ,YAAY;AAAA,IAC5F,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,cAAc;AAAA,MAChB;AAAA,IACF;AACE,aAAO;AAAA,EACX;AACF;AAeA,IAAM,qBAAmE;AAAA,EACvE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AACZ;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,wBAAwB,CAAC,WACnC,EAAE,GAAG,oBAAoB,GAAG,aAAa,KAAK,EAAE;","names":[]}

package/dist/chunk-4BIK7QYT.js

@@ -0,0 +1,56 @@
+import {
+  transitionDuration,
+  transitionEasing
+} from "./chunk-AVPINHNV.js";
+
+// src/components/utility/Transition/Transition.tsx
+import Collapse from "@mui/material/Collapse/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Grow from "@mui/material/Grow/index.js";
+import Slide from "@mui/material/Slide/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var Transition = ({
+  children,
+  variant = "fade",
+  direction = "up",
+  duration,
+  delay = 0,
+  easing,
+  in: inProp,
+  ...props
+}) => {
+  const theme = useTheme();
+  const transitionProps = {
+    in: inProp,
+    timeout: transitionDuration(theme, variant, duration),
+    easing: transitionEasing(theme, variant, easing),
+    unmountOnExit: true,
+    style: {
+      transitionDelay: `${delay}ms`
+    },
+    ...props
+  };
+  const content = /* @__PURE__ */ jsx("div", { "data-testid": "transition-element", children: /* @__PURE__ */ jsx("div", { "data-testid": "transition-content", children }) });
+  switch (variant) {
+    case "fade":
+      return /* @__PURE__ */ jsx(Fade, { ...transitionProps, "data-testid": "transition-wrapper", children: content });
+    case "slide":
+      return /* @__PURE__ */ jsx(Slide, { direction, ...transitionProps, "data-testid": "transition-wrapper", children: content });
+    case "scale":
+    case "grow":
+      return /* @__PURE__ */ jsx(Grow, { ...transitionProps, "data-testid": "transition-wrapper", children: content });
+    case "collapse":
+      return /* @__PURE__ */ jsx(Collapse, { ...transitionProps, "data-testid": "transition-wrapper", children: content });
+    case "zoom":
+      return /* @__PURE__ */ jsx(Zoom, { ...transitionProps, "data-testid": "transition-wrapper", children: content });
+    default:
+      return /* @__PURE__ */ jsx(Fade, { ...transitionProps, "data-testid": "transition-wrapper", children: content });
+  }
+};
+
+export {
+  Transition
+};
+//# sourceMappingURL=chunk-4BIK7QYT.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/Transition/Transition.tsx"],"sourcesContent":["import Collapse from '@mui/material/Collapse/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Grow from '@mui/material/Grow/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Zoom from '@mui/material/Zoom/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { transitionDuration, transitionEasing } from './Transition.helpers';\nimport type { CustomTransitionProps } from './Transition.types';\n\nexport const Transition: React.FC<CustomTransitionProps> = ({\n  children,\n  variant = 'fade',\n  direction = 'up',\n  duration,\n  delay = 0,\n  easing,\n  in: inProp,\n  ...props\n}) => {\n  const theme = useTheme();\n\n  const transitionProps = {\n    in: inProp,\n    timeout: transitionDuration(theme, variant, duration),\n    easing: transitionEasing(theme, variant, easing),\n    unmountOnExit: true,\n    style: {\n      transitionDelay: `${delay}ms`,\n    },\n    ...props,\n  };\n\n  // Every variant wraps the same three-deep structure; only the MUI transition\n  // component differs.\n  const content = (\n    <div data-testid=\"transition-element\">\n      <div data-testid=\"transition-content\">{children}</div>\n    </div>\n  );\n\n  switch (variant) {\n    case 'fade':\n      return (\n        <Fade {...transitionProps} data-testid=\"transition-wrapper\">\n          {content}\n        </Fade>\n      );\n\n    case 'slide':\n      return (\n        <Slide direction={direction} {...transitionProps} data-testid=\"transition-wrapper\">\n          {content}\n        </Slide>\n      );\n\n    case 'scale':\n    case 'grow':\n      return (\n        <Grow {...transitionProps} data-testid=\"transition-wrapper\">\n          {content}\n        </Grow>\n      );\n\n    case 'collapse':\n      return (\n        <Collapse {...transitionProps} data-testid=\"transition-wrapper\">\n          {content}\n        </Collapse>\n      );\n\n    case 'zoom':\n      return (\n        <Zoom {...transitionProps} data-testid=\"transition-wrapper\">\n          {content}\n        </Zoom>\n      );\n\n    default:\n      return (\n        <Fade {...transitionProps} data-testid=\"transition-wrapper\">\n          {content}\n        </Fade>\n      );\n  }\n};"],"mappings":";;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,gBAAgB;AAiCnB;AA3BC,IAAM,aAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,QAAM,kBAAkB;AAAA,IACtB,IAAI;AAAA,IACJ,SAAS,mBAAmB,OAAO,SAAS,QAAQ;AAAA,IACpD,QAAQ,iBAAiB,OAAO,SAAS,MAAM;AAAA,IAC/C,eAAe;AAAA,IACf,OAAO;AAAA,MACL,iBAAiB,GAAG,KAAK;AAAA,IAC3B;AAAA,IACA,GAAG;AAAA,EACL;AAIA,QAAM,UACJ,oBAAC,SAAI,eAAY,sBACf,8BAAC,SAAI,eAAY,sBAAsB,UAAS,GAClD;AAGF,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aACE,oBAAC,QAAM,GAAG,iBAAiB,eAAY,sBACpC,mBACH;AAAA,IAGJ,KAAK;AACH,aACE,oBAAC,SAAM,WAAuB,GAAG,iBAAiB,eAAY,sBAC3D,mBACH;AAAA,IAGJ,KAAK;AAAA,IACL,KAAK;AACH,aACE,oBAAC,QAAM,GAAG,iBAAiB,eAAY,sBACpC,mBACH;AAAA,IAGJ,KAAK;AACH,aACE,oBAAC,YAAU,GAAG,iBAAiB,eAAY,sBACxC,mBACH;AAAA,IAGJ,KAAK;AACH,aACE,oBAAC,QAAM,GAAG,iBAAiB,eAAY,sBACpC,mBACH;AAAA,IAGJ;AACE,aACE,oBAAC,QAAM,GAAG,iBAAiB,eAAY,sBACpC,mBACH;AAAA,EAEN;AACF;","names":[]}

package/dist/chunk-4ETQRBZC.js

@@ -0,0 +1,189 @@
+import {
+  geocode
+} from "./chunk-TUBCN4DJ.js";
+import {
+  CITY_ZOOM,
+  CLICK_JITTER_DEGREES,
+  DRAG_DEGREES_PER_PIXEL,
+  MAP_TYPES,
+  MAX_ZOOM,
+  MIN_ZOOM
+} from "./chunk-H2J2MTRE.js";
+
+// src/components/data-display/MapPreview/MapPreview.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var ORIGIN = { x: 0, y: 0 };
+var useMapView = ({
+  coordinates,
+  initialZoom,
+  initialMapType
+}) => {
+  const [zoom, setZoom] = useState(initialZoom);
+  const [mapType, setMapType] = useState(initialMapType);
+  const [markerPosition, setMarkerPosition] = useState(coordinates);
+  const [panOffset, setPanOffset] = useState(ORIGIN);
+  useEffect(() => {
+    setMarkerPosition(coordinates);
+  }, [coordinates]);
+  const zoomTo = useCallback((next) => {
+    setZoom(next);
+    setPanOffset(ORIGIN);
+  }, []);
+  return {
+    zoom,
+    zoomTo,
+    mapType,
+    setMapType,
+    markerPosition,
+    setMarkerPosition,
+    panOffset,
+    setPanOffset
+  };
+};
+var useMapControls = ({
+  coordinates,
+  zoom,
+  mapType,
+  zoomTo,
+  setMapType,
+  setMarkerPosition,
+  setPanOffset,
+  containerRef
+}) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const handleZoomIn = useCallback(() => zoomTo(Math.min(zoom + 1, MAX_ZOOM)), [zoom, zoomTo]);
+  const handleZoomOut = useCallback(() => zoomTo(Math.max(zoom - 1, MIN_ZOOM)), [zoom, zoomTo]);
+  const handleCenter = useCallback(() => {
+    setMarkerPosition({ ...coordinates });
+    setPanOffset(ORIGIN);
+  }, [coordinates, setMarkerPosition, setPanOffset]);
+  const handleToggleMapType = useCallback(() => {
+    const nextIndex = (MAP_TYPES.indexOf(mapType) + 1) % MAP_TYPES.length;
+    setMapType(MAP_TYPES[nextIndex]);
+  }, [mapType, setMapType]);
+  const handleToggleFullscreen = useCallback(() => {
+    if (!isFullscreen && containerRef.current) {
+      containerRef.current.requestFullscreen?.();
+    } else if (document.fullscreenElement) {
+      document.exitFullscreen?.();
+    }
+    setIsFullscreen((prev) => !prev);
+  }, [isFullscreen, containerRef]);
+  return {
+    isFullscreen,
+    handleZoomIn,
+    handleZoomOut,
+    handleCenter,
+    handleToggleMapType,
+    handleToggleFullscreen
+  };
+};
+var isOnMapSurface = (target) => target.dataset.testid === "static-map-view" || Boolean(target.closest('[data-testid="static-map-view"]'));
+var panTo = (event, start) => ({
+  x: start.offsetX + (event.clientX - start.x),
+  y: start.offsetY + (event.clientY - start.y)
+});
+var dragTo = (event, start) => ({
+  lat: start.lat + (event.clientY - start.y) * DRAG_DEGREES_PER_PIXEL,
+  lng: start.lng + (event.clientX - start.x) * DRAG_DEGREES_PER_PIXEL
+});
+var useMapPointer = ({
+  interactive,
+  markerPosition,
+  panOffset,
+  onMarkerDrag,
+  setMarkerPosition,
+  setPanOffset
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const dragStartRef = useRef(null);
+  const panStartRef = useRef(null);
+  const handleMouseDown = useCallback(
+    (event) => {
+      if (!interactive) return;
+      const { clientX: x, clientY: y } = event;
+      if (isOnMapSurface(event.target) && event.shiftKey) {
+        setIsPanning(true);
+        panStartRef.current = { x, y, offsetX: panOffset.x, offsetY: panOffset.y };
+        return;
+      }
+      setIsDragging(true);
+      dragStartRef.current = { x, y, lat: markerPosition.lat, lng: markerPosition.lng };
+    },
+    [interactive, markerPosition, panOffset]
+  );
+  const handleMouseMove = useCallback(
+    (event) => {
+      const panStart = panStartRef.current;
+      if (isPanning && panStart) {
+        setPanOffset(panTo(event, panStart));
+        return;
+      }
+      const dragStart = dragStartRef.current;
+      if (!isDragging || !dragStart) return;
+      const position = dragTo(event, dragStart);
+      setMarkerPosition(position);
+      onMarkerDrag?.(position);
+    },
+    [isDragging, isPanning, onMarkerDrag, setMarkerPosition, setPanOffset]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsPanning(false);
+    dragStartRef.current = null;
+    panStartRef.current = null;
+  }, []);
+  return { isDragging, isPanning, handleMouseDown, handleMouseMove, handleMouseUp };
+};
+var useMapSearch = ({
+  zoomTo,
+  setMarkerPosition
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const handleSearch = useCallback(
+    async (event) => {
+      if (event.key !== "Enter" || !searchValue) return;
+      setIsSearching(true);
+      try {
+        const result = await geocode(searchValue);
+        if (!result) return;
+        setMarkerPosition({ ...result });
+        zoomTo(CITY_ZOOM);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchValue, zoomTo, setMarkerPosition]
+  );
+  return { searchValue, setSearchValue, isSearching, handleSearch };
+};
+var useMapClick = ({
+  coordinates,
+  interactive,
+  isPanning,
+  onMapClick,
+  onMarkerDrag,
+  setMarkerPosition
+}) => useCallback(() => {
+  if (isPanning) return;
+  const coords = {
+    lat: coordinates.lat + (Math.random() - 0.5) * CLICK_JITTER_DEGREES,
+    lng: coordinates.lng + (Math.random() - 0.5) * CLICK_JITTER_DEGREES
+  };
+  onMapClick?.(coords.lat, coords.lng);
+  if (interactive && onMarkerDrag) {
+    setMarkerPosition(coords);
+    onMarkerDrag(coords);
+  }
+}, [coordinates, interactive, isPanning, onMapClick, onMarkerDrag, setMarkerPosition]);
+
+export {
+  useMapView,
+  useMapControls,
+  useMapPointer,
+  useMapSearch,
+  useMapClick
+};
+//# sourceMappingURL=chunk-4ETQRBZC.js.map

package/dist/chunk-4M6CEQVK.js

@@ -0,0 +1,121 @@
+import {
+  TOUCH_TARGET,
+  displayAcrossRail
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsSectionHeader.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLIP = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function HeaderText({
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "h2",
+        sx: { m: 0, font: "inherit", fontSize: "1rem", fontWeight: 600, lineHeight: 1.3, ...CLIP },
+        children: title
+      }
+    ),
+    description !== void 0 && description !== "" && /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "p",
+        sx: {
+          m: 0,
+          font: "inherit",
+          fontSize: "0.8125rem",
+          color: "text.secondary",
+          lineHeight: 1.35,
+          ...CLIP
+        },
+        children: description
+      }
+    )
+  ] });
+}
+function SettingsSectionHeader({
+  href,
+  backLabel,
+  title,
+  description,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-section-header`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
+        alignItems: "center",
+        gap: 1.5,
+        minWidth: 0,
+        // ITS OWN SURFACE, not the panel's.
+        //
+        // The header, the chip strip and the first card were all the same
+        // white, so nothing said where "you are here" ended and the screen
+        // began — the eye had only the type sizes to go on. A tint plus the
+        // rule below turns three stacked runs of text into two blocks.
+        //
+        // `paper` against a `default` panel rather than a hand-picked grey, so
+        // it tracks the host's theme (and its dark mode) instead of being a
+        // light-mode constant that goes wrong the moment the palette does.
+        bgcolor: "background.paper",
+        px: 1.5,
+        pt: 1.5,
+        pb: 1.5,
+        mb: 1,
+        borderRadius: 1,
+        // A rule under the header, because what follows it is the sibling strip
+        // — a row of other sections. Without a line the section's own name and
+        // the chip naming a DIFFERENT section sit in one undifferentiated
+        // block, which reads as one navigation rather than as "you are here"
+        // above "go elsewhere".
+        borderBottom: 1,
+        borderColor: "divider"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: linkComponent,
+            href,
+            "aria-label": backLabel,
+            "data-testid": `${testIdPrefix}-back`,
+            sx: (theme) => ({
+              flex: "0 0 auto",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: TOUCH_TARGET,
+              height: TOUCH_TARGET,
+              border: 1,
+              borderColor: "divider",
+              borderRadius: 2,
+              color: "text.primary",
+              textDecoration: "none",
+              "&:hover": { backgroundColor: theme.palette.action.hover }
+            }),
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx(HeaderText, { title, description })
+      ]
+    }
+  );
+}
+
+export {
+  SettingsSectionHeader
+};
+//# sourceMappingURL=chunk-4M6CEQVK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionHeader.tsx"],"sourcesContent":["'use client';\n\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';\nimport type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';\n\n/** One line that must not wrap, whatever the section is called. */\nconst CLIP = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The name of where you are, and optionally what it holds.\n *\n * `minWidth: 0` on the wrapper is what lets the clipping work at all: without\n * it a flex item refuses to shrink below its content, so a long section name\n * pushes the back button off the row instead of ellipsising.\n */\nfunction HeaderText({\n  title,\n  description,\n}: {\n  title: string;\n  description?: string;\n}): React.JSX.Element {\n  return (\n    <Box sx={{ minWidth: 0 }}>\n      <Box\n        component=\"h2\"\n        sx={{ m: 0, font: 'inherit', fontSize: '1rem', fontWeight: 600, lineHeight: 1.3, ...CLIP }}\n      >\n        {title}\n      </Box>\n      {description !== undefined && description !== '' && (\n        <Box\n          component=\"p\"\n          sx={{\n            m: 0,\n            font: 'inherit',\n            fontSize: '0.8125rem',\n            color: 'text.secondary',\n            lineHeight: 1.35,\n            ...CLIP,\n          }}\n        >\n          {description}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width panel header: a back control, and the name of where you are.\n *\n * ## Why this replaced a \"‹ Voltar\" link\n *\n * The bare link spent a whole row saying only that a back existed. Under it came\n * the sibling chips and under those the section's own Salvar, so three stacked\n * rows went by before the first field — on the width with the least room for\n * them. Worse, none of the three said WHICH section was open: the chips mark the\n * active one, but a chip strip scrolls, so the answer could be off-screen.\n *\n * Folding the control into a square button beside the title buys back a row and\n * makes the header say where you are, which is what a header is for.\n *\n * ## Narrow only, and mounted at every width\n *\n * `displayAcrossRail` hides this above the breakpoint rather than unmounting it,\n * for the reason the whole component works that way: navigation that exists at\n * one width and not the other is navigation nothing can assert about. Above the\n * breakpoint the rail is on screen with the open row marked, so a back control\n * would point at a list already visible.\n *\n * The button is `TOUCH_TARGET` square because this is the phone shape, and it\n * keeps the accessible name — the visible text is the section, not the verb, so\n * a screen reader still hears \"Voltar\" rather than being handed an icon.\n */\nexport function SettingsSectionHeader({\n  href,\n  backLabel,\n  title,\n  description,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  title: string;\n  description?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-section-header`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),\n        alignItems: 'center',\n        gap: 1.5,\n        minWidth: 0,\n        // ITS OWN SURFACE, not the panel's.\n        //\n        // The header, the chip strip and the first card were all the same\n        // white, so nothing said where \"you are here\" ended and the screen\n        // began — the eye had only the type sizes to go on. A tint plus the\n        // rule below turns three stacked runs of text into two blocks.\n        //\n        // `paper` against a `default` panel rather than a hand-picked grey, so\n        // it tracks the host's theme (and its dark mode) instead of being a\n        // light-mode constant that goes wrong the moment the palette does.\n        bgcolor: 'background.paper',\n        px: 1.5,\n        pt: 1.5,\n        pb: 1.5,\n        mb: 1,\n        borderRadius: 1,\n        // A rule under the header, because what follows it is the sibling strip\n        // — a row of other sections. Without a line the section's own name and\n        // the chip naming a DIFFERENT section sit in one undifferentiated\n        // block, which reads as one navigation rather than as \"you are here\"\n        // above \"go elsewhere\".\n        borderBottom: 1,\n        borderColor: 'divider',\n      })}\n    >\n      <Box\n        component={linkComponent}\n        href={href}\n        aria-label={backLabel}\n        data-testid={`${testIdPrefix}-back`}\n        sx={(theme) => ({\n          flex: '0 0 auto',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: TOUCH_TARGET,\n          height: TOUCH_TARGET,\n          border: 1,\n          borderColor: 'divider',\n          borderRadius: 2,\n          color: 'text.primary',\n          textDecoration: 'none',\n          '&:hover': { backgroundColor: theme.palette.action.hover },\n        })}\n      >\n        <ChevronLeftIcon fontSize=\"small\" />\n      </Box>\n\n      <HeaderText title={title} description={description} />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;AAEA,OAAO,qBAAqB;AAC5B,OAAO,SAAS;AA4BZ,SACE,KADF;AArBJ,IAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AASA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGsB;AACpB,SACE,qBAAC,OAAI,IAAI,EAAE,UAAU,EAAE,GACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,GAAG,GAAG,MAAM,WAAW,UAAU,QAAQ,YAAY,KAAK,YAAY,KAAK,GAAG,KAAK;AAAA,QAExF;AAAA;AAAA,IACH;AAAA,IACC,gBAAgB,UAAa,gBAAgB,MAC5C;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI;AAAA,UACF,GAAG;AAAA,UACH,MAAM;AAAA,UACN,UAAU;AAAA,UACV,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,GAAG;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AA4BO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI,CAAC,WAAW;AAAA,QACd,GAAG,kBAAkB,OAAO,YAAY,QAAQ,MAAM;AAAA,QACtD,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWV,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMd,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX;AAAA,YACA,cAAY;AAAA,YACZ,eAAa,GAAG,YAAY;AAAA,YAC5B,IAAI,CAAC,WAAW;AAAA,cACd,MAAM;AAAA,cACN,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,cAAc;AAAA,cACd,OAAO;AAAA,cACP,gBAAgB;AAAA,cAChB,WAAW,EAAE,iBAAiB,MAAM,QAAQ,OAAO,MAAM;AAAA,YAC3D;AAAA,YAEA,8BAAC,mBAAgB,UAAS,SAAQ;AAAA;AAAA,QACpC;AAAA,QAEA,oBAAC,cAAW,OAAc,aAA0B;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/chunk-4OEKIFBC.js

@@ -0,0 +1,50 @@
+// src/components/layout/ScrollArea/ScrollAreaContent.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var EMPTY_MIN_HEIGHT = 200;
+var EmptyState = ({ children }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        minHeight: EMPTY_MIN_HEIGHT,
+        color: theme.palette.text.secondary
+      },
+      children
+    }
+  );
+};
+var wantsScrollContainer = (props) => "disableInternalScroll" in props || props.scrollContainerRef !== void 0;
+var ScrollAreaContent = ({
+  children,
+  emptyContent,
+  scrollRef,
+  containerWidth
+}) => {
+  if (!children && emptyContent) return /* @__PURE__ */ jsx(EmptyState, { children: emptyContent });
+  return /* @__PURE__ */ jsx(Fragment, { children: React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const childProps = child.props;
+    if (!wantsScrollContainer(childProps)) return child;
+    const enhanced = {
+      scrollContainerRef: scrollRef,
+      disableInternalScroll: true
+    };
+    if (containerWidth > 0 && childProps.width === "100%") {
+      enhanced.width = containerWidth;
+    }
+    return React.cloneElement(child, enhanced);
+  }) });
+};
+
+export {
+  ScrollAreaContent
+};
+//# sourceMappingURL=chunk-4OEKIFBC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollAreaContent.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nconst EMPTY_MIN_HEIGHT = 200;\n\nconst EmptyState: FC<{ children: ReactNode }> = ({ children }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100%',\n        minHeight: EMPTY_MIN_HEIGHT,\n        color: theme.palette.text.secondary,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\n// VirtualList and VirtualGrid scroll themselves by default. When one is nested\n// here that would mean two scrollers, so they are handed this container instead\n// and told to stop scrolling internally. They are recognised by the props they\n// accept rather than by identity, so a wrapper around one still works.\nconst wantsScrollContainer = (props: Record<string, unknown>): boolean =>\n  'disableInternalScroll' in props || props.scrollContainerRef !== undefined;\n\nexport interface ScrollAreaContentProps {\n  children: ReactNode;\n  emptyContent?: ReactNode;\n  scrollRef: React.RefObject<HTMLDivElement | null> | ((node: HTMLDivElement | null) => void);\n  containerWidth: number;\n}\n\nexport const ScrollAreaContent: FC<ScrollAreaContentProps> = ({\n  children,\n  emptyContent,\n  scrollRef,\n  containerWidth,\n}) => {\n  if (!children && emptyContent) return <EmptyState>{emptyContent}</EmptyState>;\n\n  return (\n    <>\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement(child)) return child;\n\n        const childProps = child.props as Record<string, unknown>;\n        if (!wantsScrollContainer(childProps)) return child;\n\n        const enhanced: Record<string, unknown> = {\n          scrollContainerRef: scrollRef,\n          disableInternalScroll: true,\n        };\n\n        // Only fill in a measured width where the child is still at its default.\n        if (containerWidth > 0 && childProps.width === '100%') {\n          enhanced.width = containerWidth;\n        }\n\n        return React.cloneElement(child, enhanced);\n      })}\n    </>\n  );\n};\n"],"mappings":";AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAEzB,OAAO,WAAW;AAQd,SAsCA,UAtCA;AANJ,IAAM,mBAAmB;AAEzB,IAAM,aAA0C,CAAC,EAAE,SAAS,MAAM;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAMA,IAAM,uBAAuB,CAAC,UAC5B,2BAA2B,SAAS,MAAM,uBAAuB;AAS5D,IAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,CAAC,YAAY,aAAc,QAAO,oBAAC,cAAY,wBAAa;AAEhE,SACE,gCACG,gBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG,QAAO;AAEzC,UAAM,aAAa,MAAM;AACzB,QAAI,CAAC,qBAAqB,UAAU,EAAG,QAAO;AAE9C,UAAM,WAAoC;AAAA,MACxC,oBAAoB;AAAA,MACpB,uBAAuB;AAAA,IACzB;AAGA,QAAI,iBAAiB,KAAK,WAAW,UAAU,QAAQ;AACrD,eAAS,QAAQ;AAAA,IACnB;AAEA,WAAO,MAAM,aAAa,OAAO,QAAQ;AAAA,EAC3C,CAAC,GACH;AAEJ;","names":[]}