fix: ssr className mismatch issues

apps/react-nextjs-pages-router/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

apps/react-nextjs-example/package.json → apps/react-nextjs-pages-router/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-nextjs-example",
+  "name": "react-nextjs-pages-router",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,21 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@interchain-ui/react": "link:../../packages/react",
-    "clsx": "^2.1.0",
-    "next": "14.1.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "next": "14.2.13",
+    "@interchain-ui/react": "workspace:*"
   },
   "devDependencies": {
+    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.4",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.13"
   }
 }

apps/react-nextjs-pages-router/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/react-nextjs-pages-router/src/pages/_app.tsx

@@ -0,0 +1,37 @@
+import "@/styles/globals.css";
+import "@interchain-ui/react/styles";
+import clsx from "clsx";
+import { ThemeProvider, Box, IconButton, useTheme } from "@interchain-ui/react";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+  const { theme, themeClass, setTheme } = useTheme();
+
+  return (
+    <ThemeProvider>
+      <div className={clsx("app", themeClass)}>
+        <Box
+          position="relative"
+          backgroundColor={theme == "dark" ? "$gray700" : "$white"}
+        >
+          <Component {...pageProps} />
+
+          <Box position="absolute" top="$4" right="$6">
+            <IconButton
+              variant="ghost"
+              intent="secondary"
+              size="sm"
+              icon={theme === "dark" ? "sunLine" : "moonLine"}
+              onClick={() => {
+                if (theme === "light") {
+                  return setTheme("dark");
+                }
+                return setTheme("light");
+              }}
+            />
+          </Box>
+        </Box>
+      </div>
+    </ThemeProvider>
+  );
+}