Function Wrapper

packages/dev/s2-docs/src/VisualExampleClient.tsx:832–874

({
  control,
  children,
  styles,
  ref
}: {
  control: PropControl;
  children: ReactNode;
  styles?: StyleString;
  ref?: Ref<HTMLDivElement>;
})

}

function Wrapper({
  control,
  children,
  styles,
  ref
}: {
  control: PropControl;
  children: ReactNode;
  styles?: StyleString;
  ref?: Ref<HTMLDivElement>;
}) {
  return (
    <div
      ref={ref}
      className={mergeStyles(
        style({display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}),
        styles
      )}>
      <span
        className={style({
          font: 'ui',
          color: 'neutral-subdued',
          display: 'flex',
          paddingBottom: `calc((${size(32)} - 1lh) / 2)`
        })}>
        <span className={style({truncate: true})}>{control.name}</span>
        <span className={style({whiteSpace: 'nowrap'})}>
          &nbsp;
          {control.description ? (
            <CenterBaseline
              styles={style({
                display: 'inline-flex',
                height: 0
              })}>
              <PropContextualHelp control={control} />
            </CenterBaseline>
          ) : null}
        </span>
      </span>
      {children}
    </div>
  );
}

function PropContextualHelp({control}) {
  if (!control.description) {