Storybook dependency changes types in build output

[jclem]

Describe the bug

In the types output by Primer React, many components are augmented by the Emotion library, which is a transitive dependency of Storybook. This means that an app consuming Primer React can not be compiled unless skipLibCheck: true is enabled or the app contains the same Emotion dependency via some other means.

For example, in the build output, lib/Button/ButtonClose.d.ts contains the following type augmentation:

declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
  /* etc */
  css?: import("@emotion/core").InterpolationWithTheme<any>;
  /* etc */
}>>

The reason that this augmentation appears is that the @emotion/core package, specifically, globally augments the DOMAttributes interface exported by React:

declare module 'react' {
  interface DOMAttributes<T> {
    css?: InterpolationWithTheme<any>
  }
}

To Reproduce

Steps to reproduce the behavior:

1. Install and use @primer/react in any project without other dependencies.
2. Run the TypeScript compiler with skipLibCheck: false.

Expected behavior

The compiler will pass.

Additional context

I haven't searched exhaustively, but I believe there are other types imported by surprise. For example, hoist-non-react-statics also appears in exported types.

Actual behavior

The compiler complains that it can't find types for @emotion/core.

---

I think the correct solution for this would be to move Primer React's storybook stories and all of the related dependencies into a separate package within this repository.