How to create an npm package with a custom styled-components theme attached?

Question

I've created a component library.

I am using styled-components with an updated DefaultTheme in my styled.d.ts file.

I am able to export my components into my other project, however they do not have any reference to their <ThemeProvider theme={theme} /> or the updated styled-components DefaultTheme.

How can I export my styled-components component library with its custom DefaultTheme and provider wrapper so I can use it within other packages?

Any thoughts?

I am using NextJS.

_app.tsx

import type { AppProps } from 'next/app';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { LightTheme } from '../theme';

function MyApp({ Component, pageProps }: AppProps) {
  const [theme] = React.useState(LightTheme);

  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

styled.d.ts

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    palette: {
      main: {
        primary: {
          0: string;
          200: string;
          400: string;
        };
        secondary: {
          0: string;
          200: string;
          400: string;
        };
      };
      colors: {
        green: {
          0: string;
          200: string;
        };
      },
      transitions: {
        primary: ThemedCssFunction;
      };
...
}

Error as seen from repo that is installing my package: