Just an idea

Space.jsx

const Space = ({
  margin,
  marginRight,
  marginLeft,
  marginTop,
  marginBottom,
  padding,
  bottom,
  top,
  left,
  right,
  vertical,
  horizontal,
  all,
  unit = "rem",
  paddingUnit,
  marginUnit,
  children,
  renderAs = "div",
  bg,
  border,
  color,
  className
}) => {
  const Element = renderAs;
  const CMU = (v) => {
    return renderValue(v, marginUnit || unit);
  };

  const PMU = (v) => {
    return renderValue(v, paddingUnit || unit);
  };

  const renderValue = (v, u) => {
    if (v) {
      if (v.toString() !== "0") {
        return `${v}${u || "rem"}`;
      }
      return 0;
    }
    return 0;
  };

  let style = {};

  let marginStyle = CMU(margin);
  let arr = [];
  if (marginTop || marginRight || marginBottom || marginLeft) {
    arr.push(CMU(marginTop || margin || 0));
    arr.push(CMU(marginRight || margin || 0));
    arr.push(CMU(marginBottom || margin || 0));
    arr.push(CMU(marginLeft || margin || 0));
    if (arr.filter((e) => e === 0)) {
      marginStyle = arr.join(" ");
    }
  }

  if (marginStyle) {
    style["margin"] = marginStyle;
  }

  let paddingStyle = CMU(padding);
  arr = [];
  if (all || top || right || bottom || left || vertical || horizontal) {
    arr.push(PMU(top || all || vertical || padding || 0));
    arr.push(PMU(right || all || horizontal || padding || 0));
    arr.push(PMU(bottom || all || vertical || padding || 0));
    arr.push(PMU(left || all || horizontal || padding || 0));
    if (arr.filter((e) => e === 0)) {
      paddingStyle = arr.join(" ");
    }
  }

  if (paddingStyle) {
    style["padding"] = paddingStyle;
  }

  if (bg) {
    style["backgroundColor"] = bg;
  }

  if (border) {
    style["border"] = border;
  }

  if (color) {
    style["color"] = color;
  }

  return (
    <Element style={style} className={className}>
      {children}
    </Element>
  );
};

export { Space };