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";
const sideBySide = React__default.memo(function sideBySide2(props) {
  let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  if (SVs.hidden) {
    return null;
  }
  let styledChildren = [];
  const marginLeft = SVs.margins[0];
  const marginRight = SVs.margins[1];
  const numColumns = children.length;
  for (let [i, child] of children.entries()) {
    if (!child) {
      continue;
    }
    if (typeof child !== "object" || !("key" in child)) {
      styledChildren.push(child);
      continue;
    }
    let width = SVs.widths[i];
    let thisMarginLeft = marginLeft;
    let thisMarginRight = marginRight;
    if (i > 0) {
      thisMarginLeft += SVs.gapWidth / 2;
    }
    if (i < numColumns - 1) {
      thisMarginRight += SVs.gapWidth / 2;
    }
    styledChildren.push(
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "span",
        {
          style: {
            marginLeft: `${thisMarginLeft}%`,
            marginRight: `${thisMarginRight}%`,
            width: `${width}%`
          },
          children: child
        },
        child.key
      )
    );
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      id,
      style: { display: "flex", maxWidth: "850px", margin: "12px 0" },
      ref,
      children: styledChildren
    }
  );
});
export {
  sideBySide as default
};
