import { u as useRecordVisibilityChanges, j as jsxRuntimeExports } from "./doenetml-cB_aZGJ5.js";
import React__default, { useRef } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
import { s as sizeToCSS } from "./css-BJLDLYRJ.js";
const tabular = React__default.memo(function Tabular(props) {
  let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  if (SVs.hidden) {
    return null;
  }
  const tableStyle = {
    width: sizeToCSS(SVs.width),
    height: sizeToCSS(SVs.height),
    borderCollapse: "collapse",
    borderColor: "var(--canvasText)",
    borderRadius: "var(--mainBorderRadius)",
    tableLayout: "fixed"
  };
  if (SVs.top !== "none") {
    tableStyle.borderTopStyle = "solid";
    if (SVs.top === "minor") {
      tableStyle.borderTopWidth = "thin";
    } else if (SVs.top === "medium") {
      tableStyle.borderTopWidth = "medium";
    } else {
      tableStyle.borderTopWidth = "thick";
    }
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { margin: "12px 0" }, ref, children: /* @__PURE__ */ jsxRuntimeExports.jsx("table", { id, style: tableStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children }) }) });
});
export {
  tabular as default
};
