@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-MUIBNHJW.js

@@ -0,0 +1,190 @@
+import {
+  DATA_VIEWS_LAYOUTS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Slider
+} from "./chunk-W6WOKHAX.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-layout-context.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataViewsLayoutContext = createContext(null);
+var DEFAULT_ZOOM = 35;
+var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
+var LAYOUT_STORAGE_KEY = "dataviews:layout";
+var DENSITY_STORAGE_KEY = "dataviews:density";
+var DENSITIES = ["compact", "cozy", "comfortable"];
+var DENSITY_ROW_PADDING = {
+  compact: 0.25,
+  cozy: 0.75,
+  comfortable: 1.5
+};
+var DENSITY_CARD_SCALE = {
+  compact: 0.84,
+  cozy: 1.15,
+  comfortable: 1.4
+};
+function cardTargetWidthFor(zoom, density) {
+  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
+}
+var DENSITY_BOARD_SCALE = {
+  compact: 0.95,
+  cozy: 1,
+  comfortable: 1.25
+};
+function cardScaleForZoom(zoom) {
+  const clamped = Math.max(0, Math.min(100, zoom));
+  return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
+}
+function cardMinWidthForZoom(zoom) {
+  return Math.round(180 * cardScaleForZoom(zoom));
+}
+function isLayout(value) {
+  return DATA_VIEWS_LAYOUTS.includes(value);
+}
+function isDensity(value) {
+  return DENSITIES.includes(value);
+}
+var DEFAULT_DENSITY = "cozy";
+function readStoredDensity() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
+    return isDensity(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function pinLayout(layout, available) {
+  if (layout === "cards") return available.canUseCards ? "cards" : "table";
+  if (layout === "list") return available.canUseList ? "list" : "table";
+  if (layout === "board") return available.canUseBoard ? "board" : "table";
+  return "table";
+}
+function readStoredLayout() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
+    return isLayout(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, value) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function DataViewsLayoutProvider({
+  canUseCards = false,
+  canUseList = false,
+  canUseBoard = false,
+  defaultLayout = "table",
+  viewLayout,
+  ignoreStoredLayout = false,
+  children
+}) {
+  const availability = { canUseCards, canUseList, canUseBoard };
+  const [layout, setLayoutState] = useState(
+    () => pinLayout(
+      viewLayout ?? (ignoreStoredLayout ? void 0 : readStoredLayout()) ?? defaultLayout,
+      availability
+    )
+  );
+  const [density, setDensityState] = useState(
+    () => (ignoreStoredLayout ? void 0 : readStoredDensity()) ?? DEFAULT_DENSITY
+  );
+  const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+  useEffect(() => {
+    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
+  }, [viewLayout]);
+  const effective = pinLayout(layout, availability);
+  const value = useMemo(
+    () => ({
+      layout: effective,
+      setLayout: (next) => {
+        const pinned = pinLayout(next, availability);
+        setLayoutState(pinned);
+        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
+      },
+      density,
+      setDensity: (next) => {
+        setDensityState(next);
+        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
+      },
+      canUseCards,
+      canUseList,
+      canUseBoard,
+      zoom,
+      setZoom
+    }),
+    [effective, density, canUseCards, canUseList, canUseBoard, zoom]
+  );
+  return /* @__PURE__ */ jsx(DataViewsLayoutContext.Provider, { value, children });
+}
+function useDataViewsLayout() {
+  const ctx = useContext(DataViewsLayoutContext);
+  if (!ctx) {
+    throw new Error("useDataViewsLayout must be used within a DataViewsLayoutProvider");
+  }
+  return ctx;
+}
+function DataViewsZoomSlider({ testIdPrefix }) {
+  const { layout, zoom, setZoom } = useDataViewsLayout();
+  const copy = useDataViewsCopy();
+  if (layout !== "cards" && layout !== "board") return null;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: { xs: "none", sm: "flex" },
+        alignItems: "center",
+        gap: 1,
+        color: "text.secondary"
+      },
+      children: [
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(14) } }),
+        /* @__PURE__ */ jsx(default2, { sx: { width: sxRem(88), display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          Slider,
+          {
+            size: "sm",
+            showValue: false,
+            value: zoom,
+            min: 0,
+            max: 100,
+            step: 5,
+            onChange: (_event, next) => setZoom(Array.isArray(next) ? next[0] ?? 0 : next),
+            "aria-label": copy.display.cardZoom,
+            "data-testid": `${testIdPrefix}-card-zoom`
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(20) } })
+      ]
+    }
+  );
+}
+
+export {
+  DENSITY_ROW_PADDING,
+  DENSITY_CARD_SCALE,
+  cardTargetWidthFor,
+  DENSITY_BOARD_SCALE,
+  cardScaleForZoom,
+  cardMinWidthForZoom,
+  DataViewsLayoutProvider,
+  useDataViewsLayout,
+  DataViewsZoomSlider
+};
+//# sourceMappingURL=chunk-MUIBNHJW.js.map

package/dist/chunk-N6GBJGKW.js

@@ -0,0 +1,63 @@
+import {
+  LightboxAutoplayButton,
+  LightboxCloseButton,
+  LightboxNavButtons,
+  LightboxZoomControls
+} from "./chunk-6LUUCSFV.js";
+
+// src/components/data-display/Lightbox/LightboxOverlay.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LightboxOverlay = ({
+  testId,
+  itemCount,
+  currentIndex,
+  showControls,
+  loop,
+  autoplay,
+  canZoom,
+  isAutoPlaying,
+  onClose,
+  onPrev,
+  onNext,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onToggleAutoplay
+}) => {
+  const hasMultiple = itemCount > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LightboxCloseButton, { testId, onClose }),
+    showControls && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxNavButtons,
+      {
+        testId,
+        atStart: !loop && currentIndex === 0,
+        atEnd: !loop && currentIndex === itemCount - 1,
+        onPrev,
+        onNext
+      }
+    ),
+    canZoom && /* @__PURE__ */ jsx(
+      LightboxZoomControls,
+      {
+        testId,
+        onZoomIn,
+        onZoomOut,
+        onResetZoom
+      }
+    ),
+    autoplay && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxAutoplayButton,
+      {
+        testId,
+        isAutoPlaying,
+        onToggle: onToggleAutoplay
+      }
+    )
+  ] });
+};
+
+export {
+  LightboxOverlay
+};
+//# sourceMappingURL=chunk-N6GBJGKW.js.map

package/dist/chunk-NAQ2PIV5.js

@@ -0,0 +1,65 @@
+import {
+  onMedia,
+  scrim,
+  sheen
+} from "./chunk-SSX5ITPM.js";
+import {
+  remPx,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/Lightbox.constants.ts
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 5;
+var ZOOM_STEP = 1.2;
+var WHEEL_ZOOM_FACTOR = 0.01;
+var DEFAULT_AUTOPLAY_INTERVAL_MS = 4e3;
+var OVERLAY_Z_INDEX = 1e3;
+var minSwipeDistance = (theme) => remPx(theme, 50);
+var SCRIM = (theme) => scrim(theme, 0.5);
+var SCRIM_HOVER = (theme) => scrim(theme, 0.7);
+var overlayButtonSx = {
+  color: onMedia,
+  backgroundColor: SCRIM,
+  "&:hover": { backgroundColor: SCRIM_HOVER }
+};
+var navButtonSx = {
+  color: onMedia,
+  backgroundColor: SCRIM,
+  "&:hover:not(:disabled)": { backgroundColor: SCRIM_HOVER },
+  "&:disabled": { color: (theme) => sheen(theme, 0.3) }
+};
+var captionSx = {
+  color: onMedia,
+  textAlign: "center",
+  backgroundColor: SCRIM_HOVER,
+  borderRadius: 1
+};
+var counterSx = {
+  color: onMedia,
+  fontSize: sxRem(14),
+  backgroundColor: SCRIM,
+  borderRadius: 1
+};
+var thumbnailStripSx = {
+  background: SCRIM,
+  borderRadius: 1
+};
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `lightbox-${suffix}`;
+
+export {
+  MIN_ZOOM,
+  MAX_ZOOM,
+  ZOOM_STEP,
+  WHEEL_ZOOM_FACTOR,
+  DEFAULT_AUTOPLAY_INTERVAL_MS,
+  OVERLAY_Z_INDEX,
+  minSwipeDistance,
+  overlayButtonSx,
+  navButtonSx,
+  captionSx,
+  counterSx,
+  thumbnailStripSx,
+  makeTestId
+};
+//# sourceMappingURL=chunk-NAQ2PIV5.js.map

package/dist/chunk-NEHCU3EZ.js

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

package/dist/chunk-NHHWNA5W.js

@@ -0,0 +1,194 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-AJBRO76D.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/DataViewsBoard.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_EXTRA_LABEL = "Sem etapa";
+function groupValueOf(row, groupBy) {
+  const value = row[groupBy];
+  return value === null || value === void 0 ? "" : String(value);
+}
+function groupRows(rows, board) {
+  const declared = new Map(board.groups.map((group) => [group.value, []]));
+  const extra = [];
+  for (const row of rows) {
+    const bucket = declared.get(groupValueOf(row, board.groupBy));
+    if (bucket) bucket.push(row);
+    else extra.push(row);
+  }
+  const columns = board.groups.map((group) => ({
+    key: group.value,
+    label: group.label,
+    tone: group.tone,
+    rows: declared.get(group.value) ?? []
+  }));
+  if (extra.length > 0) {
+    columns.push({ key: "__extra__", label: board.extraLabel ?? DEFAULT_EXTRA_LABEL, rows: extra });
+  }
+  return columns;
+}
+function sumOf(rows, sumBy) {
+  if (!sumBy) return null;
+  return rows.reduce((total, row) => {
+    const value = row[sumBy];
+    return typeof value === "number" && Number.isFinite(value) ? total + value : total;
+  }, 0);
+}
+function toneColor(tone) {
+  const known = ["primary", "secondary", "success", "warning", "error", "info"];
+  return tone && known.includes(tone) ? `${tone}.main` : "divider";
+}
+function BoardColumnHeader({
+  label,
+  count,
+  sum,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontWeight: 600 }, children: label }) }),
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "span",
+          "data-testid": `${testId}-count`,
+          "aria-label": copy.board.countOnPage(label, count),
+          sx: { color: "text.secondary", whiteSpace: "nowrap" },
+          children: copy.board.onThisPage(count)
+        }
+      ) })
+    ] }),
+    sum !== null && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        component: "span",
+        "data-testid": `${testId}-sum`,
+        "aria-label": copy.board.pageSum(sum),
+        sx: { color: "text.secondary" },
+        children: sum
+      }
+    ) })
+  ] });
+}
+function BoardColumn({
+  column,
+  board,
+  getRowId,
+  renderCard,
+  selectedIds,
+  onToggleId,
+  cardScale,
+  width,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const total = sumOf(column.rows, board.sumBy);
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": testId,
+      sx: {
+        flex: `0 0 ${width}`,
+        minWidth: width,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        borderTop: (theme) => `${rem(theme, 3)} solid`,
+        borderStyle: "solid",
+        borderColor: toneColor(column.tone),
+        borderRadius: 1,
+        bgcolor: "action.hover",
+        p: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          BoardColumnHeader,
+          {
+            label: column.label,
+            count: column.rows.length,
+            sum: total === null ? null : String(board.formatSum ? board.formatSum(total) : total),
+            testId
+          }
+        ),
+        column.rows.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", "data-testid": `${testId}-empty`, sx: { color: "text.disabled" }, children: copy.board.emptyColumn }) }) : column.rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(default2, { children: renderCard(row, {
+            selected: selectedIds.has(id),
+            onToggleSelect: () => onToggleId(id),
+            scale: cardScale
+          }) }, id);
+        })
+      ]
+    }
+  );
+}
+var columnWidth = (theme, cardScale) => rem(theme, Math.max(220, Math.round(240 * cardScale)));
+function DataViewsBoard({
+  rows,
+  board,
+  getRowId,
+  renderCard,
+  selectedIds,
+  onToggleId,
+  cardScale,
+  dataTestId
+}) {
+  const copy = useDataViewsCopy();
+  const theme = useTheme();
+  const columns = groupRows(rows, board);
+  const width = columnWidth(theme, cardScale);
+  const testId = dataTestId ? `${dataTestId}-board` : "data-views-board";
+  return /* @__PURE__ */ jsxs(default2, { sx: { mt: 1.5 }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", "data-testid": `${testId}-scale-note`, sx: { color: "text.secondary" }, children: copy.board.pageScopeNote }) }),
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-testid": testId,
+        sx: {
+          mt: 1,
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 1.5,
+          // The BOARD scrolls, not the page: without `maxWidth` the flex row
+          // widens its parent and the whole document scrolls sideways.
+          maxWidth: "100%",
+          overflowX: "auto",
+          pb: 1
+        },
+        children: columns.map((column) => /* @__PURE__ */ jsx(
+          BoardColumn,
+          {
+            column,
+            board,
+            getRowId,
+            renderCard,
+            selectedIds,
+            onToggleId,
+            cardScale,
+            width,
+            testId: `${testId}-column-${column.key}`
+          },
+          column.key
+        ))
+      }
+    )
+  ] });
+}
+
+export {
+  groupRows,
+  DataViewsBoard
+};
+//# sourceMappingURL=chunk-NHHWNA5W.js.map