From 97da924872365f6ac7f42b9ae1e0091282b38743 Mon Sep 17 00:00:00 2001
From: Charlie Lamb <charlielamb20@icloud.com>
Date: Mon, 16 Feb 2026 14:12:42 +0000
Subject: [PATCH] chore: nuke legacy components

---
 .../scenarios/core/use-pricing-table/page.tsx |   92 ++
 apps/sdk-test/components/app-sidebar.tsx      |   42 +-
 apps/sdk-test/lib/scenarios.ts                |    7 +
 bun.lock                                      |    2 +-
 packages/autumn-js/components.json            |   21 -
 packages/autumn-js/package.json               |   30 +-
 packages/autumn-js/postcss.config.js          |    6 -
 .../autumn-js/scripts/css-transform-plugin.js |   28 -
 packages/autumn-js/scripts/post-build.js      |  160 ---
 packages/autumn-js/scripts/sync-registry.ts   |  216 ---
 .../autumn-js/src/generated/css-content.ts    | 1219 -----------------
 .../libraries/backend/routes/productRoutes.ts |    2 +-
 .../checkout-dialog-synced.tsx                |  484 -------
 .../checkout-dialog/lib/checkout-content.tsx  |  148 --
 .../paywall-dialog/lib/paywall-content.tsx    |   63 -
 .../paywall-dialog/paywall-dialog-synced.tsx  |   55 -
 .../lib/pricing-table-content.tsx             |   70 -
 .../pricing-table/pricing-table-synced.tsx    |  411 ------
 .../react/components/ui/accordion.tsx         |   73 -
 .../libraries/react/components/ui/button.tsx  |   58 -
 .../libraries/react/components/ui/dialog.tsx  |  157 ---
 .../libraries/react/components/ui/input.tsx   |   22 -
 .../libraries/react/components/ui/popover.tsx |   36 -
 .../libraries/react/components/ui/switch.tsx  |   31 -
 .../libraries/react/hooks/useAnalytics.tsx    |   32 -
 .../src/libraries/react/hooks/usePaywall.tsx  |   42 -
 .../autumn-js/src/libraries/react/index.ts    |   12 +-
 .../src/libraries/react/lib/utils.ts          |   11 -
 .../libraries/react/utils/inject-styles.ts    |   32 -
 packages/autumn-js/src/styles/global.css      |   83 --
 packages/autumn-js/src/styles/global_old.css  |   73 -
 packages/autumn-js/tailwind.config.ts         |  136 --
 packages/autumn-js/tsconfig.json              |    4 -
 packages/autumn-js/tsup.config.ts             |   41 +-
 packages/autumn-js/tsup.dev.config.ts         |   59 +-
 packages/sdk/.speakeasy/gen.lock              |   22 +-
 packages/sdk/.speakeasy/gen.yaml              |    2 +-
 packages/sdk/.speakeasy/workflow.lock         |    2 +-
 packages/sdk/jsr.json                         |    2 +-
 packages/sdk/package.json                     |    2 +-
 packages/sdk/src/lib/config.ts                |    4 +-
 41 files changed, 157 insertions(+), 3835 deletions(-)
 create mode 100644 apps/sdk-test/app/scenarios/core/use-pricing-table/page.tsx
 delete mode 100644 packages/autumn-js/components.json
 delete mode 100644 packages/autumn-js/postcss.config.js
 delete mode 100644 packages/autumn-js/scripts/css-transform-plugin.js
 delete mode 100644 packages/autumn-js/scripts/post-build.js
 delete mode 100644 packages/autumn-js/scripts/sync-registry.ts
 delete mode 100644 packages/autumn-js/src/generated/css-content.ts
 delete mode 100644 packages/autumn-js/src/libraries/react/components/checkout-dialog/checkout-dialog-synced.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/checkout-dialog/lib/checkout-content.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/paywall-dialog/lib/paywall-content.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/paywall-dialog/paywall-dialog-synced.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/pricing-table/lib/pricing-table-content.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/pricing-table/pricing-table-synced.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/ui/accordion.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/ui/button.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/ui/dialog.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/ui/input.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/ui/popover.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/components/ui/switch.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/hooks/useAnalytics.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/hooks/usePaywall.tsx
 delete mode 100644 packages/autumn-js/src/libraries/react/lib/utils.ts
 delete mode 100644 packages/autumn-js/src/libraries/react/utils/inject-styles.ts
 delete mode 100644 packages/autumn-js/src/styles/global.css
 delete mode 100644 packages/autumn-js/src/styles/global_old.css
 delete mode 100644 packages/autumn-js/tailwind.config.ts

diff --git a/apps/sdk-test/app/scenarios/core/use-pricing-table/page.tsx b/apps/sdk-test/app/scenarios/core/use-pricing-table/page.tsx
new file mode 100644
index 000000000..07df85c7a
--- /dev/null
+++ b/apps/sdk-test/app/scenarios/core/use-pricing-table/page.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { usePricingTable } from "autumn-js/react";
+import { useMemo, useState } from "react";
+import { DataViewer } from "@/components/debug/DataViewer";
+import { DebugCard } from "@/components/debug/DebugCard";
+import { HookStatePanel } from "@/components/debug/HookStatePanel";
+import { Button } from "@/components/ui/button";
+
+export default function UsePricingTableScenarioPage() {
+  type UsePricingTableParams = Parameters<typeof usePricingTable>[0];
+
+  const params = useMemo(
+    (): NonNullable<UsePricingTableParams> => ({
+      productDetails: undefined,
+    }),
+    [],
+  );
+
+  const { products, isLoading, error, refetch } = usePricingTable(params);
+  const [lastUpdatedAt, setLastUpdatedAt] = useState<string | null>(null);
+
+  const onRefetch = async () => {
+    await refetch();
+    setLastUpdatedAt(new Date().toISOString());
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h1 className="text-lg font-semibold tracking-tight">
+          Core / usePricingTable
+        </h1>
+        <p className="mt-1 text-sm text-zinc-500">
+          This page validates the usePricingTable hook which fetches and merges
+          product data for pricing table display.
+        </p>
+      </div>
+
+      <DebugCard
+        title="Hook State"
+        description="Loading/error lifecycle for usePricingTable"
+        actions={
+          <Button variant="outline" size="sm" onClick={onRefetch}>
+            Refetch
+          </Button>
+        }
+      >
+        <HookStatePanel
+          isLoading={isLoading}
+          error={error}
+          lastUpdatedAt={lastUpdatedAt}
+        />
+      </DebugCard>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <DebugCard
+          title="Hook Params"
+          description="Exact params passed to usePricingTable()"
+        >
+          <DataViewer
+            title="usePricingTable params"
+            value={params}
+            defaultExpandedDepth={3}
+          />
+        </DebugCard>
+        <DebugCard
+          title="Products Payload"
+          description="Merged products array returned by autumn-js/react"
+        >
+          <DataViewer
+            title="products"
+            value={products}
+            defaultExpandedDepth={2}
+          />
+        </DebugCard>
+      </div>
+
+      <DebugCard title="Error Payload" description="Error object (if any)">
+        <DataViewer
+          title="error"
+          value={
+            error
+              ? { name: error.name, message: error.message, stack: error.stack }
+              : null
+          }
+          defaultExpandedDepth={2}
+        />
+      </DebugCard>
+    </div>
+  );
+}
diff --git a/apps/sdk-test/components/app-sidebar.tsx b/apps/sdk-test/components/app-sidebar.tsx
index a7e36a13d..03e8dd647 100644
--- a/apps/sdk-test/components/app-sidebar.tsx
+++ b/apps/sdk-test/components/app-sidebar.tsx
@@ -6,8 +6,8 @@ import { useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
 import { findScenarioByHref, scenarioSections } from "@/lib/scenarios";
+import { cn } from "@/lib/utils";
 
 export const AppSidebarLayout = ({
   children,
@@ -84,7 +84,9 @@ export const AppSidebarLayout = ({
           {sidebarContent}
         </aside>
 
-        <div
+        <button
+          type="button"
+          aria-label="Close menu"
           className={cn(
             "fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity md:hidden",
             openMobile ? "opacity-100" : "pointer-events-none opacity-0",
@@ -103,19 +105,33 @@ export const AppSidebarLayout = ({
         <div className="flex min-w-0 flex-1 flex-col">
           <header className="flex h-12 items-center justify-between border-b border-zinc-200 bg-white px-3 dark:border-zinc-800 dark:bg-zinc-950 md:px-4">
             <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="md:hidden"
-                onClick={() => setOpenMobile((prev) => !prev)}
+              <Link
+                href="/"
+                className="inline-flex h-8 items-center justify-center rounded-md border border-zinc-300 bg-white px-3 text-xs font-medium text-zinc-900 transition-colors hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:border-zinc-700 dark:bg-black dark:text-zinc-100 dark:hover:bg-zinc-900"
               >
                 Menu
-              </Button>
-              <p className="text-xs text-zinc-500">
-                {active
-                  ? `${active.section.title} / ${active.item.title}`
-                  : "Select a scenario"}
-              </p>
+              </Link>
+              <div className="text-xs text-zinc-500">
+                {active ? (
+                  <>
+                    <Link
+                      href={active.section.items[0]?.href ?? "/"}
+                      className="hover:text-zinc-900 hover:underline dark:hover:text-zinc-100"
+                    >
+                      {active.section.title}
+                    </Link>
+                    <span className="mx-1">/</span>
+                    <Link
+                      href={active.item.href}
+                      className="hover:text-zinc-900 hover:underline dark:hover:text-zinc-100"
+                    >
+                      {active.item.title}
+                    </Link>
+                  </>
+                ) : (
+                  "Select a scenario"
+                )}
+              </div>
             </div>
           </header>
 
diff --git a/apps/sdk-test/lib/scenarios.ts b/apps/sdk-test/lib/scenarios.ts
index eadf9eee2..0125b98a5 100644
--- a/apps/sdk-test/lib/scenarios.ts
+++ b/apps/sdk-test/lib/scenarios.ts
@@ -40,6 +40,13 @@ export const scenarioSections: Array<ScenarioSection> = [
         description: "Inspect entity-level behavior.",
         status: "planned",
       },
+      {
+        id: "use-pricing-table",
+        title: "usePricingTable",
+        href: "/scenarios/core/use-pricing-table",
+        description: "Inspect pricing table product data.",
+        status: "ready",
+      },
     ],
   },
   {
diff --git a/bun.lock b/bun.lock
index 0d60bf823..82a748ae9 100644
--- a/bun.lock
+++ b/bun.lock
@@ -157,7 +157,7 @@
     },
     "packages/sdk": {
       "name": "@useautumn/sdk",
-      "version": "0.7.20",
+      "version": "0.7.21",
       "dependencies": {
         "zod": "^3.25.65 || ^4.0.0",
       },
diff --git a/packages/autumn-js/components.json b/packages/autumn-js/components.json
deleted file mode 100644
index 829e5d898..000000000
--- a/packages/autumn-js/components.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	"$schema": "https://ui.shadcn.com/schema.json",
-	"style": "new-york",
-	"rsc": false,
-	"tsx": true,
-	"tailwind": {
-		"config": "tailwind.config.ts",
-		"css": "src/styles/global.css",
-		"baseColor": "neutral",
-		"cssVariables": true,
-		"prefix": "au-"
-	},
-	"aliases": {
-		"components": "@/components",
-		"utils": "@/lib/utils",
-		"ui": "@/components/ui",
-		"lib": "@/lib",
-		"hooks": "@/hooks"
-	},
-	"iconLibrary": "lucide"
-}
diff --git a/packages/autumn-js/package.json b/packages/autumn-js/package.json
index 96fa8ff48..9038a199a 100644
--- a/packages/autumn-js/package.json
+++ b/packages/autumn-js/package.json
@@ -13,16 +13,13 @@
 	],
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"build": "rm -rf dist && tsup && node scripts/post-build.js",
+		"build": "rm -rf dist && tsup",
 		"build:backend": "tsup \"src/libraries/backend/**/*.ts\" --format cjs,esm --clean=false --outDir=\"./dist/libraries/backend\"",
 		"build:cli": "tsup src/cli/index.ts --format cjs --outDir dist/cli",
 		"publish-beta": "pnpm publish --tag beta",
-		"dev": "concurrently \"tsx scripts/sync-registry.ts watch\" \"nodemon --watch src --ext ts,tsx,css --exec \\\"tsup --config tsup.dev.config.ts && node scripts/post-build.js\\\"\"",
+		"dev": "nodemon --watch src --ext ts,tsx --exec \"tsup --config tsup.dev.config.ts\"",
 		"cli": "tsx src/cli/index.ts",
-		"test-cli": "node ./dist/cli/cli.mjs",
-		"dev2": "nodemon --watch src --ext ts,tsx,css --exec \"tsup --config tsup.dev.config.ts\"",
-		"sync-registry": "tsx scripts/sync-registry.ts sync",
-		"watch-registry": "tsx scripts/sync-registry.ts watch"
+		"test-cli": "node ./dist/cli/cli.mjs"
 	},
 	"module": "./dist/sdk/index.mjs",
 	"types": "./dist/sdk/index.d.ts",
@@ -101,43 +98,22 @@
 	"author": "John Yeo",
 	"license": "MIT",
 	"devDependencies": {
-		"@radix-ui/react-accordion": "^1.2.11",
-		"@radix-ui/react-dialog": "^1.1.14",
-		"@radix-ui/react-popover": "^1.1.14",
-		"@radix-ui/react-slot": "^1.2.3",
-		"@radix-ui/react-switch": "^1.2.5",
 		"@remix-run/node": "^2.16.6",
 		"@supabase/ssr": "^0.6.1",
 		"@tanstack/react-start": "^1.120.5",
 		"@types/express": "^5.0.1",
 		"@types/node": "^22.15.32",
 		"@types/react": "^19",
-		"autoprefixer": "^10.4.21",
-		"autumn-js": "^0.0.115",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"concurrently": "^9.2.0",
 		"convex": "^1.25.4",
 		"elysia": "^1.3.5",
 		"esbuild-plugin-path-alias": "^1.0.7",
-		"esbuild-postcss": "^0.0.4",
 		"express": "^5.1.0",
 		"fastify": "^5.3.3",
 		"hono": "^4.7.9",
-		"install": "^0.13.0",
-		"lucide-react": "^0.523.0",
 		"next": "^15.2.3",
 		"nodemon": "^3.1.10",
-		"postcss": "^8.5.6",
-		"postcss-nested": "^7.0.2",
-		"postcss-prefix-selector": "^2.1.1",
 		"react-dom": "^19.1.0",
 		"stripe": "^18.3.0",
-		"tailwind-merge": "^2.6.0",
-		"tailwindcss": "^3.4.1",
-		"tailwindcss-animate": "^1.0.7",
-		"tailwindcss-scoped-preflight": "^3.4.12",
-		"tsconfig-paths": "^4.2.0",
 		"tsup": "^8.4.0",
 		"tsx": "^4.19.3",
 		"typescript": "^5.8.3"
diff --git a/packages/autumn-js/postcss.config.js b/packages/autumn-js/postcss.config.js
deleted file mode 100644
index e873f1a4f..000000000
--- a/packages/autumn-js/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-};
diff --git a/packages/autumn-js/scripts/css-transform-plugin.js b/packages/autumn-js/scripts/css-transform-plugin.js
deleted file mode 100644
index 66bd026e8..000000000
--- a/packages/autumn-js/scripts/css-transform-plugin.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-// esbuild plugin to transform CSS before injection
-export function cssTransformPlugin() {
-	return {
-		name: "css-transform",
-		setup(build) {
-			// Process CSS files before they get injected
-			build.onLoad({ filter: /\.css$/ }, async (args) => {
-				const cssContent = await fs.promises.readFile(args.path, "utf8");
-
-				// Apply the same transformation as post-build.js
-				const transformedCss = cssContent.replace(
-					/(\*,\n::before,\n::after)/g,
-					".au-root *,\n.au-root ::before,\n.au-root ::after",
-				);
-
-				console.log(`🎨 Transformed CSS: ${path.basename(args.path)}`);
-
-				return {
-					contents: transformedCss,
-					loader: "css",
-				};
-			});
-		},
-	};
-}
diff --git a/packages/autumn-js/scripts/post-build.js b/packages/autumn-js/scripts/post-build.js
deleted file mode 100644
index 29116848c..000000000
--- a/packages/autumn-js/scripts/post-build.js
+++ /dev/null
@@ -1,160 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-// Post-build processing: replace CSS selectors with .au-root prefix
-function processCssFiles() {
-	const cssFiles = [
-		path.join(__dirname, "../dist/styles/global.css"),
-		path.join(__dirname, "../dist/libraries/react/index.css"),
-	];
-
-	cssFiles.forEach((cssFilePath) => {
-		if (fs.existsSync(cssFilePath)) {
-			console.log("📄 Processing CSS file:", cssFilePath);
-
-			const builtCss = fs.readFileSync(cssFilePath, "utf8");
-			let updatedCss = builtCss.replace(
-				/(\*,\n::before,\n::after)/g,
-				".au-root *,\n.au-root ::before,\n.au-root ::after",
-			);
-
-			// Also handle standalone * selectors (for custom base styles)
-			updatedCss = updatedCss.replace(/^(\* \{[^}]*\})$/gm, (match) =>
-				match.replace("* {", ".au-root * {"),
-			);
-
-			// Handle body selector
-			updatedCss = updatedCss.replace(/^(body \{[^}]*\})$/gm, (match) =>
-				match.replace("body {", ".au-root body {"),
-			);
-
-			// Handle ::backdrop selector
-			updatedCss = updatedCss.replace(/^(::backdrop \{[^}]*\})$/gm, (match) =>
-				match.replace("::backdrop {", ".au-root ::backdrop {"),
-			);
-
-			// Handle :root selector - scope to .au-root as the root container
-			updatedCss = updatedCss.replace(/^(:root \{[^}]*\})$/gm, (match) =>
-				match.replace(":root {", ".au-root {"),
-			);
-
-			// Handle .dark selector - support both .au-root.dark and .dark .au-root patterns
-			updatedCss = updatedCss.replace(/^(\.dark \{[^}]*\})$/gm, (match) => {
-				const content = match.replace(".dark {", "").replace(/^\s*\}$/, "");
-				return `.au-root.dark {\n${content}\n}\n.dark .au-root {\n${content}\n}`;
-			});
-
-			fs.writeFileSync(cssFilePath, updatedCss);
-			console.log("✅ CSS selectors updated with .au-root prefix");
-		} else {
-			console.log("⚠️ CSS file not found:", cssFilePath);
-		}
-	});
-}
-
-// Process injected CSS in JS files
-function processInjectedCss() {
-	const reactDir = path.join(__dirname, "../dist/libraries/react");
-	const files = fs
-		.readdirSync(reactDir)
-		.filter(
-			(file) =>
-				file.endsWith(".js") || file.endsWith(".mjs") || file.endsWith(".cjs"),
-		);
-
-	files.forEach((file) => {
-		const filePath = path.join(reactDir, file);
-		const content = fs.readFileSync(filePath, "utf8");
-
-		// Check if this file has styleInject and CSS content
-		if (content.includes("styleInject")) {
-			let updated = false;
-			let updatedContent = content;
-
-			// Pattern 1: *,\n::before,\n::after (with newlines)
-			if (updatedContent.includes("*,\\n::before,\\n::after")) {
-				console.log("📄 Processing injected CSS pattern 1 in:", file);
-				updatedContent = updatedContent.replace(
-					/(\*,\\n::before,\\n::after)/g,
-					".au-root *,\\n.au-root ::before,\\n.au-root ::after",
-				);
-				updated = true;
-			}
-
-			// Pattern 2: *,::before,::after (without newlines)
-			if (updatedContent.includes("*,::before,::after")) {
-				console.log("📄 Processing injected CSS pattern 2 in:", file);
-				updatedContent = updatedContent.replace(
-					/(\*,::before,::after)/g,
-					".au-root *,.au-root ::before,.au-root ::after",
-				);
-				updated = true;
-			}
-
-			// Pattern 3: standalone * selector (for custom base styles)
-			// Check for both escaped and unescaped versions
-			if (updatedContent.includes("\\* {") || updatedContent.includes("* {")) {
-				console.log("📄 Processing standalone * selector in:", file);
-				// Handle escaped version
-				updatedContent = updatedContent.replace(/(\\\* \{[^}]*\})/g, (match) =>
-					match.replace("\\* {", ".au-root * {"),
-				);
-				// Handle unescaped version in JS strings
-				updatedContent = updatedContent.replace(/(\* \{[^}]*\})/g, (match) =>
-					match.replace("* {", ".au-root * {"),
-				);
-				updated = true;
-			}
-
-			// Pattern 4: body selector
-			if (updatedContent.includes("body {")) {
-				console.log("📄 Processing body selector in:", file);
-				updatedContent = updatedContent.replace(/(body \{[^}]*\})/g, (match) =>
-					match.replace("body {", ".au-root body {"),
-				);
-				updated = true;
-			}
-
-			// Pattern 5: ::backdrop selector
-			if (updatedContent.includes("::backdrop {")) {
-				console.log("📄 Processing ::backdrop selector in:", file);
-				updatedContent = updatedContent.replace(
-					/(::backdrop \{[^}]*\})/g,
-					(match) => match.replace("::backdrop {", ".au-root ::backdrop {"),
-				);
-				updated = true;
-			}
-
-			// Pattern 6: :root selector - scope to .au-root as the root container
-			if (updatedContent.includes(":root {")) {
-				console.log("📄 Processing :root selector in:", file);
-				updatedContent = updatedContent.replace(/(:root \{[^}]*\})/g, (match) =>
-					match.replace(":root {", ".au-root {"),
-				);
-				updated = true;
-			}
-
-			// Pattern 7: .dark selector - support both patterns
-			if (updatedContent.includes(".dark {")) {
-				console.log("📄 Processing .dark selector in:", file);
-				updatedContent = updatedContent.replace(
-					/(\.dark \{[^}]*\})/g,
-					(match) => {
-						const content = match.replace(".dark {", "").replace(/\}$/, "");
-						return `.au-root.dark {${content}}.dark .au-root {${content}}`;
-					},
-				);
-				updated = true;
-			}
-
-			if (updated) {
-				fs.writeFileSync(filePath, updatedContent);
-				console.log("✅ Injected CSS selectors updated with .au-root prefix");
-			}
-		}
-	});
-}
-
-// Run the processing
-processCssFiles();
-processInjectedCss();
diff --git a/packages/autumn-js/scripts/sync-registry.ts b/packages/autumn-js/scripts/sync-registry.ts
deleted file mode 100644
index 48158406b..000000000
--- a/packages/autumn-js/scripts/sync-registry.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-#!/usr/bin/env tsx
-
-import { watch } from "fs";
-import fs from "fs/promises";
-import path from "path";
-
-const UI_REGISTRY_PATH = "../ui/registry";
-const SYNCED_COMPONENTS_PATH = "./src/libraries/react/components";
-
-interface ComponentConfig {
-	syncedName: string;
-	registryName: string;
-	dependencies?: string[];
-}
-
-const COMPONENTS: ComponentConfig[] = [
-	{
-		syncedName: "checkout-dialog",
-		registryName: "checkout-dialog",
-		dependencies: ["checkout-content"],
-	},
-	{
-		syncedName: "paywall-dialog",
-		registryName: "paywall-dialog",
-		dependencies: ["paywall-content"],
-	},
-	{
-		syncedName: "pricing-table",
-		registryName: "pricing-table",
-		dependencies: ["pricing-table-content"],
-	},
-];
-
-/**
- * Remove 'au-' prefixes from Tailwind classes
- */
-function removeAuPrefixes(content: string): string {
-	// Replace all occurrences of 'au-' with empty string in className attributes
-	return content.replace(/au-/g, "");
-}
-
-/**
- * Transform imports from synced format to registry format
- */
-function transformImportsToRegistry(content: string): string {
-	// Transform path aliases back to autumn-js imports
-	content = content.replace(/from ["']@\/index["']/g, 'from "autumn-js/react"');
-	content = content.replace(/from ["']@sdk["']/g, 'from "autumn-js"');
-
-	// Transform relative lib imports to registry format (but NOT utils)
-	content = content.replace(
-		/from ["'].\/lib\/(?!utils)([^"']+)["']/g,
-		'from "@/registry/$COMPONENT_NAME/lib/$1"',
-	);
-
-	// Transform synced component imports back to registry format
-	content = content.replace(
-		/from ["']..\/([^/]+)\/\1-synced["']/g,
-		'from "@/registry/$1/$1"',
-	);
-
-	// Remove loading styles import and replace with CSS classes
-	if (content.includes('from "@/utils/inject-styles"')) {
-		// Remove the import line
-		content = content.replace(
-			/import\s+{[^}]*loadingStyles[^}]*}\s+from\s+["']@\/utils\/inject-styles["'];?\s*\n/g,
-			"",
-		);
-
-		// Replace inline styles with CSS classes
-		content = content.replace(
-			/style={loadingStyles}/g,
-			'className="w-full h-full flex justify-center items-center min-h-[300px]"',
-		);
-		content = content.replace(
-			/style={spinnerStyles}/g,
-			'className="w-6 h-6 text-zinc-400 animate-spin"',
-		);
-	}
-
-	// Keep @/lib/utils and @/components/ui imports as-is
-
-	return content;
-}
-
-/**
- * Sync a single component from synced version to registry
- */
-async function syncComponentToRegistry(config: ComponentConfig): Promise<void> {
-	const syncedDir = path.join(SYNCED_COMPONENTS_PATH, config.syncedName);
-	const registryDir = path.join(UI_REGISTRY_PATH, config.registryName);
-
-	try {
-		// Read the synced component file
-		const syncedFilePath = path.join(
-			syncedDir,
-			`${config.syncedName}-synced.tsx`,
-		);
-		const syncedContent = await fs.readFile(syncedFilePath, "utf-8");
-
-		// Transform content: remove au- prefixes and transform imports
-		let transformedContent = removeAuPrefixes(syncedContent);
-		transformedContent = transformImportsToRegistry(transformedContent);
-
-		// Replace the placeholder with actual component name
-		transformedContent = transformedContent.replace(
-			/\$COMPONENT_NAME/g,
-			config.registryName,
-		);
-
-		// Determine target path (handle subdirectory structure)
-		let targetFilePath = path.join(registryDir, `${config.registryName}.tsx`);
-
-		// Check if registry uses subdirectory structure
-		const subDirPath = path.join(
-			registryDir,
-			config.registryName,
-			`${config.registryName}.tsx`,
-		);
-		try {
-			await fs.access(subDirPath);
-			targetFilePath = subDirPath;
-		} catch {
-			// Use direct path
-		}
-
-		// Write the transformed content
-		await fs.writeFile(targetFilePath, transformedContent);
-
-		// Sync lib dependencies if they exist
-		if (config.dependencies) {
-			const syncedLibDir = path.join(syncedDir, "lib");
-			const registryLibDir = path.join(registryDir, "lib");
-
-			try {
-				for (const dep of config.dependencies) {
-					const syncedDepPath = path.join(syncedLibDir, `${dep}.tsx`);
-					const syncedDepContent = await fs.readFile(syncedDepPath, "utf-8");
-
-					// Transform the dependency content
-					let transformedDepContent = removeAuPrefixes(syncedDepContent);
-					transformedDepContent = transformImportsToRegistry(
-						transformedDepContent,
-					);
-					transformedDepContent = transformedDepContent.replace(
-						/\$COMPONENT_NAME/g,
-						config.registryName,
-					);
-
-					await fs.writeFile(
-						path.join(registryLibDir, `${dep}.tsx`),
-						transformedDepContent,
-					);
-				}
-			} catch (error) {
-				console.warn(`No lib directory found for synced ${config.syncedName}`);
-			}
-		}
-
-		console.log(
-			`✅ Synced ${config.syncedName} -> registry/${config.registryName}`,
-		);
-	} catch (error) {
-		console.error(`❌ Failed to sync ${config.syncedName}:`, error);
-	}
-}
-
-/**
- * Sync all components to registry
- */
-async function syncAllToRegistry(): Promise<void> {
-	console.log("🔄 Syncing components to registry...");
-
-	for (const component of COMPONENTS) {
-		await syncComponentToRegistry(component);
-	}
-
-	console.log("🎉 Registry sync complete!");
-}
-
-/**
- * Watch synced components for changes
- */
-function watchSyncedComponents(): void {
-	console.log("👀 Watching synced components for changes...");
-
-	// Watch each component directory
-	COMPONENTS.forEach((config) => {
-		const componentDir = path.join(SYNCED_COMPONENTS_PATH, config.syncedName);
-
-		watch(componentDir, { recursive: true }, (_: any, filename: any) => {
-			if (filename && filename.endsWith(".tsx")) {
-				console.log(`📝 Detected change in ${config.syncedName}: ${filename}`);
-				syncComponentToRegistry(config).catch(console.error);
-			}
-		});
-	});
-}
-
-// CLI interface
-const command = process.argv[2];
-
-switch (command) {
-	case "sync":
-		syncAllToRegistry().catch(console.error);
-		break;
-	case "watch":
-		syncAllToRegistry()
-			.then(() => watchSyncedComponents())
-			.catch(console.error);
-		break;
-	default:
-		console.log("Usage: tsx sync-registry.ts [sync|watch]");
-		console.log("  sync     - Sync synced components to registry");
-		console.log("  watch    - Sync and watch synced components for changes");
-}
diff --git a/packages/autumn-js/src/generated/css-content.ts b/packages/autumn-js/src/generated/css-content.ts
deleted file mode 100644
index 88ec29878..000000000
--- a/packages/autumn-js/src/generated/css-content.ts
+++ /dev/null
@@ -1,1219 +0,0 @@
-// Auto-generated CSS content - do not edit manually
-export const CSS_CONTENT = `/* src/styles/global.css */
-*:where(.au-root, .au-root *),
-:where(.au-root, .au-root *)::before,
-:where(.au-root, .au-root *)::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-:where(.au-root, .au-root *)::before,
-:where(.au-root, .au-root *)::after {
-  --tw-content: "";
-}
-.au-root {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  -webkit-tap-highlight-color: transparent;
-}
-.au-root {
-  margin: 0;
-  line-height: inherit;
-}
-hr:where(.au-root, .au-root *) {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
-}
-abbr:where([title]):where(.au-root, .au-root *) {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-h1:where(.au-root, .au-root *),
-h2:where(.au-root, .au-root *),
-h3:where(.au-root, .au-root *),
-h4:where(.au-root, .au-root *),
-h5:where(.au-root, .au-root *),
-h6:where(.au-root, .au-root *) {
-  font-size: inherit;
-  font-weight: inherit;
-}
-a:where(.au-root, .au-root *) {
-  color: inherit;
-  text-decoration: inherit;
-}
-b:where(.au-root, .au-root *),
-strong:where(.au-root, .au-root *) {
-  font-weight: bolder;
-}
-code:where(.au-root, .au-root *),
-kbd:where(.au-root, .au-root *),
-samp:where(.au-root, .au-root *),
-pre:where(.au-root, .au-root *) {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace;
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  font-size: 1em;
-}
-small:where(.au-root, .au-root *) {
-  font-size: 80%;
-}
-sub:where(.au-root, .au-root *),
-sup:where(.au-root, .au-root *) {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub:where(.au-root, .au-root *) {
-  bottom: -0.25em;
-}
-sup:where(.au-root, .au-root *) {
-  top: -0.5em;
-}
-table:where(.au-root, .au-root *) {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-}
-button:where(.au-root, .au-root *),
-input:where(.au-root, .au-root *),
-optgroup:where(.au-root, .au-root *),
-select:where(.au-root, .au-root *),
-textarea:where(.au-root, .au-root *) {
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-button:where(.au-root, .au-root *),
-select:where(.au-root, .au-root *) {
-  text-transform: none;
-}
-button:where(.au-root, .au-root *),
-[type=button]:where(.au-root, .au-root *),
-[type=reset]:where(.au-root, .au-root *),
-[type=submit]:where(.au-root, .au-root *) {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
-:-moz-focusring:where(.au-root, .au-root *) {
-  outline: auto;
-}
-:-moz-ui-invalid:where(.au-root, .au-root *) {
-  box-shadow: none;
-}
-progress:where(.au-root, .au-root *) {
-  vertical-align: baseline;
-}
-:where(.au-root, .au-root *) ::-webkit-inner-spin-button,
-:where(.au-root, .au-root *) ::-webkit-outer-spin-button {
-  height: auto;
-}
-[type=search]:where(.au-root, .au-root *) {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-:where(.au-root, .au-root *) ::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-:where(.au-root, .au-root *) ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-summary:where(.au-root, .au-root *) {
-  display: list-item;
-}
-blockquote:where(.au-root, .au-root *),
-dl:where(.au-root, .au-root *),
-dd:where(.au-root, .au-root *),
-h1:where(.au-root, .au-root *),
-h2:where(.au-root, .au-root *),
-h3:where(.au-root, .au-root *),
-h4:where(.au-root, .au-root *),
-h5:where(.au-root, .au-root *),
-h6:where(.au-root, .au-root *),
-hr:where(.au-root, .au-root *),
-figure:where(.au-root, .au-root *),
-p:where(.au-root, .au-root *),
-pre:where(.au-root, .au-root *) {
-  margin: 0;
-}
-fieldset:where(.au-root, .au-root *) {
-  margin: 0;
-  padding: 0;
-}
-legend:where(.au-root, .au-root *) {
-  padding: 0;
-}
-ol:where(.au-root, .au-root *),
-ul:where(.au-root, .au-root *),
-menu:where(.au-root, .au-root *) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-dialog:where(.au-root, .au-root *) {
-  padding: 0;
-}
-textarea:where(.au-root, .au-root *) {
-  resize: vertical;
-}
-:where(.au-root, .au-root *) input::-moz-placeholder,
-:where(.au-root, .au-root *) textarea::-moz-placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-:where(.au-root, .au-root *) input::placeholder,
-:where(.au-root, .au-root *) textarea::placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-button:where(.au-root, .au-root *),
-[role=button]:where(.au-root, .au-root *) {
-  cursor: pointer;
-}
-:disabled:where(.au-root, .au-root *) {
-  cursor: default;
-}
-img:where(.au-root, .au-root *),
-svg:where(.au-root, .au-root *),
-video:where(.au-root, .au-root *),
-canvas:where(.au-root, .au-root *),
-audio:where(.au-root, .au-root *),
-iframe:where(.au-root, .au-root *),
-embed:where(.au-root, .au-root *),
-object:where(.au-root, .au-root *) {
-  display: block;
-  vertical-align: middle;
-}
-img:where(.au-root, .au-root *),
-video:where(.au-root, .au-root *) {
-  max-width: 100%;
-  height: auto;
-}
-[hidden]:where(.au-root, .au-root *) {
-  display: none;
-}
-.au-root *,
-.au-root ::before,
-.au-root ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-}
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-}
-.au-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-.au-pointer-events-none {
-  pointer-events: none;
-}
-.au-fixed {
-  position: fixed;
-}
-.au-absolute {
-  position: absolute;
-}
-.au-relative {
-  position: relative;
-}
-.au-inset-0 {
-  inset: 0px;
-}
-.au-left-\\[50\\%\\] {
-  left: 50%;
-}
-.au-right-4 {
-  right: 1rem;
-}
-.au-right-\\[-1px\\] {
-  right: -1px;
-}
-.au-top-4 {
-  top: 1rem;
-}
-.au-top-\\[-1px\\] {
-  top: -1px;
-}
-.au-top-\\[50\\%\\] {
-  top: 50%;
-}
-.au-z-50 {
-  z-index: 50;
-}
-.au-my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.au-mb-1 {
-  margin-bottom: 0.25rem;
-}
-.au-mb-2 {
-  margin-bottom: 0.5rem;
-}
-.au-mb-4 {
-  margin-bottom: 1rem;
-}
-.au-mb-6 {
-  margin-bottom: 1.5rem;
-}
-.au-mb-8 {
-  margin-bottom: 2rem;
-}
-.au-mr-2 {
-  margin-right: 0.5rem;
-}
-.au-mt-0 {
-  margin-top: 0px;
-}
-.au-mt-0\\.5 {
-  margin-top: 0.125rem;
-}
-.au-mt-1 {
-  margin-top: 0.25rem;
-}
-.au-mt-2 {
-  margin-top: 0.5rem;
-}
-.au-mt-4 {
-  margin-top: 1rem;
-}
-.au-line-clamp-2 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-.au-block {
-  display: block;
-}
-.au-flex {
-  display: flex;
-}
-.au-inline-flex {
-  display: inline-flex;
-}
-.au-grid {
-  display: grid;
-}
-.\\!au-h-3 {
-  height: 0.75rem !important;
-}
-.au-h-10 {
-  height: 2.5rem;
-}
-.au-h-16 {
-  height: 4rem;
-}
-.au-h-4 {
-  height: 1rem;
-}
-.au-h-5 {
-  height: 1.25rem;
-}
-.au-h-6 {
-  height: 1.5rem;
-}
-.au-h-8 {
-  height: 2rem;
-}
-.au-h-9 {
-  height: 2.25rem;
-}
-.au-h-full {
-  height: 100%;
-}
-.au-min-h-\\[300px\\] {
-  min-height: 300px;
-}
-.au-w-4 {
-  width: 1rem;
-}
-.au-w-6 {
-  width: 1.5rem;
-}
-.au-w-8 {
-  width: 2rem;
-}
-.au-w-9 {
-  width: 2.25rem;
-}
-.au-w-full {
-  width: 100%;
-}
-.au-min-w-16 {
-  min-width: 4rem;
-}
-.au-min-w-20 {
-  min-width: 5rem;
-}
-.au-max-w-lg {
-  max-width: 32rem;
-}
-.au-max-w-xl {
-  max-width: 36rem;
-}
-.au-flex-1 {
-  flex: 1 1 0%;
-}
-.au-flex-shrink-0 {
-  flex-shrink: 0;
-}
-.au-shrink-0 {
-  flex-shrink: 0;
-}
-.au-flex-grow {
-  flex-grow: 1;
-}
-.au-translate-x-\\[-50\\%\\] {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.au-translate-y-\\[-50\\%\\] {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.au-translate-y-\\[130\\%\\] {
-  --tw-translate-y: 130%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-@keyframes au-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.au-animate-spin {
-  animation: au-spin 1s linear infinite;
-}
-.au-cursor-pointer {
-  cursor: pointer;
-}
-.au-grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-.au-flex-row {
-  flex-direction: row;
-}
-.au-flex-col {
-  flex-direction: column;
-}
-.au-flex-col-reverse {
-  flex-direction: column-reverse;
-}
-.au-items-start {
-  align-items: flex-start;
-}
-.au-items-center {
-  align-items: center;
-}
-.au-justify-center {
-  justify-content: center;
-}
-.au-justify-between {
-  justify-content: space-between;
-}
-.au-gap-0 {
-  gap: 0px;
-}
-.au-gap-1 {
-  gap: 0.25rem;
-}
-.au-gap-2 {
-  gap: 0.5rem;
-}
-.au-gap-4 {
-  gap: 1rem;
-}
-.au-gap-x-4 {
-  -moz-column-gap: 1rem;
-  column-gap: 1rem;
-}
-.au-space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.au-space-y-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-}
-.au-space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
-}
-.au-space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-.au-overflow-hidden {
-  overflow: hidden;
-}
-.au-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.au-whitespace-nowrap {
-  white-space: nowrap;
-}
-.au-rounded-full {
-  border-radius: 9999px;
-}
-.au-rounded-lg {
-  border-radius: var(--au-radius);
-}
-.au-rounded-md {
-  border-radius: calc(var(--au-radius) - 2px);
-}
-.au-rounded-sm {
-  border-radius: calc(var(--au-radius) - 4px);
-}
-.au-rounded-bl-lg {
-  border-bottom-left-radius: var(--au-radius);
-}
-.au-border {
-  border-width: 1px;
-}
-.au-border-2 {
-  border-width: 2px;
-}
-.au-border-y {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-.au-border-t {
-  border-top-width: 1px;
-}
-.au-border-input {
-  border-color: hsl(var(--au-input));
-}
-.au-border-transparent {
-  border-color: transparent;
-}
-.au-bg-background {
-  background-color: hsl(var(--au-background));
-}
-.au-bg-black\\/80 {
-  background-color: rgb(0 0 0 / 0.8);
-}
-.au-bg-destructive {
-  background-color: hsl(var(--au-destructive));
-}
-.au-bg-primary {
-  background-color: hsl(var(--au-primary));
-}
-.au-bg-secondary {
-  background-color: hsl(var(--au-secondary));
-}
-.au-bg-secondary\\/40 {
-  background-color: hsl(var(--au-secondary) / 0.4);
-}
-.au-p-0 {
-  padding: 0px;
-}
-.au-p-6 {
-  padding: 1.5rem;
-}
-.\\!au-py-10 {
-  padding-top: 2.5rem !important;
-  padding-bottom: 2.5rem !important;
-}
-.au-px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.au-px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.au-px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-.au-px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-.au-py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.au-py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-.au-py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-.au-pb-0 {
-  padding-bottom: 0px;
-}
-.au-pb-0\\.5 {
-  padding-bottom: 0.125rem;
-}
-.au-pb-4 {
-  padding-bottom: 1rem;
-}
-.au-pl-6 {
-  padding-left: 1.5rem;
-}
-.au-pr-3 {
-  padding-right: 0.75rem;
-}
-.au-pt-4 {
-  padding-top: 1rem;
-}
-.au-text-center {
-  text-align: center;
-}
-.au-text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-.au-text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-.au-text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.au-text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-.au-text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.au-font-bold {
-  font-weight: 700;
-}
-.au-font-medium {
-  font-weight: 500;
-}
-.au-font-normal {
-  font-weight: 400;
-}
-.au-font-semibold {
-  font-weight: 600;
-}
-.au-leading-none {
-  line-height: 1;
-}
-.au-tracking-tight {
-  letter-spacing: -0.025em;
-}
-.au-text-destructive-foreground {
-  color: hsl(var(--au-destructive-foreground));
-}
-.au-text-foreground {
-  color: hsl(var(--au-foreground));
-}
-.au-text-muted-foreground {
-  color: hsl(var(--au-muted-foreground));
-}
-.au-text-primary {
-  color: hsl(var(--au-primary));
-}
-.au-text-primary-foreground {
-  color: hsl(var(--au-primary-foreground));
-}
-.au-text-secondary-foreground {
-  color: hsl(var(--au-secondary-foreground));
-}
-.au-text-zinc-400 {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity));
-}
-.au-underline-offset-4 {
-  text-underline-offset: 4px;
-}
-.au-opacity-70 {
-  opacity: 0.7;
-}
-.au-shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
-.au-shadow-inner {
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
-.au-shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
-.au-shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
-.au-shadow-stone-400 {
-  --tw-shadow-color: #a8a29e;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-.au-ring-0 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-.au-ring-offset-background {
-  --tw-ring-offset-color: hsl(var(--au-background));
-}
-.au-transition {
-  transition-property:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke,
-    opacity,
-    box-shadow,
-    transform,
-    filter,
-    -webkit-backdrop-filter;
-  transition-property:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke,
-    opacity,
-    box-shadow,
-    transform,
-    filter,
-    backdrop-filter;
-  transition-property:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke,
-    opacity,
-    box-shadow,
-    transform,
-    filter,
-    backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.au-transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.au-transition-colors {
-  transition-property:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.au-transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.au-transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.au-duration-200 {
-  transition-duration: 200ms;
-}
-.au-duration-300 {
-  transition-duration: 300ms;
-}
-@keyframes enter {
-  from {
-    opacity: var(--tw-enter-opacity, 1);
-    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
-  }
-}
-@keyframes exit {
-  to {
-    opacity: var(--tw-exit-opacity, 1);
-    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
-  }
-}
-.au-duration-200 {
-  animation-duration: 200ms;
-}
-.au-duration-300 {
-  animation-duration: 300ms;
-}
-:root {
-  --au-background: 0 0% 100%;
-  --au-foreground: 240 10% 3.9%;
-  --au-card: 0 0% 100%;
-  --au-card-foreground: 240 10% 3.9%;
-  --au-popover: 0 0% 100%;
-  --au-popover-foreground: 240 10% 3.9%;
-  --au-primary: 240 5.9% 10%;
-  --au-primary-foreground: 0 0% 98%;
-  --au-secondary: 240 4.8% 95.9%;
-  --au-secondary-foreground: 240 5.9% 10%;
-  --au-muted: 240 4.8% 95.9%;
-  --au-muted-foreground: 240 3.8% 46.1%;
-  --au-accent: 240 4.8% 95.9%;
-  --au-accent-foreground: 240 5.9% 10%;
-  --au-destructive: 0 84.2% 60.2%;
-  --au-destructive-foreground: 0 0% 98%;
-  --au-border: 240 5.9% 90%;
-  --au-input: 240 5.9% 90%;
-  --au-ring: 240 10% 3.9%;
-  --au-chart-1: 12 76% 61%;
-  --au-chart-2: 173 58% 39%;
-  --au-chart-3: 197 37% 24%;
-  --au-chart-4: 43 74% 66%;
-  --au-chart-5: 27 87% 67%;
-  --au-radius: 0.5rem;
-  --au-sidebar-background: 0 0% 98%;
-  --au-sidebar-foreground: 240 5.3% 26.1%;
-  --au-sidebar-primary: 240 5.9% 10%;
-  --au-sidebar-primary-foreground: 0 0% 98%;
-  --au-sidebar-accent: 240 4.8% 95.9%;
-  --au-sidebar-accent-foreground: 240 5.9% 10%;
-  --au-sidebar-border: 220 13% 91%;
-  --au-sidebar-ring: 217.2 91.2% 59.8%;
-}
-.dark {
-  --au-background: 240 10% 3.9%;
-  --au-foreground: 0 0% 98%;
-  --au-card: 240 10% 3.9%;
-  --au-card-foreground: 0 0% 98%;
-  --au-popover: 240 10% 3.9%;
-  --au-popover-foreground: 0 0% 98%;
-  --au-primary: 0 0% 98%;
-  --au-primary-foreground: 240 5.9% 10%;
-  --au-secondary: 240 3.7% 15.9%;
-  --au-secondary-foreground: 0 0% 98%;
-  --au-muted: 240 3.7% 15.9%;
-  --au-muted-foreground: 240 5% 64.9%;
-  --au-accent: 240 3.7% 15.9%;
-  --au-accent-foreground: 0 0% 98%;
-  --au-destructive: 0 62.8% 30.6%;
-  --au-destructive-foreground: 0 0% 98%;
-  --au-border: 240 3.7% 15.9%;
-  --au-input: 240 3.7% 15.9%;
-  --au-ring: 240 4.9% 83.9%;
-  --au-chart-1: 220 70% 50%;
-  --au-chart-2: 160 60% 45%;
-  --au-chart-3: 30 80% 55%;
-  --au-chart-4: 280 65% 60%;
-  --au-chart-5: 340 75% 55%;
-  --au-sidebar-background: 240 5.9% 10%;
-  --au-sidebar-foreground: 240 4.8% 95.9%;
-  --au-sidebar-primary: 224.3 76.3% 48%;
-  --au-sidebar-primary-foreground: 0 0% 100%;
-  --au-sidebar-accent: 240 3.7% 15.9%;
-  --au-sidebar-accent-foreground: 240 4.8% 95.9%;
-  --au-sidebar-border: 240 3.7% 15.9%;
-  --au-sidebar-ring: 217.2 91.2% 59.8%;
-}
-.hover\\:au-bg-accent:hover {
-  background-color: hsl(var(--au-accent));
-}
-.hover\\:au-bg-destructive\\/90:hover {
-  background-color: hsl(var(--au-destructive) / 0.9);
-}
-.hover\\:au-bg-primary\\/90:hover {
-  background-color: hsl(var(--au-primary) / 0.9);
-}
-.hover\\:au-bg-secondary\\/80:hover {
-  background-color: hsl(var(--au-secondary) / 0.8);
-}
-.hover\\:au-text-accent-foreground:hover {
-  color: hsl(var(--au-accent-foreground));
-}
-.hover\\:au-underline:hover {
-  text-decoration-line: underline;
-}
-.hover\\:au-opacity-100:hover {
-  opacity: 1;
-}
-.hover\\:au-brightness-90:hover {
-  --tw-brightness: brightness(.9);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-.focus\\:au-outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.focus\\:au-ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-.focus\\:au-ring-ring:focus {
-  --tw-ring-color: hsl(var(--au-ring));
-}
-.focus\\:au-ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-.focus-visible\\:au-outline-none:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.focus-visible\\:au-ring-1:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-.focus-visible\\:au-ring-2:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-.focus-visible\\:au-ring-ring:focus-visible {
-  --tw-ring-color: hsl(var(--au-ring));
-}
-.focus-visible\\:au-ring-offset-2:focus-visible {
-  --tw-ring-offset-width: 2px;
-}
-.focus-visible\\:au-ring-offset-background:focus-visible {
-  --tw-ring-offset-color: hsl(var(--au-background));
-}
-.disabled\\:au-pointer-events-none:disabled {
-  pointer-events: none;
-}
-.disabled\\:au-opacity-50:disabled {
-  opacity: 0.5;
-}
-.au-group:hover .group-hover\\:au-mt-0 {
-  margin-top: 0px;
-}
-.au-group:hover .group-hover\\:au-translate-y-0 {
-  --tw-translate-y: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.au-group:hover .group-hover\\:au-translate-y-\\[-130\\%\\] {
-  --tw-translate-y: -130%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.data-\\[state\\=checked\\]\\:au-translate-x-4[data-state=checked] {
-  --tw-translate-x: 1rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.data-\\[state\\=unchecked\\]\\:au-translate-x-0[data-state=unchecked] {
-  --tw-translate-x: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.data-\\[state\\=checked\\]\\:au-bg-primary[data-state=checked] {
-  background-color: hsl(var(--au-primary));
-}
-.data-\\[state\\=open\\]\\:au-bg-accent[data-state=open] {
-  background-color: hsl(var(--au-accent));
-}
-.data-\\[state\\=unchecked\\]\\:au-bg-input[data-state=unchecked] {
-  background-color: hsl(var(--au-input));
-}
-.data-\\[state\\=open\\]\\:au-text-muted-foreground[data-state=open] {
-  color: hsl(var(--au-muted-foreground));
-}
-.data-\\[state\\=open\\]\\:au-animate-in[data-state=open] {
-  animation-name: enter;
-  animation-duration: 150ms;
-  --tw-enter-opacity: initial;
-  --tw-enter-scale: initial;
-  --tw-enter-rotate: initial;
-  --tw-enter-translate-x: initial;
-  --tw-enter-translate-y: initial;
-}
-.data-\\[state\\=closed\\]\\:au-animate-out[data-state=closed] {
-  animation-name: exit;
-  animation-duration: 150ms;
-  --tw-exit-opacity: initial;
-  --tw-exit-scale: initial;
-  --tw-exit-rotate: initial;
-  --tw-exit-translate-x: initial;
-  --tw-exit-translate-y: initial;
-}
-.data-\\[state\\=closed\\]\\:au-fade-out-0[data-state=closed] {
-  --tw-exit-opacity: 0;
-}
-.data-\\[state\\=open\\]\\:au-fade-in-0[data-state=open] {
-  --tw-enter-opacity: 0;
-}
-.data-\\[state\\=closed\\]\\:au-zoom-out-95[data-state=closed] {
-  --tw-exit-scale: .95;
-}
-.data-\\[state\\=open\\]\\:au-zoom-in-95[data-state=open] {
-  --tw-enter-scale: .95;
-}
-.data-\\[state\\=closed\\]\\:au-slide-out-to-left-1\\/2[data-state=closed] {
-  --tw-exit-translate-x: -50%;
-}
-.data-\\[state\\=closed\\]\\:au-slide-out-to-top-\\[48\\%\\][data-state=closed] {
-  --tw-exit-translate-y: -48%;
-}
-.data-\\[state\\=open\\]\\:au-slide-in-from-left-1\\/2[data-state=open] {
-  --tw-enter-translate-x: -50%;
-}
-.data-\\[state\\=open\\]\\:au-slide-in-from-top-\\[48\\%\\][data-state=open] {
-  --tw-enter-translate-y: -48%;
-}
-:is(.au-dark .dark\\:au-shadow-zinc-800\\/80) {
-  --tw-shadow-color: rgb(39 39 42 / 0.8);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-@media (min-width: 640px) {
-  .sm\\:au-h-7 {
-    height: 1.75rem;
-  }
-  .sm\\:au-grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .sm\\:au-flex-row {
-    flex-direction: row;
-  }
-  .sm\\:au-items-center {
-    align-items: center;
-  }
-  .sm\\:au-justify-end {
-    justify-content: flex-end;
-  }
-  .sm\\:au-gap-2 {
-    gap: 0.5rem;
-  }
-  .sm\\:au-space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-  .sm\\:au-rounded-lg {
-    border-radius: var(--au-radius);
-  }
-  .sm\\:au-pb-0 {
-    padding-bottom: 0px;
-  }
-  .sm\\:au-text-left {
-    text-align: left;
-  }
-}
-@media (min-width: 1024px) {
-  .lg\\:au-right-4 {
-    right: 1rem;
-  }
-  .lg\\:au-top-4 {
-    top: 1rem;
-  }
-  .lg\\:au-h-\\[calc\\(100\\%\\+48px\\)\\] {
-    height: calc(100% + 48px);
-  }
-  .lg\\:au--translate-y-12 {
-    --tw-translate-y: -3rem;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .lg\\:au--translate-y-6 {
-    --tw-translate-y: -1.5rem;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .lg\\:au-translate-y-6 {
-    --tw-translate-y: 1.5rem;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .lg\\:au-grid-cols-\\[repeat\\(auto-fit\\,minmax\\(200px\\,1fr\\)\\)\\] {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  }
-  .lg\\:au-rounded-full {
-    border-radius: 9999px;
-  }
-  .lg\\:au-py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-  .lg\\:au-py-0\\.5 {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
-  }
-  .lg\\:au-shadow-lg {
-    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-    box-shadow:
-      var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-  }
-}
-.\\[\\&_svg\\]\\:au-pointer-events-none svg {
-  pointer-events: none;
-}
-.\\[\\&_svg\\]\\:au-size-4 svg {
-  width: 1rem;
-  height: 1rem;
-}
-.\\[\\&_svg\\]\\:au-shrink-0 svg {
-  flex-shrink: 0;
-}
-`;
diff --git a/packages/autumn-js/src/libraries/backend/routes/productRoutes.ts b/packages/autumn-js/src/libraries/backend/routes/productRoutes.ts
index c90805e17..75a007c1f 100644
--- a/packages/autumn-js/src/libraries/backend/routes/productRoutes.ts
+++ b/packages/autumn-js/src/libraries/backend/routes/productRoutes.ts
@@ -5,7 +5,7 @@ import { withAuth } from "../utils/withAuth";
 
 const listProductsHandler = withAuth({
 	fn: async ({ autumn }: { autumn: Autumn }) => {
-		return await autumn.plans.getPlans();
+		return await autumn.plans.list();
 	},
 	requireCustomer: false,
 });
diff --git a/packages/autumn-js/src/libraries/react/components/checkout-dialog/checkout-dialog-synced.tsx b/packages/autumn-js/src/libraries/react/components/checkout-dialog/checkout-dialog-synced.tsx
deleted file mode 100644
index be3e3df53..000000000
--- a/packages/autumn-js/src/libraries/react/components/checkout-dialog/checkout-dialog-synced.tsx
+++ /dev/null
@@ -1,484 +0,0 @@
-"use client";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-// import type { CheckoutParams, CheckoutResult, ProductItem } from "@sdk";
-import type { Autumn } from "@sdk";
-import { ArrowRight, ChevronDown, Loader2 } from "lucide-react";
-import type React from "react";
-import { useEffect, useState } from "react";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-} from "../ui/accordion";
-import { Button } from "../ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogFooter,
-	DialogTitle,
-} from "../ui/dialog";
-import { Input } from "../ui/input";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "../ui/popover";
-import { useCustomer } from "../../index";
-import { cn } from "../../lib/utils";
-import { getCheckoutContent } from "./lib/checkout-content";
-
-export interface CheckoutDialogProps {
-	open: boolean;
-	setOpen: (open: boolean) => void;
-	checkoutResult: Autumn.CheckoutResponse;
-	checkoutParams?: Autumn.CheckoutParams;
-}
-
-const formatCurrency = ({
-	amount,
-	currency,
-}: {
-	amount: number;
-	currency: string;
-}) => {
-	return new Intl.NumberFormat("en-US", {
-		style: "currency",
-		currency: currency,
-	}).format(amount);
-};
-
-export default function CheckoutDialog(params: CheckoutDialogProps) {
-	const { attach } = useCustomer();
-	const [checkoutResult, setCheckoutResult] = useState<
-		Autumn.CheckoutResponse | undefined
-	>(params?.checkoutResult);
-
-	useEffect(() => {
-		if (params.checkoutResult) {
-			setCheckoutResult(params.checkoutResult);
-		}
-	}, [params.checkoutResult]);
-
-	const [loading, setLoading] = useState(false);
-
-	if (!checkoutResult) {
-		return <></>;
-	}
-
-	const { open, setOpen } = params;
-	const { title, message } = getCheckoutContent(checkoutResult);
-
-	const isFree = checkoutResult?.product?.properties?.is_free;
-	const isPaid = isFree === false;
-
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogContent className="au-p-0 au-pt-4 au-gap-0 au-text-foreground au-text-sm">
-				<DialogTitle className="au-px-6 au-mb-1">{title}</DialogTitle>
-				<div className="au-px-6 au-mt-1 au-mb-4 au-text-muted-foreground">
-					{message}
-				</div>
-
-				{isPaid && checkoutResult && (
-					<PriceInformation
-						checkoutResult={checkoutResult}
-						setCheckoutResult={setCheckoutResult}
-					/>
-				)}
-
-				<DialogFooter className="au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-pl-6 au-pr-3 au-bg-secondary au-border-t au-shadow-inner">
-					<Button
-						size="sm"
-						onClick={async () => {
-							setLoading(true);
-
-							const options = checkoutResult.options?.map(
-								(option: Autumn.CheckoutResponse.Option) => {
-									return {
-										featureId: option.feature_id,
-										quantity: option.quantity,
-									};
-								},
-							);
-
-							await attach({
-								productId: checkoutResult.product?.id,
-								...(params.checkoutParams || {}),
-								options,
-							});
-							setOpen(false);
-							setLoading(false);
-						}}
-						disabled={loading}
-						className="au-min-w-16 au-flex au-items-center au-gap-2"
-					>
-						{loading ? (
-							<Loader2 className="au-w-4 au-h-4 au-animate-spin" />
-						) : (
-							<>
-								<span className="au-whitespace-nowrap au-flex au-gap-1">
-									Confirm
-								</span>
-							</>
-						)}
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-function PriceInformation({
-	checkoutResult,
-	setCheckoutResult,
-}: {
-	checkoutResult: Autumn.CheckoutResponse;
-	setCheckoutResult: (checkoutResult: Autumn.CheckoutResponse) => void;
-}) {
-	return (
-		<div className="au-px-6 au-mb-4 au-flex au-flex-col au-gap-4">
-			<ProductItems
-				checkoutResult={checkoutResult}
-				setCheckoutResult={setCheckoutResult}
-			/>
-
-			<div className="au-flex au-flex-col au-gap-2">
-				{checkoutResult?.has_prorations && checkoutResult.lines.length > 0 && (
-					<CheckoutLines checkoutResult={checkoutResult} />
-				)}
-				<DueAmounts checkoutResult={checkoutResult} />
-			</div>
-		</div>
-	);
-}
-
-function DueAmounts({
-	checkoutResult,
-}: {
-	checkoutResult: Autumn.CheckoutResponse;
-}) {
-	const { next_cycle, product } = checkoutResult;
-	const nextCycleAtStr = next_cycle
-		? new Date(next_cycle.starts_at).toLocaleDateString()
-		: undefined;
-
-	const hasUsagePrice = product?.items.some(
-		(item) => item.usage_model === "pay_per_use",
-	);
-
-	const showNextCycle = next_cycle && next_cycle.total !== checkoutResult.total;
-
-	return (
-		<div className="au-flex au-flex-col au-gap-1">
-			<div className="au-flex au-justify-between">
-				<div>
-					<p className="au-font-medium au-text-md">Total due today</p>
-				</div>
-
-				<p className="au-font-medium au-text-md">
-					{formatCurrency({
-						amount: checkoutResult?.total ?? 0,
-						currency: checkoutResult?.currency ?? "usd",
-					})}
-				</p>
-			</div>
-			{showNextCycle && (
-				<div className="au-flex au-justify-between au-text-muted-foreground">
-					<div>
-						<p className="au-text-md">Due next cycle ({nextCycleAtStr})</p>
-					</div>
-					<p className="au-text-md">
-						{formatCurrency({
-							amount: next_cycle.total ?? 0,
-							currency: checkoutResult?.currency ?? "usd",
-						})}
-						{hasUsagePrice && <span> + usage prices</span>}
-					</p>
-				</div>
-			)}
-		</div>
-	);
-}
-
-function ProductItems({
-	checkoutResult,
-	setCheckoutResult,
-}: {
-	checkoutResult: Autumn.CheckoutResponse;
-	setCheckoutResult: (checkoutResult: Autumn.CheckoutResponse) => void;
-}) {
-	const isUpdateQuantity =
-		checkoutResult?.product?.scenario === "active" &&
-		checkoutResult.product?.properties?.updateable;
-
-	const isOneOff = checkoutResult?.product?.properties?.is_one_off;
-
-	return (
-		<div className="au-flex au-flex-col au-gap-2">
-			<p className="au-text-sm au-font-medium">Price</p>
-			{checkoutResult?.product?.items
-				.filter((item: Autumn.ProductItem) => item.type !== "feature")
-				.map((item, index) => {
-					if (item.usage_model == "prepaid") {
-						return (
-							<PrepaidItem
-								key={index}
-								item={item}
-								checkoutResult={checkoutResult!}
-								setCheckoutResult={setCheckoutResult}
-							/>
-						);
-					}
-
-					if (isUpdateQuantity) {
-						return null;
-					}
-
-					return (
-						<div key={index} className="au-flex au-justify-between">
-							<p className="au-text-muted-foreground">
-								{item.feature
-									? item.feature.name
-									: isOneOff
-										? "Price"
-										: "Subscription"}
-							</p>
-							<p>
-								{item.display?.primary_text} {item.display?.secondary_text}
-							</p>
-						</div>
-					);
-				})}
-		</div>
-	);
-}
-
-function CheckoutLines({
-	checkoutResult,
-}: {
-	checkoutResult: Autumn.CheckoutResponse;
-}) {
-	return (
-		<Accordion type="single" collapsible>
-			<AccordionItem value="total" className="au-border-b-0">
-				<CustomAccordionTrigger className="au-justify-between au-w-full au-my-0 au-py-0 au-border-none">
-					<div className="au-cursor-pointer au-flex au-items-center au-gap-1 au-w-full au-justify-end">
-						<p className="au-font-light au-text-muted-foreground">
-							View details
-						</p>
-						<ChevronDown
-							className="au-text-muted-foreground au-mt-0.5 au-rotate-90 au-transition-transform au-duration-200 au-ease-in-out"
-							size={14}
-						/>
-					</div>
-				</CustomAccordionTrigger>
-				<AccordionContent className="au-mt-2 au-mb-0 au-pb-2 au-flex au-flex-col au-gap-2">
-					{checkoutResult?.lines
-						.filter((line: Autumn.CheckoutResponse.Line) => line.amount !== 0)
-						.map((line, index) => {
-							return (
-								<div key={index} className="au-flex au-justify-between">
-									<p className="au-text-muted-foreground">{line.description}</p>
-									<p className="au-text-muted-foreground">
-										{new Intl.NumberFormat("en-US", {
-											style: "currency",
-											currency: checkoutResult?.currency ?? "usd",
-										}).format(line.amount)}
-									</p>
-								</div>
-							);
-						})}
-				</AccordionContent>
-			</AccordionItem>
-		</Accordion>
-	);
-}
-
-function CustomAccordionTrigger({
-	className,
-	children,
-	...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-	return (
-		<AccordionPrimitive.Header className="au-flex">
-			<AccordionPrimitive.Trigger
-				data-slot="accordion-trigger"
-				className={cn(
-					"focus-visible:au-border-ring focus-visible:au-ring-ring/50 au-flex au-flex-1 au-items-start au-justify-between au-gap-4 au-rounded-md au-py-4 au-text-left au-text-sm au-font-medium au-transition-all au-outline-none focus-visible:au-ring-[3px] disabled:au-pointer-events-none disabled:au-opacity-50 [&[data-state=open]_svg]:au-rotate-0",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-			</AccordionPrimitive.Trigger>
-		</AccordionPrimitive.Header>
-	);
-}
-
-const PrepaidItem = ({
-	item,
-	checkoutResult,
-	setCheckoutResult,
-}: {
-	item: Autumn.ProductItem;
-	checkoutResult: Autumn.CheckoutResponse;
-	setCheckoutResult: (checkoutResult: Autumn.CheckoutResponse) => void;
-}) => {
-	let { quantity = 0, billing_units: billingUnits = 1 } = item;
-	quantity = quantity ?? 0;
-	billingUnits = billingUnits ?? 1;
-
-	const [quantityInput, setQuantityInput] = useState<string>(
-		(quantity / billingUnits).toString(),
-	);
-	const { checkout } = useCustomer();
-	const [loading, setLoading] = useState(false);
-	const [open, setOpen] = useState(false);
-	const scenario = checkoutResult.product?.scenario;
-
-	const handleSave = async () => {
-		setLoading(true);
-		try {
-			const newOptions = (checkoutResult.options ?? [])
-				.filter((option) => option.feature_id !== item.feature_id)
-				.map((option) => {
-					return {
-						featureId: option.feature_id,
-						quantity: option.quantity,
-					};
-				});
-
-			newOptions.push({
-				featureId: item.feature_id!,
-				quantity: Number(quantityInput) * billingUnits,
-			});
-
-			const data = await checkout({
-				productId: checkoutResult.product?.id,
-				options: newOptions,
-				dialog: CheckoutDialog,
-			});
-
-			setCheckoutResult(data!);
-		} catch (error) {
-			console.error(error);
-		} finally {
-			setLoading(false);
-			setOpen(false);
-		}
-	};
-
-	const disableSelection = scenario === "renew";
-
-	return (
-		<div className="au-flex au-justify-between au-gap-2">
-			<div className="au-flex au-gap-2 au-items-start">
-				<p className="au-text-muted-foreground au-whitespace-nowrap">
-					{item.feature?.name}
-				</p>
-				<Popover open={open} onOpenChange={setOpen}>
-					<PopoverTrigger
-						className={cn(
-							"au-text-muted-foreground au-text-xs au-px-1 au-py-0.5 au-rounded-md au-flex au-items-center au-gap-1 au-bg-accent/80 au-shrink-0",
-							disableSelection !== true &&
-								"hover:au-bg-accent hover:au-text-foreground",
-							disableSelection &&
-								"au-pointer-events-none au-opacity-80 au-cursor-not-allowed",
-						)}
-						disabled={disableSelection}
-					>
-						Qty: {quantity}
-						{!disableSelection && <ChevronDown size={12} />}
-					</PopoverTrigger>
-					<PopoverContent
-						align="start"
-						className="au-w-80 au-text-sm au-p-4 au-pt-3 au-flex au-flex-col au-gap-4"
-					>
-						<div className="au-flex au-flex-col au-gap-1">
-							<p className="au-text-sm au-font-medium">{item.feature?.name}</p>
-							<p className="au-text-muted-foreground">
-								{item.display?.primary_text} {item.display?.secondary_text}
-							</p>
-						</div>
-
-						<div className="au-flex au-justify-between au-items-end">
-							<div className="au-flex au-gap-2 au-items-center">
-								<Input
-									className="au-h-7 au-w-16 focus:!au-ring-2"
-									value={quantityInput}
-									onChange={(e) => setQuantityInput(e.target.value)}
-								/>
-								<p className="au-text-muted-foreground">
-									{billingUnits > 1 && `x ${billingUnits} `}
-									{item.feature?.name}
-								</p>
-							</div>
-
-							<Button
-								onClick={handleSave}
-								className="au-w-14 !au-h-7 au-text-sm au-items-center au-bg-white au-text-foreground au-shadow-sm au-border au-border-zinc-200 hover:au-bg-zinc-100"
-								disabled={loading}
-							>
-								{loading ? (
-									<Loader2 className="au-text-muted-foreground au-animate-spin !au-w-4 !au-h-4" />
-								) : (
-									"Save"
-								)}
-							</Button>
-						</div>
-					</PopoverContent>
-				</Popover>
-			</div>
-			<p className="au-text-end">
-				{item.display?.primary_text} {item.display?.secondary_text}
-			</p>
-		</div>
-	);
-};
-
-export const PriceItem = ({
-	children,
-	className,
-	...props
-}: {
-	children: React.ReactNode;
-	className?: string;
-} & React.HTMLAttributes<HTMLDivElement>) => {
-	return (
-		<div
-			className={cn(
-				"au-flex au-flex-col au-pb-4 sm:au-pb-0 au-gap-1 sm:au-flex-row au-justify-between sm:au-h-7 sm:au-gap-2 sm:au-items-center",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</div>
-	);
-};
-
-export const PricingDialogButton = ({
-	children,
-	size,
-	onClick,
-	disabled,
-	className,
-}: {
-	children: React.ReactNode;
-	size?: "sm" | "lg" | "default" | "icon";
-	onClick: () => void;
-	disabled?: boolean;
-	className?: string;
-}) => {
-	return (
-		<Button
-			onClick={onClick}
-			disabled={disabled}
-			size={size}
-			className={cn(className, "au-shadow-sm au-shadow-stone-400")}
-		>
-			{children}
-			<ArrowRight className="!au-h-3" />
-		</Button>
-	);
-};
diff --git a/packages/autumn-js/src/libraries/react/components/checkout-dialog/lib/checkout-content.tsx b/packages/autumn-js/src/libraries/react/components/checkout-dialog/lib/checkout-content.tsx
deleted file mode 100644
index f1c301d24..000000000
--- a/packages/autumn-js/src/libraries/react/components/checkout-dialog/lib/checkout-content.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import type { Autumn } from "@sdk";
-
-export const getCheckoutContent = (checkoutResult: Autumn.CheckoutResponse) => {
-	const { product, current_product, next_cycle } = checkoutResult;
-	const { is_one_off, is_free, has_trial, updateable } =
-		product?.properties || {
-			is_one_off: false,
-			is_free: false,
-			has_trial: false,
-			updateable: false,
-		};
-	const scenario = product?.scenario;
-
-	const nextCycleAtStr = next_cycle
-		? new Date(next_cycle.starts_at).toLocaleDateString()
-		: undefined;
-
-	const productName = product?.name || "";
-
-	if (is_one_off) {
-		return {
-			title: <p>Purchase {productName}</p>,
-			message: (
-				<p>
-					By clicking confirm, you will purchase {productName} and your card
-					will be charged immediately.
-				</p>
-			),
-		};
-	}
-
-	if (scenario == "active" && updateable) {
-		if (updateable) {
-			return {
-				title: <p>Update Plan</p>,
-				message: (
-					<p>
-						Update your prepaid quantity. You&apos;ll be charged or credited the
-						prorated difference based on your current billing cycle.
-					</p>
-				),
-			};
-		}
-	}
-
-	if (has_trial) {
-		return {
-			title: <p>Start trial for {productName}</p>,
-			message: (
-				<p>
-					By clicking confirm, you will start a free trial of {productName}{" "}
-					which ends on {nextCycleAtStr}.
-				</p>
-			),
-		};
-	}
-
-	switch (scenario) {
-		case "scheduled":
-			return {
-				title: <p>{productName} product already scheduled</p>,
-				message: (
-					<p>
-						You are currently on product {current_product?.name || ""} and are
-						scheduled to start {productName} on {nextCycleAtStr}.
-					</p>
-				),
-			};
-
-		case "active":
-			return {
-				title: <p>Product already active</p>,
-				message: <p>You are already subscribed to this product.</p>,
-			};
-
-		case "new":
-			if (is_free) {
-				return {
-					title: <p>Enable {productName}</p>,
-					message: (
-						<p>
-							By clicking confirm, {productName} will be enabled immediately.
-						</p>
-					),
-				};
-			}
-
-			return {
-				title: <p>Subscribe to {productName}</p>,
-				message: (
-					<p>
-						By clicking confirm, you will be subscribed to {productName} and
-						your card will be charged immediately.
-					</p>
-				),
-			};
-		case "renew":
-			return {
-				title: <p>Renew</p>,
-				message: (
-					<p>
-						By clicking confirm, you will renew your subscription to{" "}
-						{productName}.
-					</p>
-				),
-			};
-
-		case "upgrade":
-			return {
-				title: <p>Upgrade to {productName}</p>,
-				message: (
-					<p>
-						By clicking confirm, you will upgrade to {productName} and your
-						payment method will be charged immediately.
-					</p>
-				),
-			};
-
-		case "downgrade":
-			return {
-				title: <p>Downgrade to {productName}</p>,
-				message: (
-					<p>
-						By clicking confirm, your current subscription to{" "}
-						{current_product?.name || ""} will be cancelled and a new
-						subscription to {productName} will begin on {nextCycleAtStr}.
-					</p>
-				),
-			};
-
-		case "cancel":
-			return {
-				title: <p>Cancel</p>,
-				message: (
-					<p>
-						By clicking confirm, your subscription to{" "}
-						{current_product?.name || ""} will end on {nextCycleAtStr}.
-					</p>
-				),
-			};
-
-		default:
-			return {
-				title: <p>Change Subscription</p>,
-				message: <p>You are about to change your subscription.</p>,
-			};
-	}
-};
diff --git a/packages/autumn-js/src/libraries/react/components/paywall-dialog/lib/paywall-content.tsx b/packages/autumn-js/src/libraries/react/components/paywall-dialog/lib/paywall-content.tsx
deleted file mode 100644
index 7c8dd5860..000000000
--- a/packages/autumn-js/src/libraries/react/components/paywall-dialog/lib/paywall-content.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Autumn } from "@sdk";
-
-export const getPaywallContent = (preview?: Autumn.CheckResponse.Preview) => {
-	if (!preview) {
-		return {
-			title: "Feature Unavailable",
-			message: "This feature is not available for your account.",
-		};
-	}
-
-	const { scenario, products, feature_name } = preview;
-
-	if (products.length == 0) {
-		switch (scenario) {
-			case "usage_limit":
-				return {
-					title: `Feature Unavailable`,
-					message: `You have reached the usage limit for ${feature_name}. Please contact us to increase your limit.`,
-				};
-			default:
-				return {
-					title: "Feature Unavailable",
-					message:
-						"This feature is not available for your account. Please contact us to enable it.",
-				};
-		}
-	}
-
-	const nextProduct = products[0];
-
-	const isAddOn = nextProduct && nextProduct.is_add_on;
-
-	const title = nextProduct.free_trial
-		? `Start trial for ${nextProduct.name}`
-		: nextProduct.is_add_on
-			? `Purchase ${nextProduct.name}`
-			: `Upgrade to ${nextProduct.name}`;
-
-	let message = "";
-	if (isAddOn) {
-		message = `Please purchase the ${nextProduct.name} add-on to continue using ${feature_name}.`;
-	} else {
-		message = `Please upgrade to the ${nextProduct.name} plan to continue using ${feature_name}.`;
-	}
-
-	switch (scenario) {
-		case "usage_limit":
-			return {
-				title: title,
-				message: `You have reached the usage limit for ${feature_name}. ${message}`,
-			};
-		case "feature_flag":
-			return {
-				title: title,
-				message: `This feature is not available for your account. ${message}`,
-			};
-		default:
-			return {
-				title: "Feature Unavailable",
-				message: "This feature is not available for your account.",
-			};
-	}
-};
diff --git a/packages/autumn-js/src/libraries/react/components/paywall-dialog/paywall-dialog-synced.tsx b/packages/autumn-js/src/libraries/react/components/paywall-dialog/paywall-dialog-synced.tsx
deleted file mode 100644
index 8d04dd5ac..000000000
--- a/packages/autumn-js/src/libraries/react/components/paywall-dialog/paywall-dialog-synced.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client";
-
-import { Button } from "../ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogFooter,
-	DialogTitle,
-} from "../ui/dialog";
-import { usePaywall } from "../../index";
-import { cn } from "../../lib/utils";
-import { getPaywallContent } from "./lib/paywall-content";
-
-export interface PaywallDialogProps {
-	open: boolean;
-	setOpen: (open: boolean) => void;
-	featureId: string;
-	entityId?: string;
-}
-
-export default function PaywallDialog(params?: PaywallDialogProps) {
-	const { data: preview } = usePaywall({
-		featureId: params?.featureId,
-		entityId: params?.entityId,
-	});
-
-	if (!params || !preview) {
-		return <></>;
-	}
-
-	const { open, setOpen } = params;
-	const { title, message } = getPaywallContent(preview);
-
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogContent className="au-p-0 au-pt-4 au-gap-0 au-text-foreground au-overflow-hidden au-text-sm">
-				<DialogTitle className={cn("au-font-bold au-text-xl au-px-6")}>
-					{title}
-				</DialogTitle>
-				<div className="au-px-6 au-my-2">{message}</div>
-				<DialogFooter className="au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-mt-4 au-pl-6 au-pr-3 au-bg-secondary au-border-t">
-					<Button
-						size="sm"
-						className="au-font-medium au-shadow au-transition au-min-w-20"
-						onClick={async () => {
-							setOpen(false);
-						}}
-					>
-						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-}
diff --git a/packages/autumn-js/src/libraries/react/components/pricing-table/lib/pricing-table-content.tsx b/packages/autumn-js/src/libraries/react/components/pricing-table/lib/pricing-table-content.tsx
deleted file mode 100644
index ee6d68ece..000000000
--- a/packages/autumn-js/src/libraries/react/components/pricing-table/lib/pricing-table-content.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { ProductWithDisplay } from "../../../index";
-
-export const getPricingTableContent = (product: ProductWithDisplay) => {
-	const { scenario, properties } = product;
-	const {
-		is_one_off = false,
-		updateable = false,
-		has_trial = false,
-	} = properties || {};
-
-	if (has_trial) {
-		return {
-			buttonText: <p>Start Free Trial</p>,
-		};
-	}
-
-	switch (scenario) {
-		case "scheduled":
-			return {
-				buttonText: <p>Plan Scheduled</p>,
-			};
-
-		case "active":
-			if (updateable) {
-				return {
-					buttonText: <p>Update Plan</p>,
-				};
-			}
-
-			return {
-				buttonText: <p>Current Plan</p>,
-			};
-
-		case "new":
-			if (is_one_off) {
-				return {
-					buttonText: <p>Purchase</p>,
-				};
-			}
-
-			return {
-				buttonText: <p>Get started</p>,
-			};
-
-		case "renew":
-			return {
-				buttonText: <p>Renew</p>,
-			};
-
-		case "upgrade":
-			return {
-				buttonText: <p>Upgrade</p>,
-			};
-
-		case "downgrade":
-			return {
-				buttonText: <p>Downgrade</p>,
-			};
-
-		case "cancel":
-			return {
-				buttonText: <p>Cancel Plan</p>,
-			};
-
-		default:
-			return {
-				buttonText: <p>Get Started</p>,
-			};
-	}
-};
diff --git a/packages/autumn-js/src/libraries/react/components/pricing-table/pricing-table-synced.tsx b/packages/autumn-js/src/libraries/react/components/pricing-table/pricing-table-synced.tsx
deleted file mode 100644
index db2cf83ea..000000000
--- a/packages/autumn-js/src/libraries/react/components/pricing-table/pricing-table-synced.tsx
+++ /dev/null
@@ -1,411 +0,0 @@
-import type { Autumn } from "@sdk";
-import { Loader2 } from "lucide-react";
-import React, { createContext, useContext, useState } from "react";
-import { Button } from "../ui/button";
-import { Switch } from "../ui/switch";
-import {
-	type ProductDetails,
-	type ProductWithDisplay,
-	useCustomer,
-	usePricingTable,
-} from "../../index";
-import { cn } from "../../lib/utils";
-import { loadingStyles, spinnerStyles } from "../../utils/inject-styles";
-import CheckoutDialog from "../checkout-dialog/checkout-dialog-synced";
-import { getPricingTableContent } from "./lib/pricing-table-content";
-
-export default function PricingTable({
-	productDetails,
-}: {
-	productDetails?: ProductDetails[];
-}) {
-	const { customer, checkout } = useCustomer({ errorOnNotFound: false });
-
-	const [isAnnual, setIsAnnual] = useState(false);
-	const { products, isLoading, error } = usePricingTable({ productDetails });
-
-	if (isLoading) {
-		return (
-			<div style={loadingStyles}>
-				<Loader2 style={spinnerStyles} />
-			</div>
-		);
-	}
-
-	if (error) {
-		return <div> Something went wrong...</div>;
-	}
-
-	const intervals = Array.from(
-		new Set(
-			products?.map((p) => p.properties?.interval_group).filter((i) => !!i),
-		),
-	);
-
-	const multiInterval = intervals.length > 1;
-
-	const intervalFilter = (product: Autumn.Product) => {
-		if (!product.properties?.interval_group) {
-			return true;
-		}
-
-		if (multiInterval) {
-			if (isAnnual) {
-				return product.properties?.interval_group === "year";
-			} else {
-				return product.properties?.interval_group === "month";
-			}
-		}
-
-		return true;
-	};
-
-	return (
-		<div className={cn("au-root")}>
-			{products && (
-				<PricingTableContainer
-					products={products}
-					isAnnualToggle={isAnnual}
-					setIsAnnualToggle={setIsAnnual}
-					multiInterval={multiInterval}
-				>
-					{products.filter(intervalFilter).map((product, index) => (
-						<PricingCard
-							key={index}
-							productId={product.id}
-							buttonProps={{
-								disabled:
-									(product.scenario === "active" &&
-										!product.properties?.updateable) ||
-									product.scenario === "scheduled",
-
-								onClick: async () => {
-									if (product.id && customer) {
-										await checkout({
-											productId: product.id,
-											dialog: CheckoutDialog,
-										});
-									} else if (product.display?.button_url) {
-										window.open(product.display?.button_url, "_blank");
-									}
-								},
-							}}
-						/>
-					))}
-				</PricingTableContainer>
-			)}
-		</div>
-	);
-}
-
-const PricingTableContext = createContext<{
-	isAnnualToggle: boolean;
-	setIsAnnualToggle: (isAnnual: boolean) => void;
-	products: ProductWithDisplay[];
-	showFeatures: boolean;
-}>({
-	isAnnualToggle: false,
-	setIsAnnualToggle: () => {},
-	products: [],
-	showFeatures: true,
-});
-
-export const usePricingTableContext = (componentName: string) => {
-	const context = useContext(PricingTableContext);
-
-	if (context === undefined) {
-		throw new Error(`${componentName} must be used within <PricingTable />`);
-	}
-
-	return context;
-};
-
-export const PricingTableContainer = ({
-	children,
-	products,
-	showFeatures = true,
-	className,
-	isAnnualToggle,
-	setIsAnnualToggle,
-	multiInterval,
-}: {
-	children?: React.ReactNode;
-	products?: ProductWithDisplay[];
-	showFeatures?: boolean;
-	className?: string;
-	isAnnualToggle: boolean;
-	setIsAnnualToggle: (isAnnual: boolean) => void;
-	multiInterval: boolean;
-}) => {
-	if (!products) {
-		throw new Error("products is required in <PricingTable />");
-	}
-
-	if (products.length === 0) {
-		return <></>;
-	}
-
-	const hasRecommended = products?.some((p) => p.display?.recommend_text);
-	return (
-		<PricingTableContext.Provider
-			value={{ isAnnualToggle, setIsAnnualToggle, products, showFeatures }}
-		>
-			<div
-				className={cn(
-					"au-flex au-items-center au-flex-col",
-					hasRecommended && "!au-py-10",
-				)}
-			>
-				{multiInterval && (
-					<div
-						className={cn(
-							products.some((p) => p.display?.recommend_text) && "au-mb-8",
-						)}
-					>
-						<AnnualSwitch
-							isAnnualToggle={isAnnualToggle}
-							setIsAnnualToggle={setIsAnnualToggle}
-						/>
-					</div>
-				)}
-				<div
-					className={cn(
-						"au-grid au-grid-cols-1 sm:au-grid-cols-2 lg:au-grid-cols-[repeat(auto-fit,minmax(200px,1fr))] au-w-full au-gap-2",
-						className,
-					)}
-				>
-					{children}
-				</div>
-			</div>
-		</PricingTableContext.Provider>
-	);
-};
-
-interface PricingCardProps {
-	productId: string;
-	showFeatures?: boolean;
-	className?: string;
-	onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-	buttonProps?: React.ComponentProps<"button">;
-}
-
-export const PricingCard = ({
-	productId,
-	className,
-	buttonProps,
-}: PricingCardProps) => {
-	const { products, showFeatures } = usePricingTableContext("PricingCard");
-
-	const product = products.find((p) => p.id === productId);
-
-	if (!product) {
-		throw new Error(`Product with id ${productId} not found`);
-	}
-
-	const { name, display: productDisplay } = product;
-
-	const { buttonText } = getPricingTableContent(product);
-
-	const isRecommended = productDisplay?.recommend_text ? true : false;
-	const mainPriceDisplay = product.properties?.is_free
-		? {
-				primary_text: "Free",
-			}
-		: product.items[0].display;
-
-	const featureItems = product.properties?.is_free
-		? product.items
-		: product.items.slice(1);
-
-	return (
-		<div
-			className={cn(
-				" au-w-full au-h-full au-py-6 au-text-foreground au-border au-rounded-lg au-shadow-sm au-max-w-xl",
-				isRecommended &&
-					"lg:au--translate-y-6 lg:au-shadow-lg dark:au-shadow-zinc-800/80 lg:au-h-[calc(100%+48px)] au-bg-secondary/40",
-				className,
-			)}
-		>
-			{productDisplay?.recommend_text && (
-				<RecommendedBadge recommended={productDisplay?.recommend_text} />
-			)}
-			<div
-				className={cn(
-					"au-flex au-flex-col au-h-full au-flex-grow",
-					isRecommended && "lg:au-translate-y-6",
-				)}
-			>
-				<div className="au-h-full">
-					<div className="au-flex au-flex-col">
-						<div className="au-pb-4">
-							<h2 className="au-text-2xl au-font-semibold au-px-6 au-truncate">
-								{productDisplay?.name || name}
-							</h2>
-							{productDisplay?.description && (
-								<div className="au-text-sm au-text-muted-foreground au-px-6 au-h-8">
-									<p className="au-line-clamp-2">
-										{productDisplay?.description}
-									</p>
-								</div>
-							)}
-						</div>
-						<div className="au-mb-2">
-							<h3 className="au-font-semibold au-h-16 au-flex au-px-6 au-items-center au-border-y au-mb-4 au-bg-secondary/40">
-								<div className="au-line-clamp-2">
-									{mainPriceDisplay?.primary_text}{" "}
-									{mainPriceDisplay?.secondary_text && (
-										<span className="au-font-normal au-text-muted-foreground au-mt-1">
-											{mainPriceDisplay?.secondary_text}
-										</span>
-									)}
-								</div>
-							</h3>
-						</div>
-					</div>
-					{showFeatures && featureItems.length > 0 && (
-						<div className="au-flex-grow au-px-6 au-mb-6">
-							<PricingFeatureList
-								items={featureItems}
-								everythingFrom={product.display?.everything_from}
-							/>
-						</div>
-					)}
-				</div>
-				<div
-					className={cn(" au-px-6 ", isRecommended && "lg:au--translate-y-12")}
-				>
-					<PricingCardButton
-						recommended={productDisplay?.recommend_text ? true : false}
-						{...buttonProps}
-					>
-						{productDisplay?.button_text || buttonText}
-					</PricingCardButton>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-// Pricing Feature List
-export const PricingFeatureList = ({
-	items,
-	everythingFrom,
-	className,
-}: {
-	items: Autumn.Products.ProductItem[];
-	everythingFrom?: string;
-	className?: string;
-}) => {
-	return (
-		<div className={cn("au-flex-grow", className)}>
-			{everythingFrom && (
-				<p className="au-text-sm au-mb-4">
-					Everything from {everythingFrom}, plus:
-				</p>
-			)}
-			<div className="au-space-y-3">
-				{items.map((item, index) => (
-					<div
-						key={index}
-						className="au-flex au-items-start au-gap-2 au-text-sm"
-					>
-						{/* {showIcon && (
-              <Check className="au-h-4 au-w-4 au-text-primary au-flex-shrink-0 au-mt-0.5" />
-            )} */}
-						<div className="au-flex au-flex-col">
-							<span>{item.display?.primary_text}</span>
-							{item.display?.secondary_text && (
-								<span className="au-text-sm au-text-muted-foreground">
-									{item.display?.secondary_text}
-								</span>
-							)}
-						</div>
-					</div>
-				))}
-			</div>
-		</div>
-	);
-};
-
-// Pricing Card Button
-export interface PricingCardButtonProps extends React.ComponentProps<"button"> {
-	recommended?: boolean;
-	buttonUrl?: string;
-}
-
-export const PricingCardButton = React.forwardRef<
-	HTMLButtonElement,
-	PricingCardButtonProps
->(({ recommended, children, className, onClick, ...props }, ref) => {
-	const [loading, setLoading] = useState(false);
-
-	const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
-		setLoading(true);
-		try {
-			await onClick?.(e);
-		} catch (error) {
-			console.error(error);
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	return (
-		<Button
-			className={cn(
-				"au-w-full au-py-3 au-px-4 au-group au-overflow-hidden au-relative au-transition-all au-duration-300 hover:au-brightness-90 au-border au-rounded-lg",
-				className,
-			)}
-			{...props}
-			variant={recommended ? "default" : "secondary"}
-			ref={ref}
-			disabled={loading || props.disabled}
-			onClick={handleClick}
-		>
-			{loading ? (
-				<Loader2 className="au-h-4 au-w-4 au-animate-spin" />
-			) : (
-				<>
-					<div className="au-flex au-items-center au-justify-between au-w-full au-transition-transform au-duration-300 group-hover:au-translate-y-[-130%]">
-						<span>{children}</span>
-						<span className="au-text-sm">→</span>
-					</div>
-					<div className="au-flex au-items-center au-justify-between au-w-full au-absolute au-px-4 au-translate-y-[130%] au-transition-transform au-duration-300 group-hover:au-translate-y-0 au-mt-2 group-hover:au-mt-0">
-						<span>{children}</span>
-						<span className="au-text-sm">→</span>
-					</div>
-				</>
-			)}
-		</Button>
-	);
-});
-PricingCardButton.displayName = "PricingCardButton";
-
-// Annual Switch
-export const AnnualSwitch = ({
-	isAnnualToggle,
-	setIsAnnualToggle,
-}: {
-	isAnnualToggle: boolean;
-	setIsAnnualToggle: (isAnnual: boolean) => void;
-}) => {
-	return (
-		<div className="au-flex au-items-center au-space-x-2 au-mb-4">
-			<span className="au-text-sm au-text-muted-foreground">Monthly</span>
-			<Switch
-				id="annual-billing"
-				checked={isAnnualToggle}
-				onCheckedChange={setIsAnnualToggle}
-			/>
-			<span className="au-text-sm au-text-muted-foreground">Annual</span>
-		</div>
-	);
-};
-
-export const RecommendedBadge = ({ recommended }: { recommended: string }) => {
-	return (
-		<div className="au-bg-secondary au-absolute au-border au-text-muted-foreground au-text-sm au-font-medium lg:au-rounded-full au-px-3 lg:au-py-0.5 lg:au-top-4 lg:au-right-4 au-top-[-1px] au-right-[-1px] au-rounded-bl-lg">
-			{recommended}
-		</div>
-	);
-};
diff --git a/packages/autumn-js/src/libraries/react/components/ui/accordion.tsx b/packages/autumn-js/src/libraries/react/components/ui/accordion.tsx
deleted file mode 100644
index 85810f5cf..000000000
--- a/packages/autumn-js/src/libraries/react/components/ui/accordion.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Accordion: typeof AccordionPrimitive.Root = AccordionPrimitive.Root;
-
-type AccordionItemRef = React.ElementRef<typeof AccordionPrimitive.Item>;
-type AccordionItemProps = React.ComponentPropsWithoutRef<
-	typeof AccordionPrimitive.Item
->;
-
-const AccordionItem: React.ForwardRefExoticComponent<
-	AccordionItemProps & React.RefAttributes<AccordionItemRef>
-> = React.forwardRef<AccordionItemRef, AccordionItemProps>(
-	({ className, ...props }, ref) => (
-		<AccordionPrimitive.Item
-			ref={ref}
-			className={cn("au-border-b", className)}
-			{...props}
-		/>
-	),
-);
-AccordionItem.displayName = "AccordionItem";
-
-type AccordionTriggerRef = React.ElementRef<typeof AccordionPrimitive.Trigger>;
-type AccordionTriggerProps = React.ComponentPropsWithoutRef<
-	typeof AccordionPrimitive.Trigger
->;
-
-const AccordionTrigger: React.ForwardRefExoticComponent<
-	AccordionTriggerProps & React.RefAttributes<AccordionTriggerRef>
-> = React.forwardRef<AccordionTriggerRef, AccordionTriggerProps>(
-	({ className, children, ...props }, ref) => (
-		<AccordionPrimitive.Header className="au-flex">
-			<AccordionPrimitive.Trigger
-				ref={ref}
-				className={cn(
-					"au-flex au-flex-1 au-items-center au-justify-between au-py-4 au-text-sm au-font-medium au-transition-all hover:au-underline au-text-left [&[data-state=open]>svg]:au-rotate-180",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				<ChevronDown className="au-h-4 au-w-4 au-shrink-0 au-text-muted-foreground au-transition-transform au-duration-200" />
-			</AccordionPrimitive.Trigger>
-		</AccordionPrimitive.Header>
-	),
-);
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-type AccordionContentRef = React.ElementRef<typeof AccordionPrimitive.Content>;
-type AccordionContentProps = React.ComponentPropsWithoutRef<
-	typeof AccordionPrimitive.Content
->;
-
-const AccordionContent: React.ForwardRefExoticComponent<
-	AccordionContentProps & React.RefAttributes<AccordionContentRef>
-> = React.forwardRef<AccordionContentRef, AccordionContentProps>(
-	({ className, children, ...props }, ref) => (
-		<AccordionPrimitive.Content
-			ref={ref}
-			className="au-overflow-hidden au-text-sm data-[state=closed]:au-animate-accordion-up data-[state=open]:au-animate-accordion-down"
-			{...props}
-		>
-			<div className={cn("au-pb-4 au-pt-0", className)}>{children}</div>
-		</AccordionPrimitive.Content>
-	),
-);
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/autumn-js/src/libraries/react/components/ui/button.tsx b/packages/autumn-js/src/libraries/react/components/ui/button.tsx
deleted file mode 100644
index 3e7658eda..000000000
--- a/packages/autumn-js/src/libraries/react/components/ui/button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-	"au-inline-flex au-items-center au-justify-center au-gap-2 au-whitespace-nowrap au-rounded-md au-text-sm au-font-medium au-transition-colors focus-visible:au-outline-none focus-visible:au-ring-1 focus-visible:au-ring-ring disabled:au-pointer-events-none disabled:au-opacity-50 [&_svg]:au-pointer-events-none [&_svg]:au-size-4 [&_svg]:au-shrink-0",
-	{
-		variants: {
-			variant: {
-				default:
-					"au-bg-primary au-text-primary-foreground au-shadow hover:au-bg-primary/90",
-				destructive:
-					"au-bg-destructive au-text-destructive-foreground au-shadow-sm hover:au-bg-destructive/90",
-				outline:
-					"au-border au-border-input au-bg-background au-shadow-sm hover:au-bg-accent hover:au-text-accent-foreground",
-				secondary:
-					"au-bg-secondary au-text-secondary-foreground au-shadow-sm hover:au-bg-secondary/80",
-				ghost: "hover:au-bg-accent hover:au-text-accent-foreground",
-				link: "au-text-primary au-underline-offset-4 hover:au-underline",
-			},
-			size: {
-				default: "au-h-9 au-px-4 au-py-2",
-				sm: "au-h-8 au-rounded-md au-px-3 au-text-xs",
-				lg: "au-h-10 au-rounded-md au-px-8",
-				icon: "au-h-9 au-w-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		// console.log("Button className", className);
-		const Comp = asChild ? Slot : "button";
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size }), className)}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/packages/autumn-js/src/libraries/react/components/ui/dialog.tsx b/packages/autumn-js/src/libraries/react/components/ui/dialog.tsx
deleted file mode 100644
index 6211dec03..000000000
--- a/packages/autumn-js/src/libraries/react/components/ui/dialog.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-"use client";
-
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;
-
-const DialogTrigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger;
-
-const DialogPortal = ({
-	children,
-	...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) => {
-	return (
-		<DialogPrimitive.Portal {...props}>
-			<div className="au-root">{children}</div>
-		</DialogPrimitive.Portal>
-	);
-};
-
-const DialogClose: typeof DialogPrimitive.Close = DialogPrimitive.Close;
-
-type DialogOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
-type DialogOverlayProps = React.ComponentPropsWithoutRef<
-	typeof DialogPrimitive.Overlay
->;
-
-const DialogOverlay: React.ForwardRefExoticComponent<
-	DialogOverlayProps & React.RefAttributes<DialogOverlayRef>
-> = React.forwardRef<DialogOverlayRef, DialogOverlayProps>(
-	({ className, ...props }, ref) => (
-		<DialogPrimitive.Overlay
-			ref={ref}
-			className={cn(
-				"au-fixed au-inset-0 au-z-50  data-[state=open]:au-animate-in data-[state=closed]:au-animate-out data-[state=closed]:au-fade-out-0 data-[state=open]:au-fade-in-0 au-backdrop-blur-sm au-bg-black/40",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-type DialogContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
-type DialogContentProps = React.ComponentPropsWithoutRef<
-	typeof DialogPrimitive.Content
->;
-
-const DialogContent: React.ForwardRefExoticComponent<
-	DialogContentProps & React.RefAttributes<DialogContentRef>
-> = React.forwardRef<DialogContentRef, DialogContentProps>(
-	({ className, children, ...props }, ref) => (
-		<DialogPortal>
-			<DialogOverlay />
-			<DialogPrimitive.Content
-				ref={ref}
-				className={cn(
-					`au-fixed au-left-[50%] au-top-[50%] au-z-50 au-grid au-w-full au-max-w-lg au-translate-x-[-50%] au-translate-y-[-50%] au-gap-4 au-border au-bg-background au-p-6 au-shadow-lg au-duration-200 data-[state=open]:au-animate-in data-[state=closed]:au-animate-out data-[state=closed]:au-fade-out-0 data-[state=open]:au-fade-in-0 data-[state=closed]:au-zoom-out-95 data-[state=open]:au-zoom-in-95 data-[state=closed]:au-slide-out-to-left-1/2 data-[state=closed]:au-slide-out-to-top-[48%] data-[state=open]:au-slide-in-from-left-1/2 data-[state=open]:au-slide-in-from-top-[48%] sm:au-rounded-lg`,
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				<DialogPrimitive.Close className="au-absolute au-right-4 au-top-4 au-rounded-sm au-opacity-70 au-ring-offset-background au-transition-opacity hover:au-opacity-100 focus:au-outline-none focus:au-ring-2 focus:au-ring-ring focus:au-ring-offset-2 disabled:au-pointer-events-none data-[state=open]:au-bg-accent data-[state=open]:au-text-muted-foreground">
-					<X className="au-h-4 au-w-4" />
-					<span className="au-sr-only">Close</span>
-				</DialogPrimitive.Close>
-			</DialogPrimitive.Content>
-		</DialogPortal>
-	),
-);
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn(
-			"au-flex au-flex-col au-space-y-1.5 au-text-center sm:au-text-left",
-			className,
-		)}
-		{...props}
-	/>
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn(
-			"au-flex au-flex-col-reverse sm:au-flex-row sm:au-justify-end sm:au-space-x-2",
-			className,
-		)}
-		{...props}
-	/>
-);
-DialogFooter.displayName = "DialogFooter";
-
-type DialogTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
-type DialogTitleProps = React.ComponentPropsWithoutRef<
-	typeof DialogPrimitive.Title
->;
-
-const DialogTitle: React.ForwardRefExoticComponent<
-	DialogTitleProps & React.RefAttributes<DialogTitleRef>
-> = React.forwardRef<DialogTitleRef, DialogTitleProps>(
-	({ className, ...props }, ref) => (
-		<DialogPrimitive.Title
-			ref={ref}
-			className={cn(
-				"au-text-lg au-font-semibold au-leading-none au-tracking-tight",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-type DialogDescriptionRef = React.ElementRef<
-	typeof DialogPrimitive.Description
->;
-type DialogDescriptionProps = React.ComponentPropsWithoutRef<
-	typeof DialogPrimitive.Description
->;
-
-const DialogDescription: React.ForwardRefExoticComponent<
-	DialogDescriptionProps & React.RefAttributes<DialogDescriptionRef>
-> = React.forwardRef<DialogDescriptionRef, DialogDescriptionProps>(
-	({ className, ...props }, ref) => (
-		<DialogPrimitive.Description
-			ref={ref}
-			className={cn("au-text-sm au-text-muted-foreground", className)}
-			{...props}
-		/>
-	),
-);
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogTrigger,
-	DialogClose,
-	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
-	DialogDescription,
-};
diff --git a/packages/autumn-js/src/libraries/react/components/ui/input.tsx b/packages/autumn-js/src/libraries/react/components/ui/input.tsx
deleted file mode 100644
index dd9addb55..000000000
--- a/packages/autumn-js/src/libraries/react/components/ui/input.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-	({ className, type, onClick, ...props }, ref) => {
-		return (
-			<input
-				type={type}
-				className={cn(
-					"file:au-text-foreground placeholder:au-text-muted-foreground selection:au-bg-primary selection:au-text-primary-foreground dark:au-bg-input/30 au-border-input au-flex au-h-9 au-w-full au-min-w-0 au-rounded-md au-border au-bg-transparent au-px-3 au-py-1 au-text-base au-shadow-xs au-transition-[color,box-shadow] au-outline-none file:au-inline-flex file:au-h-7 file:au-border-0 file:au-bg-transparent file:au-text-sm file:au-font-medium disabled:au-pointer-events-none disabled:au-cursor-not-allowed disabled:au-opacity-50 md:au-text-sm focus-visible:au-border-ring focus-visible:au-ring-ring/50 focus-visible:au-ring-[3px] aria-invalid:au-ring-destructive/20 dark:aria-invalid:au-ring-destructive/40 aria-invalid:au-border-destructive",
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Input.displayName = "Input";
-
-export { Input };
diff --git a/packages/autumn-js/src/libraries/react/components/ui/popover.tsx b/packages/autumn-js/src/libraries/react/components/ui/popover.tsx
deleted file mode 100644
index df8281c65..000000000
--- a/packages/autumn-js/src/libraries/react/components/ui/popover.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Popover: typeof PopoverPrimitive.Root = PopoverPrimitive.Root;
-
-const PopoverTrigger: typeof PopoverPrimitive.Trigger =
-	PopoverPrimitive.Trigger;
-
-const PopoverAnchor: typeof PopoverPrimitive.Anchor = PopoverPrimitive.Anchor;
-
-type PopoverContentRef = React.ElementRef<typeof PopoverPrimitive.Content>;
-type PopoverContentProps = React.ComponentPropsWithoutRef<
-	typeof PopoverPrimitive.Content
->;
-
-const PopoverContent: React.ForwardRefExoticComponent<
-	PopoverContentProps & React.RefAttributes<PopoverContentRef>
-> = React.forwardRef<PopoverContentRef, PopoverContentProps>(
-	({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-		<PopoverPrimitive.Content
-			ref={ref}
-			align={align}
-			sideOffset={sideOffset}
-			className={cn(
-				"au-root au-z-[9999] au-w-72 au-rounded-md au-border au-bg-popover au-p-4 au-text-popover-foreground au-shadow-md au-outline-none data-[state=open]:au-animate-in data-[state=closed]:au-animate-out data-[state=closed]:au-fade-out-0 data-[state=open]:au-fade-in-0 data-[state=closed]:au-zoom-out-95 data-[state=open]:au-zoom-in-95 data-[side=bottom]:au-slide-in-from-top-2 data-[side=left]:au-slide-in-from-right-2 data-[side=right]:au-slide-in-from-left-2 data-[side=top]:au-slide-in-from-bottom-2 au-origin-[--radix-popover-content-transform-origin]",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/packages/autumn-js/src/libraries/react/components/ui/switch.tsx b/packages/autumn-js/src/libraries/react/components/ui/switch.tsx
deleted file mode 100644
index 5d5c7647b..000000000
--- a/packages/autumn-js/src/libraries/react/components/ui/switch.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-type SwitchRef = React.ElementRef<typeof SwitchPrimitives.Root>;
-type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
-
-const Switch: React.ForwardRefExoticComponent<
-	SwitchProps & React.RefAttributes<SwitchRef>
-> = React.forwardRef<SwitchRef, SwitchProps>(({ className, ...props }, ref) => (
-	<SwitchPrimitives.Root
-		className={cn(
-			"au-peer au-inline-flex au-h-5 au-w-9 au-shrink-0 au-cursor-pointer au-items-center au-rounded-full au-border-2 au-border-transparent au-shadow-sm au-transition-colors focus-visible:au-outline-none focus-visible:au-ring-2 focus-visible:au-ring-ring focus-visible:au-ring-offset-2 focus-visible:au-ring-offset-background au-disabled:cursor-not-allowed au-disabled:opacity-50 data-[state=checked]:au-bg-primary data-[state=unchecked]:au-bg-input",
-			className,
-		)}
-		{...props}
-		ref={ref}
-	>
-		<SwitchPrimitives.Thumb
-			className={cn(
-				"au-pointer-events-none au-block au-h-4 au-w-4 au-rounded-full au-bg-background au-shadow-lg au-ring-0 au-transition-transform data-[state=checked]:au-translate-x-4 data-[state=unchecked]:au-translate-x-0",
-			)}
-		/>
-	</SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
diff --git a/packages/autumn-js/src/libraries/react/hooks/useAnalytics.tsx b/packages/autumn-js/src/libraries/react/hooks/useAnalytics.tsx
deleted file mode 100644
index e5c08e248..000000000
--- a/packages/autumn-js/src/libraries/react/hooks/useAnalytics.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type * as operations from "@useautumn/sdk/models/operations";
-import useSWR from "swr";
-import { AutumnContext, useAutumnContext } from "../AutumnContext";
-import type { QueryParams } from "../client/autumnTypes";
-
-export const useAnalytics = (params: QueryParams) => {
-	const context = useAutumnContext({
-		AutumnContext,
-		name: "useAnalytics",
-	});
-
-	const client = context.client;
-
-	const fetcher = async () => {
-		const data = await client.query(params);
-
-		return data?.list || [];
-	};
-
-	const { data, error, mutate } = useSWR<operations.PostQueryResponse["list"]>(
-		["analytics", params.featureId, params.range],
-		fetcher,
-		{ refreshInterval: 0 },
-	);
-
-	return {
-		data: data,
-		isLoading: !error && !data,
-		error,
-		refetch: mutate,
-	};
-};
diff --git a/packages/autumn-js/src/libraries/react/hooks/usePaywall.tsx b/packages/autumn-js/src/libraries/react/hooks/usePaywall.tsx
deleted file mode 100644
index d4cceb398..000000000
--- a/packages/autumn-js/src/libraries/react/hooks/usePaywall.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type * as operations from "@useautumn/sdk/models/operations";
-import useSWR from "swr";
-import { AutumnContext, useAutumnContext } from "../AutumnContext";
-
-export const usePaywall = ({
-	featureId,
-	entityId,
-}: {
-	featureId?: string;
-	entityId?: string;
-}) => {
-	const context = useAutumnContext({
-		AutumnContext,
-		name: "usePaywall",
-	});
-
-	const enabled = !!featureId && !!context;
-
-	const fetcher = async () => {
-		if (!featureId) {
-			return { preview: undefined };
-		}
-
-		return await context.client.check({
-			featureId,
-			withPreview: true,
-		});
-	};
-
-	const queryKey = [`check`, featureId, entityId];
-
-	const { data, error, isLoading } = useSWR(queryKey, fetcher, {
-		refreshInterval: 0,
-		enabled,
-	});
-
-	return {
-		data: data?.preview as operations.Preview | undefined,
-		error,
-		isLoading,
-	};
-};
diff --git a/packages/autumn-js/src/libraries/react/index.ts b/packages/autumn-js/src/libraries/react/index.ts
index eed4bff5e..2e7f5b819 100644
--- a/packages/autumn-js/src/libraries/react/index.ts
+++ b/packages/autumn-js/src/libraries/react/index.ts
@@ -1,19 +1,11 @@
-// Import CSS for tsup injectStyle
-import "../../styles/global.css";
-
-// export type { PricingTableProduct } from "@sdk/components/componentTypes";
 export type {
 	ProductDetails,
 	ProductWithDisplay,
 } from "./client/ProductDetails";
-// Auto-synced components
-// export { default as CheckoutDialog } from "./components/checkout-dialog/checkout-dialog-synced";
-// export { default as PaywallDialog } from "./components/paywall-dialog/paywall-dialog-synced";
-// export { default as PricingTable } from "./components/pricing-table/pricing-table-synced";
-// export { useAnalytics } from "./hooks/useAnalytics";
 export { useAutumn } from "./hooks/useAutumn";
 export { useCustomer } from "./hooks/useCustomer";
 export { useEntity } from "./hooks/useEntity";
+export { usePricingTable } from "./hooks/usePricingTable";
 // export { usePaywall } from "./hooks/usePaywall";
-// export { usePricingTable } from "./hooks/usePricingTable";
+// export { useAnalytics } from "./hooks/useAnalytics";
 export { ReactAutumnProvider as AutumnProvider } from "./ReactAutumnProvider";
diff --git a/packages/autumn-js/src/libraries/react/lib/utils.ts b/packages/autumn-js/src/libraries/react/lib/utils.ts
deleted file mode 100644
index 2e1c8e6a0..000000000
--- a/packages/autumn-js/src/libraries/react/lib/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-
-// Create a custom twMerge that understands the "au-" prefix
-const twMerge = extendTailwindMerge({
-	prefix: "au-",
-});
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}
diff --git a/packages/autumn-js/src/libraries/react/utils/inject-styles.ts b/packages/autumn-js/src/libraries/react/utils/inject-styles.ts
deleted file mode 100644
index 470f457c6..000000000
--- a/packages/autumn-js/src/libraries/react/utils/inject-styles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Critical loading styles applied inline
-export const loadingStyles: React.CSSProperties = {
-	width: "100%",
-	height: "100%",
-	display: "flex",
-	justifyContent: "center",
-	alignItems: "center",
-	minHeight: "300px",
-};
-
-export const spinnerStyles: React.CSSProperties = {
-	width: "1.5rem",
-	height: "1.5rem",
-	color: "rgb(161 161 170)",
-	animation: "spin 1s linear infinite",
-};
-
-// Inject keyframes immediately
-if (typeof document !== "undefined") {
-	const styleId = "au-spinner-keyframes";
-	if (!document.getElementById(styleId)) {
-		const style = document.createElement("style");
-		style.id = styleId;
-		style.textContent = `
-      @keyframes spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-      }
-    `;
-		document.head.appendChild(style);
-	}
-}
diff --git a/packages/autumn-js/src/styles/global.css b/packages/autumn-js/src/styles/global.css
deleted file mode 100644
index c7c5f7f58..000000000
--- a/packages/autumn-js/src/styles/global.css
+++ /dev/null
@@ -1,83 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-	--au-background: 0 0% 100%;
-	--au-foreground: 240 10% 3.9%;
-	--au-card: 0 0% 100%;
-	--au-card-foreground: 240 10% 3.9%;
-	--au-popover: 0 0% 100%;
-	--au-popover-foreground: 240 10% 3.9%;
-	--au-primary: 240 5.9% 10%;
-	--au-primary-foreground: 0 0% 98%;
-	--au-secondary: 240 4.8% 95.9%;
-	--au-secondary-foreground: 240 5.9% 10%;
-	--au-muted: 240 4.8% 95.9%;
-	--au-muted-foreground: 240 3.8% 46.1%;
-	--au-accent: 240 4.8% 95.9%;
-	--au-accent-foreground: 240 5.9% 10%;
-	--au-destructive: 0 84.2% 60.2%;
-	--au-destructive-foreground: 0 0% 98%;
-	--au-border: 240 5.9% 90%;
-	--au-input: 240 5.9% 90%;
-	--au-ring: 240 10% 3.9%;
-	--au-chart-1: 12 76% 61%;
-	--au-chart-2: 173 58% 39%;
-	--au-chart-3: 197 37% 24%;
-	--au-chart-4: 43 74% 66%;
-	--au-chart-5: 27 87% 67%;
-	--au-radius: 0.5rem;
-	--au-sidebar-background: 0 0% 98%;
-	--au-sidebar-foreground: 240 5.3% 26.1%;
-	--au-sidebar-primary: 240 5.9% 10%;
-	--au-sidebar-primary-foreground: 0 0% 98%;
-	--au-sidebar-accent: 240 4.8% 95.9%;
-	--au-sidebar-accent-foreground: 240 5.9% 10%;
-	--au-sidebar-border: 220 13% 91%;
-	--au-sidebar-ring: 217.2 91.2% 59.8%;
-}
-.dark {
-	--au-background: 240 10% 3.9%;
-	--au-foreground: 0 0% 98%;
-	--au-card: 240 10% 3.9%;
-	--au-card-foreground: 0 0% 98%;
-	--au-popover: 240 10% 3.9%;
-	--au-popover-foreground: 0 0% 98%;
-	--au-primary: 0 0% 98%;
-	--au-primary-foreground: 240 5.9% 10%;
-	--au-secondary: 240 3.7% 15.9%;
-	--au-secondary-foreground: 0 0% 98%;
-	--au-muted: 240 3.7% 15.9%;
-	--au-muted-foreground: 240 5% 64.9%;
-	--au-accent: 240 3.7% 15.9%;
-	--au-accent-foreground: 0 0% 98%;
-	--au-destructive: 0 62.8% 30.6%;
-	--au-destructive-foreground: 0 0% 98%;
-	--au-border: 240 3.7% 15.9%;
-	--au-input: 240 3.7% 15.9%;
-	--au-ring: 240 4.9% 83.9%;
-	--au-chart-1: 220 70% 50%;
-	--au-chart-2: 160 60% 45%;
-	--au-chart-3: 30 80% 55%;
-	--au-chart-4: 280 65% 60%;
-	--au-chart-5: 340 75% 55%;
-	--au-sidebar-background: 240 5.9% 10%;
-	--au-sidebar-foreground: 240 4.8% 95.9%;
-	--au-sidebar-primary: 224.3 76.3% 48%;
-	--au-sidebar-primary-foreground: 0 0% 100%;
-	--au-sidebar-accent: 240 3.7% 15.9%;
-	--au-sidebar-accent-foreground: 240 4.8% 95.9%;
-	--au-sidebar-border: 240 3.7% 15.9%;
-	--au-sidebar-ring: 217.2 91.2% 59.8%;
-}
-
-@layer base {
-	* {
-		border-color: hsl(var(--au-border));
-	}
-	body {
-		background-color: hsl(var(--au-background));
-		color: hsl(var(--au-foreground));
-	}
-}
diff --git a/packages/autumn-js/src/styles/global_old.css b/packages/autumn-js/src/styles/global_old.css
deleted file mode 100644
index 93aa853fc..000000000
--- a/packages/autumn-js/src/styles/global_old.css
+++ /dev/null
@@ -1,73 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-	--au-background: 0 0% 100%;
-	--au-foreground: 240 10% 3.9%;
-	--au-card: 0 0% 100%;
-	--au-card-foreground: 240 10% 3.9%;
-	--au-popover: 0 0% 100%;
-	--au-popover-foreground: 240 10% 3.9%;
-	--au-primary: 240 5.9% 10%;
-	--au-primary-foreground: 0 0% 98%;
-	--au-secondary: 240 4.8% 95.9%;
-	--au-secondary-foreground: 240 5.9% 10%;
-	--au-muted: 240 4.8% 95.9%;
-	--au-muted-foreground: 240 3.8% 46.1%;
-	--au-accent: 240 4.8% 95.9%;
-	--au-accent-foreground: 240 5.9% 10%;
-	--au-destructive: 0 84.2% 60.2%;
-	--au-destructive-foreground: 0 0% 98%;
-	--au-border: 240 5.9% 90%;
-	--au-input: 240 5.9% 90%;
-	--au-ring: 240 10% 3.9%;
-	--au-chart-1: 12 76% 61%;
-	--au-chart-2: 173 58% 39%;
-	--au-chart-3: 197 37% 24%;
-	--au-chart-4: 43 74% 66%;
-	--au-chart-5: 27 87% 67%;
-	--au-radius: 0.5rem;
-	--au-sidebar-background: 0 0% 98%;
-	--au-sidebar-foreground: 240 5.3% 26.1%;
-	--au-sidebar-primary: 240 5.9% 10%;
-	--au-sidebar-primary-foreground: 0 0% 98%;
-	--au-sidebar-accent: 240 4.8% 95.9%;
-	--au-sidebar-accent-foreground: 240 5.9% 10%;
-	--au-sidebar-border: 220 13% 91%;
-	--au-sidebar-ring: 217.2 91.2% 59.8%;
-}
-.dark {
-	--au-background: 240 10% 3.9%;
-	--au-foreground: 0 0% 98%;
-	--au-card: 240 10% 3.9%;
-	--au-card-foreground: 0 0% 98%;
-	--au-popover: 240 10% 3.9%;
-	--au-popover-foreground: 0 0% 98%;
-	--au-primary: 0 0% 98%;
-	--au-primary-foreground: 240 5.9% 10%;
-	--au-secondary: 240 3.7% 15.9%;
-	--au-secondary-foreground: 0 0% 98%;
-	--au-muted: 240 3.7% 15.9%;
-	--au-muted-foreground: 240 5% 64.9%;
-	--au-accent: 240 3.7% 15.9%;
-	--au-accent-foreground: 0 0% 98%;
-	--au-destructive: 0 62.8% 30.6%;
-	--au-destructive-foreground: 0 0% 98%;
-	--au-border: 240 3.7% 15.9%;
-	--au-input: 240 3.7% 15.9%;
-	--au-ring: 240 4.9% 83.9%;
-	--au-chart-1: 220 70% 50%;
-	--au-chart-2: 160 60% 45%;
-	--au-chart-3: 30 80% 55%;
-	--au-chart-4: 280 65% 60%;
-	--au-chart-5: 340 75% 55%;
-	--au-sidebar-background: 240 5.9% 10%;
-	--au-sidebar-foreground: 240 4.8% 95.9%;
-	--au-sidebar-primary: 224.3 76.3% 48%;
-	--au-sidebar-primary-foreground: 0 0% 100%;
-	--au-sidebar-accent: 240 3.7% 15.9%;
-	--au-sidebar-accent-foreground: 240 4.8% 95.9%;
-	--au-sidebar-border: 240 3.7% 15.9%;
-	--au-sidebar-ring: 217.2 91.2% 59.8%;
-}
diff --git a/packages/autumn-js/tailwind.config.ts b/packages/autumn-js/tailwind.config.ts
deleted file mode 100644
index ff553e754..000000000
--- a/packages/autumn-js/tailwind.config.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import type { Config } from "tailwindcss";
-import tailwindAnimate from "tailwindcss-animate";
-import {
-	isolateInsideOfContainer,
-	scopedPreflightStyles,
-} from "tailwindcss-scoped-preflight";
-
-export default {
-	prefix: "au-",
-	corePlugins: {
-		preflight: false, // This removes @tailwind base completely
-	},
-	darkMode: ["class"],
-	content: ["./src/**/*.{html,js,ts,tsx}"],
-	theme: {
-		extend: {
-			colors: {
-				background: "hsl(var(--au-background))",
-				foreground: "hsl(var(--au-foreground))",
-				card: {
-					DEFAULT: "hsl(var(--au-card))",
-					foreground: "hsl(var(--au-card-foreground))",
-				},
-				popover: {
-					DEFAULT: "hsl(var(--au-popover))",
-					foreground: "hsl(var(--au-popover-foreground))",
-				},
-				primary: {
-					DEFAULT: "hsl(var(--au-primary))",
-					foreground: "hsl(var(--au-primary-foreground))",
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--au-secondary))",
-					foreground: "hsl(var(--au-secondary-foreground))",
-				},
-				muted: {
-					DEFAULT: "hsl(var(--au-muted))",
-					foreground: "hsl(var(--au-muted-foreground))",
-				},
-				accent: {
-					DEFAULT: "hsl(var(--au-accent))",
-					foreground: "hsl(var(--au-accent-foreground))",
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--au-destructive))",
-					foreground: "hsl(var(--au-destructive-foreground))",
-				},
-				border: "hsl(var(--au-border))",
-				input: "hsl(var(--au-input))",
-				ring: "hsl(var(--au-ring))",
-				chart: {
-					"1": "hsl(var(--au-chart-1))",
-					"2": "hsl(var(--au-chart-2))",
-					"3": "hsl(var(--au-chart-3))",
-					"4": "hsl(var(--au-chart-4))",
-					"5": "hsl(var(--au-chart-5))",
-				},
-			},
-			borderRadius: {
-				lg: "var(--au-radius)",
-				md: "calc(var(--au-radius) - 2px)",
-				sm: "calc(var(--au-radius) - 4px)",
-			},
-			keyframes: {
-				shine: {
-					"0%": {
-						backgroundPosition: "0% 50%",
-					},
-					"100%": {
-						backgroundPosition: "200% 50%",
-					},
-				},
-				bounceFast: {
-					"0%, 100%": {
-						transform: "translateY(0)",
-					},
-					"20%": {
-						transform: "translateY(-8px)",
-					},
-					"40%": {
-						transform: "translateY(-4px)",
-					},
-					"60%": {
-						transform: "translateY(-8px)",
-					},
-					"80%": {
-						transform: "translateY(-4px)",
-					},
-				},
-				bounceClick: {
-					"0%": {
-						transform: "scale(1)",
-					},
-					"20%": {
-						transform: "scale(0.96)",
-					},
-					"50%": {
-						transform: "scale(1.04)",
-					},
-					"100%": {
-						transform: "scale(1)",
-					},
-				},
-				"accordion-down": {
-					from: {
-						height: "0",
-					},
-					to: {
-						height: "var(--radix-accordion-content-height)",
-					},
-				},
-				"accordion-up": {
-					from: {
-						height: "var(--radix-accordion-content-height)",
-					},
-					to: {
-						height: "0",
-					},
-				},
-			},
-			animation: {
-				shine: "shine 3s ease-in-out infinite",
-				"bounce-fast": "bounceFast 0.6s cubic-bezier(0.4,0,0.6,1) infinite",
-				"bounce-click": "bounceClick 0.3s cubic-bezier(0.4,0,0.6,1)",
-				"accordion-down": "accordion-down 0.2s ease-out",
-				"accordion-up": "accordion-up 0.2s ease-out",
-			},
-		},
-	},
-	plugins: [
-		tailwindAnimate,
-		scopedPreflightStyles({
-			isolationStrategy: isolateInsideOfContainer(".au-root"),
-		}),
-	],
-} satisfies Config;
diff --git a/packages/autumn-js/tsconfig.json b/packages/autumn-js/tsconfig.json
index 86be3870e..4b7095718 100644
--- a/packages/autumn-js/tsconfig.json
+++ b/packages/autumn-js/tsconfig.json
@@ -18,15 +18,11 @@
 		"baseUrl": ".",
 		"paths": {
 			"@/*": ["src/libraries/react/*"],
-			"@/components/*": ["src/libraries/react/components/*"],
-			"@/lib/*": ["src/libraries/react/lib/*"],
 			"@/hooks/*": ["src/libraries/react/hooks/*"],
 			"@sdk": ["src/sdk/index"],
 			"@sdk/*": ["src/sdk/*"],
 			"@useautumn/sdk": ["../sdk/dist/esm/index.d.ts"],
 			"@useautumn/sdk/*": ["../sdk/dist/esm/*"],
-			"@styles": ["src/styles/*"],
-			"@compose": ["src/compose/*"],
 			"@utils/*": ["src/utils/*"]
 		}
 	},
diff --git a/packages/autumn-js/tsup.config.ts b/packages/autumn-js/tsup.config.ts
index 16bcddad6..c6237f24a 100644
--- a/packages/autumn-js/tsup.config.ts
+++ b/packages/autumn-js/tsup.config.ts
@@ -6,7 +6,6 @@ import { defineConfig, type Options } from "tsup";
 const pathAliases = {
 	"@": path.resolve("./src/libraries/react"),
 	"@sdk": path.resolve("./src/sdk"),
-	"@styles": path.resolve("./src/styles"),
 };
 
 const reactConfigs: Options[] = [
@@ -29,9 +28,9 @@ const reactConfigs: Options[] = [
 		},
 	},
 
-	// React - Index file with CSS import (CommonJS)
+	// React
 	{
-		entry: ["src/libraries/react/index.ts"],
+		entry: ["src/libraries/react/**/*.{ts,tsx}"],
 		format: ["cjs", "esm"],
 		dts: true,
 		clean: false,
@@ -41,33 +40,6 @@ const reactConfigs: Options[] = [
 		banner: {
 			js: '"use client";',
 		},
-		injectStyle: true,
-		esbuildOptions(options) {
-			options.plugins = options.plugins || [];
-			options.plugins.push(alias(pathAliases));
-			options.define = {
-				...options.define,
-				__dirname: "import.meta.dirname",
-				__filename: "import.meta.filename",
-			};
-		},
-	},
-
-	// React - Other files without CSS import
-	{
-		entry: [
-			"src/libraries/react/**/*.{ts,tsx}",
-			"!src/libraries/react/index.ts",
-		],
-		format: ["cjs", "esm"],
-		dts: true,
-		clean: false,
-		outDir: "./dist/libraries/react",
-		external: ["react", "react/jsx-runtime", "react-dom"],
-		bundle: true,
-		banner: {
-			js: '"use client";\n',
-		},
 		esbuildOptions(options) {
 			options.plugins = options.plugins || [];
 			options.plugins.push(alias(pathAliases));
@@ -146,13 +118,4 @@ export default defineConfig([
 	//   },
 	// },
 	...reactConfigs,
-
-	// Styles - Properly process CSS with PostCSS and Tailwind
-	{
-		entry: ["src/styles/global.css"],
-		format: ["esm", "cjs"],
-		outDir: "./dist/styles",
-		clean: false,
-		bundle: true,
-	},
 ]);
diff --git a/packages/autumn-js/tsup.dev.config.ts b/packages/autumn-js/tsup.dev.config.ts
index 27e97dc8d..bcb60aa15 100644
--- a/packages/autumn-js/tsup.dev.config.ts
+++ b/packages/autumn-js/tsup.dev.config.ts
@@ -6,7 +6,6 @@ import { defineConfig, type Options } from "tsup";
 const pathAliases = {
 	"@": path.resolve("./src/libraries/react"),
 	"@sdk": path.resolve("./src/sdk"),
-	"@styles": path.resolve("./src/styles"),
 };
 
 const reactConfigs: Options[] = [
@@ -25,52 +24,9 @@ const reactConfigs: Options[] = [
 		},
 	},
 
-	// React - Index file with CSS import (CommonJS)
+	// React
 	{
-		entry: ["src/libraries/react/index.ts"],
-		format: ["cjs"],
-		dts: false,
-		clean: false,
-		outDir: "./dist/libraries/react",
-		external: ["react", "react/jsx-runtime", "react-dom"],
-		bundle: true,
-		banner: {
-			// js: '"use client";\nrequire("../../styles/global.css");',
-			js: '"use client";',
-		},
-		injectStyle: true,
-		esbuildOptions(options) {
-			options.plugins = options.plugins || [];
-			options.plugins.push(alias(pathAliases));
-		},
-	},
-
-	// React - Index file with CSS import (ESM)
-	{
-		entry: ["src/libraries/react/index.ts"],
-		format: ["esm"],
-		dts: false, // Only generate types once
-		clean: false,
-		outDir: "./dist/libraries/react",
-		external: ["react", "react/jsx-runtime", "react-dom"],
-		bundle: true,
-		banner: {
-			// js: '"use client";\nimport "../../styles/global.css";',
-			js: '"use client";',
-		},
-		injectStyle: true,
-		esbuildOptions(options) {
-			options.plugins = options.plugins || [];
-			options.plugins.push(alias(pathAliases));
-		},
-	},
-
-	// React - Other files without CSS import
-	{
-		entry: [
-			"src/libraries/react/**/*.{ts,tsx}",
-			"!src/libraries/react/index.ts",
-		],
+		entry: ["src/libraries/react/**/*.{ts,tsx}"],
 		format: ["cjs", "esm"],
 		dts: false,
 		clean: false,
@@ -78,7 +34,7 @@ const reactConfigs: Options[] = [
 		external: ["react", "react/jsx-runtime", "react-dom"],
 		bundle: true,
 		banner: {
-			js: '"use client";\n',
+			js: '"use client";',
 		},
 		esbuildOptions(options) {
 			options.plugins = options.plugins || [];
@@ -124,13 +80,4 @@ export default defineConfig([
 	},
 
 	...reactConfigs,
-
-	// Styles - Properly process CSS with PostCSS and Tailwind
-	{
-		entry: ["src/styles/global.css"],
-		format: ["esm", "cjs"],
-		outDir: "./dist/styles",
-		clean: false,
-		bundle: true,
-	},
 ]);
diff --git a/packages/sdk/.speakeasy/gen.lock b/packages/sdk/.speakeasy/gen.lock
index b598869a0..335dc136e 100644
--- a/packages/sdk/.speakeasy/gen.lock
+++ b/packages/sdk/.speakeasy/gen.lock
@@ -5,12 +5,12 @@ management:
   docVersion: 2.1.0
   speakeasyVersion: 1.718.0
   generationVersion: 2.824.1
-  releaseVersion: 0.7.20
-  configChecksum: 0b4fb6dcfb9d39ab7b3d33663bd406b2
+  releaseVersion: 0.7.21
+  configChecksum: e8cca01036abd5005433bf1ece03cd66
 persistentEdits:
-  generation_id: a47f16dc-6445-4109-b975-2d3d49434c47
-  pristine_commit_hash: 11ad79633a20a21e4ef703ce48922a924c341aa5
-  pristine_tree_hash: 1e6fc7ba17b211330e97103160441cbef1c2b0dc
+  generation_id: fdaf92d1-ceb4-49de-8dfe-55b357a0d4ff
+  pristine_commit_hash: 242296df70c8de64ebe278e67e9d4dc7577c9d44
+  pristine_tree_hash: 6cb3cef2e6e543695cf6556d8074305fcd2674d3
 features:
   typescript:
     additionalDependencies: 0.1.0
@@ -495,12 +495,12 @@ trackedFiles:
     pristine_git_object: 900d545ed58929951e2208e1bec791cb264429a4
   jsr.json:
     id: 7f6ab7767282
-    last_write_checksum: sha1:2e89abed613d4deac741401a416279b68cfa9e72
-    pristine_git_object: 93b86e0cdade6cd1d8a890fc839d4b485097a5fb
+    last_write_checksum: sha1:6b889588e192e634404e76cef8eae2dad35bbf00
+    pristine_git_object: 78d9932c46bb7d1e5bf248ff7a6566f6f2c27227
   package.json:
     id: 7030d0b2f71b
-    last_write_checksum: sha1:0352148b93072588870244e5f8189426040f3582
-    pristine_git_object: 9ef6629935a084177973f29c3964fcf927dc2efb
+    last_write_checksum: sha1:06888652d920aebda539176536409eafd46fe289
+    pristine_git_object: 19e39bcec4382c83a2e327cc4b4e50a261ef0dbc
   src/core.ts:
     id: f431fdbcd144
     last_write_checksum: sha1:f8f24a3ca09c1efb285d7a75ad3697d0128f47e2
@@ -539,8 +539,8 @@ trackedFiles:
     pristine_git_object: 44be0eae8246521b230e8e711a88eff738fc015d
   src/lib/config.ts:
     id: 320761608fb3
-    last_write_checksum: sha1:027a62f4a5a0c604e17486a65b11de580239e35d
-    pristine_git_object: 138841a530619f3d549f4bb45d7ea82bbd45eae4
+    last_write_checksum: sha1:3146368c59049d4922e647a6175a4cbd0e00ac87
+    pristine_git_object: 8c542a4cd3d4fa86acf95b463a05495ac3e3831b
   src/lib/dlv.ts:
     id: b1988214835a
     last_write_checksum: sha1:1dd3e3fbb4550c4bf31f5ef997faff355d6f3250
diff --git a/packages/sdk/.speakeasy/gen.yaml b/packages/sdk/.speakeasy/gen.yaml
index b34bcba3f..f02e6af38 100644
--- a/packages/sdk/.speakeasy/gen.yaml
+++ b/packages/sdk/.speakeasy/gen.yaml
@@ -33,7 +33,7 @@ generation:
     generateNewTests: true
     skipResponseBodyAssertions: false
 typescript:
-  version: 0.7.20
+  version: 0.7.21
   acceptHeaderEnum: false
   additionalDependencies:
     dependencies: {}
diff --git a/packages/sdk/.speakeasy/workflow.lock b/packages/sdk/.speakeasy/workflow.lock
index 7f3e0d05c..de32a5e39 100644
--- a/packages/sdk/.speakeasy/workflow.lock
+++ b/packages/sdk/.speakeasy/workflow.lock
@@ -14,7 +14,7 @@ targets:
         sourceRevisionDigest: sha256:870cf5d97b4095695b870c563c519e87267e9b61c1c77e0702ba713ed5016249
         sourceBlobDigest: sha256:d056cbb523f45acbfe06ad522417e87c888e233cb9d39800b0879a0f03715b15
         codeSamplesNamespace: autumn-api-typescript-code-samples
-        codeSamplesRevisionDigest: sha256:57f6c87bf54eebe3cc8972b4b752cc5c8acbb5579db5a72c62712c09a7535c4c
+        codeSamplesRevisionDigest: sha256:e389b775535782501dd362726e1aa4392a9d3ac8cda59fcbdb12aa06d8f6c7b3
 workflow:
     workflowVersion: 1.0.0
     speakeasyVersion: latest
diff --git a/packages/sdk/jsr.json b/packages/sdk/jsr.json
index 93b86e0cd..78d9932c4 100644
--- a/packages/sdk/jsr.json
+++ b/packages/sdk/jsr.json
@@ -2,7 +2,7 @@
 
 {
   "name": "@useautumn/sdk",
-  "version": "0.7.20",
+  "version": "0.7.21",
   "exports": {
     ".": "./src/index.ts",    
     "./models": "./src/models/index.ts",
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index ac51ae52a..d550f7a49 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@useautumn/sdk",
-  "version": "0.7.20",
+  "version": "0.7.21",
   "author": "Speakeasy",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/esm/index.js",
diff --git a/packages/sdk/src/lib/config.ts b/packages/sdk/src/lib/config.ts
index 138841a53..8c542a4cd 100644
--- a/packages/sdk/src/lib/config.ts
+++ b/packages/sdk/src/lib/config.ts
@@ -66,7 +66,7 @@ export function serverURLFromOptions(options: SDKOptions): URL | null {
 export const SDK_METADATA = {
   language: "typescript",
   openapiDocVersion: "2.1.0",
-  sdkVersion: "0.7.20",
+  sdkVersion: "0.7.21",
   genVersion: "2.824.1",
-  userAgent: "speakeasy-sdk/typescript 0.7.20 2.824.1 2.1.0 @useautumn/sdk",
+  userAgent: "speakeasy-sdk/typescript 0.7.21 2.824.1 2.1.0 @useautumn/sdk",
 } as const;