Columns = ({
  widths,
  contents,
  ncols,
  style,
  gx,
  gy,
  aligns,
  vAligns,
  colClasses,
  colStyles,
  customClass,
}) => {
  const {
    selected,
    connectors: { connect, drag },
  } = useNode((node) => ({ selected: node.events.selected }));
  return (
    <div
      className={`row builder-columns ${customClass || ""} ${selected ? "selected-node" : ""} ${
        typeof gx !== "undefined" && gx !== null ? `gx-${gx}` : ""
      } ${typeof gy !== "undefined" && gy !== null ? `gy-${gy}` : ""}`}
      ref={(dom) => connect(drag(dom))}
      style={reactifyStyles(style || {})}
    >
      {ntimes(ncols, (ix) => (
        <div
          key={ix}
          className={`split-col col-sm-${getWidth(widths, ix)} text-${
            aligns?.[ix]
          } align-items-${vAligns?.[ix]} ${colClasses?.[ix] || ""}`}
          style={parseStyles(colStyles?.[ix] || "")}
        >
          <Element canvas id={`Col${ix}`} is={Column}>
            {contents[ix]}
          </Element>
        </div>
      ))}
    </div>
  );
}
@param {object} opts
@param {number[]} opts.widths
@param {string[]} opts.contents
@param {number} opts.ncols
@returns {div}
@namespace
@category saltcorn-builder
@subcategory components