Do not inline the assets in the built package.

This opts out of vite's library mode, and ensure the built files look
right.

.storybook/main.ts

@@ -1,4 +1,6 @@
-export default {
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
@@ -17,4 +19,12 @@ export default {
   docs: {
     autodocs: false,
   },
+  viteFinal: (config) => {
+    return {
+      ...config,
+      publicDir: "res",
+    }
+  }
 };
+
+export default config;

package.json

@@ -3,17 +3,14 @@
   "version": "0.0.1",
   "description": "Compound components for the Web",
   "type": "module",
-  "main": "./dist/compound-web.umd.cjs",
-  "module": "./dist/compound-web.js",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/compound-web.js",
-      "require": "./dist/compound-web.umd.cjs",
+      "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./dist/style.css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
+    "./dist/index.css": {
+      "import": "./dist/index.css"
     }
   },
   "types": "./dist/index.d.ts",

vite.config.ts

@@ -6,38 +6,77 @@ import dts from "vite-plugin-dts";
 import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
-  publicDir: "res",
   build: {
     target: browserslistToEsbuild(),
     assetsInlineLimit: 0, // To disable assets inlining as base64 in the bundle
-    lib: {
-      entry: resolve(__dirname, "src/index.ts"),
-      name: "@vector-im/compound-web",
-      fileName: "compound-web",
-    },
+
+    // We expect to be used as a dependency with a bundler, so we don't need to
+    // minify and let the bundler deal with the sourcemaps
+    sourcemap: true,
+    minify: false,
+    cssMinify: false,
+
     rollupOptions: {
-      external: ["react", "react-dom"],
+      // We are *not* running in library mode because inlines all the assets.
+      // Instead, we're running in normal mode & specifying the entrypoint here.
+
+      input: [resolve(__dirname, "./src/index.ts")],
+      // Must be in sync with the list of dependencies in the package.json
+      // It includes all dependencies except @vector-im/compound-design-tokens
+      external: [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        "lodash",
+        "classnames",
+        "@radix-ui/react-form",
+      ],
+
+      // Without this, none of the exports are preserved in the bundle
+      preserveEntrySignatures: "strict",
+
       output: {
-        globals: {
-          react: "React",
-        },
+        format: "es",
+        // This keeps a flat structure in the output directory
+        entryFileNames: "[name].js",
+        assetFileNames: "[name][extname]",
       },
     },
   },
+
+  experimental: {
+    // This ensures we're using relative paths in the generated CSS
+    renderBuiltUrl(filename: string) {
+      return `./${filename}`;
+    },
+  },
+
   plugins: [
-    react(),
+    react({
+      jsxRuntime: "automatic",
+    }),
+
     svgr({
       exportAsDefault: true,
+
+      esbuildOptions: {
+        // This makes sure we're using the same JSX runtime as React itself
+        jsx: "automatic",
+      },
+
       svgrOptions: {
         // Using 1em in order to make SVG size inherits from text size.
         icon: "1em",
+
         svgProps: {
           // Adding a class in case we want to add global overrides, but one
           // should probably stick to using CSS modules most of the time
-          class: "cpd-icon",
+          className: "cpd-icon",
         },
       },
     }),
+
+    // Extract the types from the source files
     dts(),
   ],
 });