var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/venueBooking/components/VenueSelection/components/TimeGrid.tsx
var TimeGrid_exports = {};
__export(TimeGrid_exports, {
  default: () => TimeGrid
});
module.exports = __toCommonJS(TimeGrid_exports);
var import_react = __toESM(require("react"));
var import_materials = require("@pisell/materials");
var import_utils = require("@pisell/utils");
var import_context = require("../../../context");
var import_hooks = require("../../../hooks");
var import_utils2 = require("../../../utils");
function TimeGrid() {
  const symbol = (0, import_hooks.useVenueBookingSymbol)();
  const {
    viewModel,
    venueBookingModule,
    toggleSlot,
    filter,
    search,
    isGridLoading
  } = (0, import_context.useVenueBookingContext)();
  const grid = viewModel.timeSlotGrid;
  const timeLabels = (grid == null ? void 0 : grid.timeLabels) || [];
  const resources = (grid == null ? void 0 : grid.resources) || [];
  const hourGroups = (0, import_react.useMemo)(() => (0, import_utils2.buildHourGroups)(timeLabels), [timeLabels]);
  const tableGridStyle = (0, import_react.useMemo)(() => (0, import_utils2.getTableGridStyle)(timeLabels.length), [timeLabels.length]);
  const isIosDevice = (0, import_react.useMemo)(() => {
    if (typeof navigator === "undefined") return false;
    return (0, import_utils.isIos)();
  }, []);
  const scrollerOverscrollStyle = (0, import_react.useMemo)(() => isIosDevice ? { overscrollBehavior: "none" } : { overscrollBehaviorX: "none", overscrollBehaviorY: "auto" }, [isIosDevice]);
  const visibleResources = (0, import_react.useMemo)(() => resources.filter((resource) => {
    const hitType = filter === "ALL" || resource.productTitle === filter;
    const hitSearch = !search || resource.resourceName.toLowerCase().includes(search.toLowerCase());
    return hitType && hitSearch;
  }), [filter, search, resources]);
  const scrollTableRef = (0, import_react.useRef)(null);
  const headerInnerRef = (0, import_react.useRef)(null);
  const headerFixedColRef = (0, import_react.useRef)(null);
  const dragStateRef = (0, import_react.useRef)({
    isDragging: false,
    pointerId: null,
    startX: 0,
    startY: 0,
    startScrollLeft: 0,
    moved: false
  });
  const applyHeaderTransform = (0, import_react.useCallback)((scrollLeft) => {
    if (headerInnerRef.current) {
      headerInnerRef.current.style.transform = `translateX(${-scrollLeft}px)`;
    }
    if (headerFixedColRef.current) {
      headerFixedColRef.current.style.transform = `translateX(${scrollLeft}px)`;
    }
  }, []);
  function syncHeader(e) {
    applyHeaderTransform(e.currentTarget.scrollLeft);
  }
  (0, import_react.useEffect)(() => {
    if (isGridLoading) return;
    const scroller = scrollTableRef.current;
    if (!scroller || !timeLabels.length || !grid) return;
    const firstAvailableIndex = (0, import_utils2.getFirstAvailableSlotIndex)(grid);
    if (firstAvailableIndex <= 0) {
      applyHeaderTransform(scroller.scrollLeft);
      return;
    }
    const slotAreaWidth = Math.max(0, scroller.scrollWidth - import_utils2.FIRST_COLUMN_WIDTH);
    const slotWidth = timeLabels.length ? slotAreaWidth / timeLabels.length : 0;
    const scrollToIndex = Math.max(0, firstAvailableIndex - 1);
    const targetLeft = Math.max(0, scrollToIndex * slotWidth);
    scroller.scrollTo({ left: targetLeft, behavior: "smooth" });
    applyHeaderTransform(targetLeft);
  }, [grid == null ? void 0 : grid.date, timeLabels.length, isGridLoading, applyHeaderTransform]);
  (0, import_react.useEffect)(() => {
    const scroller = scrollTableRef.current;
    if (!scroller) return void 0;
    function onPointerDown(e) {
      if (e.pointerType === "mouse" && e.button !== 0) return;
      if (e.target instanceof Element && e.target.closest('[data-cart-button="true"], input, textarea')) return;
      dragStateRef.current = {
        isDragging: true,
        pointerId: e.pointerId,
        startX: e.clientX,
        startY: e.clientY,
        startScrollLeft: scroller.scrollLeft,
        moved: false
      };
    }
    function onPointerMove(e) {
      var _a, _b;
      const state = dragStateRef.current;
      if (!state.isDragging || state.pointerId !== e.pointerId) return;
      const dx = e.clientX - state.startX;
      const dy = e.clientY - state.startY;
      if (Math.abs(dx) > 6 || Math.abs(dy) > 6) {
        state.moved = true;
        if (!((_a = scroller.hasPointerCapture) == null ? void 0 : _a.call(scroller, e.pointerId))) {
          (_b = scroller.setPointerCapture) == null ? void 0 : _b.call(scroller, e.pointerId);
        }
      }
      if (Math.abs(dx) >= Math.abs(dy)) {
        e.preventDefault();
        scroller.scrollLeft = state.startScrollLeft - dx;
        applyHeaderTransform(scroller.scrollLeft);
      }
    }
    function endDrag(e) {
      var _a;
      const state = dragStateRef.current;
      if (state.pointerId !== e.pointerId) return;
      dragStateRef.current.isDragging = false;
      dragStateRef.current.pointerId = null;
      (_a = scroller.releasePointerCapture) == null ? void 0 : _a.call(scroller, e.pointerId);
    }
    scroller.addEventListener("pointerdown", onPointerDown);
    scroller.addEventListener("pointermove", onPointerMove, { passive: false });
    scroller.addEventListener("pointerup", endDrag);
    scroller.addEventListener("pointercancel", endDrag);
    return () => {
      scroller.removeEventListener("pointerdown", onPointerDown);
      scroller.removeEventListener("pointermove", onPointerMove);
      scroller.removeEventListener("pointerup", endDrag);
      scroller.removeEventListener("pointercancel", endDrag);
    };
  }, [applyHeaderTransform]);
  (0, import_react.useEffect)(() => {
    const scroller = scrollTableRef.current;
    if (!scroller) return void 0;
    function onWheel(e) {
      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
        e.preventDefault();
        window.scrollBy({ top: e.deltaY, behavior: "instant" });
      }
    }
    scroller.addEventListener("wheel", onWheel, { passive: false });
    return () => scroller.removeEventListener("wheel", onWheel);
  }, []);
  const [expandedResources, setExpandedResources] = (0, import_react.useState)({});
  const toggleExpanded = (0, import_react.useCallback)((resourceId) => {
    setExpandedResources((prev) => ({ ...prev, [String(resourceId)]: !prev[String(resourceId)] }));
  }, []);
  function handleSlotClick(resourceId, productId, slot) {
    if (dragStateRef.current.moved) {
      dragStateRef.current.moved = false;
      return;
    }
    if (slot.status !== "available") return;
    toggleSlot(resourceId, productId, slot);
  }
  if (isGridLoading || !grid || !timeLabels.length) {
    return /* @__PURE__ */ import_react.default.createElement(TimeGridSkeleton, null);
  }
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "sticky z-30 overflow-hidden bg-[#fff7f7]",
      style: { top: "var(--vb-grid-sticky-top, 0px)" }
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        ref: headerInnerRef,
        className: "grid border-b border-black/6",
        style: { ...tableGridStyle, willChange: "transform" },
        key: `${grid.date}-header`
      },
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          ref: headerFixedColRef,
          className: "relative z-20 row-span-2 flex items-center gap-2 border-r border-black/6 bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4",
          style: { willChange: "transform" }
        },
        /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-clock", style: { fontSize: 16, color: "var(--vb-primary, #ea1018)" } }),
        /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.venue.label.courts") || "场地")
      ),
      hourGroups.map((slot, hourIdx) => {
        const slotIndex = timeLabels.indexOf(slot);
        const nextSlotIndex = slotIndex + 1;
        const timeMeta1 = (0, import_utils2.getTimeMetaFromGrid)(resources, slotIndex);
        const timeMeta2 = nextSlotIndex < timeLabels.length ? (0, import_utils2.getTimeMetaFromGrid)(resources, nextSlotIndex) : timeMeta1;
        const hourSoldOut = timeMeta1.soldOut && timeMeta2.soldOut;
        return /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            key: slot,
            className: `col-span-2 px-1 py-3 text-center text-[12px] font-bold md:text-sm ${hourSoldOut ? "bg-zinc-100 text-zinc-400" : "text-zinc-700"}`,
            style: { borderLeft: "1px solid rgba(0,0,0,0.08)" }
          },
          (0, import_utils2.formatHourHeader)(slot)
        );
      }),
      timeLabels.map((slot, slotIndex) => {
        const timeMeta = (0, import_utils2.getTimeMetaFromGrid)(resources, slotIndex);
        const headerTag = (0, import_utils2.getColumnTag)(resources, slotIndex);
        return /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            key: `${slot}-tag`,
            className: `px-1 py-1.5 text-center ${timeMeta.soldOut ? "bg-zinc-100 text-zinc-400" : "bg-white/55"}`,
            style: {
              borderTop: "1px solid rgba(0,0,0,0.04)",
              borderLeft: (0, import_utils2.isHourBoundary)(slot) ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)"
            }
          },
          headerTag && !timeMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ${headerTag.className}` }, headerTag.text) : null,
          timeMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold text-zinc-400" }, import_utils.locales.getText("pisell2.venue.label.sold.out") || "已满") : null,
          !timeMeta.soldOut && timeMeta.fewLeft ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold", style: { color: "var(--vb-primary)" } }, import_utils.locales.getText("pisell2.venue.label.few.left") || "即将满") : null,
          !timeMeta.soldOut && !timeMeta.fewLeft && !headerTag ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold text-zinc-500" }, import_utils.locales.getText("pisell2.venue.label.bookable") || "充足") : null
        );
      })
    )
  ), /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: scrollTableRef,
      onScroll: syncHeader,
      className: "max-w-full overflow-x-auto cursor-grab select-none touch-pan-y active:cursor-grabbing",
      style: { WebkitOverflowScrolling: "touch", ...scrollerOverscrollStyle }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full", key: grid.date }, visibleResources.map((resource) => {
      const courtMeta = (0, import_utils2.getResourceCourtMeta)(resource);
      const isMultiProduct = !!resource.hasMultipleProducts && Array.isArray(resource.products);
      const expanded = !!expandedResources[String(resource.resourceId)];
      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: `${resource.resourceId}-${grid.date}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "grid border-b border-black/6", style: tableGridStyle }, /* @__PURE__ */ import_react.default.createElement("div", { className: `sticky left-0 z-10 border-r border-black/6 px-2 py-2 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 ${courtMeta.soldOut ? "bg-zinc-50" : "bg-white"}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-1.5" }, isMultiProduct ? /* @__PURE__ */ import_react.default.createElement(
        "button",
        {
          type: "button",
          "data-cart-button": "true",
          onClick: (e) => {
            e.stopPropagation();
            toggleExpanded(resource.resourceId);
          },
          className: "flex h-5 w-5 items-center justify-center rounded text-zinc-500 hover:bg-black/5",
          "aria-label": expanded ? "collapse" : "expand"
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_materials.Iconfont,
          {
            type: expanded ? "pisell2-chevron-down" : "pisell2-chevron-right",
            style: { fontSize: 12 }
          }
        )
      ) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[13px] font-extrabold leading-5 md:text-[15px] ${courtMeta.soldOut ? "text-zinc-400" : "text-zinc-900"}` }, resource.resourceName)))), resource.slots.map((slot, slotIndex) => {
        const isAvailable = slot.status === "available";
        const isUnavailable = slot.status === "occupied" || slot.status === "past" || slot.status === "unavailable";
        const timeLabel = timeLabels[slotIndex] || "";
        const priceInfo = (0, import_utils2.buildSlotPriceInfo)(slot);
        const priceClass = (0, import_utils2.getPriceColor)({ ...priceInfo, courtType: resource.productTitle });
        const tag = (0, import_utils2.getSlotTag)(priceInfo);
        const tagText = (tag == null ? void 0 : tag.text) === "pisell2.venue.label.promo" ? import_utils.locales.getText("pisell2.venue.label.promo") || "促销" : (tag == null ? void 0 : tag.text) === "pisell2.venue.label.off.peak" ? import_utils.locales.getText("pisell2.venue.label.off.peak") || "非高峰" : null;
        const productIdForSingle = resource.productId;
        const disabledBySelection = !isMultiProduct && !isUnavailable ? (0, import_hooks.isSlotDisabledBySelection)(venueBookingModule, {
          resourceId: resource.resourceId,
          productId: productIdForSingle,
          startTime: slot.startTime
        }) : false;
        const isBlocked = isUnavailable || disabledBySelection;
        const selected = !isMultiProduct && isAvailable && (0, import_hooks.isSlotSelected)(
          venueBookingModule,
          resource.resourceId,
          slot.startTime,
          productIdForSingle
        );
        const interactive = !isMultiProduct && !isBlocked;
        const showPlusLabel = isMultiProduct && !isBlocked;
        return /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            "data-slot-button": "true",
            key: `${resource.resourceId}-outer-${slot.startTime}`,
            onClick: () => {
              if (isMultiProduct) {
                if (isBlocked) return;
                toggleExpanded(resource.resourceId);
                return;
              }
              if (isBlocked) return;
              handleSlotClick(resource.resourceId, productIdForSingle, slot);
            },
            disabled: isBlocked,
            className: `px-1 py-2 text-center transition md:px-2 ${isBlocked ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "text-white" : "bg-white hover:bg-[#fff6f6]"}`,
            style: {
              borderLeft: (0, import_utils2.isHourBoundary)(timeLabel) ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)",
              borderBottom: "1px solid rgba(0,0,0,0.04)",
              ...selected && interactive ? { backgroundColor: "var(--vb-primary)" } : null
            }
          },
          isBlocked ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-zinc-400" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg font-bold leading-none" }, "×")) : selected ? /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ import_react.default.createElement(
            import_materials.PisellText.Amount,
            {
              value: Number(slot.price || 0),
              symbol,
              precision: 2,
              showCurrencySymbol: true,
              className: "text-[13px] font-extrabold leading-4 text-white md:text-sm"
            }
          )) : /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-baseline justify-center gap-0.5" }, /* @__PURE__ */ import_react.default.createElement(
            import_materials.PisellText.Amount,
            {
              value: Number(slot.price || 0),
              symbol,
              precision: 2,
              showCurrencySymbol: true,
              hideDecimalForWholeNumbers: true,
              className: `text-[13px] font-normal leading-4 ${priceClass} md:text-sm`
            }
          ), showPlusLabel ? /* @__PURE__ */ import_react.default.createElement("span", { className: `text-[13px] font-semibold leading-4 ${priceClass} md:text-sm` }, "+") : null), tag ? /* @__PURE__ */ import_react.default.createElement("div", { className: `inline-flex rounded-full px-1.5 py-0 text-[8px] font-semibold leading-4 ring-1 md:text-[9px] ${tag.className}` }, tagText) : null)
        );
      })), isMultiProduct && expanded && resource.products.map((subRow) => /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          key: `${resource.resourceId}-sub-${subRow.productId}`,
          className: "grid border-b border-black/6 bg-zinc-50/60",
          style: tableGridStyle
        },
        /* @__PURE__ */ import_react.default.createElement("div", { className: "sticky left-0 z-10 border-r border-black/6 bg-zinc-50/60 px-2 py-2 pl-8 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 md:pl-10" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[12px] font-semibold leading-5 text-zinc-700 md:text-[13px]" }, subRow.productTitle)),
        subRow.slots.map((slot, slotIndex) => {
          const isAvailable = slot.status === "available";
          const isUnavailable = slot.status === "occupied" || slot.status === "past" || slot.status === "unavailable";
          const timeLabel = timeLabels[slotIndex] || "";
          const disabledBySelection = !isUnavailable && (0, import_hooks.isSlotDisabledBySelection)(venueBookingModule, {
            resourceId: resource.resourceId,
            productId: subRow.productId,
            startTime: slot.startTime
          });
          const isBlocked = isUnavailable || disabledBySelection;
          const selected = isAvailable && (0, import_hooks.isSlotSelected)(
            venueBookingModule,
            resource.resourceId,
            slot.startTime,
            subRow.productId
          );
          const interactive = !isBlocked;
          const priceInfo = (0, import_utils2.buildSlotPriceInfo)(slot);
          const priceClass = (0, import_utils2.getPriceColor)({ ...priceInfo, courtType: subRow.productTitle });
          return /* @__PURE__ */ import_react.default.createElement(
            "button",
            {
              "data-slot-button": "true",
              key: `${resource.resourceId}-${subRow.productId}-${slot.startTime}`,
              onClick: () => {
                if (!interactive) return;
                handleSlotClick(resource.resourceId, subRow.productId, slot);
              },
              disabled: !interactive,
              className: `px-1 py-2 text-center transition md:px-2 ${isBlocked ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "text-white" : "bg-white hover:bg-[#fff6f6]"}`,
              style: {
                borderLeft: (0, import_utils2.isHourBoundary)(timeLabel) ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)",
                borderBottom: "1px solid rgba(0,0,0,0.04)",
                ...selected && interactive ? { backgroundColor: "var(--vb-primary)" } : null
              }
            },
            isBlocked ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-zinc-400" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg font-bold leading-none" }, "×")) : /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ import_react.default.createElement(
              import_materials.PisellText.Amount,
              {
                value: Number(slot.price || 0),
                symbol,
                precision: 2,
                showCurrencySymbol: true,
                hideDecimalForWholeNumbers: true,
                className: `text-[13px] leading-4 ${selected ? "font-extrabold text-white" : `font-normal ${priceClass}`} md:text-sm`
              }
            ))
          );
        })
      )));
    }))
  ));
}
function TimeGridSkeleton() {
  const SKELETON_ROWS = 5;
  const SKELETON_COLS = 8;
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "relative", "aria-busy": "true", "aria-live": "polite" }, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "sticky z-30 overflow-hidden bg-[#fff7f7]",
      style: { top: "var(--vb-grid-sticky-top, 0px)" }
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "grid border-b border-black/6",
        style: { gridTemplateColumns: `${import_utils2.FIRST_COLUMN_WIDTH}px repeat(${SKELETON_COLS}, minmax(90px, 1fr))` }
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "relative z-20 flex items-center gap-2 border-r border-black/6 bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-clock", style: { fontSize: 16, color: "var(--vb-primary, #ea1018)" } }), /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.venue.label.courts") || "场地")),
      Array.from({ length: SKELETON_COLS }).map((_, idx) => /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          key: `sk-h-${idx}`,
          className: "relative flex items-center justify-center overflow-hidden px-1 py-3",
          style: { borderLeft: "1px solid rgba(0,0,0,0.08)" }
        },
        /* @__PURE__ */ import_react.default.createElement("div", { className: "h-3 w-10 rounded bg-zinc-200/80" }),
        /* @__PURE__ */ import_react.default.createElement("span", { className: "vb-skeleton-shimmer", "aria-hidden": "true" })
      ))
    )
  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full" }, Array.from({ length: SKELETON_ROWS }).map((_, rowIdx) => /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      key: `sk-row-${rowIdx}`,
      className: "grid border-b border-black/6",
      style: { gridTemplateColumns: `${import_utils2.FIRST_COLUMN_WIDTH}px repeat(${SKELETON_COLS}, minmax(90px, 1fr))` }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "sticky left-0 z-10 border-r border-black/6 bg-white px-2 py-4 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "relative overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "h-4 w-20 rounded bg-zinc-200/80 md:w-24" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 h-2.5 w-14 rounded bg-zinc-200/60 md:w-16" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "vb-skeleton-shimmer", "aria-hidden": "true" }))),
    Array.from({ length: SKELETON_COLS }).map((_2, colIdx) => /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        key: `sk-cell-${rowIdx}-${colIdx}`,
        className: "relative overflow-hidden px-1 py-3",
        style: {
          borderLeft: colIdx % 2 === 0 ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)",
          borderBottom: "1px solid rgba(0,0,0,0.04)",
          backgroundColor: "#fff"
        }
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "mx-auto h-3 w-10 rounded bg-zinc-200/70 md:h-3.5 md:w-12" }),
      /* @__PURE__ */ import_react.default.createElement("span", { className: "vb-skeleton-shimmer", "aria-hidden": "true" })
    ))
  ))));
}
