Container = ({
  children,
  minHeight,
  height,
  width,
  minHeightUnit,
  heightUnit,
  widthUnit,
  vAlign,
  hAlign,
  bgFileId,
  imageSize,
  bgType,
  display,
  bgColor,
  setTextColor,
  textColor,
  customClass,
  customId,
  customCSS,
  margin,
  padding,
  minScreenWidth,
  gradStartColor,
  gradEndColor,
  gradDirection,
  rotate,
  style,
  htmlElement,
  transform,
}) => {
  const {
    selected,
    connectors: { connect, drag },
  } = useNode((node) => ({ selected: node.events.selected }));
  //console.log("container style", style);
  return React.createElement(
    htmlElement,
    {
      ref: (dom) => connect(drag(dom)),
      id: customId || "",
      className: `${customClass || ""} kontainer canvas text-${hAlign} ${
        vAlign === "middle" ? "d-flex align-items-center" : ""
      } ${
        vAlign === "middle" && hAlign === "center" && "justify-content-center"
      } ${selected ? "selected-node" : ""}`,
      style: {
        ...parseStyles(customCSS || ""),
        ...reactifyStyles(style, transform, rotate),
        display,
        //padding: padding.map((p) => p + "px").join(" "),
        //margin: margin.map((p) => p + "px").join(" "),
        minHeight: minHeight ? `${minHeight}${minHeightUnit || "px"}` : null,
        ...(bgType === "Image" && bgFileId
          ? {
              backgroundImage: `url('/files/serve/${bgFileId}')`,
              backgroundSize:
                imageSize === "repeat" ? undefined : imageSize || "contain",
              backgroundRepeat:
                imageSize === "repeat" ? imageSize : "no-repeat",
            }
          : {}),
        ...(bgType === "Color"
          ? {
              backgroundColor: bgColor,
            }
          : {}),
        ...(bgType === "Gradient"
          ? {
              backgroundImage: `linear-gradient(${
                gradDirection || 0
              }deg, ${gradStartColor}, ${gradEndColor})`,
            }
          : {}),
        ...(setTextColor
          ? {
              color: textColor,
            }
          : {}),
        ...(typeof height !== "undefined"
          ? {
              height: `${height}${heightUnit || "px"}`,
            }
          : {}),
        ...(typeof width !== "undefined"
          ? {
              width: `${width}${widthUnit || "px"}`,
            }
          : {}),
      },
    },
    children
  );
}
@param {object} props
@param {*} props.children
@param {*} props.minHeight
@param {*} props.height
@param {*} props.width
@param {*} props.minHeightUnit
@param {*} props.heightUnit
@param {*} props.widthUnit
@param {*} props.vAlign
@param {*} props.hAlign
@param {*} props.bgFileId
@param {*} props.imageSize
@param {*} props.bgType
@param {*} props.display
@param {*} props.bgColor
@param {*} props.setTextColor
@param {*} props.textColor
@param {*} props.customClass
@param {*} props.customCSS
@param {*} props.margin
@param {*} props.padding
@param {*} props.minScreenWidth
@param {*} props.gradStartColor
@param {*} props.gradEndColor
@param {*} props.gradDirection
@param {*} props.rotate
@param {*} props.style
@param {*} props.htmlElement
@returns {DetailedReactHTMLElement}
@namespace
@category saltcorn-builder
@subcategory components