Fixing issues with react demo

examples/next/src/app/globals.css

@@ -5,7 +5,7 @@
 }
 
 body {
-  background-color: var(--seq-colors-background-primary);
+  background-color: var(--seq-color-background-primary);
   margin: 0;
   padding: 0;
 }

examples/react/package.json

@@ -14,14 +14,16 @@
     "@0xsequence/design-system": "^2.0.1",
     "@0xsequence/kit": "workspace:*",
     "@0xsequence/kit-checkout": "workspace:*",
-    "@0xsequence/kit-wallet": "workspace:*",
     "@0xsequence/kit-example-shared-components": "workspace:*",
-    "@tanstack/react-query": "^5.37.1",
+    "@0xsequence/kit-wallet": "workspace:*",
     "@0xsequence/network": ">= 2.2.4",
     "@0xsequence/waas": ">= 2.2.4",
+    "@tanstack/react-query": "^5.37.1",
+    "clsx": "^2.1.1",
     "motion": "^12.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwindcss": "^4.0.6",
     "typescript": "^5.4.5",
     "viem": "^2.12.0",
     "wagmi": "^2.13.3"

examples/react/src/components/Homepage.tsx

@@ -1,6 +1,7 @@
 import { Button, Card, Text, Image, useTheme, CheckmarkIcon } from '@0xsequence/design-system'
 import { useKitWallets, useOpenConnectModal, WalletType } from '@0xsequence/kit'
 import { Footer } from '@0xsequence/kit-example-shared-components'
+import { clsx } from 'clsx'
 
 import { Connected } from './Connected'
 
@@ -80,13 +81,9 @@ const WalletTypeSelect = (props: WalletTypeSelectProps) => {
 
   return (
     <Card
-      className="w-full border-2"
+      className={clsx('w-full border-2', isSelected && 'border-[rgb(127,59,200)] shadow-[0_0_24px_rgb(127_59_158_/_0.8)]')}
       clickable
       outlined
-      style={{
-        boxShadow: isSelected ? '0 0 24px rgb(127 59 158 / 0.8)' : 'none',
-        borderColor: isSelected ? 'rgb(127 59 200)' : 'var(--seq-colors-border-normal)'
-      }}
       onClick={() => onClick(type)}
     >
       <div className="flex gap-2">
@@ -98,7 +95,7 @@ const WalletTypeSelect = (props: WalletTypeSelectProps) => {
             <div>{description}</div>
           </Text>
         </div>
-        <CheckmarkIcon size="md" style={{ color: 'rgb(127 59 200)' }} visibility={isSelected ? 'visible' : 'hidden'} />
+        <CheckmarkIcon className={clsx('text-[rgb(127_59_200)]', !isSelected && 'hidden')} size="md" />
       </div>
     </Card>
   )

examples/react/src/index.css

@@ -1,8 +1,4 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+@import 'tailwindcss';
 
 body {
   margin: 0;

packages/kit/package.json

@@ -33,7 +33,7 @@
     "build:types": "tsc --declaration --declarationMap --emitDeclarationOnly --declarationDir dist/types/",
     "build:css": "tailwindcss -i ./src/index.css -o ./dist/styles.css",
     "build:clean": "rimraf -g ./dist",
-    "dev": "pnpm build:types && pnpm build:copy-styles && tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm/ --declarationDir dist/types/",
+    "dev": "pnpm build:types && pnpm build:css && tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm/ --declarationDir dist/types/",
     "test": "echo",
     "typecheck": "tsc --noEmit"
   },