Investigate the use of React fragments in JS components

Overview

Over in 🐛 Component/slot overlay borders can be misaligned when nested Active it was noticed that a component that wraps multiple elements with a <> React fragment don't correctly get the overlay boarder around all the top level elements that make up the component.

const Slotto = ({
  title = "Has Slots",
  one, 
  two,
  three
}) => {
  return (
    <>
      {/* Text Prop */}
      <h3>{title} </h3>
      {/* Slot */}
      {one}
      {/* Slot */}
      {two}
      {/* Slot */}
      {three}
    </>
  );
};

Proposed resolution

User interface changes