How to get CSS modules to work with TypeScript and Rollup?

I am trying to create a shared UI kit amongst multiple websites, and so creating a TypeScript library (for the first time in a while). I have this in my tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "."
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"],
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

And I have this in my rollup.config.js:

import pkg from './package.json'
import dts from 'rollup-plugin-dts'
import esbuild from 'rollup-plugin-esbuild'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'

const name = pkg.main.replace(/\.js$/, '')

export default [
  {
    preserveModules: true,
    input: 'src/index.ts',
    plugins: [
      peerDepsExternal(),
      postcss({
        plugins: [autoprefixer()],
        sourceMap: true,
        extract: false,
        modules: true,
      }),
      esbuild({
        include: /\.[jt]sx?$/,
        exclude: /node_modules/,
        sourceMap: true,
        target: 'es6',
        jsx: 'transform',
        jsxFactory: 'React.createElement',
        jsxFragment: 'React.Fragment',
      }),
    ],
    output: [
      {
        dir: 'dist',
        exports: 'default',
        format: 'cjs',
        sourcemap: true,
      },
    ],
    external: ['react', 'react-dom'],
  },
  {
    input: 'src/index.ts',
    plugins: [dts()],
    output: {
      file: `${name}.d.ts`,
      format: 'es',
    },
  },
]

And I have this in my package.json:

{
  "name": "@myorg/mylib.js",
  "version": "0.0.1",
  "devDependencies": {
    "autoprefixer": "^10.4.11",
    "esbuild": "^0.15.7",
    "postcss": "^8.4.16",
    "rollup": "^2.79.0",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-esbuild": "^4.10.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "typescript": "^4.8.3"
  },
  "main": "dist/index.js",
  "license": "MIT",
  "scripts": {
    "build": "yarn rollup -c"
  },
  "peerDependencies": {
    "classnames": "^2.3.2",
    "next": "^12.3.0",
    "react": "^18.2.0"
  },
  "dependencies": {
    "@types/react": "^18.0.20",
    "classnames": "^2.3.2"
  }
}

And then I am trying to load this src/index.ts:

import Button from './components/Button'

export default {
  Button,
}

Which references these two:

import React from 'react'
import styles from './index.module.css'

export default function Button() {
  return <button className={styles.button}>hello</button>
}

And index.module.css is:

.button {
  background: red;
}

However, I am getting this error on yarn build:

yarn run v1.22.17
$ yarn rollup -c
$ /my/project/node_modules/.bin/rollup -c

src/index.ts → dist...
created dist in 190ms

src/index.ts → dist/index.d.ts...
src/components/Button/index.tsx(4,20): error TS2307: Cannot find module './index.module.css' or its corresponding type declarations.

[!] (plugin dts) Error: Failed to compile. Check the logs above.
src/components/Button/index.tsx
Error: Failed to compile. Check the logs above.
    at error (/my/project/node_modules/rollup/dist/shared/rollup.js:198:30)
    at throwPluginError (/my/project/node_modules/rollup/dist/shared/rollup.js:21919:12)
    at Object.error (/my/project/node_modules/rollup/dist/shared/rollup.js:22641:20)
    at Object.error (/my/project/node_modules/rollup/dist/shared/rollup.js:22096:42)
    at Object.transform (/my/project/node_modules/rollup-plugin-dts/dist/rollup-plugin-dts.cjs:1618:26)
    at /my/project/node_modules/rollup/dist/shared/rollup.js:22848:40

Any ideas how to get the CSS modules compiling with Rollup?