@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-R6RVBYTU.js

@@ -0,0 +1,173 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-BNNSO4MC.js";
+import {
+  Text
+} from "./chunk-26Z7QWID.js";
+
+// src/components/data-display/DataViews/data-views-export.tsx
+import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALL_FORMATS = ["xlsx", "csv", "json"];
+function scopeLabel(selected, total) {
+  if (selected > 0) {
+    return `${selected} ${selected === 1 ? "item selecionado" : "itens selecionados"}`;
+  }
+  return `${total} ${total === 1 ? "item filtrado" : "itens filtrados"}`;
+}
+function ExportTrigger({
+  busy,
+  onOpen,
+  testIdPrefix,
+  compact
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      disabled: busy,
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-export-trigger`,
+      "aria-label": copy.export.trigger,
+      title: compact ? copy.export.trigger : void 0,
+      children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+        busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(DownloadRoundedIcon, { fontSize: "small" }),
+        !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.export.triggerLabel }),
+        !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+      ] })
+    }
+  );
+}
+function FormatRow({
+  format,
+  onPick,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick: onPick,
+      "data-testid": `${testIdPrefix}-export-${format}`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        width: "100%",
+        px: 1.5,
+        py: 1,
+        border: 0,
+        background: "none",
+        cursor: "pointer",
+        font: "inherit",
+        textAlign: "left",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontSize: "0.8125rem" }, children: copy.export.formats[format]?.label ?? format }),
+        /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontSize: "0.6875rem", color: "text.disabled" }, children: copy.export.formats[format]?.hint ?? "" })
+      ]
+    }
+  );
+}
+function ExportPanel({
+  formats,
+  selectedCount,
+  totalCount,
+  columnCount,
+  onPick,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default2, { "data-testid": `${testIdPrefix}-export-panel`, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { px: 1.5, pt: 1, pb: 1, borderBottom: 1, borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsxs(default2, { component: "span", "data-testid": `${testIdPrefix}-export-scope`, children: [
+        "Exportando ",
+        scopeLabel(selectedCount, totalCount)
+      ] }) }),
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "text.disabled" }, children: copy.export.visibleColumns(columnCount) }) })
+    ] }),
+    formats.map((format) => /* @__PURE__ */ jsx(
+      FormatRow,
+      {
+        format,
+        onPick: () => onPick(format),
+        testIdPrefix
+      },
+      format
+    ))
+  ] });
+}
+function DataViewsExportMenu({
+  config,
+  query,
+  totalCount,
+  selectedIds,
+  columns,
+  testIdPrefix,
+  compact
+}) {
+  const [anchor, setAnchor] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const run = async (format) => {
+    setAnchor(null);
+    setBusy(true);
+    try {
+      await config.onExport({
+        format,
+        // UNPAGINATED: page 1 of a page as large as the whole result. The host
+        // re-queries with this; nothing here reads the loaded rows.
+        query: { ...query, page: 1, pageSize: Math.max(1, totalCount) },
+        selectedIds: selectedIds.length > 0 ? [...selectedIds] : void 0,
+        columns
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ExportTrigger, { busy, onOpen: setAnchor, testIdPrefix, compact }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => setAnchor(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { width: 260, maxWidth: "calc(100vw - 32px)" } } },
+        children: /* @__PURE__ */ jsx(
+          ExportPanel,
+          {
+            formats: config.formats ?? ALL_FORMATS,
+            selectedCount: selectedIds.length,
+            totalCount,
+            columnCount: columns.length,
+            onPick: (format) => void run(format),
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  DataViewsExportMenu
+};
+//# sourceMappingURL=chunk-R6RVBYTU.js.map

package/dist/chunk-R6SBP5M5.js

@@ -0,0 +1,152 @@
+import {
+  getChartSpecRenderer,
+  getRegisteredChartSpecTypes
+} from "./chunk-WKUA6P3W.js";
+import {
+  chartValueFormatter
+} from "./chunk-QVWNK4JO.js";
+
+// src/components/data-display/Chart/chart-spec.ts
+var CHART_SEMANTIC_COLORS = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info"
+];
+var NUMBER_FORMATS = ["brl", "percent", "compact", "integer", "decimal"];
+var ChartSpecError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "ChartSpecError";
+  }
+};
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function assertColor(value, where) {
+  if (value === void 0) return;
+  if (!CHART_SEMANTIC_COLORS.includes(value)) {
+    throw new ChartSpecError(
+      `${where} must be a semantic color token (${CHART_SEMANTIC_COLORS.join(", ")}), got ${JSON.stringify(value)}. Raw color values are not allowed.`
+    );
+  }
+}
+function parseAxis(value) {
+  if (!isRecord(value) || typeof value.key !== "string" || value.key.length === 0) {
+    throw new ChartSpecError('"xAxis" must be an object with a non-empty string "key" naming the row property for the category axis.');
+  }
+  if (value.label !== void 0 && typeof value.label !== "string") {
+    throw new ChartSpecError('"xAxis.label" must be a string when provided.');
+  }
+  return { key: value.key, label: value.label };
+}
+function parseSeries(value) {
+  if (!Array.isArray(value) || value.length === 0) {
+    throw new ChartSpecError('"series" must be a non-empty array of { key, label?, color? } objects.');
+  }
+  return value.map((entry, index) => {
+    if (!isRecord(entry) || typeof entry.key !== "string" || entry.key.length === 0) {
+      throw new ChartSpecError(`"series[${index}]" must be an object with a non-empty string "key" naming the row property holding its values.`);
+    }
+    assertColor(entry.color, `"series[${index}].color"`);
+    if (entry.label !== void 0 && typeof entry.label !== "string") {
+      throw new ChartSpecError(`"series[${index}].label" must be a string when provided.`);
+    }
+    return { key: entry.key, label: entry.label, color: entry.color };
+  });
+}
+function assertFieldType(spec, field, expected) {
+  const value = spec[field];
+  if (value !== void 0 && typeof value !== expected) {
+    throw new ChartSpecError(`"${field}" must be a ${expected} when provided.`);
+  }
+}
+function parseColorScheme(value) {
+  if (value === void 0) return void 0;
+  if (!Array.isArray(value) || value.length === 0) {
+    throw new ChartSpecError('"colorScheme" must be a non-empty array of semantic color tokens when provided.');
+  }
+  value.forEach((token, index) => assertColor(token, `"colorScheme[${index}]"`));
+  return value;
+}
+function parseOptionalFields(spec) {
+  for (const field of ["title", "subtitle"]) assertFieldType(spec, field, "string");
+  for (const field of ["stacked", "legend", "tooltip", "curved"]) {
+    assertFieldType(spec, field, "boolean");
+  }
+  assertFieldType(spec, "height", "number");
+  if (spec.numberFormat !== void 0 && !NUMBER_FORMATS.includes(spec.numberFormat)) {
+    throw new ChartSpecError(
+      `"numberFormat" must be one of ${NUMBER_FORMATS.join(", ")}, got ${JSON.stringify(spec.numberFormat)}.`
+    );
+  }
+  return {
+    title: spec.title,
+    subtitle: spec.subtitle,
+    stacked: spec.stacked,
+    legend: spec.legend,
+    tooltip: spec.tooltip,
+    curved: spec.curved,
+    height: spec.height,
+    numberFormat: spec.numberFormat,
+    colorScheme: parseColorScheme(spec.colorScheme)
+  };
+}
+function parseChartSpec(input) {
+  if (!isRecord(input)) {
+    throw new ChartSpecError("A chart spec must be a JSON object.");
+  }
+  const type = input.type;
+  if (typeof type !== "string" || !getChartSpecRenderer(type)) {
+    throw new ChartSpecError(
+      `"type" must be one of the registered chart types (${getRegisteredChartSpecTypes().join(", ")}), got ${JSON.stringify(type)}.`
+    );
+  }
+  const yAxis = input.yAxis;
+  if (yAxis !== void 0 && (!isRecord(yAxis) || yAxis.label !== void 0 && typeof yAxis.label !== "string")) {
+    throw new ChartSpecError('"yAxis" must be an object with an optional string "label" when provided.');
+  }
+  const centerLabel = input.centerLabel;
+  return {
+    ...parseOptionalFields(input),
+    type,
+    xAxis: parseAxis(input.xAxis),
+    yAxis,
+    series: parseSeries(input.series),
+    centerLabel
+  };
+}
+function specToChartProps(spec, data, ctx) {
+  const renderer = getChartSpecRenderer(spec.type);
+  if (!renderer) {
+    throw new ChartSpecError(
+      `Unknown chart type "${spec.type}". Registered types: ${getRegisteredChartSpecTypes().join(", ")}.`
+    );
+  }
+  return {
+    data,
+    title: spec.title,
+    subtitle: spec.subtitle,
+    xAxisKey: spec.xAxis.key,
+    xAxisLabel: spec.xAxis.label,
+    yAxisLabel: spec.yAxis?.label,
+    showLegend: spec.legend ?? true,
+    showTooltip: spec.tooltip ?? true,
+    height: spec.height,
+    valueFormatter: chartValueFormatter(spec.numberFormat),
+    // An integer metric is a COUNT: half a row does not exist, so the axis must
+    // not offer half-steps it would then round into duplicates (FUT-755).
+    allowDecimalTicks: spec.numberFormat !== "integer",
+    ...renderer(spec, ctx)
+  };
+}
+
+export {
+  CHART_SEMANTIC_COLORS,
+  ChartSpecError,
+  parseChartSpec,
+  specToChartProps
+};
+//# sourceMappingURL=chunk-R6SBP5M5.js.map

package/dist/chunk-RPQ3W2C6.js

@@ -0,0 +1,165 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DropdownMenu
+} from "./chunk-IDHZHOZW.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-BNNSO4MC.js";
+
+// src/components/data-display/DataViews/data-views-grid-helpers.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function isActionsColumn(col) {
+  return col.type === "actions" || col.id === "actions";
+}
+function buildGridColumns(columns, visibleColumns, onRowClick) {
+  return columns.map((col) => {
+    const hidden = col.hideable !== false && !visibleColumns.includes(col.id);
+    if (!onRowClick || isActionsColumn(col)) return { ...col, hidden };
+    return {
+      ...col,
+      hidden,
+      cell: (ctx) => {
+        const content = col.cell ? col.cell(ctx) : ctx.value == null ? "" : String(ctx.value);
+        return /* @__PURE__ */ jsx(
+          default2,
+          {
+            onClick: () => onRowClick(ctx.row),
+            sx: { cursor: "pointer", width: "100%", height: "100%", display: "flex", alignItems: "center" },
+            children: content
+          }
+        );
+      }
+    };
+  });
+}
+function buildRowActionsColumn(config) {
+  const { rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;
+  const kebabActions = rowActions.filter((action) => action.row !== false);
+  return {
+    id: "actions",
+    header: "",
+    type: "actions",
+    enableSort: false,
+    hideable: false,
+    // Narrow: the column only holds the "⋮" kebab (plus an optional leading icon),
+    // so it needs room for just one or two icons.
+    width: leading ? 72 : 44,
+    cell: ({ row }) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, justifyContent: "flex-end" }, children: [
+      leading?.(row),
+      renderRowMenu ? renderRowMenu(row) : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)
+    ] })
+  };
+}
+function renderAutoKebab(kebabActions, row, testIdPrefix, getRowId) {
+  const copy = useDataViewsCopy();
+  const items = kebabActions.filter((action) => action.isVisible?.(row) ?? true).map((action) => ({
+    id: action.id,
+    label: action.rowLabel ? action.rowLabel(row) : action.label,
+    color: action.color,
+    onClick: () => void action.onSelect([row])
+  }));
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      size: "sm",
+      items,
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", dataTestId: `${testIdPrefix}-actions-${getRowId(row)}`, "aria-label": copy.grid.rowActions, children: "\u22EE" })
+    }
+  );
+}
+function defaultSortFields(columns) {
+  return columns.filter(
+    (col) => col.enableSort !== false && col.type !== "actions" && col.id !== "actions" && typeof col.header === "string" && col.header !== ""
+  ).map((col) => ({
+    value: col.id,
+    label: col.header,
+    orderOptions: [
+      { value: "asc", label: "Crescente" },
+      { value: "desc", label: "Decrescente" }
+    ]
+  }));
+}
+function computeActiveFilterCount(state, fields, rangeFields) {
+  const ranges = state.ranges ?? {};
+  const pillCount = fields.reduce((n, field) => n + ((state.pills[field.id]?.length ?? 0) > 0 ? 1 : 0), 0);
+  const rangeCount = rangeFields.reduce((n, field) => {
+    const range = ranges[field.id];
+    return n + (range && (range.min != null || range.max != null) ? 1 : 0);
+  }, 0);
+  return (state.search.trim() ? 1 : 0) + pillCount + rangeCount;
+}
+function bulkMenuItems(rowActions, selectedRows, clearSelection) {
+  return rowActions.filter((action) => action.bulk !== false).map((action) => {
+    const targets = action.isVisible ? selectedRows.filter(action.isVisible) : selectedRows;
+    return { action, targets };
+  }).filter(({ targets }) => targets.length > 0).map(({ action, targets }) => ({
+    id: action.id,
+    label: action.label,
+    color: action.color,
+    onClick: () => {
+      const result = action.onSelect(targets);
+      if (result instanceof Promise) {
+        void result.then(
+          () => clearSelection(),
+          () => {
+          }
+        );
+      } else {
+        clearSelection();
+      }
+    }
+  }));
+}
+function renderBulkActions({
+  rowActions,
+  bulkActions,
+  selectedRows,
+  clearSelection,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (selectedRows.length === 0) return void 0;
+  if (rowActions) {
+    const items = bulkMenuItems(rowActions, selectedRows, clearSelection);
+    if (items.length === 0) return void 0;
+    return /* @__PURE__ */ jsx(
+      DropdownMenu,
+      {
+        size: "sm",
+        items,
+        trigger: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", dataTestId: `${testIdPrefix}-bulk-actions`, children: copy.grid.bulkActions(selectedRows.length) })
+      }
+    );
+  }
+  return bulkActions ? bulkActions(selectedRows, clearSelection) : void 0;
+}
+function togglePillValues(current, value, checked) {
+  const list = current ?? [];
+  return checked ? [...list, value] : list.filter((v) => v !== value);
+}
+function cardGridTracks(targetWidth) {
+  return {
+    gridTemplateColumns: {
+      xs: "1fr",
+      sm: `repeat(auto-fill, minmax(${targetWidth}px, 1fr))`
+    }
+  };
+}
+
+export {
+  isActionsColumn,
+  buildGridColumns,
+  buildRowActionsColumn,
+  defaultSortFields,
+  computeActiveFilterCount,
+  renderBulkActions,
+  togglePillValues,
+  cardGridTracks
+};
+//# sourceMappingURL=chunk-RPQ3W2C6.js.map

package/dist/chunk-RPWEXIAW.js

@@ -0,0 +1,118 @@
+import {
+  DataGridEmpty,
+  DataGridError,
+  DataGridLoading
+} from "./chunk-5E3XZAED.js";
+import {
+  useDataGridModel
+} from "./chunk-DLJGBJZW.js";
+import {
+  GridBody,
+  GridHeader
+} from "./chunk-KZLLTOB2.js";
+
+// src/components/data-display/DataGrid/DataGrid.tsx
+import Paper from "@mui/material/Paper/index.js";
+import Table from "@mui/material/Table/index.js";
+import TableContainer from "@mui/material/TableContainer/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveChrome(props) {
+  const { className, style, "data-testid": dataTestId, ...rest } = props;
+  const stickyHeader = props.stickyHeader ?? true;
+  return {
+    dataAttrs: {
+      "data-ui": "datagrid",
+      "data-density": props.density ?? "comfortable",
+      "data-size-mode": props.sizeMode ?? "auto",
+      "data-virtual-rows": props.virtualizeRows ?? true,
+      "data-virtual-cols": props.virtualizeColumns ?? false,
+      "data-sticky-header": stickyHeader
+    },
+    placeholder: {
+      dataTestId,
+      ariaLabel: props.ariaLabel ?? "Data grid",
+      className,
+      style,
+      // Only the DOM-safe leftovers reach the element: every grid-specific prop
+      // is named in `GRID_ONLY_PROPS`, so this cannot smuggle `rows` onto a div.
+      htmlProps: omitGridProps(rest)
+    }
+  };
+}
+var DataGrid = (props) => {
+  const model = useDataGridModel(props);
+  const { dataAttrs, placeholder } = resolveChrome(props);
+  if (props.loading) return /* @__PURE__ */ jsx(DataGridLoading, { ...placeholder });
+  if (props.error) return /* @__PURE__ */ jsx(DataGridError, { ...placeholder, error: props.error });
+  if (model.processedRows.length === 0) {
+    return /* @__PURE__ */ jsx(DataGridEmpty, { ...placeholder, emptyState: props.emptyState, emptyText: props.emptyText });
+  }
+  const leadingColumns = (props.selection?.mode ?? "none") !== "none" ? 1 : 0;
+  const totalColumns = model.visibleColumns.length + leadingColumns + (props.expansion ? 1 : 0);
+  const section = { model, props, totalColumns };
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      ref: model.containerRef,
+      ...dataAttrs,
+      "data-testid": placeholder.dataTestId,
+      className: placeholder.className,
+      style: placeholder.style,
+      role: "grid",
+      "aria-label": placeholder.ariaLabel,
+      "aria-description": props.ariaDescription,
+      "aria-rowcount": model.processedRows.length + 1,
+      "aria-colcount": totalColumns,
+      sx: { height: "100%", overflow: "hidden", display: "flex", flexDirection: "column" },
+      ...placeholder.htmlProps,
+      children: /* @__PURE__ */ jsx(
+        TableContainer,
+        {
+          sx: { flex: 1, overflow: "auto", position: "relative" },
+          onScroll: model.onScroll,
+          children: /* @__PURE__ */ jsxs(Table, { stickyHeader: props.stickyHeader ?? true, children: [
+            /* @__PURE__ */ jsx(GridHeader, { ...section }),
+            /* @__PURE__ */ jsx(GridBody, { ...section })
+          ] })
+        }
+      )
+    }
+  );
+};
+var GRID_ONLY_PROPS = [
+  "rows",
+  "columns",
+  "getRowId",
+  "sizeMode",
+  "density",
+  "rowHeight",
+  "headerHeight",
+  "footerHeight",
+  "selection",
+  "pagination",
+  "sorting",
+  "filtering",
+  "expansion",
+  "editing",
+  "virtualizeRows",
+  "virtualizeColumns",
+  "stickyHeader",
+  "stickyFooter",
+  "loading",
+  "error",
+  "emptyState",
+  "onRequestData",
+  "ariaLabel",
+  "ariaDescription"
+];
+function omitGridProps(rest) {
+  const html = { ...rest };
+  for (const key of GRID_ONLY_PROPS) delete html[key];
+  return html;
+}
+DataGrid.displayName = "DataGrid";
+
+export {
+  DataGrid
+};
+//# sourceMappingURL=chunk-RPWEXIAW.js.map

package/dist/chunk-RRO2EOJB.js

@@ -0,0 +1,64 @@
+import {
+  TILE_SIZE
+} from "./chunk-TUBCN4DJ.js";
+import {
+  tileBackground
+} from "./chunk-DRADVLHZ.js";
+
+// src/components/data-display/MapPreview/MapTiles.tsx
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var VISIBLE_TILES = Math.ceil(800 / TILE_SIZE) + 2;
+var LABEL_MIN_ZOOM = 10;
+var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
+  const theme = useTheme();
+  const borderOpacity = theme.palette.mode === "dark" ? 0.15 : 0.1;
+  const background = tileBackground(mapType, theme);
+  const half = Math.floor(VISIBLE_TILES / 2);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: `translate(calc(-50% + ${panOffset.x}px), calc(-50% + ${panOffset.y}px))`,
+        width: TILE_SIZE * VISIBLE_TILES,
+        height: TILE_SIZE * VISIBLE_TILES,
+        display: "grid",
+        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
+        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
+        transition: "transform 0.1s ease-out"
+      },
+      children: Array.from({ length: VISIBLE_TILES * VISIBLE_TILES }).map((_, index) => {
+        const tileX = (origin?.x || 0) + index % VISIBLE_TILES - half;
+        const tileY = (origin?.y || 0) + Math.floor(index / VISIBLE_TILES) - half;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: TILE_SIZE,
+              height: TILE_SIZE,
+              border: `1px solid ${alpha(theme.palette.divider, borderOpacity)}`,
+              background,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              color: alpha(theme.palette.text.secondary, 0.3),
+              fontFamily: "monospace",
+              userSelect: "none"
+            },
+            children: zoom > LABEL_MIN_ZOOM && `${tileX},${tileY}`
+          },
+          `tile-${tileX}-${tileY}`
+        );
+      })
+    }
+  );
+};
+
+export {
+  MapTiles
+};
+//# sourceMappingURL=chunk-RRO2EOJB.js.map