@12-apps/ui 6.37.0 → 6.39.0

package/dist/{chunk-F42MJOHM.js → chunk-PVM7XTLZ.js}

@@ -1,9 +1,15 @@
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/utility/VirtualList/VirtualList.hooks.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
 var scrollOffsets = (event) => {
   const target = event.currentTarget || event.target;
   const element = target;
-  return { top: element.scrollTop, left: element.scrollLeft };
+  return { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };
 };
 var useExternalScrollListener = (scrollContainerRef, handleScroll) => {
   useEffect(() => {
@@ -18,7 +24,7 @@ var useScrollTop = (scrollContainerRef, report) => {
   const [scrollTop, setScrollTop] = useState(0);
   const handleScroll = useCallback(
     (event) => {
-      const { top, left } = scrollOffsets(event);
+      const { scrollTop: top, scrollLeft: left } = scrollOffsets(event);
       setScrollTop(top);
       report(top, left);
     },
@@ -27,33 +33,21 @@ var useScrollTop = (scrollContainerRef, report) => {
   useExternalScrollListener(scrollContainerRef, handleScroll);
   return { scrollTop, handleScroll };
 };
-var useItemHeight = ({
-  items,
-  variant,
-  itemHeight,
-  estimatedItemHeight
-}) => {
-  const measured = useRef(/* @__PURE__ */ new Map());
-  return useCallback(
-    (index) => {
-      if (variant !== "variable") {
-        return itemHeight;
-      }
-      return items[index]?.height || measured.current.get(index) || estimatedItemHeight;
-    },
-    [variant, itemHeight, estimatedItemHeight, items]
-  );
+var widthCss = (theme, width) => {
+  if (typeof width !== "number") return width;
+  return width <= 1 && width !== 0 ? `${width * 100}%` : rem(theme, width);
 };
-var useTotalHeight = (items, variant, itemHeight, getItemHeight) => useMemo(() => {
-  if (variant === "fixed") {
-    return items.length * itemHeight;
+var useDesignHeights = (items, variant, fixed, estimated) => useMemo(() => {
+  if (variant !== "variable") {
+    return { size: () => fixed, offset: (index) => index * fixed, total: items.length * fixed };
   }
-  let sum = 0;
+  const size = (index) => items[index]?.height || estimated;
+  const starts = [0];
   for (let i = 0; i < items.length; i++) {
-    sum += getItemHeight(i);
+    starts.push((starts[i] ?? 0) + size(i));
   }
-  return sum;
-}, [items.length, variant, itemHeight, getItemHeight]);
+  return { size, offset: (index) => starts[index] ?? 0, total: starts[items.length] ?? 0 };
+}, [items, variant, fixed, estimated]);
 var variableRange = ({ count, scrollTop, height, overscan, getItemHeight }) => {
   let accumulated = 0;
   let startIndex = 0;
@@ -82,36 +76,29 @@ var fixedRange = ({ count, scrollTop, height, overscan, itemHeight }) => ({
   startIndex: Math.max(0, Math.floor(scrollTop / itemHeight) - overscan),
   endIndex: Math.min(count - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan)
 });
-var useItemOffset = (variant, itemHeight, getItemHeight) => useCallback(
-  (index) => {
-    if (variant === "fixed") {
-      return index * itemHeight;
-    }
-    let offset = 0;
-    for (let i = 0; i < index; i++) {
-      offset += getItemHeight(i);
-    }
-    return offset;
-  },
-  [variant, itemHeight, getItemHeight]
-);
 var useVirtualList = ({
   items,
-  variant,
+  variant = "fixed",
   height,
   itemHeight,
   estimatedItemHeight,
-  overscan,
+  overscan = 5,
   onScroll,
   scrollContainerRef
 }) => {
-  const getItemHeight = useItemHeight({ items, variant, itemHeight, estimatedItemHeight });
-  const getItemOffset = useItemOffset(variant, itemHeight, getItemHeight);
-  const totalHeight = useTotalHeight(items, variant, itemHeight, getItemHeight);
+  const theme = useTheme();
+  const design = useDesignHeights(items, variant, itemHeight ?? 40, estimatedItemHeight ?? 40);
   const report = useCallback((top) => onScroll?.(top), [onScroll]);
   const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);
   const visibleItems = useMemo(() => {
-    const args = { count: items.length, scrollTop, height, overscan, itemHeight, getItemHeight };
+    const args = {
+      count: items.length,
+      scrollTop,
+      height: remPx(theme, height),
+      overscan,
+      itemHeight: remPx(theme, design.size(0)),
+      getItemHeight: (index) => remPx(theme, design.size(index))
+    };
     const { startIndex, endIndex } = variant === "fixed" ? fixedRange(args) : variableRange(args);
     const result = [];
     for (let i = startIndex; i <= endIndex; i++) {
@@ -122,16 +109,21 @@ var useVirtualList = ({
         index: i,
         style: {
           position: "absolute",
-          top: getItemOffset(i),
+          top: remPx(theme, design.offset(i)),
           left: 0,
           width: "100%",
-          height: getItemHeight(i)
+          height: remPx(theme, design.size(i))
         }
       });
     }
     return result;
-  }, [items, scrollTop, height, overscan, variant, itemHeight, getItemOffset, getItemHeight]);
-  return { totalHeight, visibleItems, handleScroll };
+  }, [items, scrollTop, height, overscan, variant, design, theme]);
+  return {
+    totalHeight: rem(theme, design.total),
+    viewportHeight: rem(theme, height),
+    visibleItems,
+    handleScroll
+  };
 };
 var useColumnWidth = (columnWidth, width, columnCount, gap) => useMemo(() => {
   if (columnWidth) return columnWidth;
@@ -141,27 +133,31 @@ var useColumnWidth = (columnWidth, width, columnCount, gap) => useMemo(() => {
 var useVirtualGrid = ({
   items,
   height,
-  width,
+  width = "100%",
   columnCount,
   rowHeight,
   columnWidth,
-  gap,
-  overscan,
+  gap = 0,
+  overscan = 5,
   onScroll,
   scrollContainerRef
 }) => {
+  const theme = useTheme();
   const rowCount = Math.ceil(items.length / columnCount);
-  const totalHeight = rowCount * (rowHeight + gap) - gap;
-  const computedColumnWidth = useColumnWidth(columnWidth, width, columnCount, gap);
+  const designColumn = useColumnWidth(columnWidth, width, columnCount, gap);
   const report = useCallback(
     (top, left) => onScroll?.(top, left),
     [onScroll]
   );
   const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);
   const visibleItems = useMemo(() => {
-    const pitch = rowHeight + gap;
+    const pitch = remPx(theme, rowHeight + gap);
+    const stride = remPx(theme, designColumn + gap);
     const startRow = Math.max(0, Math.floor(scrollTop / pitch) - overscan);
-    const endRow = Math.min(rowCount - 1, Math.ceil((scrollTop + height) / pitch) + overscan);
+    const endRow = Math.min(
+      rowCount - 1,
+      Math.ceil((scrollTop + remPx(theme, height)) / pitch) + overscan
+    );
     const firstIndex = startRow * columnCount;
     const lastIndex = Math.min((endRow + 1) * columnCount - 1, items.length - 1);
     const result = [];
@@ -178,19 +174,25 @@ var useVirtualGrid = ({
         style: {
           position: "absolute",
           top: rowIndex * pitch,
-          left: columnIndex * (computedColumnWidth + gap),
-          width: computedColumnWidth,
-          height: rowHeight
+          left: columnIndex * stride,
+          width: remPx(theme, designColumn),
+          height: remPx(theme, rowHeight)
         }
       });
     }
     return result;
-  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, computedColumnWidth]);
-  return { totalHeight, visibleItems, handleScroll };
+  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, designColumn, theme]);
+  return {
+    totalHeight: rem(theme, rowCount * (rowHeight + gap) - gap),
+    viewportHeight: rem(theme, height),
+    visibleItems,
+    handleScroll
+  };
 };
 
 export {
+  widthCss,
   useVirtualList,
   useVirtualGrid
 };
-//# sourceMappingURL=chunk-F42MJOHM.js.map
+//# sourceMappingURL=chunk-PVM7XTLZ.js.map

package/dist/chunk-PVM7XTLZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/VirtualList/VirtualList.hooks.ts"],"sourcesContent":["import { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { rem, remPx } from '../../../tokens/relative';\n\nimport type { VirtualGridProps, VirtualListProps } from './VirtualList.types';\n\ntype ScrollEvent = React.UIEvent<HTMLDivElement> | Event;\ntype ListItems = VirtualListProps['items'];\ntype ListVariant = NonNullable<VirtualListProps['variant']>;\ntype ItemSize = (index: number) => number;\n\n// Handles both React synthetic events and native DOM events, since the same\n// handler serves an internal onScroll and an external container's listener.\nconst scrollOffsets = (event: ScrollEvent) => {\n  const target = (event as React.UIEvent<HTMLDivElement>).currentTarget || (event as Event).target;\n  const element = target as HTMLElement;\n  return { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };\n};\n\n/**\n * When the caller owns the scroll container, the component cannot attach\n * `onScroll` through JSX and has to subscribe to that element directly.\n */\nconst useExternalScrollListener = (\n  scrollContainerRef: VirtualListProps['scrollContainerRef'],\n  handleScroll: (event: Event) => void,\n) => {\n  useEffect(() => {\n    if (!scrollContainerRef?.current) return;\n\n    const element = scrollContainerRef.current;\n    const scrollHandler = (e: Event) => handleScroll(e);\n\n    element.addEventListener('scroll', scrollHandler);\n    return () => element.removeEventListener('scroll', scrollHandler);\n  }, [scrollContainerRef, handleScroll]);\n};\n\n/**\n * Tracks the scroll offset whether it arrives through our own `onScroll` or\n * through a container the caller owns, and hands both offsets to `report` so a\n * grid can pass on the horizontal one too.\n */\nconst useScrollTop = (\n  scrollContainerRef: VirtualListProps['scrollContainerRef'],\n  report: (top: number, left: number) => void,\n) => {\n  const [scrollTop, setScrollTop] = useState(0);\n\n  const handleScroll = useCallback(\n    (event: ScrollEvent) => {\n      const { scrollTop: top, scrollLeft: left } = scrollOffsets(event);\n      setScrollTop(top);\n      report(top, left);\n    },\n    [report],\n  );\n\n  useExternalScrollListener(scrollContainerRef, handleScroll);\n\n  return { scrollTop, handleScroll };\n};\n\n\n/**\n * A `width` prop as CSS. `sx` reads a number of 1 or less as a fraction of the\n * parent, and that stays so; a larger number is design px, through the type\n * scale; a string is as given.\n */\nexport const widthCss = (theme: Theme, width: number | string): string => {\n  if (typeof width !== 'number') return width;\n  return width <= 1 && width !== 0 ? `${width * 100}%` : rem(theme, width);\n};\n\n/** Every item's height, its offset from the top, and their sum — all in DESIGN px. */\ninterface DesignHeights {\n  size: ItemSize;\n  offset: ItemSize;\n  total: number;\n}\n\n/**\n * Fixed lists know every height up front; variable ones take the item's own\n * declared height and otherwise the estimate.\n *\n * Kept in the caller's DESIGN px on purpose: the CSS draws a height with `rem`\n * and the range maths reads it through `remPx`, so the two are one number at\n * any type scale — never a row drawn at one pitch and positioned at another.\n */\nconst useDesignHeights = (\n  items: ListItems,\n  variant: ListVariant,\n  fixed: number,\n  estimated: number,\n): DesignHeights =>\n  useMemo(() => {\n    if (variant !== 'variable') {\n      return { size: () => fixed, offset: (index) => index * fixed, total: items.length * fixed };\n    }\n\n    const size = (index: number): number => items[index]?.height || estimated;\n    // Running sums, so an offset is a lookup rather than a walk from the top.\n    const starts = [0];\n    for (let i = 0; i < items.length; i++) {\n      starts.push((starts[i] ?? 0) + size(i));\n    }\n    return { size, offset: (index) => starts[index] ?? 0, total: starts[items.length] ?? 0 };\n  }, [items, variant, fixed, estimated]);\n\n/** The range maths' inputs, in the px the scroll offset is measured in. */\ninterface RangeArgs {\n  count: number;\n  scrollTop: number;\n  height: number;\n  overscan: number;\n  itemHeight: number;\n  getItemHeight: ItemSize;\n}\n\n// Walks forward accumulating heights until it passes the viewport's top edge, then\n// its bottom edge. Linear in the number of items, which is why fixed lists take\n// the arithmetic shortcut instead.\nconst variableRange = ({ count, scrollTop, height, overscan, getItemHeight }: RangeArgs) => {\n  let accumulated = 0;\n  let startIndex = 0;\n  let endIndex = count - 1;\n\n  for (let i = 0; i < count; i++) {\n    if (accumulated + getItemHeight(i) > scrollTop) {\n      startIndex = Math.max(0, i - overscan);\n      break;\n    }\n    accumulated += getItemHeight(i);\n  }\n\n  accumulated = 0;\n  for (let i = 0; i <= startIndex; i++) {\n    accumulated += getItemHeight(i);\n  }\n\n  for (let i = startIndex; i < count; i++) {\n    if (accumulated > scrollTop + height) {\n      endIndex = Math.min(count - 1, i + overscan);\n      break;\n    }\n    accumulated += getItemHeight(i);\n  }\n\n  return { startIndex, endIndex };\n};\n\nconst fixedRange = ({ count, scrollTop, height, overscan, itemHeight }: RangeArgs) => ({\n  startIndex: Math.max(0, Math.floor(scrollTop / itemHeight) - overscan),\n  endIndex: Math.min(count - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan),\n});\n\n/**\n * `height`, `itemHeight`, `estimatedItemHeight` and an item's own `height` are\n * design px. The range is computed in the px `scrollTop` is measured in\n * (`remPx`), the viewport and the scroll content are drawn in `rem`, and each\n * item's `top`/`height` is the `remPx` of its design offset and height.\n */\nexport const useVirtualList = ({\n  items,\n  variant = 'fixed',\n  height,\n  itemHeight,\n  estimatedItemHeight,\n  overscan = 5,\n  onScroll,\n  scrollContainerRef,\n}: VirtualListProps) => {\n  const theme = useTheme();\n  // 40 design px when the caller does not size a row.\n  const design = useDesignHeights(items, variant, itemHeight ?? 40, estimatedItemHeight ?? 40);\n\n  const report = useCallback((top: number) => onScroll?.(top), [onScroll]);\n  const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);\n\n  const visibleItems = useMemo(() => {\n    const args = {\n      count: items.length,\n      scrollTop,\n      height: remPx(theme, height),\n      overscan,\n      itemHeight: remPx(theme, design.size(0)),\n      getItemHeight: (index: number) => remPx(theme, design.size(index)),\n    };\n    const { startIndex, endIndex } = variant === 'fixed' ? fixedRange(args) : variableRange(args);\n    const result = [];\n\n    for (let i = startIndex; i <= endIndex; i++) {\n      const item = items[i];\n      if (!item) continue;\n\n      result.push({\n        item,\n        index: i,\n        style: {\n          position: 'absolute' as const,\n          top: remPx(theme, design.offset(i)),\n          left: 0,\n          width: '100%',\n          height: remPx(theme, design.size(i)),\n        },\n      });\n    }\n\n    return result;\n  }, [items, scrollTop, height, overscan, variant, design, theme]);\n\n  return {\n    totalHeight: rem(theme, design.total),\n    viewportHeight: rem(theme, height),\n    visibleItems,\n    handleScroll,\n  };\n};\n\n/** The column width in DESIGN px: the caller's, or an even share of a numeric width. */\nconst useColumnWidth = (\n  columnWidth: number | undefined,\n  width: number | string,\n  columnCount: number,\n  gap: number,\n) =>\n  useMemo(() => {\n    if (columnWidth) return columnWidth;\n\n    const containerWidth = typeof width === 'number' ? width : 300; // fallback\n    return (containerWidth - (columnCount - 1) * gap) / columnCount;\n  }, [columnWidth, width, columnCount, gap]);\n\n/**\n * `height`, `rowHeight`, `columnWidth` and `gap` are design px: the range and\n * every cell's box are computed through `remPx`, the viewport and the content\n * are drawn through `rem`.\n */\nexport const useVirtualGrid = ({\n  items,\n  height,\n  width = '100%',\n  columnCount,\n  rowHeight,\n  columnWidth,\n  gap = 0,\n  overscan = 5,\n  onScroll,\n  scrollContainerRef,\n}: VirtualGridProps) => {\n  const theme = useTheme();\n  const rowCount = Math.ceil(items.length / columnCount);\n  const designColumn = useColumnWidth(columnWidth, width, columnCount, gap);\n\n  const report = useCallback(\n    (top: number, left: number) => onScroll?.(top, left),\n    [onScroll],\n  );\n  const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);\n\n  const visibleItems = useMemo(() => {\n    const pitch = remPx(theme, rowHeight + gap);\n    const stride = remPx(theme, designColumn + gap);\n    const startRow = Math.max(0, Math.floor(scrollTop / pitch) - overscan);\n    const endRow = Math.min(\n      rowCount - 1,\n      Math.ceil((scrollTop + remPx(theme, height)) / pitch) + overscan,\n    );\n\n    // Rows are contiguous in `items`, so the visible block is one index range\n    // rather than a row loop wrapping a column loop.\n    const firstIndex = startRow * columnCount;\n    const lastIndex = Math.min((endRow + 1) * columnCount - 1, items.length - 1);\n    const result = [];\n\n    for (let index = firstIndex; index <= lastIndex; index++) {\n      const item = items[index];\n      if (!item) continue;\n\n      const rowIndex = Math.floor(index / columnCount);\n      const columnIndex = index % columnCount;\n\n      result.push({\n        item,\n        index,\n        columnIndex,\n        rowIndex,\n        style: {\n          position: 'absolute' as const,\n          top: rowIndex * pitch,\n          left: columnIndex * stride,\n          width: remPx(theme, designColumn),\n          height: remPx(theme, rowHeight),\n        },\n      });\n    }\n\n    return result;\n  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, designColumn, theme]);\n\n  return {\n    totalHeight: rem(theme, rowCount * (rowHeight + gap) - gap),\n    viewportHeight: rem(theme, height),\n    visibleItems,\n    handleScroll,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-LT4NEKXB.js → chunk-QA2ZGCRL.js}

@@ -7,7 +7,7 @@ import {
 import {
   Dialog,
   DialogContent
-} from "./chunk-L4UP5VYS.js";
+} from "./chunk-GVH7C2PT.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 
 // src/components/data-display/DataViews/ManageViewsDialog.tsx
 import { useMemo } from "react";
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-LT4NEKXB.js.map
+//# sourceMappingURL=chunk-QA2ZGCRL.js.map

package/dist/{chunk-3TDVGZZN.js → chunk-QBTBRJ2Q.js}

@@ -1,3 +1,8 @@
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/Resizable/Resizable.helpers.ts
 var defaultHandles = (variant) => {
   switch (variant) {
@@ -43,16 +48,30 @@ var handleStyle = (theme, handle, active) => {
   };
   switch (handle) {
     case "right":
-      return { ...baseStyle, top: 0, right: -2, width: 4, height: "100%", cursor: "ew-resize" };
+      return {
+        ...baseStyle,
+        top: 0,
+        right: rem(theme, -2),
+        width: rem(theme, 4),
+        height: "100%",
+        cursor: "ew-resize"
+      };
     case "bottom":
-      return { ...baseStyle, bottom: -2, left: 0, width: "100%", height: 4, cursor: "ns-resize" };
+      return {
+        ...baseStyle,
+        bottom: rem(theme, -2),
+        left: 0,
+        width: "100%",
+        height: rem(theme, 4),
+        cursor: "ns-resize"
+      };
     case "bottomRight":
       return {
         ...baseStyle,
-        bottom: -2,
-        right: -2,
-        width: 8,
-        height: 8,
+        bottom: rem(theme, -2),
+        right: rem(theme, -2),
+        width: rem(theme, 8),
+        height: rem(theme, 8),
         cursor: "nw-resize",
         borderRadius: "50%"
       };
@@ -62,14 +81,17 @@ var handleStyle = (theme, handle, active) => {
 };
 var RESIZABLE_DEFAULTS = {
   variant: "both",
-  width: 200,
-  height: 200,
-  minWidth: 50,
-  maxWidth: 1e3,
-  minHeight: 50,
-  maxHeight: 1e3,
   disabled: false
 };
+var DEFAULT_BOX_PX = { start: 200, min: 50, max: 1e3 };
+var startSizePx = (theme, width, height) => ({
+  width: remPx(theme, width ?? DEFAULT_BOX_PX.start),
+  height: remPx(theme, height ?? DEFAULT_BOX_PX.start)
+});
+var axisPx = (theme, min, max) => ({
+  min: remPx(theme, min ?? DEFAULT_BOX_PX.min),
+  max: remPx(theme, max ?? DEFAULT_BOX_PX.max)
+});
 var definedProps = (props) => Object.fromEntries(
   Object.entries(props).filter(([, value]) => value !== void 0)
 );
@@ -79,6 +101,8 @@ export {
   defaultHandles,
   resizedTo,
   handleStyle,
+  startSizePx,
+  axisPx,
   resolveResizableProps
 };
-//# sourceMappingURL=chunk-3TDVGZZN.js.map
+//# sourceMappingURL=chunk-QBTBRJ2Q.js.map

package/dist/chunk-QBTBRJ2Q.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 { rem, remPx } from '../../../tokens/relative';\n\nimport type { ResizableProps, ResizableVariant, ResizeHandle } from './Resizable.types';\n\n/** One axis's clamp, in the px a drag runs in. */\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 {\n        ...baseStyle,\n        top: 0,\n        right: rem(theme, -2),\n        width: rem(theme, 4),\n        height: '100%',\n        cursor: 'ew-resize',\n      };\n    case 'bottom':\n      return {\n        ...baseStyle,\n        bottom: rem(theme, -2),\n        left: 0,\n        width: '100%',\n        height: rem(theme, 4),\n        cursor: 'ns-resize',\n      };\n    case 'bottomRight':\n      return {\n        ...baseStyle,\n        bottom: rem(theme, -2),\n        right: rem(theme, -2),\n        width: rem(theme, 8),\n        height: rem(theme, 8),\n        cursor: 'nw-resize',\n        borderRadius: '50%',\n      };\n    default:\n      return baseStyle;\n  }\n};\n\ntype ResizableDefaultedKeys = 'variant' | 'disabled';\n\ntype ResolvedResizableProps = ResizableProps &\n  Required<Pick<ResizableProps, ResizableDefaultedKeys>>;\n\nconst RESIZABLE_DEFAULTS: Pick<ResizableProps, ResizableDefaultedKeys> = {\n  variant: 'both',\n  disabled: false,\n};\n\n/** The box's own defaults, in design px: where it starts, and its clamp. */\nconst DEFAULT_BOX_PX = { start: 200, min: 50, max: 1000 } as const;\n\n/**\n * Where the box starts, in the px a drag runs in. The consumer's sizes are\n * design px, like every other size in the package; a drag is pointer pixels,\n * so the live size is px from here on.\n */\nexport const startSizePx = (theme: Theme, width?: number, height?: number) => ({\n  width: remPx(theme, width ?? DEFAULT_BOX_PX.start),\n  height: remPx(theme, height ?? DEFAULT_BOX_PX.start),\n});\n\n/** One axis's clamp, from the consumer's design px to the px a drag runs in. */\nexport const axisPx = (theme: Theme, min?: number, max?: number): Axis => ({\n  min: remPx(theme, min ?? DEFAULT_BOX_PX.min),\n  max: remPx(theme, max ?? DEFAULT_BOX_PX.max),\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":"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","names":[]}

package/dist/{chunk-2E2WOBID.js → chunk-QGFBIUOK.js}

@@ -1,14 +1,14 @@
 import {
   SettingsSectionChips
-} from "./chunk-CSTAQX2B.js";
+} from "./chunk-XWZJLXJT.js";
 import {
   SettingsSectionHeader
-} from "./chunk-CPTY6UZ6.js";
+} from "./chunk-6KEXHOIF.js";
 import {
   TOUCH_TARGET,
   atLeastRail,
   displayAcrossRail
-} from "./chunk-LIG7TKIB.js";
+} from "./chunk-NYFNF7I5.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -35,7 +35,7 @@ function BackLink({
         ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
         alignItems: "center",
         gap: 0.5,
-        minHeight: TOUCH_TARGET,
+        minHeight: rem(theme, TOUCH_TARGET),
         pr: 1,
         textDecoration: "none",
         color: "text.secondary",
@@ -167,4 +167,4 @@ function SettingsPanel({
 export {
   SettingsPanel
 };
-//# sourceMappingURL=chunk-2E2WOBID.js.map
+//# sourceMappingURL=chunk-QGFBIUOK.js.map

package/dist/chunk-QGFBIUOK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport type { CSSObject, Theme } from \"@mui/material/styles/index.js\";\nimport Box from \"@mui/material/Box/index.js\";\nimport React from \"react\";\n\nimport {\n  atLeastRail,\n  displayAcrossRail,\n  TOUCH_TARGET,\n} from \"./SettingsLayout.styles\";\nimport { SettingsSectionChips } from \"./SettingsSectionChips\";\nimport { SettingsSectionHeader } from \"./SettingsSectionHeader\";\nimport type {\n  SettingsLayoutProps,\n  SettingsNavItem,\n  SettingsRailBreakpoint,\n} from \"./SettingsLayout.types\";\nimport { rem } from \"../../../tokens/relative\";\n\nexport interface SettingsPanelProps {\n  /** True in `drilldown`, inside a section rather than at the index. */\n  inSection: boolean;\n  /** True in `drilldown`, at the area's index. */\n  hideOnNarrow: boolean;\n  breakpoint: SettingsRailBreakpoint;\n  indexHref?: string;\n  backLabel: string;\n  /** The open section's own name — turns the back link into a compact header. */\n  sectionTitle?: string;\n  /** One line under that name. */\n  sectionDescription?: string;\n  ariaLabel: string;\n  sectionChips?: SettingsNavItem[];\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps[\"linkComponent\"];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n  children: React.ReactNode;\n  /** Scroll inside the panel rather than with the page. See `fillHeight`. */\n  fillHeight?: boolean;\n}\n\n/** The way back to the area's index — narrow widths only. */\nfunction BackLink({\n  href,\n  label,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  label: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps[\"linkComponent\"]>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component={linkComponent}\n      href={href}\n      aria-label={label}\n      data-testid={`${testIdPrefix}-back`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, \"inline-flex\", \"none\"),\n        alignItems: \"center\",\n        gap: 0.5,\n        minHeight: rem(theme, TOUCH_TARGET),\n        pr: 1,\n        textDecoration: \"none\",\n        color: \"text.secondary\",\n        font: \"inherit\",\n        fontSize: rem(theme, 14),\n      })}\n    >\n      <ChevronLeftIcon fontSize=\"small\" />\n      {label}\n    </Box>\n  );\n}\n\n/**\n * Two shapes of the same control, chosen by whether the host named the section.\n *\n * With a `sectionTitle` the back folds into a compact header that also says\n * where you are; without one the original text link is kept, so no existing\n * consumer's header grows a title and pushes their first field down the page on\n * upgrade. Its own component so `SettingsPanel` keeps one branch rather than\n * three.\n */\nfunction PanelBack({\n  href,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  sectionTitle?: string;\n  sectionDescription?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  if (sectionTitle === undefined) {\n    return (\n      <BackLink\n        href={href}\n        label={backLabel}\n        breakpoint={breakpoint}\n        linkComponent={linkComponent}\n        testIdPrefix={testIdPrefix}\n      />\n    );\n  }\n  return (\n    <SettingsSectionHeader\n      href={href}\n      backLabel={backLabel}\n      title={sectionTitle}\n      description={sectionDescription}\n      breakpoint={breakpoint}\n      linkComponent={linkComponent}\n      testIdPrefix={testIdPrefix}\n    />\n  );\n}\n\n/**\n * The panel's own box, as ONE object per media query rather than two.\n *\n * Both the `display` rule and `fillHeight`'s belong at the same wide-shape\n * query, and spreading them as separate `{ [query]: … }` objects makes the\n * second REPLACE the first — so turning `fillHeight` on silently dropped the\n * `display: block` that `hideOnNarrow` puts there and left the panel\n * `display: none` at every width. That only shows at a drilldown INDEX, where\n * `hideOnNarrow` is true, which is why a section route looked fine.\n *\n * `overflowY` here is also what lets a `position: sticky` toolbar inside\n * `children` pin to the TOP OF THE PANEL — under the host's header — instead\n * of to a document that is not the scroller.\n */\nfunction panelSx(\n  breakpoint: SettingsRailBreakpoint,\n  hideOnNarrow: boolean,\n  fillHeight: boolean,\n): (theme: Theme) => CSSObject {\n  return (theme) => ({\n    display: hideOnNarrow ? \"none\" : \"block\",\n    flex: \"1 1 auto\",\n    minWidth: 0,\n    width: \"100%\",\n    [atLeastRail(theme, breakpoint)]: {\n      ...(hideOnNarrow ? { display: \"block\" } : {}),\n      ...(fillHeight\n        ? {\n            height: \"100%\",\n            minHeight: 0,\n            overflowY: \"auto\",\n            overscrollBehavior: \"contain\",\n          }\n        : {}),\n    },\n  });\n}\n\n/**\n * The central column: the open screen, and — in `drilldown`, inside a section —\n * the back link and sibling-section strip above it.\n *\n * At the index in `drilldown` this whole column is `display: none` below the\n * breakpoint and the rail becomes the page. Mounted either way: the panel and\n * the list are one tree with `display` between them, not two branches of a\n * render.\n */\nexport function SettingsPanel({\n  inSection,\n  hideOnNarrow,\n  breakpoint,\n  indexHref,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  ariaLabel,\n  sectionChips,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n  fillHeight = false,\n  children,\n}: SettingsPanelProps): React.JSX.Element {\n  const showBack =\n    inSection && indexHref !== undefined && linkComponent !== undefined;\n  const showChips =\n    inSection && sectionChips !== undefined && sectionChips.length > 0;\n\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-panel`}\n      sx={panelSx(breakpoint, hideOnNarrow, fillHeight)}\n    >\n      {showBack ? (\n        <PanelBack\n          href={indexHref}\n          backLabel={backLabel}\n          sectionTitle={sectionTitle}\n          sectionDescription={sectionDescription}\n          breakpoint={breakpoint}\n          linkComponent={linkComponent}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : null}\n\n      {showChips ? (\n        <Box\n          sx={(theme) => ({\n            ...displayAcrossRail(theme, breakpoint, \"block\", \"none\"),\n            mb: 1,\n            minWidth: 0,\n          })}\n        >\n          <SettingsSectionChips\n            items={sectionChips}\n            activeItemId={activeItemId}\n            ariaLabel={ariaLabel}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            testIdPrefix={testIdPrefix}\n          />\n        </Box>\n      ) : null}\n\n      {children}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-2WFDHFK4.js → chunk-QNCWSDXE.js}

@@ -1,19 +1,33 @@
 import {
   cn
 } from "./chunk-NHL5ERBM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/CardGrid/CardGrid.tsx
+import { useTheme } from "@mui/material/styles/index.js";
 import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
-var GRID_GAP = 16;
+var GRID = {
+  /** Between cards: the grid's `gap`, and what the scroll math reserves per gap. */
+  gapPx: 16,
+  /**
+   * `scroll`: the next card left visible past the last whole one — the
+   * "there's more, swipe" hint. Wide enough to read as a clipped card (rounded
+   * edge + a slice of its photo) rather than as a rendering glitch.
+   */
+  peekPx: 28,
+  /** Under the row — the tabwoah original's Tailwind `pb-0.5`. */
+  paddingBottomPx: 2
+};
 var SCROLL_VISIBLE_CARDS = 2;
-var SCROLL_PEEK_WIDTH = 28;
-function scrollTrackWidth(count, max) {
+function scrollTrackWidth(theme, count, max) {
   const tracks = Math.max(1, Math.min(count, SCROLL_VISIBLE_CARDS));
   const overflows = count > tracks;
   const gaps = overflows ? tracks : tracks - 1;
-  const reserved = gaps * GRID_GAP + (overflows ? SCROLL_PEEK_WIDTH : 0);
-  return `min(${max}px, calc((100% - ${reserved}px) / ${tracks}))`;
+  const reserved = gaps * GRID.gapPx + (overflows ? GRID.peekPx : 0);
+  return `min(${rem(theme, max)}, calc((100% - ${rem(theme, reserved)}) / ${tracks}))`;
 }
 function CardGrid({
   cardWidth,
@@ -24,22 +38,23 @@ function CardGrid({
   containerRef,
   children
 }) {
+  const theme = useTheme();
   const style = {
     display: "grid",
-    gap: "1rem",
-    paddingBottom: "2px"
+    gap: rem(theme, GRID.gapPx),
+    paddingBottom: rem(theme, GRID.paddingBottomPx)
   };
   if (variant === "scroll") {
     const max = maxCardWidth ?? Math.round(cardWidth * 1.6);
     style.gridAutoFlow = "column";
-    style.gridAutoColumns = scrollTrackWidth(Children.count(children), max);
+    style.gridAutoColumns = scrollTrackWidth(theme, Children.count(children), max);
     style.overflowX = "auto";
     style.overflowY = "hidden";
     style.scrollSnapType = "x mandatory";
   } else if (variant === "fluid") {
-    style.gridTemplateColumns = `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`;
+    style.gridTemplateColumns = `repeat(auto-fill, minmax(${rem(theme, cardWidth)}, 1fr))`;
   } else {
-    style.gridTemplateColumns = `repeat(auto-fill, ${cardWidth}px)`;
+    style.gridTemplateColumns = `repeat(auto-fill, ${rem(theme, cardWidth)})`;
     style.justifyContent = "space-around";
   }
   const content = variant === "scroll" ? Children.map(children, (child) => /* @__PURE__ */ jsx("div", { style: { scrollSnapAlign: "start" }, children: child })) : children;
@@ -49,4 +64,4 @@ function CardGrid({
 export {
   CardGrid
 };
-//# sourceMappingURL=chunk-2WFDHFK4.js.map
+//# sourceMappingURL=chunk-QNCWSDXE.js.map

package/dist/chunk-QNCWSDXE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/CardGrid/CardGrid.tsx"],"sourcesContent":["import { useTheme, type Theme } from \"@mui/material/styles/index.js\";\nimport { Children, type CSSProperties, type ReactNode, type Ref } from \"react\";\n\nimport { rem } from \"../../../tokens/relative\";\nimport { cn } from \"../../../utils/cn\";\n\n/**\n * How the grid turns surplus row space into layout:\n *\n * - `\"fixed\"` — every column is exactly `cardWidth` design px; leftover row space is\n *   spread as even gutters (`justify-content: space-around`). Cards never resize;\n *   the column count changes with the viewport. This is the original tabwoah\n *   card-grid behavior.\n * - `\"fluid\"` — every column is *at least* `cardWidth` px and stretches (`1fr`)\n *   to fill the row, so cards grow to use the whole width. A lone card stays\n *   left-aligned at a single track's width rather than stretching edge to edge.\n * - `\"scroll\"` — a single row that scrolls horizontally, with fluid-width cards\n *   sized from the container so that exactly {@link SCROLL_VISIBLE_CARDS} cards\n *   plus a `GRID.peekPx` sliver of the next one fit on screen (up\n *   to `maxCardWidth`, past which more cards simply fit). The sliver is the\n *   point: it makes the rail visibly continue past the fold, so the row reads as\n *   swipeable instead of as a finished pair of cards. Wrapping is off; the row\n *   overflows on the x and scroll-snaps to each card's start so a swipe lands on\n *   a clean card boundary.\n */\nexport type CardGridVariant = \"fixed\" | \"fluid\" | \"scroll\";\n\n/**\n * The grid's own lengths, in design px — every one drawn through `rem`, so the\n * `gap` the grid lays out with and the gap the scroll track math reserves are\n * the same length at any type scale.\n */\nconst GRID = {\n  /** Between cards: the grid's `gap`, and what the scroll math reserves per gap. */\n  gapPx: 16,\n  /**\n   * `scroll`: the next card left visible past the last whole one — the\n   * \"there's more, swipe\" hint. Wide enough to read as a clipped card (rounded\n   * edge + a slice of its photo) rather than as a rendering glitch.\n   */\n  peekPx: 28,\n  /** Under the row — the tabwoah original's Tailwind `pb-0.5`. */\n  paddingBottomPx: 2,\n} as const;\n\n/** `scroll`: how many WHOLE cards the rail commits to showing at once. */\nconst SCROLL_VISIBLE_CARDS = 2;\n\n/**\n * The `scroll` track width: the widest a card can be while the container still\n * shows `SCROLL_VISIBLE_CARDS` of them plus the peek — or, when there is nothing\n * to scroll to, while the cards still divide the row evenly. Capped at `max` so\n * a desktop-width rail packs in more cards instead of inflating them.\n *\n * The container (`100%`) has to cover, in the overflow case: N cards, the N gaps\n * that follow them (one between each pair, one before the peeked card), and the\n * peek. With no overflow there are only N-1 gaps and no peek.\n */\nfunction scrollTrackWidth(theme: Theme, count: number, max: number): string {\n  const tracks = Math.max(1, Math.min(count, SCROLL_VISIBLE_CARDS));\n  const overflows = count > tracks;\n  const gaps = overflows ? tracks : tracks - 1;\n  const reserved = gaps * GRID.gapPx + (overflows ? GRID.peekPx : 0);\n  return `min(${rem(theme, max)}, calc((100% - ${rem(theme, reserved)}) / ${tracks}))`;\n}\n\ninterface CardGridProps {\n  /**\n   * `\"fixed\"`: the exact column width. `\"fluid\"`: the minimum column width\n   * (columns grow from here). `\"scroll\"`: only seeds the default `maxCardWidth`\n   * — a scroll track has no minimum, because a minimum is exactly what would\n   * break the \"two cards plus a peek\" promise on a narrow phone.\n   *\n   * Design px, scaled with the theme's type scale.\n   */\n  cardWidth: number;\n  /**\n   * `\"scroll\"` only: the maximum fluid card width. Defaults to\n   * `1.6 × cardWidth`. Design px, scaled with the theme's type scale.\n   */\n  maxCardWidth?: number;\n  /** Layout behavior — see {@link CardGridVariant}. Defaults to `\"fixed\"`. */\n  variant?: CardGridVariant;\n  /** Additional classes appended to the default grid container */\n  className?: string;\n  /** `data-testid` for the grid container */\n  gridTestId?: string;\n  /** Ref forwarded to the grid container (used by `useMaxRowsHeight` clipping). */\n  containerRef?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * Shared grid container for card layouts. Renders responsive columns via CSS\n * grid, in one of three variants (see {@link CardGridVariant}).\n *\n * Ported from the tabwoah card grid (the `\"fixed\"` variant is verbatim). The one\n * adaptation: that app is Tailwind (`className=\"grid gap-4 pb-0.5\"`); this one\n * has no Tailwind, so those three utilities (display:grid, gap 16 design px,\n * padding-bottom 2 design px) live in `style`, drawn through `rem`.\n */\nexport function CardGrid({\n  cardWidth,\n  maxCardWidth,\n  variant = \"fixed\",\n  className,\n  gridTestId,\n  containerRef,\n  children,\n}: CardGridProps) {\n  const theme = useTheme();\n  const style: CSSProperties = {\n    display: \"grid\",\n    gap: rem(theme, GRID.gapPx),\n    paddingBottom: rem(theme, GRID.paddingBottomPx),\n  };\n\n  if (variant === \"scroll\") {\n    const max = maxCardWidth ?? Math.round(cardWidth * 1.6);\n    // One row, laid out as implicit columns, that scrolls sideways. Each column\n    // is derived from the container so two whole cards plus a peek of the third\n    // always fit (see `scrollTrackWidth`). Scroll-snap makes a swipe settle on a\n    // card boundary instead of drifting mid-card.\n    style.gridAutoFlow = \"column\";\n    style.gridAutoColumns = scrollTrackWidth(theme, Children.count(children), max);\n    style.overflowX = \"auto\";\n    style.overflowY = \"hidden\";\n    style.scrollSnapType = \"x mandatory\";\n  } else if (variant === \"fluid\") {\n    style.gridTemplateColumns = `repeat(auto-fill, minmax(${rem(theme, cardWidth)}, 1fr))`;\n  } else {\n    style.gridTemplateColumns = `repeat(auto-fill, ${rem(theme, cardWidth)})`;\n    // `space-around` only distributes leftover width in the fixed variant; the\n    // fluid variant consumes it via `1fr` and scroll overflows instead.\n    style.justifyContent = \"space-around\";\n  }\n\n  // In the scroll variant each card is a snap target, so a swipe aligns to its\n  // start. The snap-align sits on a wrapper (the grid item) so callers' children\n  // stay untouched; the other variants render children directly.\n  const content =\n    variant === \"scroll\"\n      ? Children.map(children, (child) => (\n          <div style={{ scrollSnapAlign: \"start\" }}>{child}</div>\n        ))\n      : children;\n\n  return (\n    <div ref={containerRef} className={cn(className)} style={style} data-testid={gridTestId}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,gBAA4B;AACrC,SAAS,gBAA8D;AA8I7D;AA/GV,IAAM,OAAO;AAAA;AAAA,EAEX,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,QAAQ;AAAA;AAAA,EAER,iBAAiB;AACnB;AAGA,IAAM,uBAAuB;AAY7B,SAAS,iBAAiB,OAAc,OAAe,KAAqB;AAC1E,QAAM,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,oBAAoB,CAAC;AAChE,QAAM,YAAY,QAAQ;AAC1B,QAAM,OAAO,YAAY,SAAS,SAAS;AAC3C,QAAM,WAAW,OAAO,KAAK,SAAS,YAAY,KAAK,SAAS;AAChE,SAAO,OAAO,IAAI,OAAO,GAAG,CAAC,kBAAkB,IAAI,OAAO,QAAQ,CAAC,OAAO,MAAM;AAClF;AAqCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,KAAK,IAAI,OAAO,KAAK,KAAK;AAAA,IAC1B,eAAe,IAAI,OAAO,KAAK,eAAe;AAAA,EAChD;AAEA,MAAI,YAAY,UAAU;AACxB,UAAM,MAAM,gBAAgB,KAAK,MAAM,YAAY,GAAG;AAKtD,UAAM,eAAe;AACrB,UAAM,kBAAkB,iBAAiB,OAAO,SAAS,MAAM,QAAQ,GAAG,GAAG;AAC7E,UAAM,YAAY;AAClB,UAAM,YAAY;AAClB,UAAM,iBAAiB;AAAA,EACzB,WAAW,YAAY,SAAS;AAC9B,UAAM,sBAAsB,4BAA4B,IAAI,OAAO,SAAS,CAAC;AAAA,EAC/E,OAAO;AACL,UAAM,sBAAsB,qBAAqB,IAAI,OAAO,SAAS,CAAC;AAGtE,UAAM,iBAAiB;AAAA,EACzB;AAKA,QAAM,UACJ,YAAY,WACR,SAAS,IAAI,UAAU,CAAC,UACtB,oBAAC,SAAI,OAAO,EAAE,iBAAiB,QAAQ,GAAI,iBAAM,CAClD,IACD;AAEN,SACE,oBAAC,SAAI,KAAK,cAAc,WAAW,GAAG,SAAS,GAAG,OAAc,eAAa,YAC1E,mBACH;AAEJ;","names":[]}

package/dist/{chunk-PQECNGDE.js → chunk-QSRZOXQI.js}

@@ -4,7 +4,7 @@ import {
   useMapPointer,
   useMapSearch,
   useMapView
-} from "./chunk-46UPILLK.js";
+} from "./chunk-5NT2M2JI.js";
 
 // src/components/data-display/MapPreview/useMapPreview.ts
 import { useMemo, useRef } from "react";
@@ -53,4 +53,4 @@ var useMapPreview = (props) => {
 export {
   useMapPreview
 };
-//# sourceMappingURL=chunk-PQECNGDE.js.map
+//# sourceMappingURL=chunk-QSRZOXQI.js.map

package/dist/{chunk-RHIDWUK7.js → chunk-QUWK7SYN.js}

@@ -9,7 +9,6 @@ var SCROLL_AREA_DEFAULTS = {
   smoothScroll: true,
   variant: "default",
   scrollToTopButton: false,
-  scrollToTopThreshold: 100,
   contentPadding: 0,
   alwaysShowScrollbar: false,
   disabled: false,
@@ -26,4 +25,4 @@ var resolveScrollAreaProps = (props) => ({
 export {
   resolveScrollAreaProps
 };
-//# sourceMappingURL=chunk-RHIDWUK7.js.map
+//# sourceMappingURL=chunk-QUWK7SYN.js.map

package/dist/chunk-QUWK7SYN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollArea.helpers.ts"],"sourcesContent":["import type { ScrollAreaProps } from './ScrollArea.types';\n\ntype ScrollAreaDefaultedKeys =\n  | 'width'\n  | 'height'\n  | 'orientation'\n  | 'scrollbarSize'\n  | 'autoHide'\n  | 'autoHideDelay'\n  | 'smoothScroll'\n  | 'variant'\n  | 'scrollToTopButton'\n  | 'contentPadding'\n  | 'alwaysShowScrollbar'\n  | 'disabled'\n  | 'loading'\n  | 'testId';\n\nexport type ResolvedScrollAreaProps = ScrollAreaProps &\n  Required<Pick<ScrollAreaProps, ScrollAreaDefaultedKeys>>;\n\nconst SCROLL_AREA_DEFAULTS: Pick<ScrollAreaProps, ScrollAreaDefaultedKeys> = {\n  width: '100%',\n  height: '100%',\n  orientation: 'vertical',\n  scrollbarSize: 'medium',\n  autoHide: true,\n  autoHideDelay: 1000,\n  smoothScroll: true,\n  variant: 'default',\n  scrollToTopButton: false,\n  contentPadding: 0,\n  alwaysShowScrollbar: false,\n  disabled: false,\n  loading: false,\n  testId: 'scroll-area',\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put fifteen\n// branches into the component's own complexity budget.\nexport const resolveScrollAreaProps = (props: ScrollAreaProps): ResolvedScrollAreaProps =>\n  ({\n    ...SCROLL_AREA_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<ScrollAreaProps>),\n  }) as ResolvedScrollAreaProps;\n"],"mappings":";AAqBA,IAAM,uBAAuE;AAAA,EAC3E,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,UAAU;AAAA,EACV,eAAe;AAAA,EACf,cAAc;AAAA,EACd,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AACV;AAMO,IAAM,yBAAyB,CAAC,WACpC;AAAA,EACC,GAAG;AAAA,EACH,GAAI,OAAO;AAAA,IACT,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AAAA,EACjE;AACF;","names":[]}

package/dist/{chunk-ROT57BP4.js → chunk-R2XVTUVR.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -184,4 +184,4 @@ function MoveButton({
 export {
   ColumnsTab
 };
-//# sourceMappingURL=chunk-ROT57BP4.js.map
+//# sourceMappingURL=chunk-R2XVTUVR.js.map

package/dist/{chunk-UN5INW6K.js → chunk-R53ZOW4B.js}

@@ -6,7 +6,11 @@ import {
 } from "./chunk-SUALMVL7.js";
 import {
   CalendarMonth
-} from "./chunk-PUBPZOQJ.js";
+} from "./chunk-AG3DY5TH.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Calendar/Calendar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -20,9 +24,9 @@ var containerSx = (monthsToShow) => ({
   gap: 3,
   outline: "none",
   "&:focus-within": {
-    outline: "2px solid",
+    outline: (theme) => `${rem(theme, 2)} solid`,
     outlineColor: "primary.main",
-    outlineOffset: 2
+    outlineOffset: sxRem(2)
   }
 });
 var Calendar = React.forwardRef((componentProps, ref) => {
@@ -83,4 +87,4 @@ export {
   Calendar,
   Calendar_default
 };
-//# sourceMappingURL=chunk-UN5INW6K.js.map
+//# sourceMappingURL=chunk-R53ZOW4B.js.map

package/dist/chunk-R53ZOW4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Calendar/Calendar.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport { resolveCalendarProps } from './Calendar.helpers';\nimport { useCalendar } from './Calendar.hooks';\nimport type { CalendarProps } from './Calendar.types';\nimport type { DayCellContext } from './CalendarDayCell';\nimport { CalendarMonth } from './CalendarMonth';\n\nconst containerSx = (monthsToShow: number): SxProps<Theme> => ({\n  p: 3,\n  display: 'flex',\n  flexDirection: monthsToShow > 1 ? 'row' : 'column',\n  gap: 3,\n  outline: 'none',\n  '&:focus-within': {\n    outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n    outlineColor: 'primary.main',\n    outlineOffset: sxRem(2),\n  },\n});\n\nexport const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((componentProps, ref) => {\n  const props = resolveCalendarProps(componentProps);\n  const { monthsToShow, locale, renderHeader, renderFooter, className, ariaLabel } = props;\n\n  const calendar = useCalendar(props);\n\n  const dayContext: DayCellContext = {\n    selectionMode: props.selectionMode,\n    value: props.value,\n    range: props.range,\n    showOutsideDays: props.showOutsideDays,\n    renderDay: props.renderDay,\n    dayClassName: props.dayClassName,\n    hoveredDate: calendar.hoveredDate,\n    focusedDate: calendar.focusedDate,\n    today: calendar.today,\n    isDisabled: calendar.isDisabled,\n    onSelect: calendar.handleDateClick,\n    onHover: calendar.handleDateMouseEnter,\n    onHoverEnd: calendar.handleDateMouseLeave,\n  };\n\n  return (\n    <Paper\n      ref={ref}\n      className={className}\n      role=\"application\"\n      aria-label={ariaLabel}\n      tabIndex={0}\n      onKeyDown={calendar.handleKeyDown}\n      data-testid=\"calendar-container\"\n      sx={containerSx(monthsToShow)}\n    >\n      <Box ref={calendar.gridRef} sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>\n        {calendar.monthMatrices.map((matrix, index) => (\n          <CalendarMonth\n            key={`month-${matrix.year}-${matrix.month}`}\n            matrix={matrix}\n            monthIndex={index}\n            monthsToShow={monthsToShow}\n            locale={locale}\n            weekdayNames={calendar.weekdayNames}\n            renderHeader={renderHeader}\n            onPreviousMonth={calendar.goToPreviousMonth}\n            onNextMonth={calendar.goToNextMonth}\n            dayContext={dayContext}\n          />\n        ))}\n      </Box>\n\n      {renderFooter && (\n        <Box sx={{ mt: 2, pt: 2, borderTop: 1, borderColor: 'divider' }}>{renderFooter}</Box>\n      )}\n    </Paper>\n  );\n});\n\nCalendar.displayName = 'Calendar';\n\nexport default Calendar;\n"],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,WAAW;AA8Cd,SAYM,KAZN;AApCJ,IAAM,cAAc,CAAC,kBAA0C;AAAA,EAC7D,GAAG;AAAA,EACH,SAAS;AAAA,EACT,eAAe,eAAe,IAAI,QAAQ;AAAA,EAC1C,KAAK;AAAA,EACL,SAAS;AAAA,EACT,kBAAkB;AAAA,IAChB,SAAS,CAAC,UAAiB,GAAG,IAAI,OAAO,CAAC,CAAC;AAAA,IAC3C,cAAc;AAAA,IACd,eAAe,MAAM,CAAC;AAAA,EACxB;AACF;AAEO,IAAM,WAAW,MAAM,WAA0C,CAAC,gBAAgB,QAAQ;AAC/F,QAAM,QAAQ,qBAAqB,cAAc;AACjD,QAAM,EAAE,cAAc,QAAQ,cAAc,cAAc,WAAW,UAAU,IAAI;AAEnF,QAAM,WAAW,YAAY,KAAK;AAElC,QAAM,aAA6B;AAAA,IACjC,eAAe,MAAM;AAAA,IACrB,OAAO,MAAM;AAAA,IACb,OAAO,MAAM;AAAA,IACb,iBAAiB,MAAM;AAAA,IACvB,WAAW,MAAM;AAAA,IACjB,cAAc,MAAM;AAAA,IACpB,aAAa,SAAS;AAAA,IACtB,aAAa,SAAS;AAAA,IACtB,OAAO,SAAS;AAAA,IAChB,YAAY,SAAS;AAAA,IACrB,UAAU,SAAS;AAAA,IACnB,SAAS,SAAS;AAAA,IAClB,YAAY,SAAS;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,WAAW,SAAS;AAAA,MACpB,eAAY;AAAA,MACZ,IAAI,YAAY,YAAY;AAAA,MAE5B;AAAA,4BAAC,OAAI,KAAK,SAAS,SAAS,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,UAAU,OAAO,GACzE,mBAAS,cAAc,IAAI,CAAC,QAAQ,UACnC;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,cAAc,SAAS;AAAA,YACvB;AAAA,YACA,iBAAiB,SAAS;AAAA,YAC1B,aAAa,SAAS;AAAA,YACtB;AAAA;AAAA,UATK,SAAS,OAAO,IAAI,IAAI,OAAO,KAAK;AAAA,QAU3C,CACD,GACH;AAAA,QAEC,gBACC,oBAAC,OAAI,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,WAAW,GAAG,aAAa,UAAU,GAAI,wBAAa;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;AAED,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}