function WindowControls({
  theme,
  copyable,
  code,
  light,
  titleBar,
  onTitleBarChange,
}) {
  return (
    <div className="window-controls">
      {WINDOW_THEMES_MAP[theme] || <Controls />}
      <TitleBar value={titleBar} onChange={onTitleBarChange} light={light} />
      {copyable && (
        <div className="copy-button">
          <CopyButton text={code} />
        </div>
      )}
      <style jsx>
        {`
          .window-controls {
            margin-top: -24px;
            position: relative;
            top: ${theme === 'bw' ? 36 : 34}px;
            margin-left: ${theme === 'bw' ? 16 : 14}px;
            margin-right: ${theme === 'boxy' ? 16 : 0}px;
            z-index: 2;
            text-align: ${theme === 'boxy' ? 'right' : 'initial'};
          }

          .copy-button {
            cursor: pointer;
            position: absolute;
            top: 0px;
            right: 16px;
          }
        `}
      </style>
    </div>
  )
}
140px is an arbitrary value, but it's roughly equal to:
2 * (window theme width + window theme outside margin)